diff --git a/.jshintrc b/.jshintrc
index e11b79d..cfc5480 100644
--- a/.jshintrc
+++ b/.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
}
}
diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js
index 4da28e0..ed0f66d 100644
--- a/source/code/hippie/app.js
+++ b/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
- );
-}
\ No newline at end of file
diff --git a/source/code/windows.js b/source/code/windows.js
index 6ca9f64..c7ab166 100644
--- a/source/code/windows.js
+++ b/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':
diff --git a/source/screens/demo/examples/ui/windows.liquid b/source/screens/demo/examples/ui/windows.liquid
index a0603e6..af1dbeb 100644
--- a/source/screens/demo/examples/ui/windows.liquid
+++ b/source/screens/demo/examples/ui/windows.liquid
@@ -39,7 +39,14 @@ tags:
-
+
{% endblock %}
{%- block script %}
diff --git a/source/style/modules/ui/_windows_module.scss b/source/style/modules/ui/_windows_module.scss
index d633b29..98475c4 100644
--- a/source/style/modules/ui/_windows_module.scss
+++ b/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;
+ }
}
\ No newline at end of file