From bac4b73c08151f09e482767edaa8a3bd7f4044e5 Mon Sep 17 00:00:00 2001 From: sthag Date: Fri, 31 Oct 2025 19:47:19 +0100 Subject: [PATCH] feat: Add time to task bar - Add app.js to windows screen - Add time display to task bar - Add new TimeDisplay class to app.js - Add play and pause buttons as example - Fix event handlers of task bar according to bubbling and propagation --- source/code/app.js | 57 +++++++++++++++++++ source/code/windows.js | 33 +++++++---- .../screens/demo/examples/ui/windows.liquid | 20 ++++++- source/style/modules/ui/_windows_module.scss | 4 ++ 4 files changed, 103 insertions(+), 11 deletions(-) diff --git a/source/code/app.js b/source/code/app.js index 8a21b5f..3f588fe 100644 --- a/source/code/app.js +++ b/source/code/app.js @@ -1,3 +1,53 @@ +// NEWER + +class TimeDisplay { + constructor(element, format = 'HH:mm:ss', interval = 1000) { + this.element = element; + this.format = format; + this.interval = interval; + this.isPaused = false; + this.locale = navigator.language || 'en-US'; + this.updateTime(); + } + + formatTime(date) { + const options = {hour: '2-digit', minute: '2-digit', hour12: false}; + + switch (this.format) { + case 'HH:mm': + return date.toLocaleTimeString(this.locale, options); + case 'HH:mm:ss': + return date.toLocaleTimeString(this.locale, {...options, second: '2-digit'}); + case 'hh:mm A': + return date.toLocaleTimeString(this.locale, {...options, hour12: true}); + case 'hh:mm:ss A': + return date.toLocaleTimeString(this.locale, {...options, second: '2-digit', hour12: true}); + } + + return date.toString(); + } + + async updateTime() { + while (true) { + if (!this.isPaused) { + const now = new Date(); + this.element.textContent = this.formatTime(now); + } + await new Promise(resolve => setTimeout(resolve, this.interval)); + } + } + + // Method to pause updates + pause() { + this.isPaused = true; + } + + // Method to resume updates + resume() { + this.isPaused = false; + } +} + //NEW function Clock(id) { @@ -158,3 +208,10 @@ function gigabytes(percent, total, round) { return g; } + +function checkButtonAndTarget(event, element, button = 0) { + return ( + event.button === button && + event.target === element + ); +} \ No newline at end of file diff --git a/source/code/windows.js b/source/code/windows.js index f282729..e928e97 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -139,6 +139,7 @@ class DragAdv { this.init(); } + // TODO: Ereignisse besser delegieren init() { this.element.addEventListener('mousedown', this.onMouseDown.bind(this)); document.addEventListener('mousemove', this.onMouseMove.bind(this)); @@ -147,9 +148,12 @@ class DragAdv { } onMouseDown(event) { - if (event.button === 0) { + if (checkButtonAndTarget(event, this.element, 0)) { + console.debug('Drag mode enabled'); + this.isDragging = true; + // TODO: Platzhalter anpassen je nach Ziel this.showPlaceholder(); this.offsetX = this.placeholder.getBoundingClientRect().width / 2; @@ -166,21 +170,29 @@ class DragAdv { } onMouseMove(event) { - if (!this.isDragging) return; + if (this.isDragging) { + if (!this.isDragging) return; - let x = event.clientX - this.offsetX; - let y = event.clientY - this.offsetY; + let x = event.clientX - this.offsetX; + let y = event.clientY - this.offsetY; - this.placeholder.style.left = `${x}px`; - this.placeholder.style.top = `${y}px`; + console.debug('Position: ', x, y); + + this.placeholder.style.left = `${x}px`; + this.placeholder.style.top = `${y}px`; + } } onMouseUp() { - if (!this.isDragging) return; - this.isDragging = false; + if (event.target === this.placeholder) { + console.debug('Drag mode disabled'); - this.snapToEdges(); - this.hidePlaceholder(); + if (!this.isDragging) return; + this.isDragging = false; + + this.snapToEdges(); + this.hidePlaceholder(); + } } showPlaceholder() { @@ -193,6 +205,7 @@ class DragAdv { this.element.style.display = ''; } + // TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen snapToEdges() { const rect = this.placeholder.getBoundingClientRect(); const windowWidth = window.innerWidth; diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid index daacb66..7521092 100644 --- a/source/screens/demo/examples/ui/windows.liquid +++ b/source/screens/demo/examples/ui/windows.liquid @@ -18,6 +18,8 @@ tags: