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

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

@ -15,10 +15,6 @@ tags:
{% block main %}
<!-- {{ 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="">
<section class="sec_main_center">
<header class="header_txt">
@ -43,10 +39,10 @@ tags:
<section class="sec_main_center">
<header class="header_txt">
<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>
</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>
<h1 id="sections">Bereiche</h1>
<p>Elemente:</p>
@ -94,7 +90,7 @@ tags:
<h2>&lt;table&gt;</h2>
<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>
<table class="width_full table_fix js_pop">
<table class="width_full table_fix">
<thead>
<tr>
<th class="cell_pre" scope="col"></th>
@ -182,13 +178,117 @@ tags:
</tfoot>
</table>
</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>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="{{ pageBase }}vendor/jq-sticky-anything.min.js"></script>
{{ log.asset(true) }}
{{ log.log('Assets loaded.', assetsLoaded) }}
<script>
function capLock(e) {
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 %}