interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Changes to template inheritance

Browse source 
Changes to what goes where.
This commit is contained in:
sthag 2026-03-01 16:31:10 +01:00
parent 10c71a3909
commit 48b6e1d0ed
8 changed files with 73 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

114
source/screens/demo/basics.liquid
View file

@ -495,7 +495,7 @@ tags:
oder das Element H<sub>2</sub>O</p> oder das Element H<sub>2</sub>O</p>
<p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden. <p>Die Zeichen in Absätzen bis hin zu ganzen Texten können, mit einem geeigneten Eingabegerät, markiert werden.
Dies stellt sich wie folgt dar:</p> Dies stellt sich wie folgt dar:</p>
<p class="txt_center">Bei <mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p> <p class="txt_center">Bei<mark class="mark_cursor">spiel zum mark</mark>ieren 😉.</p>
<p>Eine Markierung kann, mittels <p>Eine Markierung kann, mittels
<code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar: <code>&lt;mark&gt;</code>, auch durch den Autor geschehen. Diese stellt sich ein wenig anders dar:
<mark>Diese Worte sind markiert.</mark> <mark>Diese Worte sind markiert.</mark>
@ -881,61 +881,63 @@ tags:
<p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen <p>Innerhalb einer Gruppe können nicht nur Ein- und Ausgabefelder platziert werden. Andere Elemente ergänzen
Information oder lockern das Erscheinungsbild auf.</p> Information oder lockern das Erscheinungsbild auf.</p>
<p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p> <p>Hier nun eine Liste weiterer Arten von Eingabefeldern:</p>
<div class="grid grid_column_2"> <form action="">
<label class="">Farbauswahl<br> <div class="grid grid_column_2">
<code>&lt;input[type="color"]&gt;</code> <label class="">Farbauswahl<br>
</label> <code>&lt;input[type="color"]&gt;</code>
<div><input class="" type="color"></div> </label>
<label class="">Bereichsauswahl<br> <div><input class="" type="color"></div>
<code>&lt;input[type="range"]&gt;</code> <label class="">Bereichsauswahl<br>
</label> <code>&lt;input[type="range"]&gt;</code>
<div><input class="" type="range"></div> </label>
<label class="">Datum<br> <div><input class="" type="range"></div>
<code>&lt;input[type="date"]&gt;</code> <label class="">Datum<br>
</label> <code>&lt;input[type="date"]&gt;</code>
<div><input class="input_io" type="date"></div> </label>
<label class="">Uhrzeit<br> <div><input class="input_io" type="date"></div>
<code>&lt;input[type="time"]&gt;</code> <label class="">Uhrzeit<br>
</label> <code>&lt;input[type="time"]&gt;</code>
<div><input class="input_io" type="time"></div> </label>
<label class="">Datum und Zeit<br> <div><input class="input_io" type="time"></div>
<code>&lt;input[type="datetime-local"]&gt;</code> <label class="">Datum und Zeit<br>
</label> <code>&lt;input[type="datetime-local"]&gt;</code>
<div><input class="input_io" type="datetime-local"></div> </label>
<label class="">Kalendermonat<br> <div><input class="input_io" type="datetime-local"></div>
<code>&lt;input[type="month"]&gt;</code> <label class="">Kalendermonat<br>
</label> <code>&lt;input[type="month"]&gt;</code>
<div><input class="input_io" type="month"></div> </label>
<label class="">Kalenderwoche<br> <div><input class="input_io" type="month"></div>
<code>&lt;input[type="week"]&gt;</code> <label class="">Kalenderwoche<br>
</label> <code>&lt;input[type="week"]&gt;</code>
<div><input class="input_io" type="week"></div> </label>
<label class="">@dresse<br> <div><input class="input_io" type="week"></div>
<code>&lt;input[type="email"]&gt;</code> <label class="">@dresse<br>
</label> <code>&lt;input[type="email"]&gt;</code>
<div><input class="input_io" type="email" placeholder="@"></div> </label>
<label class="">Passwort<br> <div><input class="input_io" placeholder="@" type="email"></div>
<code>&lt;input[type="password"]&gt;</code> <label class="">Passwort<br>
</label> <code>&lt;input[type="password"]&gt;</code>
<div><input class="input_io" type="password" value="admin"></div> </label>
<label class="">Telefonnummer<br> <div><input class="input_io" value="admin" autocomplete="off" type="password"></div>
<code>&lt;input[type="tel"]&gt;</code> <label class="">Telefonnummer<br>
</label> <code>&lt;input[type="tel"]&gt;</code>
<div><input class="input_io" type="tel" value="0190123456"></div> </label>
<label class="">URL<br> <div><input class="input_io" value="0190123456" type="tel"></div>
<code>&lt;input[type="url"]&gt;</code> <label class="">URL<br>
</label> <code>&lt;input[type="url"]&gt;</code>
<div><input class="input_io" type="url" placeholder="url://"></div> </label>
<label class="">Suche<br> <div><input class="input_io" placeholder="url://" type="url"></div>
<code>&lt;input[type="search"]&gt;</code> <label class="">Suche<br>
</label> <code>&lt;input[type="search"]&gt;</code>
<div><input class="input_io" type="search"></div> </label>
<label class="">Datei<br> <div><input class="input_io" type="search"></div>
<code>&lt;input[type="file"]&gt;</code> <label class="">Datei<br>
</label> <code>&lt;input[type="file"]&gt;</code>
<div><input class="" type="file"></div> </label>
<label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/> <div><input class="" type="file"></div>
</div> <label class="">Bild</label><input class="" type="image" alt="Alternativer Text"/>
</div>
</form>
</fieldset> </fieldset>
<h2>Interaktive Elemente</h2> <h2>Interaktive Elemente</h2>

