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({ behavior: "smooth" })
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[frontload ? i-1 : 0]
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 var holder = honksonpage.children[0]
200 holder.remove()
201 var srvel = document.getElementById("srvmsg")
202 var msg = srvel.children[0]
203 if (msg) {
204 msg.remove()
205 servermsgs[stash] = msg
206 }
207 showelement("refreshbox")
208
209 honksforpage[stash] = holder
210
211 curpagestate.name = name
212 curpagestate.arg = arg
213 // get the holder for the target page
214 stash = name + ":" + arg
215 holder = honksforpage[stash]
216 if (holder) {
217 honksonpage.prepend(holder)
218 msg = servermsgs[stash]
219 if (msg) {
220 srvel.prepend(msg)
221 }
222 } else {
223 // or create one and fill it
224 honksonpage.prepend(document.createElement("div"))
225 var args = hydrargs()
226 get("/hydra?" + encode(args), function(xhr) {
227 if (xhr.status == 200) {
228 fillinhonks(xhr, false)
229 } else {
230 refreshupdate(" status: " + xhr.status)
231 }
232 }, function(xhr, e) {
233 refreshupdate(" timed out")
234 })
235 }
236 refreshupdate("")
237}
238function newpagestate(name, arg) {
239 return { "name": name, "arg": arg }
240}
241function pageswitcher(name, arg) {
242 return function(evt) {
243 var topmenu = document.getElementById("topmenu")
244 topmenu.open = false
245 if (name == curpagestate.name && arg == curpagestate.arg) {
246 return false
247 }
248 switchtopage(name, arg)
249 var url = evt.srcElement.href
250 if (!url) {
251 url = evt.srcElement.parentElement.href
252 }
253 history.pushState(newpagestate(name, arg), "some title", url)
254 window.scrollTo(0, 0)
255 return false
256 }
257}
258function relinklinks() {
259 var els = document.getElementsByClassName("convoylink")
260 while (els.length) {
261 els[0].onclick = pageswitcher("convoy", els[0].text)
262 els[0].classList.remove("convoylink")
263 }
264 els = document.getElementsByClassName("combolink")
265 while (els.length) {
266 els[0].onclick = pageswitcher("combo", els[0].text)
267 els[0].classList.remove("combolink")
268 }
269 els = document.getElementsByClassName("honkerlink")
270 while (els.length) {
271 var el = els[0]
272 var xid = el.getAttribute("data-xid")
273 el.onclick = pageswitcher("honker", xid)
274 el.classList.remove("honkerlink")
275 }
276 els = document.getElementsByClassName("donklink")
277 while (els.length) {
278 let el = els[0]
279 el.onclick = function() {
280 el.children[0].classList.remove("donk")
281 el.onclick = null
282 return false
283 }
284 el.classList.remove("donklink")
285 }
286
287 els = document.querySelectorAll("#honksonpage article button")
288 els.forEach(function(el) {
289 var honk = el.closest("article")
290 var convoy = honk.dataset.convoy
291 var hname = honk.dataset.hname
292 var xid = honk.dataset.xid
293 var id = Number(honk.dataset.id)
294
295 if (!(id > 0)) {
296 console.error("could not determine honk id")
297 return
298 }
299
300 if (el.classList.contains("unbonk")) {
301 el.onclick = function() {
302 unbonk(el, xid);
303 }
304 } else if (el.classList.contains("bonk")) {
305 el.onclick = function() {
306 bonk(el, xid)
307 }
308 } else if (el.classList.contains("honkback")) {
309 el.onclick = function() {
310 return showhonkform(el, xid, hname)
311 }
312 } else if (el.classList.contains("mute")) {
313 el.onclick = function() {
314 muteit(el, convoy);
315 }
316 } else if (el.classList.contains("evenmore")) {
317 var more = document.querySelector("#evenmore"+id);
318 el.onclick = function() {
319 more.classList.toggle("hide");
320 }
321 } else if (el.classList.contains("zonk")) {
322 el.onclick = function() {
323 zonkit(el, xid);
324 }
325 } else if (el.classList.contains("flogit-deack")) {
326 el.onclick = function() {
327 flogit(el, "deack", xid);
328 }
329 } else if (el.classList.contains("flogit-ack")) {
330 el.onclick = function() {
331 flogit(el, "ack", xid);
332 }
333 } else if (el.classList.contains("flogit-unsave")) {
334 el.onclick = function() {
335 flogit(el, "unsave", xid);
336 }
337 } else if (el.classList.contains("flogit-save")) {
338 el.onclick = function() {
339 flogit(el, "save", xid);
340 }
341 } else if (el.classList.contains("flogit-untag")) {
342 el.onclick = function() {
343 flogit(el, "untag", xid);
344 }
345 } else if (el.classList.contains("flogit-react")) {
346 el.onclick = function() {
347 flogit(el, "react", xid);
348 }
349 }
350 })
351}
352function showhonkform(elem, rid, hname) {
353 var form = lehonkform
354 form.style = "display: block"
355 if (elem) {
356 form.remove()
357 elem.parentElement.parentElement.parentElement.insertAdjacentElement('beforebegin', form)
358 } else {
359 hideelement(lehonkbutton)
360 elem = document.getElementById("honkformhost")
361 elem.insertAdjacentElement('afterend', form)
362 }
363 var ridinput = document.getElementById("ridinput")
364 var honknoise = document.getElementById("honknoise")
365 if (rid) {
366 ridinput.value = rid
367 if (hname) {
368 honknoise.value = hname + " "
369 } else {
370 honknoise.value = ""
371 }
372 } else {
373 ridinput.value = ""
374 honknoise.value = ""
375 }
376 var updateinput = document.getElementById("updatexidinput")
377 updateinput.value = ""
378 honknoise.focus()
379 return false
380}
381function cancelhonking() {
382 hideelement(lehonkform)
383 showelement(lehonkbutton)
384}
385function showelement(el) {
386 if (typeof(el) == "string")
387 el = document.getElementById(el)
388 if (!el) return
389 el.style.display = "block"
390}
391function hideelement(el) {
392 if (typeof(el) == "string")
393 el = document.getElementById(el)
394 if (!el) return
395 el.style.display = "none"
396}
397function updatedonker(ev) {
398 var el = ev.target.parentElement
399 el.children[1].textContent = el.children[0].value.slice(-20)
400 el = el.nextSibling
401 el.value = ""
402 el = el.parentElement.nextSibling
403 el.style.display = ""
404}
405var checkinprec = 100.0
406var gpsoptions = {
407 enableHighAccuracy: false,
408 timeout: 1000,
409 maximumAge: 0
410};
411function fillcheckin() {
412 if (navigator.geolocation) {
413 navigator.geolocation.getCurrentPosition(function(pos) {
414 showelement("placedescriptor")
415 var el = document.getElementById("placelatinput")
416 el.value = Math.round(pos.coords.latitude * checkinprec) / checkinprec
417 el = document.getElementById("placelonginput")
418 el.value = Math.round(pos.coords.longitude * checkinprec) / checkinprec
419 checkinprec = 10000.0
420 gpsoptions.enableHighAccuracy = true
421 gpsoptions.timeout = 2000
422 }, function(err) {
423 showelement("placedescriptor")
424 var el = document.getElementById("placenameinput")
425 el.value = err.message
426 }, gpsoptions)
427 }
428}
429
430function scrollnexthonk() {
431 var honks = document.getElementsByClassName("honk");
432 for (var i = 0; i < honks.length; i++) {
433 var h = honks[i];
434 var b = h.getBoundingClientRect();
435 if (b.top > 1.0) {
436 h.scrollIntoView()
437 var a = h.querySelector(".actions summary")
438 if (a) a.focus({ preventScroll: true })
439 break
440 }
441 }
442}
443
444function scrollprevioushonk() {
445 var honks = document.getElementsByClassName("honk");
446 for (var i = 1; i < honks.length; i++) {
447 var b = honks[i].getBoundingClientRect();
448 if (b.top > -1.0) {
449 honks[i-1].scrollIntoView()
450 var a = honks[i-1].querySelector(".actions summary")
451 if (a) a.focus({ preventScroll: true })
452 break
453 }
454 }
455}
456
457function hotkey(e) {
458 if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)
459 return
460 if (e.ctrlKey || e.altKey)
461 return
462
463 switch (e.code) {
464 case "KeyR":
465 refreshhonks(document.getElementById("honkrefresher"));
466 break;
467 case "KeyS":
468 oldestnewest(document.getElementById("newerscroller"));
469 break;
470 case "KeyJ":
471 scrollnexthonk();
472 break;
473 case "KeyK":
474 scrollprevioushonk();
475 break;
476 case "KeyM":
477 var menu = document.getElementById("topmenu")
478 if (!menu.open) {
479 menu.open = true
480 menu.querySelector("a").focus()
481 } else {
482 menu.open = false
483 }
484 break
485 case "Escape":
486 var menu = document.getElementById("topmenu")
487 menu.open = false
488 break
489 case "Slash":
490 document.getElementById("topmenu").open = true
491 document.getElementById("searchbox").focus()
492 e.preventDefault()
493 break
494 }
495}
496
497document.addEventListener("keydown", hotkey)
498
499function addemu(elem) {
500 const data = elem.alt
501 const box = document.getElementById("honknoise");
502 box.value += data;
503}
504function loademus() {
505 var div = document.getElementById("emupicker")
506 var request = new XMLHttpRequest()
507 request.open('GET', '/emus')
508 request.onload = function() {
509 div.innerHTML = request.responseText
510 div.querySelectorAll(".emu").forEach(function(el) {
511 el.onclick = function() {
512 addemu(el)
513 }
514 })
515 }
516 if (div.style.display === "none") {
517 div.style.display = "block";
518 } else {
519 div.style.display = "none";
520 }
521 request.send()
522}
523
524// init
525(function() {
526 var me = document.currentScript;
527 csrftoken = me.dataset.csrf
528 curpagestate.name = me.dataset.pagename
529 curpagestate.arg = me.dataset.pagearg
530 tophid[curpagestate.name + ":" + curpagestate.arg] = me.dataset.tophid
531 servermsgs[curpagestate.name + ":" + curpagestate.arg] = me.dataset.srvmsg
532
533 var el = document.getElementById("homelink")
534 el.onclick = pageswitcher("home", "")
535 el = document.getElementById("atmelink")
536 el.onclick = pageswitcher("atme", "")
537 el = document.getElementById("firstlink")
538 el.onclick = pageswitcher("first", "")
539 el = document.getElementById("savedlink")
540 el.onclick = pageswitcher("saved", "")
541 el = document.getElementById("longagolink")
542 el.onclick = pageswitcher("longago", "")
543
544 var totop = document.querySelector(".nophone")
545 if (totop) {
546 totop.onclick = function() {
547 window.scrollTo(0,0)
548 }
549 }
550
551 var refreshbox = document.getElementById("refreshbox")
552 if (refreshbox) {
553 refreshbox.querySelectorAll("button").forEach(function(el) {
554 if (el.classList.contains("refresh")) {
555 el.onclick = function() {
556 refreshhonks(el)
557 }
558 } else if (el.classList.contains("scrolldown")) {
559 el.onclick = function() {
560 oldestnewest(el)
561 }
562 }
563 })
564
565 if (me.dataset.srvmsg == "one honk maybe more") {
566 hideelement(refreshbox)
567 }
568 }
569
570 var td = document.getElementById("timedescriptor")
571 document.getElementById("addtimebutton").onclick = function() {
572 td.classList.toggle("hide")
573 }
574 document.getElementById("honkingtime").onclick = function() {
575 return showhonkform()
576 }
577 document.getElementById("checkinbutton").onclick = fillcheckin
578 document.getElementById("emuload").onclick = loademus
579 document.querySelector("#donker input").onchange = updatedonker
580 document.querySelector("button[name=cancel]").onclick = cancelhonking
581
582 relinklinks()
583 window.onpopstate = statechanger
584 history.replaceState(curpagestate, "some title", "")
585
586 hideelement("donkdescriptor")
587})();