diff --git a/web/app.js b/web/app.js index 7bce5c4ce..d61bdfdd9 100644 --- a/web/app.js +++ b/web/app.js @@ -267,8 +267,8 @@ var PDFViewerApplication = { this.pdfDocumentProperties = new PDFDocumentProperties(appConfig.documentProperties); - SecondaryToolbar.initialize(appConfig.secondaryToolbar, eventBus); - this.secondaryToolbar = SecondaryToolbar; + this.secondaryToolbar = + new SecondaryToolbar(appConfig.secondaryToolbar, eventBus); if (this.supportsFullscreen) { this.pdfPresentationMode = new PDFPresentationMode({ @@ -1332,14 +1332,14 @@ function webViewerInitialized() { if (!window.File || !window.FileReader || !window.FileList || !window.Blob) { appConfig.toolbar.openFile.setAttribute('hidden', 'true'); - appConfig.secondaryToolbar.openFile.setAttribute('hidden', 'true'); + appConfig.secondaryToolbar.openFileButton.setAttribute('hidden', 'true'); } else { fileInput.value = null; } //#else //appConfig.toolbar.openFile.setAttribute('hidden', 'true'); -//appConfig.secondaryToolbar.openFile.setAttribute('hidden', 'true'); +//appConfig.secondaryToolbar.openFileButton.setAttribute('hidden', 'true'); //#endif var PDFJS = pdfjsLib.PDFJS; @@ -1429,7 +1429,7 @@ function webViewerInitialized() { if (!PDFViewerApplication.supportsPrinting) { appConfig.toolbar.print.classList.add('hidden'); - appConfig.secondaryToolbar.print.classList.add('hidden'); + appConfig.secondaryToolbar.printButton.classList.add('hidden'); } if (!PDFViewerApplication.supportsFullscreen) { @@ -1722,7 +1722,8 @@ function webViewerUpdateViewarea(e) { var href = PDFViewerApplication.pdfLinkService.getAnchorUrl(location.pdfOpenParams); PDFViewerApplication.appConfig.toolbar.viewBookmark.href = href; - PDFViewerApplication.appConfig.secondaryToolbar.viewBookmark.href = href; + PDFViewerApplication.appConfig.secondaryToolbar.viewBookmarkButton.href = + href; // Update the current bookmark in the browsing history. PDFViewerApplication.pdfHistory.updateCurrentBookmark(location.pdfOpenParams, @@ -1762,7 +1763,8 @@ function webViewerResize() { } // Set the 'max-height' CSS property of the secondary toolbar. - SecondaryToolbar.setMaxHeight(PDFViewerApplication.appConfig.mainContainer); + var mainContainer = PDFViewerApplication.appConfig.mainContainer; + PDFViewerApplication.secondaryToolbar.setMaxHeight(mainContainer); } window.addEventListener('hashchange', function webViewerHashchange(evt) { @@ -1816,9 +1818,9 @@ function webViewerFileInputChange(e) { // URL does not reflect proper document location - hiding some icons. var appConfig = PDFViewerApplication.appConfig; appConfig.toolbar.viewBookmark.setAttribute('hidden', 'true'); - appConfig.secondaryToolbar.viewBookmark.setAttribute('hidden', 'true'); + appConfig.secondaryToolbar.viewBookmarkButton.setAttribute('hidden', 'true'); appConfig.toolbar.download.setAttribute('hidden', 'true'); - appConfig.secondaryToolbar.download.setAttribute('hidden', 'true'); + appConfig.secondaryToolbar.downloadButton.setAttribute('hidden', 'true'); } //#endif @@ -1863,7 +1865,8 @@ function webViewerLocalized() { } // Set the 'max-height' CSS property of the secondary toolbar. - SecondaryToolbar.setMaxHeight(PDFViewerApplication.appConfig.mainContainer); + var mainContainer = PDFViewerApplication.appConfig.mainContainer; + PDFViewerApplication.secondaryToolbar.setMaxHeight(mainContainer); }); } @@ -2010,14 +2013,14 @@ window.addEventListener('DOMMouseScroll', handleMouseWheel); window.addEventListener('mousewheel', handleMouseWheel); window.addEventListener('click', function click(evt) { - if (!SecondaryToolbar.opened) { + if (!PDFViewerApplication.secondaryToolbar.isOpen) { return; } var appConfig = PDFViewerApplication.appConfig; if (PDFViewerApplication.pdfViewer.containsElement(evt.target) || (appConfig.toolbar.container.contains(evt.target) && evt.target !== appConfig.secondaryToolbar.toggleButton)) { - SecondaryToolbar.close(); + PDFViewerApplication.secondaryToolbar.close(); } }, true); @@ -2160,8 +2163,8 @@ window.addEventListener('keydown', function keydown(evt) { handled = true; break; case 27: // esc key - if (SecondaryToolbar.opened) { - SecondaryToolbar.close(); + if (PDFViewerApplication.secondaryToolbar.isOpen) { + PDFViewerApplication.secondaryToolbar.close(); handled = true; } if (!PDFViewerApplication.supportsIntegratedFind && diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js index ea7bd8335..a1da36389 100644 --- a/web/secondary_toolbar.js +++ b/web/secondary_toolbar.js @@ -29,173 +29,170 @@ var SCROLLBAR_PADDING = uiUtils.SCROLLBAR_PADDING; var mozL10n = uiUtils.mozL10n; -var SecondaryToolbar = { - opened: false, - previousContainerHeight: null, - newContainerHeight: null, +/** + * @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 {HTMLLinkElement} 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} toggleHandToolButton - Button to toggle the + * hand tool. + * @property {HTMLButtonElement} documentPropertiesButton - Button for opening + * the document properties dialog. + */ - initialize: function secondaryToolbarInitialize(options, eventBus) { - this.eventBus = eventBus; +/** + * @class + */ +var SecondaryToolbar = (function SecondaryToolbarClosure() { + /** + * @constructs SecondaryToolbar + * @param {SecondaryToolbarOptions} options + * @param {EventBus} eventBus + */ + function SecondaryToolbar(options, eventBus) { this.toolbar = options.toolbar; - this.buttonContainer = this.toolbar.firstElementChild; - - // Define the toolbar buttons. this.toggleButton = options.toggleButton; - this.presentationModeButton = options.presentationModeButton; - this.openFile = options.openFile; - this.print = options.print; - this.download = options.download; - this.viewBookmark = options.viewBookmark; - this.firstPage = options.firstPage; - this.lastPage = options.lastPage; - this.pageRotateCw = options.pageRotateCw; - this.pageRotateCcw = options.pageRotateCcw; - this.toggleHandTool = options.toggleHandTool; - this.documentPropertiesButton = options.documentPropertiesButton; - - // Attach the event listeners. - var elements = [ - // Button to toggle the visibility of the secondary toolbar: - { element: this.toggleButton, handler: this.toggle }, - // All items within the secondary toolbar - { element: this.presentationModeButton, - handler: this.presentationModeClick }, - { element: this.openFile, handler: this.openFileClick }, - { element: this.print, handler: this.printClick }, - { element: this.download, handler: this.downloadClick }, - { element: this.viewBookmark, handler: this.viewBookmarkClick }, - { element: this.firstPage, handler: this.firstPageClick }, - { element: this.lastPage, handler: this.lastPageClick }, - { element: this.pageRotateCw, handler: this.pageRotateCwClick }, - { element: this.pageRotateCcw, handler: this.pageRotateCcwClick }, - { element: this.toggleHandTool, handler: this.toggleHandToolClick }, - { element: this.documentPropertiesButton, - handler: this.documentPropertiesClick } + this.buttons = [ + { element: options.presentationModeButton, eventName: 'presentationmode', + close: true }, + { element: options.openFileButton, eventName: 'openfile', 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.toggleHandToolButton, eventName: 'togglehandtool', + close: true }, + { element: options.documentPropertiesButton, + eventName: 'documentproperties', close: true } ]; - for (var item in elements) { - var element = elements[item].element; - if (element) { - element.addEventListener('click', elements[item].handler.bind(this)); - } - } + this.eventBus = eventBus; - // Tracking hand tool menu item changes. - var isHandToolActive = false; - this.eventBus.on('handtoolchanged', function (e) { - if (isHandToolActive === e.isActive) { + this.opened = false; + this.previousContainerHeight = null; + this.newContainerHeight = null; + this.buttonContainer = this.toolbar.firstElementChild; + + // Bind the event listeners for click and hand tool actions. + this._bindClickListeners(); + this._bindHandToolListener(options.toggleHandToolButton); + } + + SecondaryToolbar.prototype = { + /** + * @return {boolean} + */ + get isOpen() { + return this.opened; + }, + + _bindClickListeners: function SecondaryToolbar_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 (var button in this.buttons) { + var element = this.buttons[button].element; + var eventName = this.buttons[button].eventName; + var close = this.buttons[button].close; + + element.addEventListener('click', function (eventName, close) { + if (eventName !== null) { + this.eventBus.dispatch(eventName); + } + if (close) { + this.close(); + } + }.bind(this, eventName, close)); + } + }, + + _bindHandToolListener: + function SecondaryToolbar_bindHandToolListener(toggleHandToolButton) { + var isHandToolActive = false; + this.eventBus.on('handtoolchanged', function (e) { + if (isHandToolActive === e.isActive) { + return; + } + isHandToolActive = e.isActive; + if (isHandToolActive) { + toggleHandToolButton.title = + mozL10n.get('hand_tool_disable.title', null, 'Disable hand tool'); + toggleHandToolButton.firstElementChild.textContent = + mozL10n.get('hand_tool_disable_label', null, 'Disable hand tool'); + } else { + toggleHandToolButton.title = + mozL10n.get('hand_tool_enable.title', null, 'Enable hand tool'); + toggleHandToolButton.firstElementChild.textContent = + mozL10n.get('hand_tool_enable_label', null, 'Enable hand tool'); + } + }.bind(this)); + }, + + open: function SecondaryToolbar_open() { + if (this.opened) { return; } - isHandToolActive = e.isActive; - if (isHandToolActive) { - this.toggleHandTool.title = - mozL10n.get('hand_tool_disable.title', null, 'Disable hand tool'); - this.toggleHandTool.firstElementChild.textContent = - mozL10n.get('hand_tool_disable_label', null, 'Disable hand tool'); - } else { - this.toggleHandTool.title = - mozL10n.get('hand_tool_enable.title', null, 'Enable hand tool'); - this.toggleHandTool.firstElementChild.textContent = - mozL10n.get('hand_tool_enable_label', null, 'Enable hand tool'); + this.opened = true; + this.toggleButton.classList.add('toggled'); + this.toolbar.classList.remove('hidden'); + }, + + close: function SecondaryToolbar_close() { + if (!this.opened) { + return; } - }.bind(this)); - }, + this.opened = false; + this.toolbar.classList.add('hidden'); + this.toggleButton.classList.remove('toggled'); + }, - // Event handling functions. - presentationModeClick: function secondaryToolbarPresentationModeClick(evt) { - this.eventBus.dispatch('presentationmode'); - this.close(); - }, + toggle: function SecondaryToolbar_toggle() { + if (this.opened) { + this.close(); + } else { + this.open(); + } + }, - openFileClick: function secondaryToolbarOpenFileClick(evt) { - this.eventBus.dispatch('openfile'); - this.close(); - }, - - printClick: function secondaryToolbarPrintClick(evt) { - this.eventBus.dispatch('print'); - this.close(); - }, - - downloadClick: function secondaryToolbarDownloadClick(evt) { - this.eventBus.dispatch('download'); - this.close(); - }, - - viewBookmarkClick: function secondaryToolbarViewBookmarkClick(evt) { - this.close(); - }, - - firstPageClick: function secondaryToolbarFirstPageClick(evt) { - this.eventBus.dispatch('firstpage'); - this.close(); - }, - - lastPageClick: function secondaryToolbarLastPageClick(evt) { - this.eventBus.dispatch('lastpage'); - this.close(); - }, - - pageRotateCwClick: function secondaryToolbarPageRotateCwClick(evt) { - this.eventBus.dispatch('rotatecw'); - }, - - pageRotateCcwClick: function secondaryToolbarPageRotateCcwClick(evt) { - this.eventBus.dispatch('rotateccw'); - }, - - toggleHandToolClick: function secondaryToolbarToggleHandToolClick(evt) { - this.eventBus.dispatch('togglehandtool'); - this.close(); - }, - - documentPropertiesClick: function secondaryToolbarDocumentPropsClick(evt) { - this.eventBus.dispatch('documentproperties'); - this.close(); - }, - - // Misc. functions for interacting with the toolbar. - setMaxHeight: function secondaryToolbarSetMaxHeight(container) { - if (!container || !this.buttonContainer) { - return; + setMaxHeight: function SecondaryToolbar_setMaxHeight(container) { + if (!container || !this.buttonContainer) { + return; + } + this.newContainerHeight = container.clientHeight; + if (this.previousContainerHeight === this.newContainerHeight) { + return; + } + var maxHeight = this.newContainerHeight - SCROLLBAR_PADDING; + this.buttonContainer.setAttribute('style', + 'max-height: ' + maxHeight + 'px;'); + this.previousContainerHeight = this.newContainerHeight; } - this.newContainerHeight = container.clientHeight; - if (this.previousContainerHeight === this.newContainerHeight) { - return; - } - this.buttonContainer.setAttribute('style', - 'max-height: ' + (this.newContainerHeight - SCROLLBAR_PADDING) + 'px;'); - this.previousContainerHeight = this.newContainerHeight; - }, + }; - open: function secondaryToolbarOpen() { - if (this.opened) { - return; - } - this.opened = true; - this.toggleButton.classList.add('toggled'); - this.toolbar.classList.remove('hidden'); - }, - - close: function secondaryToolbarClose(target) { - if (!this.opened) { - return; - } else if (target && !this.toolbar.contains(target)) { - return; - } - this.opened = false; - this.toolbar.classList.add('hidden'); - this.toggleButton.classList.remove('toggled'); - }, - - toggle: function secondaryToolbarToggle() { - if (this.opened) { - this.close(); - } else { - this.open(); - } - } -}; + return SecondaryToolbar; +})(); exports.SecondaryToolbar = SecondaryToolbar; })); diff --git a/web/viewer.js b/web/viewer.js index a0c4afbe3..b17cb10fd 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -81,16 +81,16 @@ function getViewerConfiguration() { toggleButton: document.getElementById('secondaryToolbarToggle'), presentationModeButton: document.getElementById('secondaryPresentationMode'), - openFile: document.getElementById('secondaryOpenFile'), - print: document.getElementById('secondaryPrint'), - download: document.getElementById('secondaryDownload'), - viewBookmark: document.getElementById('secondaryViewBookmark'), - firstPage: document.getElementById('firstPage'), - lastPage: document.getElementById('lastPage'), - pageRotateCw: document.getElementById('pageRotateCw'), - pageRotateCcw: document.getElementById('pageRotateCcw'), + openFileButton: document.getElementById('secondaryOpenFile'), + printButton: document.getElementById('secondaryPrint'), + downloadButton: document.getElementById('secondaryDownload'), + viewBookmarkButton: document.getElementById('secondaryViewBookmark'), + firstPageButton: document.getElementById('firstPage'), + lastPageButton: document.getElementById('lastPage'), + pageRotateCwButton: document.getElementById('pageRotateCw'), + pageRotateCcwButton: document.getElementById('pageRotateCcw'), + toggleHandToolButton: document.getElementById('toggleHandTool'), documentPropertiesButton: document.getElementById('documentProperties'), - toggleHandTool: document.getElementById('toggleHandTool'), }, fullscreen: { contextFirstPage: document.getElementById('contextFirstPage'),