2 files changed, 109 insertions, 1 deletions
diff --git a/static/fluoride.js b/static/fluoride.js
new file mode 100644
index 0000000..3020da0
--- /dev/null
+++ b/static/fluoride.js
@@ -0,0 +1,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);
+	});
+});
diff --git a/static/main.css b/static/main.css
index e82586d..12f2a80 100644
--- a/static/main.css
+++ b/static/main.css
@@ -105,7 +105,9 @@
 	width: auto;
 }
 
-.status-action-count span {
+.status-reply-count,
+.status-retweet-count,
+.status-like-count {
 	vertical-align: middle;
 }