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