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

Merge pull request #16281 from Snuffleupagus/toggleCheckedBtn

Browse Source 
Reduce some duplication when toggling buttons in the viewer toolbars
This commit is contained in:
Tim van der Meij 2023-04-15 13:00:23 +02:00 committed by GitHub
commit 953c29873d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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,
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();

56
web/secondary_toolbar.js
View File

@ -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 => {

40
web/toolbar.js
View File

@ -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 });
}
});
}

8
web/ui_utils.js
View File

@ -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,