From e28b54810bb42b21a069a1257cf5e59e06c735a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Thu, 30 Sep 2021 01:47:38 +0200
Subject: Replace today-button with web component.

---
 static/clock.js  | 38 +++++++++++++++++++++++++++++++-------
 static/script.js |  9 +--------
 2 files changed, 32 insertions(+), 15 deletions(-)

(limited to 'static')

diff --git a/static/clock.js b/static/clock.js
index 9642ebaf..240041a9 100644
--- a/static/clock.js
+++ b/static/clock.js
@@ -60,15 +60,39 @@ class SmallcalCellHighlight extends Clock {
     }
 }
 
-/* Update [today] button */
-class ButtonUpdater extends Clock {
-    constructor(el, proc) {
+/* -------------------------------------------------- */
+
+class ClockElement extends HTMLElement {
+    constructor () {
         super();
-        this.el = el;
-        this.proc = proc;
     }
 
-    update(now) {
-        this.proc(this.el, now);
+    connectedCallback () {
+        let interval = this.hasAttribute('interval') ? +this.getAttribute('img') : 60;
+        interval *= 1000 /* ms */
+
+        this.timer_id = window.setInterval(() => this.update(new Date), interval)
+        this.update(new Date)
+    }
+
+    static get observerAttributes () {
+        return ['timer_id']
+    }
+
+    update (now) { /* noop */ }
+}
+
+class TodayButton extends ClockElement {
+    update (now) {
+        this.querySelector('a').href = now.format("~Y-~m-~d.html")
+    }
+}
+customElements.define('today-button', TodayButton)
+
+
+class CurrentTime extends ClockElement {
+    update (now) {
+        this.innerHTML = now.format('~H:~M:~S')
     }
 }
+customElements.define('current-time', CurrentTime)
diff --git a/static/script.js b/static/script.js
index 05ae61c5..580ee520 100644
--- a/static/script.js
+++ b/static/script.js
@@ -82,7 +82,7 @@
 //     }
 // 
 //     /*
-//       round_to: what start and end times should round to when dragging, in fractions
+//       round_to: what start and end times should round to when dragging, in fractionsb
 //       of the width of the containing container.
 // 
 //       TODO limit this to only continue when on the intended event_container.
@@ -258,11 +258,6 @@ window.addEventListener('load', function () {
     // let start_time = document.querySelector("meta[name='start-time']").content;
     // let end_time = document.querySelector("meta[name='end-time']").content;
 
-    const button_updater = new ButtonUpdater(
-        document.getElementById("today-button"),
-        (e, d) => e.href = d.format('~Y-~m-~d') + ".html"
-    );
-
     const sch = new SmallcalCellHighlight(
         document.querySelector('.small-calendar'))
 
@@ -273,7 +268,6 @@ window.addEventListener('load', function () {
     window.setInterval(() => {
         let d = new Date;
         timebar.update(d);
-        button_updater.update(d);
         sch.update(d);
     }, 1000 * 60);
 
@@ -372,7 +366,6 @@ window.addEventListener('load', function () {
         href: target_href,
         innerHTML: gotodatebtn.innerHTML,
     });
-    document.getElementById("today-button").href = target_href;
     gotodatebtn.replaceWith(golink);
 
     document.querySelector("#jump-to input[name='date']").onchange = function () {
-- 
cgit v1.2.3