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

Convert more code to use classList.toggle with the force parameter

Browse Source 
There's a bunch of code, in the viewer, which for historical reasons use `switch` statements to add and remove CSS classes.
This code can be simplified, and unnecessary duplication avoided, by using `classList.toggle` instead.
This commit is contained in:
Jonas Jenwald 2019-02-06 17:18:45 +01:00
parent c0d6e46e39
commit 19795597a2
3 changed files with 39 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/pdf_outline_viewer.js
View File

@ -136,11 +136,10 @@ class PDFOutlineViewer {
* *
* @private * @private
*/ */
_toggleOutlineItem(root, show) { _toggleOutlineItem(root, show = false) {
this.lastToggleIsShow = show; this.lastToggleIsShow = show;
let togglers = root.querySelectorAll('.outlineItemToggler'); for (const toggler of root.querySelectorAll('.outlineItemToggler')) {
for (let i = 0, ii = togglers.length; i < ii; ++i) { toggler.classList.toggle('outlineItemsHidden', !show);
togglers[i].classList[show ? 'remove' : 'add']('outlineItemsHidden');
} }
} }

42
web/pdf_sidebar.js
View File

@ -171,16 +171,7 @@ class PDFSidebar {
} }
return false; return false;
case SidebarView.THUMBS: case SidebarView.THUMBS:
this.thumbnailButton.classList.add('toggled');
this.outlineButton.classList.remove('toggled');
this.attachmentsButton.classList.remove('toggled');
this.thumbnailView.classList.remove('hidden');
this.outlineView.classList.add('hidden');
this.attachmentsView.classList.add('hidden');
if (this.isOpen && isViewChanged) { if (this.isOpen && isViewChanged) {
this._updateThumbnailViewer();
shouldForceRendering = true; shouldForceRendering = true;
} }
break; break;
@ -188,25 +179,11 @@ class PDFSidebar {
if (this.outlineButton.disabled) { if (this.outlineButton.disabled) {
return false; return false;
} }
this.thumbnailButton.classList.remove('toggled');
this.outlineButton.classList.add('toggled');
this.attachmentsButton.classList.remove('toggled');
this.thumbnailView.classList.add('hidden');
this.outlineView.classList.remove('hidden');
this.attachmentsView.classList.add('hidden');
break; break;
case SidebarView.ATTACHMENTS: case SidebarView.ATTACHMENTS:
if (this.attachmentsButton.disabled) { if (this.attachmentsButton.disabled) {
return false; return false;
} }
this.thumbnailButton.classList.remove('toggled');
this.outlineButton.classList.remove('toggled');
this.attachmentsButton.classList.add('toggled');
this.thumbnailView.classList.add('hidden');
this.outlineView.classList.add('hidden');
this.attachmentsView.classList.remove('hidden');
break; break;
default: default:
console.error(`PDFSidebar._switchView: "${view}" is not a valid view.`); console.error(`PDFSidebar._switchView: "${view}" is not a valid view.`);
@ -214,13 +191,27 @@ class PDFSidebar {
} }
// Update the active view *after* it has been validated above, // Update the active view *after* it has been validated above,
// in order to prevent setting it to an invalid state. // in order to prevent setting it to an invalid state.
this.active = view | 0; this.active = view;
// Update the CSS classes, for all buttons...
this.thumbnailButton.classList.toggle('toggled',
view === SidebarView.THUMBS);
this.outlineButton.classList.toggle('toggled',
view === SidebarView.OUTLINE);
this.attachmentsButton.classList.toggle('toggled',
view === SidebarView.ATTACHMENTS);
// ... and for all views.
this.thumbnailView.classList.toggle('hidden', view !== SidebarView.THUMBS);
this.outlineView.classList.toggle('hidden', view !== SidebarView.OUTLINE);
this.attachmentsView.classList.toggle('hidden',
view !== SidebarView.ATTACHMENTS);
if (forceOpen && !this.isOpen) { if (forceOpen && !this.isOpen) {
this.open(); this.open();
return true; // Opening will trigger rendering and dispatch the event. return true; // Opening will trigger rendering and dispatch the event.
} }
if (shouldForceRendering) { if (shouldForceRendering) {
this._updateThumbnailViewer();
this._forceRendering(); this._forceRendering();
} }
if (isViewChanged) { if (isViewChanged) {
@ -237,8 +228,7 @@ class PDFSidebar {
this.isOpen = true; this.isOpen = true;
this.toggleButton.classList.add('toggled'); this.toggleButton.classList.add('toggled');
this.outerContainer.classList.add('sidebarMoving'); this.outerContainer.classList.add('sidebarMoving', 'sidebarOpen');
this.outerContainer.classList.add('sidebarOpen');
if (this.active === SidebarView.THUMBS) { if (this.active === SidebarView.THUMBS) {
this._updateThumbnailViewer(); this._updateThumbnailViewer();

65
web/secondary_toolbar.js
View File

@ -188,42 +188,26 @@ class SecondaryToolbar {
} }
_bindCursorToolsListener(buttons) { _bindCursorToolsListener(buttons) {
this.eventBus.on('cursortoolchanged', function(evt) { this.eventBus.on('cursortoolchanged', function({ tool, }) {
buttons.cursorSelectToolButton.classList.remove('toggled'); buttons.cursorSelectToolButton.classList.toggle('toggled',
buttons.cursorHandToolButton.classList.remove('toggled'); tool === CursorTool.SELECT);
buttons.cursorHandToolButton.classList.toggle('toggled',
switch (evt.tool) { tool === CursorTool.HAND);
case CursorTool.SELECT:
buttons.cursorSelectToolButton.classList.add('toggled');
break;
case CursorTool.HAND:
buttons.cursorHandToolButton.classList.add('toggled');
break;
}
}); });
} }
_bindScrollModeListener(buttons) { _bindScrollModeListener(buttons) {
function scrollModeChanged(evt) { function scrollModeChanged({ mode, }) {
buttons.scrollVerticalButton.classList.remove('toggled'); buttons.scrollVerticalButton.classList.toggle('toggled',
buttons.scrollHorizontalButton.classList.remove('toggled'); mode === ScrollMode.VERTICAL);
buttons.scrollWrappedButton.classList.remove('toggled'); buttons.scrollHorizontalButton.classList.toggle('toggled',
mode === ScrollMode.HORIZONTAL);
switch (evt.mode) { buttons.scrollWrappedButton.classList.toggle('toggled',
case ScrollMode.VERTICAL: mode === ScrollMode.WRAPPED);
buttons.scrollVerticalButton.classList.add('toggled');
break;
case ScrollMode.HORIZONTAL:
buttons.scrollHorizontalButton.classList.add('toggled');
break;
case ScrollMode.WRAPPED:
buttons.scrollWrappedButton.classList.add('toggled');
break;
}
// 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 isScrollModeHorizontal = (evt.mode === ScrollMode.HORIZONTAL); const isScrollModeHorizontal = (mode === ScrollMode.HORIZONTAL);
buttons.spreadNoneButton.disabled = isScrollModeHorizontal; buttons.spreadNoneButton.disabled = isScrollModeHorizontal;
buttons.spreadOddButton.disabled = isScrollModeHorizontal; buttons.spreadOddButton.disabled = isScrollModeHorizontal;
buttons.spreadEvenButton.disabled = isScrollModeHorizontal; buttons.spreadEvenButton.disabled = isScrollModeHorizontal;
@ -238,22 +222,13 @@ class SecondaryToolbar {
} }
_bindSpreadModeListener(buttons) { _bindSpreadModeListener(buttons) {
function spreadModeChanged(evt) { function spreadModeChanged({ mode, }) {
buttons.spreadNoneButton.classList.remove('toggled'); buttons.spreadNoneButton.classList.toggle('toggled',
buttons.spreadOddButton.classList.remove('toggled'); mode === SpreadMode.NONE);
buttons.spreadEvenButton.classList.remove('toggled'); buttons.spreadOddButton.classList.toggle('toggled',
mode === SpreadMode.ODD);
switch (evt.mode) { buttons.spreadEvenButton.classList.toggle('toggled',
case SpreadMode.NONE: mode === SpreadMode.EVEN);
buttons.spreadNoneButton.classList.add('toggled');
break;
case SpreadMode.ODD:
buttons.spreadOddButton.classList.add('toggled');
break;
case SpreadMode.EVEN:
buttons.spreadEvenButton.classList.add('toggled');
break;
}
} }
this.eventBus.on('spreadmodechanged', spreadModeChanged); this.eventBus.on('spreadmodechanged', spreadModeChanged);