diff --git a/.jshintrc b/.jshintrc index 24ef2fe..13fcfa1 100644 --- a/.jshintrc +++ b/.jshintrc @@ -14,20 +14,20 @@ "unused": false, "browser": true, "globals": { - "HIPPIE": false, - "hippie": true, - "viewHover": true, - "basicEase": true, - "debugOn": true, - "TimeDisplay": true, "DateDisplay": true, + "HIPPIE": false, + "HippieTaskBar": true, + "TimeDisplay": true, + "basicEase": true, + "centerElementUnderCursor": false, "checkButtonAndTarget": false, + "debugOn": true, "getClosestEdgeToElement": false, "getClosestEdgeToMouse": false, - "centerElementUnderCursor": false, - "setAttributesAccordingToPosition": false, + "hippie": true, "randomIntFrom": false, + "readJsonFile": false, "replaceLineBreaks": false, - "HippieTaskBar": true + "viewHover": true } } diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index cbf1533..60eeeef 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -394,20 +394,6 @@ function centerElementUnderCursor(event, element) { element.style.top = `${y}px`; } -function setAttributesAccordingToPosition(element, position, attributes) { - 'use strict'; - - element.classList.remove(...Object.values(attributes).map(pos => pos.className)); - Object.keys(attributes[position].styles).forEach(key => { - element.style[key] = ''; - }); - - element.classList.add(attributes[position].className); - Object.entries(attributes[position].styles).forEach(([key, value]) => { - element.style[key] = value; - }); -} - /** * Gibt eine Zahl zwischen und aus. * Die Werte und sind dabei mit eingeschlossen. @@ -556,9 +542,37 @@ function zeroFill(number, width) { // Retrieved 2026-03-08, License - CC BY-SA 4.0 const delay = ms => new Promise(res => setTimeout(res, ms)); -class RandomPixelCanvas { - constructor(containerElement, options = {}) { - this.container = containerElement; +async function readJsonFile(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + + reader.readAsText(file); + reader.onload = function () { + try { + resolve(JSON.parse(reader.result)); + } catch (error) { + reject(error); + } + }; + reader.onerror = function () { + reject(reader.error); + }; + }); +} + +async function loadJson(filePath) { + try { + const response = await fetch(filePath); + + if (!response.ok) throw new Error(`Failed to load file: ${response.status}`); + + return await response.json(); + } catch (error) { + console.error('Error loading file:', error); + throw error; + } +} + class RandomPixelPlaceholder { constructor(parent, options = {}) { this.container = parent; diff --git a/source/code/windows.js b/source/code/windows.js index 01a3c7d..ca85af2 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -3,9 +3,10 @@ class HippieTaskBar { this.element = element; this.placeholder = placeholder; this.date = null; + this.time = null; this.isDragging = false; this.barSize = ''; - // TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden + // TODO: Ergänzen und nicht ersetzen this.options = options || { direction: 0, position: 'bottom', @@ -13,7 +14,8 @@ class HippieTaskBar { year: 'numeric', month: '2-digit', day: '2-digit' - } + }, + time: {hour: '2-digit', minute: '2-digit'} }; this.init(); @@ -25,11 +27,20 @@ class HippieTaskBar { document.addEventListener('pointermove', this.onMove.bind(this)); document.addEventListener('pointerup', this.onUp.bind(this)); + const clock = this.element.querySelector('.clock'); const dateElement = document.createElement('span'); + const timeElement = document.createElement('span'); + const br = document.createElement('br'); dateElement.id = 'date'; - this.element.querySelector('.clock').appendChild(dateElement); + timeElement.id = 'time'; this.date = new DateDisplay(dateElement, this.options.date); + this.time = new TimeDisplay(timeElement, this.options.time); + + // TODO: Reihenfolge anpassbar machen + clock.appendChild(timeElement); + clock.appendChild(br); + clock.appendChild(dateElement); this.setOptions(this.options.position); } @@ -111,7 +122,7 @@ class HippieTaskBar { } }; - setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes); + this.setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes); centerElementUnderCursor(event, this.placeholder); } } @@ -142,6 +153,18 @@ class HippieTaskBar { this.date.changeFormat(this.options.date, this.options.direction); } + setAttributesAccordingToPosition(element, position, attributes) { + element.classList.remove(...Object.values(attributes).map(pos => pos.className)); + Object.keys(attributes[position].styles).forEach(key => { + element.style[key] = ''; + }); + + element.classList.add(attributes[position].className); + Object.entries(attributes[position].styles).forEach(([key, value]) => { + element.style[key] = value; + }); + } + setOptions(position) { const attributes = { top: { @@ -182,7 +205,7 @@ class HippieTaskBar { } }; - setAttributesAccordingToPosition(this.element, position, attributes); + this.setAttributesAccordingToPosition(this.element, position, attributes); switch (position) { case 'right': diff --git a/source/data/windows.json b/source/data/windows.json new file mode 100644 index 0000000..565adaa --- /dev/null +++ b/source/data/windows.json @@ -0,0 +1,13 @@ +{ + "taskbar": { + "position": "top", + "color": "white", + "hover": { + "active": true, + "color": "#52bed1" + } + }, + "window": { + "name": "Custom" + } +} \ No newline at end of file diff --git a/source/view/demo/examples/ui/windows.liquid b/source/view/demo/examples/ui/windows.liquid index 15d589b..443b276 100644 --- a/source/view/demo/examples/ui/windows.liquid +++ b/source/view/demo/examples/ui/windows.liquid @@ -29,10 +29,7 @@ tags: -
- ##:## -
-
+
@@ -63,20 +60,27 @@ tags: const start = document.querySelector('[data-action=start]'); const draggableElement = document.getElementById('task-bar'); const placeholderElement = document.getElementById('placeholder'); - // TODO: TimeDisplay in HippieTaskbar aufnehmen - const timeElement = document.getElementById('time'); - const taskBar = new HippieTaskBar(draggableElement, placeholderElement); - const timeFormat = {hour: '2-digit', minute: '2-digit'}; - const timeDisplay = new TimeDisplay(timeElement, timeFormat); + initializeApp(); - document.getElementById('setPause').addEventListener('click', () => { - timeDisplay.pause(); - console.info('Pause time'); - }); - document.getElementById('setPlay').addEventListener('click', () => { - timeDisplay.resume(); - console.info('Resume time'); - }); + async function initializeApp() { + try { + const config = await loadJson('/json/windows.json'); + // TODO: Elemente in der Klasse selbst erzeugen + const taskBar = new HippieTaskBar(draggableElement, placeholderElement, config.taskbar); + + // TODO: In HippieTaskbar aufnehmen + document.getElementById('setPause').addEventListener('click', () => { + taskBar.time.pause(); + console.info('Pause time'); + }); + document.getElementById('setPlay').addEventListener('click', () => { + taskBar.time.resume(); + console.info('Resume time'); + }); + } catch (error) { + console.error('Failed to initialize app:', error); + } + } {% endblock %} \ No newline at end of file