From c6c65f9e8273a5bc1b2ac1155d66003d2b98591c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 4 Oct 2021 17:40:59 +0200 Subject: {.js => .ts} on relavant files. --- static/clock.ts | 98 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 static/clock.ts (limited to 'static/clock.ts') diff --git a/static/clock.ts b/static/clock.ts new file mode 100644 index 00000000..d33d603a --- /dev/null +++ b/static/clock.ts @@ -0,0 +1,98 @@ + +class Clock { + update(now) { + } +} + + +class Timebar extends Clock { + + constructor(start_time, end_time) { + super(); + this.start_time = start_time; + this.end_time = end_time; + this.bar_object = false + } + + + update(now) { + // if (! (this.start_time <= now.getTime() && now.getTime() < this.end_time)) + // return; + + var event_area = document.getElementById(now.format("~Y-~m-~d")) + + if (event_area) { + if (this.bar_object) { + this.bar_object.parentNode.removeChild(this.bar_object) + } else { + this.bar_object = makeElement ('div', { + id: 'bar', + className: 'eventlike current-time', + }); + } + + this.bar_object.style.top = date_to_percent(now) + "%"; + event_area.append(this.bar_object) + } + } +} + +class SmallcalCellHighlight extends Clock { + constructor(small_cal) { + super(); + this.small_cal = small_cal; + this.current_cell = false + } + + update(now) { + if (this.current_cell) { + this.current_cell.style.border = ""; + } + + /* This is expeced to fail if the current date is not + currently on screen. */ + this.current_cell = this.small_cal.querySelector( + "time[datetime='" + now.format("~Y-~m-~d") + "']"); + + if (this.current_cell) { + this.current_cell.style.border = "1px solid black"; + } + } +} + +/* -------------------------------------------------- */ + +class ClockElement extends HTMLElement { + constructor () { + super(); + } + + 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 observedAttributes () { + 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) -- cgit v1.2.3 From 8ec2f441d40ab89b40cc3158f65c914eff497cee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 4 Oct 2021 23:18:24 +0200 Subject: Major typescript work. --- static/clock.ts | 53 ++++++++++++++++++++++++++++++++++------------------- 1 file changed, 34 insertions(+), 19 deletions(-) (limited to 'static/clock.ts') diff --git a/static/clock.ts b/static/clock.ts index d33d603a..c4feda8f 100644 --- a/static/clock.ts +++ b/static/clock.ts @@ -1,31 +1,35 @@ class Clock { - update(now) { + update(now: Date) { } } class Timebar extends Clock { - constructor(start_time, end_time) { + // start_time: Date + // end_time: Date + bar_object: HTMLElement | null + + constructor(/*start_time: Date, end_time: Date*/) { super(); - this.start_time = start_time; - this.end_time = end_time; - this.bar_object = false + // this.start_time = start_time; + // this.end_time = end_time; + this.bar_object = null } - update(now) { + update(now: Date) { // if (! (this.start_time <= now.getTime() && now.getTime() < this.end_time)) // return; var event_area = document.getElementById(now.format("~Y-~m-~d")) if (event_area) { - if (this.bar_object) { + if (this.bar_object !== null && this.bar_object.parentNode !== null) { this.bar_object.parentNode.removeChild(this.bar_object) } else { - this.bar_object = makeElement ('div', { + this.bar_object = makeElement('div', { id: 'bar', className: 'eventlike current-time', }); @@ -38,13 +42,17 @@ class Timebar extends Clock { } class SmallcalCellHighlight extends Clock { - constructor(small_cal) { + + small_cal: HTMLElement + current_cell: HTMLElement | null + + constructor(small_cal: HTMLElement) { super(); this.small_cal = small_cal; - this.current_cell = false + this.current_cell = null } - update(now) { + update(now: Date) { if (this.current_cell) { this.current_cell.style.border = ""; } @@ -63,35 +71,42 @@ class SmallcalCellHighlight extends Clock { /* -------------------------------------------------- */ class ClockElement extends HTMLElement { - constructor () { + + timer_id: number + + constructor() { super(); + + this.timer_id = 0 } - connectedCallback () { - let interval = this.hasAttribute('interval') ? +this.getAttribute('img') : 60; + connectedCallback() { + let interval = this.hasAttribute('interval') + ? +(this.getAttribute('interval') as string) + : 60; interval *= 1000 /* ms */ this.timer_id = window.setInterval(() => this.update(new Date), interval) this.update(new Date) } - static get observedAttributes () { + static get observedAttributes() { return ['timer_id'] } - update (now) { /* noop */ } + update(now: Date) { /* noop */ } } class TodayButton extends ClockElement { - update (now) { - this.querySelector('a').href = now.format("~Y-~m-~d.html") + update(now: Date) { + (this.querySelector('a') as any).href = now.format("~Y-~m-~d.html") } } customElements.define('today-button', TodayButton) class CurrentTime extends ClockElement { - update (now) { + update(now: Date) { this.innerHTML = now.format('~H:~M:~S') } } -- cgit v1.2.3 From 2d0ec2b162e3e2851fef7f280aab21c9f00cd171 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 31 Oct 2021 20:48:23 +0100 Subject: Everything but lib. --- static/clock.ts | 1 + 1 file changed, 1 insertion(+) (limited to 'static/clock.ts') diff --git a/static/clock.ts b/static/clock.ts index c4feda8f..27c3e4e1 100644 --- a/static/clock.ts +++ b/static/clock.ts @@ -1,3 +1,4 @@ +export { SmallcalCellHighlight, Timebar } class Clock { update(now: Date) { -- cgit v1.2.3 From 0712c416259e4860ff1910c4a5bcd7b37da6b237 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Sun, 31 Oct 2021 21:18:37 +0100 Subject: lib. --- static/clock.ts | 2 ++ 1 file changed, 2 insertions(+) (limited to 'static/clock.ts') diff --git a/static/clock.ts b/static/clock.ts index 27c3e4e1..9171b8a8 100644 --- a/static/clock.ts +++ b/static/clock.ts @@ -1,5 +1,7 @@ export { SmallcalCellHighlight, Timebar } +import { makeElement, date_to_percent } from './lib' + class Clock { update(now: Date) { } -- cgit v1.2.3 From b3d72678192902252613e654c3fada1e57250ba7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Mon, 22 Nov 2021 01:09:04 +0100 Subject: Change innerHTML to textContent. Also changed some innerText to textContent --- static/clock.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'static/clock.ts') diff --git a/static/clock.ts b/static/clock.ts index 9171b8a8..a2d22e00 100644 --- a/static/clock.ts +++ b/static/clock.ts @@ -110,7 +110,7 @@ customElements.define('today-button', TodayButton) class CurrentTime extends ClockElement { update(now: Date) { - this.innerHTML = now.format('~H:~M:~S') + this.textContent = now.format('~H:~M:~S') } } customElements.define('current-time', CurrentTime) -- cgit v1.2.3 From 457ab3301782e4e91334961208c5e4bbde95987d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= Date: Fri, 10 Dec 2021 03:04:34 +0100 Subject: Add various type specifiers. --- static/clock.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'static/clock.ts') diff --git a/static/clock.ts b/static/clock.ts index a2d22e00..b0ddae00 100644 --- a/static/clock.ts +++ b/static/clock.ts @@ -2,9 +2,8 @@ export { SmallcalCellHighlight, Timebar } import { makeElement, date_to_percent } from './lib' -class Clock { - update(now: Date) { - } +abstract class Clock { + abstract update(now: Date): void; } -- cgit v1.2.3