diff options
Diffstat (limited to 'pointless/viewer')
-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.js | 121 | ||||
-rw-r--r-- | pointless/viewer/stage/stage.js (renamed from pointless/viewer/stage.js) | 29 | ||||
-rw-r--r-- | pointless/viewer/viewer.css | 1 |
5 files changed, 132 insertions, 19 deletions
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 | |||
21 | class ActionEventHandler { | ||
22 | constructor(onNext, onPrevious) { | ||
23 | this.onNext = onNext; | ||
24 | this.onPrevious = onPrevious; | ||
25 | } | ||
26 | } | ||
27 | |||
28 | class 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 | |||
51 | class 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 | |||
64 | class 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 | ||
21 | class Stage { | 21 | class 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%; |
25 | } | 26 | } |
26 | 27 | ||