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

Reduce some duplication when toggling buttons in the viewer toolbars

Browse Source 
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.
This commit is contained in:
Jonas Jenwald 2023-04-13 12:36:39 +02:00
parent b3932f70ed
commit 2a195beb30
4 changed files with 69 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/pdf_sidebar.js
View File

@ -17,6 +17,7 @@ import {
PresentationModeState, PresentationModeState,
RenderingStates, RenderingStates,
SidebarView, SidebarView,
toggleCheckedBtn,
} from "./ui_utils.js"; } from "./ui_utils.js";
const UI_NOTIFICATION_CLASS = "pdfSidebarNotification"; const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
@ -191,29 +192,33 @@ class PDFSidebar {
// in order to prevent setting it to an invalid state. // in order to prevent setting it to an invalid state.
this.active = view; this.active = view;
const isThumbs = view === SidebarView.THUMBS, // Update the CSS classes (and aria attributes), for all buttons and views.
isOutline = view === SidebarView.OUTLINE, toggleCheckedBtn(
isAttachments = view === SidebarView.ATTACHMENTS, this.thumbnailButton,
isLayers = view === SidebarView.LAYERS; view === SidebarView.THUMBS,
this.thumbnailView
// Update the CSS classes (and aria attributes), for all buttons... );
this.thumbnailButton.classList.toggle("toggled", isThumbs); toggleCheckedBtn(
this.outlineButton.classList.toggle("toggled", isOutline); this.outlineButton,
this.attachmentsButton.classList.toggle("toggled", isAttachments); view === SidebarView.OUTLINE,
this.layersButton.classList.toggle("toggled", isLayers); this.outlineView
);
this.thumbnailButton.setAttribute("aria-checked", isThumbs); toggleCheckedBtn(
this.outlineButton.setAttribute("aria-checked", isOutline); this.attachmentsButton,
this.attachmentsButton.setAttribute("aria-checked", isAttachments); view === SidebarView.ATTACHMENTS,
this.layersButton.setAttribute("aria-checked", isLayers); this.attachmentsView
// ... and for all views. );
this.thumbnailView.classList.toggle("hidden", !isThumbs); toggleCheckedBtn(
this.outlineView.classList.toggle("hidden", !isOutline); this.layersButton,
this.attachmentsView.classList.toggle("hidden", !isAttachments); view === SidebarView.LAYERS,
this.layersView.classList.toggle("hidden", !isLayers); this.layersView
);
// Finally, update view-specific CSS classes. // Finally, update view-specific CSS classes.
this._outlineOptionsContainer.classList.toggle("hidden", !isOutline); this._outlineOptionsContainer.classList.toggle(
"hidden",
view !== SidebarView.OUTLINE
);
if (forceOpen && !this.isOpen) { if (forceOpen && !this.isOpen) {
this.open(); this.open();

56
web/secondary_toolbar.js
View File

@ -13,7 +13,12 @@
* limitations under the License. * 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"; import { PagesCountLimit } from "./pdf_viewer.js";
/** /**
@ -217,15 +222,9 @@ class SecondaryToolbar {
} }
#bindCursorToolsListener({ cursorSelectToolButton, cursorHandToolButton }) { #bindCursorToolsListener({ cursorSelectToolButton, cursorHandToolButton }) {
this.eventBus._on("cursortoolchanged", function ({ tool }) { this.eventBus._on("cursortoolchanged", ({ tool }) => {
const isSelect = tool === CursorTool.SELECT, toggleCheckedBtn(cursorSelectToolButton, tool === CursorTool.SELECT);
isHand = tool === CursorTool.HAND; toggleCheckedBtn(cursorHandToolButton, tool === CursorTool.HAND);
cursorSelectToolButton.classList.toggle("toggled", isSelect);
cursorHandToolButton.classList.toggle("toggled", isHand);
cursorSelectToolButton.setAttribute("aria-checked", isSelect);
cursorHandToolButton.setAttribute("aria-checked", isHand);
}); });
} }
@ -239,20 +238,10 @@ class SecondaryToolbar {
spreadEvenButton, spreadEvenButton,
}) { }) {
const scrollModeChanged = ({ mode }) => { const scrollModeChanged = ({ mode }) => {
const isPage = mode === ScrollMode.PAGE, toggleCheckedBtn(scrollPageButton, mode === ScrollMode.PAGE);
isVertical = mode === ScrollMode.VERTICAL, toggleCheckedBtn(scrollVerticalButton, mode === ScrollMode.VERTICAL);
isHorizontal = mode === ScrollMode.HORIZONTAL, toggleCheckedBtn(scrollHorizontalButton, mode === ScrollMode.HORIZONTAL);
isWrapped = mode === ScrollMode.WRAPPED; toggleCheckedBtn(scrollWrappedButton, 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);
// Permanently *disable* the Scroll buttons when PAGE-scrolling is being // Permanently *disable* the Scroll buttons when PAGE-scrolling is being
// enforced for *very* long/large documents; please see the `BaseViewer`. // 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 // Temporarily *disable* the Spread buttons when horizontal scrolling is
// enabled, since the non-default Spread modes doesn't affect the layout. // enabled, since the non-default Spread modes doesn't affect the layout.
const isHorizontal = mode === ScrollMode.HORIZONTAL;
spreadNoneButton.disabled = isHorizontal; spreadNoneButton.disabled = isHorizontal;
spreadOddButton.disabled = isHorizontal; spreadOddButton.disabled = isHorizontal;
spreadEvenButton.disabled = isHorizontal; spreadEvenButton.disabled = isHorizontal;
@ -283,19 +273,11 @@ class SecondaryToolbar {
spreadOddButton, spreadOddButton,
spreadEvenButton, spreadEvenButton,
}) { }) {
function spreadModeChanged({ mode }) { const spreadModeChanged = ({ mode }) => {
const isNone = mode === SpreadMode.NONE, toggleCheckedBtn(spreadNoneButton, mode === SpreadMode.NONE);
isOdd = mode === SpreadMode.ODD, toggleCheckedBtn(spreadOddButton, mode === SpreadMode.ODD);
isEven = mode === SpreadMode.EVEN; toggleCheckedBtn(spreadEvenButton, 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);
}
this.eventBus._on("spreadmodechanged", spreadModeChanged); this.eventBus._on("spreadmodechanged", spreadModeChanged);
this.eventBus._on("secondarytoolbarreset", evt => { this.eventBus._on("secondarytoolbarreset", evt => {

40
web/toolbar.js
View File

@ -20,6 +20,7 @@ import {
MAX_SCALE, MAX_SCALE,
MIN_SCALE, MIN_SCALE,
noContextMenuHandler, noContextMenuHandler,
toggleCheckedBtn,
} from "./ui_utils.js"; } from "./ui_utils.js";
import { AnnotationEditorType } from "pdfjs-lib"; import { AnnotationEditorType } from "pdfjs-lib";
@ -205,36 +206,27 @@ class Toolbar {
editorInkButton, editorInkButton,
editorInkParamsToolbar, editorInkParamsToolbar,
}) { }) {
const editorModeChanged = (evt, disableButtons = false) => { const editorModeChanged = ({ mode }) => {
const editorButtons = [ toggleCheckedBtn(
{ editorFreeTextButton,
mode: AnnotationEditorType.FREETEXT, mode === AnnotationEditorType.FREETEXT,
button: editorFreeTextButton, editorFreeTextParamsToolbar
toolbar: editorFreeTextParamsToolbar, );
}, toggleCheckedBtn(
{ editorInkButton,
mode: AnnotationEditorType.INK, mode === AnnotationEditorType.INK,
button: editorInkButton, editorInkParamsToolbar
toolbar: editorInkParamsToolbar, );
},
];
for (const { mode, button, toolbar } of editorButtons) { const isDisable = mode === AnnotationEditorType.DISABLE;
const checked = mode === evt.mode; editorFreeTextButton.disabled = isDisable;
button.classList.toggle("toggled", checked); editorInkButton.disabled = isDisable;
button.setAttribute("aria-checked", checked);
button.disabled = disableButtons;
toolbar?.classList.toggle("hidden", !checked);
}
}; };
this.eventBus._on("annotationeditormodechanged", editorModeChanged); this.eventBus._on("annotationeditormodechanged", editorModeChanged);
this.eventBus._on("toolbarreset", evt => { this.eventBus._on("toolbarreset", evt => {
if (evt.source === this) { if (evt.source === this) {
editorModeChanged( editorModeChanged({ mode: AnnotationEditorType.DISABLE });
{ mode: AnnotationEditorType.NONE },
/* disableButtons = */ true
);
} }
}); });
} }

8
web/ui_utils.js
View File

@ -841,6 +841,13 @@ function apiPageModeToSidebarView(mode) {
return SidebarView.NONE; // Default value. 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 { export {
animationStarted, animationStarted,
apiPageLayoutToViewerModes, apiPageLayoutToViewerModes,
@ -880,6 +887,7 @@ export {
SidebarView, SidebarView,
SpreadMode, SpreadMode,
TextLayerMode, TextLayerMode,
toggleCheckedBtn,
UNKNOWN_SCALE, UNKNOWN_SCALE,
VERTICAL_PADDING, VERTICAL_PADDING,
watchScroll, watchScroll,