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
|
|
@ -1,43 +1,116 @@
|
|||
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.'
|
||||
class Intro {
|
||||
constructor(name) {
|
||||
this.name = name;
|
||||
}
|
||||
};
|
||||
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();
|
||||
|
||||
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.element.classList.remove('di_none');
|
||||
this.hint.element.classList.remove('di_none');
|
||||
|
||||
this.timeoutId = setTimeout(
|
||||
this.hint.timeoutId = setTimeout(
|
||||
() => {
|
||||
this.dismiss();
|
||||
this.dismissHint();
|
||||
},
|
||||
this.delay
|
||||
this.hint.delay
|
||||
);
|
||||
},
|
||||
dismiss() {
|
||||
this.element.classList.add('di_none');
|
||||
this.timeoutId = undefined;
|
||||
},
|
||||
cancel() {
|
||||
clearTimeout(this.timeoutId);
|
||||
}
|
||||
};
|
||||
const loader = document.getElementById('loader');
|
||||
|
||||
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) => {
|
||||
|
|
@ -173,60 +246,6 @@ function loadCore() {
|
|||
});
|
||||
}
|
||||
|
||||
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 <min> und <max> aus.
|
||||
* Die Werte <min> und <max> sind dabei mit eingeschlossen.
|
||||
|
|
@ -56,5 +56,69 @@ tags:
|
|||
|
||||
{%- block script %}
|
||||
{{ super() }}
|
||||
<script src="{{ pageBase }}js/ui.js"></script>
|
||||
<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 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');
|
||||
|
||||
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