feat: Consolidate intro scripts
- Change script source from ui to intro - Test variants with classes - Move active scripts parts to index - Remove old ui script
This commit is contained in:
parent
8937b36a1e
commit
6cfe5b21e1
2 changed files with 170 additions and 87 deletions
293
source/code/_intro.js
Normal file
293
source/code/_intro.js
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
class Intro {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
}
|
||||
|
||||
init() {
|
||||
return new Promise((resolve) => {
|
||||
console.log('%s Init', this.name);
|
||||
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class UI {
|
||||
constructor() {
|
||||
this.introDelay = 6;
|
||||
this.hintDelay = 1;
|
||||
this.isAgree = false;
|
||||
this.steps = {
|
||||
agreement: {
|
||||
element: document.getElementById('agreement'),
|
||||
msgIn: 'Agreement shown.',
|
||||
msgOut: 'Agreement accepted.',
|
||||
msgNo: 'No agreement today.'
|
||||
}
|
||||
};
|
||||
this.intro = document.getElementById('intro');
|
||||
this.agreement = this.steps.agreement.element;
|
||||
this.hint = {
|
||||
element: document.getElementById('hint'),
|
||||
delay: this.hintDelay * 1000
|
||||
};
|
||||
this.loader = document.getElementById('loader');
|
||||
}
|
||||
|
||||
showIntro() {
|
||||
const el = this.intro;
|
||||
const dy = this.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.');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
showHint() {
|
||||
if (typeof this.hint.timeoutId === 'number') {
|
||||
this.cancelHint();
|
||||
}
|
||||
|
||||
this.hint.element.classList.remove('di_none');
|
||||
|
||||
this.hint.timeoutId = setTimeout(
|
||||
() => {
|
||||
this.dismissHint();
|
||||
},
|
||||
this.hint.delay
|
||||
);
|
||||
}
|
||||
|
||||
dismissHint() {
|
||||
this.hint.element.classList.add('di_none');
|
||||
this.hint.timeoutId = undefined;
|
||||
}
|
||||
|
||||
cancelHint() {
|
||||
clearTimeout(this.hint.timeoutId);
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
init() {
|
||||
return new Promise((resolve) => {
|
||||
console.log('Init');
|
||||
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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.");
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gibt eine Zahl zwischen <min> und <max> aus.
|
||||
* Die Werte <min> und <max> sind dabei mit eingeschlossen.
|
||||
* Mit <pos> 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);
|
||||
});
|
||||
})
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue