Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove the internal "toolbarreset" event and slightly re-factor the code

Browse Source 
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 2023-12-26 10:56:38 +01:00
parent 3b94e9fdce
commit 234b57bb45
1 changed files with 74 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
web/toolbar.js
View File

@ -43,14 +43,16 @@ import {
*/ */
class Toolbar { class Toolbar {
#opts;
/** /**
* @param {ToolbarOptions} options * @param {ToolbarOptions} options
* @param {EventBus} eventBus * @param {EventBus} eventBus
*/ */
constructor(options, eventBus) { constructor(options, eventBus) {
this.toolbar = options.container; this.#opts = options;
this.eventBus = eventBus; this.eventBus = eventBus;
this.buttons = [ const buttons = [
{ element: options.previous, eventName: "previouspage" }, { element: options.previous, eventName: "previouspage" },
{ element: options.next, eventName: "nextpage" }, { element: options.next, eventName: "nextpage" },
{ element: options.zoomIn, eventName: "zoomin" }, { 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. // Bind the event listeners for click and various other actions.
this.#bindListeners(options); this.#bindListeners(buttons);
if (options.editorHighlightColorPicker) { if (options.editorHighlightColorPicker) {
this.eventBus._on( eventBus._on(
"annotationeditoruimanager", "annotationeditoruimanager",
({ uiManager }) => { ({ uiManager }) => {
this.#setAnnotationEditorUIManager( this.#setAnnotationEditorUIManager(
@ -172,18 +164,19 @@ class Toolbar {
this.updateLoadingIndicatorState(); this.updateLoadingIndicatorState();
// Reset the Editor buttons too, since they're document specific. // Reset the Editor buttons too, since they're document specific.
this.eventBus.dispatch("toolbarreset", { source: this }); this.#editorModeChanged({ mode: AnnotationEditorType.DISABLE });
} }
#bindListeners(options) { #bindListeners(buttons) {
const { pageNumber, scaleSelect } = this.items; const { eventBus } = this;
const { pageNumber, scaleSelect } = this.#opts;
const self = this; const self = this;
// The buttons within the toolbar. // The buttons within the toolbar.
for (const { element, eventName, eventDetails } of this.buttons) { for (const { element, eventName, eventDetails } of buttons) {
element.addEventListener("click", evt => { element.addEventListener("click", evt => {
if (eventName !== null) { if (eventName !== null) {
this.eventBus.dispatch(eventName, { eventBus.dispatch(eventName, {
source: this, source: this,
...eventDetails, ...eventDetails,
// evt.detail is the number of clicks. // evt.detail is the number of clicks.
@ -197,7 +190,7 @@ class Toolbar {
this.select(); this.select();
}); });
pageNumber.addEventListener("change", function () { pageNumber.addEventListener("change", function () {
self.eventBus.dispatch("pagenumberchanged", { eventBus.dispatch("pagenumberchanged", {
source: self, source: self,
value: this.value, value: this.value,
}); });
@ -207,15 +200,14 @@ class Toolbar {
if (this.value === "custom") { if (this.value === "custom") {
return; return;
} }
self.eventBus.dispatch("scalechanged", { eventBus.dispatch("scalechanged", {
source: self, source: self,
value: this.value, value: this.value,
}); });
}); });
// Here we depend on browsers dispatching the "click" event *after* the // Here we depend on browsers dispatching the "click" event *after* the
// "change" event, when the <select>-element changes. // "change" event, when the <select>-element changes.
scaleSelect.addEventListener("click", function (evt) { scaleSelect.addEventListener("click", function ({ target }) {
const target = evt.target;
// Remove focus when an <option>-element was *clicked*, to improve the UX // Remove focus when an <option>-element was *clicked*, to improve the UX
// for mouse users (fixes bug 1300525 and issue 4923). // for mouse users (fixes bug 1300525 and issue 4923).
if ( if (
@ -228,95 +220,92 @@ class Toolbar {
// Suppress context menus for some controls. // Suppress context menus for some controls.
scaleSelect.oncontextmenu = noContextMenu; scaleSelect.oncontextmenu = noContextMenu;
this.#bindEditorToolsListener(options); eventBus._on(
"annotationeditormodechanged",
this.#editorModeChanged.bind(this)
);
} }
#bindEditorToolsListener({ #editorModeChanged({ mode }) {
editorFreeTextButton, const {
editorFreeTextParamsToolbar, editorFreeTextButton,
editorHighlightButton, editorFreeTextParamsToolbar,
editorHighlightParamsToolbar, editorHighlightButton,
editorInkButton, editorHighlightParamsToolbar,
editorInkParamsToolbar, editorInkButton,
editorStampButton, editorInkParamsToolbar,
editorStampParamsToolbar, editorStampButton,
}) { editorStampParamsToolbar,
const editorModeChanged = ({ mode }) => { } = this.#opts;
toggleCheckedBtn(
editorFreeTextButton,
mode === AnnotationEditorType.FREETEXT,
editorFreeTextParamsToolbar
);
toggleCheckedBtn(
editorHighlightButton,
mode === AnnotationEditorType.HIGHLIGHT,
editorHighlightParamsToolbar
);
toggleCheckedBtn(
editorInkButton,
mode === AnnotationEditorType.INK,
editorInkParamsToolbar
);
toggleCheckedBtn(
editorStampButton,
mode === AnnotationEditorType.STAMP,
editorStampParamsToolbar
);
const isDisable = mode === AnnotationEditorType.DISABLE; toggleCheckedBtn(
editorFreeTextButton.disabled = isDisable; editorFreeTextButton,
editorHighlightButton.disabled = isDisable; mode === AnnotationEditorType.FREETEXT,
editorInkButton.disabled = isDisable; editorFreeTextParamsToolbar
editorStampButton.disabled = isDisable; );
}; toggleCheckedBtn(
this.eventBus._on("annotationeditormodechanged", editorModeChanged); editorHighlightButton,
mode === AnnotationEditorType.HIGHLIGHT,
editorHighlightParamsToolbar
);
toggleCheckedBtn(
editorInkButton,
mode === AnnotationEditorType.INK,
editorInkParamsToolbar
);
toggleCheckedBtn(
editorStampButton,
mode === AnnotationEditorType.STAMP,
editorStampParamsToolbar
);
this.eventBus._on("toolbarreset", evt => { const isDisable = mode === AnnotationEditorType.DISABLE;
if (evt.source === this) { editorFreeTextButton.disabled = isDisable;
editorModeChanged({ mode: AnnotationEditorType.DISABLE }); editorHighlightButton.disabled = isDisable;
} editorInkButton.disabled = isDisable;
}); editorStampButton.disabled = isDisable;
} }
#updateUIState(resetNumPages = false) { #updateUIState(resetNumPages = false) {
const { pageNumber, pagesCount, pageScaleValue, pageScale, items } = this; const { pageNumber, pagesCount, pageScaleValue, pageScale } = this;
const opts = this.#opts;
if (resetNumPages) { if (resetNumPages) {
if (this.hasPageLabels) { 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 { } else {
items.pageNumber.type = "number"; opts.pageNumber.type = "number";
items.numPages.setAttribute("data-l10n-id", "pdfjs-of-pages"); opts.numPages.setAttribute("data-l10n-id", "pdfjs-of-pages");
items.numPages.setAttribute( opts.numPages.setAttribute(
"data-l10n-args", "data-l10n-args",
JSON.stringify({ pagesCount }) JSON.stringify({ pagesCount })
); );
} }
items.pageNumber.max = pagesCount; opts.pageNumber.max = pagesCount;
} }
if (this.hasPageLabels) { if (this.hasPageLabels) {
items.pageNumber.value = this.pageLabel; opts.pageNumber.value = this.pageLabel;
items.numPages.setAttribute( opts.numPages.setAttribute(
"data-l10n-args", "data-l10n-args",
JSON.stringify({ pageNumber, pagesCount }) JSON.stringify({ pageNumber, pagesCount })
); );
} else { } else {
items.pageNumber.value = pageNumber; opts.pageNumber.value = pageNumber;
} }
items.previous.disabled = pageNumber <= 1; opts.previous.disabled = pageNumber <= 1;
items.next.disabled = pageNumber >= pagesCount; opts.next.disabled = pageNumber >= pagesCount;
items.zoomOut.disabled = pageScale <= MIN_SCALE; opts.zoomOut.disabled = pageScale <= MIN_SCALE;
items.zoomIn.disabled = pageScale >= MAX_SCALE; opts.zoomIn.disabled = pageScale >= MAX_SCALE;
let predefinedValueFound = false; let predefinedValueFound = false;
for (const option of items.scaleSelect.options) { for (const option of opts.scaleSelect.options) {
if (option.value !== pageScaleValue) { if (option.value !== pageScaleValue) {
option.selected = false; option.selected = false;
continue; continue;
@ -325,8 +314,8 @@ class Toolbar {
predefinedValueFound = true; predefinedValueFound = true;
} }
if (!predefinedValueFound) { if (!predefinedValueFound) {
items.customScaleOption.selected = true; opts.customScaleOption.selected = true;
items.customScaleOption.setAttribute( opts.customScaleOption.setAttribute(
"data-l10n-args", "data-l10n-args",
JSON.stringify({ JSON.stringify({
scale: Math.round(pageScale * 10000) / 100, scale: Math.round(pageScale * 10000) / 100,
@ -336,8 +325,7 @@ class Toolbar {
} }
updateLoadingIndicatorState(loading = false) { updateLoadingIndicatorState(loading = false) {
const { pageNumber } = this.items; const { pageNumber } = this.#opts;
pageNumber.classList.toggle("loading", loading); pageNumber.classList.toggle("loading", loading);
} }
} }