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

feat: Consolidate body navigation

Browse source 
- Update html spec in components page
- Add form components
- Add JS for components which is not globally available
- Move body navigation to main template
- Reformat main template
This commit is contained in:
sthag 2025-06-18 19:31:37 +02:00
parent 8f15664d57
commit 4fcd7742a8
6 changed files with 167 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

26
source/screens/demo/basics.njk
View file

@ -15,8 +15,6 @@ tags:
{% block main %} {% block main %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
{% include "hippie/partials/_body_nav.njk" %}
<div id="begin" class="demo__intro"> <div id="begin" class="demo__intro">
Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br> Dies ist einfach nur Text.<br>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.<br>Das ist normalerweise nicht vorgesehen und wird hier nur zur Einführung und Anschauung verwendet.<br><br>
<article> <article>
@ -647,6 +645,7 @@ tags:
nur lesbar gemacht werden oder mittels nur lesbar gemacht werden oder mittels
<code>disabled</code> <code>disabled</code>
gänzlich deaktiviert werden.</p> gänzlich deaktiviert werden.</p>
{# // TODO: Abstände, besonders margin generell überarbeiten #}
<p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled"> <p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
<button disabled="disabled">Deaktivierte Schaltfläche</button> <button disabled="disabled">Deaktivierte Schaltfläche</button>
</p> </p>
@ -867,27 +866,4 @@ tags:
</header> </header>
</section> </section>
</div> </div>
{% endblock %}
{% block script %}
{{ super() }}
<script>
assetsLoaded = true;
logPerf('Assets loaded.', assetsLoaded);
// Page specific
// ------------------------------------------------------------------------------
// Create instance of object made by contructor function
var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
$(document).ready(function () {
logPerf('JQ document ready event fired.');
});
$(document).scroll(function () {
scrollUi.check();
});
logPerf('Application ready... not.');
</script>
{% endblock %} {% endblock %}

120
source/screens/demo/components.njk
View file

@ -15,10 +15,6 @@ tags:
{% block main %} {% block main %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
{% include "hippie/partials/_body_nav.njk" %}
</div>
<div id="begin" class=""> <div id="begin" class="">
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
@ -43,10 +39,10 @@ tags:
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Übersicht aller Elemente</h1> <h1>Übersicht aller Elemente</h1>
<p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://www.w3.org/TR/2017/REC-html52-20171214/index.html#contents">www.w3.org/TR/2017/REC-html52-20171214/index.html#contents</a>) verwendet.</p> <p>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in Gruppen eingeteilt, die auch das W3Consortium (<a href="https://html.spec.whatwg.org/multipage/#toc-semantics">html.spec.whatwg.org/multipage/#toc-semantics</a>) verwendet.</p>
<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p> <p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
</header> </header>
<pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h4{Varianten}</code></pre> <pre class="pre_code"><code>article>h1+p{Elemente:}+pre+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
<article> <article>
<h1 id="sections">Bereiche</h1> <h1 id="sections">Bereiche</h1>
<p>Elemente:</p> <p>Elemente:</p>
@ -94,7 +90,7 @@ tags:
<h2>&lt;table&gt;</h2> <h2>&lt;table&gt;</h2>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre> <pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
<table class="width_full table_fix js_pop"> <table class="width_full table_fix">
<thead> <thead>
<tr> <tr>
<th class="cell_pre" scope="col"></th> <th class="cell_pre" scope="col"></th>
@ -182,13 +178,117 @@ tags:
</tfoot> </tfoot>
</table> </table>
</article> </article>
<article>
<h1 id="forms">Formulare</h1>
<p>Elemente:</p>
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
<h2>&lt;input&gt;</h2>
<div class="flex_column_wrap">
<div class="flex_column"><input value="Undefiniert"/></div>
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
<div class="flex_column"><input type="button" value="Auswählen"></div>
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
</div>
<h4>Varianten</h4>
<div id="capsCheck">
<form action="">
<input type="password" onkeypress="capLock(event)"/>
<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
<input type="text"/>
<span id="error">Caps Lock is ON.</span>
</form>
</div>
<h2>&lt;select&gt;</h2>
<select name="F">
<option value="0">
Plain list</option>
<option value="1" selected="selected">
Fancy list</option>
<option value="2">
Table list</option>
</select>
</article>
</section> </section>
</div> </div>
{% endblock %} {% endblock %}
{% block script %} {% block script %}
{{ super() }} {{ super() }}
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script> <script>
{{ log.asset(true) }} function capLock(e) {
{{ log.log('Assets loaded.', assetsLoaded) }} console.log('capLock');
kc = e.keyCode
? e.keyCode
: e.which;
sk = e.shiftKey
? e.shiftKey
: (
(kc == 16)
? true
: false);
if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
document
.getElementById('hint')
.style
.visibility = 'visible';
} else {
document
.getElementById('hint')
.style
.visibility = 'hidden';
}
}
function capsDetect() {
const body = document.getElementsByTagName('body')[0];
const capsWarning = document.getElementById('error');
let isShiftPressed = false;
let isCapsOn = false;
console.log(body);
body.addEventListener('keydown', function (e) {
var keyCode = e.keyCode
? e.keyCode
: e.which;
if (keyCode === 16) {
isShiftPressed = true;
}
});
body.addEventListener('keyup', function (e) {
var keyCode = e.keyCode
? e.keyCode
: e.which;
if (keyCode === 16) {
isShiftPressed = false;
}
if (keyCode === 20) {
if (isCapsOn) {
isCapsOn = false;
capsWarning.style.display = 'none';
} else {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
}
}
});
body.addEventListener('keypress', function (e) {
var keyCode = e.keyCode
? e.keyCode
: e.which;
if (keyCode <= 40)
return;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
} else {
capsWarning.style.display = 'none';
}
});
}
// TODO: Beide Varianten lauffähig machen
// capsDetect();
</script>
{% endblock %} {% endblock %}

5
source/screens/demo/index.njk
View file

@ -74,12 +74,9 @@ tags:
{{ super() }} {{ super() }}
<script> <script>
assetsLoaded = true; assetsLoaded = true;
logPerf('BODY :: Assets loaded, running page specific script...'); logPerf('BODY :: Assets loaded, running page specific script...', assetsLoaded);
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
$(document).ready(function () {
logPerf('EVENT :: jQuery \'ready\' event fired.');
});
logPerf('Application ready... not.'); logPerf('Application ready... not.');
</script> </script>
{% endblock %} {% endblock %}

16
source/screens/demo/introduction.njk
View file

@ -15,8 +15,6 @@ tags:
{% block main %} {% block main %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
{% include "hippie/partials/_body_nav.njk" %}
<section class="sec_main_center"> <section class="sec_main_center">
<header> <header>
<hgroup> <hgroup>
@ -41,19 +39,9 @@ tags:
logPerf('Assets loaded.', assetsLoaded); logPerf('Assets loaded.', assetsLoaded);
// Page specific // Page specific
// ------------------------------------------------------------------------------ // ------------------------------------------------------------------------------
// Create instance of object made by contructor function composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
var scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown')); composeMail('.general', 'name', 'domain', 'tld', '', '')
var helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
$(document).ready(function () {
logPerf('JQ document ready event fired.');
composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
composeMail('.general', 'name', 'domain', 'tld', '', '')
});
$(document).scroll(function () {
scrollUi.check();
});
logPerf('Application ready... not.'); logPerf('Application ready... not.');
</script> </script>
{% endblock %} {% endblock %}

4
source/screens/demo/layouts.njk
View file

@ -15,10 +15,6 @@ tags:
{% block main %} {% block main %}
<!-- {{ page.fileSlug }}.page --> <!-- {{ page.fileSlug }}.page -->
<div class="temp_layer">
<!-- <div class="exp_overlay_btn exp_help_btn"> <span class="span_solo">?</span> </div> -->
{% include "hippie/partials/_body_nav.njk" %}
</div>
<div id="begin" class=""> <div id="begin" class="">
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">

92
source/templates/hippie/_main.njk
View file

@ -3,53 +3,67 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}"> <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
{% block head %} {% block head %}
<title>{{ hippie.titlePrefix }} <title>{{ hippie.titlePrefix }}
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title> {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
{% block meta %} {% block meta %}
{% include "hippie/partials/_head_meta.njk" %} {% include "hippie/partials/_head_meta.njk" %}
{% endblock %} {% endblock %}
{% include "hippie/partials/_head_script.njk" %} {% include "hippie/partials/_head_script.njk" %}
{{ log.debug(hippie.debugMode, true) }} {{ log.debug(hippie.debugMode, true) }}
{{ log.start() }} {{ log.start() }}
{% block links %} {% block links %}
{% include "hippie/partials/_head_links.njk" %} {% include "hippie/partials/_head_links.njk" %}
{% endblock %} {% endblock %}
{{ log.log('HEAD end :: Links parsed, starting to load.') }} {{ log.log('HEAD end :: Links parsed, starting to load.') }}
{% endblock %} {% endblock %}
</head> </head>
<body class="{{ bodyClass }}"> <body class="{{ bodyClass }}">
{{ log.log('BODY start') }} {{ log.log('BODY start') }}
{% include "hippie/partials/_body_hover.njk" %} {% include "hippie/partials/_body_hover.njk" %}
<div id="root"> {% include "hippie/partials/_body_nav.njk" %}
{% include "hippie/partials/_header.njk" %} <div id="root">
{% include "hippie/partials/_header.njk" %}
<main class="main_site"> <main class="main_site">
{% block main %}{% endblock %} {% block main %}{% endblock %}
</main> </main>
{% include "hippie/partials/_footer.njk" %} {% include "hippie/partials/_footer.njk" %}
</div> </div>
{% block script %} {% block script %}
{{ log.log('BODY :: Loading script assets...') }} {{ log.log('BODY :: Loading script assets...') }}
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #} {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
<!-- build:js js/main.concat.min.js --> <!-- build:js js/main.concat.min.js -->
{# // TODO: Remove dependecy to jQuery; at least maek it optional #} {# // TODO: Remove dependecy to jQuery; at least maek it optional #}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="{{ pageBase }}js/variables.js"></script> <script src="{{ pageBase }}js/variables.js"></script>
<script src="{{ pageBase }}js/functions.js"></script> <script src="{{ pageBase }}js/functions.js"></script>
<script src="{{ pageBase }}js/global.js"></script> <script src="{{ pageBase }}js/global.js"></script>
{% endblock %} <script>
// Create instances of objects made by contructor functions
let scrollUi = new HippieScroll($('.js_scrolltop'), $('.js_scrolldown'));
let helpUi = new HippieMeta($('.js_showmeta'), $('.js_pop'));
{{ log.log('BODY end :: Page script might still be loading.') }} document.addEventListener('scroll', () => {
</body> scrollUi.check();
});
$(document).ready(function () {
logPerf('EVENT :: jQuery \'ready\' event fired.');
});
</script>
{% endblock %}
{{ log.log('BODY end :: Page script might still be loading.') }}
</body>
</html> </html>