pdf_presentation_mode.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. /**
  2. * @licstart The following is the entire license notice for the
  3. * JavaScript code in this page
  4. *
  5. * Copyright 2022 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. var _pdf = require("../pdf");
  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. #state = _ui_utils.PresentationModeState.UNKNOWN;
  38. #args = null;
  39. constructor({
  40. container,
  41. pdfViewer,
  42. eventBus
  43. }) {
  44. this.container = container;
  45. this.pdfViewer = pdfViewer;
  46. this.eventBus = eventBus;
  47. this.contextMenuOpen = false;
  48. this.mouseScrollTimeStamp = 0;
  49. this.mouseScrollDelta = 0;
  50. this.touchSwipeState = null;
  51. }
  52. async request() {
  53. const {
  54. container,
  55. pdfViewer
  56. } = this;
  57. if (this.active || !pdfViewer.pagesCount || !container.requestFullscreen) {
  58. return false;
  59. }
  60. this.#addFullscreenChangeListeners();
  61. this.#notifyStateChange(_ui_utils.PresentationModeState.CHANGING);
  62. const promise = container.requestFullscreen();
  63. this.#args = {
  64. pageNumber: pdfViewer.currentPageNumber,
  65. scaleValue: pdfViewer.currentScaleValue,
  66. scrollMode: pdfViewer.scrollMode,
  67. spreadMode: null,
  68. annotationEditorMode: null
  69. };
  70. if (pdfViewer.spreadMode !== _ui_utils.SpreadMode.NONE && !(pdfViewer.pageViewsReady && pdfViewer.hasEqualPageSizes)) {
  71. console.warn("Ignoring Spread modes when entering PresentationMode, " + "since the document may contain varying page sizes.");
  72. this.#args.spreadMode = pdfViewer.spreadMode;
  73. }
  74. if (pdfViewer.annotationEditorMode !== _pdf.AnnotationEditorType.DISABLE) {
  75. this.#args.annotationEditorMode = pdfViewer.annotationEditorMode;
  76. }
  77. try {
  78. await promise;
  79. pdfViewer.focus();
  80. return true;
  81. } catch (reason) {
  82. this.#removeFullscreenChangeListeners();
  83. this.#notifyStateChange(_ui_utils.PresentationModeState.NORMAL);
  84. }
  85. return false;
  86. }
  87. get active() {
  88. return this.#state === _ui_utils.PresentationModeState.CHANGING || this.#state === _ui_utils.PresentationModeState.FULLSCREEN;
  89. }
  90. #mouseWheel(evt) {
  91. if (!this.active) {
  92. return;
  93. }
  94. evt.preventDefault();
  95. const delta = (0, _ui_utils.normalizeWheelEventDelta)(evt);
  96. const currentTime = Date.now();
  97. const storedTime = this.mouseScrollTimeStamp;
  98. if (currentTime > storedTime && currentTime - storedTime < MOUSE_SCROLL_COOLDOWN_TIME) {
  99. return;
  100. }
  101. if (this.mouseScrollDelta > 0 && delta < 0 || this.mouseScrollDelta < 0 && delta > 0) {
  102. this.#resetMouseScrollState();
  103. }
  104. this.mouseScrollDelta += delta;
  105. if (Math.abs(this.mouseScrollDelta) >= PAGE_SWITCH_THRESHOLD) {
  106. const totalDelta = this.mouseScrollDelta;
  107. this.#resetMouseScrollState();
  108. const success = totalDelta > 0 ? this.pdfViewer.previousPage() : this.pdfViewer.nextPage();
  109. if (success) {
  110. this.mouseScrollTimeStamp = currentTime;
  111. }
  112. }
  113. }
  114. #notifyStateChange(state) {
  115. this.#state = state;
  116. this.eventBus.dispatch("presentationmodechanged", {
  117. source: this,
  118. state
  119. });
  120. }
  121. #enter() {
  122. this.#notifyStateChange(_ui_utils.PresentationModeState.FULLSCREEN);
  123. this.container.classList.add(ACTIVE_SELECTOR);
  124. setTimeout(() => {
  125. this.pdfViewer.scrollMode = _ui_utils.ScrollMode.PAGE;
  126. if (this.#args.spreadMode !== null) {
  127. this.pdfViewer.spreadMode = _ui_utils.SpreadMode.NONE;
  128. }
  129. this.pdfViewer.currentPageNumber = this.#args.pageNumber;
  130. this.pdfViewer.currentScaleValue = "page-fit";
  131. if (this.#args.annotationEditorMode !== null) {
  132. this.pdfViewer.annotationEditorMode = _pdf.AnnotationEditorType.NONE;
  133. }
  134. }, 0);
  135. this.#addWindowListeners();
  136. this.#showControls();
  137. this.contextMenuOpen = false;
  138. window.getSelection().removeAllRanges();
  139. }
  140. #exit() {
  141. const pageNumber = this.pdfViewer.currentPageNumber;
  142. this.container.classList.remove(ACTIVE_SELECTOR);
  143. setTimeout(() => {
  144. this.#removeFullscreenChangeListeners();
  145. this.#notifyStateChange(_ui_utils.PresentationModeState.NORMAL);
  146. this.pdfViewer.scrollMode = this.#args.scrollMode;
  147. if (this.#args.spreadMode !== null) {
  148. this.pdfViewer.spreadMode = this.#args.spreadMode;
  149. }
  150. this.pdfViewer.currentScaleValue = this.#args.scaleValue;
  151. this.pdfViewer.currentPageNumber = pageNumber;
  152. if (this.#args.annotationEditorMode !== null) {
  153. this.pdfViewer.annotationEditorMode = this.#args.annotationEditorMode;
  154. }
  155. this.#args = null;
  156. }, 0);
  157. this.#removeWindowListeners();
  158. this.#hideControls();
  159. this.#resetMouseScrollState();
  160. this.contextMenuOpen = false;
  161. }
  162. #mouseDown(evt) {
  163. if (this.contextMenuOpen) {
  164. this.contextMenuOpen = false;
  165. evt.preventDefault();
  166. return;
  167. }
  168. if (evt.button !== 0) {
  169. return;
  170. }
  171. if (evt.target.href && evt.target.parentNode?.hasAttribute("data-internal-link")) {
  172. return;
  173. }
  174. evt.preventDefault();
  175. if (evt.shiftKey) {
  176. this.pdfViewer.previousPage();
  177. } else {
  178. this.pdfViewer.nextPage();
  179. }
  180. }
  181. #contextMenu() {
  182. this.contextMenuOpen = true;
  183. }
  184. #showControls() {
  185. if (this.controlsTimeout) {
  186. clearTimeout(this.controlsTimeout);
  187. } else {
  188. this.container.classList.add(CONTROLS_SELECTOR);
  189. }
  190. this.controlsTimeout = setTimeout(() => {
  191. this.container.classList.remove(CONTROLS_SELECTOR);
  192. delete this.controlsTimeout;
  193. }, DELAY_BEFORE_HIDING_CONTROLS);
  194. }
  195. #hideControls() {
  196. if (!this.controlsTimeout) {
  197. return;
  198. }
  199. clearTimeout(this.controlsTimeout);
  200. this.container.classList.remove(CONTROLS_SELECTOR);
  201. delete this.controlsTimeout;
  202. }
  203. #resetMouseScrollState() {
  204. this.mouseScrollTimeStamp = 0;
  205. this.mouseScrollDelta = 0;
  206. }
  207. #touchSwipe(evt) {
  208. if (!this.active) {
  209. return;
  210. }
  211. if (evt.touches.length > 1) {
  212. this.touchSwipeState = null;
  213. return;
  214. }
  215. switch (evt.type) {
  216. case "touchstart":
  217. this.touchSwipeState = {
  218. startX: evt.touches[0].pageX,
  219. startY: evt.touches[0].pageY,
  220. endX: evt.touches[0].pageX,
  221. endY: evt.touches[0].pageY
  222. };
  223. break;
  224. case "touchmove":
  225. if (this.touchSwipeState === null) {
  226. return;
  227. }
  228. this.touchSwipeState.endX = evt.touches[0].pageX;
  229. this.touchSwipeState.endY = evt.touches[0].pageY;
  230. evt.preventDefault();
  231. break;
  232. case "touchend":
  233. if (this.touchSwipeState === null) {
  234. return;
  235. }
  236. let delta = 0;
  237. const dx = this.touchSwipeState.endX - this.touchSwipeState.startX;
  238. const dy = this.touchSwipeState.endY - this.touchSwipeState.startY;
  239. const absAngle = Math.abs(Math.atan2(dy, dx));
  240. if (Math.abs(dx) > SWIPE_MIN_DISTANCE_THRESHOLD && (absAngle <= SWIPE_ANGLE_THRESHOLD || absAngle >= Math.PI - SWIPE_ANGLE_THRESHOLD)) {
  241. delta = dx;
  242. } else if (Math.abs(dy) > SWIPE_MIN_DISTANCE_THRESHOLD && Math.abs(absAngle - Math.PI / 2) <= SWIPE_ANGLE_THRESHOLD) {
  243. delta = dy;
  244. }
  245. if (delta > 0) {
  246. this.pdfViewer.previousPage();
  247. } else if (delta < 0) {
  248. this.pdfViewer.nextPage();
  249. }
  250. break;
  251. }
  252. }
  253. #addWindowListeners() {
  254. this.showControlsBind = this.#showControls.bind(this);
  255. this.mouseDownBind = this.#mouseDown.bind(this);
  256. this.mouseWheelBind = this.#mouseWheel.bind(this);
  257. this.resetMouseScrollStateBind = this.#resetMouseScrollState.bind(this);
  258. this.contextMenuBind = this.#contextMenu.bind(this);
  259. this.touchSwipeBind = this.#touchSwipe.bind(this);
  260. window.addEventListener("mousemove", this.showControlsBind);
  261. window.addEventListener("mousedown", this.mouseDownBind);
  262. window.addEventListener("wheel", this.mouseWheelBind, {
  263. passive: false
  264. });
  265. window.addEventListener("keydown", this.resetMouseScrollStateBind);
  266. window.addEventListener("contextmenu", this.contextMenuBind);
  267. window.addEventListener("touchstart", this.touchSwipeBind);
  268. window.addEventListener("touchmove", this.touchSwipeBind);
  269. window.addEventListener("touchend", this.touchSwipeBind);
  270. }
  271. #removeWindowListeners() {
  272. window.removeEventListener("mousemove", this.showControlsBind);
  273. window.removeEventListener("mousedown", this.mouseDownBind);
  274. window.removeEventListener("wheel", this.mouseWheelBind, {
  275. passive: false
  276. });
  277. window.removeEventListener("keydown", this.resetMouseScrollStateBind);
  278. window.removeEventListener("contextmenu", this.contextMenuBind);
  279. window.removeEventListener("touchstart", this.touchSwipeBind);
  280. window.removeEventListener("touchmove", this.touchSwipeBind);
  281. window.removeEventListener("touchend", this.touchSwipeBind);
  282. delete this.showControlsBind;
  283. delete this.mouseDownBind;
  284. delete this.mouseWheelBind;
  285. delete this.resetMouseScrollStateBind;
  286. delete this.contextMenuBind;
  287. delete this.touchSwipeBind;
  288. }
  289. #fullscreenChange() {
  290. if (document.fullscreenElement) {
  291. this.#enter();
  292. } else {
  293. this.#exit();
  294. }
  295. }
  296. #addFullscreenChangeListeners() {
  297. this.fullscreenChangeBind = this.#fullscreenChange.bind(this);
  298. window.addEventListener("fullscreenchange", this.fullscreenChangeBind);
  299. }
  300. #removeFullscreenChangeListeners() {
  301. window.removeEventListener("fullscreenchange", this.fullscreenChangeBind);
  302. delete this.fullscreenChangeBind;
  303. }
  304. }
  305. exports.PDFPresentationMode = PDFPresentationMode;