hippie/source/code/windows.js

class HippieTaskBar {
	constructor(element, placeholder, options) {
		this.element = element;
		this.placeholder = placeholder;
		this.date = null;
		this.isDragging = false;
		this.barSize = '';
		// TODO: Erweitern auf allgemeine Möglichkeiten und dann aus JSON-Datei laden
		this.options = options || {
			direction: 0,
			date: {
				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.date);

		this.setOptions('bottom');
	}

	onMouseDown(event) {
		if (checkButtonAndTarget(event, this.element, 0)) {
			console.debug('Drag mode enabled');

			this.isDragging = true;

			this.showPlaceholder();

			centerElementUnderCursor(event, this.placeholder);
		}

		event.preventDefault();
	}

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

			const closestEdge = getClosestEdge(this.placeholder);
			const borderRadius = '4px';
			const attributes = {
				top: {
					className: 'top',
					styles: {
						flexDirection: 'row',
						borderStyle: '',
						borderColor: '',
						borderTopStyle: 'solid',
						borderTopColor: 'white',
						borderTopRightRadius: '',
						borderBottomRightRadius: borderRadius,
						borderBottomLeftRadius: borderRadius,
						borderTopLeftRadius: ''
					}
				},
				right: {
					className: 'right',
					styles: {
						flexDirection: 'column',
						borderStyle: '',
						borderColor: '',
						borderRightStyle: 'solid',
						borderRightColor: 'white',
						borderTopRightRadius: '',
						borderBottomRightRadius: '',
						borderBottomLeftRadius: borderRadius,
						borderTopLeftRadius: borderRadius
					}
				},
				bottom: {
					className: 'bottom',
					styles: {
						flexDirection: 'row',
						borderStyle: '',
						borderColor: '',
						borderBottomStyle: 'solid',
						borderBottomColor: 'white',
						borderTopRightRadius: borderRadius,
						borderBottomRightRadius: '',
						borderBottomLeftRadius: '',
						borderTopLeftRadius: borderRadius
					}
				},
				left: {
					className: 'left',
					styles: {
						flexDirection: 'column',
						borderStyle: '',
						borderColor: '',
						borderLeftStyle: 'solid',
						borderLeftColor: 'white',
						borderTopRightRadius: borderRadius,
						borderBottomRightRadius: borderRadius,
						borderBottomLeftRadius: '',
						borderTopLeftRadius: ''
					}
				}
			};

			setAttributesAccordingToPosition(this.placeholder, closestEdge, attributes);
			centerElementUnderCursor(event, this.placeholder);
		}
	}

	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 = 'flex';
	}

	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 closestEdge = getClosestEdge(this.placeholder);

		this.setOptions(closestEdge);
		this.date.changeFormat(this.options.date, this.options.direction);
	}

	setOptions(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'
				}
			}
		};

		setAttributesAccordingToPosition(this.element, position, attributes);

		switch (position) {
			case 'right':
			case 'left':
				this.options.date = {year: '2-digit', month: '2-digit', day: '2-digit'};
				this.options.direction = 1;
				break;
			case 'top':
			case 'bottom':
			default:
				this.options.date = {year: 'numeric', month: '2-digit', day: '2-digit'};
				this.options.direction = 0;
				break;
		}
	}
}