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/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 %}