feat: Update DateDisplay

- formatDate now distinguishes direction
- Update task bar options with hierarchy
- Add direction to options
- Rename setPosition to setOptions

source/code/hippie/app.js

@@ -273,9 +273,10 @@ class TimeDisplay {
 }
 
 class DateDisplay {
-	constructor(element, options) {
+	constructor(element, options, direction) {
 		this.element = element;
 		this.options = options || {year: 'numeric', month: 'long', day: 'numeric'};
+		this.direction = direction || 0;
 
 		this.updateDate();
 		this.checkForDateChange();
@@ -287,17 +288,38 @@ class DateDisplay {
 	}
 
 	formatDate(date) {
-		return new Intl.DateTimeFormat(navigator.language, this.options).format(date);
+		const formatter = new Intl.DateTimeFormat(navigator.language, this.options);
+
+		switch (this.direction) {
+			case 1:
+				const dateString = formatter
+					.formatToParts(date)
+					.map(({type, value}) => {
+						// if (type === 'day' || type === 'month') {
+						if (type === 'literal') {
+							return `${value}<br>`;
+						} else {
+							return value;
+						}
+					})
+					.join('');
+
+				return dateString;
+			case 0:
+			default:
+				return formatter.format(date);
+		}
 	}
 
 	updateDate() {
 		const now = new Date();
 
-		this.element.textContent = this.formatDate(now);
+		this.element.innerHTML = this.formatDate(now);
 	}
 
-	changeFormat(format) {
+	changeFormat(format, direction) {
 		this.options = format;
+		this.direction = direction;
 
 		this.updateDate();
 	}

source/code/windows.js

@@ -137,7 +137,14 @@ class DragAdv {
 		this.isDragging = false;
 		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.options = options || {
+			direction: 0,
+			date: {
+				year: 'numeric',
+				month: '2-digit',
+				day: '2-digit'
+			}
+		};
 
 		this.init();
 	}
@@ -152,9 +159,9 @@ class DragAdv {
 
 		dateElement.id = 'date';
 		this.element.querySelector('.clock').appendChild(dateElement);
-		this.date = new DateDisplay(dateElement, this.options);
+		this.date = new DateDisplay(dateElement, this.options.date);
 
-		this.setPosition('bottom');
+		this.setOptions('bottom');
 	}
 
 	onMouseDown(event) {
@@ -228,11 +235,11 @@ class DragAdv {
 		};
 		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
-		this.setPosition(closestEdge);
+		this.setOptions(closestEdge);
-		this.date.changeFormat(this.options);
+		this.date.changeFormat(this.options.date, this.options.direction);
 	}
 
-	setPosition(position) {
+	setOptions(position) {
 		const attributes = {
 			top: {
 				className: 'top',
@@ -285,12 +292,14 @@ class DragAdv {
 		switch (position) {
 			case 'right':
 			case 'left':
-				this.options = {year: '2-digit', month: '2-digit', day: '2-digit'};
+				this.options.date = {year: '2-digit', month: '2-digit', day: '2-digit'};
+				this.options.direction = 1;
 				break;
 			case 'top':
 			case 'bottom':
 			default:
-				this.options = {year: 'numeric', month: '2-digit', day: '2-digit'};
+				this.options.date = {year: 'numeric', month: '2-digit', day: '2-digit'};
+				this.options.direction = 0;
 				break;
 		}
 	}