From eb07a77584e2b4cbcb1fba2167ac009db474a4a5 Mon Sep 17 00:00:00 2001
From: nin0dev <personal@nin0.dev>
Date: Mon, 29 Jul 2024 16:14:46 -0400
Subject: [PATCH] made window draggable

---
 src/components/Window.astro  |  5 ++-
 src/css/style.css            |  6 +++
 src/js/drag.js               | 56 +++++++++++++++++++++++++
 src/layouts/BaseLayout.astro | 81 +++++++++++++++++++++++++++++++-----
 4 files changed, 136 insertions(+), 12 deletions(-)
 create mode 100644 src/js/drag.js

diff --git a/src/components/Window.astro b/src/components/Window.astro
index c775e2c..8acb01d 100644
--- a/src/components/Window.astro
+++ b/src/components/Window.astro
@@ -3,15 +3,16 @@ const {title, showClose, maxWidth} = Astro.props
 ---
 
 <style define:vars={{ maxWidth }}>
-    #window {
+    .window {
         max-width: var(--maxWidth);
+        position: absolute;
     }
     .window-body {
         padding: 20px !important;
     }
 </style>
 
-<div class="background" id="window">
+<div class="background" class="window">
     <div class="window glass active" style="max-width: 100%">
         <div class="title-bar">
             <div class="title-bar-text">{title}</div>
diff --git a/src/css/style.css b/src/css/style.css
index ffacd76..f32320b 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -2,4 +2,10 @@ body {
     background-color: #56a0d1;
     padding: 30px;
     font-family: sans-serif !important;
+    overflow: hidden;
+}
+@media (pointer:coarse) {
+    body {
+        overflow: scroll;
+    }
 }
\ No newline at end of file
diff --git a/src/js/drag.js b/src/js/drag.js
new file mode 100644
index 0000000..decfaee
--- /dev/null
+++ b/src/js/drag.js
@@ -0,0 +1,56 @@
+// wow i love being fake programmer
+// source: https://jams.hackclub.com/batch/webOS/part-3
+function dragElement(element) {
+    // Step 2: Set up variables to keep track of the element's position.
+    var initialX = 0;
+    var initialY = 0;
+    var currentX = 0;
+    var currentY = 0;
+    
+    // Step 3: Check if there is a special header element associated with the draggable element.
+    if (document.getElementById("title-bar")) {
+        // Step 4: If present, assign the `dragMouseDown` function to the header's `onmousedown` event.
+        // This allows you to drag the window around by its header.
+        document.getElementById("title-bar").onmousedown = startDragging;
+    } else {
+        // Step 5: If not present, assign the function directly to the draggable element's `onmousedown` event.
+        // This allows you to drag the window by holding down anywhere on the window.
+        element.onmousedown = startDragging;
+    }
+    
+    // Step 6: Define the `startDragging` function to capture the initial mouse position and set up event listeners.
+    function startDragging(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // Step 7: Get the mouse cursor position at startup.
+        initialX = e.clientX;
+        initialY = e.clientY;
+        // Step 8: Set up event listeners for mouse movement (`elementDrag`) and mouse button release (`closeDragElement`).
+        document.onmouseup = stopDragging;
+        document.onmousemove = dragElement;
+    }
+    
+    // Step 9: Define the `elementDrag` function to calculate the new position of the element based on mouse movement.
+    function dragElement(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // Step 10: Calculate the new cursor position.
+        currentX = initialX - e.clientX;
+        currentY = initialY - e.clientY;
+        initialX = e.clientX;
+        initialY = e.clientY;
+        // Step 11: Update the element's new position by modifying its `top` and `left` CSS properties.
+        console.log(element.offsetTop);
+        console.log(currentX);
+        element.style.top = (element.offsetTop - currentY) + "px";
+        element.style.left = (element.offsetLeft - currentX) + "px";
+    }
+    
+    // Step 12: Define the `stopDragging` function to stop tracking mouse movement by removing the event listeners.
+    function stopDragging() {
+        document.onmouseup = null;
+        document.onmousemove = null;
+        console.log(element.offsetTop - currentY);
+        console.log(element.offsetLeft - currentX);
+    }
+}
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 4df0f30..cdfe77c 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -6,14 +6,75 @@ const {tabTitle} = Astro.props;
 ---
 
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{tabTitle}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+	<meta name="viewport" content="width=device-width" />
+	<meta name="generator" content={Astro.generator} />
+	<title>{tabTitle}</title>
+</head>
+<body>
+	<slot />
+	<script>
+		function dragElement(element) {
+			// Step 2: Set up variables to keep track of the element's position.
+			var initialX = 0;
+			var initialY = 0;
+			var currentX = 0;
+			var currentY = 0;
+			
+			// Step 3: Check if there is a special header element associated with the draggable element.
+			if (document.getElementById("title-bar")) {
+				// Step 4: If present, assign the `dragMouseDown` function to the header's `onmousedown` event.
+				// This allows you to drag the window around by its header.
+				document.getElementById("title-bar").onmousedown = startDragging;
+			} else {
+				// Step 5: If not present, assign the function directly to the draggable element's `onmousedown` event.
+				// This allows you to drag the window by holding down anywhere on the window.
+				element.onmousedown = startDragging;
+			}
+			
+			// Step 6: Define the `startDragging` function to capture the initial mouse position and set up event listeners.
+			function startDragging(e) {
+				e = e || window.event;
+				e.preventDefault();
+				// Step 7: Get the mouse cursor position at startup.
+				initialX = e.clientX;
+				initialY = e.clientY;
+				// Step 8: Set up event listeners for mouse movement (`elementDrag`) and mouse button release (`closeDragElement`).
+				document.onmouseup = stopDragging;
+				document.onmousemove = dragElement;
+			}
+			
+			// Step 9: Define the `elementDrag` function to calculate the new position of the element based on mouse movement.
+			function dragElement(e) {
+				e = e || window.event;
+				e.preventDefault();
+				// Step 10: Calculate the new cursor position.
+				currentX = initialX - e.clientX;
+				currentY = initialY - e.clientY;
+				initialX = e.clientX;
+				initialY = e.clientY;
+				// Step 11: Update the element's new position by modifying its `top` and `left` CSS properties.
+				console.log(element.offsetTop);
+				console.log(currentX);
+				element.style.top = (element.offsetTop - currentY) + "px";
+				element.style.left = (element.offsetLeft - currentX) + "px";
+			}
+			
+			// Step 12: Define the `stopDragging` function to stop tracking mouse movement by removing the event listeners.
+			function stopDragging() {
+				document.onmouseup = null;
+				document.onmousemove = null;
+				console.log(element.offsetTop - currentY);
+				console.log(element.offsetLeft - currentX);
+			}
+		}
+		document.addEventListener("DOMContentLoaded", ()  => {
+			document.querySelectorAll(".window").forEach(window => {
+				dragElement(window);
+			});
+		});
+	</script>
+</body>
 </html>