feat: Add empty default page

- Add idle step after agreement
- New content for agreement
- Move brand information to macro
- New step class for common style

source/code/hippie/functions.js

@@ -33,20 +33,20 @@ function HippieScroll($tp, $dn) {
   let initLeft = false;
   const initY = hippie.screen.vh;
 
-  $tp.addClass('hide');
+  $tp.addClass('di_none');
 
   // Check scroll position and toggle element
   this.check = function () {
     hippie.screen.y = Math.min($(document).scrollTop(), document.documentElement.scrollTop);
     if (hippie.screen.y > initY) {
       if (!initLeft) {
-        $tp.removeClass('hide');
+        $tp.removeClass('di_none');
         console.info('Initial viewport left');
       }
       initLeft = true;
     } else {
       if (initLeft) {
-        $tp.addClass('hide');
+        $tp.addClass('di_none');
         console.info('Initial viewport entered');
       }
       initLeft = false;

source/code/ui.js

@@ -0,0 +1,274 @@
+let introDelay = 6;
+let hintDelay = 1;
+let isAgree = false;
+
+const steps = {
+	agreement: {
+		element: document.getElementById('agreement'),
+		msgIn: 'Agreement shown.',
+		msgOut: 'Agreement accepted.',
+		msgNo: 'No agreement today.'
+	}
+};
+const intro = document.getElementById('intro');
+const agreement = steps.agreement.element;
+const hint = {
+	element: document.getElementById('hint'),
+	delay: hintDelay * 1000,
+	show() {
+		if (typeof this.timeoutId === 'number') {
+			this.cancel();
+		}
+
+		this.element.classList.remove('di_none');
+
+		this.timeoutId = setTimeout(
+			() => {
+				this.dismiss();
+			},
+			this.delay
+		);
+	},
+	dismiss() {
+		this.element.classList.add('di_none');
+		this.timeoutId = undefined;
+	},
+	cancel() {
+		clearTimeout(this.timeoutId);
+	}
+};
+const loader = document.getElementById('loader');
+
+function init() {
+	return new Promise((resolve) => {
+		console.log('Init');
+
+		resolve();
+	});
+}
+
+function showIntro() {
+	const el = intro;
+	const dy = introDelay * 1000;
+
+	document.addEventListener('click', hintHandler, false);
+	document.addEventListener('keydown', hintHandler, false);
+
+	return new Promise((resolve, reject) => {
+		if (el) {
+			console.info("Intro begin.");
+
+			el.classList.replace('op_hide', 'op_show');
+			setTimeout(
+				() => {
+					el.classList.replace('op_show', 'op_hide');
+					el.addEventListener('transitionend', () => {
+						console.info("Intro fin.");
+
+						el.classList.add('di_none');
+						resolve("Intro fin.");
+					});
+				},
+				dy
+			);
+		} else {
+			reject('No intro available.');
+		}
+	})
+}
+
+function showAgreement() {
+	document.removeEventListener('click', hintHandler);
+	document.removeEventListener('keydown', hintHandler);
+	const el = agreement;
+	const dy = introDelay * 1000;
+
+	return new Promise((resolve, reject) => {
+		if (el) {
+			console.info(steps.agreement.msgIn);
+
+			el.classList.replace('op_hide', 'op_show');
+			el.addEventListener('click', agreeHandler);
+		} else {
+			reject(steps.agreement.msgNo);
+		}
+
+		function agreeHandler() {
+			const el = agreement;
+
+			isAgree = true;
+
+			el.classList.replace('op_show', 'op_hide');
+			el.addEventListener('transitionend', function endListener() {
+				console.info(steps.agreement.msgOut);
+
+				el.removeEventListener('transitionend', endListener);
+				el.removeEventListener('click', agreeHandler);
+				el.classList.add('di_none');
+				resolve(steps.agreement.msgOut);
+			});
+		}
+	})
+}
+
+function showIdle() {
+	const el = document.getElementById('idle');
+
+	return new Promise((resolve, reject) => {
+		if (el) {
+			console.info('Idle.');
+
+			el.classList.replace('op_hide', 'op_show');
+			resolve('Idle.');
+		} else {
+			reject();
+		}
+	})
+}
+
+function loadCore() {
+	const el = loader;
+	const bar = loader.querySelector('#progress');
+	const status = loader.querySelector('#status');
+	const spinner = loader.querySelector('#spinner');
+	const sp = spinner.querySelector('span');
+
+	let progress = 0;
+
+	return new Promise((resolve) => {
+		console.info("Core loading.");
+
+		updateProgressBar();
+
+		function updateProgressBar() {
+			const maxChunk = 33;
+			const time = 400;
+			let increment = randomIntFrom(1, maxChunk);
+
+			progress += increment;
+
+			if (progress >= 100) progress = 100;
+			// console.log(progress);
+
+			bar.style.width = progress + '%';
+			status.textContent = progress + '%';
+
+			if (progress < 100) {
+				setTimeout(updateProgressBar, time);
+			} else {
+				bar.style.width = '100%';
+				sp.style.animationPlayState = 'paused';
+				spinner.style.color = 'white';
+				spinner.style.backgroundColor = 'black';
+				el.classList.replace('op_show', 'op_hide');
+				el.addEventListener('transitionend', function endListener() {
+					console.info("Core loaded.");
+
+					el.removeEventListener('transitionend', endListener);
+					el.classList.add('di_none');
+					resolve("Core loaded.");
+				});
+			}
+		}
+	});
+}
+
+init()
+	.then(loadCore)
+	.then(showIntro)
+	.catch(er => console.error(er))
+	.then(showAgreement)
+	.then(showIdle)
+	.catch(er => console.error(er))
+	.finally(() => {
+		console.debug('Init end.', isAgree);
+		// location = 'demo/examples/ui/new.html';
+	});
+
+// document.addEventListener('DOMContentLoaded', () => {
+// 	const barEl = document.getElementById('bar');
+// 	const bar = document.getElementById('progress');
+// 	const status = document.getElementById('status');
+// 	const spinnerEl = document.getElementById('spinner');
+// 	const spinner = document.getElementById('spinner').querySelector('span');
+
+// 	let progress = 0;
+
+// 	function updateProgressBar() {
+// 		let increment = randomIntFrom(1, 9);
+// 		progress += increment;
+
+// 		if (progress >= 100) progress = 100;
+// 		console.log(progress);
+
+// 		bar.style.width = progress + '%';
+// 		status.textContent = progress + '%';
+
+// 		if (progress < 100) {
+// 			setTimeout(updateProgressBar, 100);
+// 		} else {
+// 			bar.style.width = '100%';
+// 			spinner.style.animationPlayState = 'paused';
+// 			spinnerEl.style.color = 'white';
+// 			spinnerEl.style.backgroundColor = 'black';
+// 		}
+// 	}
+
+// 	updateProgressBar();
+
+// 	window.addEventListener('load', () => {
+// 		// progressEl.style.width = '100%';
+// 		// setTimeout(() => {
+// 		// 		progressBar.style.opacity = 0;
+// 		// 		setTimeout(() => {
+// 		// 				progressBar.style.display = 'none';
+// 		// 		}, 500);
+// 		// }, 2000);
+// 	});
+// });
+
+/**
+ * Gibt eine Zahl zwischen <min> und <max> aus.
+ * Die Werte <min> und <max> sind dabei mit eingeschlossen.
+ * Mit <pos> kann der Exponent für eine 10er-Teilung angegeben werden.
+ * 
+ * @param {number} min 
+ * @param {number} max 
+ * @param {number} pos 
+ * @returns {number}
+ */
+function randomIntFrom(min, max, pos = 0) {
+	pos = Math.pow(10, pos);
+	min = Math.ceil(min);
+	max = Math.floor(max);
+
+	return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
+}
+
+/**
+ * Erstellt Kontext für hint-Objekt und ermöglicht das Entfernen des Ereignis.
+ */
+function hintHandler() {
+	hint.show();
+}
+
+/**
+ * Blendet einen Schritt aus.
+ * 
+ * @param {*} e 
+ * @returns 
+ */
+function stepHandler(e) {
+	const el = e.target;
+	const msg = steps[el.id].msgOut;
+
+	return new Promise(function (resolve) {
+		el.classList.replace('op_show', 'op_hide');
+		el.addEventListener('transitionend', function endListener() {
+			console.info(msg);
+
+			el.removeEventListener('transitionend', endListener);
+			resolve(msg);
+		});
+	})
+}

source/screens/demo/examples/ui/index.njk

@@ -0,0 +1,60 @@
+---
+title: Init
+tags: 
+  - demoExample
+  - index
+  - ui
+---
+{% set pageId = "init" %}
+{% set pageClass = "html_ui" %}
+
+{% extends "demo/_app.njk" %}
+{% import "hippie/macros/_placeholder.njk" as ph %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+		<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+		{{ super() }}
+{% endblock %}
+
+{% block body %}
+		<div id="loader" class="step op_show">
+			<div id="bar">
+				<div id="spinner"><span>I</span></div>
+				<div id="wrap">
+					<div id="progress"></div>
+				</div>
+				<div id="status">0%</div>
+			</div>
+		</div>
+		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
+			<p>Hold <kbd>space</kbd> to skip.</p>
+		</div>
+		<div id="intro" class="step op_hide">
+			{{ ph.brand('brand') }}
+			<p>Powered by</p>
+			<ul class="tech-stack">
+				<li>Vendor</li>
+				<li>IDE</li>
+				<li>Engine</li>
+			</ul>
+		</div>
+		<div id="agreement" class="step op_hide">
+			<h1>Agreement</h1>
+			<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
+		</div>
+		<div id="idle" class="step op_hide">
+			<div class="hello">Hello World!</div>
+			<p class="hello">Only left mouse click or any key</p>
+		</div>
+{% endblock %}
+
+{%- block script %}
+		{{ super() }}
+		<script src="{{ pageBase }}js/ui.js"></script>
+{% endblock %}

source/screens/demo/pages/default.njk

@@ -0,0 +1,21 @@
+---
+title: Default
+---
+{% set pageBase = "../" %}
+{% set pageId = page.fileSlug %}
+
+{% extends "hippie/_default.njk" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block head %}
+{{ super() }}
+{% endblock %}
+
+{% block body %}
+<!-- {{ page.fileSlug }}.page -->
+{% endblock %}
+
+{% block script %}
+{{ super() }}
+{% endblock %}

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit 2e100f72a90d9b29fdd1a053059631b8644d91dd
+Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6

source/style/ui.scss

@@ -1,6 +1,197 @@
+@use "sass:map";
+
 @import "demo_config";
 @import "hippie-style/hippie";
 
+$z-indexes: (
+	"default": 0,
+	"content-bottom": 1,
+	"content-low": 2,
+	"content-med": 3,
+	"content-high": 4,
+	"content-top": 10,
+	"modal-low": 11,
+	"modal-med": 12,
+	"modal-high": 13,
+	"toast": 100
+);
+
+.op_show {
+	transition: $transition_show;
+}
+
+.op_hide {
+	transition: $transition_hide;
+}
+
+.html_ui {
+	height: 100%;
+
+	body {
+		position: relative;
+		min-height: 100%;
+		background-color: black;
+	}
+}
+
+.step {
+	@extend %full_parent;
+}
+
+#loader {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: white;
+	pointer-events: none;
+}
+
+#bar {
+	display: flex;
+	justify-content: space-between;
+	width: 50%;
+}
+
+#wrap {
+	flex: 1;
+	background-color: $color_back_basic;
+}
+
+#progress {
+	width: 0%;
+	height: 100%;
+	background-color: black;
+}
+
+#status,
+#spinner {
+	@extend %basic;
+
+	display: flex;
+	flex-grow: 0;
+	flex-shrink: 0;
+	justify-content: center;
+	align-items: center;
+	margin-inline: $space_half;
+	padding-block: calc($space_half - 1px) $space_half;
+	line-height: $line_basic;
+	text-align: center;
+}
+
+#status {
+	width: 4em;
+	background-color: black;
+	color: white;
+}
+
+#spinner {
+	width: 2.5em;
+	background-color: $color_back_basic;
+	color: black;
+
+	span {
+		animation: rotate 1s linear infinite;
+	}
+}
+
+@keyframes rotate {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+#intro {
+	z-index: map.get($z-indexes, "content-top");
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: black;
+	pointer-events: none;
+
+	h1,
+	p,
+	li {
+		color: white;
+	}
+}
+
+.brand {
+	text-align: center;
+
+	img {
+		display: inline-block;
+		width: 128px;
+		height: 128px;
+		background-color: white;
+	}
+
+	*+h1 {
+		margin-top: $space_small;
+		margin-bottom: $space_large;
+	}
+}
+
+.tech-stack {
+	display: flex;
+	padding-left: 0;
+
+	li {
+		list-style: none;
+		padding-inline: $space_double;
+	}
+}
+
+#agreement,
+#idle {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	background-color: $color_back_basic;
+}
+
+#agreement {
+	flex-direction: column;
+
+	h1 {
+		margin-top: 0;
+	}
+}
+
+#idle {
+	pointer-events: none;
+}
+
+.toast {
+	z-index: map.get($z-indexes, "toast");
+	position: fixed;
+	right: $space_half;
+	bottom: $space_double;
+
+	p {
+		color: white;
+	}
+
+	kbd {
+		border-color: $color_brighter;
+		color: $color_back_io;
+	}
+}
+
+.hello {
+	flex: 0 1 auto;
+	padding: 1em 2em;
+	// background-color: rgba(black, .25);
+	background-color: $color_darker;
+}
+
 @import "modules/ui/new_module";
 @import "modules/ui/settings_module";
 @import "modules/ui/drag_module";