8
source/screens/demo/examples/clock.liquid
View file

@ -15,10 +15,12 @@ tags:
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ block.super -}} <script src="/vendor/hippie-script.js"></script>
<script src="/js/globals.js"></script>
<script src="/js/app.js"></script>
<script> <script>
// TODO: Mondphase ergänzen // TODO: DateDisplay und TimeDisplay benutzen
class HippieClock { class HippieClock {
constructor(element, date, options) { constructor(element, date, options) {
this.element = element; this.element = element;
@ -129,6 +131,7 @@ tags:
}); });
} }
// TODO: Erfassung für geänderte Formen ergänzen
update() { update() {
const second = this.getTime().second; const second = this.getTime().second;
const minute = this.getTime().minute; const minute = this.getTime().minute;
@ -336,6 +339,7 @@ tags:
clock.addCircle('base', .5, 1); clock.addCircle('base', .5, 1);
clock.draw(); clock.draw();
// TODO: Alternative mit requestAnimationFrame()
setInterval(() => { setInterval(() => {
clock.update(); clock.update();
}, 1000); }, 1000);

6
source/screens/demo/examples/ui/windows.liquid
View file

@ -50,9 +50,8 @@ tags:
{% endblock %} {% endblock %}
{%- block script %} {%- block script %}
{% comment %}<script src="/js/globals.js"></script>{% endcomment %} {{ block.super -}}
<script src="/vendor/hippie-script.js"></script>
<script src="/js/app.js"></script>
<script src="/js/windows.js"></script> <script src="/js/windows.js"></script>
<script> <script>
console.log(HIPPIE.brand); console.log(HIPPIE.brand);
@ -61,6 +60,7 @@ tags:
const start = document.querySelector('[data-action=start]'); const start = document.querySelector('[data-action=start]');
const draggableElement = document.getElementById('task-bar'); const draggableElement = document.getElementById('task-bar');
const placeholderElement = document.getElementById('placeholder'); const placeholderElement = document.getElementById('placeholder');
// TODO: TimeDisplay in HippieTaskbar aufnehmen
const timeElement = document.getElementById('time'); const timeElement = document.getElementById('time');
const taskBar = new HippieTaskBar(draggableElement, placeholderElement); const taskBar = new HippieTaskBar(draggableElement, placeholderElement);

10
source/screens/demo/index.liquid
View file

@ -62,14 +62,4 @@ tags:
</ul> </ul>
</div> </div>
</div> </div>
{% endblock %}
{% block script %}
{{ block.super -}}
{% render 'hippie/partials/log-assets', state: true -%}
{% render 'hippie/partials/log-log', msg: 'BODY :: Assets loaded, running page specific script...', arg: true -%}
<script>
// Page script
</script>
{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
{% endblock %} {% endblock %}

2
source/templates/hippie/default.liquid
View file

@ -29,7 +29,7 @@
<body{{ bodyClassAttr }}> <body{{ bodyClassAttr }}>
{%- block body %}{% endblock -%} {%- block body %}{% endblock -%}
<script> <script>
// {{ title }} script // {{ title }} script using default template
</script> </script>
{%- block script %}{% endblock -%} {%- block script %}{% endblock -%}
</body> </body>

5
source/templates/hippie/full.liquid
View file

@ -37,9 +37,12 @@
{%- block body %}{% endblock -%} {%- block body %}{% endblock -%}
{% render 'hippie/partials/log-log' with 'BODY :: Loading script assets...' as msg -%} {% render 'hippie/partials/log-log' with 'BODY :: Loading script assets...' as msg -%}
<script> <script>
// Full script // {{ title }} script using full template
</script> </script>
{%- block script %}{% endblock -%} {%- block script %}{% endblock -%}
{% render 'hippie/partials/log-assets', state: true -%}
{% render 'hippie/partials/log-log', msg: 'BODY :: Assets loaded, running page specific script...', arg: true -%}
{% render 'hippie/partials/log-log' with 'BODY end :: Page script might still be loading.' as msg -%} {% render 'hippie/partials/log-log' with 'BODY end :: Page script might still be loading.' as msg -%}
{% render 'hippie/partials/log-log' with 'Application ready... or is it?' as msg -%}
</body> </body>
</html> </html>

2
source/templates/hippie/page.liquid
View file

@ -59,4 +59,4 @@
logPerf('EVENT :: jQuery \'ready\' event fired.'); logPerf('EVENT :: jQuery \'ready\' event fired.');
}); });
</script> </script>
{% endblock %} {% endblock %}

6
source/templates/hippie/simple.liquid
View file

@ -7,9 +7,3 @@
{{ block.super -}} {{ block.super -}}
<link href="/css/demo.css" media="all" rel="stylesheet"/> <link href="/css/demo.css" media="all" rel="stylesheet"/>
{% endblock %} {% endblock %}
{% block script %}
<script src="/vendor/hippie-script.js"></script>
<script src="/js/globals.js"></script>
<script src="/js/app.js"></script>
{% endblock %}