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

feat: More dynamic styling for placeholder

Browse source 
- Create global setAttributesAccordingToPosition
- Change style of placeholder to show snap side
This commit is contained in:
sthag 2025-11-02 12:22:08 +01:00
parent 53897754e2
commit a18b42bb2a
2 changed files with 53 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -370,6 +370,18 @@ function centerElementUnderCursor(event, element) {
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

62
source/code/windows.js
View file

@ -52,19 +52,47 @@ class HippieTaskBar {
if (!this.isDragging) return;
const closestEdge = getClosestEdge(this.placeholder);
const borderRadius = '16px';
const attributes = {
top: {
styles: {
borderTopRightRadius: '',
borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: borderRadius,
borderTopLeftRadius: '',
flexDirection: 'row'
}
},
right: {
styles: {
borderTopRightRadius: '',
borderBottomRightRadius: '',
borderBottomLeftRadius: borderRadius,
borderTopLeftRadius: borderRadius,
flexDirection: 'column'
}
},
bottom: {
styles: {
borderTopRightRadius: borderRadius,
borderBottomRightRadius: '',
borderBottomLeftRadius: '',
borderTopLeftRadius: borderRadius,
flexDirection: 'row'
}
},
left: {
styles: {
borderTopRightRadius: borderRadius,
borderBottomRightRadius: borderRadius,
borderBottomLeftRadius: '',
borderTopLeftRadius: '',
flexDirection: 'column'
}
}
};
switch (closestEdge) {
case 'right':
case 'left':
this.placeholder.style.flexDirection = 'column';
break;
case 'top':
case 'bottom':
default:
this.placeholder.style.flexDirection = 'row';
break;
}
setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
centerElementUnderCursor(event, this.placeholder);
}
}
@ -139,15 +167,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':