feat: Create new ui index
- New index page for ui collection - Move intro to examples and rename
This commit is contained in:
parent
7950d23b14
commit
08e258d7aa
2 changed files with 161 additions and 125 deletions
149
source/screens/demo/examples/intro.njk
Normal file
149
source/screens/demo/examples/intro.njk
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
---
|
||||
title: Intro
|
||||
tags:
|
||||
- demoExample
|
||||
---
|
||||
|
||||
{% 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="intro" class="step op_hide">
|
||||
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<p>Hold
|
||||
<kbd>space</kbd>
|
||||
to skip.</p>
|
||||
</div>
|
||||
{{ 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="mouse_over"></div>
|
||||
<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 cycleDelay = 2;
|
||||
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');
|
||||
const idle = {
|
||||
element: document.getElementById('idle'),
|
||||
delay: cycleDelay * 1000,
|
||||
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)
|
||||
.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 %}
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
---
|
||||
title: Init
|
||||
title: UI
|
||||
tags:
|
||||
- demoExample
|
||||
- index
|
||||
- ui
|
||||
---
|
||||
|
||||
{% set pageId = "init" %}
|
||||
|
|
@ -24,128 +23,16 @@ tags:
|
|||
{% 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 class="sec_main_center">
|
||||
<nav role="doc-toc">
|
||||
<h1>Inhaltsverzeichnis</h1>
|
||||
<ul class="list_link">
|
||||
{%- for ui in collections.ui -%}
|
||||
<li>
|
||||
<a href="{{ ui.page.url }}">{{ ui.data.title }}</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="intro" class="step op_hide">
|
||||
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<p>Hold
|
||||
<kbd>space</kbd>
|
||||
to skip.</p>
|
||||
</div>
|
||||
{{ 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="mouse_over"></div>
|
||||
<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 cycleDelay = 2;
|
||||
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');
|
||||
const idle = {
|
||||
element: document.getElementById('idle'),
|
||||
delay: cycleDelay * 1000,
|
||||
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)
|
||||
.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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue