From a6ed5290db8acaf79d65ee37a673cc9bc66ae7ef Mon Sep 17 00:00:00 2001
From: Bel LaPointe <breel@qualtrics.com>
Date: Thu, 10 Feb 2022 18:46:34 -0700
Subject: [PATCH] highlight current file in tree

---
 spike/review/reinvent/ezmded/server/todo.yaml |  6 ++---
 spike/review/reinvent/ezmded/ui/index.html    | 26 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/spike/review/reinvent/ezmded/server/todo.yaml b/spike/review/reinvent/ezmded/server/todo.yaml
index c680c5e..3dfa16e 100644
--- a/spike/review/reinvent/ezmded/server/todo.yaml
+++ b/spike/review/reinvent/ezmded/server/todo.yaml
@@ -1,12 +1,12 @@
 todo:
-- buttons to invis
-- put images
 - fix links
-- scrape images
+- put images @server
+- fix images
 - scrape odo
 - scrape gdoc
 - scrape gsheet
 done:
+- buttons to invis
 - damned width css
 - css
 - https://developer.mozilla.org/en-US/docs/Web/API/History/pushState#change_a_query_parameter
diff --git a/spike/review/reinvent/ezmded/ui/index.html b/spike/review/reinvent/ezmded/ui/index.html
index 82fc4f9..075353c 100644
--- a/spike/review/reinvent/ezmded/ui/index.html
+++ b/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 == "") {