From 8937b36a1e768d57720cdcf65caf7927d7d2c002 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 15 May 2025 20:00:51 +0200
Subject: [PATCH] feat: Changes to ui form and drag

- Use common styles
- Move NewDiv class to external script
- Align script for form and drag pages
---
 source/code/_ui.js                        | 113 +++++++++++++++++++++
 source/screens/demo/examples/ui/drag.njk  | 116 ++--------------------
 source/screens/demo/examples/ui/form.njk  |  33 +++++-
 source/style/modules/ui/_drag_module.scss |  16 +--
 source/style/modules/ui/_form_module.scss |  15 ++-
 5 files changed, 165 insertions(+), 128 deletions(-)
 create mode 100644 source/code/_ui.js

diff --git a/source/code/_ui.js b/source/code/_ui.js
new file mode 100644
index 0000000..24e034a
--- /dev/null
+++ b/source/code/_ui.js
@@ -0,0 +1,113 @@
+// Creates a div element which is draggable
+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;
+  }
+
+  // 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];
+
+    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
+          ];
+        }
+      });
+
+    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);
+  }
+}
+
+// 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;
+}
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 15c24b1..09266b9 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -9,7 +9,8 @@ tags:
 
 {% extends "demo/_app.njk" %}
 
-{% block title %}{{ title }}{% endblock %}
+{% block title %}{{ title }}
+{% endblock %}
 
 {% block links %}
   {{ super() }}
@@ -22,123 +23,18 @@ tags:
 
 {% block body %}
   <div id="space"></div>
-  <button id="addFrame">Add</button>
+  <button data-action="add">Add</button>
 {% endblock %}
 
 {%- block script %}
+  <script src="{{ pageBase }}js/_ui.js"></script>
   <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;
-      }
-
-      // 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];
-
-        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
-            ];
-          }
-        });
-
-        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);
-      }
-    }
-
-    // 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;
-    }
-
     // Get the space element
     const space = document.getElementById('space');
-    const addFrameButton = document.getElementById('addFrame');
+    const add = document.querySelector('[data-action=add]');
 
     // Add event listener to the add space button
-    addFrameButton.addEventListener('click', () => {
+    add.addEventListener('click', () => {
       const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
       newDiv.createDiv();
       newDiv.appendToFrame(space);
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index 60162ce..b9adc45 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -4,6 +4,8 @@ tags:
   - demoExample
   - ui
 ---
+{% set bodyClass = "body_form" %}
+
 {% extends "demo/_app.njk" %}
 
 {% block title %}{{ title }}
@@ -21,25 +23,46 @@ tags:
 	<div id="head">
 		<h1>Formulare</h1>
 		<button data-action="add">Hinzufügen</button>
+		<button data-action="change">Ändern</button>
+		<hr>
 	</div>
-	<div id="grid">
-		<div>a</div>
-		<div>b</div>
-	</div>
+	<form id="form" action="">
+		<div id="grid">
+			<div>a</div>
+			<div>b</div>
+			<div>c</div>
+		</div>
+	</form>
 {% endblock %}
 
 {%- block script %}
 	{{ super() }}
 	<script>
 		const add = document.querySelector('[data-action=add]');
+		const change = document.querySelector('[data-action=change]');
+		const grid = document.getElementById('grid');
 
 		add.addEventListener('click', (e) => {
-				const grid = document.getElementById('grid');
 				const item = document.createElement('div');
 
 				item.style.backgroundColor = '#f0f';
 				item.textContent = 'c'
+				
 				grid.appendChild(item);
 		});
+
+		change.addEventListener('click', (e) => {
+				changeLayout(grid);
+		});
+
+		function changeLayout(grid) {
+			const currentTemplate = grid.style.gridTemplateColumns;
+
+			if (currentTemplate === 'repeat(4, 1fr)') {
+				grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
+			} else {
+				grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
+			}
+		}
 	</script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss
index ac1dc6c..3942e0a 100644
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@@ -1,18 +1,18 @@
 .body_drag {
 	height: 100vh;
 	// padding: $space_basic;
+
+	button {
+		@extend .io_button;
+		position: fixed;
+		top: 8px;
+		right: 8px;
+		margin: 0;
+	}
 }
 
 #space {
 	position: relative;
 	height: 100%;
 	background-color: $color-dark;
-}
-
-#addFrame {
-	@extend .io_button;
-	position: fixed;
-	top: 8px;
-	right: 8px;
-	margin: 0;
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
index 265663c..e52b8af 100644
--- a/source/style/modules/ui/_form_module.scss
+++ b/source/style/modules/ui/_form_module.scss
@@ -1,14 +1,18 @@
-#form body {
+.body_form {
 	margin: 0;
-	background-color: #808080;
+	background-color: $color-dark;
 }
 
 #head {
 	// display: flex;
-}
 
-h1 {
-	margin: 0;
+	button {
+			@extend .io_button;
+	}
+
+	h1 {
+		margin: 0;
+	}
 }
 
 #grid {
@@ -16,6 +20,7 @@ h1 {
 	gap: 8px;
 	grid-template-columns: repeat(4, 1fr);
 	grid-auto-rows: minmax(64px, auto);
+	margin-inline: $space_small;
 }
 
 #grid>div {