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

Convert presentation mode to ES6 syntax

Browse Source
This commit is contained in:
Tim van der Meij 2017-04-23 21:13:59 +02:00
parent 3554a93c2b
commit ccdc7ba3c8
No known key found for this signature in database
GPG Key ID: 8C3FD2925A5F2762
1 changed files with 411 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
web/pdf_presentation_mode.js
View File

@ -15,10 +15,19 @@
import { normalizeWheelEventDelta } from './ui_utils'; import { normalizeWheelEventDelta } from './ui_utils';
var DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1500; // in ms const DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1500; // in ms
var DELAY_BEFORE_HIDING_CONTROLS = 3000; // in ms const DELAY_BEFORE_HIDING_CONTROLS = 3000; // in ms
var ACTIVE_SELECTOR = 'pdfPresentationMode'; const ACTIVE_SELECTOR = 'pdfPresentationMode';
var CONTROLS_SELECTOR = 'pdfPresentationModeControls'; const CONTROLS_SELECTOR = 'pdfPresentationModeControls';
const MOUSE_SCROLL_COOLDOWN_TIME = 50; // in ms
const PAGE_SWITCH_THRESHOLD = 0.1;
// Number of CSS pixels for a movement to count as a swipe.
const SWIPE_MIN_DISTANCE_THRESHOLD = 50;
// Swipe angle deviation from the x or y axis before it is not
// considered a swipe in that direction any more.
const SWIPE_ANGLE_THRESHOLD = Math.PI / 6;
/** /**
* @typedef {Object} PDFPresentationModeOptions * @typedef {Object} PDFPresentationModeOptions
@ -30,15 +39,11 @@ var CONTROLS_SELECTOR = 'pdfPresentationModeControls';
* to the context menu in Presentation Mode. * to the context menu in Presentation Mode.
*/ */
/** class PDFPresentationMode {
* @class
*/
var PDFPresentationMode = (function PDFPresentationModeClosure() {
/** /**
* @constructs PDFPresentationMode
* @param {PDFPresentationModeOptions} options * @param {PDFPresentationModeOptions} options
*/ */
function PDFPresentationMode(options) { constructor(options) {
this.container = options.container; this.container = options.container;
this.viewer = options.viewer || options.container.firstElementChild; this.viewer = options.viewer || options.container.firstElementChild;
this.pdfViewer = options.pdfViewer; this.pdfViewer = options.pdfViewer;
@ -53,37 +58,31 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
this.touchSwipeState = null; this.touchSwipeState = null;
if (contextMenuItems) { if (contextMenuItems) {
contextMenuItems.contextFirstPage.addEventListener('click', contextMenuItems.contextFirstPage.addEventListener('click', () => {
function PDFPresentationMode_contextFirstPageClick(e) {
this.contextMenuOpen = false; this.contextMenuOpen = false;
this.eventBus.dispatch('firstpage'); this.eventBus.dispatch('firstpage');
}.bind(this)); });
contextMenuItems.contextLastPage.addEventListener('click', contextMenuItems.contextLastPage.addEventListener('click', () => {
function PDFPresentationMode_contextLastPageClick(e) {
this.contextMenuOpen = false; this.contextMenuOpen = false;
this.eventBus.dispatch('lastpage'); this.eventBus.dispatch('lastpage');
}.bind(this)); });
contextMenuItems.contextPageRotateCw.addEventListener('click', contextMenuItems.contextPageRotateCw.addEventListener('click', () => {
function PDFPresentationMode_contextPageRotateCwClick(e) {
this.contextMenuOpen = false; this.contextMenuOpen = false;
this.eventBus.dispatch('rotatecw'); this.eventBus.dispatch('rotatecw');
}.bind(this)); });
contextMenuItems.contextPageRotateCcw.addEventListener('click', contextMenuItems.contextPageRotateCcw.addEventListener('click', () => {
function PDFPresentationMode_contextPageRotateCcwClick(e) {
this.contextMenuOpen = false; this.contextMenuOpen = false;
this.eventBus.dispatch('rotateccw'); this.eventBus.dispatch('rotateccw');
}.bind(this)); });
} }
} }
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 PDFPresentationMode_request() { request() {
if (this.switchInProgress || this.active || if (this.switchInProgress || this.active || !this.viewer.hasChildNodes()) {
!this.viewer.hasChildNodes()) {
return false; return false;
} }
this._addFullscreenChangeListeners(); this._addFullscreenChangeListeners();
@ -108,12 +107,12 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
}; };
return true; return true;
}, }
/** /**
* @private * @private
*/ */
_mouseWheel: function PDFPresentationMode_mouseWheel(evt) { _mouseWheel(evt) {
if (!this.active) { if (!this.active) {
return; return;
} }
@ -121,10 +120,6 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
evt.preventDefault(); evt.preventDefault();
var delta = normalizeWheelEventDelta(evt); var delta = normalizeWheelEventDelta(evt);
var MOUSE_SCROLL_COOLDOWN_TIME = 50;
var PAGE_SWITCH_THRESHOLD = 0.1;
var currentTime = (new Date()).getTime(); var currentTime = (new Date()).getTime();
var storedTime = this.mouseScrollTimeStamp; var storedTime = this.mouseScrollTimeStamp;
@ -149,19 +144,17 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
this.mouseScrollTimeStamp = currentTime; this.mouseScrollTimeStamp = currentTime;
} }
} }
}, }
get isFullscreen() { get isFullscreen() {
return !!(document.fullscreenElement || return !!(document.fullscreenElement || document.mozFullScreen ||
document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement);
document.webkitIsFullScreen || }
document.msFullscreenElement);
},
/** /**
* @private * @private
*/ */
_goToPreviousPage: function PDFPresentationMode_goToPreviousPage() { _goToPreviousPage() {
var page = this.pdfViewer.currentPageNumber; var page = this.pdfViewer.currentPageNumber;
// If we're at the first page, we don't need to do anything. // If we're at the first page, we don't need to do anything.
if (page <= 1) { if (page <= 1) {
@ -169,12 +162,12 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
} }
this.pdfViewer.currentPageNumber = (page - 1); this.pdfViewer.currentPageNumber = (page - 1);
return true; return true;
}, }
/** /**
* @private * @private
*/ */
_goToNextPage: function PDFPresentationMode_goToNextPage() { _goToNextPage() {
var page = this.pdfViewer.currentPageNumber; var page = this.pdfViewer.currentPageNumber;
// If we're at the last page, we don't need to do anything. // If we're at the last page, we don't need to do anything.
if (page >= this.pdfViewer.pagesCount) { if (page >= this.pdfViewer.pagesCount) {
@ -182,18 +175,18 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
} }
this.pdfViewer.currentPageNumber = (page + 1); this.pdfViewer.currentPageNumber = (page + 1);
return true; return true;
}, }
/** /**
* @private * @private
*/ */
_notifyStateChange: function PDFPresentationMode_notifyStateChange() { _notifyStateChange() {
this.eventBus.dispatch('presentationmodechanged', { this.eventBus.dispatch('presentationmodechanged', {
source: this, source: this,
active: this.active, active: this.active,
switchInProgress: !!this.switchInProgress switchInProgress: !!this.switchInProgress,
}); });
}, }
/** /**
* Used to initialize a timeout when requesting Presentation Mode, * Used to initialize a timeout when requesting Presentation Mode,
@ -201,34 +194,34 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
* 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() {
if (this.switchInProgress) { if (this.switchInProgress) {
clearTimeout(this.switchInProgress); clearTimeout(this.switchInProgress);
} }
this.switchInProgress = setTimeout(function switchInProgressTimeout() { this.switchInProgress = setTimeout(() => {
this._removeFullscreenChangeListeners(); this._removeFullscreenChangeListeners();
delete this.switchInProgress; delete this.switchInProgress;
this._notifyStateChange(); this._notifyStateChange();
}.bind(this), DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS); }, DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS);
}, }
/** /**
* @private * @private
*/ */
_resetSwitchInProgress: _resetSwitchInProgress() {
function PDFPresentationMode_resetSwitchInProgress() {
if (this.switchInProgress) { if (this.switchInProgress) {
clearTimeout(this.switchInProgress); clearTimeout(this.switchInProgress);
delete this.switchInProgress; delete this.switchInProgress;
} }
}, }
/** /**
* @private * @private
*/ */
_enter: function PDFPresentationMode_enter() { _enter() {
this.active = true; this.active = true;
this._resetSwitchInProgress(); this._resetSwitchInProgress();
this._notifyStateChange(); this._notifyStateChange();
@ -236,10 +229,10 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
// 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.
setTimeout(function enterPresentationModeTimeout() { setTimeout(() => {
this.pdfViewer.currentPageNumber = this.args.page; this.pdfViewer.currentPageNumber = this.args.page;
this.pdfViewer.currentScaleValue = 'page-fit'; this.pdfViewer.currentScaleValue = 'page-fit';
}.bind(this), 0); }, 0);
this._addWindowListeners(); this._addWindowListeners();
this._showControls(); this._showControls();
@ -250,18 +243,18 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
// for the user to deselect text that is selected (e.g. with "Select all") // for the user to deselect text that is selected (e.g. with "Select all")
// when entering Presentation Mode, hence we remove any active selection. // when entering Presentation Mode, hence we remove any active selection.
window.getSelection().removeAllRanges(); window.getSelection().removeAllRanges();
}, }
/** /**
* @private * @private
*/ */
_exit: function PDFPresentationMode_exit() { _exit() {
var page = this.pdfViewer.currentPageNumber; var page = this.pdfViewer.currentPageNumber;
this.container.classList.remove(ACTIVE_SELECTOR); this.container.classList.remove(ACTIVE_SELECTOR);
// 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(() => {
this.active = false; this.active = false;
this._removeFullscreenChangeListeners(); this._removeFullscreenChangeListeners();
this._notifyStateChange(); this._notifyStateChange();
@ -269,27 +262,27 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
this.pdfViewer.currentScaleValue = this.args.previousScale; this.pdfViewer.currentScaleValue = this.args.previousScale;
this.pdfViewer.currentPageNumber = page; this.pdfViewer.currentPageNumber = page;
this.args = null; this.args = null;
}.bind(this), 0); }, 0);
this._removeWindowListeners(); this._removeWindowListeners();
this._hideControls(); this._hideControls();
this._resetMouseScrollState(); this._resetMouseScrollState();
this.container.removeAttribute('contextmenu'); this.container.removeAttribute('contextmenu');
this.contextMenuOpen = false; this.contextMenuOpen = false;
}, }
/** /**
* @private * @private
*/ */
_mouseDown: function PDFPresentationMode_mouseDown(evt) { _mouseDown(evt) {
if (this.contextMenuOpen) { if (this.contextMenuOpen) {
this.contextMenuOpen = false; this.contextMenuOpen = false;
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. Note: only links
// Only links pointing to destinations in the current PDF document work. // pointing to destinations in the current PDF document work.
var isInternalLink = (evt.target.href && var isInternalLink = (evt.target.href &&
evt.target.classList.contains('internalLink')); evt.target.classList.contains('internalLink'));
if (!isInternalLink) { if (!isInternalLink) {
@ -298,78 +291,72 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
this.pdfViewer.currentPageNumber += (evt.shiftKey ? -1 : 1); this.pdfViewer.currentPageNumber += (evt.shiftKey ? -1 : 1);
} }
} }
}, }
/** /**
* @private * @private
*/ */
_contextMenu: function PDFPresentationMode_contextMenu() { _contextMenu() {
this.contextMenuOpen = true; this.contextMenuOpen = true;
}, }
/** /**
* @private * @private
*/ */
_showControls: function PDFPresentationMode_showControls() { _showControls() {
if (this.controlsTimeout) { if (this.controlsTimeout) {
clearTimeout(this.controlsTimeout); clearTimeout(this.controlsTimeout);
} else { } else {
this.container.classList.add(CONTROLS_SELECTOR); this.container.classList.add(CONTROLS_SELECTOR);
} }
this.controlsTimeout = setTimeout(function showControlsTimeout() { this.controlsTimeout = setTimeout(() => {
this.container.classList.remove(CONTROLS_SELECTOR); this.container.classList.remove(CONTROLS_SELECTOR);
delete this.controlsTimeout; delete this.controlsTimeout;
}.bind(this), DELAY_BEFORE_HIDING_CONTROLS); }, DELAY_BEFORE_HIDING_CONTROLS);
}, }
/** /**
* @private * @private
*/ */
_hideControls: function PDFPresentationMode_hideControls() { _hideControls() {
if (!this.controlsTimeout) { if (!this.controlsTimeout) {
return; return;
} }
clearTimeout(this.controlsTimeout); clearTimeout(this.controlsTimeout);
this.container.classList.remove(CONTROLS_SELECTOR); this.container.classList.remove(CONTROLS_SELECTOR);
delete this.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: _resetMouseScrollState() {
function PDFPresentationMode_resetMouseScrollState() {
this.mouseScrollTimeStamp = 0; this.mouseScrollTimeStamp = 0;
this.mouseScrollDelta = 0; this.mouseScrollDelta = 0;
}, }
/** /**
* @private * @private
*/ */
_touchSwipe: function PDFPresentationMode_touchSwipe(evt) { _touchSwipe(evt) {
if (!this.active) { if (!this.active) {
return; return;
} }
// Must move at least these many CSS pixels for it to count as a swipe
var SWIPE_MIN_DISTANCE_THRESHOLD = 50;
// The swipe angle is allowed to deviate from the x or y axis by this much
// before it is not considered a swipe in that direction any more.
var SWIPE_ANGLE_THRESHOLD = Math.PI / 6;
if (evt.touches.length > 1) { if (evt.touches.length > 1) {
// Multiple touch points detected, cancel the swipe. // Multiple touch points detected; cancel the swipe.
this.touchSwipeState = null; this.touchSwipeState = null;
return; return;
} }
switch (evt.type) { switch (evt.type) {
case 'touchstart': case 'touchstart':
this.touchSwipeState = { this.touchSwipeState = {
startX: evt.touches[0].pageX, startX: evt.touches[0].pageX,
startY: evt.touches[0].pageY, startY: evt.touches[0].pageY,
endX: evt.touches[0].pageX, endX: evt.touches[0].pageX,
endY: evt.touches[0].pageY endY: evt.touches[0].pageY,
}; };
break; break;
case 'touchmove': case 'touchmove':
@ -378,9 +365,8 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
} }
this.touchSwipeState.endX = evt.touches[0].pageX; this.touchSwipeState.endX = evt.touches[0].pageX;
this.touchSwipeState.endY = evt.touches[0].pageY; this.touchSwipeState.endY = evt.touches[0].pageY;
// Do a preventDefault to avoid the swipe from triggering browser // Avoid the swipe from triggering browser gestures (Chrome in
// gestures (Chrome in particular has some sort of swipe gesture in // particular has some sort of swipe gesture in fullscreen mode).
// fullscreen mode).
evt.preventDefault(); evt.preventDefault();
break; break;
case 'touchend': case 'touchend':
@ -394,11 +380,11 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
if (Math.abs(dx) > SWIPE_MIN_DISTANCE_THRESHOLD && if (Math.abs(dx) > SWIPE_MIN_DISTANCE_THRESHOLD &&
(absAngle <= SWIPE_ANGLE_THRESHOLD || (absAngle <= SWIPE_ANGLE_THRESHOLD ||
absAngle >= (Math.PI - SWIPE_ANGLE_THRESHOLD))) { absAngle >= (Math.PI - SWIPE_ANGLE_THRESHOLD))) {
// horizontal swipe // Horizontal swipe.
delta = dx; delta = dx;
} else if (Math.abs(dy) > SWIPE_MIN_DISTANCE_THRESHOLD && } else if (Math.abs(dy) > SWIPE_MIN_DISTANCE_THRESHOLD &&
Math.abs(absAngle - (Math.PI / 2)) <= SWIPE_ANGLE_THRESHOLD) { Math.abs(absAngle - (Math.PI / 2)) <= SWIPE_ANGLE_THRESHOLD) {
// vertical swipe // Vertical swipe.
delta = dy; delta = dy;
} }
if (delta > 0) { if (delta > 0) {
@ -408,12 +394,12 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
} }
break; break;
} }
}, }
/** /**
* @private * @private
*/ */
_addWindowListeners: function PDFPresentationMode_addWindowListeners() { _addWindowListeners() {
this.showControlsBind = this._showControls.bind(this); this.showControlsBind = this._showControls.bind(this);
this.mouseDownBind = this._mouseDown.bind(this); this.mouseDownBind = this._mouseDown.bind(this);
this.mouseWheelBind = this._mouseWheel.bind(this); this.mouseWheelBind = this._mouseWheel.bind(this);
@ -429,13 +415,12 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
window.addEventListener('touchstart', this.touchSwipeBind); window.addEventListener('touchstart', this.touchSwipeBind);
window.addEventListener('touchmove', this.touchSwipeBind); window.addEventListener('touchmove', this.touchSwipeBind);
window.addEventListener('touchend', this.touchSwipeBind); window.addEventListener('touchend', this.touchSwipeBind);
}, }
/** /**
* @private * @private
*/ */
_removeWindowListeners: _removeWindowListeners() {
function PDFPresentationMode_removeWindowListeners() {
window.removeEventListener('mousemove', this.showControlsBind); window.removeEventListener('mousemove', this.showControlsBind);
window.removeEventListener('mousedown', this.mouseDownBind); window.removeEventListener('mousedown', this.mouseDownBind);
window.removeEventListener('wheel', this.mouseWheelBind); window.removeEventListener('wheel', this.mouseWheelBind);
@ -451,24 +436,23 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
delete this.resetMouseScrollStateBind; delete this.resetMouseScrollStateBind;
delete this.contextMenuBind; delete this.contextMenuBind;
delete this.touchSwipeBind; delete this.touchSwipeBind;
}, }
/** /**
* @private * @private
*/ */
_fullscreenChange: function PDFPresentationMode_fullscreenChange() { _fullscreenChange() {
if (this.isFullscreen) { if (this.isFullscreen) {
this._enter(); this._enter();
} else { } else {
this._exit(); this._exit();
} }
}, }
/** /**
* @private * @private
*/ */
_addFullscreenChangeListeners: _addFullscreenChangeListeners() {
function PDFPresentationMode_addFullscreenChangeListeners() {
this.fullscreenChangeBind = this._fullscreenChange.bind(this); this.fullscreenChangeBind = this._fullscreenChange.bind(this);
window.addEventListener('fullscreenchange', this.fullscreenChangeBind); window.addEventListener('fullscreenchange', this.fullscreenChangeBind);
@ -480,13 +464,12 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
window.addEventListener('MSFullscreenChange', window.addEventListener('MSFullscreenChange',
this.fullscreenChangeBind); this.fullscreenChangeBind);
} }
}, }
/** /**
* @private * @private
*/ */
_removeFullscreenChangeListeners: _removeFullscreenChangeListeners() {
function PDFPresentationMode_removeFullscreenChangeListeners() {
window.removeEventListener('fullscreenchange', this.fullscreenChangeBind); window.removeEventListener('fullscreenchange', this.fullscreenChangeBind);
window.removeEventListener('mozfullscreenchange', window.removeEventListener('mozfullscreenchange',
this.fullscreenChangeBind); this.fullscreenChangeBind);
@ -500,10 +483,7 @@ var PDFPresentationMode = (function PDFPresentationModeClosure() {
delete this.fullscreenChangeBind; delete this.fullscreenChangeBind;
} }
}; }
return PDFPresentationMode;
})();
export { export {
PDFPresentationMode, PDFPresentationMode,