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

Refactor PDFPresentationMode to be more class-like

Browse Source
This commit is contained in:
Jonas Jenwald 2015-02-03 18:09:11 +01:00
parent 4edee12e92
commit 4211df63eb
2 changed files with 340 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
web/pdf_presentation_mode.js
View File

@ -18,9 +18,9 @@
'use strict'; 'use strict';
var DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1500; // in ms
var DELAY_BEFORE_HIDING_CONTROLS = 3000; // in ms var DELAY_BEFORE_HIDING_CONTROLS = 3000; // in ms
var SELECTOR = 'presentationControls'; var SELECTOR = 'presentationControls';
var DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1000; // in ms
/** /**
* @typedef {Object} PDFPresentationModeOptions * @typedef {Object} PDFPresentationModeOptions
@ -32,30 +32,25 @@ var DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1000; // in ms
* to the context menu in Presentation Mode. * to the context menu in Presentation Mode.
*/ */
var PDFPresentationMode = { /**
initialized: false, * @class
active: false, */
args: null, var PDFPresentationMode = (function PDFPresentationModeClosure() {
contextMenuOpen: false,
mouseScrollTimeStamp: 0,
mouseScrollDelta: 0,
/** /**
* @constructs PDFPresentationMode
* @param {PDFPresentationModeOptions} options * @param {PDFPresentationModeOptions} options
*/ */
initialize: function pdfPresentationModeInitialize(options) { function PDFPresentationMode(options) {
this.initialized = true;
this.container = options.container; this.container = options.container;
this.viewer = options.viewer || options.container.firstElementChild; 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;
window.addEventListener('fullscreenchange', this._fullscreenChange); this.active = false;
window.addEventListener('mozfullscreenchange', this._fullscreenChange); this.args = null;
//#if !(FIREFOX || MOZCENTRAL) this.contextMenuOpen = false;
window.addEventListener('webkitfullscreenchange', this._fullscreenChange); this.mouseScrollTimeStamp = 0;
window.addEventListener('MSFullscreenChange', this._fullscreenChange); this.mouseScrollDelta = 0;
//#endif
if (contextMenuItems) { if (contextMenuItems) {
for (var i = 0, ii = contextMenuItems.length; i < ii; i++) { for (var i = 0, ii = contextMenuItems.length; i < ii; i++) {
@ -66,17 +61,19 @@ var PDFPresentationMode = {
}.bind(this, item.handler)); }.bind(this, item.handler));
} }
} }
}, }
PDFPresentationMode.prototype = {
/** /**
* Request the browser to enter fullscreen mode. * Request the browser to enter fullscreen mode.
* @returns {boolean} Indicating if the request was successful. * @returns {boolean} Indicating if the request was successful.
*/ */
request: function pdfPresentationModeRequest() { request: function PDFPresentationMode_request() {
if (!this.initialized || this.switchInProgress || this.active || if (this.switchInProgress || this.active ||
!this.viewer.hasChildNodes()) { !this.viewer.hasChildNodes()) {
return false; return false;
} }
this._addFullscreenChangeListeners();
this._setSwitchInProgress(); this._setSwitchInProgress();
this._notifyStateChange(); this._notifyStateChange();
@ -105,8 +102,8 @@ var PDFPresentationMode = {
* with large enough motion, to prevent accidental page switches. * with large enough motion, to prevent accidental page switches.
* @param {number} delta - The delta value from the mouse event. * @param {number} delta - The delta value from the mouse event.
*/ */
mouseScroll: function pdfPresentationModeMouseScroll(delta) { mouseScroll: function PDFPresentationMode_mouseScroll(delta) {
if (!this.initialized && !this.active) { if (!this.active) {
return; return;
} }
var MOUSE_SCROLL_COOLDOWN_TIME = 50; var MOUSE_SCROLL_COOLDOWN_TIME = 50;
@ -119,12 +116,12 @@ var PDFPresentationMode = {
var currentTime = (new Date()).getTime(); var currentTime = (new Date()).getTime();
var storedTime = this.mouseScrollTimeStamp; var storedTime = this.mouseScrollTimeStamp;
// If we've already switched page, avoid accidentally switching page again. // If we've already switched page, avoid accidentally switching again.
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. // If the scroll direction changed, reset the accumulated scroll delta.
if ((this.mouseScrollDelta > 0 && delta < 0) || if ((this.mouseScrollDelta > 0 && delta < 0) ||
(this.mouseScrollDelta < 0 && delta > 0)) { (this.mouseScrollDelta < 0 && delta > 0)) {
this._resetMouseScrollState(); this._resetMouseScrollState();
@ -137,7 +134,7 @@ var PDFPresentationMode = {
var page = PDFViewerApplication.page; var page = PDFViewerApplication.page;
this._resetMouseScrollState(); this._resetMouseScrollState();
// If we're already on the first/last page, we don't need to do anything. // If we're at the first/last page, we don't need to do anything.
if ((page === 1 && pageSwitchDirection === PageSwitchDirection.UP) || if ((page === 1 && pageSwitchDirection === PageSwitchDirection.UP) ||
(page === PDFViewerApplication.pagesCount && (page === PDFViewerApplication.pagesCount &&
pageSwitchDirection === PageSwitchDirection.DOWN)) { pageSwitchDirection === PageSwitchDirection.DOWN)) {
@ -158,24 +155,11 @@ var PDFPresentationMode = {
/** /**
* @private * @private
*/ */
_fullscreenChange: function pdfPresentationModeFullscreenChange() { _notifyStateChange: function PDFPresentationMode_notifyStateChange() {
var self = PDFPresentationMode;
if (self.isFullscreen) {
self._enter();
} else {
self._exit();
}
},
/**
* @private
*/
_notifyStateChange: function pdfPresentationModeNotifyStateChange() {
var self = PDFPresentationMode;
var event = document.createEvent('CustomEvent'); var event = document.createEvent('CustomEvent');
event.initCustomEvent('presentationmodechanged', true, true, { event.initCustomEvent('presentationmodechanged', true, true, {
active: self.active, active: this.active,
switchInProgress: !!self.switchInProgress switchInProgress: !!this.switchInProgress
}); });
window.dispatchEvent(event); window.dispatchEvent(event);
}, },
@ -185,14 +169,15 @@ var PDFPresentationMode = {
* i.e. when the browser is requested to enter fullscreen mode. * i.e. when the browser is requested to enter fullscreen mode.
* This timeout is used to prevent the current page from being scrolled * This timeout is used to prevent the current page from being scrolled
* partially, or completely, out of view when entering Presentation Mode. * partially, or completely, out of view when entering Presentation Mode.
* NOTE: This issue seems limited to certain zoom levels (e.g. 'page-width'). * NOTE: This issue seems limited to certain zoom levels (e.g. page-width).
* @private * @private
*/ */
_setSwitchInProgress: function pdfPresentationMode_setSwitchInProgress() { _setSwitchInProgress: function PDFPresentationMode_setSwitchInProgress() {
if (this.switchInProgress) { if (this.switchInProgress) {
clearTimeout(this.switchInProgress); clearTimeout(this.switchInProgress);
} }
this.switchInProgress = setTimeout(function switchInProgressTimeout() { this.switchInProgress = setTimeout(function switchInProgressTimeout() {
this._removeFullscreenChangeListeners();
delete this.switchInProgress; delete this.switchInProgress;
this._notifyStateChange(); this._notifyStateChange();
}.bind(this), DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS); }.bind(this), DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS);
@ -201,7 +186,8 @@ var PDFPresentationMode = {
/** /**
* @private * @private
*/ */
_resetSwitchInProgress: function pdfPresentationMode_resetSwitchInProgress() { _resetSwitchInProgress:
function PDFPresentationMode_resetSwitchInProgress() {
if (this.switchInProgress) { if (this.switchInProgress) {
clearTimeout(this.switchInProgress); clearTimeout(this.switchInProgress);
delete this.switchInProgress; delete this.switchInProgress;
@ -211,7 +197,7 @@ var PDFPresentationMode = {
/** /**
* @private * @private
*/ */
_enter: function pdfPresentationModeEnter() { _enter: function PDFPresentationMode_enter() {
this.active = true; this.active = true;
this._resetSwitchInProgress(); this._resetSwitchInProgress();
this._notifyStateChange(); this._notifyStateChange();
@ -223,11 +209,7 @@ var PDFPresentationMode = {
PDFViewerApplication.setScale('page-fit', true); PDFViewerApplication.setScale('page-fit', true);
}.bind(this), 0); }.bind(this), 0);
window.addEventListener('mousemove', this._showControls, false); this._addWindowListeners();
window.addEventListener('mousedown', this._mouseDown, false);
window.addEventListener('keydown', this._resetMouseScrollState, false);
window.addEventListener('contextmenu', this._contextMenu, false);
this._showControls(); this._showControls();
this.contextMenuOpen = false; this.contextMenuOpen = false;
this.container.setAttribute('contextmenu', 'viewerContextMenu'); this.container.setAttribute('contextmenu', 'viewerContextMenu');
@ -241,13 +223,14 @@ var PDFPresentationMode = {
/** /**
* @private * @private
*/ */
_exit: function pdfPresentationModeExit() { _exit: function PDFPresentationMode_exit() {
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.
setTimeout(function exitPresentationModeTimeout() { setTimeout(function exitPresentationModeTimeout() {
this.active = false; this.active = false;
this._removeFullscreenChangeListeners();
this._notifyStateChange(); this._notifyStateChange();
PDFViewerApplication.setScale(this.args.previousScale, true); PDFViewerApplication.setScale(this.args.previousScale, true);
@ -255,11 +238,7 @@ var PDFPresentationMode = {
this.args = null; this.args = null;
}.bind(this), 0); }.bind(this), 0);
window.removeEventListener('mousemove', this._showControls, false); this._removeWindowListeners();
window.removeEventListener('mousedown', this._mouseDown, false);
window.removeEventListener('keydown', this._resetMouseScrollState, false);
window.removeEventListener('contextmenu', this._contextMenu, false);
this._hideControls(); this._hideControls();
this._resetMouseScrollState(); this._resetMouseScrollState();
this.container.removeAttribute('contextmenu'); this.container.removeAttribute('contextmenu');
@ -273,10 +252,9 @@ var PDFPresentationMode = {
/** /**
* @private * @private
*/ */
_mouseDown: function pdfPresentationModeMouseDown(evt) { _mouseDown: function PDFPresentationMode_mouseDown(evt) {
var self = PDFPresentationMode; if (this.contextMenuOpen) {
if (self.contextMenuOpen) { this.contextMenuOpen = false;
self.contextMenuOpen = false;
evt.preventDefault(); evt.preventDefault();
return; return;
} }
@ -296,46 +274,123 @@ var PDFPresentationMode = {
/** /**
* @private * @private
*/ */
_contextMenu: function pdfPresentationModeContextMenu(evt) { _contextMenu: function PDFPresentationMode_contextMenu() {
PDFPresentationMode.contextMenuOpen = true; this.contextMenuOpen = true;
}, },
/** /**
* @private * @private
*/ */
_showControls: function pdfPresentationModeShowControls() { _showControls: function PDFPresentationMode_showControls() {
var self = PDFPresentationMode; if (this.controlsTimeout) {
if (self.controlsTimeout) { clearTimeout(this.controlsTimeout);
clearTimeout(self.controlsTimeout);
} else { } else {
self.container.classList.add(SELECTOR); this.container.classList.add(SELECTOR);
} }
self.controlsTimeout = setTimeout(function showControlsTimeout() { this.controlsTimeout = setTimeout(function showControlsTimeout() {
self.container.classList.remove(SELECTOR); this.container.classList.remove(SELECTOR);
delete self.controlsTimeout; delete this.controlsTimeout;
}, DELAY_BEFORE_HIDING_CONTROLS); }.bind(this), DELAY_BEFORE_HIDING_CONTROLS);
}, },
/** /**
* @private * @private
*/ */
_hideControls: function pdfPresentationModeHideControls() { _hideControls: function PDFPresentationMode_hideControls() {
var self = PDFPresentationMode; if (!this.controlsTimeout) {
if (!self.controlsTimeout) {
return; return;
} }
clearTimeout(self.controlsTimeout); clearTimeout(this.controlsTimeout);
self.container.classList.remove(SELECTOR); this.container.classList.remove(SELECTOR);
delete self.controlsTimeout; delete this.controlsTimeout;
}, },
/** /**
* Resets the properties used for tracking mouse scrolling events. * Resets the properties used for tracking mouse scrolling events.
* @private * @private
*/ */
_resetMouseScrollState: function pdfPresentationModeResetMouseScrollState() { _resetMouseScrollState:
var self = PDFPresentationMode; function PDFPresentationMode_resetMouseScrollState() {
self.mouseScrollTimeStamp = 0; this.mouseScrollTimeStamp = 0;
self.mouseScrollDelta = 0; this.mouseScrollDelta = 0;
},
/**
* @private
*/
_addWindowListeners: function PDFPresentationMode_addWindowListeners() {
this.showControlsBind = this._showControls.bind(this);
this.mouseDownBind = this._mouseDown.bind(this);
this.resetMouseScrollStateBind = this._resetMouseScrollState.bind(this);
this.contextMenuBind = this._contextMenu.bind(this);
window.addEventListener('mousemove', this.showControlsBind);
window.addEventListener('mousedown', this.mouseDownBind);
window.addEventListener('keydown', this.resetMouseScrollStateBind);
window.addEventListener('contextmenu', this.contextMenuBind);
},
/**
* @private
*/
_removeWindowListeners:
function PDFPresentationMode_removeWindowListeners() {
window.removeEventListener('mousemove', this.showControlsBind);
window.removeEventListener('mousedown', this.mouseDownBind);
window.removeEventListener('keydown', this.resetMouseScrollStateBind);
window.removeEventListener('contextmenu', this.contextMenuBind);
delete this.showControlsBind;
delete this.mouseDownBind;
delete this.resetMouseScrollStateBind;
delete this.contextMenuBind;
},
/**
* @private
*/
_fullscreenChange: function PDFPresentationMode_fullscreenChange() {
if (this.isFullscreen) {
this._enter();
} else {
this._exit();
} }
}; },
/**
* @private
*/
_addFullscreenChangeListeners:
function PDFPresentationMode_addFullscreenChangeListeners() {
this.fullscreenChangeBind = this._fullscreenChange.bind(this);
window.addEventListener('fullscreenchange', this.fullscreenChangeBind);
window.addEventListener('mozfullscreenchange', this.fullscreenChangeBind);
//#if !(FIREFOX || MOZCENTRAL)
window.addEventListener('webkitfullscreenchange',
this.fullscreenChangeBind);
window.addEventListener('MSFullscreenChange', this.fullscreenChangeBind);
//#endif
},
/**
* @private
*/
_removeFullscreenChangeListeners:
function PDFPresentationMode_removeFullscreenChangeListeners() {
window.removeEventListener('fullscreenchange', this.fullscreenChangeBind);
window.removeEventListener('mozfullscreenchange',
this.fullscreenChangeBind);
//#if !(FIREFOX || MOZCENTRAL)
window.removeEventListener('webkitfullscreenchange',
this.fullscreenChangeBind);
window.removeEventListener('MSFullscreenChange',
this.fullscreenChangeBind);
//#endif
delete this.fullscreenChangeBind;
}
};
return PDFPresentationMode;
})();

12
web/viewer.js
View File

@ -107,6 +107,8 @@ var PDFViewerApplication = {
pdfThumbnailViewer: null, pdfThumbnailViewer: null,
/** @type {PDFRenderingQueue} */ /** @type {PDFRenderingQueue} */
pdfRenderingQueue: null, pdfRenderingQueue: null,
/** @type {PDFPresentationMode} */
pdfPresentationMode: null,
pageRotation: 0, pageRotation: 0,
updateScaleControls: true, updateScaleControls: true,
isInitialViewSet: false, isInitialViewSet: false,
@ -189,7 +191,7 @@ var PDFViewerApplication = {
if (this.supportsFullscreen) { if (this.supportsFullscreen) {
var toolbar = SecondaryToolbar; var toolbar = SecondaryToolbar;
PDFPresentationMode.initialize({ this.pdfPresentationMode = new PDFPresentationMode({
container: container, container: container,
viewer: viewer, viewer: viewer,
pdfThumbnailViewer: this.pdfThumbnailViewer, pdfThumbnailViewer: this.pdfThumbnailViewer,
@ -1342,20 +1344,20 @@ var PDFViewerApplication = {
}, },
requestPresentationMode: function pdfViewRequestPresentationMode() { requestPresentationMode: function pdfViewRequestPresentationMode() {
if (!this.supportsFullscreen) { if (!this.pdfPresentationMode) {
return; return;
} }
PDFPresentationMode.request(); this.pdfPresentationMode.request();
}, },
/** /**
* @param {number} delta - The delta value from the mouse event. * @param {number} delta - The delta value from the mouse event.
*/ */
scrollPresentationMode: function pdfViewScrollPresentationMode(delta) { scrollPresentationMode: function pdfViewScrollPresentationMode(delta) {
if (!this.supportsFullscreen) { if (!this.pdfPresentationMode) {
return; return;
} }
PDFPresentationMode.mouseScroll(delta); this.pdfPresentationMode.mouseScroll(delta);
} }
}; };
//#if GENERIC //#if GENERIC