diff --git a/fedireads/static/format.css b/fedireads/static/format.css
index 4c0231cf0..417edd69a 100644
--- a/fedireads/static/format.css
+++ b/fedireads/static/format.css
@@ -395,7 +395,7 @@ blockquote {
box-shadow: #247BA0 0em 0em 1em 0em;
color: #247BA0;
}
-.interaction button.active:hover .icon {
+.interaction .active button:hover .icon {
color: #888;
}
.interaction button {
@@ -405,7 +405,7 @@ blockquote {
padding: 0;
color: #888;
}
-.interaction button.active .icon {
+.interaction .active button .icon {
color: #FF1654;
}
.interaction textarea {
diff --git a/fedireads/static/js/shared.js b/fedireads/static/js/shared.js
index 6c041f54f..da4a9c0c9 100644
--- a/fedireads/static/js/shared.js
+++ b/fedireads/static/js/shared.js
@@ -3,6 +3,44 @@ function hide_element(element) {
element.parentElement.className = classes.replace('visible', '');
}
-function favorite(element) {
-
+function interact(e) {
+ e.preventDefault();
+ ajaxPost(e.target);
+ if (e.target.className.includes('active')) {
+ e.target.className = '';
+ } else {
+ e.target.className += ' active';
+ }
+ return true;
+}
+
+function comment(e) {
+ e.preventDefault();
+ ajaxPost(e.target);
+ // TODO: display comment
+ return true;
+}
+
+function ajaxPost(form, callback) {
+ // jeez. https://stackoverflow.com/questions/33021995
+ var url = form.action;
+ var xhr = new XMLHttpRequest();
+
+ var params = [].filter.call(form.elements, function(el) {
+ return typeof(el.checked) === 'undefined' || el.checked;
+ })
+ .filter(function(el) { return !!el.name; })
+ .filter(function(el) { return el.disabled; })
+ .map(function(el) {
+ return encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value);
+ }).join('&');
+
+ xhr.open('POST', url);
+ xhr.setRequestHeader('Content-type', 'application/x-form-urlencoded');
+ xhr.setRequestHeader('X-CSRFToken', csrf_token);
+
+ if (callback) {
+ xhr.onload = callback.bind(xhr);
+ }
+ xhr.send(params);
}
diff --git a/fedireads/templates/layout.html b/fedireads/templates/layout.html
index 55b91178b..257ff4ca1 100644
--- a/fedireads/templates/layout.html
+++ b/fedireads/templates/layout.html
@@ -70,7 +70,7 @@