vlw.se/public/assets/js/pages/playground/super-secret-settings.js

import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";

const sssElement = document.querySelector("super-secret-settings");
sssElement._size = sssElement.getBoundingClientRect();

const borderWidth = 5;
const clampRight = (window.innerWidth - sssElement._size.width) - (borderWidth * 3);
const clampBottom = (window.innerHeight - sssElement._size.height) - (borderWidth * 3);

const moveWindow = new Elevent("mousemove", null, (event) => {
	// Clamp window to viewport
	const y = Math.max(borderWidth, Math.min(clampBottom, (event.clientY - 40)));
	const x = Math.max(borderWidth, Math.min(clampRight, event.clientX - (sssElement._size.width / 2)));

	sssElement.style.transform = `translate(${x}px, ${y}px)`;
})

new Elevent("mousedown", sssElement.querySelector(".header"), (event) => {
	event.stopPropagation();

	if (event.target !== sssElement.querySelector(".header")) {
		return;
	}

	// Prevent element selection while dragging
	document.body.style.userSelect = "none";

	// Bind mousemove on body
	moveWindow.bind(document.body);

	// Unbind mousemove and restore state
	new Elevent("mouseup", document.body, () => {
		document.body.style.userSelect = null;
		moveWindow.remove(document.body);
	});
});

new Elevent("click", sssElement.querySelector(".header button.close"), () => sssElement.remove());
new Elevent("click", sssElement.querySelector(".header button.collapse"), () => sssElement.classList.toggle("collapsed"));