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

---
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/_intro.js"></script>
		<script>
			{# let intro = new Intro('Intro');
			intro.init(); #}
			
			{# const ui = new UI();
			ui.init()
				.then(() => ui.showIntro())
				.then(() => ui.showHint())
				.then(() => ui.showIdle())
				.catch((error) => console.error(error)); #}

			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');

			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';
				});
		</script>
{% endblock %}