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

Initial refactoring of the PDFPresentationMode code

Browse Source 
Noteworthy changes:

 - Adds JSDoc comments to PDFPresentationMode.

 - Removes a couple of, no longer necessary, helper functions.
This commit is contained in:
Jonas Jenwald 2015-02-01 22:53:59 +01:00
parent f15d5c8cfe
commit d5089f42fa
2 changed files with 110 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
web/pdf_presentation_mode.js
View File

@ -22,6 +22,16 @@ var DELAY_BEFORE_HIDING_CONTROLS = 3000; // in ms
var SELECTOR = 'presentationControls'; var SELECTOR = 'presentationControls';
var DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1000; // in ms var DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1000; // in ms
/**
* @typedef {Object} PDFPresentationModeOptions
* @property {HTMLDivElement} container - The container for the viewer element.
* @property {HTMLDivElement} viewer - (optional) The viewer element.
* @property {PDFThumbnailViewer} pdfThumbnailViewer - (optional) The thumbnail
* viewer.
* @property {Array} contextMenuItems - (optional) The menuitems that are added
* to the context menu in Presentation Mode.
*/
var PDFPresentationMode = { var PDFPresentationMode = {
initialized: false, initialized: false,
active: false, active: false,
@ -30,14 +40,16 @@ var PDFPresentationMode = {
mouseScrollTimeStamp: 0, mouseScrollTimeStamp: 0,
mouseScrollDelta: 0, mouseScrollDelta: 0,
/**
* @param {PDFPresentationModeOptions} options
*/
initialize: function pdfPresentationModeInitialize(options) { initialize: function pdfPresentationModeInitialize(options) {
this.initialized = true; this.initialized = true;
this.container = options.container; this.container = options.container;
this.viewer = options.viewer || options.container.firstElementChild;
this.pdfThumbnailViewer = options.pdfThumbnailViewer || null; this.pdfThumbnailViewer = options.pdfThumbnailViewer || null;
var contextMenuItems = options.contextMenuItems || null; var contextMenuItems = options.contextMenuItems || null;
this.viewer = this.container.firstElementChild;
window.addEventListener('fullscreenchange', this._fullscreenChange); window.addEventListener('fullscreenchange', this._fullscreenChange);
window.addEventListener('mozfullscreenchange', this._fullscreenChange); window.addEventListener('mozfullscreenchange', this._fullscreenChange);
//#if !(FIREFOX || MOZCENTRAL) //#if !(FIREFOX || MOZCENTRAL)
@ -57,12 +69,15 @@ var PDFPresentationMode = {
}, },
get isFullscreen() { get isFullscreen() {
return (document.fullscreenElement || return !!(document.fullscreenElement ||
document.mozFullScreen || document.mozFullScreen ||
document.webkitIsFullScreen || document.webkitIsFullScreen ||
document.msFullscreenElement); document.msFullscreenElement);
}, },
/**
* @private
*/
_fullscreenChange: function pdfPresentationModeFullscreenChange() { _fullscreenChange: function pdfPresentationModeFullscreenChange() {
var self = PDFPresentationMode; var self = PDFPresentationMode;
if (self.isFullscreen) { if (self.isFullscreen) {
@ -73,12 +88,12 @@ var PDFPresentationMode = {
}, },
/** /**
* Initialize a timeout that is used to specify switchInProgress when the * Used to initialize a timeout when requesting Presentation Mode,
* browser transitions to fullscreen mode. Since resize events are triggered * i.e. when the browser is requested to enter fullscreen mode.
* multiple times during the switch to fullscreen mode, this is necessary in * This timeout is used to prevent the current page from being scrolled
* order to prevent the page from being scrolled partially, or completely, * partially, or completely, out of view when entering Presentation Mode.
* out of view when Presentation Mode is enabled. * NOTE: This issue seems limited to certain zoom levels (e.g. 'page-width').
* Note: This is only an issue at certain zoom levels, e.g. 'page-width'. * @private
*/ */
_setSwitchInProgress: function pdfPresentationMode_setSwitchInProgress() { _setSwitchInProgress: function pdfPresentationMode_setSwitchInProgress() {
if (this.switchInProgress) { if (this.switchInProgress) {
@ -90,6 +105,9 @@ var PDFPresentationMode = {
}.bind(this), DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS); }.bind(this), DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS);
}, },
/**
* @private
*/
_resetSwitchInProgress: function pdfPresentationMode_resetSwitchInProgress() { _resetSwitchInProgress: function pdfPresentationMode_resetSwitchInProgress() {
if (this.switchInProgress) { if (this.switchInProgress) {
clearTimeout(this.switchInProgress); clearTimeout(this.switchInProgress);
@ -97,8 +115,12 @@ var PDFPresentationMode = {
} }
}, },
/**
* Request the browser to enter fullscreen mode.
* @returns {boolean} Indicating if the request was successful.
*/
request: function pdfPresentationModeRequest() { request: function pdfPresentationModeRequest() {
if (!this.initialized || this.isFullscreen || if (!this.initialized || this.switchInProgress || this.active ||
!this.viewer.hasChildNodes()) { !this.viewer.hasChildNodes()) {
return false; return false;
} }
@ -125,6 +147,9 @@ var PDFPresentationMode = {
return true; return true;
}, },
/**
* @private
*/
_notifyStateChange: function pdfPresentationModeNotifyStateChange() { _notifyStateChange: function pdfPresentationModeNotifyStateChange() {
var self = PDFPresentationMode; var self = PDFPresentationMode;
var event = document.createEvent('CustomEvent'); var event = document.createEvent('CustomEvent');
@ -135,6 +160,9 @@ var PDFPresentationMode = {
window.dispatchEvent(event); window.dispatchEvent(event);
}, },
/**
* @private
*/
_enter: function pdfPresentationModeEnter() { _enter: function pdfPresentationModeEnter() {
this.active = true; this.active = true;
this._resetSwitchInProgress(); this._resetSwitchInProgress();
@ -142,15 +170,14 @@ var PDFPresentationMode = {
// Ensure that the correct page is scrolled into view when entering // Ensure that the correct page is scrolled into view when entering
// Presentation Mode, by waiting until fullscreen mode in enabled. // Presentation Mode, by waiting until fullscreen mode in enabled.
// Note: This is only necessary in non-Mozilla browsers.
setTimeout(function enterPresentationModeTimeout() { setTimeout(function enterPresentationModeTimeout() {
PDFViewerApplication.page = this.args.page; PDFViewerApplication.page = this.args.page;
PDFViewerApplication.setScale('page-fit', true); PDFViewerApplication.setScale('page-fit', true);
}.bind(this), 0); }.bind(this), 0);
window.addEventListener('mousemove', this._mouseMove, false); window.addEventListener('mousemove', this._showControls, false);
window.addEventListener('mousedown', this._mouseDown, false); window.addEventListener('mousedown', this._mouseDown, false);
window.addEventListener('keydown', this._keyDown, false); window.addEventListener('keydown', this._resetMouseScrollState, false);
window.addEventListener('contextmenu', this._contextMenu, false); window.addEventListener('contextmenu', this._contextMenu, false);
this._showControls(); this._showControls();
@ -163,12 +190,14 @@ var PDFPresentationMode = {
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges();
}, },
/**
* @private
*/
_exit: function pdfPresentationModeExit() { _exit: function pdfPresentationModeExit() {
var page = PDFViewerApplication.page; var page = PDFViewerApplication.page;
// Ensure that the correct page is scrolled into view when exiting // Ensure that the correct page is scrolled into view when exiting
// Presentation Mode, by waiting until fullscreen mode is disabled. // Presentation Mode, by waiting until fullscreen mode is disabled.
// Note: This is only necessary in non-Mozilla browsers.
setTimeout(function exitPresentationModeTimeout() { setTimeout(function exitPresentationModeTimeout() {
this.active = false; this.active = false;
this._notifyStateChange(); this._notifyStateChange();
@ -178,48 +207,53 @@ var PDFPresentationMode = {
this.args = null; this.args = null;
}.bind(this), 0); }.bind(this), 0);
window.removeEventListener('mousemove', this._mouseMove, false); window.removeEventListener('mousemove', this._showControls, false);
window.removeEventListener('mousedown', this._mouseDown, false); window.removeEventListener('mousedown', this._mouseDown, false);
window.removeEventListener('keydown', this._keyDown, false); window.removeEventListener('keydown', this._resetMouseScrollState, false);
window.removeEventListener('contextmenu', this._contextMenu, false); window.removeEventListener('contextmenu', this._contextMenu, false);
this._hideControls(); this._hideControls();
this._clearMouseScrollState(); this._resetMouseScrollState();
this.container.removeAttribute('contextmenu'); this.container.removeAttribute('contextmenu');
this.contextMenuOpen = false; this.contextMenuOpen = false;
if (this.pdfThumbnailViewer) { if (this.pdfThumbnailViewer) {
// Ensure that the thumbnail of the current page is visible
// when exiting presentation mode.
this.pdfThumbnailViewer.ensureThumbnailVisible(page); this.pdfThumbnailViewer.ensureThumbnailVisible(page);
} }
}, },
/**
* @private
*/
_showControls: function pdfPresentationModeShowControls() { _showControls: function pdfPresentationModeShowControls() {
if (this.controlsTimeout) { var self = PDFPresentationMode;
clearTimeout(this.controlsTimeout); if (self.controlsTimeout) {
clearTimeout(self.controlsTimeout);
} else { } else {
this.container.classList.add(SELECTOR); self.container.classList.add(SELECTOR);
} }
this.controlsTimeout = setTimeout(function showControlsTimeout() { self.controlsTimeout = setTimeout(function showControlsTimeout() {
this.container.classList.remove(SELECTOR); self.container.classList.remove(SELECTOR);
delete this.controlsTimeout; delete self.controlsTimeout;
}.bind(this), DELAY_BEFORE_HIDING_CONTROLS); }, DELAY_BEFORE_HIDING_CONTROLS);
}, },
/**
* @private
*/
_hideControls: function pdfPresentationModeHideControls() { _hideControls: function pdfPresentationModeHideControls() {
if (!this.controlsTimeout) { var self = PDFPresentationMode;
if (!self.controlsTimeout) {
return; return;
} }
this.container.classList.remove(SELECTOR); clearTimeout(self.controlsTimeout);
clearTimeout(this.controlsTimeout); self.container.classList.remove(SELECTOR);
delete this.controlsTimeout; delete self.controlsTimeout;
},
_mouseMove: function pdfPresentationModeMouseMove(evt) {
PDFPresentationMode._showControls();
}, },
/**
* @private
*/
_mouseDown: function pdfPresentationModeMouseDown(evt) { _mouseDown: function pdfPresentationModeMouseDown(evt) {
var self = PDFPresentationMode; var self = PDFPresentationMode;
if (self.contextMenuOpen) { if (self.contextMenuOpen) {
@ -227,7 +261,6 @@ var PDFPresentationMode = {
evt.preventDefault(); evt.preventDefault();
return; return;
} }
if (evt.button === 0) { if (evt.button === 0) {
// Enable clicking of links in presentation mode. Please note: // Enable clicking of links in presentation mode. Please note:
// Only links pointing to destinations in the current PDF document work. // Only links pointing to destinations in the current PDF document work.
@ -241,78 +274,68 @@ var PDFPresentationMode = {
} }
}, },
_keyDown: function pdfPresentationModeKeyDown(evt) { /**
PDFPresentationMode._clearMouseScrollState(); * @private
}, */
_contextMenu: function pdfPresentationModeContextMenu(evt) { _contextMenu: function pdfPresentationModeContextMenu(evt) {
PDFPresentationMode.contextMenuOpen = true; PDFPresentationMode.contextMenuOpen = true;
}, },
/** /**
* This function flips the page in presentation mode if the user scrolls up * Switches page when the user scrolls (using a scroll wheel or a touchpad)
* or down with large enough motion and prevents page flipping too often. * with large enough motion, to prevent accidental page switches.
* @param {number} mouseScrollDelta The delta value from the mouse event. * @param {number} delta - The delta value from the mouse event.
*/ */
mouseScroll: function pdfPresentationModeMouseScroll(mouseScrollDelta) { mouseScroll: function pdfPresentationModeMouseScroll(delta) {
if (!this.initialized) { if (!this.initialized && !this.active) {
return; return;
} }
var MOUSE_SCROLL_COOLDOWN_TIME = 50; var MOUSE_SCROLL_COOLDOWN_TIME = 50;
var PAGE_SWITCH_THRESHOLD = 120;
var PageSwitchDirection = {
UP: -1,
DOWN: 1
};
var currentTime = (new Date()).getTime(); var currentTime = (new Date()).getTime();
var storedTime = this.mouseScrollTimeStamp; var storedTime = this.mouseScrollTimeStamp;
// In case one page has already been flipped there is a cooldown time // If we've already switched page, avoid accidentally switching page again.
// which has to expire before next page can be scrolled on to.
if (currentTime > storedTime && if (currentTime > storedTime &&
currentTime - storedTime < MOUSE_SCROLL_COOLDOWN_TIME) { currentTime - storedTime < MOUSE_SCROLL_COOLDOWN_TIME) {
return; return;
} }
// If the user changes scroll direction, reset the accumulated scroll delta.
// In case the user decides to scroll to the opposite direction than before if ((this.mouseScrollDelta > 0 && delta < 0) ||
// clear the accumulated delta. (this.mouseScrollDelta < 0 && delta > 0)) {
if ((this.mouseScrollDelta > 0 && mouseScrollDelta < 0) || this._resetMouseScrollState();
(this.mouseScrollDelta < 0 && mouseScrollDelta > 0)) {
this._clearMouseScrollState();
} }
this.mouseScrollDelta += delta;
this.mouseScrollDelta += mouseScrollDelta; if (Math.abs(this.mouseScrollDelta) >= PAGE_SWITCH_THRESHOLD) {
var pageSwitchDirection = (this.mouseScrollDelta > 0) ?
PageSwitchDirection.UP : PageSwitchDirection.DOWN;
var page = PDFViewerApplication.page;
this._resetMouseScrollState();
var PAGE_FLIP_THRESHOLD = 120; // If we're already on the first/last page, we don't need to do anything.
if (Math.abs(this.mouseScrollDelta) >= PAGE_FLIP_THRESHOLD) { if ((page === 1 && pageSwitchDirection === PageSwitchDirection.UP) ||
(page === PDFViewerApplication.pagesCount &&
var PageFlipDirection = { pageSwitchDirection === PageSwitchDirection.DOWN)) {
UP: -1,
DOWN: 1
};
// In presentation mode scroll one page at a time.
var pageFlipDirection = (this.mouseScrollDelta > 0) ?
PageFlipDirection.UP :
PageFlipDirection.DOWN;
this._clearMouseScrollState();
var currentPage = PDFViewerApplication.page;
// In case we are already on the first or the last page there is no need
// to do anything.
if ((currentPage === 1 && pageFlipDirection === PageFlipDirection.UP) ||
(currentPage === PDFViewerApplication.pagesCount &&
pageFlipDirection === PageFlipDirection.DOWN)) {
return; return;
} }
PDFViewerApplication.page = (page + pageSwitchDirection);
PDFViewerApplication.page += pageFlipDirection;
this.mouseScrollTimeStamp = currentTime; this.mouseScrollTimeStamp = currentTime;
} }
}, },
/** /**
* This function clears the member attributes used with mouse scrolling in * Resets the properties used for tracking mouse scrolling events.
* presentation mode. * @private
*/ */
_clearMouseScrollState: function pdfPresentationModeClearMouseScrollState() { _resetMouseScrollState: function pdfPresentationModeResetMouseScrollState() {
this.mouseScrollTimeStamp = 0; var self = PDFPresentationMode;
this.mouseScrollDelta = 0; self.mouseScrollTimeStamp = 0;
self.mouseScrollDelta = 0;
} }
}; };

4
web/viewer.js
View File

@ -191,6 +191,7 @@ var PDFViewerApplication = {
var toolbar = SecondaryToolbar; var toolbar = SecondaryToolbar;
PDFPresentationMode.initialize({ PDFPresentationMode.initialize({
container: container, container: container,
viewer: viewer,
pdfThumbnailViewer: this.pdfThumbnailViewer, pdfThumbnailViewer: this.pdfThumbnailViewer,
contextMenuItems: [ contextMenuItems: [
{ element: document.getElementById('contextFirstPage'), { element: document.getElementById('contextFirstPage'),
@ -1347,6 +1348,9 @@ var PDFViewerApplication = {
PDFPresentationMode.request(); PDFPresentationMode.request();
}, },
/**
* @param {number} delta - The delta value from the mouse event.
*/
scrollPresentationMode: function pdfViewScrollPresentationMode(delta) { scrollPresentationMode: function pdfViewScrollPresentationMode(delta) {
if (!this.supportsFullscreen) { if (!this.supportsFullscreen) {
return; return;