feat: Change placeholder while dragging

- Move edge detection to global function
- Change placeholder style during mouse move

source/code/hippie/app.js

@@ -339,6 +339,27 @@ class DateDisplay {
 	}
 }
 
+function checkButtonAndTarget(event, element, button = 0) {
+	return (
+		event.button === button &&
+		event.target === element
+	);
+}
+
+function getClosestEdge(element) {
+	const rect = element.getBoundingClientRect();
+	const windowWidth = window.innerWidth;
+	const windowHeight = window.innerHeight;
+	const distances = {
+		top: rect.top,
+		right: windowWidth - rect.right,
+		bottom: windowHeight - rect.bottom,
+		left: rect.left
+	};
+
+	return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
@@ -524,10 +545,3 @@ function gigabytes(percent, total, round) {
 
 	return g;
 }
-
-function checkButtonAndTarget(event, element, button = 0) {
-	return (
-		event.button === button &&
-		event.target === element
-	);
-}

source/code/windows.js

@@ -47,8 +47,8 @@ class HippieTaskBar {
 			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
 			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
 
-			let x = event.clientX - this.offsetX;
+			const x = event.clientX - this.offsetX;
-			let y = event.clientY - this.offsetY;
+			const y = event.clientY - this.offsetY;
 
 			this.placeholder.style.left = `${x}px`;
 			this.placeholder.style.top = `${y}px`;
@@ -61,13 +61,24 @@ class HippieTaskBar {
 		if (this.isDragging) {
 			if (!this.isDragging) return;
 
-			let x = event.clientX - this.offsetX;
+			const x = event.clientX - this.offsetX;
-			let y = event.clientY - this.offsetY;
+			const y = event.clientY - this.offsetY;
-
+			const closestEdge = getClosestEdge(this.placeholder);
-			console.debug('Position: ', x, y);
 
 			this.placeholder.style.left = `${x}px`;
 			this.placeholder.style.top = `${y}px`;
+
+			switch (closestEdge) {
+				case 'right':
+				case 'left':
+					this.placeholder.style.flexDirection = 'column';
+					break;
+				case 'top':
+				case 'bottom':
+				default:
+					this.placeholder.style.flexDirection = 'row';
+					break;
+			}
 		}
 	}
 
@@ -85,7 +96,7 @@ class HippieTaskBar {
 
 	showPlaceholder() {
 		this.element.style.display = 'none';
-		this.placeholder.style.display = 'block';
+		this.placeholder.style.display = 'flex';
 	}
 
 	hidePlaceholder() {
@@ -95,16 +106,7 @@ class HippieTaskBar {
 
 	// TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen
 	snapToEdges() {
-		const rect = this.placeholder.getBoundingClientRect();
+		const closestEdge = getClosestEdge(this.placeholder);
-		const windowWidth = window.innerWidth;
-		const windowHeight = window.innerHeight;
-		const distances = {
-			top: rect.top,
-			right: windowWidth - rect.right,
-			bottom: windowHeight - rect.bottom,
-			left: rect.left
-		};
-		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 
 		this.setOptions(closestEdge);
 		this.date.changeFormat(this.options.date, this.options.direction);