hippie/source/code/ui.js

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');

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 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.");
				});
			}
		}
	});
}

init()
	.then(loadCore)
	.then(showIntro)
	.catch(er => console.error(er))
	.then(showAgreement)
	.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.
 * 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);
		});
	})
}