feat: Improve details

- Prevent text selection for agreement step
- Extend mouse out time
- Hint toast is now part of intro step
- Agreement step can now be solved with keyboard
- Remove more event listeners when step is solved

source/code/_intro.js

@@ -146,12 +146,16 @@ function showIntro() {
 						console.info("Intro fin.");
 
 						el.classList.add('di_none');
+
 						resolve("Intro fin.");
 					});
 				},
 				dy
 			);
 		} else {
+			document.removeEventListener('click', hintHandler);
+			document.removeEventListener('keydown', hintHandler);
+
 			reject('No intro available.');
 		}
 	})
@@ -171,6 +175,7 @@ function showAgreement() {
 			el.style.pointerEvents = '';
 
 			el.addEventListener('click', agreeHandler);
+			document.addEventListener('keydown', agreeHandler);
 		} else {
 			reject(steps.agreement.msgNo);
 		}
@@ -186,7 +191,9 @@ function showAgreement() {
 
 				el.removeEventListener('transitionend', endListener);
 				el.removeEventListener('click', agreeHandler);
+				document.removeEventListener('keydown', agreeHandler);
 				el.classList.add('di_none');
+
 				resolve(steps.agreement.msgOut);
 			});
 		}
@@ -206,6 +213,7 @@ function showIdle() {
 			el.classList.replace('op_hide', 'op_show');
 			el.style.pointerEvents = '';
 			el.addEventListener('click', idleStart, false);
+
 			resolve('Idle.');
 		} else {
 			document.removeEventListener('mouseleave', idleStart);
@@ -256,6 +264,7 @@ function loadCore() {
 
 					el.removeEventListener('transitionend', endListener);
 					el.classList.add('di_none');
+
 					resolve("Core loaded.");
 				});
 			}
@@ -312,6 +321,7 @@ function stepHandler(e) {
 			console.info(msg);
 
 			el.removeEventListener('transitionend', endListener);
+			
 			resolve(msg);
 		});
 	})

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

@@ -35,12 +35,12 @@ tags:
 			<div id="status">0%</div>
 		</div>
 	</div>
+	<div id="intro" class="step op_hide">
 		<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
 			<p>Hold
 				<kbd>space</kbd>
 				to skip.</p>
 		</div>
-	<div id="intro" class="step op_hide">
 		{{ ph.brand('brand') }}
 		<p>Powered by</p>
 		<ul class="tech-stack">
@@ -77,6 +77,7 @@ tags:
 
 		let introDelay = 6;
 		let hintDelay = 1;
+		let cycleDelay = 2;
 		let isAgree = false;
 		const steps = {
 			agreement: {
@@ -117,7 +118,7 @@ tags:
 		const loader = document.getElementById('loader');
 		const idle = {
 			element: document.getElementById('idle'),
-			delay: 2000,
+			delay: cycleDelay * 1000,
 			position: 0,
 			cycle() {
 				if (typeof this.intervalId === 'number') {

source/style/ui.scss

@@ -157,6 +157,7 @@ $z-indexes: (
 #agreement {
 	flex-direction: column;
 	background-color: $bravo_color;
+	user-select: none;
 
 	h1 {
 		margin-top: 0;
@@ -166,7 +167,7 @@ $z-indexes: (
 
 #idle {
 	background-color: $color_back_basic;
-	transition: background-color 1s;
+	transition: background-color 4s;
 
 	&:hover>.mouse_over {
 		background-color: transparent !important;