Create base functionality of draggable panes.

src/public/resources/core/dom.js

@@ -1,7 +1,7 @@
 /**
  * @ Author: Mo David
  * @ Create Time: 2024-10-29 15:07:13
- * @ Modified time: 2024-11-11 21:41:08
+ * @ Modified time: 2024-11-19 20:03:17
  * @ Description:
  * 
  * Utilities for dealing with DOM-related stuff.
@@ -14,6 +14,12 @@ const DOM = (() => {
 	// Interface
 	const _ = {};
 
+	// Mouse props
+	const mouse = { 
+		x: 0, 
+		y: 0 
+	};
+
 	// Local storage cache
 	const storage = {}
 
@@ -338,6 +344,7 @@ const DOM = (() => {
 	_.link = () => element('a');
 	_.pre = () => element('pre');
 	_.br = () => element('br');
+	_.iframe = () => element('iframe');
 
 	// Table-related
 	_.table = () => element('table').c('ui', 'table');
@@ -705,6 +712,78 @@ const DOM = (() => {
 		)
 	)
 
+	/**
+	 * Creates a draggable pane with its own content.
+	 * A mini window with extra functionality
+	 * @param {*} win 
+	 * @returns 
+	 */
+	_.stateful_pane = (pane) => (
+		((pane) => (
+
+			// Construct the pane
+			pane.append(
+
+				// The element containing the header
+				element('div')
+					.c('pane-header')
+					.listen('mousedown', (e) => (
+						((interval) => (
+
+							// Make the pane dragging
+							pane.c('dragging').s({ pointerEvents: 'none !important' })
+								.select('.pane-content').s({ pointerEvents: 'none !important' }).parent()
+								.select('.pane-cover').s({ pointerEvents: 'auto', opacity: 1 }),
+
+							// Create a mouseup listener
+							document.addEventListener('mouseup', function clear() {
+								document.removeEventListener('mouseup', clear)
+								clearInterval(interval)
+
+								// Revert the style
+								pane.uc('dragging').s({ pointerEvents: 'auto !important' })
+									.select('.pane-content').s({ pointerEvents: 'auto !important' }).parent()
+									.select('.pane-cover').s({ pointerEvents: 'none', opacity: 0 })
+							})
+
+						// Create interval to update position of pane based on mouse
+						))(setInterval(() => (
+							pane.s({
+								top: mouse.y - e.target.offsetHeight / 2 + 'px',
+								left: mouse.x - e.target.offsetWidth / 2 + 'px'
+							})
+						), 1000 / 16))
+					)),
+
+				// The element containing the content
+				element('div')
+					.c('pane-content'),
+
+				// The cover to use when moving the pane
+				element('div')
+					.c('pane-cover')
+			),
+
+			// Extends the pane
+			Object.assign(pane, {
+
+				// Append stuff to the pane body
+				pane_append: (...elements) => (
+					pane.select('.pane-content').append(...elements),
+					pane
+				),
+			})
+
+		// Create the pane component
+		))(
+			((id) => (
+				pane
+					? stateful(pane, id)
+					: stateful(element('div').c('pane'), id)
+			))(random_id())
+		)
+	)
+
 	/**
 	 * Creates a stateful form with the given id.
 	 * Methods are:
@@ -1228,6 +1307,12 @@ const DOM = (() => {
 				_.div().c('content'), _.div().c('ui', 'divider').s({ visibility: 'hidden' }),
 				_.div().c('ui', 'teal', 'compact', 'label', 'bottom', 'left', 'attached')))
 	)
+
+	// Dom mouse handling
+	window.onmousemove = (e) => (
+		mouse.x = e.clientX,
+		mouse.y = e.clientY
+	)
 
 	return {
 		..._,

src/public/resources/css/main.css

@@ -53,14 +53,54 @@ input:focus{
   z-index: -1;
 }
 
+/* Pane styling */
+.pane {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 25vw;
+  height: auto;
+  z-index: 10;
+
+  background-color: rgba(var(--white), 0.16);
+  border: 1px solid rgba(var(--black), 0.16);
+  overflow: hidden;
+}
+
+.pane-header {
+  background-color: rgba(var(--black), 1);
+  width: 100%;
+  height: 2em;
+  cursor: grab;
+}
+
+.pane-cover {
+  position: absolute;
+  top: 2em;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(var(--black), 0.16);
+  -webkit-backdrop-filter: blur(10px) !important;
+  backdrop-filter: blur(10px) !important;
+  transition: 0.1s !important;
+}
+
+.pane.dragging,
+.pane.dragging>.pane-header {
+  cursor: grabbing;
+}
+
 /* Semantic overrides */
 .ui.header {
   letter-spacing: -0.06em;
   color: rgb(var(--black), 0.9) !important;
 }
 
 .ui.tab {
-  border-color: rgba(var(--black), 0.08) !important;
+  border-color: rgba(var(--black), 0.16) !important;
 }
 
 .ui.tab,
@@ -386,8 +426,8 @@ input[type=checkbox]+label:active:after {
 /* Modals */
 .ui.modal>.header,
 .ui.modal>.actions {
-  border-top: 1px solid rgba(var(--black), 0.08) !important;
-  border-bottom: 1px solid rgba(var(--black), 0.08) !important;
+  border-top: 1px solid rgba(var(--black), 0.16) !important;
+  border-bottom: 1px solid rgba(var(--black), 0.16) !important;
   box-shadow: none !important;
 }