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

source/code/_intro.js

@@ -1,43 +1,116 @@
-let introDelay = 6;
+class Intro {
-let hintDelay = 1;
+	constructor(name) {
-let isAgree = false;
+		this.name = name;
-
-const steps = {
-	agreement: {
-		element: document.getElementById('agreement'),
-		msgIn: 'Agreement shown.',
-		msgOut: 'Agreement accepted.',
-		msgNo: 'No agreement today.'
 	}
-};
+
-const intro = document.getElementById('intro');
+	init() {
-const agreement = steps.agreement.element;
+		return new Promise((resolve) => {
-const hint = {
+			console.log('%s Init', this.name);
-	element: document.getElementById('hint'),
+
-	delay: hintDelay * 1000,
+			resolve();
-	show() {
+		});
-		if (typeof this.timeoutId === 'number') {
+	}
-			this.cancel();
+}
+
+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.

source/screens/demo/examples/ui/index.njk

@@ -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 %}