1
2
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
var actionIcons = {
"like": "/static/icons/star-o.png",
"unlike": "/static/icons/liked.png",
"retweet": "/static/icons/retweet.png",
"unretweet": "/static/icons/retweeted.png"
};
var reverseActions = {
"like": "unlike",
"unlike": "like",
"retweet": "unretweet",
"unretweet": "retweet"
};
function http(method, url, success, error) {
var req = new XMLHttpRequest();
req.onload = function() {
if (this.status === 200 && typeof success === "function") {
success(this.responseText, this.responseType);
} else if (typeof error === "function") {
error(this.responseText);
}
};
req.onerror = function() {
if (typeof error === "function") {
error(this.responseText);
}
};
req.open(method, url);
req.send();
}
function updateActionForm(id, f, action) {
f.children[1].src = actionIcons[action];
f.action = "/" + action + "/" + id;
f.dataset.action = action;
}
function handleLikeForm(id, f) {
f.onsubmit = function(event) {
event.preventDefault();
var action = f.dataset.action;
var forms = document.querySelectorAll(".status-"+id+" .status-like");
forms.forEach(function(f) {
updateActionForm(id, f, reverseActions[action]);
});
http("POST", "/fluoride/" + action + "/" + id, function(res, type) {
var data = JSON.parse(res);
var count = data.data;
if (count === 0) {
count = "";
}
var counts = document.querySelectorAll(".status-"+id+" .status-like-count");
counts.forEach(function(c) {
c.innerHTML = count;
});
}, function(err) {
forms.forEach(function(f) {
updateActionForm(id, f, action);
});
});
}
}
function handleRetweetForm(id, f) {
f.onsubmit = function(event) {
event.preventDefault();
var action = f.dataset.action;
var forms = document.querySelectorAll(".status-"+id+" .status-retweet");
forms.forEach(function(f) {
updateActionForm(id, f, reverseActions[action]);
});
http("POST", "/fluoride/" + action + "/" + id, function(res, type) {
var data = JSON.parse(res);
var count = data.data;
if (count === 0) {
count = "";
}
var counts = document.querySelectorAll(".status-"+id+" .status-retweet-count");
counts.forEach(function(c) {
c.innerHTML = count;
});
}, function(err) {
forms.forEach(function(f) {
updateActionForm(id, f, action);
});
});
}
}
document.addEventListener("DOMContentLoaded", function() {
var statuses = document.querySelectorAll(".status-container");
statuses.forEach(function(s) {
var id = s.dataset.id;
var likeForm = s.querySelector(".status-like");
handleLikeForm(id, likeForm);
var retweetForm = s.querySelector(".status-retweet");
handleRetweetForm(id, retweetForm);
});
});
|
