From 2a195beb308070f0866f4323b8054623b9db39c0 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Thu, 13 Apr 2023 12:36:39 +0200 Subject: [PATCH] Reduce some duplication when toggling buttons in the viewer toolbars Currently we repeat the same code in lots of places, to update the "toggled" class and "aria-checked" attribute, when various toolbar buttons are clicked. For the MOZCENTRAL build-target this patch reduces the size of the *built* `web/viewer.js` file by just over `1.2` kilo-bytes. --- web/pdf_sidebar.js | 47 ++++++++++++++++++--------------- web/secondary_toolbar.js | 56 ++++++++++++++-------------------------- web/toolbar.js | 40 ++++++++++++---------------- web/ui_utils.js | 8 ++++++ 4 files changed, 69 insertions(+), 82 deletions(-) diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js index 986a1168d..ca38312f3 100644 --- a/web/pdf_sidebar.js +++ b/web/pdf_sidebar.js @@ -17,6 +17,7 @@ import { PresentationModeState, RenderingStates, SidebarView, + toggleCheckedBtn, } from "./ui_utils.js"; const UI_NOTIFICATION_CLASS = "pdfSidebarNotification"; @@ -191,29 +192,33 @@ class PDFSidebar { // in order to prevent setting it to an invalid state. this.active = view; - const isThumbs = view === SidebarView.THUMBS, - isOutline = view === SidebarView.OUTLINE, - isAttachments = view === SidebarView.ATTACHMENTS, - isLayers = view === SidebarView.LAYERS; - - // Update the CSS classes (and aria attributes), for all buttons... - this.thumbnailButton.classList.toggle("toggled", isThumbs); - this.outlineButton.classList.toggle("toggled", isOutline); - this.attachmentsButton.classList.toggle("toggled", isAttachments); - this.layersButton.classList.toggle("toggled", isLayers); - - this.thumbnailButton.setAttribute("aria-checked", isThumbs); - this.outlineButton.setAttribute("aria-checked", isOutline); - this.attachmentsButton.setAttribute("aria-checked", isAttachments); - this.layersButton.setAttribute("aria-checked", isLayers); - // ... and for all views. - this.thumbnailView.classList.toggle("hidden", !isThumbs); - this.outlineView.classList.toggle("hidden", !isOutline); - this.attachmentsView.classList.toggle("hidden", !isAttachments); - this.layersView.classList.toggle("hidden", !isLayers); + // Update the CSS classes (and aria attributes), for all buttons and views. + toggleCheckedBtn( + this.thumbnailButton, + view === SidebarView.THUMBS, + this.thumbnailView + ); + toggleCheckedBtn( + this.outlineButton, + view === SidebarView.OUTLINE, + this.outlineView + ); + toggleCheckedBtn( + this.attachmentsButton, + view === SidebarView.ATTACHMENTS, + this.attachmentsView + ); + toggleCheckedBtn( + this.layersButton, + view === SidebarView.LAYERS, + this.layersView + ); // Finally, update view-specific CSS classes. - this._outlineOptionsContainer.classList.toggle("hidden", !isOutline); + this._outlineOptionsContainer.classList.toggle( + "hidden", + view !== SidebarView.OUTLINE + ); if (forceOpen && !this.isOpen) { this.open(); diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js index 04b3f7ae5..c3484d8e6 100644 --- a/web/secondary_toolbar.js +++ b/web/secondary_toolbar.js @@ -13,7 +13,12 @@ * limitations under the License. */ -import { CursorTool, ScrollMode, SpreadMode } from "./ui_utils.js"; +import { + CursorTool, + ScrollMode, + SpreadMode, + toggleCheckedBtn, +} from "./ui_utils.js"; import { PagesCountLimit } from "./pdf_viewer.js"; /** @@ -217,15 +222,9 @@ class SecondaryToolbar { } #bindCursorToolsListener({ cursorSelectToolButton, cursorHandToolButton }) { - this.eventBus._on("cursortoolchanged", function ({ tool }) { - const isSelect = tool === CursorTool.SELECT, - isHand = tool === CursorTool.HAND; - - cursorSelectToolButton.classList.toggle("toggled", isSelect); - cursorHandToolButton.classList.toggle("toggled", isHand); - - cursorSelectToolButton.setAttribute("aria-checked", isSelect); - cursorHandToolButton.setAttribute("aria-checked", isHand); + this.eventBus._on("cursortoolchanged", ({ tool }) => { + toggleCheckedBtn(cursorSelectToolButton, tool === CursorTool.SELECT); + toggleCheckedBtn(cursorHandToolButton, tool === CursorTool.HAND); }); } @@ -239,20 +238,10 @@ class SecondaryToolbar { spreadEvenButton, }) { const scrollModeChanged = ({ mode }) => { - const isPage = mode === ScrollMode.PAGE, - isVertical = mode === ScrollMode.VERTICAL, - isHorizontal = mode === ScrollMode.HORIZONTAL, - isWrapped = mode === ScrollMode.WRAPPED; - - scrollPageButton.classList.toggle("toggled", isPage); - scrollVerticalButton.classList.toggle("toggled", isVertical); - scrollHorizontalButton.classList.toggle("toggled", isHorizontal); - scrollWrappedButton.classList.toggle("toggled", isWrapped); - - scrollPageButton.setAttribute("aria-checked", isPage); - scrollVerticalButton.setAttribute("aria-checked", isVertical); - scrollHorizontalButton.setAttribute("aria-checked", isHorizontal); - scrollWrappedButton.setAttribute("aria-checked", isWrapped); + toggleCheckedBtn(scrollPageButton, mode === ScrollMode.PAGE); + toggleCheckedBtn(scrollVerticalButton, mode === ScrollMode.VERTICAL); + toggleCheckedBtn(scrollHorizontalButton, mode === ScrollMode.HORIZONTAL); + toggleCheckedBtn(scrollWrappedButton, mode === ScrollMode.WRAPPED); // Permanently *disable* the Scroll buttons when PAGE-scrolling is being // enforced for *very* long/large documents; please see the `BaseViewer`. @@ -265,6 +254,7 @@ class SecondaryToolbar { // Temporarily *disable* the Spread buttons when horizontal scrolling is // enabled, since the non-default Spread modes doesn't affect the layout. + const isHorizontal = mode === ScrollMode.HORIZONTAL; spreadNoneButton.disabled = isHorizontal; spreadOddButton.disabled = isHorizontal; spreadEvenButton.disabled = isHorizontal; @@ -283,19 +273,11 @@ class SecondaryToolbar { spreadOddButton, spreadEvenButton, }) { - function spreadModeChanged({ mode }) { - const isNone = mode === SpreadMode.NONE, - isOdd = mode === SpreadMode.ODD, - isEven = mode === SpreadMode.EVEN; - - spreadNoneButton.classList.toggle("toggled", isNone); - spreadOddButton.classList.toggle("toggled", isOdd); - spreadEvenButton.classList.toggle("toggled", isEven); - - spreadNoneButton.setAttribute("aria-checked", isNone); - spreadOddButton.setAttribute("aria-checked", isOdd); - spreadEvenButton.setAttribute("aria-checked", isEven); - } + const spreadModeChanged = ({ mode }) => { + toggleCheckedBtn(spreadNoneButton, mode === SpreadMode.NONE); + toggleCheckedBtn(spreadOddButton, mode === SpreadMode.ODD); + toggleCheckedBtn(spreadEvenButton, mode === SpreadMode.EVEN); + }; this.eventBus._on("spreadmodechanged", spreadModeChanged); this.eventBus._on("secondarytoolbarreset", evt => { diff --git a/web/toolbar.js b/web/toolbar.js index 86ce55ecb..2a7adf326 100644 --- a/web/toolbar.js +++ b/web/toolbar.js @@ -20,6 +20,7 @@ import { MAX_SCALE, MIN_SCALE, noContextMenuHandler, + toggleCheckedBtn, } from "./ui_utils.js"; import { AnnotationEditorType } from "pdfjs-lib"; @@ -205,36 +206,27 @@ class Toolbar { editorInkButton, editorInkParamsToolbar, }) { - const editorModeChanged = (evt, disableButtons = false) => { - const editorButtons = [ - { - mode: AnnotationEditorType.FREETEXT, - button: editorFreeTextButton, - toolbar: editorFreeTextParamsToolbar, - }, - { - mode: AnnotationEditorType.INK, - button: editorInkButton, - toolbar: editorInkParamsToolbar, - }, - ]; + const editorModeChanged = ({ mode }) => { + toggleCheckedBtn( + editorFreeTextButton, + mode === AnnotationEditorType.FREETEXT, + editorFreeTextParamsToolbar + ); + toggleCheckedBtn( + editorInkButton, + mode === AnnotationEditorType.INK, + editorInkParamsToolbar + ); - for (const { mode, button, toolbar } of editorButtons) { - const checked = mode === evt.mode; - button.classList.toggle("toggled", checked); - button.setAttribute("aria-checked", checked); - button.disabled = disableButtons; - toolbar?.classList.toggle("hidden", !checked); - } + const isDisable = mode === AnnotationEditorType.DISABLE; + editorFreeTextButton.disabled = isDisable; + editorInkButton.disabled = isDisable; }; this.eventBus._on("annotationeditormodechanged", editorModeChanged); this.eventBus._on("toolbarreset", evt => { if (evt.source === this) { - editorModeChanged( - { mode: AnnotationEditorType.NONE }, - /* disableButtons = */ true - ); + editorModeChanged({ mode: AnnotationEditorType.DISABLE }); } }); } diff --git a/web/ui_utils.js b/web/ui_utils.js index d1f67433e..0c651087b 100644 --- a/web/ui_utils.js +++ b/web/ui_utils.js @@ -841,6 +841,13 @@ function apiPageModeToSidebarView(mode) { return SidebarView.NONE; // Default value. } +function toggleCheckedBtn(button, toggle, view = null) { + button.classList.toggle("toggled", toggle); + button.setAttribute("aria-checked", toggle); + + view?.classList.toggle("hidden", !toggle); +} + export { animationStarted, apiPageLayoutToViewerModes, @@ -880,6 +887,7 @@ export { SidebarView, SpreadMode, TextLayerMode, + toggleCheckedBtn, UNKNOWN_SCALE, VERTICAL_PADDING, watchScroll,