akira
/
pdfjs-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #8306 from timvandermeij/es6-sidebar 

Convert the sidebar to ES6 syntax
Tim van der Meij 8 years ago committed by GitHub
parent
ece24dfe61 26ad82f5c2
commit
99d35a1039
1 changed files with 308 additions and 318 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 626
      web/pdf_sidebar.js

626
web/pdf_sidebar.js
Unescape View File

@ -16,9 +16,9 @@
import { mozL10n } from './ui_utils'; import { mozL10n } from './ui_utils';
import { RenderingStates } from './pdf_rendering_queue'; import { RenderingStates } from './pdf_rendering_queue';
var UI_NOTIFICATION_CLASS = 'pdfSidebarNotification'; const UI_NOTIFICATION_CLASS = 'pdfSidebarNotification';
var SidebarView = { const SidebarView = {
NONE: 0, NONE: 0,
THUMBS: 1, THUMBS: 1,
OUTLINE: 2, OUTLINE: 2,
@ -53,15 +53,11 @@ var SidebarView = {
* for documents containing outline/attachments. The default value is `false`. * for documents containing outline/attachments. The default value is `false`.
*/ */
/** class PDFSidebar {
* @class
*/
var PDFSidebar = (function PDFSidebarClosure() {
/** /**
* @constructs PDFSidebar
* @param {PDFSidebarOptions} options * @param {PDFSidebarOptions} options
*/ */
function PDFSidebar(options) { constructor(options) {
this.isOpen = false; this.isOpen = false;
this.active = SidebarView.THUMBS; this.active = SidebarView.THUMBS;
this.isInitialViewSet = false; this.isInitialViewSet = false;
@ -94,356 +90,350 @@ var PDFSidebar = (function PDFSidebarClosure() {
this._addEventListeners(); this._addEventListeners();
} }
PDFSidebar.prototype = { reset() {
reset: function PDFSidebar_reset() { this.isInitialViewSet = false;
this.isInitialViewSet = false;
this._hideUINotification(null);
this.switchView(SidebarView.THUMBS);
this.outlineButton.disabled = false;
this.attachmentsButton.disabled = false;
},
/** this._hideUINotification(null);
* @returns {number} One of the values in {SidebarView}. this.switchView(SidebarView.THUMBS);
*/
get visibleView() {
return (this.isOpen ? this.active : SidebarView.NONE);
},
get isThumbnailViewVisible() { this.outlineButton.disabled = false;
return (this.isOpen && this.active === SidebarView.THUMBS); this.attachmentsButton.disabled = false;
}, }
get isOutlineViewVisible() { /**
return (this.isOpen && this.active === SidebarView.OUTLINE); * @returns {number} One of the values in {SidebarView}.
}, */
get visibleView() {
return (this.isOpen ? this.active : SidebarView.NONE);
}
get isAttachmentsViewVisible() { get isThumbnailViewVisible() {
return (this.isOpen && this.active === SidebarView.ATTACHMENTS); return (this.isOpen && this.active === SidebarView.THUMBS);
}, }
/** get isOutlineViewVisible() {
* @param {number} view - The sidebar view that should become visible, return (this.isOpen && this.active === SidebarView.OUTLINE);
* must be one of the values in {SidebarView}. }
*/
setInitialView: function PDFSidebar_setInitialView(view) {
if (this.isInitialViewSet) {
return;
}
this.isInitialViewSet = true;
if (this.isOpen && view === SidebarView.NONE) { get isAttachmentsViewVisible() {
this._dispatchEvent(); return (this.isOpen && this.active === SidebarView.ATTACHMENTS);
// If the user has already manually opened the sidebar, }
// immediately closing it would be bad UX.
return;
}
var isViewPreserved = (view === this.visibleView);
this.switchView(view, /* forceOpen */ true);
if (isViewPreserved) { /**
// Prevent dispatching two back-to-back `sidebarviewchanged` events, * @param {number} view - The sidebar view that should become visible,
// since `this.switchView` dispatched the event if the view changed. * must be one of the values in {SidebarView}.
this._dispatchEvent(); */
} setInitialView(view) {
}, if (this.isInitialViewSet) {
return;
}
this.isInitialViewSet = true;
/** if (this.isOpen && view === SidebarView.NONE) {
* @param {number} view - The sidebar view that should be switched to, this._dispatchEvent();
* must be one of the values in {SidebarView}. // If the user has already manually opened the sidebar,
* @param {boolean} forceOpen - (optional) Ensure that the sidebar is open. // immediately closing it would be bad UX.
* The default value is false. return;
*/ }
switchView: function PDFSidebar_switchView(view, forceOpen) { var isViewPreserved = (view === this.visibleView);
if (view === SidebarView.NONE) { this.switchView(view, /* forceOpen */ true);
this.close();
return; if (isViewPreserved) {
} // Prevent dispatching two back-to-back `sidebarviewchanged` events,
var isViewChanged = (view !== this.active); // since `this.switchView` dispatched the event if the view changed.
var shouldForceRendering = false; this._dispatchEvent();
}
}
switch (view) { /**
case SidebarView.THUMBS: * @param {number} view - The sidebar view that should be switched to,
this.thumbnailButton.classList.add('toggled'); * must be one of the values in {SidebarView}.
this.outlineButton.classList.remove('toggled'); * @param {boolean} forceOpen - (optional) Ensure that the sidebar is open.
this.attachmentsButton.classList.remove('toggled'); * The default value is `false`.
*/
this.thumbnailView.classList.remove('hidden'); switchView(view, forceOpen = false) {
this.outlineView.classList.add('hidden'); if (view === SidebarView.NONE) {
this.attachmentsView.classList.add('hidden'); this.close();
return;
if (this.isOpen && isViewChanged) { }
this._updateThumbnailViewer(); var isViewChanged = (view !== this.active);
shouldForceRendering = true; var shouldForceRendering = false;
}
break; switch (view) {
case SidebarView.OUTLINE: case SidebarView.THUMBS:
if (this.outlineButton.disabled) { this.thumbnailButton.classList.add('toggled');
return; this.outlineButton.classList.remove('toggled');
} this.attachmentsButton.classList.remove('toggled');
this.thumbnailButton.classList.remove('toggled');
this.outlineButton.classList.add('toggled'); this.thumbnailView.classList.remove('hidden');
this.attachmentsButton.classList.remove('toggled'); this.outlineView.classList.add('hidden');
this.attachmentsView.classList.add('hidden');
this.thumbnailView.classList.add('hidden');
this.outlineView.classList.remove('hidden'); if (this.isOpen && isViewChanged) {
this.attachmentsView.classList.add('hidden'); this._updateThumbnailViewer();
break; shouldForceRendering = true;
case SidebarView.ATTACHMENTS: }
if (this.attachmentsButton.disabled) { break;
return; case SidebarView.OUTLINE:
} if (this.outlineButton.disabled) {
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;
default:
console.error('PDFSidebar_switchView: "' + view +
'" is an unsupported value.');
return; return;
} }
// Update the active view *after* it has been validated above, this.thumbnailButton.classList.remove('toggled');
// in order to prevent setting it to an invalid state. this.outlineButton.classList.add('toggled');
this.active = view | 0; this.attachmentsButton.classList.remove('toggled');
if (forceOpen && !this.isOpen) { this.thumbnailView.classList.add('hidden');
this.open(); this.outlineView.classList.remove('hidden');
return; // NOTE: Opening will trigger rendering, and dispatch the event. this.attachmentsView.classList.add('hidden');
} break;
if (shouldForceRendering) { case SidebarView.ATTACHMENTS:
this._forceRendering(); if (this.attachmentsButton.disabled) {
} return;
if (isViewChanged) { }
this._dispatchEvent(); this.thumbnailButton.classList.remove('toggled');
} this.outlineButton.classList.remove('toggled');
this._hideUINotification(this.active); this.attachmentsButton.classList.add('toggled');
},
this.thumbnailView.classList.add('hidden');
open: function PDFSidebar_open() { this.outlineView.classList.add('hidden');
if (this.isOpen) { this.attachmentsView.classList.remove('hidden');
break;
default:
console.error('PDFSidebar_switchView: "' + view +
'" is an unsupported value.');
return; return;
} }
this.isOpen = true; // Update the active view *after* it has been validated above,
this.toggleButton.classList.add('toggled'); // in order to prevent setting it to an invalid state.
this.active = view | 0;
this.outerContainer.classList.add('sidebarMoving');
this.outerContainer.classList.add('sidebarOpen'); if (forceOpen && !this.isOpen) {
this.open();
if (this.active === SidebarView.THUMBS) { return; // NOTE: Opening will trigger rendering, and dispatch the event.
this._updateThumbnailViewer(); }
} if (shouldForceRendering) {
this._forceRendering(); this._forceRendering();
}
if (isViewChanged) {
this._dispatchEvent(); this._dispatchEvent();
}
this._hideUINotification(this.active);
}
this._hideUINotification(this.active); open() {
}, if (this.isOpen) {
return;
}
this.isOpen = true;
this.toggleButton.classList.add('toggled');
close: function PDFSidebar_close() { this.outerContainer.classList.add('sidebarMoving');
if (!this.isOpen) { this.outerContainer.classList.add('sidebarOpen');
return;
}
this.isOpen = false;
this.toggleButton.classList.remove('toggled');
this.outerContainer.classList.add('sidebarMoving'); if (this.active === SidebarView.THUMBS) {
this.outerContainer.classList.remove('sidebarOpen'); this._updateThumbnailViewer();
}
this._forceRendering();
this._dispatchEvent();
this._forceRendering(); this._hideUINotification(this.active);
this._dispatchEvent(); }
},
toggle: function PDFSidebar_toggle() { close() {
if (this.isOpen) { if (!this.isOpen) {
this.close(); return;
} else { }
this.open(); this.isOpen = false;
} this.toggleButton.classList.remove('toggled');
},
/** this.outerContainer.classList.add('sidebarMoving');
* @private this.outerContainer.classList.remove('sidebarOpen');
*/
_dispatchEvent: function PDFSidebar_dispatchEvent() {
this.eventBus.dispatch('sidebarviewchanged', {
source: this,
view: this.visibleView,
});
},
/** this._forceRendering();
* @private this._dispatchEvent();
*/ }
_forceRendering: function PDFSidebar_forceRendering() {
if (this.onToggled) {
this.onToggled();
} else { // Fallback
this.pdfViewer.forceRendering();
this.pdfThumbnailViewer.forceRendering();
}
},
/** toggle() {
* @private if (this.isOpen) {
*/ this.close();
_updateThumbnailViewer: function PDFSidebar_updateThumbnailViewer() { } else {
var pdfViewer = this.pdfViewer; this.open();
var thumbnailViewer = this.pdfThumbnailViewer; }
}
// Use the rendered pages to set the corresponding thumbnail images.
var pagesCount = pdfViewer.pagesCount;
for (var pageIndex = 0; pageIndex < pagesCount; pageIndex++) {
var pageView = pdfViewer.getPageView(pageIndex);
if (pageView && pageView.renderingState === RenderingStates.FINISHED) {
var thumbnailView = thumbnailViewer.getThumbnail(pageIndex);
thumbnailView.setImage(pageView);
}
}
thumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber);
},
/** /**
* @private * @private
*/ */
_showUINotification: function (view) { _dispatchEvent() {
if (this.disableNotification) { this.eventBus.dispatch('sidebarviewchanged', {
return; source: this,
} view: this.visibleView,
});
}
this.toggleButton.title = mozL10n.get('toggle_sidebar_notification.title', /**
null, 'Toggle Sidebar (document contains outline/attachments)'); * @private
*/
_forceRendering() {
if (this.onToggled) {
this.onToggled();
} else { // Fallback
this.pdfViewer.forceRendering();
this.pdfThumbnailViewer.forceRendering();
}
}
if (!this.isOpen) { /**
// Only show the notification on the `toggleButton` if the sidebar is * @private
// currently closed, to avoid unnecessarily bothering the user. */
this.toggleButton.classList.add(UI_NOTIFICATION_CLASS); _updateThumbnailViewer() {
} else if (view === this.active) { var pdfViewer = this.pdfViewer;
// If the sidebar is currently open *and* the `view` is visible, do not var thumbnailViewer = this.pdfThumbnailViewer;
// bother the user with a notification on the corresponding button.
return; // Use the rendered pages to set the corresponding thumbnail images.
var pagesCount = pdfViewer.pagesCount;
for (var pageIndex = 0; pageIndex < pagesCount; pageIndex++) {
var pageView = pdfViewer.getPageView(pageIndex);
if (pageView && pageView.renderingState === RenderingStates.FINISHED) {
var thumbnailView = thumbnailViewer.getThumbnail(pageIndex);
thumbnailView.setImage(pageView);
} }
}
thumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber);
}
/**
* @private
*/
_showUINotification(view) {
if (this.disableNotification) {
return;
}
this.toggleButton.title = mozL10n.get('toggle_sidebar_notification.title',
null, 'Toggle Sidebar (document contains outline/attachments)');
if (!this.isOpen) {
// Only show the notification on the `toggleButton` if the sidebar is
// currently closed, to avoid unnecessarily bothering the user.
this.toggleButton.classList.add(UI_NOTIFICATION_CLASS);
} else if (view === this.active) {
// If the sidebar is currently open *and* the `view` is visible, do not
// bother the user with a notification on the corresponding button.
return;
}
switch (view) {
case SidebarView.OUTLINE:
this.outlineButton.classList.add(UI_NOTIFICATION_CLASS);
break;
case SidebarView.ATTACHMENTS:
this.attachmentsButton.classList.add(UI_NOTIFICATION_CLASS);
break;
}
}
/**
* @private
*/
_hideUINotification(view) {
if (this.disableNotification) {
return;
}
var removeNotification = (view) => {
switch (view) { switch (view) {
case SidebarView.OUTLINE: case SidebarView.OUTLINE:
this.outlineButton.classList.add(UI_NOTIFICATION_CLASS); this.outlineButton.classList.remove(UI_NOTIFICATION_CLASS);
break; break;
case SidebarView.ATTACHMENTS: case SidebarView.ATTACHMENTS:
this.attachmentsButton.classList.add(UI_NOTIFICATION_CLASS); this.attachmentsButton.classList.remove(UI_NOTIFICATION_CLASS);
break; break;
} }
}, };
/** if (!this.isOpen && view !== null) {
* @private // Only hide the notifications when the sidebar is currently open,
*/ // or when it is being reset (i.e. `view === null`).
_hideUINotification: function (view) { return;
if (this.disableNotification) { }
return; this.toggleButton.classList.remove(UI_NOTIFICATION_CLASS);
}
if (view !== null) {
var removeNotification = function (view) { removeNotification(view);
switch (view) { return;
case SidebarView.OUTLINE: }
this.outlineButton.classList.remove(UI_NOTIFICATION_CLASS); for (view in SidebarView) { // Remove all sidebar notifications on reset.
break; removeNotification(SidebarView[view]);
case SidebarView.ATTACHMENTS: }
this.attachmentsButton.classList.remove(UI_NOTIFICATION_CLASS);
break; this.toggleButton.title = mozL10n.get('toggle_sidebar.title', null,
} 'Toggle Sidebar');
}.bind(this); }
if (!this.isOpen && view !== null) { /**
// Only hide the notifications when the sidebar is currently open, * @private
// or when it is being reset (i.e. `view === null`). */
return; _addEventListeners() {
this.mainContainer.addEventListener('transitionend', (evt) => {
if (evt.target === this.mainContainer) {
this.outerContainer.classList.remove('sidebarMoving');
} }
this.toggleButton.classList.remove(UI_NOTIFICATION_CLASS); });
if (view !== null) { // Buttons for switching views.
removeNotification(view); this.thumbnailButton.addEventListener('click', () => {
return; this.switchView(SidebarView.THUMBS);
} });
for (view in SidebarView) { // Remove all sidebar notifications on reset.
removeNotification(SidebarView[view]); this.outlineButton.addEventListener('click', () => {
this.switchView(SidebarView.OUTLINE);
});
this.outlineButton.addEventListener('dblclick', () => {
this.pdfOutlineViewer.toggleOutlineTree();
});
this.attachmentsButton.addEventListener('click', () => {
this.switchView(SidebarView.ATTACHMENTS);
});
// Disable/enable views.
this.eventBus.on('outlineloaded', (evt) => {
var outlineCount = evt.outlineCount;
this.outlineButton.disabled = !outlineCount;
if (outlineCount) {
this._showUINotification(SidebarView.OUTLINE);
} else if (this.active === SidebarView.OUTLINE) {
// If the outline view was opened during document load, switch away
// from it if it turns out that the document has no outline.
this.switchView(SidebarView.THUMBS);
} }
});
this.toggleButton.title = mozL10n.get('toggle_sidebar.title', null, this.eventBus.on('attachmentsloaded', (evt) => {
'Toggle Sidebar'); var attachmentsCount = evt.attachmentsCount;
},
/**
* @private
*/
_addEventListeners: function PDFSidebar_addEventListeners() {
var self = this;
self.mainContainer.addEventListener('transitionend', function(evt) {
if (evt.target === /* mainContainer */ this) {
self.outerContainer.classList.remove('sidebarMoving');
}
});
// Buttons for switching views.
self.thumbnailButton.addEventListener('click', function() {
self.switchView(SidebarView.THUMBS);
});
self.outlineButton.addEventListener('click', function() {
self.switchView(SidebarView.OUTLINE);
});
self.outlineButton.addEventListener('dblclick', function() {
self.pdfOutlineViewer.toggleOutlineTree();
});
self.attachmentsButton.addEventListener('click', function() {
self.switchView(SidebarView.ATTACHMENTS);
});
// Disable/enable views.
self.eventBus.on('outlineloaded', function(e) {
var outlineCount = e.outlineCount;
self.outlineButton.disabled = !outlineCount;
if (outlineCount) {
self._showUINotification(SidebarView.OUTLINE);
} else if (self.active === SidebarView.OUTLINE) {
// If the outline view was opened during document load, switch away
// from it if it turns out that the document has no outline.
self.switchView(SidebarView.THUMBS);
}
});
self.eventBus.on('attachmentsloaded', function(e) {
var attachmentsCount = e.attachmentsCount;
self.attachmentsButton.disabled = !attachmentsCount; this.attachmentsButton.disabled = !attachmentsCount;
if (attachmentsCount) { if (attachmentsCount) {
self._showUINotification(SidebarView.ATTACHMENTS); this._showUINotification(SidebarView.ATTACHMENTS);
} else if (self.active === SidebarView.ATTACHMENTS) { } else if (this.active === SidebarView.ATTACHMENTS) {
// If the attachment view was opened during document load, switch away // If the attachment view was opened during document load, switch away
// from it if it turns out that the document has no attachments. // from it if it turns out that the document has no attachments.
self.switchView(SidebarView.THUMBS); this.switchView(SidebarView.THUMBS);
} }
}); });
// Update the thumbnailViewer, if visible, when exiting presentation mode.
self.eventBus.on('presentationmodechanged', function(e) {
if (!e.active && !e.switchInProgress && self.isThumbnailViewVisible) {
self._updateThumbnailViewer();
}
});
},
};
return PDFSidebar; // Update the thumbnailViewer, if visible, when exiting presentation mode.
})(); this.eventBus.on('presentationmodechanged', (evt) => {
if (!evt.active && !evt.switchInProgress && this.isThumbnailViewVisible) {
this._updateThumbnailViewer();
}
});
}
}
export { export {
SidebarView, SidebarView,

Write Preview
Loading…
Cancel
Save