interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Changes to event handling and steps

Browse source 
- New idle object
- New handlers for idle state
- Idle uses global colors
- Add mouse over style to idle
- Set pointer events style from js
- Reindent ui index
This commit is contained in:
sthag 2025-05-18 11:20:48 +02:00
parent fe2261fda5
commit 13b9318f56
4 changed files with 159 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

25
source/code/_intro.js
View file

@ -116,6 +116,13 @@ function init() {
return new Promise((resolve) => { return new Promise((resolve) => {
console.log('Init'); console.log('Init');
// Set all steps to not receive pointer events
document.querySelectorAll('.step').forEach(element => {
console.log(element);
element.style.pointerEvents = 'none';
});
resolve(); resolve();
}); });
} }
@ -161,6 +168,8 @@ function showAgreement() {
console.info(steps.agreement.msgIn); console.info(steps.agreement.msgIn);
el.classList.replace('op_hide', 'op_show'); el.classList.replace('op_hide', 'op_show');
el.style.pointerEvents = '';
el.addEventListener('click', agreeHandler); el.addEventListener('click', agreeHandler);
} else { } else {
reject(steps.agreement.msgNo); reject(steps.agreement.msgNo);
@ -187,13 +196,21 @@ function showAgreement() {
function showIdle() { function showIdle() {
const el = document.getElementById('idle'); const el = document.getElementById('idle');
document.addEventListener('mouseleave', idleStart, false);
document.addEventListener('mouseenter', idleStop, false);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (el) { if (el) {
console.info('Idle.'); console.info('Idle.');
el.classList.replace('op_hide', 'op_show'); el.classList.replace('op_hide', 'op_show');
el.style.pointerEvents = '';
el.addEventListener('click', idleStart, false);
resolve('Idle.'); resolve('Idle.');
} else { } else {
document.removeEventListener('mouseleave', idleStart);
document.removeEventListener('mouseenter', idleStop);
reject(); reject();
} }
}) })
@ -271,6 +288,14 @@ function hintHandler() {
hint.show(); hint.show();
} }
function idleStart() {
idle.cycle();
}
function idleStop() {
idle.cancel();
}
/** /**
* Blendet einen Schritt aus. * Blendet einen Schritt aus.
* *

218
source/screens/demo/examples/ui/index.njk
View file

@ -1,124 +1,150 @@
--- ---
title: Init title: Init
tags: tags:
- demoExample - demoExample
- index - index
- ui - ui
--- ---
{% set pageId = "init" %} {% set pageId = "init" %}
{% set pageClass = "html_ui" %} {% set pageClass = "html_ui" %}
{% extends "demo/_app.njk" %} {% extends "demo/_app.njk" %}
{% import "hippie/macros/_placeholder.njk" as ph %} {% import "hippie/macros/_placeholder.njk" as ph %}
{% block title %}
{% block title %}{{ title }} {{ title }}
{% endblock %} {% endblock %}
{% block links %} {% block links %}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/> <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %} {% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div id="loader" class="step op_show"> <div id="loader" class="step op_show">
<div id="bar"> <div id="bar">
<div id="spinner"><span>I</span></div> <div id="spinner">
<div id="wrap"> <span>I</span>
<div id="progress"></div>
</div>
<div id="status">0%</div>
</div> </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"> </div>
<p>Hold <kbd>space</kbd> to skip.</p> <div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
</div> <p>Hold
<div id="intro" class="step op_hide"> <kbd>space</kbd>
{{ ph.brand('brand') }} to skip.</p>
<p>Powered by</p> </div>
<ul class="tech-stack"> <div id="intro" class="step op_hide">
<li>Vendor</li> {{ ph.brand('brand') }}
<li>IDE</li> <p>Powered by</p>
<li>Engine</li> <ul class="tech-stack">
</ul> <li>Vendor</li>
</div> <li>IDE</li>
<div id="agreement" class="step op_hide"> <li>Engine</li>
<h1>Agreement</h1> </ul>
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p> </div>
</div> <div id="agreement" class="step op_hide">
<div id="idle" class="step op_hide"> <h1>Agreement</h1>
<div class="hello">Hello World!</div> <p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
<p class="hello">Only left mouse click or any key</p> </div>
</div> <div id="idle" class="step op_hide">
<div class="mouse_over"></div>
<div class="hello">Hello World!</div>
<p class="hello">Only left mouse click or any key</p>
</div>
{% endblock %} {% endblock %}
{%- block script %} {%- block script %}
{{ super() }} {{ super() }}
<script src="{{ pageBase }}js/_intro.js"></script> <script src="{{ pageBase }}js/_intro.js"></script>
<script> <script>
{# let intro = new Intro('Intro'); //let intro = new Intro('Intro');
intro.init(); #} //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; //const ui = new UI();
let hintDelay = 1; //ui
let isAgree = false; // .init()
// .then(() => ui.showIntro())
// .then(() => ui.showHint())
// .then(() => ui.showIdle())
// .catch((error) => console.error(error));
const steps = { let introDelay = 6;
agreement: { let hintDelay = 1;
element: document.getElementById('agreement'), let isAgree = false;
msgIn: 'Agreement shown.', const steps = {
msgOut: 'Agreement accepted.', agreement: {
msgNo: 'No agreement today.' 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
const intro = document.getElementById('intro'); .element
const agreement = steps.agreement.element; .classList
const hint = { .remove('di_none');
element: document.getElementById('hint'), this.timeoutId = setTimeout(() => {
delay: hintDelay * 1000, this.dismiss();
show() { }, this.delay);
if (typeof this.timeoutId === 'number') { },
this.cancel(); dismiss() {
this
.element
.classList
.add('di_none');
this.timeoutId = undefined;
},
cancel() {
clearTimeout(this.timeoutId);
}
};
const loader = document.getElementById('loader');
const idle = {
element: document.getElementById('idle'),
delay: 2000,
position: 0,
cycle() {
if (typeof this.intervalId === 'number') {
this.cancel();
}
this.intervalId = setInterval(() => {
this.position++;
if (this.position >= flagColors.length) {
this.position = 0;
} }
this.element.style.backgroundColor = '#' + flagColors[this.position];
this.element.classList.remove('di_none'); }, this.delay);
},
this.timeoutId = setTimeout( cancel() {
() => { this.intervalId && clearInterval(this.intervalId);
this.dismiss(); }
}, }
this.delay init()
); .then(loadCore)
}, .then(showIntro)
dismiss() { .catch(er => console.error(er))
this.element.classList.add('di_none'); .then(showAgreement)
this.timeoutId = undefined; .then(showIdle)
}, .catch(er => console.error(er))
cancel() { . finally(() => {
clearTimeout(this.timeoutId); console.debug('Init end.', isAgree);
} // location = 'demo/examples/ui/new.html';
}; });
const loader = document.getElementById('loader'); </script>
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 %} {% endblock %}

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6 Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71

17
source/style/ui.scss
View file

@ -44,7 +44,6 @@ $z-indexes: (
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: white; background-color: white;
pointer-events: none;
} }
#bar { #bar {
@ -113,7 +112,6 @@ $z-indexes: (
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: black; background-color: black;
pointer-events: none;
h1, h1,
p, p,
@ -154,19 +152,26 @@ $z-indexes: (
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
background-color: $color_back_basic;
} }
#agreement { #agreement {
flex-direction: column; flex-direction: column;
background-color: $bravo_color;
h1 { h1 {
margin-top: 0; margin-top: 0;
color: $color_brightest;
} }
} }
#idle { #idle {
pointer-events: none; background-color: $color_back_basic;
transition: background-color 1s;
&:hover>.mouse_over {
background-color: transparent !important;
transition: background-color $duration_basic $timing_basic 0s !important;
}
} }
.toast { .toast {
@ -188,8 +193,8 @@ $z-indexes: (
.hello { .hello {
flex: 0 1 auto; flex: 0 1 auto;
padding: 1em 2em; padding: 1em 2em;
// background-color: rgba(black, .25); background-color: rgba($color_bright, .5);
background-color: $color_darker; font-family: $family_text_mono;
} }
@import "modules/ui/new_module"; @import "modules/ui/new_module";