all repos — honk @ v1.3.0

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, errfunction) {
 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 (errfunction) {
 29		x.ontimeout = function(e) { errfunction(" timed out") }
 30		x.onerror = function(e) { errfunction(" error") }
 31	}
 32	x.send()
 33}
 34function bonk(el, xid) {
 35	el.innerHTML = "bonked"
 36	el.disabled = true
 37	post("/bonk", encode({"js": "2", "CSRF": csrftoken, "xid": xid}))
 38	return false
 39}
 40function unbonk(el, xid) {
 41	el.innerHTML = "unbonked"
 42	el.disabled = true
 43	post("/zonkit", encode({"CSRF": csrftoken, "wherefore": "unbonk", "what": xid}))
 44}
 45function muteit(el, convoy) {
 46	el.innerHTML = "muted"
 47	el.disabled = true
 48	post("/zonkit", encode({"CSRF": csrftoken, "wherefore": "zonvoy", "what": convoy}))
 49	var els = document.querySelectorAll('article.honk')
 50	for (var i = 0; i < els.length; i++) {
 51		var e = els[i]
 52		if (e.getAttribute("data-convoy") == convoy) {
 53			e.remove()
 54		}
 55	}
 56}
 57function zonkit(el, xid) {
 58	el.innerHTML = "zonked"
 59	el.disabled = true
 60	post("/zonkit", encode({"CSRF": csrftoken, "wherefore": "zonk", "what": xid}))
 61	var p = el
 62	while (p && p.tagName != "ARTICLE") {
 63		p = p.parentElement
 64	}
 65	if (p) {
 66		p.remove()
 67	}
 68}
 69function flogit(el, how, xid) {
 70	var s = how
 71	if (s[s.length-1] != "e") { s += "e" }
 72	s += "d"
 73	if (s == "untaged") s = "untagged"
 74	if (s == "reacted") s = "badonked"
 75	el.innerHTML = s
 76	el.disabled = true
 77	post("/zonkit", encode({"CSRF": csrftoken, "wherefore": how, "what": xid}))
 78}
 79
 80var lehonkform = document.getElementById("honkform")
 81var lehonkbutton = document.getElementById("honkingtime")
 82
 83function oldestnewest(btn) {
 84	var els = document.getElementsByClassName("glow")
 85	if (els.length) {
 86		els[els.length-1].scrollIntoView({ behavior: "smooth" })
 87	}
 88}
 89function removeglow() {
 90	var els = document.getElementsByClassName("glow")
 91	while (els.length) {
 92		els[0].classList.remove("glow")
 93	}
 94}
 95
 96function fillinhonks(xhr, glowit) {
 97	var resp = xhr.response
 98	var stash = curpagestate.name + ":" + curpagestate.arg
 99	tophid[stash] = resp.Tophid
100	var doc = document.createElement( 'div' );
101	doc.innerHTML = resp.Srvmsg
102	var srvmsg = doc
103	doc = document.createElement( 'div' );
104	doc.innerHTML = resp.Honks
105	var honks = doc.children
106
107	var mecount = document.getElementById("mecount")
108	if (resp.MeCount) {
109		mecount.innerHTML = "(" + resp.MeCount + ")"
110	} else {
111		mecount.innerHTML = ""
112	}
113	var chatcount = document.getElementById("chatcount")
114	if (resp.ChatCount) {
115		chatcount.innerHTML = "(" + resp.ChatCount + ")"
116	} else {
117		chatcount.innerHTML = ""
118	}
119
120	var srvel = document.getElementById("srvmsg")
121	while (srvel.children[0]) {
122		srvel.children[0].remove()
123	}
124	srvel.prepend(srvmsg)
125
126	var frontload = true
127	if (curpagestate.name == "convoy") {
128		frontload = false
129	}
130
131	var honksonpage = document.getElementById("honksonpage")
132	var holder = honksonpage.children[0]
133	var lenhonks = honks.length
134	for (var i = honks.length; i > 0; i--) {
135		var h = honks[frontload ? i-1 : 0]
136		if (glowit)
137			h.classList.add("glow")
138		if (frontload) {
139			holder.prepend(h)
140		} else {
141			holder.append(h)
142		}
143	}
144	relinklinks()
145	return lenhonks
146}
147function hydrargs() {
148	var name = curpagestate.name
149	var arg = curpagestate.arg
150	var args = { "page" : name }
151	if (name == "convoy") {
152		args["c"] = arg
153	} else if (name == "combo") {
154		args["c"] = arg
155	} else if (name == "honker") {
156		args["xid"] = arg
157	} else if (name == "user") {
158		args["uname"] = arg
159	}
160	return args
161}
162function refreshupdate(msg) {
163	var el = document.querySelector("#refreshbox p span")
164	if (el) {
165		el.innerHTML = msg
166	}
167}
168function refreshhonks(btn) {
169	removeglow()
170	btn.innerHTML = "refreshing"
171	btn.disabled = true
172	var args = hydrargs()
173	var stash = curpagestate.name + ":" + curpagestate.arg
174	args["tophid"] = tophid[stash]
175	get("/hydra?" + encode(args), function(xhr) {
176		btn.innerHTML = "refresh"
177		btn.disabled = false
178		if (xhr.status == 200) {
179			var lenhonks = fillinhonks(xhr, true)
180			refreshupdate(" " + lenhonks + " new")
181		} else {
182			refreshupdate(" status: " + xhr.status)
183		}
184	}, function(err) {
185		btn.innerHTML = "refresh"
186		btn.disabled = false
187		refreshupdate(err)
188	})
189}
190function statechanger(evt) {
191	var data = evt.state
192	if (!data) {
193		return
194	}
195	switchtopage(data.name, data.arg)
196}
197function switchtopage(name, arg) {
198	var stash = curpagestate.name + ":" + curpagestate.arg
199	var honksonpage = document.getElementById("honksonpage")
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(err) {
234			refreshupdate(err)
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		els[0].onclick = pageswitcher("convoy", els[0].text)
263		els[0].classList.remove("convoylink")
264	}
265	els = document.getElementsByClassName("combolink")
266	while (els.length) {
267		els[0].onclick = pageswitcher("combo", els[0].text)
268		els[0].classList.remove("combolink")
269	}
270	els = document.getElementsByClassName("honkerlink")
271	while (els.length) {
272		var el = els[0]
273		var xid = el.getAttribute("data-xid")
274		el.onclick = pageswitcher("honker", xid)
275		el.classList.remove("honkerlink")
276	}
277	els = document.getElementsByClassName("donklink")
278	while (els.length) {
279		let el = els[0]
280		el.onclick = function() {
281			el.classList.remove("donk")
282			el.onclick = null
283			return false
284		}
285		el.classList.remove("donklink")
286	}
287
288	els = document.querySelectorAll("#honksonpage article button")
289	els.forEach(function(el) {
290		var honk = el.closest("article")
291		var convoy = honk.dataset.convoy
292		var hname = honk.dataset.hname
293		var xid = honk.dataset.xid
294		var id = Number(honk.dataset.id)
295
296		if (!(id > 0)) {
297			console.error("could not determine honk id")
298			return
299		}
300
301		if (el.classList.contains("unbonk")) {
302			el.onclick = function() {
303				unbonk(el, xid);
304			}
305		} else if (el.classList.contains("bonk")) {
306			el.onclick = function() {
307				bonk(el, xid)
308			}
309		} else if (el.classList.contains("honkback")) {
310			el.onclick = function() {
311				return showhonkform(el, xid, hname)
312			}
313		} else if (el.classList.contains("mute")) {
314			el.onclick = function() {
315				muteit(el, convoy);
316			}
317		} else if (el.classList.contains("evenmore")) {
318			var more = document.querySelector("#evenmore"+id);
319			el.onclick = function() {
320				more.classList.toggle("hide");
321			}
322		} else if (el.classList.contains("zonk")) {
323			el.onclick = function() {
324				zonkit(el, xid);
325			}
326		} else if (el.classList.contains("flogit-deack")) {
327			el.onclick = function() {
328				flogit(el, "deack", xid);
329			}
330		} else if (el.classList.contains("flogit-ack")) {
331			el.onclick = function() {
332				flogit(el, "ack", xid);
333			}
334		} else if (el.classList.contains("flogit-unsave")) {
335			el.onclick = function() {
336				flogit(el, "unsave", xid);
337			}
338		} else if (el.classList.contains("flogit-save")) {
339			el.onclick = function() {
340				flogit(el, "save", xid);
341			}
342		} else if (el.classList.contains("flogit-untag")) {
343			el.onclick = function() {
344				flogit(el, "untag", xid);
345			}
346		} else if (el.classList.contains("flogit-react")) {
347			el.onclick = function() {
348				flogit(el, "react", xid);
349			}
350		}
351	})
352}
353function showhonkform(elem, rid, hname) {
354	var form = lehonkform
355	form.style = "display: block"
356	form.reset()
357	if (elem) {
358		form.remove()
359		elem.parentElement.parentElement.parentElement.insertAdjacentElement('beforebegin', form)
360	} else {
361		hideelement(lehonkbutton)
362		elem = document.getElementById("honkformhost")
363		elem.insertAdjacentElement('afterend', form)
364	}
365	var donker = document.getElementById("donker")
366	donker.children[1].textContent = ""
367	var ridinput = document.getElementById("ridinput")
368	var honknoise = document.getElementById("honknoise")
369	if (rid) {
370		ridinput.value = rid
371		if (hname) {
372			honknoise.value = hname + " "
373		} else {
374			honknoise.value = ""
375		}
376	} else {
377		ridinput.value = ""
378		honknoise.value = ""
379	}
380	var updateinput = document.getElementById("updatexidinput")
381	updateinput.value = ""
382	var savedfile = document.getElementById("saveddonkxid")
383	savedfile.value = ""
384	honknoise.focus()
385	return false
386}
387function cancelhonking() {
388	hideelement(lehonkform)
389	showelement(lehonkbutton)
390}
391function showelement(el) {
392	if (typeof(el) == "string")
393		el = document.getElementById(el)
394	if (!el) return
395	el.style.display = "block"
396}
397function hideelement(el) {
398	if (typeof(el) == "string")
399		el = document.getElementById(el)
400	if (!el) return
401	el.style.display = "none"
402}
403function updatedonker(ev) {
404	var el = ev.target.parentElement
405	el.children[1].textContent = el.children[0].value.slice(-20)
406	el = el.nextSibling
407	el.value = ""
408	el = el.parentElement.nextSibling
409	el.style.display = ""
410}
411var checkinprec = 100.0
412var gpsoptions = {
413	enableHighAccuracy: false,
414	timeout: 1000,
415	maximumAge: 0
416};
417function fillcheckin() {
418	if (navigator.geolocation) {
419		navigator.geolocation.getCurrentPosition(function(pos) {
420			showelement("placedescriptor")
421			var el = document.getElementById("placelatinput")
422			el.value = Math.round(pos.coords.latitude * checkinprec) / checkinprec
423			el = document.getElementById("placelonginput")
424			el.value = Math.round(pos.coords.longitude * checkinprec) / checkinprec
425			checkinprec = 10000.0
426			gpsoptions.enableHighAccuracy = true
427			gpsoptions.timeout = 2000
428		}, function(err) {
429			showelement("placedescriptor")
430			var el = document.getElementById("placenameinput")
431			el.value = err.message
432		}, gpsoptions)
433	}
434}
435
436function scrollnexthonk() {
437	var honks = document.getElementsByClassName("honk");
438	for (var i = 0; i < honks.length; i++) {
439		var h = honks[i];
440		var b = h.getBoundingClientRect();
441		if (b.top > 1.0) {
442			h.scrollIntoView()
443			var a = h.querySelector(".actions summary")
444			if (a) a.focus({ preventScroll: true })
445			break
446		}
447	}
448}
449
450function scrollprevioushonk() {
451	var honks = document.getElementsByClassName("honk");
452	for (var i = 1; i < honks.length; i++) {
453		var b = honks[i].getBoundingClientRect();
454		if (b.top > -1.0) {
455			honks[i-1].scrollIntoView()
456			var a = honks[i-1].querySelector(".actions summary")
457			if (a) a.focus({ preventScroll: true })
458			break
459		}
460	}
461}
462
463function hotkey(e) {
464	if (e.ctrlKey || e.altKey)
465		return
466	if (e.code == "Escape") {
467		var menu = document.getElementById("topmenu")
468		menu.open = false
469		return
470	}
471	if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
472		return
473
474	switch (e.code) {
475	case "KeyR":
476		refreshhonks(document.getElementById("honkrefresher"));
477		break;
478	case "KeyS":
479		oldestnewest(document.getElementById("newerscroller"));
480		break;
481	case "KeyJ":
482		scrollnexthonk();
483		break;
484	case "KeyK":
485		scrollprevioushonk();
486		break;
487	case "KeyM":
488		var menu = document.getElementById("topmenu")
489		if (!menu.open) {
490			menu.open = true
491			menu.querySelector("a").focus()
492		} else {
493			menu.open = false
494		}
495		break
496	case "Slash":
497		document.getElementById("topmenu").open = true
498		document.getElementById("searchbox").focus()
499		e.preventDefault()
500		break
501	}
502}
503
504document.addEventListener("keydown", hotkey)
505
506function addemu(elem) {
507	const data = elem.alt
508	const box = document.getElementById("honknoise");
509	box.value += data;
510}
511function loademus() {
512	var div = document.getElementById("emupicker")
513	var request = new XMLHttpRequest()
514	request.open('GET', '/emus')
515	request.onload = function() {
516		div.innerHTML = request.responseText
517		div.querySelectorAll(".emu").forEach(function(el) {
518			el.onclick = function() {
519				addemu(el)
520			}
521		})
522	}
523	if (div.style.display === "none") {
524		div.style.display = "block";
525	} else {
526		div.style.display = "none";
527	}
528	request.send()
529}
530
531// init
532(function() {
533	var me = document.currentScript;
534	csrftoken = me.dataset.csrf
535	curpagestate.name = me.dataset.pagename
536	curpagestate.arg = me.dataset.pagearg
537	tophid[curpagestate.name + ":" + curpagestate.arg] = me.dataset.tophid
538	servermsgs[curpagestate.name + ":" + curpagestate.arg] = me.dataset.srvmsg
539
540	var el = document.getElementById("homelink")
541	el.onclick = pageswitcher("home", "")
542	el = document.getElementById("atmelink")
543	el.onclick = pageswitcher("atme", "")
544	el = document.getElementById("firstlink")
545	el.onclick = pageswitcher("first", "")
546	el = document.getElementById("savedlink")
547	el.onclick = pageswitcher("saved", "")
548	el = document.getElementById("longagolink")
549	el.onclick = pageswitcher("longago", "")
550
551	var totop = document.querySelector(".nophone")
552	if (totop) {
553		totop.onclick = function() {
554			window.scrollTo(0,0)
555		}
556	}
557
558	var refreshbox = document.getElementById("refreshbox")
559	if (refreshbox) {
560		refreshbox.querySelectorAll("button").forEach(function(el) {
561			if (el.classList.contains("refresh")) {
562				el.onclick = function() {
563					refreshhonks(el)
564				}
565			} else if (el.classList.contains("scrolldown")) {
566				el.onclick = function() {
567					oldestnewest(el)
568				}
569			}
570		})
571
572		if (me.dataset.srvmsg == "one honk maybe more") {
573			hideelement(refreshbox)
574		}
575	}
576
577	var td = document.getElementById("timedescriptor")
578	document.getElementById("addtimebutton").onclick = function() {
579		td.classList.toggle("hide")
580	}
581	document.getElementById("honkingtime").onclick = function() {
582		return showhonkform()
583	}
584	document.getElementById("checkinbutton").onclick = fillcheckin
585	document.getElementById("emuload").onclick = loademus
586	document.querySelector("#donker input").onchange = updatedonker
587	document.querySelector("button[name=cancel]").onclick = cancelhonking
588
589	relinklinks()
590	window.onpopstate = statechanger
591	history.replaceState(curpagestate, "some title", "")
592
593	hideelement("donkdescriptor")
594})();