feat: Add overlay to HippieClock

- Add method to create overlay element
- Use DateDisplay and TimeDisplay classes
- Add button to toggle display
- Update style for header
- Add methods to handle shapes

source/screens/demo/examples/clock.liquid

@@ -8,8 +8,11 @@ tags:
 
 {% block body %}
 <header class="io pos_fix pin_top pin_right pin_left">
+	<button id="tglOverlay" title="Toggle overlay">☰</button>
+	<nav>
 		<button id="tglFormat" title="Toggle hour display">12-Stunden</button>
 		<button id="tglSections" title="Toggle sections">Abschnitte</button>
+	</nav>
 </header>
 <main></main>
 {% endblock %}
@@ -20,7 +23,6 @@ tags:
 <script src="/js/app.js"></script>
 
 <script>
-	// TODO: DateDisplay und TimeDisplay benutzen
 	class HippieClock {
 		constructor(element, date, options) {
 			this.element = element;
@@ -28,7 +30,8 @@ tags:
 			this.options = options || {
 				size: Math.floor(this.getSize().value * 0.9),
 				h24: true,
-				sections: true
+				sections: true,
+				overlay: false
 			};
 			this.parts = this.#createContext(['background', 'hands']);
 			this.shapes = [];
@@ -169,6 +172,7 @@ tags:
 			return number * Math.min(this.parts[0].element.width, this.parts[0].element.height);
 		}
 
+		// TODO: DateDisplay und TimeDisplay benutzen
 		// TODO: Parameter für Wochenstart ergänzen
 		getWeekday(date) {
 			const weekday = date.getDay(); // 0 (Sunday) to 6 (Saturday)
@@ -315,6 +319,56 @@ tags:
 			return parts;
 		}
 
+		createOverlay() {
+			const overlay = document.createElement('div');
+			const text = document.createElement('p');
+			const timeElement = document.createElement('span');
+			const dateElement = document.createElement('span');
+
+			new DateDisplay(dateElement);
+			new TimeDisplay(timeElement);
+
+			Object.assign(overlay.style, {
+				zIndex: 5,
+				position: 'absolute',
+				top: '0px',
+				left: '0px',
+				height: '100%',
+				width: '100%',
+				// display: this.options.overlay ? 'flex' : 'none',
+				justifyContent: 'center',
+				alignItems: 'center',
+				backgroundColor: `rgba(0, 0, 0, .6)`,
+				color: 'white'
+			});
+			overlay.dataset.part = 'overlay';
+
+			text.appendChild(timeElement);
+			text.insertAdjacentText('beforeend', ' ');
+			text.appendChild(dateElement);
+			overlay.appendChild(text);
+			this.element.appendChild(overlay);
+			this.parts.push({name: 'overlay', element: overlay});
+		}
+
+		removeOverlay() {
+			const index = this.parts.findIndex(s => s.name === 'overlay');
+
+			if (index !== -1) {
+				this.parts[index].element.remove();
+				this.parts.splice(index, 1);
+				this.draw();
+
+				return true;
+			}
+
+			return false;
+		}
+
+		updateOptions(changes) {
+			this.options = {...this.options, ...changes};
+		}
+
 		updateShape(id, angle, max) {
 			const shape = this.shapes.find(s => s.id === id);
 
@@ -324,8 +378,30 @@ tags:
 			}
 		}
 
-		updateOptions(changes) {
+		removeShape(id) {
-			this.options = {...this.options, ...changes};
+			const index = this.shapes.findIndex(s => s.id === id);
+
+			if (index !== -1) {
+				this.shapes.splice(index, 1);
+				this.draw();
+
+				return true;
+			}
+
+			return false;
+		}
+
+		clearShapes() {
+			this.shapes = [];
+			this.draw();
+		}
+
+		findShape(id) {
+			return this.shapes.some(s => s.id === id);
+		}
+
+		getShape(id) {
+			return this.shapes.find(s => s.id === id);
 		}
 
 		addCircle(id, center, radius, color = `rgba(0, 0, 0, .1)`) {
@@ -369,5 +445,15 @@ tags:
 			console.log('No clock available');
 		}
 	});
+
+	document.getElementById('tglOverlay').addEventListener('click', () => {
+		if (clock) {
+			// TODO: Anzeigen und ausblenden, anstatt löschen und hinzufügen?
+			clock.options.overlay ? clock.removeOverlay() : clock.createOverlay();
+			clock.updateOptions({overlay: !clock.options.overlay});
+		} else {
+			console.log('No clock available');
+		}
+	});
 </script>
 {% endblock %}

source/style/modules/_clock.scss

@@ -1,6 +1,12 @@
 @use "../hippie-style/hippie";
 
+@use "sass:map";
+
 .body_clock {
+	header {
+		z-index: map.get(hippie.$z-indexes, "content-top");
+	}
+
 	main {
 		display: flex;
 		flex-flow: column nowrap;