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

fix: Resize behavior for clock

Browse source 
Use option value instead of offset of elements.
This commit is contained in:
sthag 2026-04-05 11:04:30 +02:00
parent d5dfacb9a9
commit 31457088da
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -61,6 +61,7 @@ tags:
this.#resize(); this.#resize();
window.addEventListener('resize', () => this.#resize()); window.addEventListener('resize', () => this.#resize());
// console.debug(this);
if (this.options.debug) { if (this.options.debug) {
console.group('Clock'); console.group('Clock');
console.info('\nOptions:', this.options, '\n\n'); console.info('\nOptions:', this.options, '\n\n');
@ -77,13 +78,16 @@ tags:
part.element.style.width = this.options.size + 'px'; part.element.style.width = this.options.size + 'px';
} }
part.element.width = part.element.offsetWidth; // part.element.width = part.element.offsetWidth;
part.element.height = part.element.offsetHeight; // part.element.height = part.element.offsetHeight;
part.element.width = this.options.size;
part.element.height = this.options.size;
this.draw(); this.draw();
}); });
} }
// TODO: Zuweisung von shapes zu parts anpassen
draw() { draw() {
// TODO: Nur geänderte Teile löschen // TODO: Nur geänderte Teile löschen
this.parts.forEach(part => { this.parts.forEach(part => {
@ -303,7 +307,6 @@ tags:
} }
#createContext(names) { #createContext(names) {
let parts = [];
const wrap = document.createElement('div'); const wrap = document.createElement('div');
wrap.style.position = 'relative'; wrap.style.position = 'relative';
@ -444,6 +447,7 @@ tags:
clock.draw(); clock.draw();
// TODO: Alternative mit requestAnimationFrame() // TODO: Alternative mit requestAnimationFrame()
// TODO: Möglichkeit für Start/Stop wie bei TimeDisplay
setInterval(() => { setInterval(() => {
clock.update(); clock.update();
}, 1000); }, 1000);