next step towards interactive page switch

This commit is contained in:
Ted Unangst 2019-09-24 17:55:17 -04:00
parent c318eaed60
commit 8b600770d3
4 changed files with 69 additions and 33 deletions

View File

@ -16,7 +16,7 @@
<body> <body>
<header> <header>
{{ if .UserInfo }} {{ if .UserInfo }}
<details> <details id="topmenu">
<summary>menu</summary> <summary>menu</summary>
<p> <p>
<ul> <ul>
@ -27,7 +27,7 @@
<summary>combos</summary> <summary>combos</summary>
<ul> <ul>
{{ range .Combos }} {{ range .Combos }}
<li><a href="/c/{{ . }}">{{ . }}</a> <li><a class="combolink" href="/c/{{ . }}">{{ . }}</a>
{{ end }} {{ end }}
</ul> </ul>
</details> </details>

View File

@ -27,9 +27,10 @@
{{ if .HonkCSRF }} {{ if .HonkCSRF }}
<script> <script>
var csrftoken = {{ .HonkCSRF }} var csrftoken = {{ .HonkCSRF }}
var topxid = { "{{ .PageName }}" : "{{ .TopXID }}" }
var honksforpage = { } var honksforpage = { }
var thispagename = "{{ .PageName }}" var curpagestate = { name: "{{ .PageName }}", arg : "{{ .PageArg }}" }
var topxid = { }
topxid[curpagestate.name + ":" + curpagestate.arg] = "{{ .TopXID }}"
</script> </script>
<script src="/honkpage.js{{ .JSParam }}"></script> <script src="/honkpage.js{{ .JSParam }}"></script>
{{ end }} {{ end }}

View File

