From 4cf279bee5595cf8efd2e8e2ce44e4d834c96b37 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 15 Aug 2024 23:06:21 +0200
Subject: [PATCH] feat: draggable is now a class

---
 source/screens/demo/examples/ui/drag.njk | 207 +++++++++++++----------
 1 file changed, 113 insertions(+), 94 deletions(-)

diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index a76f5bb..61ab554 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -26,108 +26,127 @@ tags:
 {% endblock %}
 
 {%- block script %}
-	<script>
-// Get the space element
-const space = document.getElementById('space');
-const addFrameButton = document.getElementById('addFrame');
+  <script>
+    // 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];
+        // Add event listeners for dragging
+        let isDown = false;
+        let offset = [0, 0];
 
-	// Generate a random background color
-	const randomColor = getRandomColor();
-	newDiv.style.background = randomColor;
+        this.element.addEventListener('mousedown', (event) => {
+          if (event.button === 0) { // Left mouse button
+            isDown = true;
+            offset = [
+              this.element.offsetLeft - event.clientX,
+              this.element.offsetTop - event.clientY
+            ];
+          }
+        });
 
-  newDiv.addEventListener('mousedown', (event) => {
-    if (event.button === 0) { // Left mouse button
-      isDown = true;
-      offset = [
-        newDiv.offsetLeft - event.clientX,
-        newDiv.offsetTop - event.clientY
-      ];
+        document.addEventListener('mouseup', () => {
+          isDown = false;
+        });
+
+        document.addEventListener('mousemove', (event) => {
+          if (isDown) {
+            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];
+
+            // Boundary checks
+            if (x < 0) x = 0;
+            if (y < 0) y = 0;
+            if (x > maxX) x = maxX;
+            if (y > maxY) y = maxY;
+
+            this.element.style.left = `${x}px`;
+            this.element.style.top = `${y}px`;
+          }
+        });
+
+        // Save position and size
+        const saveData = () => {
+          const data = {
+            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${this.element.id}`, JSON.stringify(data));
+        };
+
+        // Load saved data
+        const loadData = () => {
+          const data = localStorage.getItem(`divData${this.element.id}`);
+          if (data) {
+            const parsedData = JSON.parse(data);
+            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`;
+          }
+        };
+
+        // Call the save function when the user stops dragging
+        document.addEventListener('mouseup', saveData);
+
+        // Load saved data on page load
+        loadData();
+      }
+
+      // Append the div to the space
+      appendToFrame(space) {
+        this.element.id = `newDiv${space.children.length}`;
+        space.appendChild(this.element);
+      }
     }
-  });
 
-  document.addEventListener('mouseup', () => {
-    isDown = false;
-  });
-
-  document.addEventListener('mousemove', (event) => {
-    if (isDown) {
-      const maxX = window.innerWidth - newDiv.offsetWidth;
-      const maxY = window.innerHeight - newDiv.offsetHeight;
-      let x = event.clientX + offset[0];
-      let y = event.clientY + offset[1];
-
-      // Boundary checks
-      if (x < 0) x = 0;
-      if (y < 0) y = 0;
-      if (x > maxX) x = maxX;
-      if (y > maxY) y = maxY;
-
-      newDiv.style.left = `${x}px`;
-      newDiv.style.top = `${y}px`;
+    // Function to generate a random color
+    function getRandomColor() {
+      const letters = '0123456789ABCDEF';
+      let color = '#';
+      for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+      }
+      return color;
     }
-  });
 
-  // Save position and size
-  const saveData = () => {
-    const data = {
-      x: newDiv.offsetLeft,
-      y: newDiv.offsetTop,
-      width: newDiv.offsetWidth,
-      height: newDiv.offsetHeight
-    };
-    // Save data to local storage or a database
-    localStorage.setItem(`divData${newDiv.id}`, JSON.stringify(data));
-  };
+    // Get the space element
+    const space = document.getElementById('space');
+    const addFrameButton = document.getElementById('addFrame');
 
-  // Load saved data
-  const loadData = () => {
-    const data = localStorage.getItem(`divData${newDiv.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`;
-    }
-  };
+    // 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);
+    });
 
-  // 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);
-
-  // Load saved data on page load
-  loadData();
-}
-
-// Function to generate a random color
-function getRandomColor() {
-	const letters = '0123456789ABCDEF';
-	let color = '#';
-	for (let i = 0; i < 6; i++) {
-		color += letters[Math.floor(Math.random() * 16)];
-	}
-	return color;
-}
-
-// Add event listener to the add space button
-addFrameButton.addEventListener('click', createNewDiv);
-
-// Create the first new div element
-createNewDiv();
-	</script>
+    // Create a new NewDiv instance
+    const newDiv = new NewDiv(100, 100, 800, 600, '#000');
+    newDiv.createDiv();
+    newDiv.appendToFrame(document.getElementById('space'));
+  </script>
 {% endblock %}
\ No newline at end of file