Differences From
Artifact [86bdd64b84]:
1 1 /* first things first, we need to scan over the document and see
2 2 * if there are any UI elements unfortunate enough to need
3 3 * interactivity beyond what native HTML+CSS can provide. if so,
4 4 * we attach the appropriate listeners to them. */
5 5 window.addEventListener('load', function() {
6 + /* social media is less fun when you can't just click on a tweet
7 + * to insta-like or -retweet it. this is unfortunately not possible
8 + * (except in various hideously shitty ways) without javascript. */
9 + function mk(elt) { return document.createElement(elt); }
10 + function attachButtons() {
11 + document.querySelectorAll('body:not(.post) main div.post').forEach(function(post){
12 + let url = post.querySelector('.permalink').attributes.getNamedItem('href').value;
13 + function postReq(act,elt) {
14 + fetch(new Request(url, {
15 + method: 'POST',
16 + body: 'act='+act
17 + })).then(function(resp) {
18 + if (resp.ok && resp.status == 200) {
19 + var i = parseInt(elt.innerHTML)
20 + if (isNaN(i)) {i=0}
21 + elt.innerHTML = (i+1).toString()
22 + }
23 + })
24 + }
25 +
26 + var stats = post.querySelector('.stats');
27 + if (stats == null) {
28 + /* no stats box; create one */
29 + var n = mk('div');
30 + n.classList.add('stats');
31 + post.appendChild(n);
32 + stats = n
33 + }
34 + function ensureElt(cls, before) {
35 + let s = stats.querySelector('.' + cls);
36 + if (s == null) {
37 + var n = mk('div');
38 + n.classList.add(cls);
39 + if (before == null) { stats.appendChild(n) } else {
40 + stats.insertBefore(n,stats.querySelector(before))
41 + }
42 + return n
43 + } else { return s }
44 + }
45 + var like = ensureElt('like', null);
46 + var rt = ensureElt('rt','.like');
47 + function activate(elt,name) {
48 + elt.addEventListener('click', function(e) { postReq(name,elt) });
49 + elt.style.setProperty('cursor','pointer');
50 + }
51 + activate(like,'like');
52 + activate(rt,'rt');
53 + });
54 + }
55 +
6 56 /* update hue-picker background when slider is adjusted */
7 57 document.querySelectorAll('.color-picker').forEach(function(box) {
8 58 let slider = box.querySelector('[data-color-pick]');
9 59 box.style.setProperty('--hue', slider.value);
10 60 slider.addEventListener('input', function(e) {
11 61 box.style.setProperty('--hue', e.target.value);
12 62 });
................................................................................
38 88 return;
39 89 }
40 90 container._liveLastArrival = newest
41 91
42 92 resp.text().then(function(htmlbody) {
43 93 var parser = new DOMParser();
44 94 var newdoc = parser.parseFromString(htmlbody,'text/html')
45 - container.innerHTML = newdoc.getElementById(container.id).innerHTML
95 + container.innerHTML = newdoc.getElementById(container.id).innerHTML;
96 + attachButtons();
46 97 })
47 98 })
48 99 }, interv)
49 100 });
101 +
102 + attachButtons();
50 103 });