diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 72e419d..4da28e0 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -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() { diff --git a/source/code/windows.js b/source/code/windows.js index e533f9a..6ca9f64 100644 --- a/source/code/windows.js +++ b/source/code/windows.js @@ -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); - } -} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/start.liquid b/source/screens/demo/examples/ui/start.liquid index 8e13c85..261cb16 100644 --- a/source/screens/demo/examples/ui/start.liquid +++ b/source/screens/demo/examples/ui/start.liquid @@ -31,7 +31,8 @@ tags: {%- block script %} {{ block.super -}}