Moved root page to space/

space/js/menu.js

@@ -0,0 +1,76 @@
+/** @type {HTMLDivElement} */
+const menu = document.querySelector('.about-menu')
+
+/** @type {HTMLLIElement} */
+const move = document.querySelector('.about-menu li#move')
+
+/** @type {HTMLDivElement} */
+const context = document.querySelector('.context-menu')
+
+
+var contextShown = false
+var contextTimeout
+
+var menuDragging = false
+var mousePos = {x: 0, y: 0}
+
+
+function moveMenu(/** @type {MouseEvent} */ ev) {
+	switch (ev.type) {
+
+		case 'mousedown':
+			menuDragging = true
+			mousePos.y = ev.clientY - styleValue(menu.style.top)
+			mousePos.x = ev.clientX - styleValue(menu.style.left)
+			menu.classList.add('dragging')
+			ev.preventDefault()
+			break
+
+		case 'mouseup':
+			menuDragging = false
+			menu.classList.remove('dragging')
+			break
+
+		case 'mousemove':
+			if (menuDragging) {
+				let top  = ev.clientY - mousePos.y
+				let left = ev.clientX - mousePos.x
+				menu.style.top  = `${top}px`
+				menu.style.left = `${left}px`
+			}
+			break
+	}
+}
+
+function contextMenu(/** @type {MouseEvent} */ ev) {
+
+	clearTimeout(contextTimeout)
+	context.classList.remove(...bounceAnimOut)
+	
+	context.style.top  = `${ev.clientY + 5}px`
+	context.style.left = `${ev.clientX + 5}px`
+
+	context.classList.add(...bounceAnimIn)
+	contextShown = true
+
+	ev.preventDefault()
+	return false
+}
+
+function hideContextMenu(/** @type {MouseEvent} */ ev) {
+
+	if (!contextShown) return
+	if (ev && ev.button != 0) return
+
+	context.classList.remove(...bounceAnimIn)
+
+	context.classList.add('show')
+	context.classList.add(...bounceAnimOut)
+	contextShown = false
+
+	// animation-duration: 0.6s;
+	contextTimeout = setTimeout(() => {
+		context.classList.remove('show')
+		context.classList.remove(...bounceAnimOut)
+	}, 600)
+}