source/templates/hippie/macros/_placeholder.njk

@@ -11,3 +11,33 @@
 {% macro address(class='', text='Straße Nr., PLZ Ort') %}
 <span class="{{ class }}">{{ text }}</span>
 {% endmacro %}
+{% macro brand(class='', name='Marke') %}
+<div class="{{ class }}">
+	{# <img src="" alt="Brand logo"> #}
+	<svg
+		width="128"
+		height="128"
+		viewBox="0 0 128 128"
+		version="1.1"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlns:svg="http://www.w3.org/2000/svg">
+		<g>
+			<rect
+				style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
+				width="126"
+				height="126"
+				x="1"
+				y="1" />
+			<circle
+				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
+				cx="64"
+				cy="64"
+				r="63" />
+			<path
+				style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
+				d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z" />
+		</g>
+	</svg>
+	<h1>{{ name }}</h1>
+</div>
+{% endmacro %}

source/templates/hippie/partials/_body_nav.njk

@@ -1,8 +1,8 @@
 <!-- body_nav.partial -->
 <div class="pos_rel">
-  <nav class="nav_page_meta js_">
+  <nav class="nav_page_meta">
     <ul>
-      <li class="js_scrolltop hide">
+      <li class="js_scrolltop di_none">
         <a href="#begin" class="a_button_meta">
           <div class="sprite_img demo__sprite_up"></div>
           {# <img src="{{ pageBase }}art/up.png" alt="" width="32" height="64"> #}