bloat/static/fluoride.js

206 lines
5.4 KiB
JavaScript
Raw Normal View History

2020-01-26 11:21:26 +02:00
// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0
2020-01-08 20:16:06 +02:00
var actionIcons = {
"like": "/static/icons/star-o.png",
2020-01-12 19:16:57 +02:00
"dark-like": "/static/icons/dark-star-o.png",
2020-01-08 20:16:06 +02:00
"unlike": "/static/icons/liked.png",
2020-01-12 19:16:57 +02:00
"dark-unlike": "/static/icons/liked.png",
2020-01-08 20:16:06 +02:00
"retweet": "/static/icons/retweet.png",
2020-01-12 19:16:57 +02:00
"dark-retweet": "/static/icons/dark-retweet.png",
"unretweet": "/static/icons/retweeted.png",
"dark-unretweet": "/static/icons/retweeted.png"
2020-01-08 20:16:06 +02:00
};
var reverseActions = {
"like": "unlike",
"unlike": "like",
"retweet": "unretweet",
"unretweet": "retweet"
};
2020-01-25 12:07:06 +02:00
function getCSRFToken() {
var tag = document.querySelector("meta[name='csrf_token']")
if (tag)
return tag.getAttribute("content");
return "";
}
function http(method, url, body, type, success, error) {
2020-01-08 20:16:06 +02:00
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);
2020-01-25 12:07:06 +02:00
req.setRequestHeader("Content-Type", type);
req.send(body);
2020-01-08 20:16:06 +02:00
}
function updateActionForm(id, f, action) {
2020-01-12 19:16:57 +02:00
if (Array.from(document.body.classList).indexOf("dark") > -1) {
2020-01-25 12:07:06 +02:00
f.querySelector(".icon").src = actionIcons["dark-" + action];
2020-01-12 19:16:57 +02:00
} else {
2020-01-25 12:07:06 +02:00
f.querySelector(".icon").src = actionIcons[action];
2020-01-12 19:16:57 +02:00
}
2020-01-08 20:16:06 +02:00
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]);
});
2020-01-25 12:07:06 +02:00
var body = "csrf_token=" + encodeURIComponent(getCSRFToken());
var contentType = "application/x-www-form-urlencoded";
http("POST", "/fluoride/" + action + "/" + id, body, contentType, function(res, type) {
2020-01-08 20:16:06 +02:00
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]);
});
2020-01-25 12:07:06 +02:00
var body = "csrf_token=" + encodeURIComponent(getCSRFToken());
var contentType = "application/x-www-form-urlencoded";
http("POST", "/fluoride/" + action + "/" + id, body, contentType, function(res, type) {
2020-01-08 20:16:06 +02:00
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);
});
});
}
}
function isInView(el) {
var ract = el.getBoundingClientRect();
if (ract.top > 0 && ract.bottom < window.innerHeight) {
return true;
}
return false;
}
function handleReplyToLink(div) {
if (!div) {
return;
}
var id = div.firstElementChild.getAttribute('href');
if (!id || id[0] != '#') {
return;
}
div.firstElementChild.onmouseenter = function(event) {
var id = event.target.getAttribute('href');
var status = document.querySelector(id);
if (!status) {
return;
}
if (isInView(status)) {
status.classList.add("highlight");
} else {
var copy = status.cloneNode(true);
copy.id = "reply-to-popup";
event.target.parentElement.appendChild(copy);
}
}
div.firstElementChild.onmouseleave = function(event) {
var popup = document.getElementById("reply-to-popup");
if (popup) {
event.target.parentElement.removeChild(popup);
} else {
var id = event.target.getAttribute('href');
document.querySelector(id)
.classList.remove("highlight");
}
}
}
function handleReplyLink(div) {
div.firstElementChild.onmouseenter = function(event) {
var id = event.target.getAttribute('href');
var status = document.querySelector(id);
if (!status) {
return;
}
if (isInView(status)) {
status.classList.add("highlight");
} else {
var copy = status.cloneNode(true);
copy.id = "reply-popup";
event.target.parentElement.appendChild(copy);
}
}
div.firstElementChild.onmouseleave = function(event) {
var popup = document.getElementById("reply-popup");
if (popup) {
event.target.parentElement.removeChild(popup);
} else {
var id = event.target.getAttribute('href');
document.querySelector(id)
.classList.remove("highlight");
}
}
}
2020-01-08 20:16:06 +02:00
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);
var replyToLink = s.querySelector(".status-reply-to");
handleReplyToLink(replyToLink);
var replyLinks = s.querySelectorAll(".status-reply");
replyLinks.forEach(handleReplyLink);
2020-01-08 20:16:06 +02:00
});
});
2020-01-26 11:21:26 +02:00
// @license-end