roi-theme/wp-content/plugins/PDFEmbedder-premium-secure/assets/js/viewer/secondary_toolbar.js

/* Copyright 2012 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { ScrollMode, SpreadMode } from './ui_utils.js';
import { CursorTool } from './pdf_cursor_tools.js';
import { PagesCountLimit } from './base_viewer.js';

/**
 * @typedef {Object} SecondaryToolbarOptions
 * @property {HTMLDivElement} toolbar - Container for the secondary toolbar.
 * @property {HTMLButtonElement} toggleButton - Button to toggle the visibility
 *   of the secondary toolbar.
 * @property {HTMLButtonElement} presentationModeButton - Button for entering
 *   presentation mode.
 * @property {HTMLButtonElement} openFileButton - Button to open a file.
 * @property {HTMLButtonElement} printButton - Button to print the document.
 * @property {HTMLButtonElement} downloadButton - Button to download the
 *   document.
 * @property {HTMLAnchorElement} viewBookmarkButton - Button to obtain a
 *   bookmark link to the current location in the document.
 * @property {HTMLButtonElement} firstPageButton - Button to go to the first
 *   page in the document.
 * @property {HTMLButtonElement} lastPageButton - Button to go to the last page
 *   in the document.
 * @property {HTMLButtonElement} pageRotateCwButton - Button to rotate the pages
 *   clockwise.
 * @property {HTMLButtonElement} pageRotateCcwButton - Button to rotate the
 *   pages counterclockwise.
 * @property {HTMLButtonElement} cursorSelectToolButton - Button to enable the
 *   select tool.
 * @property {HTMLButtonElement} cursorHandToolButton - Button to enable the
 *   hand tool.
 * @property {HTMLButtonElement} documentPropertiesButton - Button for opening
 *   the document properties dialog.
 */

class SecondaryToolbar {
	/**
	 * @param {SecondaryToolbarOptions} options
	 * @param {EventBus} eventBus
	 */
	constructor(options, eventBus) {
		this.toolbar = options.toolbar;
		this.toggleButton = options.toggleButton;
		this.buttons = [
			{
				element: options.presentationModeButton,
				eventName: 'presentationmode',
				close: true,
			},
			{ element: options.printButton, eventName: 'print', close: true },
			{
				element: options.downloadButton,
				eventName: 'download',
				close: true,
			},
			{
				element: options.viewBookmarkButton,
				eventName: null,
				close: true,
			},
			{
				element: options.firstPageButton,
				eventName: 'firstpage',
				close: true,
			},
			{
				element: options.lastPageButton,
				eventName: 'lastpage',
				close: true,
			},
			{
				element: options.pageRotateCwButton,
				eventName: 'rotatecw',
				close: false,
			},
			{
				element: options.pageRotateCcwButton,
				eventName: 'rotateccw',
				close: false,
			},
			{
				element: options.cursorSelectToolButton,
				eventName: 'switchcursortool',
				eventDetails: { tool: CursorTool.SELECT },
				close: true,
			},
			{
				element: options.cursorHandToolButton,
				eventName: 'switchcursortool',
				eventDetails: { tool: CursorTool.HAND },
				close: true,
			},
			{
				element: options.scrollPageButton,
				eventName: 'switchscrollmode',
				eventDetails: { mode: ScrollMode.PAGE },
				close: true,
			},
			{
				element: options.scrollVerticalButton,
				eventName: 'switchscrollmode',
				eventDetails: { mode: ScrollMode.VERTICAL },
				close: true,
			},
			{
				element: options.scrollHorizontalButton,
				eventName: 'switchscrollmode',
				eventDetails: { mode: ScrollMode.HORIZONTAL },
				close: true,
			},
			{
				element: options.scrollWrappedButton,
				eventName: 'switchscrollmode',
				eventDetails: { mode: ScrollMode.WRAPPED },
				close: true,
			},
			{
				element: options.spreadNoneButton,
				eventName: 'switchspreadmode',
				eventDetails: { mode: SpreadMode.NONE },
				close: true,
			},
			{
				element: options.spreadOddButton,
				eventName: 'switchspreadmode',
				eventDetails: { mode: SpreadMode.ODD },
				close: true,
			},
			{
				element: options.spreadEvenButton,
				eventName: 'switchspreadmode',
				eventDetails: { mode: SpreadMode.EVEN },
				close: true,
			},
			{
				element: options.documentPropertiesButton,
				eventName: 'documentproperties',
				close: true,
			},
		];
		if (typeof PDFJSDev === 'undefined' || PDFJSDev.test('GENERIC')) {
			this.buttons.push({
				element: options.openFileButton,
				eventName: 'openfile',
				close: true,
			});
		}
		this.items = {
			firstPage: options.firstPageButton,
			lastPage: options.lastPageButton,
			pageRotateCw: options.pageRotateCwButton,
			pageRotateCcw: options.pageRotateCcwButton,
		};

		this.eventBus = eventBus;
		this.opened = false;

		// Bind the event listeners for click, cursor tool, and scroll/spread mode
		// actions.
		this.#bindClickListeners();
		this.#bindCursorToolsListener(options);
		this.#bindScrollModeListener(options);
		this.#bindSpreadModeListener(options);

		this.reset();
	}

	/**
	 * @type {boolean}
	 */
	get isOpen() {
		return this.opened;
	}

	setPageNumber(pageNumber) {
		this.pageNumber = pageNumber;
		this.#updateUIState();
	}

	setPagesCount(pagesCount) {
		this.pagesCount = pagesCount;
		this.#updateUIState();
	}

