Implement help/guide system #4

kettek · 2022-11-23T08:00:32Z

There should be an interactive guide system and a help system. These would both work with an underlying system of adding a component wrapper around the elements that should be considered as part of the help. What would occur on click is the popup of a help dialog/toaster that explains what that area does and, optionally, a link to more information.

Additionally, as part of this same system, a help guide could be implemented that would iterate through predefined help steps, possibly tied to element IDs or similar for targets, that would fade out the screen, highlight the target area, then provide a helpful message. For this we can just use a system similar to the following video.

Peek.2022-11-22.16-32.webm

For reference, the HTML to produce that is hackily thrown together as:

<!doctype html>
<html>
<head>
<style>
#element {
	position: absolute;
	left: 120px;
	top: 50%;
	border: 1px solid red;
}
#element2 {
	position: absolute;
	left: 320px;
	top: 80%;
	border: 1px solid red;
}
#overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0; left: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: all 200ms;
}
#info {
	position: absolute;
	background: green;
	color: black;
	opacity: 0.9;
	transition: all 200ms;
}
</style>
<script type='text/javascript'>
window.onload = _ => {
	let info = document.getElementById('info')
	let overlay = document.getElementById('overlay')
	let el = document.getElementById('start')
	el.onclick = _ => {
		cutoutElement(document.getElementById('element'))
		infoElement("Wow, an element", document.getElementById('element'))
	}
	let el2 = document.getElementById('start2')
	el2.onclick = _ => {
		cutoutElement(document.getElementById('element2'))
		infoElement("Wow, a second element", document.getElementById('element2'))
	}

	let cutoutElement = el => {
		let box = el.getBoundingClientRect()
		let padding = 8
		overlay.style.opacity = 1
		overlay.style.clipPath = `polygon(0% 0%,
        0% 100%,
	${box.left-padding}px 100%,
	${box.left-padding}px ${box.top-padding}px,
	${box.left + box.width+padding}px ${box.top-padding}px,
	${box.left + box.width+padding}px ${box.top + box.height+padding}px,
	${box.left-padding}px ${box.top + box.height+padding}px,
	${box.left-padding}px 100%,
        100% 100%,
        100% 0%)`
	}

	let infoElement = (inf, el) => {
		info.innerHTML = inf

		let selfBox = info.getBoundingClientRect()
		let box = el.getBoundingClientRect()
		info.style.left = box.left + box.width/2 - selfBox.width/2 + 'px'
		info.style.top = box.top - selfBox.height - 16 + 'px'
	}
}
</script>
</head>
<body>
	<div id="element">
		This is an element that should have a cutout around it.
	</div>
	<div id="element2">
		This is an element that should have a cutout around it.
		<br>
		Indeed so.
	</div>

	<button id='start'>click to test</button>
	<button id='start2'>click to test</button>
	<div id="overlay"></div>
	<div id="info">Some info</div>
</body>
</html>

kettek added the enhancement New feature or request label Dec 25, 2023

kettek self-assigned this Dec 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement help/guide system #4

Implement help/guide system #4

kettek commented Nov 23, 2022

Implement help/guide system #4

Implement help/guide system #4

Comments

kettek commented Nov 23, 2022