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

refactor: Move stuff around and rename

Browse source 
- DragAdv is now HippieTaskBar
- Remove previous version
- Move unused stuff
- Replace Clock with TimeDisplay
This commit is contained in:
sthag 2025-11-02 10:20:51 +01:00
parent 77178886cd
commit 13b1924360
4 changed files with 34 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -195,7 +195,7 @@ function composeMail(tag, name, prov, suffix, text, topic) {
el.innerHTML = elContent + text;
el.setAttribute("href", "mailto:" + mailString + topic);
};
}
}
}
@ -230,8 +230,6 @@ function composeMail(tag, name, prov, suffix, text, topic) {
//
// var Utils = new Utils();
// NEWER
class TimeDisplay {
constructor(element, options, interval) {
this.element = element;
@ -341,7 +339,34 @@ class DateDisplay {
}
}
//NEW
// CONCEPTS
// NOTE: Benutzt private Zuweisungen
class elementBinder {
#element;
constructor(element) {
this.#setElement(element);
}
#setElement(value) {
if (!value) {
throw new Error('No element found');
}
this.#element = value;
this.#element.style.background = "hotpink";
}
get element() {
return this.#element;
}
set element(value) {
this.#setElement(value);
}
}
//OLD
function Clock(id) {
'use strict';
@ -372,8 +397,6 @@ Clock.prototype.formatDigits = function (val) {
return val;
};
//OLD
var floor = Math.floor;
function ongoing() {

155
source/code/windows.js
View file

@ -1,133 +1,4 @@
class Draggable {
constructor(element) {
this.element = element;
this.offsetX = 0;
this.offsetY = 0;
this.isDragging = false;
this.barSize = '';
this.init();
}
init() {
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');
}
onMouseDown(event) {
this.isDragging = true;
this.offsetX = event.clientX - this.element.getBoundingClientRect().left;
this.offsetY = event.clientY - this.element.getBoundingClientRect().top;
event.preventDefault();
}
onMouseMove(event) {
if (!this.isDragging) {
return;
}
let x = event.clientX - this.offsetX;
let y = event.clientY - this.offsetY;
// Update the position of the element
this.element.style.left = `${x}px`;
this.element.style.top = `${y}px`;
}
onMouseUp() {
if (!this.isDragging) {
return;
}
this.isDragging = false;
this.snapToEdges();
}
snapToEdges() {
const rect = this.element.getBoundingClientRect();
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// Determine the closest edge
const distances = {
left: rect.left,
right: windowWidth - rect.right,
top: rect.top,
bottom: windowHeight - rect.bottom
};
const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);
/*switch (closestEdge) {
case 'left':
this.element.style.left = '0px';
this.element.style.top = `${rect.top}px`;
break;
case 'right':
this.element.style.left = `${windowWidth - rect.width}px`;
this.element.style.top = `${rect.top}px`;
break;
case 'top':
this.element.style.top = '0px';
this.element.style.left = `${rect.left}px`;
break;
case 'bottom':
this.element.style.top = `${windowHeight - rect.height}px`;
this.element.style.left = `${rect.left}px`;
break;
}*/
this.setPosition(closestEdge, this.barSize);
}
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;
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 = '';
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;
break;
}
}
}
class DragAdv {
class HippieTaskBar {
constructor(element, placeholder, options) {
this.element = element;
this.placeholder = placeholder;
@ -304,27 +175,3 @@ class DragAdv {
}
}
}
class BestDrag {
#element;
constructor(element) {
this.#setElement(element);
}
#setElement(value) {
if (!value) {
throw new Error('No element found');
}
this.#element = value;
this.#element.style.background = "hotpink";
}
get element() {
return this.#element;
}
set element(value) {
this.#setElement(value);
}
}

3
source/screens/demo/examples/ui/start.liquid
View file

@ -31,7 +31,8 @@ tags:
{%- block script %}
{{ block.super -}}
<script>
let clock = new Clock('time');
const timeElement = document.getElementById('time');
const timeDisplay = new TimeDisplay(timeElement);
ongoing();

8
source/screens/demo/examples/ui/windows.liquid
View file

@ -52,13 +52,9 @@ tags:
const start = document.querySelector('[data-action=start]');
const draggableElement = document.getElementById('task-bar');
const placeholderElement = document.getElementById('placeholder');
// const draggable = new Draggable(draggableElement);
const dragMore = new DragAdv(draggableElement, placeholderElement);
// const dragBest = new BestDrag(draggableElement, placeholderElement);
// let clock = new Clock('time');
const timeElement = document.getElementById('time');
const taskBar = new HippieTaskBar(draggableElement, placeholderElement);
const timeFormat = {hour: '2-digit', minute: '2-digit'};
const timeDisplay = new TimeDisplay(timeElement, timeFormat);