feat: Integrate date in task bar

- Date format can now be changed dynamically
- Date element is now created in task bar class
- Class can accept options, currently only for date
- Date format is changed according to position
- Changed dom structure for clock
- Refactor setPosition method to be more flexible
- Changed flex style for task bar items to inherit the direction

source/code/hippie/app.js

@@ -296,6 +296,12 @@ class DateDisplay {
 		this.element.textContent = this.formatDate(now);
 	}
 
+	changeFormat(format) {
+		this.options = format;
+
+		this.updateDate();
+	}
+
 	getTimeUntilNextMidnight() {
 		const now = new Date();
 		const nextMidnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);

source/code/windows.js

@@ -128,13 +128,16 @@ class Draggable {
 }
 
 class DragAdv {
-	constructor(element, placeholder) {
+	constructor(element, placeholder, options) {
 		this.element = element;
 		this.placeholder = placeholder;
+		this.date = null;
 		this.offsetX = 0;
 		this.offsetY = 0;
 		this.isDragging = false;
-		this.barSize = '';
+		this.barSize = '64px';
+		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
+		this.options = options || {year: 'numeric', month: '2-digit', day: '2-digit'};
 
 		this.init();
 	}
@@ -144,7 +147,14 @@ class DragAdv {
 		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', this.barSize);
+
+		const dateElement = document.createElement('span');
+
+		dateElement.id = 'date';
+		this.element.querySelector('.clock').appendChild(dateElement);
+		this.date = new DateDisplay(dateElement, this.options);
+
+		this.setPosition('bottom');
 	}
 
 	onMouseDown(event) {
@@ -218,49 +228,69 @@ class DragAdv {
 		};
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
-		this.setPosition(closestEdge, this.barSize);
+		this.setPosition(closestEdge);
+		this.date.changeFormat(this.options);
 	}
 
-	setPosition(side, barSize) {
+	setPosition(position) {
-		switch (side) {
+		const attributes = {
-			case 'left':
+			top: {
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
+				className: 'top',
-				this.element.style.top = '0px';
+				styles: {
-				this.element.style.right = '';
+					top: '0', right: '0', bottom: '', left: '0',
-				this.element.style.bottom = '0px';
+					width: '', height: this.barSize,
-				this.element.style.left = '0px';
+					flexDirection: 'row'
-				this.element.style.width = barSize;
+				}
-				this.element.style.height = '';
+			},
-				break;
+			right: {
+				className: 'right',
+				styles: {
+					top: '0', right: '0', bottom: '0', left: '',
+					width: this.barSize, height: '',
+					flexDirection: 'column'
+				}
+			},
+			bottom: {
+				className: 'bottom',
+				styles: {
+					top: '', right: '0', bottom: '0', left: '0',
+					width: '', height: this.barSize,
+					flexDirection: 'row'
+				}
+			},
+			left: {
+				className: 'left',
+				styles: {
+					top: '0',
+					right: '',
+					bottom: '0',
+					left: '0',
+					width: this.barSize,
+					height: '',
+					flexDirection: 'column'
+				}
+			}
+		};
+
+		this.element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+		Object.keys(attributes[position].styles).forEach(key => {
+			this.element.style[key] = '';
+		});
+
+		this.element.classList.add(attributes[position].className);
+		Object.entries(attributes[position].styles).forEach(([key, value]) => {
+			this.element.style[key] = value;
+		});
+
+		switch (position) {
 			case 'right':
-				// this.element.style.left = `${windowWidth - rect.width}px`;
+			case 'left':
-				// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
+				this.options = {year: '2-digit', month: '2-digit', day: '2-digit'};
-				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`;
+			default:
-				// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
+				this.options = {year: 'numeric', month: '2-digit', day: '2-digit'};
-				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;
 		}
 	}

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

@@ -29,9 +29,10 @@ tags:
 			<button><i class="bi bi-mic"></i></button>
 			<button><i class="bi bi-volume-down"></i></button>
 		</nav>
-		<nav class="clock">
+		<div class="clock">
-			<span><span id="time">##:##</span><br><span id="date">TT.MM.JJJJ</span></span>
+			<span id="time">##:##</span>
-		</nav>
+			<br>
+		</div>
 		<nav>
 			<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
 		</nav>
@@ -42,6 +43,7 @@ tags:
 {% endblock %}
 
 {%- block script %}
+<script src="{{ pageBase }}js/globals.js"></script>
 <script src="{{ pageBase }}js/app.js"></script>
 <script src="{{ pageBase }}js/windows.js"></script>
 <script>
@@ -59,10 +61,6 @@ tags:
 	const timeElement = document.getElementById('time');
 	const timeFormat = {hour: '2-digit', minute: '2-digit'};
 	const timeDisplay = new TimeDisplay(timeElement, timeFormat);
-	const dateElement = document.getElementById('date');
-	const dateFormat = {year: 'numeric', month: '2-digit', day: '2-digit'}
-	const dateDisplay = new DateDisplay(dateElement, dateFormat);
-
 
 	document.getElementById('pauseButton').addEventListener('click', () => {
 		timeDisplay.pause();

source/style/modules/ui/_windows_module.scss

@@ -25,13 +25,45 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	padding: hippie.$space_basic;
 	background-color: rgba(0, 0, 0, .1);
 
+	&.top,
+	&.bottom {
+		nav,
+		& > div {
+			&:last-child {
+				margin-top: unset;
+				margin-left: auto;
+			}
+		}
+
+		.clock {
+			text-align: end;
+		}
+	}
+
+	&.right,
+	&.left {
+		nav,
+		& > div {
+			&:last-child {
+				margin-top: auto;
+				margin-left: unset;
+			}
+		}
+
+		.clock {
+			text-align: center;
+
+			& > span {
+				display: inline-block;
+				word-wrap: anywhere;
+			}
+		}
+	}
+
 	nav,
 	& > div {
 		@extend %flex-bar;
-
+		flex-direction: inherit;
-		&:last-child {
-			margin-left: auto;
-		}
 	}
 
 	button {
@@ -70,8 +102,6 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	}
 
 	.clock {
-		text-align: end;
-
 		&,
 		& > * {
 			line-height: 1;