Skip to content

Commit

Permalink
Remove the internal "secondarytoolbarreset" event and slightly re-fac…
Browse files Browse the repository at this point in the history 
…tor 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/secondary_toolbar.js` file.
  • Loading branch information
@Snuffleupagus
Snuffleupagus committed Dec 26, 2023
1 parent 234b57b commit b1ca270
Showing 1 changed file with 74 additions and 82 deletions.
156 changes: 74 additions & 82 deletions web/secondary_toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,15 @@ import { PagesCountLimit } from "./pdf_viewer.js";
*/

class SecondaryToolbar {
#opts;

/**
* @param {SecondaryToolbarOptions} options
* @param {EventBus} eventBus
*/
constructor(options, eventBus) {
this.toolbar = options.toolbar;
this.toggleButton = options.toggleButton;
this.buttons = [
this.#opts = options;
const buttons = [
{
element: options.presentationModeButton,
eventName: "presentationmode",
Expand Down Expand Up @@ -141,28 +142,19 @@ class SecondaryToolbar {
},
];
if (typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")) {
this.buttons.push({
buttons.push({
element: options.openFileButton,
eventName: "openfile",
close: true,
});
}
this.items = {
firstPage: options.firstPageButton,
lastPage: options.lastPageButton,
pageRotateCw: options.pageRotateCwButton,
pageRotateCcw: options.pageRotateCcwButton,
};

this.eventBus = eventBus;
this.opened = false;

// Bind the event listeners for click, cursor tool, and scroll/spread mode
// actions.
this.#bindClickListeners();
this.#bindCursorToolsListener(options);
this.#bindScrollModeListener(options);
this.#bindSpreadModeListener(options);
this.#bindListeners(buttons);

this.reset();
}
Expand Down Expand Up @@ -190,30 +182,40 @@ class SecondaryToolbar {
this.#updateUIState();

// Reset the Scroll/Spread buttons too, since they're document specific.
this.eventBus.dispatch("secondarytoolbarreset", { source: this });
this.#scrollModeChanged({ mode: ScrollMode.VERTICAL });
this.#spreadModeChanged({ mode: SpreadMode.NONE });
}

#updateUIState() {
this.items.firstPage.disabled = this.pageNumber <= 1;
this.items.lastPage.disabled = this.pageNumber >= this.pagesCount;
this.items.pageRotateCw.disabled = this.pagesCount === 0;
this.items.pageRotateCcw.disabled = this.pagesCount === 0;
const {
firstPageButton,
lastPageButton,
pageRotateCwButton,
pageRotateCcwButton,
} = this.#opts;

firstPageButton.disabled = this.pageNumber <= 1;
lastPageButton.disabled = this.pageNumber >= this.pagesCount;
pageRotateCwButton.disabled = this.pagesCount === 0;
pageRotateCcwButton.disabled = this.pagesCount === 0;
}

#bindClickListeners() {
#bindListeners(buttons) {
const { eventBus } = this;
const { toggleButton } = this.#opts;
// Button to toggle the visibility of the secondary toolbar.
this.toggleButton.addEventListener("click", this.toggle.bind(this));
toggleButton.addEventListener("click", this.toggle.bind(this));

// All items within the secondary toolbar.
for (const { element, eventName, close, eventDetails } of this.buttons) {
for (const { element, eventName, close, eventDetails } of buttons) {
element.addEventListener("click", evt => {
if (eventName !== null) {
this.eventBus.dispatch(eventName, { source: this, ...eventDetails });
eventBus.dispatch(eventName, { source: this, ...eventDetails });
}
if (close) {
this.close();
}
this.eventBus.dispatch("reporttelemetry", {
eventBus.dispatch("reporttelemetry", {
source: this,
details: {
type: "buttons",
Expand All @@ -222,88 +224,78 @@ class SecondaryToolbar {
});
});
}

eventBus._on("cursortoolchanged", this.#cursorToolChanged.bind(this));
eventBus._on("scrollmodechanged", this.#scrollModeChanged.bind(this));
eventBus._on("spreadmodechanged", this.#spreadModeChanged.bind(this));
}

#bindCursorToolsListener({ cursorSelectToolButton, cursorHandToolButton }) {
this.eventBus._on("cursortoolchanged", ({ tool }) => {
toggleCheckedBtn(cursorSelectToolButton, tool === CursorTool.SELECT);
toggleCheckedBtn(cursorHandToolButton, tool === CursorTool.HAND);
});
#cursorToolChanged({ tool }) {
const { cursorSelectToolButton, cursorHandToolButton } = this.#opts;

toggleCheckedBtn(cursorSelectToolButton, tool === CursorTool.SELECT);
toggleCheckedBtn(cursorHandToolButton, tool === CursorTool.HAND);
}

#bindScrollModeListener({
scrollPageButton,
scrollVerticalButton,
scrollHorizontalButton,
scrollWrappedButton,
spreadNoneButton,
spreadOddButton,
spreadEvenButton,
}) {
const scrollModeChanged = ({ mode }) => {
toggleCheckedBtn(scrollPageButton, mode === ScrollMode.PAGE);
toggleCheckedBtn(scrollVerticalButton, mode === ScrollMode.VERTICAL);
toggleCheckedBtn(scrollHorizontalButton, mode === ScrollMode.HORIZONTAL);
toggleCheckedBtn(scrollWrappedButton, mode === ScrollMode.WRAPPED);
#scrollModeChanged({ mode }) {
const {
scrollPageButton,
scrollVerticalButton,
scrollHorizontalButton,
scrollWrappedButton,
spreadNoneButton,
spreadOddButton,
spreadEvenButton,
} = this.#opts;

// Permanently *disable* the Scroll buttons when PAGE-scrolling is being
// enforced for *very* long/large documents; please see the `BaseViewer`.
const forceScrollModePage =
this.pagesCount > PagesCountLimit.FORCE_SCROLL_MODE_PAGE;
scrollPageButton.disabled = forceScrollModePage;
scrollVerticalButton.disabled = forceScrollModePage;
scrollHorizontalButton.disabled = forceScrollModePage;
scrollWrappedButton.disabled = forceScrollModePage;
toggleCheckedBtn(scrollPageButton, mode === ScrollMode.PAGE);
toggleCheckedBtn(scrollVerticalButton, mode === ScrollMode.VERTICAL);
toggleCheckedBtn(scrollHorizontalButton, mode === ScrollMode.HORIZONTAL);
toggleCheckedBtn(scrollWrappedButton, mode === ScrollMode.WRAPPED);

// 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;
};
this.eventBus._on("scrollmodechanged", scrollModeChanged);
// Permanently *disable* the Scroll buttons when PAGE-scrolling is being
// enforced for *very* long/large documents; please see the `BaseViewer`.
const forceScrollModePage =
this.pagesCount > PagesCountLimit.FORCE_SCROLL_MODE_PAGE;
scrollPageButton.disabled = forceScrollModePage;
scrollVerticalButton.disabled = forceScrollModePage;
scrollHorizontalButton.disabled = forceScrollModePage;
scrollWrappedButton.disabled = forceScrollModePage;

this.eventBus._on("secondarytoolbarreset", evt => {
if (evt.source === this) {
scrollModeChanged({ mode: ScrollMode.VERTICAL });
}
});
// 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;
}

#bindSpreadModeListener({
spreadNoneButton,
spreadOddButton,
spreadEvenButton,
}) {
const spreadModeChanged = ({ mode }) => {
toggleCheckedBtn(spreadNoneButton, mode === SpreadMode.NONE);
toggleCheckedBtn(spreadOddButton, mode === SpreadMode.ODD);
toggleCheckedBtn(spreadEvenButton, mode === SpreadMode.EVEN);
};
this.eventBus._on("spreadmodechanged", spreadModeChanged);
#spreadModeChanged({ mode }) {
const { spreadNoneButton, spreadOddButton, spreadEvenButton } = this.#opts;

this.eventBus._on("secondarytoolbarreset", evt => {
if (evt.source === this) {
spreadModeChanged({ mode: SpreadMode.NONE });
}
});
toggleCheckedBtn(spreadNoneButton, mode === SpreadMode.NONE);
toggleCheckedBtn(spreadOddButton, mode === SpreadMode.ODD);
toggleCheckedBtn(spreadEvenButton, mode === SpreadMode.EVEN);
}

open() {
if (this.opened) {
return;
}
this.opened = true;
toggleExpandedBtn(this.toggleButton, true, this.toolbar);

const { toggleButton, toolbar } = this.#opts;
toggleExpandedBtn(toggleButton, true, toolbar);
}

close() {
if (!this.opened) {
return;
}
this.opened = false;
toggleExpandedBtn(this.toggleButton, false, this.toolbar);

const { toggleButton, toolbar } = this.#opts;
toggleExpandedBtn(toggleButton, false, toolbar);
}

toggle() {
Expand Down

0 comments on commit b1ca270

Please sign in to comment.