feat: draggable is now a class

source/screens/demo/examples/ui/drag.njk

@@ -27,32 +27,38 @@ tags:
 
 {%- block script %}
   <script>
-// Get the space element
-const space = document.getElementById('space');
-const addFrameButton = document.getElementById('addFrame');
+    // Define the NewDiv class
+    class NewDiv {
+      constructor(x, y, width, height, backgroundColor) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.backgroundColor = backgroundColor;
+        this.element = null;
+      }
 
-// Function to create a new div element
-function createNewDiv() {
-  const newDiv = document.createElement('div');
-  newDiv.style.position = 'absolute';
-  newDiv.style.width = '100px';
-  newDiv.style.height = '100px';
-  newDiv.style.cursor = 'move';
+      // Create the div element
+      createDiv() {
+        this.element = document.createElement('div');
+        this.element.style.position = 'absolute';
+        this.element.style.left = `${this.x}px`;
+        this.element.style.top = `${this.y}px`;
+        this.element.style.width = `${this.width}px`;
+        this.element.style.height = `${this.height}px`;
+        this.element.style.background = this.backgroundColor;
+        this.element.style.cursor = 'move';
 
         // Add event listeners for dragging
         let isDown = false;
         let offset = [0, 0];
 
-	// Generate a random background color
-	const randomColor = getRandomColor();
-	newDiv.style.background = randomColor;
-
-  newDiv.addEventListener('mousedown', (event) => {
+        this.element.addEventListener('mousedown', (event) => {
           if (event.button === 0) { // Left mouse button
             isDown = true;
             offset = [
-        newDiv.offsetLeft - event.clientX,
-        newDiv.offsetTop - event.clientY
+              this.element.offsetLeft - event.clientX,
+              this.element.offsetTop - event.clientY
             ];
           }
         });
@@ -63,8 +69,8 @@ function createNewDiv() {
 
         document.addEventListener('mousemove', (event) => {
           if (isDown) {
-      const maxX = window.innerWidth - newDiv.offsetWidth;
-      const maxY = window.innerHeight - newDiv.offsetHeight;
+            const maxX = window.innerWidth - this.element.offsetWidth;
+            const maxY = window.innerHeight - this.element.offsetHeight;
             let x = event.clientX + offset[0];
             let y = event.clientY + offset[1];
 
@@ -74,39 +80,35 @@ function createNewDiv() {
             if (x > maxX) x = maxX;
             if (y > maxY) y = maxY;
 
-      newDiv.style.left = `${x}px`;
-      newDiv.style.top = `${y}px`;
+            this.element.style.left = `${x}px`;
+            this.element.style.top = `${y}px`;
           }
         });
 
         // Save position and size
         const saveData = () => {
           const data = {
-      x: newDiv.offsetLeft,
-      y: newDiv.offsetTop,
-      width: newDiv.offsetWidth,
-      height: newDiv.offsetHeight
+            x: this.element.offsetLeft,
+            y: this.element.offsetTop,
+            width: this.element.offsetWidth,
+            height: this.element.offsetHeight
           };
           // Save data to local storage or a database
-    localStorage.setItem(`divData${newDiv.id}`, JSON.stringify(data));
+          localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
         };
 
         // Load saved data
         const loadData = () => {
-    const data = localStorage.getItem(`divData${newDiv.id}`);
+          const data = localStorage.getItem(`divData${this.element.id}`);
           if (data) {
             const parsedData = JSON.parse(data);
-      newDiv.style.left = `${parsedData.x}px`;
-      newDiv.style.top = `${parsedData.y}px`;
-      newDiv.style.width = `${parsedData.width}px`;
-      newDiv.style.height = `${parsedData.height}px`;
+            this.element.style.left = `${parsedData.x}px`;
+            this.element.style.top = `${parsedData.y}px`;
+            this.element.style.width = `${parsedData.width}px`;
+            this.element.style.height = `${parsedData.height}px`;
           }
         };
 
-  // Add the new div to the space
-  newDiv.id = `newDiv${space.children.length}`;
-  space.appendChild(newDiv);
-
         // Call the save function when the user stops dragging
         document.addEventListener('mouseup', saveData);
 
@@ -114,6 +116,13 @@ function createNewDiv() {
         loadData();
       }
 
+      // Append the div to the space
+      appendToFrame(space) {
+        this.element.id = `newDiv${space.children.length}`;
+        space.appendChild(this.element);
+      }
+    }
+
     // Function to generate a random color
     function getRandomColor() {
       const letters = '0123456789ABCDEF';
@@ -124,10 +133,20 @@ function getRandomColor() {
       return color;
     }
 
-// Add event listener to the add space button
-addFrameButton.addEventListener('click', createNewDiv);
+    // Get the space element
+    const space = document.getElementById('space');
+    const addFrameButton = document.getElementById('addFrame');
 
-// Create the first new div element
-createNewDiv();
+    // Add event listener to the add space button
+    addFrameButton.addEventListener('click', () => {
+      const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
+      newDiv.createDiv();
+      newDiv.appendToFrame(space);
+    });
+
+    // Create a new NewDiv instance
+    const newDiv = new NewDiv(100, 100, 800, 600, '#000');
+    newDiv.createDiv();
+    newDiv.appendToFrame(document.getElementById('space'));
   </script>
 {% endblock %}