pdf.js/web/toolbar.js
Jonas Jenwald 2971f522d4 Prevent the Zoom dropdown from intermittently displaying an incorrect custom scale in Firefox (PR 8394 follow-up)
After PR 8394, at least in Firefox, the Zoom dropdown now frequently displays an old custom scale instead of the correct one. To see this behaviour, the following STR works for me:
 1. Open https://mozilla.github.io/pdf.js/web/viewer.html.
 2. Zoom in, by clicking on the corresponding button in the toolbar.
 3. Run `PDFViewerApplication.pdfViewer.currentScaleValue` in the console.
 4. Compare what's displayed in the Zoom dropdown with what's printed in the console. (If no difference can be observed, try repeating steps 2 through 4 a couple of times.)

I really don't understand why this happens, but it seems that waiting until a custom scale has been set *before* selecting it fixes things in Firefox (and works fine in e.g. Chrome as well).
Note that this patch thus makes this particular piece of the code consistent with the state prior to PR 8394.
2017-06-10 14:04:53 +02:00

283 lines
9.0 KiB
JavaScript

/* Copyright 2016 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 {
animationStarted, DEFAULT_SCALE, DEFAULT_SCALE_VALUE, MAX_SCALE,
MIN_SCALE, noContextMenuHandler, NullL10n
} from './ui_utils';
var PAGE_NUMBER_LOADING_INDICATOR = 'visiblePageIsLoading';
var SCALE_SELECT_CONTAINER_PADDING = 8;
var SCALE_SELECT_PADDING = 22;
/**
* @typedef {Object} ToolbarOptions
* @property {HTMLDivElement} container - Container for the secondary toolbar.
* @property {HTMLSpanElement} numPages - Label that contains number of pages.
* @property {HTMLInputElement} pageNumber - Control for display and user input
* of the current page number.
* @property {HTMLSpanElement} scaleSelectContainer - Container where scale
* controls are placed. The width is adjusted on UI initialization.
* @property {HTMLSelectElement} scaleSelect - Scale selection control.
* @property {HTMLOptionElement} customScaleOption - The item used to display
* a non-predefined scale.
* @property {HTMLButtonElement} previous - Button to go to the previous page.
* @property {HTMLButtonElement} next - Button to go to the next page.
* @property {HTMLButtonElement} zoomIn - Button to zoom in the pages.
* @property {HTMLButtonElement} zoomOut - Button to zoom out the pages.
* @property {HTMLButtonElement} viewFind - Button to open find bar.
* @property {HTMLButtonElement} openFile - Button to open a new document.
* @property {HTMLButtonElement} presentationModeButton - Button to switch to
* presentation mode.
* @property {HTMLButtonElement} download - Button to download the document.
* @property {HTMLAElement} viewBookmark - Element to link current url of
* the page view.
*/
/**
* @class
*/
var Toolbar = (function ToolbarClosure() {
/**
* @constructs Toolbar
* @param {ToolbarOptions} options
* @param {HTMLDivElement} mainContainer
* @param {EventBus} eventBus
* @param {IL10n} l10n - Localization service.
*/
function Toolbar(options, mainContainer, eventBus, l10n = NullL10n) {
this.toolbar = options.container;
this.mainContainer = mainContainer;
this.eventBus = eventBus;
this.l10n = l10n;
this.items = options;
this._wasLocalized = false;
this.reset();
// Bind the event listeners for click and hand tool actions.
this._bindListeners();
}
Toolbar.prototype = {
setPageNumber(pageNumber, pageLabel) {
this.pageNumber = pageNumber;
this.pageLabel = pageLabel;
this._updateUIState(false);
},
setPagesCount(pagesCount, hasPageLabels) {
this.pagesCount = pagesCount;
this.hasPageLabels = hasPageLabels;
this._updateUIState(true);
},
setPageScale(pageScaleValue, pageScale) {
this.pageScaleValue = pageScaleValue;
this.pageScale = pageScale;
this._updateUIState(false);
},
reset() {
this.pageNumber = 0;
this.pageLabel = null;
this.hasPageLabels = false;
this.pagesCount = 0;
this.pageScaleValue = DEFAULT_SCALE_VALUE;
this.pageScale = DEFAULT_SCALE;
this._updateUIState(true);
},
_bindListeners: function Toolbar_bindClickListeners() {
var eventBus = this.eventBus;
var self = this;
var items = this.items;
items.previous.addEventListener('click', function() {
eventBus.dispatch('previouspage');
});
items.next.addEventListener('click', function() {
eventBus.dispatch('nextpage');
});
items.zoomIn.addEventListener('click', function() {
eventBus.dispatch('zoomin');
});
items.zoomOut.addEventListener('click', function() {
eventBus.dispatch('zoomout');
});
items.pageNumber.addEventListener('click', function() {
this.select();
});
items.pageNumber.addEventListener('change', function() {
eventBus.dispatch('pagenumberchanged', {
source: self,
value: this.value,
});
});
items.scaleSelect.addEventListener('change', function() {
if (this.value === 'custom') {
return;
}
eventBus.dispatch('scalechanged', {
source: self,
value: this.value,
});
});
items.presentationModeButton.addEventListener('click',
function (e) {
eventBus.dispatch('presentationmode');
});
items.openFile.addEventListener('click', function (e) {
eventBus.dispatch('openfile');
});
items.print.addEventListener('click', function (e) {
eventBus.dispatch('print');
});
items.download.addEventListener('click', function (e) {
eventBus.dispatch('download');
});
// Suppress context menus for some controls
items.scaleSelect.oncontextmenu = noContextMenuHandler;
eventBus.on('localized', (evt) => {
this._localized();
});
},
_localized: function Toolbar_localized() {
this._wasLocalized = true;
this._adjustScaleWidth();
this._updateUIState(true);
},
_updateUIState: function Toolbar_updateUIState(resetNumPages) {
if (!this._wasLocalized) {
// Don't update UI state until we will localize the toolbar.
return;
}
let selectScaleOption = (value, scale) => {
var options = items.scaleSelect.options;
var predefinedValueFound = false;
for (var i = 0, ii = options.length; i < ii; i++) {
var option = options[i];
if (option.value !== value) {
option.selected = false;
continue;
}
option.selected = true;
predefinedValueFound = true;
}
if (!predefinedValueFound) {
var customScale = Math.round(scale * 10000) / 100;
this.l10n.get('page_scale_percent', { scale: customScale, },
'{{scale}}%').then((msg) => {
items.customScaleOption.textContent = msg;
items.customScaleOption.selected = true;
});
}
};
var pageNumber = this.pageNumber;
var scaleValue = (this.pageScaleValue || this.pageScale).toString();
var scale = this.pageScale;
var items = this.items;
var pagesCount = this.pagesCount;
if (resetNumPages) {
if (this.hasPageLabels) {
items.pageNumber.type = 'text';
} else {
items.pageNumber.type = 'number';
this.l10n.get('of_pages', { pagesCount, }, 'of {{pagesCount}}').
then((msg) => {
items.numPages.textContent = msg;
});
}
items.pageNumber.max = pagesCount;
}
if (this.hasPageLabels) {
items.pageNumber.value = this.pageLabel;
this.l10n.get('page_of_pages', { pageNumber, pagesCount, },
'({{pageNumber}} of {{pagesCount}})').
then((msg) => {
items.numPages.textContent = msg;
});
} else {
items.pageNumber.value = pageNumber;
}
items.previous.disabled = (pageNumber <= 1);
items.next.disabled = (pageNumber >= pagesCount);
items.zoomOut.disabled = (scale <= MIN_SCALE);
items.zoomIn.disabled = (scale >= MAX_SCALE);
selectScaleOption(scaleValue, scale);
},
updateLoadingIndicatorState:
function Toolbar_updateLoadingIndicatorState(loading) {
var pageNumberInput = this.items.pageNumber;
if (loading) {
pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR);
} else {
pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
}
},
_adjustScaleWidth: function Toolbar_adjustScaleWidth() {
var container = this.items.scaleSelectContainer;
var select = this.items.scaleSelect;
animationStarted.then(function() {
// Adjust the width of the zoom box to fit the content.
// Note: If the window is narrow enough that the zoom box is not
// visible, we temporarily show it to be able to adjust its width.
if (container.clientWidth === 0) {
container.setAttribute('style', 'display: inherit;');
}
if (container.clientWidth > 0) {
select.setAttribute('style', 'min-width: inherit;');
var width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
select.setAttribute('style', 'min-width: ' +
(width + SCALE_SELECT_PADDING) + 'px;');
container.setAttribute('style', 'min-width: ' + width + 'px; ' +
'max-width: ' + width + 'px;');
}
});
},
};
return Toolbar;
})();
export {
Toolbar,
};