feat: Consolidate body navigation

- 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
2025-06-18 19:31:37 +02:00 · 2025-06-18 19:31:37 +02:00 · 4fcd7742a8
commit 4fcd7742a8
parent 8f15664d57
6 changed files with 167 additions and 96 deletions
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@ -15,8 +15,6 @@ tags:

 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	{% include "hippie/partials/_body_nav.njk" %}
-
 	<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>
 		<article>
@ -647,6 +645,7 @@ tags:
 				nur lesbar gemacht werden oder mittels
 				<code>disabled</code>
 				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">
 				<button disabled="disabled">Deaktivierte Schaltfläche</button>
 			</p>
@ -867,27 +866,4 @@ tags:
 			</header>
 		</section>
 	</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 %}
--- a/source/screens/demo/components.njk
+++ b/source/screens/demo/components.njk
@ -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 %}
--- a/source/screens/demo/index.njk
+++ b/source/screens/demo/index.njk
@ -74,12 +74,9 @@ tags:
 	{{ super() }}
 	<script>
 		assetsLoaded = true;
-		logPerf('BODY        :: Assets loaded, running page specific script...');
+		logPerf('BODY        :: Assets loaded, running page specific script...', assetsLoaded);
 		// Page specific
 		// ------------------------------------------------------------------------------
-		$(document).ready(function () {
-			logPerf('EVENT       :: jQuery \'ready\' event fired.');
-		});
 		logPerf('Application ready... not.');
 	</script>
 {% endblock %}
--- a/source/screens/demo/introduction.njk
+++ b/source/screens/demo/introduction.njk
@ -15,8 +15,6 @@ tags:

 {% block main %}
 	<!-- {{ page.fileSlug }}.page -->
-	{% include "hippie/partials/_body_nav.njk" %}
-
 	<section class="sec_main_center">
 		<header>
 			<hgroup>
@ -41,19 +39,9 @@ tags:
 		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'));
+		composeMail('special', 'me', 'domain', 'tld', 'Me', 'HIPPIE')
+		composeMail('.general', 'name', 'domain', 'tld', '', '')

-		$(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.');
 	</script>
 {% endblock %}
--- a/source/screens/demo/layouts.njk
+++ b/source/screens/demo/layouts.njk
@ -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">
--- a/source/templates/hippie/_main.njk
+++ b/source/templates/hippie/_main.njk
@ -3,53 +3,67 @@

 <!DOCTYPE html>
 <html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
+	<head>
+		<meta charset="utf-8">

-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+		{% block head %}
+			<title>{{ hippie.titlePrefix }}
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>

-      {% block meta %}
-        {% include "hippie/partials/_head_meta.njk" %}
-      {% endblock %}
+			{% block meta %}
+				{% include "hippie/partials/_head_meta.njk" %}
+			{% endblock %}

-      {% include "hippie/partials/_head_script.njk" %}
-      {{ log.debug(hippie.debugMode, true) }}
-      {{ log.start() }}
+			{% include "hippie/partials/_head_script.njk" %}
+			{{ log.debug(hippie.debugMode, true) }}
+			{{ log.start() }}

-      {% block links %}
-        {% include "hippie/partials/_head_links.njk" %}
-      {% endblock %}
+			{% block links %}
+				{% include "hippie/partials/_head_links.njk" %}
+			{% endblock %}

-      {{ log.log('HEAD end    :: Links parsed, starting to load.') }}
-    {% endblock %}
-  </head>
+			{{ log.log('HEAD end    :: Links parsed, starting to load.') }}
+		{% endblock %}
+	</head>

-  <body class="{{ bodyClass }}">
-    {{ log.log('BODY start') }}
-    {% include "hippie/partials/_body_hover.njk" %}
-    <div id="root">
-      {% include "hippie/partials/_header.njk" %}
+	<body class="{{ bodyClass }}">
+		{{ log.log('BODY start') }}
+		{% include "hippie/partials/_body_hover.njk" %}
+		{% include "hippie/partials/_body_nav.njk" %}
+		<div id="root">
+			{% include "hippie/partials/_header.njk" %}

-      <main class="main_site">
-        {% block main %}{% endblock %}
-      </main>
+			<main class="main_site">
+				{% block main %}{% endblock %}
+			</main>

-      {% include "hippie/partials/_footer.njk" %}
-    </div>
+			{% include "hippie/partials/_footer.njk" %}
+		</div>

-    {% block script %}
-      {{ log.log('BODY        :: Loading script assets...') }}
-      {# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
-      <!-- build:js js/main.concat.min.js -->
-      {# // 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="{{ pageBase }}js/variables.js"></script>
-      <script src="{{ pageBase }}js/functions.js"></script>
-      <script src="{{ pageBase }}js/global.js"></script>
-    {% endblock %}
+		{% block script %}
+			{{ log.log('BODY        :: Loading script assets...') }}
+			{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
+			<!-- build:js js/main.concat.min.js -->
+			{# // 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="{{ pageBase }}js/variables.js"></script>
+			<script src="{{ pageBase }}js/functions.js"></script>
+			<script src="{{ pageBase }}js/global.js"></script>
+			<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.') }}
-  </body>
+				document.addEventListener('scroll', () => {
+					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>