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

feat: Add time to task bar

Browse source 
- Add app.js to windows screen
- Add time display to task bar
- Add new TimeDisplay class to app.js
- Add play and pause buttons as example
- Fix event handlers of task bar according to bubbling and propagation
This commit is contained in:
sthag 2025-10-31 19:47:19 +01:00
parent c259ead9a0
commit bac4b73c08
4 changed files with 103 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

33
source/code/windows.js
View file

@ -139,6 +139,7 @@ class DragAdv {
this.init();
}
// TODO: Ereignisse besser delegieren
init() {
this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
document.addEventListener('mousemove', this.onMouseMove.bind(this));
@ -147,9 +148,12 @@ class DragAdv {
}
onMouseDown(event) {
if (event.button === 0) {
if (checkButtonAndTarget(event, this.element, 0)) {
console.debug('Drag mode enabled');
this.isDragging = true;
// TODO: Platzhalter anpassen je nach Ziel
this.showPlaceholder();
this.offsetX = this.placeholder.getBoundingClientRect().width / 2;
@ -166,21 +170,29 @@ class DragAdv {
}
onMouseMove(event) {
if (!this.isDragging) return;
if (this.isDragging) {
if (!this.isDragging) return;
let x = event.clientX - this.offsetX;
let y = event.clientY - this.offsetY;
let x = event.clientX - this.offsetX;
let y = event.clientY - this.offsetY;
this.placeholder.style.left = `${x}px`;
this.placeholder.style.top = `${y}px`;
console.debug('Position: ', x, y);
this.placeholder.style.left = `${x}px`;
this.placeholder.style.top = `${y}px`;
}
}
onMouseUp() {
if (!this.isDragging) return;
this.isDragging = false;
if (event.target === this.placeholder) {
console.debug('Drag mode disabled');
this.snapToEdges();
this.hidePlaceholder();
if (!this.isDragging) return;
this.isDragging = false;
this.snapToEdges();
this.hidePlaceholder();
}
}
showPlaceholder() {
@ -193,6 +205,7 @@ class DragAdv {
this.element.style.display = '';
}
// TODO: Prüfung auf Ziel auslagern und schon bei Mausbewegung verfügbar machen
snapToEdges() {
const rect = this.placeholder.getBoundingClientRect();
const windowWidth = window.innerWidth;