aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorpacien2021-04-04 06:05:55 +0200
committerpacien2021-04-04 06:05:55 +0200
commit65b25584ecd7b3fb1793feefd0eee5c6b513cdf5 (patch)
treea6adc677958c8b91b84cdf3e5a1cb818007228dc
parent3208851e93d429b6e82c9792122c3dfb09eb236d (diff)
downloadbeamer-viewer-65b25584ecd7b3fb1793feefd0eee5c6b513cdf5.tar.gz
timer: add pause and reset buttons
GitHub: closes #12
-rw-r--r--beamer/viewer/screen/timer.js72
-rw-r--r--beamer/viewer/viewer.css24
-rw-r--r--index.html17
-rw-r--r--readme.md2
4 files changed, 88 insertions, 27 deletions
diff --git a/beamer/viewer/screen/timer.js b/beamer/viewer/screen/timer.js
index a04ea63..112a421 100644
--- a/beamer/viewer/screen/timer.js
+++ b/beamer/viewer/screen/timer.js
@@ -1,17 +1,17 @@
1/* 1/*
2 * Beamer Viewer, a web-based PDF presentation viewer 2 * Beamer Viewer, a web-based PDF presentation viewer
3 * Copyright (C) 2018 Pacien TRAN-GIRARD 3 * Copyright (C) 2021 Pacien TRAN-GIRARD
4 * 4 *
5 * This program is free software: you can redistribute it and/or modify 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 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 7 * published by the Free Software Foundation, either version 3 of the
8 * License, or (at your option) any later version. 8 * License, or (at your option) any later version.
9 * 9 *
10 * This program is distributed in the hope that it will be useful, 10 * This program is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of 11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU Affero General Public License for more details. 13 * GNU Affero General Public License for more details.
14 * 14 *
15 * You should have received a copy of the GNU Affero General Public License 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/>. 16 * along with this program. If not, see <https://www.gnu.org/licenses/>.
17 */ 17 */
@@ -20,24 +20,59 @@
20 20
21class Timer { 21class Timer {
22 constructor(window) { 22 constructor(window) {
23 this.display = window.document.getElementById("timer"); 23 this.display = window.document.getElementById("timer-value");
24 this.startTime = null; 24 this.carryoverMs = 0; // saved on pause
25 this.runningStartTs = null; // null if paused
26
27 window.document.getElementById("timer-pause").addEventListener("click", event => {
28 event.stopPropagation();
29 this._startStop();
30 });
31
32 window.document.getElementById("timer-reset").addEventListener("click", event => {
33 event.stopPropagation();
34 this._reset();
35 });
36
37 setInterval(() => this._refreshTimer(), 1000);
38
39 this._toggleDisplay(false);
25 this._setDisplay(0); 40 this._setDisplay(0);
41 window.document.getElementById("timer").classList.remove("hidden");
26 } 42 }
27 43
28 start() { 44 start() {
29 if (this.startTime != null) return; 45 if (this.runningStartTs != null) return;
30 this.startTime = Date.now(); 46 this.runningStartTs = Date.now();
47 this._toggleDisplay(true);
48 }
49
50 _stop() {
51 if (this.runningStartTs == null) return;
52 this.carryoverMs += Date.now() - this.runningStartTs;
53 this.runningStartTs = null;
54 this._toggleDisplay(false);
55 }
31 56
32 const self = this; 57 _startStop() {
33 setInterval(function() { 58 if (this.runningStartTs == null)
34 self._runTimer(); 59 this.start();
35 }, 1000); 60 else
61 this._stop();
62
63 this._refreshTimer();
64 }
65
66 _reset() {
67 this.carryoverMs = 0;
68 if (this.runningStartTs != null) this.runningStartTs = Date.now();
69 this._setDisplay(0);
36 } 70 }
37 71
38 _runTimer() { 72 _refreshTimer() {
39 const timeDelta = Math.floor((Date.now() - this.startTime) / 1000); 73 if (this.runningStartTs == null) return;
40 this._setDisplay(timeDelta); 74 const timeDeltaMs = Date.now() - this.runningStartTs + this.carryoverMs;
75 this._setDisplay(Math.floor(timeDeltaMs / 1000));
41 } 76 }
42 77
43 _setDisplay(seconds) { 78 _setDisplay(seconds) {
@@ -45,4 +80,11 @@ class Timer {
45 dateObj.setSeconds(seconds); 80 dateObj.setSeconds(seconds);
46 this.display.textContent = dateObj.toISOString().substr(11, 8); 81 this.display.textContent = dateObj.toISOString().substr(11, 8);
47 } 82 }
83
84 _toggleDisplay(active) {
85 if (active)
86 this.display.classList.remove("timer-paused");
87 else
88 this.display.classList.add("timer-paused");
89 }
48} 90}
diff --git a/beamer/viewer/viewer.css b/beamer/viewer/viewer.css
index a69ddb2..419f977 100644
--- a/beamer/viewer/viewer.css
+++ b/beamer/viewer/viewer.css
@@ -1,17 +1,17 @@
1/* 1/*
2 * Beamer Viewer, a web-based PDF presentation viewer 2 * Beamer Viewer, a web-based PDF presentation viewer
3 * Copyright (C) 2018 Pacien TRAN-GIRARD 3 * Copyright (C) 2021 Pacien TRAN-GIRARD
4 * 4 *
5 * This program is free software: you can redistribute it and/or modify 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 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 7 * published by the Free Software Foundation, either version 3 of the
8 * License, or (at your option) any later version. 8 * License, or (at your option) any later version.
9 * 9 *
10 * This program is distributed in the hope that it will be useful, 10 * This program is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of 11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU Affero General Public License for more details. 13 * GNU Affero General Public License for more details.
14 * 14 *
15 * You should have received a copy of the GNU Affero General Public License 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/>. 16 * along with this program. If not, see <https://www.gnu.org/licenses/>.
17 */ 17 */
@@ -106,10 +106,24 @@ header span {
106 font-size: 1.6rem; 106 font-size: 1.6rem;
107} 107}
108 108
109.notification:empty { 109.notification:empty, .hidden {
110 display: none; 110 display: none;
111} 111}
112 112
113.timer-action {
114 cursor: pointer;
115}
116
117.timer-paused {
118 animation: blinking 1s step-start infinite;
119}
120
121@keyframes blinking {
122 50% {
123 opacity: 60%;
124 }
125}
126
113.warning { 127.warning {
114 font-weight: bold; 128 font-weight: bold;
115 color: orangered; 129 color: orangered;
diff --git a/index.html b/index.html
index e377e27..0f8dde1 100644
--- a/index.html
+++ b/index.html
@@ -2,18 +2,18 @@
2 2
3<!-- 3<!--
4 * Beamer Viewer, a web-based PDF presentation viewer 4 * Beamer Viewer, a web-based PDF presentation viewer
5 * Copyright (C) 2018 Pacien TRAN-GIRARD 5 * Copyright (C) 2021 Pacien TRAN-GIRARD
6 * 6 *
7 * This program is free software: you can redistribute it and/or modify 7 * This program is free software: you can redistribute it and/or modify
8 * it under the terms of the GNU Affero General Public License as 8 * it under the terms of the GNU Affero General Public License as
9 * published by the Free Software Foundation, either version 3 of the 9 * published by the Free Software Foundation, either version 3 of the
10 * License, or (at your option) any later version. 10 * License, or (at your option) any later version.
11 * 11 *
12 * This program is distributed in the hope that it will be useful, 12 * This program is distributed in the hope that it will be useful,
13 * but WITHOUT ANY WARRANTY; without even the implied warranty of 13 * but WITHOUT ANY WARRANTY; without even the implied warranty of
14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 14 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15 * GNU Affero General Public License for more details. 15 * GNU Affero General Public License for more details.
16 * 16 *
17 * You should have received a copy of the GNU Affero General Public License 17 * You should have received a copy of the GNU Affero General Public License
18 * along with this program. If not, see <https://www.gnu.org/licenses/>. 18 * along with this program. If not, see <https://www.gnu.org/licenses/>.
19--> 19-->
@@ -70,7 +70,7 @@
70 70
71 <div> 71 <div>
72 <ul> 72 <ul>
73 <li><a href="https://pacien.org">&copy; 2018 Pacien</a></li> 73 <li><a href="https://pacien.org">&copy; 2021 Pacien</a></li>
74 <li><a href="https://github.com/pacien/beamer-viewer/issues">Bug tracker</a></li> 74 <li><a href="https://github.com/pacien/beamer-viewer/issues">Bug tracker</a></li>
75 <li><a href="https://cgit.pacien.net/public/apps/beamer-viewer/">Source repository</a></li> 75 <li><a href="https://cgit.pacien.net/public/apps/beamer-viewer/">Source repository</a></li>
76 <li><a href="https://mozilla.github.io/pdf.js/">Powered by PDF.js</a></li> 76 <li><a href="https://mozilla.github.io/pdf.js/">Powered by PDF.js</a></li>
@@ -79,7 +79,12 @@
79 </div> 79 </div>
80 </div> 80 </div>
81 81
82 <div id="timer" class="notification"></div> 82 <div id="timer" class="notification hidden">
83 <span id="timer-pause" class="timer-action" title="Pause/resume timer">⏱︎</span>
84 <span id="timer-value"></span>
85 <span id="timer-reset" class="timer-action" title="Reset timer">↺</span>
86 </div>
87
83 <div id="message" class="notification"></div> 88 <div id="message" class="notification"></div>
84 89
85 <script type="text/javascript" src="beamer/pdfjs/pdf.js"></script> 90 <script type="text/javascript" src="beamer/pdfjs/pdf.js"></script>
diff --git a/readme.md b/readme.md
index a30659b..51cf765 100644
--- a/readme.md
+++ b/readme.md
@@ -16,7 +16,7 @@ A demonstration is available [here](https://beamerviewer.pacien.org/#file=sample