Initial commit

2023-08-29 19:55:48 +02:00
commit 7c2eec4446
473 changed files with 40947 additions and 0 deletions
--- a/Frontend/pages/home/ts/ContextMenu.ts
+++ b/Frontend/pages/home/ts/ContextMenu.ts
@@ -0,0 +1,137 @@
+var ContextMenu = new class ContextMenu {
+	elements: {
+		menu: HTMLDivElement;
+
+		items: {
+			copy: HTMLDivElement;
+			paste: HTMLDivElement;
+			cut: HTMLDivElement;
+			ghost: HTMLDivElement;
+			osc: HTMLDivElement;
+			http: HTMLDivElement;
+		};
+	};
+
+	open: boolean;
+	contextHolder: HTMLElement;
+
+	constructor() {
+		this.elements = {
+			menu: document.querySelector('.contextmenu'),
+			items: {
+				copy: document.querySelector('.contextmenu').querySelector('.copy'),
+				paste: document.querySelector('.contextmenu').querySelector('.paste'),
+				cut: document.querySelector('.contextmenu').querySelector('.cut'),
+				ghost: document.querySelector('.contextmenu').querySelector('.ghost'),
+				osc: document.querySelector('.contextmenu').querySelector('.osc'),
+				http: document.querySelector('.contextmenu').querySelector('.http')
+			}
+		};
+
+		this.open = false;
+		this.contextHolder = null;
+
+		window.addEventListener('contextmenu', (ev: MouseEvent) => this.handle(this.elements.menu, ev));
+		window.addEventListener('mousedown', (ev: MouseEvent) => {
+			if (this.open == true)
+				if (ev.target) {
+					var target = ev.target as HTMLElement;
+
+					if (
+						target.classList.contains('contextmenu') ||
+						(target.parentElement != undefined && target.parentElement.classList.contains('contextmenu'))
+					) {
+					} else {
+						this.close();
+					}
+				} else this.close();
+		});
+	}
+
+	setItems(items: DropdownItemTypes[]) {
+		for (var type in this.elements.items) {
+			if (items.includes(<DropdownItemTypes>type)) this.elements.items[type].style.display = 'block';
+			else this.elements.items[type].style.display = 'none';
+		}
+	}
+
+	close() {
+		this.elements.menu.style.display = 'none';
+		if (this.contextHolder != null) {
+			this.contextHolder.classList.remove('context');
+			this.contextHolder = null;
+		}
+		this.open = false;
+	}
+
+	handle(menu: HTMLDivElement, ev: MouseEvent) {
+		if (ev.target != undefined) {
+			var target = ev.target as HTMLElement;
+
+			var types = {
+				key: (element: HTMLElement) => {
+					if (element.hasAttribute('x') && element.hasAttribute('y')) {
+						var keyX = element.getAttribute('x');
+						var keyY = element.getAttribute('y');
+
+						var items: DropdownItemTypes[] = [
+							'osc',
+							'http'
+						];
+						if (PageHandler.currentPage.keys[keyY][keyX].state.type != 'empty') items.push('copy', 'cut');
+						if (PageHandler.currentPage.keys[keyY][keyX].state.type == 'custom') items.push('ghost');
+						if (UndeckedClipboard.hasKeyInClipboard()) items.push('paste');
+
+						this.setItems(items);
+
+						this.elements.items.copy.onclick = () => {
+							UndeckedClipboard.copyKey(parseInt(keyX), parseInt(keyY));
+							this.close();
+						};
+
+						this.elements.items.cut.onclick = () => {
+							UndeckedClipboard.cutKey(parseInt(keyX), parseInt(keyY));
+							this.close();
+						};
+
+						this.elements.items.paste.onclick = () => {
+							UndeckedClipboard.pasteKey(parseInt(keyX), parseInt(keyY));
+							this.close();
+						};
+
+						this.elements.items.ghost.onclick = () => {
+							UndeckedClipboard.copyGhostKey(parseInt(keyX), parseInt(keyY));
+							this.close();
+						};
+
+						return items.length > 0;
+					}
+				}
+			};
+
+			for (var type in types)
+				if (target.classList.contains(type)) {
+					ev.preventDefault();
+
+					var valid = types[type](target);
+
+					if (valid) {
+						this.contextHolder = target;
+						target.classList.add('context');
+
+						setTimeout(() => {
+							this.open = true;
+						}, 100);
+
+						menu.style.left = `${ev.pageX}px`;
+						menu.style.top = `${ev.pageY - 50}px`;
+						menu.style.display = 'block';
+					}
+
+					return;
+				}
+		}
+	}
+}();
+
+type DropdownItemTypes = 'copy' | 'paste' | 'cut' | 'ghost' | 'osc' | 'http';