feat: Change edge detection for HippieTaskBar

- Add position to options
- New function for edge detection according to mouse position
- set and use options.position

.jshintrc

@@ -95,7 +95,8 @@
 		"TimeDisplay": true,
 		"DateDisplay": true,
 		"checkButtonAndTarget": true,
-		"getClosestEdge": true,
+		"getClosestEdgeToElement": true,
+		"getClosestEdgeToMouse": true,
 		"centerElementUnderCursor": true,
 		"setAttributesAccordingToPosition": true,
 		"HippieTaskBar": true

source/code/hippie/app.js

@@ -346,20 +346,37 @@ function checkButtonAndTarget(event, element, button = 0) {
 	);
 }
 
-function getClosestEdge(element) {
+function getClosestEdgeToElement(element) {
+	'use strict';
+
 	const rect = element.getBoundingClientRect();
-	const windowWidth = window.innerWidth;
-	const windowHeight = window.innerHeight;
 	const distances = {
 		top: rect.top,
-		right: windowWidth - rect.right,
+		right: window.innerWidth - rect.right,
-		bottom: windowHeight - rect.bottom,
+		bottom: window.innerHeight - rect.bottom,
 		left: rect.left
 	};
 
 	return Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
 }
 
+function getClosestEdgeToMouse(event) {
+	'use strict';
+
+	const mouseX = event.clientX;
+	const mouseY = event.clientY;
+	const distances = {
+		left: mouseX,
+		right: window.innerWidth - mouseX,
+		top: mouseY,
+		bottom: window.innerHeight - mouseY
+	};
+
+	return Object.keys(distances).reduce((a, b) =>
+		distances[a] < distances[b] ? a : b
+	);
+}
+
 function centerElementUnderCursor(event, element) {
 	const offsetX = element.getBoundingClientRect().width / 2;
 	const offsetY = element.getBoundingClientRect().height / 2;

source/code/windows.js

@@ -8,6 +8,7 @@ class HippieTaskBar {
 		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
 		this.options = options || {
 			direction: 0,
+			position: 'bottom',
 			date: {
 				year: 'numeric',
 				month: '2-digit',
@@ -30,7 +31,7 @@ class HippieTaskBar {
 		this.element.querySelector('.clock').appendChild(dateElement);
 		this.date = new DateDisplay(dateElement, this.options.date);
 
-		this.setOptions('bottom');
+		this.setOptions(this.options.position);
 	}
 
 	onMouseDown(event) {
@@ -49,7 +50,7 @@ class HippieTaskBar {
 
 	onMouseMove(event) {
 		if (this.isDragging) {
-			const closestEdge = getClosestEdge(this.placeholder);
+			this.options.position = getClosestEdgeToMouse(event);
 			const borderRadius = '4px';
 			const attributes = {
 				top: {
@@ -110,7 +111,7 @@ class HippieTaskBar {
 				}
 			};
 
-			setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
+			setAttributesAccordingToPosition(this.placeholder, this.options.position, attributes);
 			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
@@ -136,11 +137,8 @@ class HippieTaskBar {
 		this.element.style.display = '';
 	}
 
-	// TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen
 	snapToEdges() {
-		const closestEdge = getClosestEdge(this.placeholder);
+		this.setOptions(this.options.position);
-
-		this.setOptions(closestEdge);
 		this.date.changeFormat(this.options.date, this.options.direction);
 	}