038668bf8c
Rather than having to spell out the English fallback strings at *every* single `IL10n.get` call-site throughout the viewer, we can simplify things by collecting them in *one* central spot. This provides a much better overview of the fallback l10n strings used, which makes future changes easier and ensures that fallback strings occuring in multiple places cannot accidentally get out of sync. Furthermore, by making the `fallback` parameter of the `IL10n.get` method *optional*[1] many of the call-sites (and their surrounding code) become a lot less verbose. --- [1] It's obviously still possible to pass in a fallback string, it's just not required.
279 lines
8.9 KiB
JavaScript
279 lines
8.9 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,
|
|
} from "./ui_utils.js";
|
|
|
|
const PAGE_NUMBER_LOADING_INDICATOR = "visiblePageIsLoading";
|
|
// Keep the two values below up-to-date with the values in `web/viewer.css`:
|
|
const SCALE_SELECT_CONTAINER_WIDTH = 140; // px
|
|
const SCALE_SELECT_WIDTH = 162; // px
|
|
|
|
/**
|
|
* @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 Toolbar {
|
|
/**
|
|
* @param {ToolbarOptions} options
|
|
* @param {EventBus} eventBus
|
|
* @param {IL10n} l10n - Localization service.
|
|
*/
|
|
constructor(options, eventBus, l10n) {
|
|
this.toolbar = options.container;
|
|
this.eventBus = eventBus;
|
|
this.l10n = l10n;
|
|
this.buttons = [
|
|
{ element: options.previous, eventName: "previouspage" },
|
|
{ element: options.next, eventName: "nextpage" },
|
|
{ element: options.zoomIn, eventName: "zoomin" },
|
|
{ element: options.zoomOut, eventName: "zoomout" },
|
|
{ element: options.openFile, eventName: "openfile" },
|
|
{ element: options.print, eventName: "print" },
|
|
{
|
|
element: options.presentationModeButton,
|
|
eventName: "presentationmode",
|
|
},
|
|
{ element: options.download, eventName: "download" },
|
|
{ element: options.viewBookmark, eventName: null },
|
|
];
|
|
this.items = {
|
|
numPages: options.numPages,
|
|
pageNumber: options.pageNumber,
|
|
scaleSelectContainer: options.scaleSelectContainer,
|
|
scaleSelect: options.scaleSelect,
|
|
customScaleOption: options.customScaleOption,
|
|
previous: options.previous,
|
|
next: options.next,
|
|
zoomIn: options.zoomIn,
|
|
zoomOut: options.zoomOut,
|
|
};
|
|
|
|
this._wasLocalized = false;
|
|
this.reset();
|
|
|
|
// Bind the event listeners for click and various other actions.
|
|
this._bindListeners();
|
|
}
|
|
|
|
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 || pageScale).toString();
|
|
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);
|
|
this.updateLoadingIndicatorState();
|
|
}
|
|
|
|
_bindListeners() {
|
|
const { pageNumber, scaleSelect } = this.items;
|
|
const self = this;
|
|
|
|
// The buttons within the toolbar.
|
|
for (const { element, eventName } of this.buttons) {
|
|
element.addEventListener("click", evt => {
|
|
if (eventName !== null) {
|
|
this.eventBus.dispatch(eventName, { source: this });
|
|
}
|
|
});
|
|
}
|
|
// The non-button elements within the toolbar.
|
|
pageNumber.addEventListener("click", function () {
|
|
this.select();
|
|
});
|
|
pageNumber.addEventListener("change", function () {
|
|
self.eventBus.dispatch("pagenumberchanged", {
|
|
source: self,
|
|
value: this.value,
|
|
});
|
|
});
|
|
|
|
scaleSelect.addEventListener("change", function () {
|
|
if (this.value === "custom") {
|
|
return;
|
|
}
|
|
self.eventBus.dispatch("scalechanged", {
|
|
source: self,
|
|
value: this.value,
|
|
});
|
|
});
|
|
// Suppress context menus for some controls.
|
|
scaleSelect.oncontextmenu = noContextMenuHandler;
|
|
|
|
this.eventBus._on("localized", () => {
|
|
this._wasLocalized = true;
|
|
this._adjustScaleWidth();
|
|
this._updateUIState(true);
|
|
});
|
|
}
|
|
|
|
_updateUIState(resetNumPages = false) {
|
|
if (!this._wasLocalized) {
|
|
// Don't update the UI state until we localize the toolbar.
|
|
return;
|
|
}
|
|
const { pageNumber, pagesCount, pageScaleValue, pageScale, items } = this;
|
|
|
|
if (resetNumPages) {
|
|
if (this.hasPageLabels) {
|
|
items.pageNumber.type = "text";
|
|
} else {
|
|
items.pageNumber.type = "number";
|
|
this.l10n.get("of_pages", { 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 }).then(msg => {
|
|
items.numPages.textContent = msg;
|
|
});
|
|
} else {
|
|
items.pageNumber.value = pageNumber;
|
|
}
|
|
|
|
items.previous.disabled = pageNumber <= 1;
|
|
items.next.disabled = pageNumber >= pagesCount;
|
|
|
|
items.zoomOut.disabled = pageScale <= MIN_SCALE;
|
|
items.zoomIn.disabled = pageScale >= MAX_SCALE;
|
|
|
|
this.l10n
|
|
.get("page_scale_percent", { scale: Math.round(pageScale * 10000) / 100 })
|
|
.then(msg => {
|
|
let predefinedValueFound = false;
|
|
for (const option of items.scaleSelect.options) {
|
|
if (option.value !== pageScaleValue) {
|
|
option.selected = false;
|
|
continue;
|
|
}
|
|
option.selected = true;
|
|
predefinedValueFound = true;
|
|
}
|
|
if (!predefinedValueFound) {
|
|
items.customScaleOption.textContent = msg;
|
|
items.customScaleOption.selected = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
updateLoadingIndicatorState(loading = false) {
|
|
const pageNumberInput = this.items.pageNumber;
|
|
|
|
pageNumberInput.classList.toggle(PAGE_NUMBER_LOADING_INDICATOR, loading);
|
|
}
|
|
|
|
/**
|
|
* Increase the width of the zoom dropdown DOM element if, and only if, it's
|
|
* too narrow to fit the *longest* of the localized strings.
|
|
* @private
|
|
*/
|
|
async _adjustScaleWidth() {
|
|
const { items, l10n } = this;
|
|
|
|
const predefinedValuesPromise = Promise.all([
|
|
l10n.get("page_scale_auto"),
|
|
l10n.get("page_scale_actual"),
|
|
l10n.get("page_scale_fit"),
|
|
l10n.get("page_scale_width"),
|
|
]);
|
|
|
|
// The temporary canvas is used to measure text length in the DOM.
|
|
let canvas = document.createElement("canvas");
|
|
if (
|
|
typeof PDFJSDev === "undefined" ||
|
|
PDFJSDev.test("MOZCENTRAL || GENERIC")
|
|
) {
|
|
canvas.mozOpaque = true;
|
|
}
|
|
let ctx = canvas.getContext("2d", { alpha: false });
|
|
|
|
await animationStarted;
|
|
const { fontSize, fontFamily } = getComputedStyle(items.scaleSelect);
|
|
ctx.font = `${fontSize} ${fontFamily}`;
|
|
|
|
let maxWidth = 0;
|
|
for (const predefinedValue of await predefinedValuesPromise) {
|
|
const { width } = ctx.measureText(predefinedValue);
|
|
if (width > maxWidth) {
|
|
maxWidth = width;
|
|
}
|
|
}
|
|
const overflow = SCALE_SELECT_WIDTH - SCALE_SELECT_CONTAINER_WIDTH;
|
|
maxWidth += 2 * overflow;
|
|
|
|
if (maxWidth > SCALE_SELECT_CONTAINER_WIDTH) {
|
|
items.scaleSelect.style.width = `${maxWidth + overflow}px`;
|
|
items.scaleSelectContainer.style.width = `${maxWidth}px`;
|
|
}
|
|
// Zeroing the width and height cause Firefox to release graphics resources
|
|
// immediately, which can greatly reduce memory consumption.
|
|
canvas.width = 0;
|
|
canvas.height = 0;
|
|
canvas = ctx = null;
|
|
}
|
|
}
|
|
|
|
export { Toolbar };
|