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 ++++++++++++--- 2 files changed, 76 insertions(+), 20 deletions(-) (limited to 'beamer') 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; -- cgit v1.2.3