refactor: Move stuff around and rename

- DragAdv is now HippieTaskBar
- Remove previous version
- Move unused stuff
- Replace Clock with TimeDisplay

source/code/hippie/app.js

@@ -195,7 +195,7 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 
 			el.innerHTML = elContent + text;
 			el.setAttribute("href", "mailto:" + mailString + topic);
-		};
+		}
 	}
 }
 
@@ -230,8 +230,6 @@ function composeMail(tag, name, prov, suffix, text, topic) {
 //
 // var Utils = new Utils();
 
-// NEWER
-
 class TimeDisplay {
 	constructor(element, options, interval) {
 		this.element = element;
@@ -341,7 +339,34 @@ class DateDisplay {
 	}
 }
 
-//NEW
+// CONCEPTS
+
+// NOTE: Benutzt private Zuweisungen
+class elementBinder {
+	#element;
+
+	constructor(element) {
+		this.#setElement(element);
+	}
+
+	#setElement(value) {
+		if (!value) {
+			throw new Error('No element found');
+		}
+		this.#element = value;
+		this.#element.style.background = "hotpink";
+	}
+
+	get element() {
+		return this.#element;
+	}
+
+	set element(value) {
+		this.#setElement(value);
+	}
+}
+
+//OLD
 
 function Clock(id) {
 	'use strict';
@@ -372,8 +397,6 @@ Clock.prototype.formatDigits = function (val) {
 	return val;
 };
 
-//OLD
-
 var floor = Math.floor;
 
 function ongoing() {

source/code/windows.js

@@ -1,133 +1,4 @@
-class Draggable {
+class HippieTaskBar {
-	constructor(element) {
-		this.element = element;
-		this.offsetX = 0;
-		this.offsetY = 0;
-		this.isDragging = false;
-		this.barSize = '';
-
-		this.init();
-	}
-
-	init() {
-		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');
-	}
-
-	onMouseDown(event) {
-		this.isDragging = true;
-		this.offsetX = event.clientX - this.element.getBoundingClientRect().left;
-		this.offsetY = event.clientY - this.element.getBoundingClientRect().top;
-
-		event.preventDefault();
-	}
-
-	onMouseMove(event) {
-		if (!this.isDragging) {
-			return;
-		}
-
-		let x = event.clientX - this.offsetX;
-		let y = event.clientY - this.offsetY;
-
-		// Update the position of the element
-		this.element.style.left = `${x}px`;
-		this.element.style.top = `${y}px`;
-	}
-
-	onMouseUp() {
-		if (!this.isDragging) {
-			return;
-		}
-		this.isDragging = false;
-
-		this.snapToEdges();
-	}
-
-	snapToEdges() {
-		const rect = this.element.getBoundingClientRect();
-		const windowWidth = window.innerWidth;
-		const windowHeight = window.innerHeight;
-
-		// Determine the closest edge
-		const distances = {
-			left: rect.left,
-			right: windowWidth - rect.right,
-			top: rect.top,
-			bottom: windowHeight - rect.bottom
-		};
-
-		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
-
-		/*switch (closestEdge) {
-			case 'left':
-				this.element.style.left = '0px';
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'right':
-				this.element.style.left = `${windowWidth - rect.width}px`;
-				this.element.style.top = `${rect.top}px`;
-				break;
-			case 'top':
-				this.element.style.top = '0px';
-				this.element.style.left = `${rect.left}px`;
-				break;
-			case 'bottom':
-				this.element.style.top = `${windowHeight - rect.height}px`;
-				this.element.style.left = `${rect.left}px`;
-				break;
-		}*/
-		this.setPosition(closestEdge, this.barSize);
-	}
-
-	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;
-			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 = '';
-				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;
-				break;
-		}
-	}
-}
-
-class DragAdv {
 	constructor(element, placeholder, options) {
 		this.element = element;
 		this.placeholder = placeholder;
@@ -304,27 +175,3 @@ class DragAdv {
 		}
 	}
 }
-
-class BestDrag {
-	#element;
-
-	constructor(element) {
-		this.#setElement(element);
-	}
-
-	#setElement(value) {
-		if (!value) {
-			throw new Error('No element found');
-		}
-		this.#element = value;
-		this.#element.style.background = "hotpink";
-	}
-
-	get element() {
-		return this.#element;
-	}
-
-	set element(value) {
-		this.#setElement(value);
-	}
-}

source/screens/demo/examples/ui/start.liquid

@@ -31,7 +31,8 @@ tags:
 {%- block script %}
 {{ block.super -}}
 <script>
-	let clock = new Clock('time');
+	const timeElement = document.getElementById('time');
+	const timeDisplay = new TimeDisplay(timeElement);
 
 	ongoing();
 

source/screens/demo/examples/ui/windows.liquid

@@ -52,13 +52,9 @@ tags:
 	const start = document.querySelector('[data-action=start]');
 	const draggableElement = document.getElementById('task-bar');
 	const placeholderElement = document.getElementById('placeholder');
-
-	// const draggable = new Draggable(draggableElement);
-	const dragMore = new DragAdv(draggableElement, placeholderElement);
-	// const dragBest = new BestDrag(draggableElement, placeholderElement);
-
-	// let clock = new Clock('time');
 	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);