feat: Refactor listeners

- Add handler functions for event listeners
- Change agreement step to wait for interaction
- Remove listeners after each step
- Add steps object

source/code/ui.js

@@ -1,8 +1,17 @@
 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 = document.getElementById('agreement');
+const agreement = steps.agreement.element;
 const hint = {
 	element: document.getElementById('hint'),
 	delay: hintDelay * 1000,
@@ -30,20 +39,6 @@ const hint = {
 };
 const loader = document.getElementById('loader');
 
-function agree() {
-	if (agreement) {
-		console.info("Agreement show.");
-
-		agreement.classList.replace('op_hide', 'op_show');
-
-		setTimeout(() => {
-			agreement.classList.replace('op_show', 'op_hide');
-
-			console.info("Agreement closed.");
-		}, introDelay * 1000)
-	}
-}
-
 function init() {
 	return new Promise((resolve) => {
 		console.log('Init');
@@ -56,8 +51,8 @@ function showIntro() {
 	const el = intro;
 	const dy = introDelay * 1000;
 
-	window.addEventListener('click', () => hint.show());
+	document.addEventListener('click', hintHandler, false);
-	window.addEventListener('keydown', () => hint.show());
+	document.addEventListener('keydown', hintHandler, false);
 
 	return new Promise((resolve, reject) => {
 		if (el) {
@@ -70,6 +65,7 @@ function showIntro() {
 					el.addEventListener('transitionend', () => {
 						console.info("Intro fin.");
 
+						el.classList.add('di_none');
 						resolve("Intro fin.");
 					});
 				},
@@ -82,27 +78,35 @@ function showIntro() {
 }
 
 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("Agreement show.");
+			console.info(steps.agreement.msgIn);
 
 			el.classList.replace('op_hide', 'op_show');
-			setTimeout(
+			el.addEventListener('click', agreeHandler);
-				() => {
-					el.classList.replace('op_show', 'op_hide');
-					el.addEventListener('transitionend', () => {
-						console.info("Agreement closed.");
-
-						resolve("closed");
-					});
-				},
-				dy
-			)
 		} else {
-			reject('No agreement today.');
+			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);
+			});
 		}
 	})
 }
@@ -122,7 +126,9 @@ function loadCore() {
 		updateProgressBar();
 
 		function updateProgressBar() {
-			let increment = randomIntFrom(1, 19);
+			const maxChunk = 33;
+			const time = 400;
+			let increment = randomIntFrom(1, maxChunk);
 
 			progress += increment;
 
@@ -133,16 +139,18 @@ function loadCore() {
 			status.textContent = progress + '%';
 
 			if (progress < 100) {
-				setTimeout(updateProgressBar, 800);
+				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', () => {
+				el.addEventListener('transitionend', function endListener() {
 					console.info("Core loaded.");
 
+					el.removeEventListener('transitionend', endListener);
+					el.classList.add('di_none');
 					resolve("Core loaded.");
 				});
 			}
@@ -157,7 +165,8 @@ init()
 	.then(showAgreement)
 	.catch(er => console.error(er))
 	.finally(() => {
-		console.debug('Init end.', loader, intro, agreement);
+		console.debug('Init end.', isAgree);
+		// location = 'demo/examples/ui/new.html';
 	});
 
 // document.addEventListener('DOMContentLoaded', () => {
@@ -219,3 +228,31 @@ function randomIntFrom(min, max, pos = 0) {
 
 	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);
+		});
+	})
+}

source/style/ui.scss

@@ -42,6 +42,7 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: white;
+	pointer-events: none;
 }
 
 #bar {
@@ -112,6 +113,7 @@ $z-indexes: (
 	align-items: center;
 	justify-content: center;
 	background-color: black;
+	pointer-events: none;
 
 	h1,
 	p,