From 6c252875fa97a114e73695925e0c8bbfcb1802a6 Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 28 Oct 2025 19:45:27 +0100 Subject: [PATCH 01/14] chore: Update jshint rules --- .jshintrc | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.jshintrc b/.jshintrc index 7554aff..f7c493b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -7,25 +7,25 @@ // Enforcing "bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.) "camelcase" : false, // true: Identifiers must be in camelCase - "curly" : true, // true: Require {} for every new block or scope + "curly" : false, // true: Require {} for every new block or scope "eqeqeq" : true, // true: Require triple equals (===) for comparison "forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty() "freeze" : true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc. "immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` - "latedef" : false, // true: Require variables/functions to be defined before being used - "newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()` + "latedef" : true, // true: Require variables/functions to be defined before being used + "newcap" : true, // true: Require capitalization of all constructor functions e.g. `new F()` "noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee` "noempty" : true, // true: Prohibit use of empty blocks "nonbsp" : true, // true: Prohibit `non-breaking whitespace` characters. "nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment) "plusplus" : false, // true: Prohibit use of `++` and `--` - "quotmark" : false, // Quotation mark consistency: + "quotmark" : true, // Quotation mark consistency: // false : do nothing (default) // true : ensure whatever is used is consistent // "single" : require single quotes // "double" : require double quotes "undef" : true, // true: Require all non-global variables to be declared (prevents global leaks) - "unused" : false, // Unused variables: + "unused" : true, // Unused variables: // true : all variables, last function parameter // "vars" : all variables only // "strict" : all variables, all function parameters From c259ead9a0d93f00960e48caae5b0e11ab0457dc Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 28 Oct 2025 19:51:59 +0100 Subject: [PATCH 02/14] feat: Replace new with start screen - Convert to liquid - Add old ongoing function for now - Add macros as partials - Rename data source to better reflect usage - Update app.js to fulfill jshint --- source/code/app.js | 27 +++++++---- source/data/{new.json => start.json} | 4 +- source/screens/demo/examples/ui/new.njk | 45 ------------------- source/screens/demo/examples/ui/start.liquid | 44 ++++++++++++++++++ .../hippie/partials/header-status.liquid | 21 +++++++++ .../hippie/partials/status-coord.liquid | 1 + .../hippie/partials/status-date.liquid | 6 +++ .../hippie/partials/status-time.liquid | 1 + 8 files changed, 94 insertions(+), 55 deletions(-) rename source/data/{new.json => start.json} (56%) delete mode 100755 source/screens/demo/examples/ui/new.njk create mode 100644 source/screens/demo/examples/ui/start.liquid create mode 100644 source/templates/hippie/partials/header-status.liquid create mode 100644 source/templates/hippie/partials/status-coord.liquid create mode 100644 source/templates/hippie/partials/status-date.liquid create mode 100644 source/templates/hippie/partials/status-time.liquid diff --git a/source/code/app.js b/source/code/app.js index 8632638..8a21b5f 100644 --- a/source/code/app.js +++ b/source/code/app.js @@ -1,25 +1,33 @@ //NEW function Clock(id) { - this.id = id; + 'use strict'; - var that = this; - setInterval(function () { that.updateClock(); }, 1000); + this.id = id; + const that = this; + + setInterval(function () { + that.updateClock(); + }, 1000); this.updateClock(); } Clock.prototype.updateClock = function () { - var date = new Date(); - var clock = document.getElementById(this.id); + 'use strict'; + + const date = new Date(); + const clock = document.getElementById(this.id); //console.log(this); - clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds()); + clock.innerHTML = this.formatDigits(date.getHours()) + ':' + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds()); }; Clock.prototype.formatDigits = function (val) { - if (val < 10) val = "0" + val; + 'use strict'; + + if (val < 10) val = '0' + val; return val; -} +}; //OLD @@ -121,6 +129,7 @@ function barwidth(size, G, W) { return newW; } + //String Element erweitern String.prototype.transform = function () { return parseFloat(this.replace(',', '.')); @@ -129,6 +138,7 @@ String.prototype.transform = function () { Array.prototype.arrayAdd = function () { return eval(this.join("+")); } + //Speicherplatz in Prozent berechnen function percentage(total, gigs, round) { var totalSpace = total; @@ -138,6 +148,7 @@ function percentage(total, gigs, round) { return p; } + //Speicherplatz in GB berechnen function gigabytes(percent, total, round) { var occupiedPercent = percent; diff --git a/source/data/new.json b/source/data/start.json similarity index 56% rename from source/data/new.json rename to source/data/start.json index 9d4a0a8..cc0da22 100644 --- a/source/data/new.json +++ b/source/data/start.json @@ -5,10 +5,10 @@ }, { "text": "Basics", - "href": "./demo/basics.html" + "href": "/demo/basics.html" }, { "text": "Drag", - "href": "./demo/examples/ui/drag.html" + "href": "/demo/examples/ui/drag.html" } ] \ No newline at end of file diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk deleted file mode 100755 index df1f62a..0000000 --- a/source/screens/demo/examples/ui/new.njk +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: New -tags: - - ui ---- -{% set pageId = page.fileSlug %} -{% set bodyClass = "body_new" %} - -{% extends "hippie/_app_frame.njk" %} -{% import "hippie/macros/_header.njk" as header %} - -{% block body %} - {{ header.status(hippie, new) }} -
- -
-
-
1
-
2
-
3
-
4
-
-{% endblock %} - -{%- block script %} - {{ super() }} - -{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/start.liquid b/source/screens/demo/examples/ui/start.liquid new file mode 100644 index 0000000..8e13c85 --- /dev/null +++ b/source/screens/demo/examples/ui/start.liquid @@ -0,0 +1,44 @@ +--- +title: Start +tags: +- ui +--- +{% assign bodyClass = "body_new" -%} +{% layout "hippie/app.liquid" %} + +{% block body %} +{% render 'hippie/partials/header-status', hippie: hippie, links: start %} +
+ +
+
+
1
+
2
+
3
+
4
+
+{% endblock %} + +{%- block script %} +{{ block.super -}} + +{% endblock %} \ No newline at end of file diff --git a/source/templates/hippie/partials/header-status.liquid b/source/templates/hippie/partials/header-status.liquid new file mode 100644 index 0000000..725e305 --- /dev/null +++ b/source/templates/hippie/partials/header-status.liquid @@ -0,0 +1,21 @@ +
+

+ {{ hippie.brand | upcase }} +

+ +
+

{% render 'hippie/partials/status-coord', id: "log" %} + / + {% render 'hippie/partials/status-date', id: "date" %} + / + {% render 'hippie/partials/status-time', id: "time" %}

+
+
diff --git a/source/templates/hippie/partials/status-coord.liquid b/source/templates/hippie/partials/status-coord.liquid new file mode 100644 index 0000000..29e592f --- /dev/null +++ b/source/templates/hippie/partials/status-coord.liquid @@ -0,0 +1 @@ +{{ text | default: 'X: #, Y: ##' }} diff --git a/source/templates/hippie/partials/status-date.liquid b/source/templates/hippie/partials/status-date.liquid new file mode 100644 index 0000000..296a866 --- /dev/null +++ b/source/templates/hippie/partials/status-date.liquid @@ -0,0 +1,6 @@ + + Wochentag, + ##. + Monat + #### + diff --git a/source/templates/hippie/partials/status-time.liquid b/source/templates/hippie/partials/status-time.liquid new file mode 100644 index 0000000..f981e80 --- /dev/null +++ b/source/templates/hippie/partials/status-time.liquid @@ -0,0 +1 @@ +{{ text | default: '00:00:00' }}{{ postfix | default: ' Uhr' }} From bac4b73c08151f09e482767edaa8a3bd7f4044e5 Mon Sep 17 00:00:00 2001 From: sthag Date: Fri, 31 Oct 2025 19:47:19 +0100 Subject: [PATCH 03/14] 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:
- +
+ ##:## +
+
@@ -42,6 +43,7 @@ tags: {% endblock %} {%- block script %} +