diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 4da28e0..42605fe 100644 --- a/source/code/hippie/app.js +++ b/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 - ); -} \ No newline at end of file diff --git a/source/code/windows.js b/source/code/windows.js index 6ca9f64..71abe7e 100644 --- a/source/code/windows.js +++ b/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; - let y = event.clientY - this.offsetY; + const x = event.clientX - this.offsetX; + 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; - let y = event.clientY - this.offsetY; - - console.debug('Position: ', x, y); + const x = event.clientX - this.offsetX; + const y = event.clientY - this.offsetY; + const closestEdge = getClosestEdge(this.placeholder); 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 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);