interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: HippieClock structure

Browse source 
- Restructure options with defaults
- Separate date and values of geTime()
- Use this.values inside class
- Add debug console output
- Add handler to updateOptions()
This commit is contained in:
sthag 2026-03-06 23:45:19 +01:00
parent 6c98beb148
commit dd8b461034
1 changed files with 41 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

60
source/screens/demo/examples/clock.liquid
View file

@ -24,15 +24,18 @@ tags:
<script> <script>
class HippieClock { class HippieClock {
constructor(element, date, options) { constructor(element, date = new Date(), options = {}) {
this.element = element; this.defaults = {
this.date = this.getTime(date); debug: true,
this.options = options || {
size: Math.floor(this.getSize().value * 0.9), size: Math.floor(this.getSize().value * 0.9),
h24: true, h24: true,
sections: true, sections: true,
overlay: false overlay: false
}; };
this.options = {...this.defaults, ...options};
this.element = element;
this.date = date;
this.values = this.getTime();
this.parts = []; this.parts = [];
this.shapes = []; this.shapes = [];
@ -47,17 +50,21 @@ tags:
this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`); this.addRing('minutes', .9, 46, 60, `rgb(242, 175, 19)`);
this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`); this.addRing('hours', .8, 6, this.options.h24 ? 24 : 12, `rgb(211, 10, 81)`);
this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`); this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`); this.addRing('dotmonth', .6, 12, this.values.daysMonth, `rgb(39, 63, 139)`);
this.addRing('dotyear', .5, 256, this.getTime().daysYear, `rgb(60, 87, 154)`); this.addRing('dotyear', .5, 256, this.values.daysYear, `rgb(60, 87, 154)`);
this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`); this.addRing('week', .4, 10, this.values.weeksYear, `rgb(183, 224, 240)`);
this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`); this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`); this.addRing('moon', .2, 4, 8, `rgb(82, 190, 209)`);
this.#resize(); this.#resize();
window.addEventListener('resize', () => this.#resize()); window.addEventListener('resize', () => this.#resize());
console.debug(this); if (this.options.debug) {
console.debug(this.getTime()); console.group('Clock');
console.info('\nOptions:', this.options, '\n\n');
console.info('Date:', this.date);
console.groupEnd();
}
} }
#resize() { #resize() {
@ -146,19 +153,20 @@ tags:
// TODO: Erfassung für geänderte Formen ergänzen // TODO: Erfassung für geänderte Formen ergänzen
update() { update() {
const second = this.getTime().second; this.values = this.getTime();
const minute = this.getTime().minute; const second = this.values.second;
const hour = this.getTime().hour; const minute = this.values.minute;
const hour = this.values.hour;
this.updateShape('seconds', (second === 0) ? 60 : second); this.updateShape('seconds', (second === 0) ? 60 : second);
this.updateShape('minutes', (minute === 0) ? 60 : minute); this.updateShape('minutes', (minute === 0) ? 60 : minute);
this.updateShape('hours', this.options.h24 ? hour : hour % 12, this.options.h24 ? 24 : 12); this.updateShape('hours', this.options.h24 ? hour : hour % 12, this.options.h24 ? 24 : 12);
this.updateShape('dotweek', this.getTime().dayWeek); this.updateShape('dotweek', this.values.dayWeek);
this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth); this.updateShape('dotmonth', this.values.dayMonth, this.values.daysMonth);
this.updateShape('dotyear', this.getTime().dayYear); this.updateShape('dotyear', this.values.dayYear);
this.updateShape('week', this.getTime().week); this.updateShape('week', this.values.week);
this.updateShape('month', this.getTime().month); this.updateShape('month', this.values.month);
this.updateShape('moon', this.getTime().moon); this.updateShape('moon', this.values.moon);
this.draw(); this.draw();
} }
@ -366,8 +374,17 @@ tags:
return false; return false;
} }
// TODO: Proxy für Optionen benutzen
updateOptions(changes) { updateOptions(changes) {
this.options = {...this.options, ...changes}; this.options = {...this.options, ...changes};
// TODO: Änderungen durch setzen von Optionen vornehmen, oder nicht?
const drawOptions = new Set(['sections', 'h24']);
const hasKey = Object.keys(changes).some(key => drawOptions.has(key));
if (hasKey) {
this.draw();
}
} }
updateShape(id, angle, max) { updateShape(id, angle, max) {
@ -450,8 +467,13 @@ tags:
document.getElementById('tglOverlay').addEventListener('click', () => { document.getElementById('tglOverlay').addEventListener('click', () => {
if (clock) { if (clock) {
// TODO: Anzeigen und ausblenden, anstatt löschen und hinzufügen? // TODO: Anzeigen und ausblenden, anstatt löschen und hinzufügen?
clock.options.overlay ? clock.removeOverlay() : clock.createOverlay();
clock.updateOptions({overlay: !clock.options.overlay}); clock.updateOptions({overlay: !clock.options.overlay});
if (clock.options.overlay) {
clock.createOverlay();
} else {
clock.removeOverlay();
}
} else { } else {
console.log('No clock available'); console.log('No clock available');
} }