Remove the internal "toolbarreset" event and slightly re-factor the code
With modern JavaScript class features we can move the relevant event handling into private methods, and thus invoke it directly when resetting the toolbar UI-state. *Please note:* This patch slightly reduces the size of the `web/toolbar.js` file.
This commit is contained in:
Jonas Jenwald
parent
3b94e9fdce
commit
234b57bb45
160
web/toolbar.js
160
web/toolbar.js
@ -43,14 +43,16 @@ import {
|
||||
*/
|
||||
|
||||
class Toolbar {
|
||||
#opts;
|
||||
|
||||
/**
|
||||
* @param {ToolbarOptions} options
|
||||
* @param {EventBus} eventBus
|
||||
*/
|
||||
constructor(options, eventBus) {
|
||||
this.toolbar = options.container;
|
||||
this.#opts = options;
|
||||
this.eventBus = eventBus;
|
||||
this.buttons = [
|
||||
const buttons = [
|
||||
{ element: options.previous, eventName: "previouspage" },
|
||||
{ element: options.next, eventName: "nextpage" },
|
||||
{ element: options.zoomIn, eventName: "zoomin" },
|
||||
@ -106,22 +108,12 @@ class Toolbar {
|
||||
},
|
||||
},
|
||||
];
|
||||
this.items = {
|
||||
numPages: options.numPages,
|
||||
pageNumber: options.pageNumber,
|
||||
scaleSelect: options.scaleSelect,
|
||||
customScaleOption: options.customScaleOption,
|
||||
previous: options.previous,
|
||||
next: options.next,
|
||||
zoomIn: options.zoomIn,
|
||||
zoomOut: options.zoomOut,
|
||||
};
|
||||
|
||||
// Bind the event listeners for click and various other actions.
|
||||
this.#bindListeners(options);
|
||||
this.#bindListeners(buttons);
|
||||
|
||||
if (options.editorHighlightColorPicker) {
|
||||
this.eventBus._on(
|
||||
eventBus._on(
|
||||
"annotationeditoruimanager",
|
||||
({ uiManager }) => {
|
||||
this.#setAnnotationEditorUIManager(
|
||||
@ -172,18 +164,19 @@ class Toolbar {
|
||||
this.updateLoadingIndicatorState();
|
||||
|
||||
// Reset the Editor buttons too, since they're document specific.
|
||||
this.eventBus.dispatch("toolbarreset", { source: this });
|
||||
this.#editorModeChanged({ mode: AnnotationEditorType.DISABLE });
|
||||
}
|
||||
|
||||
#bindListeners(options) {
|
||||
const { pageNumber, scaleSelect } = this.items;
|
||||
#bindListeners(buttons) {
|
||||
const { eventBus } = this;
|
||||
const { pageNumber, scaleSelect } = this.#opts;
|
||||
const self = this;
|
||||
|
||||
// The buttons within the toolbar.
|
||||
for (const { element, eventName, eventDetails } of this.buttons) {
|
||||
for (const { element, eventName, eventDetails } of buttons) {
|
||||
element.addEventListener("click", evt => {
|
||||
if (eventName !== null) {
|
||||
this.eventBus.dispatch(eventName, {
|
||||
eventBus.dispatch(eventName, {
|
||||
source: this,
|
||||
...eventDetails,
|
||||
// evt.detail is the number of clicks.
|
||||
@ -197,7 +190,7 @@ class Toolbar {
|
||||
this.select();
|
||||
});
|
||||
pageNumber.addEventListener("change", function () {
|
||||
self.eventBus.dispatch("pagenumberchanged", {
|
||||
eventBus.dispatch("pagenumberchanged", {
|
||||
source: self,
|
||||
value: this.value,
|
||||
});
|
||||
@ -207,15 +200,14 @@ class Toolbar {
|
||||
if (this.value === "custom") {
|
||||
return;
|
||||
}
|
||||
self.eventBus.dispatch("scalechanged", {
|
||||
eventBus.dispatch("scalechanged", {
|
||||
source: self,
|
||||
value: this.value,
|
||||
});
|
||||
});
|
||||
// Here we depend on browsers dispatching the "click" event *after* the
|
||||
// "change" event, when the <select>-element changes.
|
||||
scaleSelect.addEventListener("click", function (evt) {
|
||||
const target = evt.target;
|
||||
scaleSelect.addEventListener("click", function ({ target }) {
|
||||
// Remove focus when an <option>-element was *clicked*, to improve the UX
|
||||
// for mouse users (fixes bug 1300525 and issue 4923).
|
||||
if (
|
||||
@ -228,95 +220,92 @@ class Toolbar {
|
||||
// Suppress context menus for some controls.
|
||||
scaleSelect.oncontextmenu = noContextMenu;
|
||||
|
||||
this.#bindEditorToolsListener(options);
|
||||
eventBus._on(
|
||||
"annotationeditormodechanged",
|
||||
this.#editorModeChanged.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
#bindEditorToolsListener({
|
||||
editorFreeTextButton,
|
||||
editorFreeTextParamsToolbar,
|
||||
editorHighlightButton,
|
||||
editorHighlightParamsToolbar,
|
||||
editorInkButton,
|
||||
editorInkParamsToolbar,
|
||||
editorStampButton,
|
||||
editorStampParamsToolbar,
|
||||
}) {
|
||||
const editorModeChanged = ({ mode }) => {
|
||||
toggleCheckedBtn(
|
||||
editorFreeTextButton,
|
||||
mode === AnnotationEditorType.FREETEXT,
|
||||
editorFreeTextParamsToolbar
|
||||
);
|
||||
toggleCheckedBtn(
|
||||
editorHighlightButton,
|
||||
mode === AnnotationEditorType.HIGHLIGHT,
|
||||
editorHighlightParamsToolbar
|
||||
);
|
||||
toggleCheckedBtn(
|
||||
editorInkButton,
|
||||
mode === AnnotationEditorType.INK,
|
||||
editorInkParamsToolbar
|
||||
);
|
||||
toggleCheckedBtn(
|
||||
editorStampButton,
|
||||
mode === AnnotationEditorType.STAMP,
|
||||
editorStampParamsToolbar
|
||||
);
|
||||
#editorModeChanged({ mode }) {
|
||||
const {
|
||||
editorFreeTextButton,
|
||||
editorFreeTextParamsToolbar,
|
||||
editorHighlightButton,
|
||||
editorHighlightParamsToolbar,
|
||||
editorInkButton,
|
||||
editorInkParamsToolbar,
|
||||
editorStampButton,
|
||||
editorStampParamsToolbar,
|
||||
} = this.#opts;
|
||||
|
||||
const isDisable = mode === AnnotationEditorType.DISABLE;
|
||||
editorFreeTextButton.disabled = isDisable;
|
||||
editorHighlightButton.disabled = isDisable;
|
||||
editorInkButton.disabled = isDisable;
|
||||
editorStampButton.disabled = isDisable;
|
||||
};
|
||||
this.eventBus._on("annotationeditormodechanged", editorModeChanged);
|
||||
toggleCheckedBtn(
|
||||
editorFreeTextButton,
|
||||
mode === AnnotationEditorType.FREETEXT,
|
||||
editorFreeTextParamsToolbar
|
||||
);
|
||||
toggleCheckedBtn(
|
||||
editorHighlightButton,
|
||||
mode === AnnotationEditorType.HIGHLIGHT,
|
||||
editorHighlightParamsToolbar
|
||||
);
|
||||
toggleCheckedBtn(
|
||||
editorInkButton,
|
||||
mode === AnnotationEditorType.INK,
|
||||
editorInkParamsToolbar
|
||||
);
|
||||
toggleCheckedBtn(
|
||||
editorStampButton,
|
||||
mode === AnnotationEditorType.STAMP,
|
||||
editorStampParamsToolbar
|
||||
);
|
||||
|
||||
this.eventBus._on("toolbarreset", evt => {
|
||||
if (evt.source === this) {
|
||||
editorModeChanged({ mode: AnnotationEditorType.DISABLE });
|
||||
}
|
||||
});
|
||||
const isDisable = mode === AnnotationEditorType.DISABLE;
|
||||
editorFreeTextButton.disabled = isDisable;
|
||||
editorHighlightButton.disabled = isDisable;
|
||||
editorInkButton.disabled = isDisable;
|
||||
editorStampButton.disabled = isDisable;
|
||||
}
|
||||
|
||||
#updateUIState(resetNumPages = false) {
|
||||
const { pageNumber, pagesCount, pageScaleValue, pageScale, items } = this;
|
||||
const { pageNumber, pagesCount, pageScaleValue, pageScale } = this;
|
||||
const opts = this.#opts;
|
||||
|
||||
if (resetNumPages) {
|
||||
if (this.hasPageLabels) {
|
||||
items.pageNumber.type = "text";
|
||||
opts.pageNumber.type = "text";
|
||||
|
||||
items.numPages.setAttribute("data-l10n-id", "pdfjs-page-of-pages");
|
||||
opts.numPages.setAttribute("data-l10n-id", "pdfjs-page-of-pages");
|
||||
} else {
|
||||
items.pageNumber.type = "number";
|
||||
opts.pageNumber.type = "number";
|
||||
|
||||
items.numPages.setAttribute("data-l10n-id", "pdfjs-of-pages");
|
||||
items.numPages.setAttribute(
|
||||
opts.numPages.setAttribute("data-l10n-id", "pdfjs-of-pages");
|
||||
opts.numPages.setAttribute(
|
||||
"data-l10n-args",
|
||||
JSON.stringify({ pagesCount })
|
||||
);
|
||||
}
|
||||
items.pageNumber.max = pagesCount;
|
||||
opts.pageNumber.max = pagesCount;
|
||||
}
|
||||
|
||||
if (this.hasPageLabels) {
|
||||
items.pageNumber.value = this.pageLabel;
|
||||
opts.pageNumber.value = this.pageLabel;
|
||||
|
||||
items.numPages.setAttribute(
|
||||
opts.numPages.setAttribute(
|
||||
"data-l10n-args",
|
||||
JSON.stringify({ pageNumber, pagesCount })
|
||||
);
|
||||
} else {
|
||||
items.pageNumber.value = pageNumber;
|
||||
opts.pageNumber.value = pageNumber;
|
||||
}
|
||||
|
||||
items.previous.disabled = pageNumber <= 1;
|
||||
items.next.disabled = pageNumber >= pagesCount;
|
||||
opts.previous.disabled = pageNumber <= 1;
|
||||
opts.next.disabled = pageNumber >= pagesCount;
|
||||
|
||||
items.zoomOut.disabled = pageScale <= MIN_SCALE;
|
||||
items.zoomIn.disabled = pageScale >= MAX_SCALE;
|
||||
opts.zoomOut.disabled = pageScale <= MIN_SCALE;
|
||||
opts.zoomIn.disabled = pageScale >= MAX_SCALE;
|
||||
|
||||
let predefinedValueFound = false;
|
||||
for (const option of items.scaleSelect.options) {
|
||||
for (const option of opts.scaleSelect.options) {
|
||||
if (option.value !== pageScaleValue) {
|
||||
option.selected = false;
|
||||
continue;
|
||||
@ -325,8 +314,8 @@ class Toolbar {
|
||||
predefinedValueFound = true;
|
||||
}
|
||||
if (!predefinedValueFound) {
|
||||
items.customScaleOption.selected = true;
|
||||
items.customScaleOption.setAttribute(
|
||||
opts.customScaleOption.selected = true;
|
||||
opts.customScaleOption.setAttribute(
|
||||
"data-l10n-args",
|
||||
JSON.stringify({
|
||||
scale: Math.round(pageScale * 10000) / 100,
|
||||
@ -336,8 +325,7 @@ class Toolbar {
|
||||
}
|
||||
|
||||
updateLoadingIndicatorState(loading = false) {
|
||||
const { pageNumber } = this.items;
|
||||
|
||||
const { pageNumber } = this.#opts;
|
||||
pageNumber.classList.toggle("loading", loading);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user