pdf_presentation_mode.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424
  1. /**
  2. * @licstart The following is the entire license notice for the
  3. * Javascript code in this page
  4. *
  5. * Copyright 2020 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 = void 0;
  27. var _ui_utils = require("./ui_utils.js");
  28. const DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS = 1500;
  29. const DELAY_BEFORE_HIDING_CONTROLS = 3000;
  30. const ACTIVE_SELECTOR = "pdfPresentationMode";
  31. const CONTROLS_SELECTOR = "pdfPresentationModeControls";
  32. const MOUSE_SCROLL_COOLDOWN_TIME = 50;
  33. const PAGE_SWITCH_THRESHOLD = 0.1;
  34. const SWIPE_MIN_DISTANCE_THRESHOLD = 50;
  35. const SWIPE_ANGLE_THRESHOLD = Math.PI / 6;
  36. class PDFPresentationMode {
  37. constructor({
  38. container,
  39. pdfViewer,
  40. eventBus,
  41. contextMenuItems = null
  42. }) {
  43. this.container = container;
  44. this.pdfViewer = pdfViewer;
  45. this.eventBus = eventBus;
  46. this.active = false;
  47. this.args = null;
  48. this.contextMenuOpen = false;
  49. this.mouseScrollTimeStamp = 0;
  50. this.mouseScrollDelta = 0;
  51. this.touchSwipeState = null;
  52. if (contextMenuItems) {
  53. contextMenuItems.contextFirstPage.addEventListener("click", () => {
  54. this.contextMenuOpen = false;
  55. this.eventBus.dispatch("firstpage", {
  56. source: this
  57. });
  58. });
  59. contextMenuItems.contextLastPage.addEventListener("click", () => {
  60. this.contextMenuOpen = false;
  61. this.eventBus.dispatch("lastpage", {
  62. source: this
  63. });
  64. });
  65. contextMenuItems.contextPageRotateCw.addEventListener("click", () => {
  66. this.contextMenuOpen = false;
  67. this.eventBus.dispatch("rotatecw", {
  68. source: this
  69. });
  70. });
  71. contextMenuItems.contextPageRotateCcw.addEventListener("click", () => {
  72. this.contextMenuOpen = false;
  73. this.eventBus.dispatch("rotateccw", {
  74. source: this
  75. });
  76. });
  77. }
  78. }
  79. request() {
  80. if (this.switchInProgress || this.active || !this.pdfViewer.pagesCount) {
  81. return false;
  82. }
  83. this._addFullscreenChangeListeners();
  84. this._setSwitchInProgress();
  85. this._notifyStateChange();
  86. if (this.container.requestFullscreen) {
  87. this.container.requestFullscreen();
  88. } else if (this.container.mozRequestFullScreen) {
  89. this.container.mozRequestFullScreen();
  90. } else if (this.container.webkitRequestFullscreen) {
  91. this.container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  92. } else if (this.container.msRequestFullscreen) {
  93. this.container.msRequestFullscreen();
  94. } else {
  95. return false;
  96. }
  97. this.args = {
  98. page: this.pdfViewer.currentPageNumber,
  99. previousScale: this.pdfViewer.currentScaleValue
  100. };
  101. return true;
  102. }
  103. _mouseWheel(evt) {
  104. if (!this.active) {
  105. return;
  106. }
  107. evt.preventDefault();
  108. const delta = (0, _ui_utils.normalizeWheelEventDelta)(evt);
  109. const currentTime = new Date().getTime();
  110. const storedTime = this.mouseScrollTimeStamp;
  111. if (currentTime > storedTime && currentTime - storedTime < MOUSE_SCROLL_COOLDOWN_TIME) {
  112. return;
  113. }
  114. if (this.mouseScrollDelta > 0 && delta < 0 || this.mouseScrollDelta < 0 && delta > 0) {
  115. this._resetMouseScrollState();
  116. }
  117. this.mouseScrollDelta += delta;
  118. if (Math.abs(this.mouseScrollDelta) >= PAGE_SWITCH_THRESHOLD) {
  119. const totalDelta = this.mouseScrollDelta;
  120. this._resetMouseScrollState();
  121. const success = totalDelta > 0 ? this._goToPreviousPage() : this._goToNextPage();
  122. if (success) {
  123. this.mouseScrollTimeStamp = currentTime;
  124. }
  125. }
  126. }
  127. get isFullscreen() {
  128. return !!(document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement);
  129. }
  130. _goToPreviousPage() {
  131. const page = this.pdfViewer.currentPageNumber;
  132. if (page <= 1) {
  133. return false;
  134. }
  135. this.pdfViewer.currentPageNumber = page - 1;
  136. return true;
  137. }
  138. _goToNextPage() {
  139. const page = this.pdfViewer.currentPageNumber;
  140. if (page >= this.pdfViewer.pagesCount) {
  141. return false;
  142. }
  143. this.pdfViewer.currentPageNumber = page + 1;
  144. return true;
  145. }
  146. _notifyStateChange() {
  147. this.eventBus.dispatch("presentationmodechanged", {
  148. source: this,
  149. active: this.active,
  150. switchInProgress: !!this.switchInProgress
  151. });
  152. }
  153. _setSwitchInProgress() {
  154. if (this.switchInProgress) {
  155. clearTimeout(this.switchInProgress);
  156. }
  157. this.switchInProgress = setTimeout(() => {
  158. this._removeFullscreenChangeListeners();
  159. delete this.switchInProgress;
  160. this._notifyStateChange();
  161. }, DELAY_BEFORE_RESETTING_SWITCH_IN_PROGRESS);
  162. }
  163. _resetSwitchInProgress() {
  164. if (this.switchInProgress) {
  165. clearTimeout(this.switchInProgress);
  166. delete this.switchInProgress;
  167. }
  168. }
  169. _enter() {
  170. this.active = true;
  171. this._resetSwitchInProgress();
  172. this._notifyStateChange();
  173. this.container.classList.add(ACTIVE_SELECTOR);
  174. setTimeout(() => {
  175. this.pdfViewer.currentPageNumber = this.args.page;
  176. this.pdfViewer.currentScaleValue = "page-fit";
  177. }, 0);
  178. this._addWindowListeners();
  179. this._showControls();
  180. this.contextMenuOpen = false;
  181. this.container.setAttribute("contextmenu", "viewerContextMenu");
  182. window.getSelection().removeAllRanges();
  183. }
  184. _exit() {
  185. const page = this.pdfViewer.currentPageNumber;
  186. this.container.classList.remove(ACTIVE_SELECTOR);
  187. setTimeout(() => {
  188. this.active = false;
  189. this._removeFullscreenChangeListeners();
  190. this._notifyStateChange();
  191. this.pdfViewer.currentScaleValue = this.args.previousScale;
  192. this.pdfViewer.currentPageNumber = page;
  193. this.args = null;
  194. }, 0);
  195. this._removeWindowListeners();
  196. this._hideControls();
  197. this._resetMouseScrollState();
  198. this.container.removeAttribute("contextmenu");
  199. this.contextMenuOpen = false;
  200. }
  201. _mouseDown(evt) {
  202. if (this.contextMenuOpen) {
  203. this.contextMenuOpen = false;
  204. evt.preventDefault();
  205. return;
  206. }
  207. if (evt.button === 0) {
  208. const isInternalLink = evt.target.href && evt.target.classList.contains("internalLink");
  209. if (!isInternalLink) {
  210. evt.preventDefault();
  211. if (evt.shiftKey) {
  212. this._goToPreviousPage();
  213. } else {
  214. this._goToNextPage();
  215. }
  216. }
  217. }
  218. }
  219. _contextMenu() {
  220. this.contextMenuOpen = true;
  221. }
  222. _showControls() {
  223. if (this.controlsTimeout) {
  224. clearTimeout(this.controlsTimeout);
  225. } else {
  226. this.container.classList.add(CONTROLS_SELECTOR);
  227. }
  228. this.controlsTimeout = setTimeout(() => {
  229. this.container.classList.remove(CONTROLS_SELECTOR);
  230. delete this.controlsTimeout;
  231. }, DELAY_BEFORE_HIDING_CONTROLS);
  232. }
  233. _hideControls() {
  234. if (!this.controlsTimeout) {
  235. return;
  236. }
  237. clearTimeout(this.controlsTimeout);
  238. this.container.classList.remove(CONTROLS_SELECTOR);
  239. delete this.controlsTimeout;
  240. }
  241. _resetMouseScrollState() {
  242. this.mouseScrollTimeStamp = 0;
  243. this.mouseScrollDelta = 0;
  244. }
  245. _touchSwipe(evt) {
  246. if (!this.active) {
  247. return;
  248. }
  249. if (evt.touches.length > 1) {
  250. this.touchSwipeState = null;
  251. return;
  252. }
  253. switch (evt.type) {
  254. case "touchstart":
  255. this.touchSwipeState = {
  256. startX: evt.touches[0].pageX,
  257. startY: evt.touches[0].pageY,
  258. endX: evt.touches[0].pageX,
  259. endY: evt.touches[0].pageY
  260. };
  261. break;
  262. case "touchmove":
  263. if (this.touchSwipeState === null) {
  264. return;
  265. }
  266. this.touchSwipeState.endX = evt.touches[0].pageX;
  267. this.touchSwipeState.endY = evt.touches[0].pageY;
  268. evt.preventDefault();
  269. break;
  270. case "touchend":
  271. if (this.touchSwipeState === null) {
  272. return;
  273. }
  274. let delta = 0;
  275. const dx = this.touchSwipeState.endX - this.touchSwipeState.startX;
  276. const dy = this.touchSwipeState.endY - this.touchSwipeState.startY;
  277. const absAngle = Math.abs(Math.atan2(dy, dx));
  278. if (Math.abs(dx) > SWIPE_MIN_DISTANCE_THRESHOLD && (absAngle <= SWIPE_ANGLE_THRESHOLD || absAngle >= Math.PI - SWIPE_ANGLE_THRESHOLD)) {
  279. delta = dx;
  280. } else if (Math.abs(dy) > SWIPE_MIN_DISTANCE_THRESHOLD && Math.abs(absAngle - Math.PI / 2) <= SWIPE_ANGLE_THRESHOLD) {
  281. delta = dy;
  282. }
  283. if (delta > 0) {
  284. this._goToPreviousPage();
  285. } else if (delta < 0) {
  286. this._goToNextPage();
  287. }
  288. break;
  289. }
  290. }
  291. _addWindowListeners() {
  292. this.showControlsBind = this._showControls.bind(this);
  293. this.mouseDownBind = this._mouseDown.bind(this);
  294. this.mouseWheelBind = this._mouseWheel.bind(this);
  295. this.resetMouseScrollStateBind = this._resetMouseScrollState.bind(this);
  296. this.contextMenuBind = this._contextMenu.bind(this);
  297. this.touchSwipeBind = this._touchSwipe.bind(this);
  298. window.addEventListener("mousemove", this.showControlsBind);
  299. window.addEventListener("mousedown", this.mouseDownBind);
  300. window.addEventListener("wheel", this.mouseWheelBind, {
  301. passive: false
  302. });
  303. window.addEventListener("keydown", this.resetMouseScrollStateBind);
  304. window.addEventListener("contextmenu", this.contextMenuBind);
  305. window.addEventListener("touchstart", this.touchSwipeBind);
  306. window.addEventListener("touchmove", this.touchSwipeBind);
  307. window.addEventListener("touchend", this.touchSwipeBind);
  308. }
  309. _removeWindowListeners() {
  310. window.removeEventListener("mousemove", this.showControlsBind);
  311. window.removeEventListener("mousedown", this.mouseDownBind);
  312. window.removeEventListener("wheel", this.mouseWheelBind, {
  313. passive: false
  314. });
  315. window.removeEventListener("keydown", this.resetMouseScrollStateBind);
  316. window.removeEventListener("contextmenu", this.contextMenuBind);
  317. window.removeEventListener("touchstart", this.touchSwipeBind);
  318. window.removeEventListener("touchmove", this.touchSwipeBind);
  319. window.removeEventListener("touchend", this.touchSwipeBind);
  320. delete this.showControlsBind;
  321. delete this.mouseDownBind;
  322. delete this.mouseWheelBind;
  323. delete this.resetMouseScrollStateBind;
  324. delete this.contextMenuBind;
  325. delete this.touchSwipeBind;
  326. }
  327. _fullscreenChange() {
  328. if (this.isFullscreen) {
  329. this._enter();
  330. } else {
  331. this._exit();
  332. }
  333. }
  334. _addFullscreenChangeListeners() {
  335. this.fullscreenChangeBind = this._fullscreenChange.bind(this);
  336. window.addEventListener("fullscreenchange", this.fullscreenChangeBind);
  337. window.addEventListener("mozfullscreenchange", this.fullscreenChangeBind);
  338. window.addEventListener("webkitfullscreenchange", this.fullscreenChangeBind);
  339. window.addEventListener("MSFullscreenChange", this.fullscreenChangeBind);
  340. }
  341. _removeFullscreenChangeListeners() {
  342. window.removeEventListener("fullscreenchange", this.fullscreenChangeBind);
  343. window.removeEventListener("mozfullscreenchange", this.fullscreenChangeBind);
  344. window.removeEventListener("webkitfullscreenchange", this.fullscreenChangeBind);
  345. window.removeEventListener("MSFullscreenChange", this.fullscreenChangeBind);
  346. delete this.fullscreenChangeBind;
  347. }
  348. }
  349. exports.PDFPresentationMode = PDFPresentationMode;