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

feat: Optimize components screen

Browse source 
- Fix typos
- Format
- Rework shift and capslock detection
This commit is contained in:
sthag 2026-02-17 20:33:44 +01:00
parent 63c899b789
commit f28bed372c
1 changed files with 50 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

124
source/screens/demo/components.liquid
View file

@ -31,8 +31,12 @@ 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://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>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+h2{&lt;tag&gt;}+h4{Varianten}</code></pre>
<article>
@ -40,7 +44,8 @@ tags:
<p>Elemente:</p>
<pre>// body<br>// article<br>// section<br>// nav<br>// aside<br>// h1-h6<br>// header<br>// footer</pre>
<h2>&lt;body&gt;</h2>
<p>Keine speziellen Attribute. Bekommt überlicherweise allgemeine Klassen zur Steuerung der Abmessungen zugewiesen.</p>
<p>Keine speziellen Attribute. Bekommt üblicherweise allgemeine Klassen zur Steuerung der Abmessungen
zugewiesen.</p>
<h2>&lt;article&gt;</h2>
<article>Ein Artikel.</article>
<h2>&lt;section&gt;</h2>
@ -85,7 +90,7 @@ tags:
<p>Innerhalb eines <code>&lt;header&gt;</code>.</p>
</header>
<h2>&lt;footer&gt;</h2>
<p>Bekommt überlicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
<p>Bekommt üblicherweise Klassen zur Positionierung und der Abmessungen zugewiesen.</p>
<footer>Fußbereich</footer>
<div style="position:relative;height:256px;background-color:#b7e0f0;">
{% render "hippie/partials/footer-pinned.liquid" %}
@ -167,12 +172,11 @@ tags:
<h4>Varianten</h4>
<pre class="pre_code"><code>div.div_info>p</code></pre>
<div class="div_info">
<p>Absatz in Informationsbox.</p>
<p>Absatz in einer Box mit dem Typ <i>Information</i>.</p>
</div>
<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
<div class="box_space">
<div class="box_cube">
<span>Text</span></div>
<div class="box_cube"><span>Text</span></div>
</div>
<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
<div class="box_placeholder"></div>
@ -299,20 +303,24 @@ tags:
</div>
<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>
<input id="inpPass" type="password"/>
<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
<br>
<input id ="inpText" type="text"/>
<span id="hintText"><kbd>CapsLock</kbd> is on.</span>
</form>
</div>
<h2>&lt;select&gt;</h2>
<select name="F">
<option value="0">
Plain list</option>
Plain list
</option>
<option value="1" selected="selected">
Fancy list</option>
Fancy list
</option>
<option value="2">
Table list</option>
Table list
</option>
</select>
</article>
</section>
@ -321,79 +329,47 @@ tags:
{% block script %}
{{ block.super -}}
<script>
function capLock(e) {
console.log('capLock');
kc = e.keyCode
? e.keyCode
: e.which;
sk = e.shiftKey
? e.shiftKey
: (
(kc == 16)
? true
: false);
const capsHint = document.getElementById('hintPass');
let isShiftPressed = false;
if (((kc >= 65 && kc <= 90) && !sk) || ((kc >= 97 && kc <= 122) && sk)) {
document
.getElementById('hint')
.style
.visibility = 'visible';
document.getElementById('inpPass').addEventListener('keydown', shiftDetect);
function shiftDetect(event) {
if (event.getModifierState('Shift')) {
isShiftPressed = true;
capsHint.style.visibility = 'visible';
} else {
document
.getElementById('hint')
.style
.visibility = 'hidden';
isShiftPressed = false;
capsHint.style.visibility = 'hidden';
}
console.log('Shift', isShiftPressed);
}
document.getElementById('inpPass').addEventListener('keyup', (event) => {
if (event.key === 'Shift') {
isShiftPressed = false;
capsHint.style.visibility = 'hidden';
}
});
function capsDetect() {
const body = document.getElementsByTagName('body')[0];
const capsWarning = document.getElementById('error');
let isShiftPressed = false;
const capsHint = document.getElementById('hintText');
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) {
document.getElementById('inpText').addEventListener('keyup', function (e) {
if (event.getModifierState('CapsLock')) {
capsHint.style.display = 'inline';
isCapsOn = true;
capsWarning.style.display = 'inline-block';
} else {
capsWarning.style.display = 'none';
capsHint.style.display = 'none';
isCapsOn = false;
}
console.log('CapsLock', isCapsOn);
});
}
// TODO: Beide Varianten lauffähig machen
// capsDetect();
capsDetect();
</script>
{% endblock %}