diff --git a/source/code/hippie/functions.js b/source/code/hippie/functions.js index 602ca13..2e80761 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('di_none'); + $tp.addClass('hide'); // 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('di_none'); + $tp.removeClass('hide'); console.info('Initial viewport left'); } initLeft = true; } else { if (initLeft) { - $tp.addClass('di_none'); + $tp.addClass('hide'); console.info('Initial viewport entered'); } initLeft = false; diff --git a/source/code/ui.js b/source/code/ui.js deleted file mode 100644 index e4c1da9..0000000 --- a/source/code/ui.js +++ /dev/null @@ -1,274 +0,0 @@ -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 deleted file mode 100644 index 9af9edc..0000000 --- a/source/screens/demo/examples/ui/index.njk +++ /dev/null @@ -1,60 +0,0 @@ ---- -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 deleted file mode 100644 index a898098..0000000 --- a/source/screens/demo/pages/default.njk +++ /dev/null @@ -1,21 +0,0 @@ ---- -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 9f3797f..2e100f7 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6 +Subproject commit 2e100f72a90d9b29fdd1a053059631b8644d91dd diff --git a/source/style/ui.scss b/source/style/ui.scss index e6886e8..d088323 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -1,197 +1,6 @@ -@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"; \ No newline at end of file +@import "modules/ui/drag_module"; diff --git a/source/templates/hippie/macros/_placeholder.njk b/source/templates/hippie/macros/_placeholder.njk index 0097328..52f35be 100644 --- a/source/templates/hippie/macros/_placeholder.njk +++ b/source/templates/hippie/macros/_placeholder.njk @@ -11,33 +11,3 @@ {% 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 58fed6d..f38e940 100644 --- a/source/templates/hippie/partials/_body_nav.njk +++ b/source/templates/hippie/partials/_body_nav.njk @@ -1,8 +1,8 @@
-