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

docs: Add ISO 8601 week to HippieClock

Browse source
This commit is contained in:
sthag 2026-03-01 12:25:35 +01:00
parent 5261754da5
commit 0aca2bf3ee
1 changed files with 30 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,6 @@ tags:
{{ block.super -}}
<script>
// TODO: Kalenderwoche ergänzen
// TODO: Mondphase ergänzen
class HippieClock {
constructor(element, date, options) {
@ -42,7 +41,8 @@ tags:
this.addRing('dotweek', .7, 2, 7, `rgb(142, 31, 104)`);
this.addRing('dotmonth', .6, 12, this.getTime().daysMonth, `rgb(39, 63, 139)`);
this.addRing('dotyear', .5, 256, 365, `rgb(60, 87, 154)`);
this.addRing('month', .4, 10, 12, `rgb(183, 224, 240)`);
this.addRing('week', .4, 10, this.getTime().weeksYear, `rgb(183, 224, 240)`);
this.addRing('month', .3, 10, 12, `rgb(107, 199, 217)`);
this.resize();
window.addEventListener('resize', () => this.resize());
@ -138,6 +138,7 @@ tags:
this.updateShape('dotweek', this.getTime().dayWeek);
this.updateShape('dotmonth', this.getTime().dayMonth, this.getTime().daysMonth);
this.updateShape('dotyear', this.getTime().dayYear);
this.updateShape('week', this.getTime().week);
this.updateShape('month', this.getTime().month);
this.draw();
}
@ -171,6 +172,31 @@ tags:
return new Date(year, month, 0).getDate();
}
// ISO 8601
getISOWeek(date) {
const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
const dayNum = d.getUTCDay() || 7;
d.setUTCDate(d.getUTCDate() + 4 - dayNum);
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
}
getISOWeeksInYear(year) {
// Check if Dec 28 is in week 53
return this.getISOWeek(new Date(year, 11, 28)) === 53 ? 53 : 52;
}
getISOWeekInfo(date) {
const current = this.getISOWeek(date);
const weeksYear = this.getISOWeeksInYear(date.getFullYear());
return {
current,
weeksYear
};
}
getSize() {
const height = window.innerHeight;
const width = window.innerWidth;
@ -191,6 +217,8 @@ tags:
dayWeek: this.getNumericWeekday(this.date),
dayMonth: this.date.getDate(),
dayYear: this.getNumericYearDay(this.date),
week: this.getISOWeekInfo(this.date).current,
weeksYear: this.getISOWeekInfo(this.date).weeksYear,
month: this.date.getMonth() + 1, // Get current month (0-11)
daysMonth: this.daysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
};