diff options
-rw-r--r-- | module/calp/html/view/calendar.scm | 16 | ||||
-rw-r--r-- | static/clock.js | 38 | ||||
-rw-r--r-- | static/script.js | 9 |
3 files changed, 41 insertions, 22 deletions
diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm index 00451984..53e928f6 100644 --- a/module/calp/html/view/calendar.scm +++ b/module/calp/html/view/calendar.scm @@ -150,6 +150,7 @@ (footer (@ (style "grid-area: footer")) (span "Page generated " ,(date->string (current-date))) + (span "Current time " (current-time (@ (interval 1)))) (span (a (@ (href ,(repo-url))) "Source Code"))) @@ -166,13 +167,14 @@ ,(btn href: (date->string (set (day start-date) 1) "/month/~1.html") "månadsvy") - ,(btn id: "today-button" - href: (string-append - "/today?" (case intervaltype - [(month) "view=month"] - [(week) "view=week"] - [else ""])) - "idag")) + (today-button + (a (@ (class "btn") + (href ,(string-append + "/today?" (case intervaltype + [(month) "view=month"] + [(week) "view=week"] + [else ""])))) + (div "idag")))) (div (@ (id "jump-to")) ;; Firefox's accessability complain about each date 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 () { |