From 1ddba29d9c044d22a39c90c3458727f6c3605d22 Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Mon, 23 Jun 2025 22:31:18 +0200
Subject: [PATCH] feat: Update drag page and other small things

- Add parameter to NewDiv class
- Add instance with content to drag page
- Drag page now also uses frame template
- Use macro for footer in explorer
---
 source/code/_ui.js                           | 18 ++++++++++--
 source/screens/demo/examples/ui/drag.njk     | 30 +++++++++++---------
 source/screens/demo/examples/ui/explorer.njk | 11 +------
 source/style/modules/ui/_drag_module.scss    |  4 +++
 source/style/modules/ui/_frame_module.scss   |  6 ++--
 5 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/source/code/_ui.js b/source/code/_ui.js
index 24e034a..01a489a 100644
--- a/source/code/_ui.js
+++ b/source/code/_ui.js
@@ -1,17 +1,18 @@
 // Creates a div element which is draggable
 class NewDiv {
-  constructor(x, y, width, height, backgroundColor) {
+  constructor(x, y, width, height, backgroundColor, content) {
     this.x = x;
     this.y = y;
     this.width = width;
     this.height = height;
     this.backgroundColor = backgroundColor;
     this.element = null;
+    this.content = content;
   }
 
   // Create the div element
   createDiv() {
-    this.element = document.createElement('div');
+    this.element = this._content;
     this.element.style.position = 'absolute';
     this.element.style.left = `${this.x}px`;
     this.element.style.top = `${this.y}px`;
@@ -93,6 +94,19 @@ class NewDiv {
     loadData();
   }
 
+  // FIXME: this.element wird von appendToFrame() verwendet
+  get content() {
+    return this._content = this.content;
+  }
+
+  set content(value) {
+    if (!value) {
+      value = document.createElement('div');
+    }
+
+    this._content = value;
+  }
+
   // Append the div to the space
   appendToFrame(space) {
     this.element.id = `newDiv${space.children.length}`;
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 873a2ab..ecd3001 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -5,25 +5,22 @@ tags:
 ---
 {% set pageId = page.fileSlug %}
 
-{% extends "hippie/_app.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-  {{ super() }}
-{% endblock %}
+{% extends "hippie/_app_frame.njk" %}
 
 {% block body %}
   <header class="io pos_fix pin_top pin_right pin_left">
     <button data-action="add">Add</button>
   </header>
   <div id="space"></div>
+  <div>
+    <div id="test">
+      <div class="body_frame">
+        {{ io.frameHeader('title-bar') }}
+        <main></main>
+        {{ io.frameFooter('mode-bar') }}
+      </div>
+    </div>
+  </div>
 {% endblock %}
 
 {%- block script %}
@@ -32,6 +29,7 @@ tags:
     // Get the space element
     const space = document.getElementById('space');
     const add = document.querySelector('[data-action=add]');
+    const test = document.getElementById('test');
 
     // Add event listener to the add space button
     add.addEventListener('click', () => {
@@ -41,8 +39,12 @@ tags:
     });
 
     // Create a new NewDiv instance
-    const newDiv = new NewDiv(100, 100, 800, 600, '#000');
+    const newDiv = new NewDiv(100, 100, 200, 200, '#000');
     newDiv.createDiv();
     newDiv.appendToFrame(space);
+
+    const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
+    explorer.createDiv();
+    explorer.appendToFrame(space);
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/explorer.njk b/source/screens/demo/examples/ui/explorer.njk
index 869bcf8..72de77a 100755
--- a/source/screens/demo/examples/ui/explorer.njk
+++ b/source/screens/demo/examples/ui/explorer.njk
@@ -152,14 +152,5 @@ tags:
 			</footer>
 		</section>
 	</main>
-	<footer class="io">
-		<nav>
-			<button>mode</button>
-			<span>mode-bar</span>
-		</nav>
-		<nav>
-			<div class="spacer a"></div>
-			<button>action</button>
-		</nav>
-	</footer>
+	{{ io.frameFooter('mode-bar') }}
 {% 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 a345922..83f1abb 100644
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@@ -1,4 +1,8 @@
 #space {
 	position: relative;
 	height: 100%;
+
+	.body_frame {
+		background-color: white;
+	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss
index dc99b1c..a8e804d 100755
--- a/source/style/modules/ui/_frame_module.scss
+++ b/source/style/modules/ui/_frame_module.scss
@@ -27,9 +27,9 @@
 
 		flex: 1;
 
-		aside {
-			// background-color: rgba(255, 255, 255, .1);
-		}
+		// aside {
+		// 	background-color: rgba(255, 255, 255, .1);
+		// }
 
 		section {