feat: Optimize components screen

- Fix typos
- Format
- Rework shift and capslock detection

source/screens/demo/components.liquid

@@ -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>Es werden alle grundlegenden Elemente sowie ihre gestalteten Varianten angegeben. Die Elemente sind in
-		<p>Zu jedem Element werden alle Attribute aufgelistet und die Umsetzung im HTML-Dokument als Emmet-Syntax dargestellt.</p>
+			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">
+			<div class="box_cube"><span>Text</span></div>
-				<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)"/>
+				<input id="inpPass" type="password"/>
-				<div id="hint" style="visibility:hidden">Caps Lock is on.</div>
+				<span id="hintPass" style="visibility:hidden"><kbd>Shift</kbd> is pressed.</span>
-				<input type="text"/>
+				<br>
-				<span id="error">Caps Lock is ON.</span>
+				<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) {
+	const capsHint = document.getElementById('hintPass');
-		console.log('capLock');
+	let isShiftPressed = false;
-		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('inpPass').addEventListener('keydown', shiftDetect);
-			document
+
-				.getElementById('hint')
+	function shiftDetect(event) {
-				.style
+		if (event.getModifierState('Shift')) {
-				.visibility = 'visible';
+			isShiftPressed = true;
+			capsHint.style.visibility = 'visible';
 		} else {
-			document
+			isShiftPressed = false;
-				.getElementById('hint')
+			capsHint.style.visibility = 'hidden';
-				.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 capsHint = document.getElementById('hintText');
-		const capsWarning = document.getElementById('error');
-		let isShiftPressed = false;
 		let isCapsOn = false;
 
-		console.log(body);
+		document.getElementById('inpText').addEventListener('keyup', function (e) {
-		body.addEventListener('keydown', function (e) {
+			if (event.getModifierState('CapsLock')) {
-			var keyCode = e.keyCode
+				capsHint.style.display = 'inline';
-				? 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';
+				capsHint.style.display = 'none';
+				isCapsOn = false;
 			}
+
+			console.log('CapsLock', isCapsOn);
 		});
 	}
 
-	// TODO: Beide Varianten lauffähig machen
+	capsDetect();
-	// capsDetect();
 </script>
 {% endblock %}