all repos — honk @ b81e0b79ea9edc40a3c42b53e2daa91084ff54b1

my fork of honk

views/honkpage.js (view raw)

  1var csrftoken = ""
  2var honksforpage = { }
  3var curpagestate = { name: "", arg : "" }
  4var tophid = { }
  5var servermsgs = { }
  6
  7function encode(hash) {
  8	var s = []
  9	for (var key in hash) {
 10		var val = hash[key]
 11		s.push(encodeURIComponent(key) + "=" + encodeURIComponent(val))
 12	}
 13	return s.join("&")
 14}
 15function post(url, data) {
 16	var x = new XMLHttpRequest()
 17	x.open("POST", url)
 18	x.timeout = 30 * 1000
 19	x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
 20	x.send(data)
 21}
 22function get(url, whendone, whentimedout) {
 23	var x = new XMLHttpRequest()
 24	x.open("GET", url)
 25	x.timeout = 15 * 1000
 26	x.responseType = "json"
 27	x.onload = function() { whendone(x) }
 28	if (whentimedout) {
 29		x.ontimeout = function(e) { whentimedout(x, e) }
 30	}
 31	x.send()
 32}
 33function bonk(el, xid) {
 34	el.innerHTML = "bonked"
 35	el.disabled = true
 36	post("/bonk", encode({"js": "2", "CSRF": csrftoken, "xid": xid}))
 37	return false
 38}
 39function unbonk(el, xid) {
 40	el.innerHTML = "unbonked"
 41	el.disabled = true
 42	post("/zonkit", encode({"CSRF": csrftoken, "wherefore": "unbonk", "what": xid}))
 43}
 44function muteit(el, convoy) {
 45	el.innerHTML = "muted"
 46	el.disabled = true
 47	post("/zonkit", encode({"CSRF": csrftoken, "wherefore": "zonvoy", "what": convoy}))
 48	var els = document.querySelectorAll('article.honk')
 49	for (var i = 0; i < els.length; i++) {
 50		var e = els[i]
 51		if (e.getAttribute("data-convoy") == convoy) {
 52			e.remove()
 53		}
 54	}
 55}
 56function zonkit(el, xid) {
 57	el.innerHTML = "zonked"
 58	el.disabled = true
 59	post("/zonkit", encode({"CSRF": csrftoken, "wherefore": "zonk", "what": xid}))
 60	var p = el
 61	while (p && p.tagName != "ARTICLE") {
 62		p = p.parentElement
 63	}
 64	if (p) {
 65		p.remove()
 66	}
 67}
 68function flogit(el, how, xid) {
 69	var s = how
 70	if (s[s.length-1] != "e") { s += "e" }
 71	s += "d"
 72	if (s == "untaged") s = "untagged"
 73	if (s == "reacted") s = "badonked"
 74	el.innerHTML = s
 75	el.disabled = true
 76	post("/zonkit", encode({"CSRF": csrftoken, "wherefore": how, "what": xid}))
 77}
 78
 79var lehonkform = document.getElementById("honkform")
 80var lehonkbutton = document.getElementById("honkingtime")
 81
 82function oldestnewest(btn) {
 83	var els = document.getElementsByClassName("glow")
 84	if (els.length) {
 85		els[els.length-1].scrollIntoView()
 86	}
 87}
 88function removeglow() {
 89	var els = document.getElementsByClassName("glow")
 90	while (els.length) {
 91		els[0].classList.remove("glow")
 92	}
 93}
 94
 95function fillinhonks(xhr, glowit) {
 96	var resp = xhr.response
 97	var stash = curpagestate.name + ":" + curpagestate.arg
 98	tophid[stash] = resp.Tophid
 99	var doc = document.createElement( 'div' );
100	doc.innerHTML = resp.Srvmsg
101	var srvmsg = doc
102	doc = document.createElement( 'div' );
103	doc.innerHTML = resp.Honks
104	var honks = doc.children
105
106	var mecount = document.getElementById("mecount")
107	if (resp.MeCount) {
108		mecount.innerHTML = "(" + resp.MeCount + ")"
109	} else {
110		mecount.innerHTML = ""
111	}
112	var chatcount = document.getElementById("chatcount")
113	if (resp.ChatCount) {
114		chatcount.innerHTML = "(" + resp.ChatCount + ")"
115	} else {
116		chatcount.innerHTML = ""
117	}
118
119	var srvel = document.getElementById("srvmsg")
120	while (srvel.children[0]) {
121		srvel.children[0].remove()
122	}
123	srvel.prepend(srvmsg)
124
125	var frontload = true
126	if (curpagestate.name == "convoy") {
127		frontload = false
128	}
129
130	var honksonpage = document.getElementById("honksonpage")
131	var holder = honksonpage.children[0]
132	var lenhonks = honks.length
133	for (var i = honks.length; i > 0; i--) {
134		var h = honks[i-1]
135		if (glowit)
136			h.classList.add("glow")
137		if (frontload) {
138			holder.prepend(h)
139		} else {
140			holder.append(h)
141		}
142	}
143	relinklinks()
144	return lenhonks
145}
146function hydrargs() {
147	var name = curpagestate.name
148	var arg = curpagestate.arg
149	var args = { "page" : name }
150	if (name == "convoy") {
151		args["c"] = arg
152	} else if (name == "combo") {
153		args["c"] = arg
154	} else if (name == "honker") {
155		args["xid"] = arg
156	} else if (name == "user") {
157		args["uname"] = arg
158	}
159	return args
160}
161function refreshupdate(msg) {
162	var el = document.querySelector("#refreshbox p span")
163	if (el) {
164		el.innerHTML = msg
165	}
166}
167function refreshhonks(btn) {
168	removeglow()
169	btn.innerHTML = "refreshing"
170	btn.disabled = true
171	var args = hydrargs()
172	var stash = curpagestate.name + ":" + curpagestate.arg
173	args["tophid"] = tophid[stash]
174	get("/hydra?" + encode(args), function(xhr) {
175		btn.innerHTML = "refresh"
176		btn.disabled = false
177		if (xhr.status == 200) {
178			var lenhonks = fillinhonks(xhr, true)
179			refreshupdate(" " + lenhonks + " new")
180		} else {
181			refreshupdate(" status: " + xhr.status)
182		}
183	}, function(xhr, e) {
184		btn.innerHTML = "refresh"
185		btn.disabled = false
186		refreshupdate(" timed out")
187	})
188}
189function statechanger(evt) {
190	var data = evt.state
191	if (!data) {
192		return
193	}
194	switchtopage(data.name, data.arg)
195}
196function switchtopage(name, arg) {
197	var stash = curpagestate.name + ":" + curpagestate.arg
198	var honksonpage = document.getElementById("honksonpage")
199  honksonpage.replaceChildren();
200	var holder = honksonpage.children[0]
201	holder.remove()
202	var srvel = document.getElementById("srvmsg")
203	var msg = srvel.children[0]
204	if (msg) {
205		msg.remove()
206		servermsgs[stash] = msg
207	}
208	showelement("refreshbox")
209
210	honksforpage[stash] = holder
211
212	curpagestate.name = name
213	curpagestate.arg = arg
214	// get the holder for the target page
215	stash = name + ":" + arg
216	holder = honksforpage[stash]
217	if (holder) {
218		honksonpage.prepend(holder)
219		msg = servermsgs[stash]
220		if (msg) {
221			srvel.prepend(msg)
222		}
223	} else {
224		// or create one and fill it
225		honksonpage.prepend(document.createElement("div"))
226		var args = hydrargs()
227		get("/hydra?" + encode(args), function(xhr) {
228			if (xhr.status == 200) {
229				fillinhonks(xhr, false)
230			} else {
231				refreshupdate(" status: " + xhr.status)
232			}
233		}, function(xhr, e) {
234			refreshupdate(" timed out")
235		})
236	}
237	refreshupdate("")
238}
239function newpagestate(name, arg) {
240	return { "name": name, "arg": arg }
241}
242function pageswitcher(name, arg) {
243	return function(evt) {
244		var topmenu = document.getElementById("topmenu")
245		topmenu.open = false
246		if (name == curpagestate.name && arg == curpagestate.arg) {
247			return false
248		}
249		switchtopage(name, arg)
250		var url = evt.srcElement.href
251		if (!url) {
252			url = evt.srcElement.parentElement.href
253		}
254		history.pushState(newpagestate(name, arg), "some title", url)
255		window.scrollTo(0, 0)
256		return false
257	}
258}
259function relinklinks() {
260	var els = document.getElementsByClassName("convoylink")
261	while (els.length) {
262    var s = (new URL(els[0].href)).search
263    var c = new URLSearchParams(s).get('c')
264		els[0].onclick = pageswitcher("convoy", c)
265		els[0].classList.remove("convoylink")
266	}
267	els = document.getElementsByClassName("combolink")
268	while (els.length) {
269		els[0].onclick = pageswitcher("combo", els[0].text)
270		els[0].classList.remove("combolink")
271	}
272	els = document.getElementsByClassName("honkerlink")
273	while (els.length) {
274		var el = els[0]
275		var xid = el.getAttribute("data-xid")
276		el.onclick = pageswitcher("honker", xid)
277		el.classList.remove("honkerlink")
278	}
279
280	els = document.querySelectorAll("#honksonpage article button")
281	els.forEach(function(el) {
282		var honk = el.closest("article")
283		var convoy = honk.dataset.convoy
284		var hname = honk.dataset.hname
285		var xid = honk.dataset.xid
286		var id = Number(honk.dataset.id)
287
288		if (!(id > 0)) {
289			console.error("could not determine honk id")
290			return
291		}
292
293		if (el.classList.contains("unbonk")) {
294			el.onclick = function() {
295				unbonk(el, xid);
296			}
297		} else if (el.classList.contains("bonk")) {
298			el.onclick = function() {
299				bonk(el, xid)
300			}
301		} else if (el.classList.contains("honkback")) {
302			el.onclick = function() {
303				return showhonkform(el, xid, hname)
304			}
305		} else if (el.classList.contains("mute")) {
306			el.onclick = function() {
307				muteit(el, convoy);
308			}
309		} else if (el.classList.contains("evenmore")) {
310			var more = document.querySelector("#evenmore"+id);
311			el.onclick = function() {
312				more.classList.toggle("hide");
313			}
314		} else if (el.classList.contains("zonk")) {
315			el.onclick = function() {
316				zonkit(el, xid);
317			}
318		} else if (el.classList.contains("flogit-deack")) {
319			el.onclick = function() {
320				flogit(el, "deack", xid);
321			}
322		} else if (el.classList.contains("flogit-ack")) {
323			el.onclick = function() {
324				flogit(el, "ack", xid);
325			}
326		} else if (el.classList.contains("flogit-unsave")) {
327			el.onclick = function() {
328				flogit(el, "unsave", xid);
329			}
330		} else if (el.classList.contains("flogit-save")) {
331			el.onclick = function() {
332				flogit(el, "save", xid);
333			}
334		} else if (el.classList.contains("flogit-untag")) {
335			el.onclick = function() {
336				flogit(el, "untag", xid);
337			}
338		} else if (el.classList.contains("flogit-react")) {
339			el.onclick = function() {
340				flogit(el, "react", xid);
341			}
342		}
343	})
344}
345function showhonkform(elem, rid, hname) {
346	var form = lehonkform
347	form.style = "display: block"
348	if (elem) {
349		form.remove()
350		elem.parentElement.parentElement.parentElement.insertAdjacentElement('beforebegin', form)
351	} else {
352		hideelement(lehonkbutton)
353		elem = document.getElementById("honkformhost")
354		elem.insertAdjacentElement('afterend', form)
355	}
356	var ridinput = document.getElementById("ridinput")
357	var honknoise = document.getElementById("honknoise")
358	if (rid) {
359		ridinput.value = rid
360		if (hname) {
361			honknoise.value = hname + " "
362		} else {
363			honknoise.value = ""
364		}
365	} else {
366		ridinput.value = ""
367		honknoise.value = ""
368	}
369	var updateinput = document.getElementById("updatexidinput")
370	updateinput.value = ""
371	honknoise.focus()
372	return false
373}
374function cancelhonking() {
375	hideelement(lehonkform)
376	showelement(lehonkbutton)
377}
378function showelement(el) {
379	if (typeof(el) == "string")
380		el = document.getElementById(el)
381	if (!el) return
382	el.style.display = "block"
383}
384function hideelement(el) {
385	if (typeof(el) == "string")
386		el = document.getElementById(el)
387	if (!el) return
388	el.style.display = "none"
389}
390function updatedonker() {
391	var el = document.getElementById("donker")
392	el.children[1].textContent = el.children[0].value.slice(-20)
393	el = document.getElementById("donkdescriptor")
394	el.style.display = ""
395	el = document.getElementById("saveddonkxid")
396	el.value = ""
397}
398var checkinprec = 100.0
399var gpsoptions = {
400	enableHighAccuracy: false,
401	timeout: 1000,
402	maximumAge: 0
403};
404function fillcheckin() {
405	if (navigator.geolocation) {
406		navigator.geolocation.getCurrentPosition(function(pos) {
407			showelement("placedescriptor")
408			var el = document.getElementById("placelatinput")
409			el.value = Math.round(pos.coords.latitude * checkinprec) / checkinprec
410			el = document.getElementById("placelonginput")
411			el.value = Math.round(pos.coords.longitude * checkinprec) / checkinprec
412			checkinprec = 10000.0
413			gpsoptions.enableHighAccuracy = true
414			gpsoptions.timeout = 2000
415		}, function(err) {
416			showelement("placedescriptor")
417			var el = document.getElementById("placenameinput")
418			el.value = err.message
419		}, gpsoptions)
420	}
421}
422function addemu(elem) {
423	const data = elem.alt
424	const box = document.getElementById("honknoise");
425	box.value += data;
426}
427function loademus() {
428	var div = document.getElementById("emupicker")
429	var request = new XMLHttpRequest()
430	request.open('GET', '/emus')
431	request.onload = function() {
432		div.innerHTML = request.responseText
433		div.querySelectorAll(".emu").forEach(function(el) {
434			el.onclick = function() {
435				addemu(el)
436			}
437		})
438	}
439	if (div.style.display === "none") {
440		div.style.display = "block";
441	} else {
442		div.style.display = "none";
443	}
444	request.send()
445}
446
447// init
448(function() {
449	var me = document.currentScript;
450	csrftoken = me.dataset.csrf
451	curpagestate.name = me.dataset.pagename
452	curpagestate.arg = me.dataset.pagearg
453	tophid[curpagestate.name + ":" + curpagestate.arg] = me.dataset.tophid
454	servermsgs[curpagestate.name + ":" + curpagestate.arg] = me.dataset.srvmsg
455
456	var el = document.getElementById("homelink")
457	el.onclick = pageswitcher("home", "")
458	el = document.getElementById("atmelink")
459	el.onclick = pageswitcher("atme", "")
460	el = document.getElementById("firstlink")
461	el.onclick = pageswitcher("first", "")
462	el = document.getElementById("savedlink")
463	el.onclick = pageswitcher("saved", "")
464	el = document.getElementById("longagolink")
465	el.onclick = pageswitcher("longago", "")
466
467	var totop = document.querySelector(".nophone")
468	if (totop) {
469		totop.onclick = function() {
470			window.scrollTo(0,0)
471		}
472	}
473
474	var refreshbox = document.getElementById("refreshbox")
475	if (refreshbox) {
476		refreshbox.querySelectorAll("button").forEach(function(el) {
477			if (el.classList.contains("refresh")) {
478				el.onclick = function() {
479					refreshhonks(el)
480				}
481			} else if (el.classList.contains("scrolldown")) {
482				el.onclick = function() {
483					oldestnewest(el)
484				}
485			}
486		})
487
488		if (me.dataset.srvmsg == "one honk maybe more") {
489			hideelement(refreshbox)
490		}
491	}
492
493	var td = document.getElementById("timedescriptor")
494	document.getElementById("addtimebutton").onclick = function() {
495		td.classList.toggle("hide")
496	}
497	document.getElementById("honkingtime").onclick = function() {
498		return showhonkform()
499	}
500	document.getElementById("checkinbutton").onclick = fillcheckin
501	document.getElementById("emuload").onclick = loademus
502	document.querySelector("#donker input").onchange = updatedonker
503	document.querySelector("button[name=cancel]").onclick = cancelhonking
504
505	relinklinks()
506	window.onpopstate = statechanger
507	history.replaceState(curpagestate, "some title", "")
508
509	hideelement("donkdescriptor")
510})();