From 65b25584ecd7b3fb1793feefd0eee5c6b513cdf5 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sun, 4 Apr 2021 06:05:55 +0200
Subject: timer: add pause and reset buttons
GitHub: closes #12
---
beamer/viewer/screen/timer.js | 72 ++++++++++++++++++++++++++++++++++---------
beamer/viewer/viewer.css | 24 ++++++++++++---
index.html | 17 ++++++----
readme.md | 2 +-
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 @@
/*
* Beamer Viewer, a web-based PDF presentation viewer
- * Copyright (C) 2018 Pacien TRAN-GIRARD
- *
+ * Copyright (C) 2021 Pacien TRAN-GIRARD
+ *
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
- *
+ *
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
- *
+ *
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see .
*/
@@ -20,24 +20,59 @@
class Timer {
constructor(window) {
- this.display = window.document.getElementById("timer");
- this.startTime = null;
+ this.display = window.document.getElementById("timer-value");
+ this.carryoverMs = 0; // saved on pause
+ this.runningStartTs = null; // null if paused
+
+ window.document.getElementById("timer-pause").addEventListener("click", event => {
+ event.stopPropagation();
+ this._startStop();
+ });
+
+ window.document.getElementById("timer-reset").addEventListener("click", event => {
+ event.stopPropagation();
+ this._reset();
+ });
+
+ setInterval(() => this._refreshTimer(), 1000);
+
+ this._toggleDisplay(false);
this._setDisplay(0);
+ window.document.getElementById("timer").classList.remove("hidden");
}
start() {
- if (this.startTime != null) return;
- this.startTime = Date.now();
+ if (this.runningStartTs != null) return;
+ this.runningStartTs = Date.now();
+ this._toggleDisplay(true);
+ }
+
+ _stop() {
+ if (this.runningStartTs == null) return;
+ this.carryoverMs += Date.now() - this.runningStartTs;
+ this.runningStartTs = null;
+ this._toggleDisplay(false);
+ }
- const self = this;
- setInterval(function() {
- self._runTimer();
- }, 1000);
+ _startStop() {
+ if (this.runningStartTs == null)
+ this.start();
+ else
+ this._stop();
+
+ this._refreshTimer();
+ }
+
+ _reset() {
+ this.carryoverMs = 0;
+ if (this.runningStartTs != null) this.runningStartTs = Date.now();
+ this._setDisplay(0);
}
- _runTimer() {
- const timeDelta = Math.floor((Date.now() - this.startTime) / 1000);
- this._setDisplay(timeDelta);
+ _refreshTimer() {
+ if (this.runningStartTs == null) return;
+ const timeDeltaMs = Date.now() - this.runningStartTs + this.carryoverMs;
+ this._setDisplay(Math.floor(timeDeltaMs / 1000));
}
_setDisplay(seconds) {
@@ -45,4 +80,11 @@ class Timer {
dateObj.setSeconds(seconds);
this.display.textContent = dateObj.toISOString().substr(11, 8);
}
+
+ _toggleDisplay(active) {
+ if (active)
+ this.display.classList.remove("timer-paused");
+ else
+ this.display.classList.add("timer-paused");
+ }
}
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 @@
/*
* Beamer Viewer, a web-based PDF presentation viewer
- * Copyright (C) 2018 Pacien TRAN-GIRARD
- *
+ * Copyright (C) 2021 Pacien TRAN-GIRARD
+ *
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
- *
+ *
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
- *
+ *
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see .
*/
@@ -106,10 +106,24 @@ header span {
font-size: 1.6rem;
}
-.notification:empty {
+.notification:empty, .hidden {
display: none;
}
+.timer-action {
+ cursor: pointer;
+}
+
+.timer-paused {
+ animation: blinking 1s step-start infinite;
+}
+
+@keyframes blinking {
+ 50% {
+ opacity: 60%;
+ }
+}
+
.warning {
font-weight: bold;
color: orangered;
diff --git a/index.html b/index.html
index e377e27..0f8dde1 100644
--- a/index.html
+++ b/index.html
@@ -2,18 +2,18 @@
@@ -70,7 +70,7 @@
-
+
+ ⏱︎
+
+ ↺
+
+
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
## License
-Copyright (C) 2018 Pacien TRAN-GIRARD
+Copyright (C) 2021 Pacien TRAN-GIRARD
_Beamer Viewer_ is distributed under the terms of GNU Affero General Public License v3.0,
as detailed in the attached `license.md` file.
--
cgit v1.2.3