hippie/source/code/windows.js

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 {
	constructor(element, placeholder, options) {
		this.element = element;
		this.placeholder = placeholder;
		this.date = null;
		this.offsetX = 0;
		this.offsetY = 0;
		this.isDragging = false;
		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();
	}

	// TODO: Ereignisse besser delegieren
	init() {
		this.element.addEventListener('mousedown', this.onMouseDown.bind(this));
		document.addEventListener('mousemove', this.onMouseMove.bind(this));
		document.addEventListener('mouseup', this.onMouseUp.bind(this));

		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) {
		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;
			this.offsetY = this.placeholder.getBoundingClientRect().height / 2;

			let x = event.clientX - this.offsetX;
			let y = event.clientY - this.offsetY;

			this.placeholder.style.left = `${x}px`;
			this.placeholder.style.top = `${y}px`;
		}

		event.preventDefault();
	}

	onMouseMove(event) {
		if (this.isDragging) {
			if (!this.isDragging) return;

			let x = event.clientX - this.offsetX;
			let y = event.clientY - this.offsetY;

			console.debug('Position: ', x, y);

			this.placeholder.style.left = `${x}px`;
			this.placeholder.style.top = `${y}px`;
		}
	}

	onMouseUp() {
		if (event.target === this.placeholder) {
			console.debug('Drag mode disabled');

			if (!this.isDragging) return;
			this.isDragging = false;

			this.snapToEdges();
			this.hidePlaceholder();
		}
	}

	showPlaceholder() {
		this.element.style.display = 'none';
		this.placeholder.style.display = 'block';
	}

	hidePlaceholder() {
		this.placeholder.style.display = 'none';
		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;
		const windowHeight = window.innerHeight;
		const distances = {
			top: rect.top,
			right: windowWidth - rect.right,
			bottom: windowHeight - rect.bottom,
			left: rect.left
		};
		const closestEdge = Object.keys(distances).reduce((a, b) => distances[a] < distances[b] ? a : b);

		this.setPosition(closestEdge);
		this.date.changeFormat(this.options);
	}

	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':
			case 'left':
				this.options = {year: '2-digit', month: '2-digit', day: '2-digit'};
				break;
			case 'top':
			case 'bottom':
			default:
				this.options = {year: 'numeric', month: '2-digit', day: '2-digit'};
				break;
		}
	}
}

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);
	}
}