From 20b43b8d358068f76fce9a5c50a2a50b48239c60 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 2 Nov 2025 09:26:19 +0100 Subject: [PATCH] feat: Integrate date in task bar - Date format can now be changed dynamically - Date element is now created in task bar class - Class can accept options, currently only for date - Date format is changed according to position - Changed dom structure for clock - Refactor setPosition method to be more flexible - Changed flex style for task bar items to inherit the direction --- source/code/hippie/app.js | 6 + source/code/windows.js | 110 +++++++++++------- .../screens/demo/examples/ui/windows.liquid | 12 +- source/style/modules/ui/_windows_module.scss | 42 ++++++- 4 files changed, 117 insertions(+), 53 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 73aa723..21e9b7d 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -296,6 +296,12 @@ class DateDisplay { this.element.textContent = this.formatDate(now); } + changeFormat(format) { + this.options = format; + + this.updateDate(); + } + getTimeUntilNextMidnight() { const now = new Date(); const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1); diff --git a/source/code/windows.js b/source/code/windows.js index d28a677..55be99a 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -128,13 +128,16 @@ class Draggable { } class DragAdv { - constructor(element, placeholder) { + constructor(element, placeholder, options) { this.element = element; this.placeholder = placeholder; + this.date = null; this.offsetX = 0; this.offsetY = 0; this.isDragging = false; - this.barSize = ''; + this.barSize = '64px'; + // TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden + this.options = options || {year: 'numeric', month: '2-digit', day: '2-digit'}; this.init(); } @@ -144,7 +147,14 @@ class DragAdv { this.element.addEventListener('mousedown', this.onMouseDown.bind(this)); document.addEventListener('mousemove', this.onMouseMove.bind(this)); document.addEventListener('mouseup', this.onMouseUp.bind(this)); - this.setPosition('bottom', this.barSize); + + const dateElement = document.createElement('span'); + + dateElement.id = 'date'; + this.element.querySelector('.clock').appendChild(dateElement); + this.date = new DateDisplay(dateElement, this.options); + + this.setPosition('bottom'); } onMouseDown(event) { @@ -218,49 +228,69 @@ class DragAdv { }; const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b); - this.setPosition(closestEdge, this.barSize); + this.setPosition(closestEdge); + this.date.changeFormat(this.options); } - setPosition(side, barSize) { - switch (side) { - case 'left': - // this.element.style.top = `${rect.top}px`; // Optional: keep vertical position - this.element.style.top = '0px'; - this.element.style.right = ''; - this.element.style.bottom = '0px'; - this.element.style.left = '0px'; - this.element.style.width = barSize; - this.element.style.height = ''; - break; + setPosition(position) { + const attributes = { + top: { + className: 'top', + styles: { + top: '0', right: '0', bottom: '', left: '0', + width: '', height: this.barSize, + flexDirection: 'row' + } + }, + right: { + className: 'right', + styles: { + top: '0', right: '0', bottom: '0', left: '', + width: this.barSize, height: '', + flexDirection: 'column' + } + }, + bottom: { + className: 'bottom', + styles: { + top: '', right: '0', bottom: '0', left: '0', + width: '', height: this.barSize, + flexDirection: 'row' + } + }, + left: { + className: 'left', + styles: { + top: '0', + right: '', + bottom: '0', + left: '0', + width: this.barSize, + height: '', + flexDirection: 'column' + } + } + }; + + this.element.classList.remove(...Object.values(attributes).map(pos => pos.className)); + Object.keys(attributes[position].styles).forEach(key => { + this.element.style[key] = ''; + }); + + this.element.classList.add(attributes[position].className); + Object.entries(attributes[position].styles).forEach(([key, value]) => { + this.element.style[key] = value; + }); + + switch (position) { case 'right': - // this.element.style.left = `${windowWidth - rect.width}px`; - // this.element.style.top = `${rect.top}px`; // Optional: keep vertical position - this.element.style.top = '0px'; - this.element.style.right = '0px'; - this.element.style.bottom = '0px'; - this.element.style.left = ''; - this.element.style.width = barSize; - this.element.style.height = ''; + case 'left': + this.options = {year: '2-digit', month: '2-digit', day: '2-digit'}; break; case 'top': - // this.element.style.top = '0px'; - // this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position - this.element.style.top = '0px'; - this.element.style.right = '0px'; - this.element.style.bottom = ''; - this.element.style.left = '0px'; - this.element.style.width = ''; - this.element.style.height = barSize; - break; case 'bottom': - // this.element.style.top = `${windowHeight - rect.height}px`; - // this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position - this.element.style.top = ''; - this.element.style.right = '0px'; - this.element.style.bottom = '0px'; - this.element.style.left = '0px'; - this.element.style.width = ''; - this.element.style.height = barSize; + default: + this.options = {year: 'numeric', month: '2-digit', day: '2-digit'}; break; } } diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid index ac1b71f..b5af38e 100644 --- a/source/screens/demo/examples/ui/windows.liquid +++ b/source/screens/demo/examples/ui/windows.liquid @@ -29,9 +29,10 @@ tags: - +
+ ##:## +
+
@@ -42,6 +43,7 @@ tags: {% endblock %} {%- block script %} +