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 x = event.clientX - this.offsetX;
-		let y = event.clientY - this.offsetY;
+			let y = event.clientY - this.offsetY;
 
-		this.placeholder.style.left = `${x}px`;
+			console.debug('Position: ', x, y);
-		this.placeholder.style.top = `${y}px`;
+
+			this.placeholder.style.left = `${x}px`;
+			this.placeholder.style.top = `${y}px`;
+		}
 	}
 
 	onMouseUp() {
-		if (!this.isDragging) return;
+		if (event.target === this.placeholder) {
-		this.isDragging = false;
+			console.debug('Drag mode disabled');
 
-		this.snapToEdges();
+			if (!this.isDragging) return;
-		this.hidePlaceholder();
+			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;

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

@@ -18,6 +18,8 @@ tags:
 	<nav class="big">
 		<button><i class="bi bi-folder"></i></button>
 		<button><i class="bi bi-terminal"></i></button>
+		<button id="pauseButton"><i class="bi bi-pause"></i></button>
+		<button id="resumeButton"><i class="bi bi-play"></i></button>
 	</nav>
 	<div>
 		<nav class="small">
@@ -28,7 +30,7 @@ tags:
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
 		<nav class="clock">
-			<span>##:##<br>TT.MM.JJJJ</span>
+			<span><span id="time">##:##</span><br>TT.MM.JJJJ</span>
 		</nav>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
@@ -40,6 +42,7 @@ tags:
 {% endblock %}
 
 {%- block script %}
+<script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/windows.js"></script>
 <script>
 	// Get the space element
@@ -51,5 +54,20 @@ tags:
 	// 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 timeDisplay = new TimeDisplay(timeElement, 'HH:mm:ss', 1000);
+
+	document.getElementById('pauseButton').addEventListener('click', () => {
+		timeDisplay.pause();
+		console.info('Pause time');
+	});
+
+	document.getElementById('resumeButton').addEventListener('click', () => {
+		timeDisplay.resume();
+		console.info('Resume time');
+	});
+
 </script>
 {% endblock %}

source/style/modules/ui/_windows_module.scss

@@ -37,6 +37,10 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	button {
 		@extend .button_io;
 		overflow: hidden;
+
+		* {
+			pointer-events: none;
+		}
 	}
 
 	nav.small {