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

@@ -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
+	);
+}

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;