feat: Changes to event handling and steps
- 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:
parent
fe2261fda5
commit
13b9318f56
4 changed files with 159 additions and 103 deletions
|
|
@ -116,6 +116,13 @@ function init() {
|
|||
return new Promise((resolve) => {
|
||||
console.log('Init');
|
||||
|
||||
// Set all steps to not receive pointer events
|
||||
document.querySelectorAll('.step').forEach(element => {
|
||||
console.log(element);
|
||||
|
||||
element.style.pointerEvents = 'none';
|
||||
});
|
||||
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
|
|
@ -161,6 +168,8 @@ function showAgreement() {
|
|||
console.info(steps.agreement.msgIn);
|
||||
|
||||
el.classList.replace('op_hide', 'op_show');
|
||||
el.style.pointerEvents = '';
|
||||
|
||||
el.addEventListener('click', agreeHandler);
|
||||
} else {
|
||||
reject(steps.agreement.msgNo);
|
||||
|
|
@ -187,13 +196,21 @@ function showAgreement() {
|
|||
function showIdle() {
|
||||
const el = document.getElementById('idle');
|
||||
|
||||
document.addEventListener('mouseleave', idleStart, false);
|
||||
document.addEventListener('mouseenter', idleStop, false);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
if (el) {
|
||||
console.info('Idle.');
|
||||
|
||||
el.classList.replace('op_hide', 'op_show');
|
||||
el.style.pointerEvents = '';
|
||||
el.addEventListener('click', idleStart, false);
|
||||
resolve('Idle.');
|
||||
} else {
|
||||
document.removeEventListener('mouseleave', idleStart);
|
||||
document.removeEventListener('mouseenter', idleStop);
|
||||
|
||||
reject();
|
||||
}
|
||||
})
|
||||
|
|
@ -271,6 +288,14 @@ function hintHandler() {
|
|||
hint.show();
|
||||
}
|
||||
|
||||
function idleStart() {
|
||||
idle.cycle();
|
||||
}
|
||||
|
||||
function idleStop() {
|
||||
idle.cancel();
|
||||
}
|
||||
|
||||
/**
|
||||
* Blendet einen Schritt aus.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@ tags:
|
|||
- index
|
||||
- ui
|
||||
---
|
||||
|
||||
{% set pageId = "init" %}
|
||||
{% set pageClass = "html_ui" %}
|
||||
|
||||
{% extends "demo/_app.njk" %}
|
||||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
||||
|
||||
{% block title %}{{ title }}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block links %}
|
||||
|
|
@ -25,7 +26,9 @@ tags:
|
|||
{% block body %}
|
||||
<div id="loader" class="step op_show">
|
||||
<div id="bar">
|
||||
<div id="spinner"><span>I</span></div>
|
||||
<div id="spinner">
|
||||
<span>I</span>
|
||||
</div>
|
||||
<div id="wrap">
|
||||
<div id="progress"></div>
|
||||
</div>
|
||||
|
|
@ -33,7 +36,9 @@ tags:
|
|||
</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>
|
||||
<p>Hold
|
||||
<kbd>space</kbd>
|
||||
to skip.</p>
|
||||
</div>
|
||||
<div id="intro" class="step op_hide">
|
||||
{{ ph.brand('brand') }}
|
||||
|
|
@ -49,6 +54,7 @@ tags:
|
|||
<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="mouse_over"></div>
|
||||
<div class="hello">Hello World!</div>
|
||||
<p class="hello">Only left mouse click or any key</p>
|
||||
</div>
|
||||
|
|
@ -58,20 +64,20 @@ tags:
|
|||
{{ super() }}
|
||||
<script src="{{ pageBase }}js/_intro.js"></script>
|
||||
<script>
|
||||
{# let intro = new Intro('Intro');
|
||||
intro.init(); #}
|
||||
//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)); #}
|
||||
//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'),
|
||||
|
|
@ -89,18 +95,19 @@ tags:
|
|||
if (typeof this.timeoutId === 'number') {
|
||||
this.cancel();
|
||||
}
|
||||
|
||||
this.element.classList.remove('di_none');
|
||||
|
||||
this.timeoutId = setTimeout(
|
||||
() => {
|
||||
this
|
||||
.element
|
||||
.classList
|
||||
.remove('di_none');
|
||||
this.timeoutId = setTimeout(() => {
|
||||
this.dismiss();
|
||||
},
|
||||
this.delay
|
||||
);
|
||||
}, this.delay);
|
||||
},
|
||||
dismiss() {
|
||||
this.element.classList.add('di_none');
|
||||
this
|
||||
.element
|
||||
.classList
|
||||
.add('di_none');
|
||||
this.timeoutId = undefined;
|
||||
},
|
||||
cancel() {
|
||||
|
|
@ -108,7 +115,26 @@ tags:
|
|||
}
|
||||
};
|
||||
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.delay);
|
||||
},
|
||||
cancel() {
|
||||
this.intervalId && clearInterval(this.intervalId);
|
||||
}
|
||||
}
|
||||
init()
|
||||
.then(loadCore)
|
||||
.then(showIntro)
|
||||
|
|
@ -116,7 +142,7 @@ tags:
|
|||
.then(showAgreement)
|
||||
.then(showIdle)
|
||||
.catch(er => console.error(er))
|
||||
.finally(() => {
|
||||
. finally(() => {
|
||||
console.debug('Init end.', isAgree);
|
||||
// location = 'demo/examples/ui/new.html';
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 9f3797f6516a63101fb8ebd23ab8229053ec57b6
|
||||
Subproject commit d17f9667943a2f525707b1dc77d2d9bf95814e71
|
||||
|
|
@ -44,7 +44,6 @@ $z-indexes: (
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#bar {
|
||||
|
|
@ -113,7 +112,6 @@ $z-indexes: (
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: black;
|
||||
pointer-events: none;
|
||||
|
||||
h1,
|
||||
p,
|
||||
|
|
@ -154,19 +152,26 @@ $z-indexes: (
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background-color: $color_back_basic;
|
||||
}
|
||||
|
||||
#agreement {
|
||||
flex-direction: column;
|
||||
background-color: $bravo_color;
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
color: $color_brightest;
|
||||
}
|
||||
}
|
||||
|
||||
#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 {
|
||||
|
|
@ -188,8 +193,8 @@ $z-indexes: (
|
|||
.hello {
|
||||
flex: 0 1 auto;
|
||||
padding: 1em 2em;
|
||||
// background-color: rgba(black, .25);
|
||||
background-color: $color_darker;
|
||||
background-color: rgba($color_bright, .5);
|
||||
font-family: $family_text_mono;
|
||||
}
|
||||
|
||||
@import "modules/ui/new_module";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue