From b6c1b3aeaca30b67f2e555f9689f7d8d69431205 Mon Sep 17 00:00:00 2001 From: bel Date: Wed, 9 Feb 2022 21:57:56 -0700 Subject: [PATCH 1/3] navigation --- spike/review/reinvent/ezmded/ui/index.html | 26 +++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/spike/review/reinvent/ezmded/ui/index.html b/spike/review/reinvent/ezmded/ui/index.html index 82ed804..5c96a20 100644 --- a/spike/review/reinvent/ezmded/ui/index.html +++ b/spike/review/reinvent/ezmded/ui/index.html @@ -42,6 +42,10 @@ function init() { drawTree() setInterval(drawTree, 100000) + navigateToQueryParams() + } + + function navigateToQueryParams() { var queryF = getParameterByName("f") var queryQ = getParameterByName("q") console.log("init query f:", queryF, "q:", queryQ) @@ -50,7 +54,7 @@ } else if (queryQ && queryQ.length > 0) { searchFilesFor(queryQ) } - } + } function getParameterByName(name, url = window.location.href) { name = name.replace(/[\[\]]/g, '\\$&'); @@ -99,7 +103,7 @@ if (!results || results.length == 0) innerHTML = "no results" disableMDE() - window.location.hash = "#?q="+q + navigateToQuery("q", q) document.getElementById("searchResults").innerHTML = innerHTML }) } @@ -174,9 +178,25 @@ easyMDE.meta = { id: id, } - window.location.hash = "#?f="+id + navigateToQuery("f", id) } + var lastNavigateToQuery = new Date() + + function navigateToQuery(k, v) { + if (new Date() - lastNavigateToQuery < .1) + return + lastNavigateToQuery = new Date() + const url = new URL(window.location) + url.searchParams.set(k, v) + window.location.hash = "#?"+k+"="+v + //window.history.pushState({}, '', url) + } + + window.onhashchange = () => { + navigateToQueryParams() + } + function drawTree() { function htmlifyBranch(id, branch) { var parent = ` From e0ead8f3c6327c054c80480fd910e292601c8031 Mon Sep 17 00:00:00 2001 From: bel Date: Wed, 9 Feb 2022 22:30:01 -0700 Subject: [PATCH 2/3] nondestructive hash setting --- .../review/reinvent/ezmded/server/todo.yaml | 3 ++- spike/review/reinvent/ezmded/ui/index.html | 10 ++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) rename todo.yaml => spike/review/reinvent/ezmded/server/todo.yaml (95%) diff --git a/todo.yaml b/spike/review/reinvent/ezmded/server/todo.yaml similarity index 95% rename from todo.yaml rename to spike/review/reinvent/ezmded/server/todo.yaml index bc26274..74579de 100644 --- a/todo.yaml +++ b/spike/review/reinvent/ezmded/server/todo.yaml @@ -1,4 +1,5 @@ todo: -- https://developer.mozilla.org/en-US/docs/Web/API/History/pushState#change_a_query_parameter - preview default via q param - css +done: +- 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 5c96a20..a1dbb93 100644 --- a/spike/review/reinvent/ezmded/ui/index.html +++ b/spike/review/reinvent/ezmded/ui/index.html @@ -189,8 +189,14 @@ lastNavigateToQuery = new Date() const url = new URL(window.location) url.searchParams.set(k, v) - window.location.hash = "#?"+k+"="+v - //window.history.pushState({}, '', url) + var hash = "#?" + const it = url.searchParams.entries() + let result = it.next() + while (!result.done) { + hash = hash + result.value[0] + "=" + result.value[1] + "&" + result = it.next() + } + window.location.hash = hash } window.onhashchange = () => { From 9fa5dc767af39ac0b2c880d9a53fd2b3990b375a Mon Sep 17 00:00:00 2001 From: bel Date: Wed, 9 Feb 2022 23:03:43 -0700 Subject: [PATCH 3/3] wip --- spike/review/reinvent/ezmded/ui/index.html | 60 +++++++++++++--------- 1 file changed, 35 insertions(+), 25 deletions(-) diff --git a/spike/review/reinvent/ezmded/ui/index.html b/spike/review/reinvent/ezmded/ui/index.html index a1dbb93..b9087a4 100644 --- a/spike/review/reinvent/ezmded/ui/index.html +++ b/spike/review/reinvent/ezmded/ui/index.html @@ -42,10 +42,10 @@ function init() { drawTree() setInterval(drawTree, 100000) - navigateToQueryParams() + navigateToQueryParams() } - function navigateToQueryParams() { + function navigateToQueryParams() { var queryF = getParameterByName("f") var queryQ = getParameterByName("q") console.log("init query f:", queryF, "q:", queryQ) @@ -54,7 +54,7 @@ } else if (queryQ && queryQ.length > 0) { searchFilesFor(queryQ) } - } + } function getParameterByName(name, url = window.location.href) { name = name.replace(/[\[\]]/g, '\\$&'); @@ -103,7 +103,7 @@ if (!results || results.length == 0) innerHTML = "no results" disableMDE() - navigateToQuery("q", q) + navigateToQuery("q", q) document.getElementById("searchResults").innerHTML = innerHTML }) } @@ -178,30 +178,30 @@ easyMDE.meta = { id: id, } - navigateToQuery("f", id) + navigateToQuery("f", id) } - var lastNavigateToQuery = new Date() + var lastNavigateToQuery = new Date() - function navigateToQuery(k, v) { - if (new Date() - lastNavigateToQuery < .1) - return - lastNavigateToQuery = new Date() - const url = new URL(window.location) - url.searchParams.set(k, v) - var hash = "#?" - const it = url.searchParams.entries() - let result = it.next() - while (!result.done) { - hash = hash + result.value[0] + "=" + result.value[1] + "&" - result = it.next() - } - window.location.hash = hash - } + function navigateToQuery(k, v) { + if (new Date() - lastNavigateToQuery < .1) + return + lastNavigateToQuery = new Date() + const url = new URL(window.location) + url.searchParams.set(k, v) + var hash = "#?" + const it = url.searchParams.entries() + let result = it.next() + while (!result.done) { + hash = hash + result.value[0] + "=" + result.value[1] + "&" + result = it.next() + } + window.location.hash = hash + } - window.onhashchange = () => { - navigateToQueryParams() - } + window.onhashchange = () => { + navigateToQueryParams() + } function drawTree() { function htmlifyBranch(id, branch) { @@ -281,7 +281,9 @@
- +
+ +
@@ -317,6 +319,14 @@ codeSyntaxHighlighting: true, }, }) + easyMDE.togglePreview() + /* todo */ + setTimeout(() => { + var previews = document.getElementsByClassName("preview") + for (var i in previews) { + previews[i].classList.add("active") + } + }, 250) function logValue() { console.log(easyMDE.value())