	reset() {
		this.pageNumber = 0;
		this.pagesCount = 0;
		this.#updateUIState();

		// Reset the Scroll/Spread buttons too, since they're document specific.
		this.eventBus.dispatch('secondarytoolbarreset', { source: this });
	}

	#updateUIState() {
		this.items.firstPage.disabled = this.pageNumber <= 1;
		this.items.lastPage.disabled = this.pageNumber >= this.pagesCount;
		this.items.pageRotateCw.disabled = this.pagesCount === 0;
		this.items.pageRotateCcw.disabled = this.pagesCount === 0;
	}

	#bindClickListeners() {
		// Button to toggle the visibility of the secondary toolbar.
		this.toggleButton.addEventListener('click', this.toggle.bind(this));

		// All items within the secondary toolbar.
		for (const { element, eventName, close, eventDetails } of this
			.buttons) {
			element.addEventListener('click', (evt) => {
				if (eventName !== null) {
					const details = { source: this };
					for (const property in eventDetails) {
						details[property] = eventDetails[property];
					}
					this.eventBus.dispatch(eventName, details);
				}
				if (close) {
					this.close();
				}
			});
		}
	}

	#bindCursorToolsListener({ cursorSelectToolButton, cursorHandToolButton }) {
		this.eventBus._on('cursortoolchanged', function ({ tool }) {
			const isSelect = tool === CursorTool.SELECT,
				isHand = tool === CursorTool.HAND;

			cursorSelectToolButton.classList.toggle('toggled', isSelect);
			cursorHandToolButton.classList.toggle('toggled', isHand);

			cursorSelectToolButton.setAttribute('aria-checked', isSelect);
			cursorHandToolButton.setAttribute('aria-checked', isHand);
		});
	}

	#bindScrollModeListener({
		scrollPageButton,
		scrollVerticalButton,
		scrollHorizontalButton,
		scrollWrappedButton,
		spreadNoneButton,
		spreadOddButton,
		spreadEvenButton,
	}) {
		const scrollModeChanged = ({ mode }) => {
			const isPage = mode === ScrollMode.PAGE,
				isVertical = mode === ScrollMode.VERTICAL,
				isHorizontal = mode === ScrollMode.HORIZONTAL,
				isWrapped = mode === ScrollMode.WRAPPED;

			scrollPageButton.classList.toggle('toggled', isPage);
			scrollVerticalButton.classList.toggle('toggled', isVertical);
			scrollHorizontalButton.classList.toggle('toggled', isHorizontal);
			scrollWrappedButton.classList.toggle('toggled', isWrapped);

			scrollPageButton.setAttribute('aria-checked', isPage);
			scrollVerticalButton.setAttribute('aria-checked', isVertical);
			scrollHorizontalButton.setAttribute('aria-checked', isHorizontal);
			scrollWrappedButton.setAttribute('aria-checked', isWrapped);

			// Permanently *disable* the Scroll buttons when PAGE-scrolling is being
			// enforced for *very* long/large documents; please see the `BaseViewer`.
			const forceScrollModePage =
				this.pagesCount > PagesCountLimit.FORCE_SCROLL_MODE_PAGE;
			scrollPageButton.disabled = forceScrollModePage;
			scrollVerticalButton.disabled = forceScrollModePage;
			scrollHorizontalButton.disabled = forceScrollModePage;
			scrollWrappedButton.disabled = forceScrollModePage;

			// Temporarily *disable* the Spread buttons when horizontal scrolling is
			// enabled, since the non-default Spread modes doesn't affect the layout.
			spreadNoneButton.disabled = isHorizontal;
			spreadOddButton.disabled = isHorizontal;
			spreadEvenButton.disabled = isHorizontal;
		};
		this.eventBus._on('scrollmodechanged', scrollModeChanged);

		this.eventBus._on('secondarytoolbarreset', (evt) => {
			if (evt.source === this) {
				scrollModeChanged({ mode: ScrollMode.VERTICAL });
			}
		});
	}

	#bindSpreadModeListener({
		spreadNoneButton,
		spreadOddButton,
		spreadEvenButton,
	}) {
		function spreadModeChanged({ mode }) {
			const isNone = mode === SpreadMode.NONE,
				isOdd = mode === SpreadMode.ODD,
				isEven = mode === SpreadMode.EVEN;

			spreadNoneButton.classList.toggle('toggled', isNone);
			spreadOddButton.classList.toggle('toggled', isOdd);
			spreadEvenButton.classList.toggle('toggled', isEven);

			spreadNoneButton.setAttribute('aria-checked', isNone);
			spreadOddButton.setAttribute('aria-checked', isOdd);
			spreadEvenButton.setAttribute('aria-checked', isEven);
		}
		this.eventBus._on('spreadmodechanged', spreadModeChanged);

		this.eventBus._on('secondarytoolbarreset', (evt) => {
			if (evt.source === this) {
				spreadModeChanged({ mode: SpreadMode.NONE });
			}
		});
	}

	open() {
		if (this.opened) {
			return;
		}
		this.opened = true;
		this.toggleButton.classList.add('toggled');
		this.toggleButton.setAttribute('aria-expanded', 'true');
		this.toolbar.classList.remove('hidden');
	}

	close() {
		if (!this.opened) {
			return;
		}
		this.opened = false;
		this.toolbar.classList.add('hidden');
		this.toggleButton.classList.remove('toggled');
		this.toggleButton.setAttribute('aria-expanded', 'false');
	}

	toggle() {
		if (this.opened) {
			this.close();
		} else {
			this.open();
		}
	}
}

export { SecondaryToolbar };