diff --git a/web/app.js b/web/app.js index 81e440db7..da9870ba0 100644 --- a/web/app.js +++ b/web/app.js @@ -270,7 +270,7 @@ var PDFViewerApplication = { new PDFDocumentProperties(appConfig.documentProperties); this.secondaryToolbar = - new SecondaryToolbar(appConfig.secondaryToolbar, eventBus); + new SecondaryToolbar(appConfig.secondaryToolbar, container, eventBus); if (this.supportsFullscreen) { this.pdfPresentationMode = new PDFPresentationMode({ @@ -1807,10 +1807,6 @@ function webViewerResize() { } PDFViewerApplication.pdfViewer.update(); } - - // Set the 'max-height' CSS property of the secondary toolbar. - var mainContainer = PDFViewerApplication.appConfig.mainContainer; - PDFViewerApplication.secondaryToolbar.setMaxHeight(mainContainer); } window.addEventListener('hashchange', function webViewerHashchange(evt) { @@ -1894,10 +1890,6 @@ function webViewerLocalized() { container.setAttribute('style', 'min-width: ' + width + 'px; ' + 'max-width: ' + width + 'px;'); } - - // Set the 'max-height' CSS property of the secondary toolbar. - var mainContainer = PDFViewerApplication.appConfig.mainContainer; - PDFViewerApplication.secondaryToolbar.setMaxHeight(mainContainer); }); } diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js index a1da36389..1d1358666 100644 --- a/web/secondary_toolbar.js +++ b/web/secondary_toolbar.js @@ -34,6 +34,9 @@ var mozL10n = uiUtils.mozL10n; * @property {HTMLDivElement} toolbar - Container for the secondary toolbar. * @property {HTMLButtonElement} toggleButton - Button to toggle the visibility * of the secondary toolbar. + * @property {HTMLDivElement} toolbarButtonContainer - Container where all the + * toolbar buttons are placed. The maximum height of the toolbar is controlled + * dynamically by adjusting the 'max-height' CSS property of this DOM element. * @property {HTMLButtonElement} presentationModeButton - Button for entering * presentation mode. * @property {HTMLButtonElement} openFileButton - Button to open a file. @@ -63,11 +66,13 @@ var SecondaryToolbar = (function SecondaryToolbarClosure() { /** * @constructs SecondaryToolbar * @param {SecondaryToolbarOptions} options + * @param {HTMLDivElement} mainContainer * @param {EventBus} eventBus */ - function SecondaryToolbar(options, eventBus) { + function SecondaryToolbar(options, mainContainer, eventBus) { this.toolbar = options.toolbar; this.toggleButton = options.toggleButton; + this.toolbarButtonContainer = options.toolbarButtonContainer; this.buttons = [ { element: options.presentationModeButton, eventName: 'presentationmode', close: true }, @@ -87,16 +92,19 @@ var SecondaryToolbar = (function SecondaryToolbarClosure() { eventName: 'documentproperties', close: true } ]; + this.mainContainer = mainContainer; this.eventBus = eventBus; this.opened = false; + this.containerHeight = null; 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); + + // Bind the event listener for adjusting the 'max-height' of the toolbar. + this.eventBus.on('resize', this._setMaxHeight.bind(this)); } SecondaryToolbar.prototype = { @@ -155,6 +163,8 @@ var SecondaryToolbar = (function SecondaryToolbarClosure() { return; } this.opened = true; + this._setMaxHeight(); + this.toggleButton.classList.add('toggled'); this.toolbar.classList.remove('hidden'); }, @@ -176,18 +186,22 @@ var SecondaryToolbar = (function SecondaryToolbarClosure() { } }, - setMaxHeight: function SecondaryToolbar_setMaxHeight(container) { - if (!container || !this.buttonContainer) { + /** + * @private + */ + _setMaxHeight: function SecondaryToolbar_setMaxHeight() { + if (!this.opened) { + return; // Only adjust the 'max-height' if the toolbar is visible. + } + this.containerHeight = this.mainContainer.clientHeight; + + if (this.containerHeight === this.previousContainerHeight) { 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.toolbarButtonContainer.setAttribute('style', + 'max-height: ' + (this.containerHeight - SCROLLBAR_PADDING) + 'px;'); + + this.previousContainerHeight = this.containerHeight; } }; diff --git a/web/viewer.js b/web/viewer.js index a18d033db..e955896c1 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -79,6 +79,8 @@ function getViewerConfiguration() { secondaryToolbar: { toolbar: document.getElementById('secondaryToolbar'), toggleButton: document.getElementById('secondaryToolbarToggle'), + toolbarButtonContainer: + document.getElementById('secondaryToolbarButtonContainer'), presentationModeButton: document.getElementById('secondaryPresentationMode'), openFileButton: document.getElementById('secondaryOpenFile'),