|
|
/* Isso – Ich schrei sonst!
|
|
|
*
|
|
|
* Copyright 2013, Martin Zimmermann <info@posativ.org>. All rights reserved.
|
|
|
* License: BSD Style, 2 clauses. See isso/__init__.py.
|
|
|
*/
|
|
|
|
|
|
|
|
|
define(["lib/q", "lib/HTML", "helper/utils", "helper/identicons", "./api", "./forms"], function(Q, HTML, utils, identicons, api, forms) {
|
|
|
|
|
|
var insert = function(comment, scrollIntoView) {
|
|
|
/*
|
|
|
* insert a comment (JSON/object) into the #isso-thread or below a parent (#isso-N), renders some HTML and
|
|
|
* registers events to reply to, edit and remove a comment.
|
|
|
*/
|
|
|
|
|
|
if (comment.parent) {
|
|
|
entrypoint = HTML.query("#isso-" + comment.parent).add("div.isso-follow-up");
|
|
|
} else {
|
|
|
entrypoint = HTML.query("div#isso-root")
|
|
|
}
|
|
|
|
|
|
entrypoint.add("article.isso-comment#isso-" + comment.id)
|
|
|
.add("header+span.avatar+div.text+footer")
|
|
|
var node = HTML.query("#isso-" + comment.id),
|
|
|
date = new Date(parseInt(comment.created) * 1000);
|
|
|
|
|
|
if (comment.mode == 2) {
|
|
|
node.header.add("span.note").textContent = 'Kommentar muss noch freigeschaltet werden';
|
|
|
} else if (comment.mode == 4) { // deleted
|
|
|
node.classList.add('deleted');
|
|
|
node.header.add("span.note").textContent = "Kommentar gelöscht."
|
|
|
}
|
|
|
|
|
|
if (comment.website) {
|
|
|
var el = node.header.add("a.author")
|
|
|
el.textContent= comment.author || 'Anonymous';
|
|
|
el.href = comment.website;
|
|
|
el.rel = "nofollow"
|
|
|
} else {
|
|
|
node.header.add("span.author").innerHTML = comment.author || 'Anonymous';
|
|
|
}
|
|
|
|
|
|
node.header.add("span.spacer").textContent = "•";
|
|
|
|
|
|
var permalink = node.header.add("a.permalink");
|
|
|
permalink.href = '#isso-' + comment.id;
|
|
|
permalink.add("date[datetime=" + date.getUTCFullYear() + "-" + date.getUTCMonth() + "-" + date.getUTCDay() + "]")
|
|
|
var refresh = function() {
|
|
|
permalink.date.textContent = utils.ago(date);
|
|
|
setTimeout(refresh, 60*1000)
|
|
|
}; refresh();
|
|
|
|
|
|
var canvas = node.query("span.avatar").add("canvas[hash=" + comment.hash + "]");
|
|
|
canvas.width = canvas.height = 48;
|
|
|
identicons.generate(canvas.getContext('2d'), comment.hash);
|
|
|
|
|
|
if (comment.mode == 4) {
|
|
|
node.query(".text").add("p").value = " "
|
|
|
} else {
|
|
|
node.query(".text").innerHTML = comment.text;
|
|
|
}
|
|
|
|
|
|
node.footer.add("a.liek{Liek}").href = "#";
|
|
|
node.footer.add("a.reply{Antworten}").href = "#";
|
|
|
|
|
|
if (scrollIntoView) {
|
|
|
node.scrollIntoView(false);
|
|
|
}
|
|
|
|
|
|
if (utils.read(comment.id)) {
|
|
|
node.footer.add("a.delete{Löschen}").href = "#";
|
|
|
node.footer.add("a.edit{Bearbeiten}").href = "#";
|
|
|
|
|
|
var delbtn = node.query("a.delete"),
|
|
|
editbtn = node.query("a.edit");
|
|
|
|
|
|
delbtn.addEventListener("click", function(event) {
|
|
|
if (delbtn.textContent == "Bestätigen") {
|
|
|
api.remove(comment.id).then(function(rv) {
|
|
|
if (rv) {
|
|
|
node.remove();
|
|
|
} else {
|
|
|
node.classList.add('deleted');
|
|
|
node.header.add("span.note").textContent = "Kommentar gelöscht.";
|
|
|
HTML.query("#isso-" + comment.id + " > div.text").innerHTML = "<p> </p>"
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
delbtn.textContent = "Bestätigen"
|
|
|
setTimeout(function() {delbtn.textContent = "Löschen"}, 1500)
|
|
|
}
|
|
|
event.preventDefault();
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// ability to answer directly to a comment
|
|
|
HTML.query("#isso-" + comment.id + " a.reply").addEventListener("click", function(event) {
|
|
|
|
|
|
// remove active form when clicked again or reply to another comment
|
|
|
var active = HTML.query(".isso-active-msgbox"); // [] when empty, element if not
|
|
|
|
|
|
if (! (active instanceof Array)) {
|
|
|
active.query("div.isso-comment-box").remove()
|
|
|
active.classList.remove("isso-active-msgbox");
|
|
|
active.query("a.reply").textContent = "Antworten"
|
|
|
|
|
|
if (active.id == "isso-" + comment.id) {
|
|
|
event.preventDefault();
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
var msgbox = forms.msgbox({})
|
|
|
HTML.query("#isso-" + comment.id).footer.appendChild(msgbox);
|
|
|
HTML.query("#isso-" + comment.id).classList.add("isso-active-msgbox");
|
|
|
HTML.query("#isso-" + comment.id + " a.reply").textContent = "Schließen";
|
|
|
|
|
|
// msgbox.scrollIntoView(false);
|
|
|
msgbox.query("input[type=submit]").addEventListener("click", function(event) {
|
|
|
forms.validate(msgbox) && api.create({
|
|
|
author: msgbox.query("[name=author]").value || null,
|
|
|
email: msgbox.query("[name=email]").value || null,
|
|
|
website: msgbox.query("[name=website]").value || null,
|
|
|
text: msgbox.query("textarea").value,
|
|
|
parent: comment.id })
|
|
|
.then(function(rv) {
|
|
|
// remove box on submit
|
|
|
msgbox.parentNode.parentNode.classList.remove("isso-active-msgbox");
|
|
|
msgbox.parentNode.parentNode.query("a.reply").textContent = "Antworten"
|
|
|
msgbox.remove()
|
|
|
insert(rv, true);
|
|
|
})
|
|
|
event.preventDefault()
|
|
|
});
|
|
|
event.preventDefault();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
var init = function() {
|
|
|
|
|
|
var rootmsgbox = forms.msgbox({});
|
|
|
var h4 = HTML.query("#isso-thread").add("h4")
|
|
|
HTML.query("#isso-thread").add("div#isso-root").add(rootmsgbox);
|
|
|
rootmsgbox.query("input[type=submit]").addEventListener("click", function(event) {
|
|
|
forms.validate(rootmsgbox) && api.create({
|
|
|
author: rootmsgbox.query("[name=author]").value || null,
|
|
|
email: rootmsgbox.query("[name=email]").value || null,
|
|
|
website: rootmsgbox.query("[name=website]").value || null,
|
|
|
text: rootmsgbox.query("textarea").value,
|
|
|
parent: null })
|
|
|
.then(function(rv) {
|
|
|
rootmsgbox.query("[name=author]").value = "";
|
|
|
rootmsgbox.query("[name=email]").value = "";
|
|
|
rootmsgbox.query("[name=website]").value = "";
|
|
|
rootmsgbox.query("textarea").value = "";
|
|
|
rootmsgbox.query("textarea").rows = 2;
|
|
|
rootmsgbox.query("textarea").blur();
|
|
|
insert(rv, true);
|
|
|
})
|
|
|
event.preventDefault()
|
|
|
});
|
|
|
|
|
|
api.fetchall().then(function(comments) {
|
|
|
h4.textContent = comments.length + " Kommentare zu \"" + utils.heading() + "\"";
|
|
|
for (var i in comments) {
|
|
|
insert(comments[i])
|
|
|
}
|
|
|
}).fail(function(rv) {
|
|
|
h4.textContent = "Kommentiere \"" + utils.heading() + "\"";
|
|
|
})
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
init: init
|
|
|
}
|
|
|
}); |