diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js index 2e80761..602ca13 100644 --- a/source/code/hippie/functions.js +++ b/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; diff --git a/source/code/ui.js b/source/code/ui.js new file mode 100644 index 0000000..e4c1da9 --- /dev/null +++ b/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 und aus. + * Die Werte und sind dabei mit eingeschlossen. + * Mit 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); + }); + }) +} \ No newline at end of file diff --git a/source/screens/demo/examples/ui/index.njk b/source/screens/demo/examples/ui/index.njk new file mode 100644 index 0000000..9af9edc --- /dev/null +++ b/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 %} + +{% endblock %} + +{% block head %} + {{ super() }} +{% endblock %} + +{% block body %} +
+
+
I
+
+
+
+
0%
+
+
+ +
+ {{ ph.brand('brand') }} +

Powered by

+
    +
  • Vendor
    • +
  • IDE
    • +
  • Engine
    • +
+
+
+

Agreement

+

This needs to be seen and acknowledged.
So an interaction must be made to continue.

+
+
+
Hello World!
+

Only left mouse click or any key

+
+{% endblock %} + +{%- block script %} + {{ super() }} + +{% endblock %} \ No newline at end of file diff --git a/source/screens/demo/pages/default.njk b/source/screens/demo/pages/default.njk new file mode 100644 index 0000000..a898098 --- /dev/null +++ b/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 %} + +{% endblock %} + +{% block script %} +{{ super() }} +{% endblock %} diff --git a/source/style/hippie-style b/source/style/hippie-style index 2e100f7..9f3797f 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 2e100f72a90d9b29fdd1a053059631b8644d91dd +Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6 diff --git a/source/style/ui.scss b/source/style/ui.scss index d088323..e6886e8 100644 --- a/source/style/ui.scss +++ b/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"; +@import "modules/ui/drag_module"; \ No newline at end of file diff --git a/source/templates/hippie/macros/_placeholder.njk b/source/templates/hippie/macros/_placeholder.njk index 52f35be..0097328 100644 --- a/source/templates/hippie/macros/_placeholder.njk +++ b/source/templates/hippie/macros/_placeholder.njk @@ -11,3 +11,33 @@ {% macro address(class='', text='Straße Nr., PLZ Ort') %} {{ text }} {% endmacro %} +{% macro brand(class='', name='Marke') %} +
+ {# Brand logo #} + + + + + + + +

{{ name }}

+
+{% endmacro %} \ No newline at end of file diff --git a/source/templates/hippie/partials/_body_nav.njk b/source/templates/hippie/partials/_body_nav.njk index f38e940..58fed6d 100644 --- a/source/templates/hippie/partials/_body_nav.njk +++ b/source/templates/hippie/partials/_body_nav.njk @@ -1,8 +1,8 @@
-