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/intro.njk b/source/screens/demo/examples/intro.njk index 07eb1a1..44898cc 100644 --- a/source/screens/demo/examples/intro.njk +++ b/source/screens/demo/examples/intro.njk @@ -5,9 +5,8 @@ tags: --- {% set pageId = "init" %} -{% set pageClass = "html_ui" %} -{% extends "demo/_app.njk" %} +{% extends "hippie/_app.njk" %} {% import "hippie/macros/_placeholder.njk" as ph %} {% block title %} {{ title }} diff --git a/source/screens/demo/examples/ui/cli.njk b/source/screens/demo/examples/ui/cli.njk new file mode 100755 index 0000000..dc0800f --- /dev/null +++ b/source/screens/demo/examples/ui/cli.njk @@ -0,0 +1,62 @@ +--- +title: CLI +tags: + - ui +--- +{% set pageId = page.fileSlug %} +{% set bodyClass = "body_cli" %} + +{% extends "hippie/_app_frame.njk" %} + +{% block body %} +
+
+ 
Previous prompt
+
+
+ + +
+
+{% endblock %} + +{%- block script %} + {{ super() }} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk index b943fee..ecd3001 100755 --- a/source/screens/demo/examples/ui/drag.njk +++ b/source/screens/demo/examples/ui/drag.njk @@ -4,28 +4,23 @@ tags: - ui --- {% set pageId = page.fileSlug %} -{% set pageClass = "h_full_view" %} -{% set bodyClass = "body_ui" %} -{% extends "demo/_app.njk" %} - -{% block title %}{{ title }} -{% endblock %} - -{% block links %} - {{ super() }} - -{% endblock %} - -{% block head %} - {{ super() }} -{% endblock %} +{% extends "hippie/_app_frame.njk" %} {% block body %}
+
+
+
+ {{ io.frameHeader('title-bar') }} +
+ {{ io.frameFooter('mode-bar') }} +
+
+
{% endblock %} {%- block script %} @@ -34,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', () => { @@ -43,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); {% 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 new file mode 100755 index 0000000..72de77a --- /dev/null +++ b/source/screens/demo/examples/ui/explorer.njk @@ -0,0 +1,156 @@ +--- +title: GUI explorer +tags: + - ui +--- +{% set pageId = page.fileSlug %} + +{% extends "hippie/_app_frame.njk" %} + +{% block body %} + {{ io.frameHeader('title-bar') }} +
+ +
+
+ + +
+
+ +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
namedatetypesize
folderYYYY-MM-DDfolder4KB
fileYYYY-MM-DDfolder1B
+
+ +
+
+ {{ io.frameFooter('mode-bar') }} +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk index 29ab5bd..2e6c088 100644 --- a/source/screens/demo/examples/ui/form.njk +++ b/source/screens/demo/examples/ui/form.njk @@ -3,23 +3,10 @@ title: Form tags: - ui --- -{% set pageClass = "html_ui" %} -{% set bodyClass = "body_ui" %} - -{% extends "demo/_app.njk" %} - -{% block title %}{{ title }} -{% endblock %} - -{% block links %} - -{% endblock %} - -{% block head %} - {{ super() }} -{% endblock %} +{% extends "hippie/_app_frame.njk" %} {% block body %} + {{ io.frameHeader('title-bar') }}

Formulare

diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk index 4e5367a..ec107c2 100644 --- a/source/screens/demo/examples/ui/index.njk +++ b/source/screens/demo/examples/ui/index.njk @@ -4,10 +4,7 @@ tags: - demoExample - index --- - -{% set pageClass = "html_ui" %} - -{% extends "demo/_app.njk" %} +{% extends "hippie/_app.njk" %} {% import "hippie/macros/_placeholder.njk" as ph %} {% block title %} @@ -25,7 +22,7 @@ tags: {% block body %}