highlight current file in tree

spike/review/reinvent/ezmded/ui/index.html

@@ -19,6 +19,9 @@
 		-->
 
 		<style>
+			html, body {
+				background-color: #f8f8f8;
+			}
 			.EasyMDEContainer button {
 				color: black;
 			}
@@ -48,6 +51,16 @@
 				flex-direction: row;
 				width: calc(100% - 1em);
 			}
+			.fileleaf > input {
+				border: none;
+				border-radius: 0;
+				background: none;
+				outline: none;
+			}
+			.fileleaf > input:hover,
+			input.live_leaf {
+				background: #ddd;
+			}
 			.lr_fullscreen {
 				width: 90%;
 				max-width: 1024px;
@@ -248,6 +261,17 @@
 					easyMDE.togglePreview()
 					var previews = document.getElementsByClassName("preview")
 				}
+				const previouslyHighlighted = document.getElementsByClassName("live_leaf")
+				for (var i in previouslyHighlighted)
+					if (previouslyHighlighted && previouslyHighlighted[i] && previouslyHighlighted[i].classList)
+						previouslyHighlighted[i].classList.remove("live_leaf")
+				setTimeout(() => {
+					const toHighlight = document.getElementsByClassName(btoa("/"+id))
+					for (var i = 0; i < toHighlight.length; i++) {
+						if (toHighlight && toHighlight[i] && toHighlight[i].classList)
+							toHighlight[i].classList.add("live_leaf")
+					}
+				}, 100)
 				navigateToQuery("f", id)
 			}
 
@@ -302,7 +326,7 @@
 				function htmlifyBranch(id, branch) {
 					const maxTreeTitleLength = 35
 					var parent = `
-						<input class="thic_flex" type="button" value="${branch.Leaf.Title.substr(0, maxTreeTitleLength)}" onclick="drawFile('${id}');"/>
+						<input class="thic_flex ${btoa(id)}" type="button" value="${branch.Leaf.Title.substr(0, maxTreeTitleLength)}" onclick="drawFile('${id}');"/>
 						<input type="button" class="lil_btn" value="+" onclick="drawNewFile('${id}');"/>
 					`
 					if (id == "") {