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

@@ -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}`;

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 %}

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 %}

source/style/modules/ui/_drag_module.scss

@@ -1,4 +1,8 @@
 #space {
 	position: relative;
 	height: 100%;
+
+	.body_frame {
+		background-color: white;
+	}
 }

source/style/modules/ui/_frame_module.scss

@@ -27,9 +27,9 @@
 
 		flex: 1;
 
-		aside {
+		// aside {
 		// 	background-color: rgba(255, 255, 255, .1);
-		}
+		// }
 
 		section {