feat: More styling for placeholder

- Create global setAttributesAccordingToPosition
- Change style of placeholder to show snap side

.jshintrc

@@ -88,9 +88,16 @@
 
     // Custom globals
     "globals" : {               // additional predefined global variables
-      "debugOn": true,
-      "hippie": true,
-      "viewHover": true,
-      "basicEase": true
+		"debugOn": true,
+		"hippie": true,
+		"viewHover": true,
+		"basicEase": true,
+		"TimeDisplay": true,
+		"DateDisplay": true,
+		"checkButtonAndTarget": true,
+		"getClosestEdge": true,
+		"centerElementUnderCursor": true,
+		"setAttributesAccordingToPosition": true,
+		"HippieTaskBar": true
     }
 }

source/code/hippie/app.js

@@ -339,6 +339,49 @@ 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);
+}
+
+function centerElementUnderCursor(event, element) {
+	const offsetX = element.getBoundingClientRect().width / 2;
+	const offsetY = element.getBoundingClientRect().height / 2;
+	const x = event.clientX - offsetX;
+	const y = event.clientY - offsetY;
+
+	element.style.left = `${x}px`;
+	element.style.top = `${y}px`;
+}
+
+function setAttributesAccordingToPosition(element, position, attributes) {
+	element.classList.remove(...Object.values(attributes).map(pos => pos.className));
+	Object.keys(attributes[position].styles).forEach(key => {
+		element.style[key] = '';
+	});
+
+	element.classList.add(attributes[position].className);
+	Object.entries(attributes[position].styles).forEach(([key, value]) => {
+		element.style[key] = value;
+	});
+}
+
 // CONCEPTS
 
 // NOTE: Benutzt private Zuweisungen
@@ -524,10 +567,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

@@ -3,10 +3,8 @@ class HippieTaskBar {
 		this.element = element;
 		this.placeholder = placeholder;
 		this.date = null;
-		this.offsetX = 0;
-		this.offsetY = 0;
 		this.isDragging = false;
-		this.barSize = '64px';
+		this.barSize = '';
 		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
 		this.options = options || {
 			direction: 0,
@@ -41,17 +39,9 @@ class HippieTaskBar {
 
 			this.isDragging = true;
 
-			// TODO: Platzhalter anpassen je nach Ziel
 			this.showPlaceholder();
 
-			this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
-			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;
-
-			let x = event.clientX - this.offsetX;
-			let y = event.clientY - this.offsetY;
-
-			this.placeholder.style.left = `${x}px`;
-			this.placeholder.style.top = `${y}px`;
+			centerElementUnderCursor(event, this.placeholder);
 		}
 
 		event.preventDefault();
@@ -61,13 +51,69 @@ class HippieTaskBar {
 		if (this.isDragging) {
 			if (!this.isDragging) return;
 
-			let x = event.clientX - this.offsetX;
-			let y = event.clientY - this.offsetY;
+			const closestEdge = getClosestEdge(this.placeholder);
+			const borderRadius = '4px';
+			const attributes = {
+				top: {
+					className: 'top',
+					styles: {
+						flexDirection: 'row',
+						borderStyle: '',
+						borderColor: '',
+						borderTopStyle: 'solid',
+						borderTopColor: 'white',
+						borderTopRightRadius: '',
+						borderBottomRightRadius: borderRadius,
+						borderBottomLeftRadius: borderRadius,
+						borderTopLeftRadius: ''
+					}
+				},
+				right: {
+					className: 'right',
+					styles: {
+						flexDirection: 'column',
+						borderStyle: '',
+						borderColor: '',
+						borderRightStyle: 'solid',
+						borderRightColor: 'white',
+						borderTopRightRadius: '',
+						borderBottomRightRadius: '',
+						borderBottomLeftRadius: borderRadius,
+						borderTopLeftRadius: borderRadius
+					}
+				},
+				bottom: {
+					className: 'bottom',
+					styles: {
+						flexDirection: 'row',
+						borderStyle: '',
+						borderColor: '',
+						borderBottomStyle: 'solid',
+						borderBottomColor: 'white',
+						borderTopRightRadius: borderRadius,
+						borderBottomRightRadius: '',
+						borderBottomLeftRadius: '',
+						borderTopLeftRadius: borderRadius
+					}
+				},
+				left: {
+					className: 'left',
+					styles: {
+						flexDirection: 'column',
+						borderStyle: '',
+						borderColor: '',
+						borderLeftStyle: 'solid',
+						borderLeftColor: 'white',
+						borderTopRightRadius: borderRadius,
+						borderBottomRightRadius: borderRadius,
+						borderBottomLeftRadius: '',
+						borderTopLeftRadius: ''
+					}
+				}
+			};
 
-			console.debug('Position: ', x, y);
-
-			this.placeholder.style.left = `${x}px`;
-			this.placeholder.style.top = `${y}px`;
+			setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
+			centerElementUnderCursor(event, this.placeholder);
 		}
 	}
 
@@ -85,7 +131,7 @@ class HippieTaskBar {
 
 	showPlaceholder() {
 		this.element.style.display = 'none';
-		this.placeholder.style.display = 'block';
+		this.placeholder.style.display = 'flex';
 	}
 
 	hidePlaceholder() {
@@ -95,16 +141,7 @@ class HippieTaskBar {
 
 	// TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen
 	snapToEdges() {
-		const rect = this.placeholder.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
-		};
-		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
+		const closestEdge = getClosestEdge(this.placeholder);
 
 		this.setOptions(closestEdge);
 		this.date.changeFormat(this.options.date, this.options.direction);
@@ -150,15 +187,7 @@ class HippieTaskBar {
 			}
 		};
 
-		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;
-		});
+		setAttributesAccordingToPosition(this.element, position, attributes);
 
 		switch (position) {
 			case 'right':

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

@@ -39,7 +39,14 @@ tags:
 	</div>
 </div>
 <div id="screen-space"></div>
-<div id="placeholder"></div>
+<div id="placeholder">
+	<div class="box"></div>
+	<div class="box_brd"></div>
+	<div>
+		<span>task bar</span>
+		<div class="box_brd"></div>
+	</div>
+</div>
 {% endblock %}
 
 {%- block script %}

source/style/modules/ui/_windows_module.scss

@@ -8,8 +8,7 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	align-items: stretch;
-	align-content: center;
+	align-items: center;
 	justify-content: flex-start;
 	gap: hippie.$space_half hippie.$space_basic;
 }
@@ -115,11 +114,51 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 }
 
 #placeholder {
+	@extend %flex-bar;
 	display: none;
-	z-index: map.get(hippie.$z-indexes, "content-top");
+	z-index: map.get(hippie.$z-indexes, "toast");
 	position: fixed;
-	width: 100px;
-	height: 100px;
-	border: 2px dashed deeppink;
-	background-color: hotpink;
+	border: 1px dashed black;
+	border-radius: 2px;
+	background-color: rgba(0, 0, 0, .4);
+	padding: 16px;
+
+	&.top,
+	&.bottom {
+		span {
+			writing-mode: unset;
+		}
+	}
+
+	&.right,
+	&.left {
+		span {
+			writing-mode: vertical-rl;
+		}
+	}
+
+	* {
+		pointer-events: none;
+	}
+
+	& > div {
+		@extend %flex-bar;
+		flex-direction: inherit;
+		flex-wrap: nowrap;
+	}
+
+	.box,
+	.box_brd {
+		width: 16px;
+		height: 16px;
+	}
+
+	.box {
+		background-color: black;
+	}
+
+	.box_brd {
+		border: 2px solid black;
+		background-color: transparent;
+	}
 }