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

feat: Integrate date in task bar

Browse source 
- Date format can now be changed dynamically
- Date element is now created in task bar class
- Class can accept options, currently only for date
- Date format is changed according to position
- Changed dom structure for clock
- Refactor setPosition method to be more flexible
- Changed flex style for task bar items to inherit the direction
This commit is contained in:
sthag 2025-11-02 09:26:19 +01:00
parent abf393191c
commit 20b43b8d35
4 changed files with 117 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

110
source/code/windows.js
View file

@ -128,13 +128,16 @@ class Draggable {
}
class DragAdv {
constructor(element, placeholder) {
constructor(element, placeholder, options) {
this.element = element;
this.placeholder = placeholder;
this.date = null;
this.offsetX = 0;
this.offsetY = 0;
this.isDragging = false;
this.barSize = '';
this.barSize = '64px';
// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
this.options = options || {year: 'numeric', month: '2-digit', day: '2-digit'};
this.init();
}
@ -144,7 +147,14 @@ class DragAdv {
this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
document.addEventListener('mousemove', this.onMouseMove.bind(this));
document.addEventListener('mouseup', this.onMouseUp.bind(this));
this.setPosition('bottom', this.barSize);
const dateElement = document.createElement('span');
dateElement.id = 'date';
this.element.querySelector('.clock').appendChild(dateElement);
this.date = new DateDisplay(dateElement, this.options);
this.setPosition('bottom');
}
onMouseDown(event) {
@ -218,49 +228,69 @@ class DragAdv {
};
const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
this.setPosition(closestEdge, this.barSize);
this.setPosition(closestEdge);
this.date.changeFormat(this.options);
}
setPosition(side, barSize) {
switch (side) {
case 'left':
// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
this.element.style.top = '0px';
this.element.style.right = '';
this.element.style.bottom = '0px';
this.element.style.left = '0px';
this.element.style.width = barSize;
this.element.style.height = '';
break;
setPosition(position) {
const attributes = {
top: {
className: 'top',
styles: {
top: '0', right: '0', bottom: '', left: '0',
width: '', height: this.barSize,
flexDirection: 'row'
}
},
right: {
className: 'right',
styles: {
top: '0', right: '0', bottom: '0', left: '',
width: this.barSize, height: '',
flexDirection: 'column'
}
},
bottom: {
className: 'bottom',
styles: {
top: '', right: '0', bottom: '0', left: '0',
width: '', height: this.barSize,
flexDirection: 'row'
}
},
left: {
className: 'left',
styles: {
top: '0',
right: '',
bottom: '0',
left: '0',
width: this.barSize,
height: '',
flexDirection: 'column'
}
}
};
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;
});
switch (position) {
case 'right':
// this.element.style.left = `${windowWidth - rect.width}px`;
// this.element.style.top = `${rect.top}px`; // Optional: keep vertical position
this.element.style.top = '0px';
this.element.style.right = '0px';
this.element.style.bottom = '0px';
this.element.style.left = '';
this.element.style.width = barSize;
this.element.style.height = '';
case 'left':
this.options = {year: '2-digit', month: '2-digit', day: '2-digit'};
break;
case 'top':
// this.element.style.top = '0px';
// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
this.element.style.top = '0px';
this.element.style.right = '0px';
this.element.style.bottom = '';
this.element.style.left = '0px';
this.element.style.width = '';
this.element.style.height = barSize;
break;
case 'bottom':
// this.element.style.top = `${windowHeight - rect.height}px`;
// this.element.style.left = `${rect.left}px`; // Optional: keep horizontal position
this.element.style.top = '';
this.element.style.right = '0px';
this.element.style.bottom = '0px';
this.element.style.left = '0px';
this.element.style.width = '';
this.element.style.height = barSize;
default:
this.options = {year: 'numeric', month: '2-digit', day: '2-digit'};
break;
}
}