pdf_presentation_mode.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. /**
  2. * @licstart The following is the entire license notice for the
  3. * Javascript code in this page
  4. *
  5. * Copyright 2017 Mozilla Foundation
  6. *
  7. * Licensed under the Apache License, Version 2.0 (the "License");
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://www.apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. *
  19. * @licend The above is the entire license notice for the
  20. * Javascript code in this page
  21. */
  22. 'use strict';
  23. Object.defineProperty(exports, "__esModule", {
  24. value: true
  25. });
  26. exports.PDFPresentationMode = undefined;
  27. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  28. var _ui_utils = require('./ui_utils');
  29. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  30. var DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1500;
  31. var DELAY_BEFORE_HIDING_CONTROLS = 3000;
  32. var ACTIVE_SELECTOR = 'pdfPresentationMode';
  33. var CONTROLS_SELECTOR = 'pdfPresentationModeControls';
  34. var MOUSE_SCROLL_COOLDOWN_TIME = 50;
  35. var PAGE_SWITCH_THRESHOLD = 0.1;
  36. var SWIPE_MIN_DISTANCE_THRESHOLD = 50;
  37. var SWIPE_ANGLE_THRESHOLD = Math.PI / 6;
  38. var PDFPresentationMode = function () {
  39. function PDFPresentationMode(_ref) {
  40. var _this = this;
  41. var container = _ref.container,
  42. _ref$viewer = _ref.viewer,
  43. viewer = _ref$viewer === undefined ? null : _ref$viewer,
  44. pdfViewer = _ref.pdfViewer,
  45. eventBus = _ref.eventBus,
  46. _ref$contextMenuItems = _ref.contextMenuItems,
  47. contextMenuItems = _ref$contextMenuItems === undefined ? null : _ref$contextMenuItems;
  48. _classCallCheck(this, PDFPresentationMode);
  49. this.container = container;
  50. this.viewer = viewer || container.firstElementChild;
  51. this.pdfViewer = pdfViewer;
  52. this.eventBus = eventBus;
  53. this.active = false;
  54. this.args = null;
  55. this.contextMenuOpen = false;
  56. this.mouseScrollTimeStamp = 0;
  57. this.mouseScrollDelta = 0;
  58. this.touchSwipeState = null;
  59. if (contextMenuItems) {
  60. contextMenuItems.contextFirstPage.addEventListener('click', function () {
  61. _this.contextMenuOpen = false;
  62. _this.eventBus.dispatch('firstpage');
  63. });
  64. contextMenuItems.contextLastPage.addEventListener('click', function () {
  65. _this.contextMenuOpen = false;
  66. _this.eventBus.dispatch('lastpage');
  67. });
  68. contextMenuItems.contextPageRotateCw.addEventListener('click', function () {
  69. _this.contextMenuOpen = false;
  70. _this.eventBus.dispatch('rotatecw');
  71. });
  72. contextMenuItems.contextPageRotateCcw.addEventListener('click', function () {
  73. _this.contextMenuOpen = false;
  74. _this.eventBus.dispatch('rotateccw');
  75. });
  76. }
  77. }
  78. _createClass(PDFPresentationMode, [{
  79. key: 'request',
  80. value: function request() {
  81. if (this.switchInProgress || this.active || !this.viewer.hasChildNodes()) {
  82. return false;
  83. }
  84. this._addFullscreenChangeListeners();
  85. this._setSwitchInProgress();
  86. this._notifyStateChange();
  87. if (this.container.requestFullscreen) {
  88. this.container.requestFullscreen();
  89. } else if (this.container.mozRequestFullScreen) {
  90. this.container.mozRequestFullScreen();
  91. } else if (this.container.webkitRequestFullscreen) {
  92. this.container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  93. } else if (this.container.msRequestFullscreen) {
  94. this.container.msRequestFullscreen();
  95. } else {
  96. return false;
  97. }
  98. this.args = {
  99. page: this.pdfViewer.currentPageNumber,
  100. previousScale: this.pdfViewer.currentScaleValue
  101. };
  102. return true;
  103. }
  104. }, {
  105. key: '_mouseWheel',
  106. value: function _mouseWheel(evt) {
  107. if (!this.active) {
  108. return;
  109. }
  110. evt.preventDefault();
  111. var delta = (0, _ui_utils.normalizeWheelEventDelta)(evt);
  112. var currentTime = new Date().getTime();
  113. var storedTime = this.mouseScrollTimeStamp;
  114. if (currentTime > storedTime && currentTime - storedTime < MOUSE_SCROLL_COOLDOWN_TIME) {
  115. return;
  116. }
  117. if (this.mouseScrollDelta > 0 && delta < 0 || this.mouseScrollDelta < 0 && delta > 0) {
  118. this._resetMouseScrollState();
  119. }
  120. this.mouseScrollDelta += delta;
  121. if (Math.abs(this.mouseScrollDelta) >= PAGE_SWITCH_THRESHOLD) {
  122. var totalDelta = this.mouseScrollDelta;
  123. this._resetMouseScrollState();
  124. var success = totalDelta > 0 ? this._goToPreviousPage() : this._goToNextPage();
  125. if (success) {
  126. this.mouseScrollTimeStamp = currentTime;
  127. }
  128. }
  129. }
  130. }, {
  131. key: '_goToPreviousPage',
  132. value: function _goToPreviousPage() {
  133. var page = this.pdfViewer.currentPageNumber;
  134. if (page <= 1) {
  135. return false;
  136. }
  137. this.pdfViewer.currentPageNumber = page - 1;
  138. return true;
  139. }
  140. }, {
  141. key: '_goToNextPage',
  142. value: function _goToNextPage() {
  143. var page = this.pdfViewer.currentPageNumber;
  144. if (page >= this.pdfViewer.pagesCount) {
  145. return false;
  146. }
  147. this.pdfViewer.currentPageNumber = page + 1;
  148. return true;
  149. }
  150. }, {
  151. key: '_notifyStateChange',
  152. value: function _notifyStateChange() {
  153. this.eventBus.dispatch('presentationmodechanged', {
  154. source: this,
  155. active: this.active,
  156. switchInProgress: !!this.switchInProgress
  157. });
  158. }
  159. }, {
  160. key: '_setSwitchInProgress',
  161. value: function _setSwitchInProgress() {
  162. var _this2 = this;
  163. if (this.switchInProgress) {
  164. clearTimeout(this.switchInProgress);
  165. }
  166. this.switchInProgress = setTimeout(function () {
  167. _this2._removeFullscreenChangeListeners();
  168. delete _this2.switchInProgress;
  169. _this2._notifyStateChange();
  170. }, DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS);
  171. }
  172. }, {
  173. key: '_resetSwitchInProgress',
  174. value: function _resetSwitchInProgress() {
  175. if (this.switchInProgress) {
  176. clearTimeout(this.switchInProgress);
  177. delete this.switchInProgress;
  178. }
  179. }
  180. }, {
  181. key: '_enter',
  182. value: function _enter() {
  183. var _this3 = this;
  184. this.active = true;
  185. this._resetSwitchInProgress();
  186. this._notifyStateChange();
  187. this.container.classList.add(ACTIVE_SELECTOR);
  188. setTimeout(function () {
  189. _this3.pdfViewer.currentPageNumber = _this3.args.page;
  190. _this3.pdfViewer.currentScaleValue = 'page-fit';
  191. }, 0);
  192. this._addWindowListeners();
  193. this._showControls();
  194. this.contextMenuOpen = false;
  195. this.container.setAttribute('contextmenu', 'viewerContextMenu');
  196. window.getSelection().removeAllRanges();
  197. }
  198. }, {
  199. key: '_exit',
  200. value: function _exit() {
  201. var _this4 = this;
  202. var page = this.pdfViewer.currentPageNumber;
  203. this.container.classList.remove(ACTIVE_SELECTOR);
  204. setTimeout(function () {
  205. _this4.active = false;
  206. _this4._removeFullscreenChangeListeners();
  207. _this4._notifyStateChange();
  208. _this4.pdfViewer.currentScaleValue = _this4.args.previousScale;
  209. _this4.pdfViewer.currentPageNumber = page;
  210. _this4.args = null;
  211. }, 0);
  212. this._removeWindowListeners();
  213. this._hideControls();
  214. this._resetMouseScrollState();
  215. this.container.removeAttribute('contextmenu');
  216. this.contextMenuOpen = false;
  217. }
  218. }, {
  219. key: '_mouseDown',
  220. value: function _mouseDown(evt) {
  221. if (this.contextMenuOpen) {
  222. this.contextMenuOpen = false;
  223. evt.preventDefault();
  224. return;
  225. }
  226. if (evt.button === 0) {
  227. var isInternalLink = evt.target.href && evt.target.classList.contains('internalLink');
  228. if (!isInternalLink) {
  229. evt.preventDefault();
  230. if (evt.shiftKey) {
  231. this._goToPreviousPage();
  232. } else {
  233. this._goToNextPage();
  234. }
  235. }
  236. }
  237. }
  238. }, {
  239. key: '_contextMenu',
  240. value: function _contextMenu() {
  241. this.contextMenuOpen = true;
  242. }
  243. }, {
  244. key: '_showControls',
  245. value: function _showControls() {
  246. var _this5 = this;
  247. if (this.controlsTimeout) {
  248. clearTimeout(this.controlsTimeout);
  249. } else {
  250. this.container.classList.add(CONTROLS_SELECTOR);
  251. }
  252. this.controlsTimeout = setTimeout(function () {
  253. _this5.container.classList.remove(CONTROLS_SELECTOR);
  254. delete _this5.controlsTimeout;
  255. }, DELAY_BEFORE_HIDING_CONTROLS);
  256. }
  257. }, {
  258. key: '_hideControls',
  259. value: function _hideControls() {
  260. if (!this.controlsTimeout) {
  261. return;
  262. }
  263. clearTimeout(this.controlsTimeout);
  264. this.container.classList.remove(CONTROLS_SELECTOR);
  265. delete this.controlsTimeout;
  266. }
  267. }, {
  268. key: '_resetMouseScrollState',
  269. value: function _resetMouseScrollState() {
  270. this.mouseScrollTimeStamp = 0;
  271. this.mouseScrollDelta = 0;
  272. }
  273. }, {
  274. key: '_touchSwipe',
  275. value: function _touchSwipe(evt) {
  276. if (!this.active) {
  277. return;
  278. }
  279. if (evt.touches.length > 1) {
  280. this.touchSwipeState = null;
  281. return;
  282. }
  283. switch (evt.type) {
  284. case 'touchstart':
  285. this.touchSwipeState = {
  286. startX: evt.touches[0].pageX,
  287. startY: evt.touches[0].pageY,
  288. endX: evt.touches[0].pageX,
  289. endY: evt.touches[0].pageY
  290. };
  291. break;
  292. case 'touchmove':
  293. if (this.touchSwipeState === null) {
  294. return;
  295. }
  296. this.touchSwipeState.endX = evt.touches[0].pageX;
  297. this.touchSwipeState.endY = evt.touches[0].pageY;
  298. evt.preventDefault();
  299. break;
  300. case 'touchend':
  301. if (this.touchSwipeState === null) {
  302. return;
  303. }
  304. var delta = 0;
  305. var dx = this.touchSwipeState.endX - this.touchSwipeState.startX;
  306. var dy = this.touchSwipeState.endY - this.touchSwipeState.startY;
  307. var absAngle = Math.abs(Math.atan2(dy, dx));
  308. if (Math.abs(dx) > SWIPE_MIN_DISTANCE_THRESHOLD && (absAngle <= SWIPE_ANGLE_THRESHOLD || absAngle >= Math.PI - SWIPE_ANGLE_THRESHOLD)) {
  309. delta = dx;
  310. } else if (Math.abs(dy) > SWIPE_MIN_DISTANCE_THRESHOLD && Math.abs(absAngle - Math.PI / 2) <= SWIPE_ANGLE_THRESHOLD) {
  311. delta = dy;
  312. }
  313. if (delta > 0) {
  314. this._goToPreviousPage();
  315. } else if (delta < 0) {
  316. this._goToNextPage();
  317. }
  318. break;
  319. }
  320. }
  321. }, {
  322. key: '_addWindowListeners',
  323. value: function _addWindowListeners() {
  324. this.showControlsBind = this._showControls.bind(this);
  325. this.mouseDownBind = this._mouseDown.bind(this);
  326. this.mouseWheelBind = this._mouseWheel.bind(this);
  327. this.resetMouseScrollStateBind = this._resetMouseScrollState.bind(this);
  328. this.contextMenuBind = this._contextMenu.bind(this);
  329. this.touchSwipeBind = this._touchSwipe.bind(this);
  330. window.addEventListener('mousemove', this.showControlsBind);
  331. window.addEventListener('mousedown', this.mouseDownBind);
  332. window.addEventListener('wheel', this.mouseWheelBind);
  333. window.addEventListener('keydown', this.resetMouseScrollStateBind);
  334. window.addEventListener('contextmenu', this.contextMenuBind);
  335. window.addEventListener('touchstart', this.touchSwipeBind);
  336. window.addEventListener('touchmove', this.touchSwipeBind);
  337. window.addEventListener('touchend', this.touchSwipeBind);
  338. }
  339. }, {
  340. key: '_removeWindowListeners',
  341. value: function _removeWindowListeners() {
  342. window.removeEventListener('mousemove', this.showControlsBind);
  343. window.removeEventListener('mousedown', this.mouseDownBind);
  344. window.removeEventListener('wheel', this.mouseWheelBind);
  345. window.removeEventListener('keydown', this.resetMouseScrollStateBind);
  346. window.removeEventListener('contextmenu', this.contextMenuBind);
  347. window.removeEventListener('touchstart', this.touchSwipeBind);
  348. window.removeEventListener('touchmove', this.touchSwipeBind);
  349. window.removeEventListener('touchend', this.touchSwipeBind);
  350. delete this.showControlsBind;
  351. delete this.mouseDownBind;
  352. delete this.mouseWheelBind;
  353. delete this.resetMouseScrollStateBind;
  354. delete this.contextMenuBind;
  355. delete this.touchSwipeBind;
  356. }
  357. }, {
  358. key: '_fullscreenChange',
  359. value: function _fullscreenChange() {
  360. if (this.isFullscreen) {
  361. this._enter();
  362. } else {
  363. this._exit();
  364. }
  365. }
  366. }, {
  367. key: '_addFullscreenChangeListeners',
  368. value: function _addFullscreenChangeListeners() {
  369. this.fullscreenChangeBind = this._fullscreenChange.bind(this);
  370. window.addEventListener('fullscreenchange', this.fullscreenChangeBind);
  371. window.addEventListener('mozfullscreenchange', this.fullscreenChangeBind);
  372. window.addEventListener('webkitfullscreenchange', this.fullscreenChangeBind);
  373. window.addEventListener('MSFullscreenChange', this.fullscreenChangeBind);
  374. }
  375. }, {
  376. key: '_removeFullscreenChangeListeners',
  377. value: function _removeFullscreenChangeListeners() {
  378. window.removeEventListener('fullscreenchange', this.fullscreenChangeBind);
  379. window.removeEventListener('mozfullscreenchange', this.fullscreenChangeBind);
  380. window.removeEventListener('webkitfullscreenchange', this.fullscreenChangeBind);
  381. window.removeEventListener('MSFullscreenChange', this.fullscreenChangeBind);
  382. delete this.fullscreenChangeBind;
  383. }
  384. }, {
  385. key: 'isFullscreen',
  386. get: function get() {
  387. return !!(document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement);
  388. }
  389. }]);
  390. return PDFPresentationMode;
  391. }();
  392. exports.PDFPresentationMode = PDFPresentationMode;