aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpacien2018-08-24 01:39:40 +0200
committerpacien2018-08-24 01:39:40 +0200
commit4ac79e422129e654e48909017a50b066b2f587d1 (patch)
tree0c42e814da49d82456505b3e1c49f82359d98016
parent3a53e581c4888ce0d8e7f62c6766eeafe1c0610f (diff)
downloadbeamer-viewer-4ac79e422129e654e48909017a50b066b2f587d1.tar.gz
Handle click and touch events
-rw-r--r--appcache.js7
-rw-r--r--index.html7
-rw-r--r--pointless/viewer/screen/screen.js (renamed from pointless/viewer/screen.js)0
-rw-r--r--pointless/viewer/screen/timer.js (renamed from pointless/viewer/timer.js)0
-rw-r--r--pointless/viewer/stage/actions.js121
-rw-r--r--pointless/viewer/stage/stage.js (renamed from pointless/viewer/stage.js)29
-rw-r--r--pointless/viewer/viewer.css1
7 files changed, 140 insertions, 25 deletions
diff --git a/appcache.js b/appcache.js
index f200133..2e71164 100644
--- a/appcache.js
+++ b/appcache.js
@@ -35,9 +35,10 @@ class AppCache {
35 "pointless/viewer/init.js", 35 "pointless/viewer/init.js",
36 "pointless/viewer/viewer.js", 36 "pointless/viewer/viewer.js",
37 "pointless/viewer/presentation.js", 37 "pointless/viewer/presentation.js",
38 "pointless/viewer/stage.js", 38 "pointless/viewer/stage/stage.js",
39 "pointless/viewer/screen.js", 39 "pointless/viewer/stage/actions.js",
40 "pointless/viewer/timer.js" 40 "pointless/viewer/screen/screen.js",
41 "pointless/viewer/screen/timer.js"
41 ]; 42 ];
42 43
43 const appCache = this; 44 const appCache = this;
diff --git a/index.html b/index.html
index f2168ed..72ea974 100644
--- a/index.html
+++ b/index.html
@@ -82,9 +82,10 @@
82 <div id="message" class="notification"></div> 82 <div id="message" class="notification"></div>
83 83
84 <script type="text/javascript" src="pointless/pdfjs/pdf.js"></script> 84 <script type="text/javascript" src="pointless/pdfjs/pdf.js"></script>
85 <script type="text/javascript" src="pointless/viewer/timer.js"></script> 85 <script type="text/javascript" src="pointless/viewer/screen/timer.js"></script>
86 <script type="text/javascript" src="pointless/viewer/screen.js"></script> 86 <script type="text/javascript" src="pointless/viewer/screen/screen.js"></script>
87 <script type="text/javascript" src="pointless/viewer/stage.js"></script> 87 <script type="text/javascript" src="pointless/viewer/stage/actions.js"></script>
88 <script type="text/javascript" src="pointless/viewer/stage/stage.js"></script>
88 <script type="text/javascript" src="pointless/viewer/presentation.js"></script> 89 <script type="text/javascript" src="pointless/viewer/presentation.js"></script>
89 <script type="text/javascript" src="pointless/viewer/viewer.js"></script> 90 <script type="text/javascript" src="pointless/viewer/viewer.js"></script>
90 <script type="text/javascript" src="pointless/viewer/init.js"></script> 91 <script type="text/javascript" src="pointless/viewer/init.js"></script>
diff --git a/pointless/viewer/screen.js b/pointless/viewer/screen/screen.js
index bf7a049..bf7a049 100644
--- a/pointless/viewer/screen.js
+++ b/pointless/viewer/screen/screen.js
diff --git a/pointless/viewer/timer.js b/pointless/viewer/screen/timer.js
index 21cd8b8..21cd8b8 100644
--- a/pointless/viewer/timer.js
+++ b/pointless/viewer/screen/timer.js
diff --git a/pointless/viewer/stage/actions.js b/pointless/viewer/stage/actions.js
new file mode 100644
index 0000000..271d7b7
--- /dev/null
+++ b/pointless/viewer/stage/actions.js
@@ -0,0 +1,121 @@
1/*
2 * Pointless Viewer, a web-based Beamer presentation viewer
3 * Copyright (C) 2018 Pacien TRAN-GIRARD
4 *
5 * This program is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU Affero General Public License as
7 * published by the Free Software Foundation, either version 3 of the
8 * License, or (at your option) any later version.
9 *
10 * This program is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU Affero General Public License for more details.
14 *
15 * You should have received a copy of the GNU Affero General Public License
16 * along with this program. If not, see <https://www.gnu.org/licenses/>.
17 */
18
19"use strict";
20
21class ActionEventHandler {
22 constructor(onNext, onPrevious) {
23 this.onNext = onNext;
24 this.onPrevious = onPrevious;
25 }
26}
27
28class KeyboardEventHandler extends ActionEventHandler {
29 register(window) {
30 const self = this;
31 window.addEventListener("keydown", function(event) {
32 self._onCommand(event);
33 })
34 }
35
36 _onCommand(keyboardEvent) {
37 switch (keyboardEvent.key) {
38 case "Enter":
39 case " ":
40 case "ArrowRight":
41 case "n":
42 return this.onNext();
43
44 case "ArrowLeft":
45 case "p":
46 return this.onPrevious();
47 }
48 }
49}
50
51class MouseClickEventHandler extends ActionEventHandler {
52 register(window) {
53 const self = this;
54 window.addEventListener("click", function(event) {
55 self._onCommand(event);
56 })
57 }
58
59 _onCommand(mouseEvent) {
60 this.onNext();
61 }
62}
63
64class TouchSwipeEventHandler extends ActionEventHandler {
65 constructor(onNext, onPrevious) {
66 super(onNext, onPrevious);
67 this.touchStartEvent = null;
68 this.touchMoveEvent = null;
69 }
70
71 register(window) {
72 const self = this;
73
74 window.addEventListener("touchstart", function(event) {
75 event.preventDefault();
76 self._onTouchStart(event);
77 });
78
79 window.addEventListener("touchmove", function(event) {
80 event.preventDefault();
81 self._onTouchMove(event);
82 });
83
84 window.addEventListener("touchend", function(event) {
85 event.preventDefault();
86 self._onTouchEnd();
87 });
88
89 window.addEventListener("touchcancel", function(event) {
90 event.preventDefault();
91 });
92 }
93
94 _onTouchStart(touchEvent) {
95 this.touchStartEvent = touchEvent;
96 }
97
98 _onTouchMove(touchEvent) {
99 this.touchMoveEvent = touchEvent;
100 }
101
102 _onTouchEnd() {
103 if (this.touchStartEvent == null || this.touchMoveEvent == null) return;
104
105 const touchDown = this._xCoordinate(this.touchStartEvent);
106 const touchUp = this._xCoordinate(this.touchMoveEvent);
107 const xDelta = touchDown - touchUp;
108
109 if (xDelta > 0)
110 this.onNext();
111 else if (xDelta < 0)
112 this.onPrevious();
113
114 this.touchStartEvent = null;
115 this.touchMoveEvent = null;
116 }
117
118 _xCoordinate(touchEvent) {
119 return touchEvent.touches[0].clientX; // first finger
120 }
121}
diff --git a/pointless/viewer/stage.js b/pointless/viewer/stage/stage.js
index 1772480..e9a2d38 100644
--- a/pointless/viewer/stage.js
+++ b/pointless/viewer/stage/stage.js
@@ -20,8 +20,6 @@
20 20
21class Stage { 21class Stage {
22 constructor(onReady, onNext, onPrevious) { 22 constructor(onReady, onNext, onPrevious) {
23 this.onNext = onNext;
24 this.onPrevious = onPrevious;
25 this.audienceScreen = null; 23 this.audienceScreen = null;
26 this.presenterScreen = null; 24 this.presenterScreen = null;
27 25
@@ -37,6 +35,12 @@ class Stage {
37 onReady(); 35 onReady();
38 }); 36 });
39 37
38 this.eventHandlers = [
39 new KeyboardEventHandler(onNext, onPrevious),
40 new MouseClickEventHandler(onNext, onPrevious),
41 new TouchSwipeEventHandler(onNext, onPrevious)
42 ];
43
40 this._registerEventHandler(window); 44 this._registerEventHandler(window);
41 this._registerEventHandler(this.projector); 45 this._registerEventHandler(this.projector);
42 } 46 }
@@ -47,24 +51,11 @@ class Stage {
47 } 51 }
48 52
49 _registerEventHandler(window) { 53 _registerEventHandler(window) {
50 const self = this; 54 if (window == null) return;
51 window.addEventListener("keydown", function(event) {
52 self._onCommand(event);
53 })
54 }
55 55
56 _onCommand(keyboardEvent) { 56 this.eventHandlers.forEach(function(eventHandler) {
57 switch (keyboardEvent.key) { 57 eventHandler.register(window);
58 case "Enter": 58 });
59 case " ":
60 case "ArrowRight":
61 case "n":
62 return this.onNext();
63
64 case "ArrowLeft":
65 case "p":
66 return this.onPrevious();
67 }
68 } 59 }
69 60
70 _watchDetach() { 61 _watchDetach() {
diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css
index 6702702..21d58cc 100644
--- a/pointless/viewer/viewer.css
+++ b/pointless/viewer/viewer.css
@@ -21,6 +21,7 @@ html, body {
21 color: white; 21 color: white;
22 font-family: sans-serif; 22 font-family: sans-serif;
23 overflow: hidden; 23 overflow: hidden;
24 touch-action: none;
24 height: 100%; 25 height: 100%;