diff --git a/.jshintrc b/.jshintrc index cfc5480..98b8bf3 100644 --- a/.jshintrc +++ b/.jshintrc @@ -95,7 +95,8 @@ "TimeDisplay": true, "DateDisplay": true, "checkButtonAndTarget": true, - "getClosestEdge": true, + "getClosestEdgeToElement": true, + "getClosestEdgeToMouse": true, "centerElementUnderCursor": true, "setAttributesAccordingToPosition": true, "HippieTaskBar": true diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 05b09b3..c93aa7a 100644 --- a/source/code/hippie/app.js +++ b/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, - bottom: windowHeight - rect.bottom, + right: window.innerWidth - rect.right, + 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; diff --git a/source/code/windows.js b/source/code/windows.js index 32a3484..8a115a9 100644 --- a/source/code/windows.js +++ b/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(closestEdge); + this.setOptions(this.options.position); this.date.changeFormat(this.options.date, this.options.direction); }