pdf_presentation_mode.js 10 KB

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