From a8dbbec988cf1ed42a051d1a0dfa9987d890d440 Mon Sep 17 00:00:00 2001 From: r Date: Wed, 8 Jan 2020 18:16:06 +0000 Subject: Add fluoride mode --- static/fluoride.js | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++ static/main.css | 4 +- 2 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 static/fluoride.js (limited to 'static') 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; } -- cgit v1.2.3