feat: Changes to event handling and steps

- New idle object
- New handlers for idle state
- Idle uses global colors
- Add mouse over style to idle
- Set pointer events style from js
- Reindent ui index

source/code/_intro.js

@@ -116,6 +116,13 @@ function init() {
 	return new Promise((resolve) => {
 		console.log('Init');
 
+		// Set all steps to not receive pointer events
+		document.querySelectorAll('.step').forEach(element => {
+			console.log(element);
+			
+			element.style.pointerEvents = 'none';
+		});
+
 		resolve();
 	});
 }
@@ -161,6 +168,8 @@ function showAgreement() {
 			console.info(steps.agreement.msgIn);
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+
 			el.addEventListener('click', agreeHandler);
 		} else {
 			reject(steps.agreement.msgNo);
@@ -187,13 +196,21 @@ function showAgreement() {
 function showIdle() {
 	const el = document.getElementById('idle');
 
+	document.addEventListener('mouseleave', idleStart, false);
+	document.addEventListener('mouseenter', idleStop, false);
+
 	return new Promise((resolve, reject) => {
 		if (el) {
 			console.info('Idle.');
 
 			el.classList.replace('op_hide', 'op_show');
+			el.style.pointerEvents = '';
+			el.addEventListener('click', idleStart, false);
 			resolve('Idle.');
 		} else {
+			document.removeEventListener('mouseleave', idleStart);
+			document.removeEventListener('mouseenter', idleStop);
+
 			reject();
 		}
 	})
@@ -271,6 +288,14 @@ function hintHandler() {
 	hint.show();
 }
 
+function idleStart() {
+	idle.cycle();
+}
+
+function idleStop() {
+	idle.cancel();
+}
+
 /**
  * Blendet einen Schritt aus.
  *