interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Change placeholder while dragging

Browse source 
- Move edge detection to global function
- Change placeholder style during mouse move
This commit is contained in:
sthag 2025-11-02 11:40:54 +01:00
parent 0f561d360a
commit aa5d095e64
2 changed files with 40 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

28
source/code/hippie/app.js
View file

@ -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
);
}

36
source/code/windows.js
View file

@ -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);