.jshintrc

@@ -91,13 +91,6 @@
       "debugOn": true,
       "hippie": true,
       "viewHover": true,
-		"basicEase": true,
+      "basicEase": true
-		"TimeDisplay": true,
-		"DateDisplay": true,
-		"checkButtonAndTarget": true,
-		"getClosestEdge": true,
-		"centerElementUnderCursor": true,
-		"setAttributesAccordingToPosition": true,
-		"HippieTaskBar": true
     }
 }

source/code/hippie/app.js

@@ -339,49 +339,6 @@ 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
@@ -567,3 +524,10 @@ 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,8 +3,10 @@ class HippieTaskBar {
 		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 || {
 			direction: 0,
@@ -39,9 +41,17 @@ class HippieTaskBar {
 
 			this.isDragging = true;
 
+			// TODO: Platzhalter anpassen je nach Ziel
 			this.showPlaceholder();
 
-			centerElementUnderCursor(event, this.placeholder);
+			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`;
 		}
 
 		event.preventDefault();
@@ -51,69 +61,13 @@ class HippieTaskBar {
 		if (this.isDragging) {
 			if (!this.isDragging) return;
 
-			const closestEdge = getClosestEdge(this.placeholder);
+			let x = event.clientX - this.offsetX;
-			const borderRadius = '4px';
+			let y = event.clientY - this.offsetY;
-			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: ''
-					}
-				}
-			};
 
-			setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
+			console.debug('Position: ', x, y);
-			centerElementUnderCursor(event, this.placeholder);
+
+			this.placeholder.style.left = `${x}px`;
+			this.placeholder.style.top = `${y}px`;
 		}
 	}
 
@@ -131,7 +85,7 @@ class HippieTaskBar {
 
 	showPlaceholder() {
 		this.element.style.display = 'none';
-		this.placeholder.style.display = 'flex';
+		this.placeholder.style.display = 'block';
 	}
 
 	hidePlaceholder() {
@@ -141,7 +95,16 @@ class HippieTaskBar {
 
 	// TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen
 	snapToEdges() {
-		const closestEdge = getClosestEdge(this.placeholder);
+		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);
 
 		this.setOptions(closestEdge);
 		this.date.changeFormat(this.options.date, this.options.direction);
@@ -187,7 +150,15 @@ class HippieTaskBar {
 			}
 		};
 
-		setAttributesAccordingToPosition(this.element, position, attributes);
+		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':

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

@@ -39,14 +39,7 @@ tags:
 	</div>
 </div>
 <div id="screen-space"></div>
-<div id="placeholder">
+<div id="placeholder"></div>
-	<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,7 +8,8 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	align-items: center;
+	align-items: stretch;
+	align-content: center;
 	justify-content: flex-start;
 	gap: hippie.$space_half hippie.$space_basic;
 }
@@ -114,51 +115,11 @@ $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
 }
 
 #placeholder {
-	@extend %flex-bar;
 	display: none;
-	z-index: map.get(hippie.$z-indexes, "toast");
+	z-index: map.get(hippie.$z-indexes, "content-top");
 	position: fixed;
-	border: 1px dashed black;
+	width: 100px;
-	border-radius: 2px;
+	height: 100px;
-	background-color: rgba(0, 0, 0, .4);
+	border: 2px dashed deeppink;
-	padding: 16px;
+	background-color: hotpink;
-
-	&.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;
-	}
 }