@ -65,7 +65,8 @@ function deackit(el, xid) {
} }
function fillinhonks(xhr) { function fillinhonks(xhr) {
var doc = xhr.responseXML var doc = xhr.responseXML
topxid[thispagename] = doc.children[0].children[1].children[0].innerText var stash = curpagestate.name + ":" + curpagestate.arg
topxid[stash] = doc.children[0].children[1].children[0].innerText
var honks = doc.children[0].children[1].children[1].children var honks = doc.children[0].children[1].children[1].children
var honksonpage = document.getElementById("honksonpage") var honksonpage = document.getElementById("honksonpage")
var holder = honksonpage.children[0] var holder = honksonpage.children[0]
@ -73,14 +74,30 @@ function fillinhonks(xhr) {
for (var i = honks.length; i > 0; i--) { for (var i = honks.length; i > 0; i--) {
holder.prepend(honks[i-1]) holder.prepend(honks[i-1])
} }
relinkconvoys() relinklinks()
return lenhonks return lenhonks
} }
function hydrargs() {
var name = curpagestate.name
var arg = curpagestate.arg
var args = { "page" : name }
if (name == "convoy") {
args["c"] = arg
} else if (name == "combo") {
console.log("loading combo " + arg)
args["c"] = arg
} else {
var stash = name + ":" + arg
args["topxid"] = topxid[stash]
}
return args
}
function refreshhonks(btn) { function refreshhonks(btn) {
btn.innerHTML = "refreshing" btn.innerHTML = "refreshing"
btn.disabled = true btn.disabled = true
var args = { "page" : thispagename } var args = hydrargs()
args["topxid"] = topxid[thispagename] var stash = curpagestate.name + ":" + curpagestate.arg
args["topxid"] = topxid[stash]
get("/hydra?" + encode(args), function(xhr) { get("/hydra?" + encode(args), function(xhr) {
var lenhonks = fillinhonks(xhr) var lenhonks = fillinhonks(xhr)
btn.innerHTML = "refresh" btn.innerHTML = "refresh"
@ -89,60 +106,71 @@ function refreshhonks(btn) {
}) })
} }
function statechanger(evt) { function statechanger(evt) {
var name = evt.state var data = evt.state
if (!name) { if (!data) {
return return
} }
switchtopage(name) switchtopage(data.name, data.arg)
} }
function switchtopage(name, evt) { function switchtopage(name, arg) {
var honksonpage = document.getElementById("honksonpage") var honksonpage = document.getElementById("honksonpage")
var holder = honksonpage.children[0] var holder = honksonpage.children[0]
holder.remove() holder.remove()
if (thispagename != "convoy") { // if not convoy, save current page
honksforpage[thispagename] = holder if (name != "convoy") {
var stash = curpagestate.name + ":" + curpagestate.arg
honksforpage[stash] = holder
} }
thispagename = name curpagestate.name = name
holder = honksforpage[name] curpagestate.arg = arg
// get the holder for the target page
var stash = name + ":" + arg
holder = honksforpage[stash]
if (holder) { if (holder) {
honksonpage.prepend(holder) honksonpage.prepend(holder)
} else { } else {
// or create one and fill it
honksonpage.prepend(document.createElement("div")) honksonpage.prepend(document.createElement("div"))
var args = { "page" : name } var args = hydrargs()
if (name == "convoy") {
var c = evt.srcElement.text
args["c"] = c
} else {
args["topxid"] = topxid[name]
}
get("/hydra?" + encode(args), fillinhonks) get("/hydra?" + encode(args), fillinhonks)
} }
var topmenu = document.getElementById("topmenu")
topmenu.open = false
} }
function pageswitcher(name) { function newpagestate(name, arg) {
return { "name": name, "arg": arg }
}
function pageswitcher(name, arg) {
return function(evt) { return function(evt) {
if (name == thispagename) { console.log("switching to", name +":"+arg)
if (name == curpagestate.name && arg == curpagestate.arg) {
console.log("skipping nav")
return false return false
} }
switchtopage(name, evt) switchtopage(name, arg)
var url = evt.srcElement.href var url = evt.srcElement.href
history.pushState(name, "some title", url) history.pushState(newpagestate(name, arg), "some title", url)
return false return false
} }
} }
function relinkconvoys() { function relinklinks() {
var els = document.getElementsByClassName("convoylink") var els = document.getElementsByClassName("convoylink")
for (var i = 0; i < els.length; i++) { for (var i = 0; i < els.length; i++) {
els[i].onclick = pageswitcher("convoy") els[i].onclick = pageswitcher("convoy", els[i].text)
}
els = document.getElementsByClassName("combolink")
for (var i = 0; i < els.length; i++) {
els[i].onclick = pageswitcher("combo", els[i].text)
} }
} }
(function() { (function() {
var el = document.getElementById("homelink") var el = document.getElementById("homelink")
el.onclick = pageswitcher("home") el.onclick = pageswitcher("home", "")
var el = document.getElementById("atmelink") var el = document.getElementById("atmelink")
el.onclick = pageswitcher("atme") el.onclick = pageswitcher("atme", "")
relinkconvoys() relinklinks()
window.onpopstate = statechanger window.onpopstate = statechanger
history.replaceState(thispagename, "some title", "") history.replaceState(curpagestate, "some title", "")
})(); })();
(function() { (function() {
var el = document.getElementById("donkdescriptor") var el = document.getElementById("donkdescriptor")

7
web.go
View File

@ -546,8 +546,12 @@ func showcombo(w http.ResponseWriter, r *http.Request) {
honks = osmosis(honks, u.UserID) honks = osmosis(honks, u.UserID)
templinfo := getInfo(r) templinfo := getInfo(r)
templinfo["PageName"] = "combo" templinfo["PageName"] = "combo"
templinfo["PageArg"] = "name"
templinfo["ServerMessage"] = "honks by combo: " + name templinfo["ServerMessage"] = "honks by combo: " + name
templinfo["HonkCSRF"] = login.GetCSRF("honkhonk", r) templinfo["HonkCSRF"] = login.GetCSRF("honkhonk", r)
if len(honks) > 0 {
templinfo["TopXID"] = honks[0].XID
}
honkpage(w, u, honks, templinfo) honkpage(w, u, honks, templinfo)
} }
func showconvoy(w http.ResponseWriter, r *http.Request) { func showconvoy(w http.ResponseWriter, r *http.Request) {
@ -1415,6 +1419,9 @@ func webhydra(w http.ResponseWriter, r *http.Request) {
case "home": case "home":
honks = gethonksforuser(userid) honks = gethonksforuser(userid)
honks = osmosis(honks, userid) honks = osmosis(honks, userid)
case "combo":
c := r.FormValue("c")
honks = gethonksbycombo(userid, c)
case "convoy": case "convoy":
c := r.FormValue("c") c := r.FormValue("c")
honks = gethonksbyconvoy(userid, c) honks = gethonksbyconvoy(userid, c)