3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
..
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
* interactivity beyond what native HTML+CSS can provide. if so,
* we attach the appropriate listeners to them. */
window.addEventListener('load', function() {
/* social media is less fun when you can't just click on a tweet
* to insta-like or -retweet it. this is unfortunately not possible
* (except in various hideously shitty ways) without javascript. */
function mk(elt) { return document.createElement(elt); }
function attachButtons() {
document.querySelectorAll('body:not(.post) main div.post').forEach(function(post){
let url = post.querySelector('.permalink').attributes.getNamedItem('href').value;
function postReq(act,elt) {
fetch(new Request(url, {
method: 'POST',
body: 'act='+act
})).then(function(resp) {
if (resp.ok && resp.status == 200) {
var i = parseInt(elt.innerHTML)
if (isNaN(i)) {i=0}
elt.innerHTML = (i+1).toString()
}
})
}
var stats = post.querySelector('.stats');
if (stats == null) {
/* no stats box; create one */
var n = mk('div');
n.classList.add('stats');
................................................................................
}
return n
} else { return s }
}
var like = ensureElt('like', null);
var rt = ensureElt('rt','.like');
function activate(elt,name) {
elt.addEventListener('click', function(e) { postReq(name,elt) });
elt.style.setProperty('cursor','pointer');
}
activate(like,'like');
activate(rt,'rt');
});
}
/* update hue-picker background when slider is adjusted */
document.querySelectorAll('.color-picker').forEach(function(box) {
let slider = box.querySelector('[data-color-pick]');
box.style.setProperty('--hue', slider.value);
slider.addEventListener('input', function(e) {
|
|
<
|
>
|
|
|
|
|
|
|
|
|
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
>
>
>
>
>
>
|
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
..
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
* interactivity beyond what native HTML+CSS can provide. if so,
* we attach the appropriate listeners to them. */
window.addEventListener('load', function() {
/* social media is less fun when you can't just click on a tweet
* to insta-like or -retweet it. this is unfortunately not possible
* (except in various hideously shitty ways) without javascript. */
function mk(elt) { return document.createElement(elt); }
function posturl(post) {
return post.querySelector('.permalink').attributes.getNamedItem('href').value;
}
function postReq(url,act,elt) {
fetch(new Request(url, {
method: 'POST',
body: 'act='+act
})).then(function(resp) {
if (resp.ok && resp.status == 200) {
var i = parseInt(elt.innerHTML)
if (isNaN(i)) {i=0}
elt.innerHTML = (i+1).toString()
}
})
}
/* div-based like and rt aren't very keyboard-friendly. add a replacement */
if (document.querySelector('body.timeline, body.profile') != null) {
window.addEventListener('keydown', function(event) {
if (!window._liveTweetMap) { return; }
if (event.isComposing || event.keyCode === 229) { return; } // 🙄
var cururl = window._liveTweetMap.cur;
var nexturl = null;
if (event.key == 'j') { // down
if (cururl == null) {
nexturl = window._liveTweetMap.first
} else {
nexturl = window._liveTweetMap.map.get(cururl).next
}
} else if (event.key == 'k') { // up
if (cururl == null) {
nexturl = window._liveTweetMap.last
} else {
nexturl = window._liveTweetMap.map.get(cururl).prev
}
} else if (cururl != null) {
var post = window._liveTweetMap.map.get(cururl).me
if (event.key == 'f') { // fave
postReq(cururl, 'like', post.querySelector('.stats>.like'))
} else if (event.key == 'r') { // rt
postReq(cururl, 'rt', post.querySelector('.stats>.rt'))
} else if (event.key == 'Enter') { // nav
window.location = cururl;
return;
}
}
if (nexturl != null) {
if (cururl != null) {
var cur = window._liveTweetMap.map.get(cururl);
cur.me.classList.remove('live-selected')
}
var next = window._liveTweetMap.map.get(nexturl);
next.me.classList.add('live-selected')
window._liveTweetMap.cur = nexturl
}
});
}
function attachButtons() {
var last = null;
var newmap = { cur: null, first: null, last: null, map: new Map() }
document.querySelectorAll('body:not(.post) main article.post').forEach(function(post){
let url = posturl(post);
if (last == null) { newmap.first = url; } else {
newmap.map.get(last).next = url
}
newmap.map.set(url, {me: post, prev: last, next: null})
last = url
if (window._liveTweetMap && window._liveTweetMap.cur == url) {
post.classList.add('live-selected');
}
var stats = post.querySelector('.stats');
if (stats == null) {
/* no stats box; create one */
var n = mk('div');
n.classList.add('stats');
................................................................................
}
return n
} else { return s }
}
var like = ensureElt('like', null);
var rt = ensureElt('rt','.like');
function activate(elt,name) {
elt.addEventListener('click', function(e) { postReq(url,name,elt) });
elt.style.setProperty('cursor','pointer');
elt.setAttribute('tabindex','0');
}
activate(like,'like');
activate(rt,'rt');
});
newmap.last = last
if (window._liveTweetMap) {
newmap.cur = window._liveTweetMap.cur // TODO handle vanishments
}
window._liveTweetMap = newmap
}
/* update hue-picker background when slider is adjusted */
document.querySelectorAll('.color-picker').forEach(function(box) {
let slider = box.querySelector('[data-color-pick]');
box.style.setProperty('--hue', slider.value);
slider.addEventListener('input', function(e) {
|