debounce hiding of popout when unhovering

This takes a delay of 300ms before effectively hiding the popout, and keeps it open if the mouse is inside the contents.

This fixes #44

Author: disberd

src/structbond/css/popout.css

@@ -13,6 +13,7 @@ popout-contents {
     padding: 8px;
 }
 popout-container.popped > popout-contents,
+popout-container.contents-hover > popout-contents,
 popout-container.header-hover > popout-contents {
     display: block;
     position: fixed;

src/structbond/main_definitions.jl

@@ -341,14 +341,32 @@ _show_popout(p::Popout) = wrapped() do Child
 
 	header.onclick = (e) => {container.popout()}
 
-	contents.onmouseenter = (e) => container.classList.toggle('contents-hover', true)
-	contents.onmouseleave = (e) => container.classList.toggle('contents-hover', false)
+	// Create a reusable debounced class removal function
+	const createDebouncedClassRemover = (container, className, delay) => {
+		return _.debounce(() => {
+			container.classList.toggle(className, false)
+		}, delay)
+	}
+
+	const debouncedRemoveContentsHover = createDebouncedClassRemover(container, 'contents-hover', 300)
+	const debouncedRemoveHeaderHover = createDebouncedClassRemover(container, 'header-hover', 300)
+
+	contents.onmouseenter = (e) => {
+		container.classList.toggle('contents-hover', true)
+		debouncedRemoveContentsHover.cancel()
+	}
+	contents.onmouseleave = (e) => {
+		debouncedRemoveContentsHover()
+	}
 
 	header.onmouseenter = (e) => {
 		container.classList.toggle('header-hover', true)
 		container.classList.contains('popped') ? null : positionContents()
+		debouncedRemoveHeaderHover.cancel()
+	}
+	header.onmouseleave = (e) => {
+		debouncedRemoveHeaderHover()
 	}
-	header.onmouseleave = (e) => container.classList.toggle('header-hover', false)
 </script>
 <style>
 	$(CSS_Sheets.popout)