1
mirror of https://gitlab.com/commento/commento.git synced 2025-06-29 22:56:37 -04:00

frontend: use commento namespace, event handlers, UI

This commit is contained in:
Adhityaa Chandrasekar
2018-12-20 00:48:43 -05:00
parent 9fcf67d667
commit 06c71f4e65
29 changed files with 193 additions and 187 deletions

View File

@ -5,7 +5,7 @@
// cookie is deleted.
global.loggedInRedirect = function() {
if (global.cookieGet("commentoOwnerToken") !== undefined)
document.location = global.commentoOrigin + "/dashboard";
document.location = global.origin + "/dashboard";
}
@ -17,4 +17,4 @@
}
};
} (window, document));
} (window.commento, document));

View File

@ -1,6 +1,13 @@
(function(global, document) {
'use strict';
if (global.commento === undefined) {
console.log("[commento] error: window.commento namespace not defined; maybe there's a mismatch in version between the backend and the frontend?");
return;
}
global = global.commento;
// Do not use other files like utils.js and http.js in the Makefile to build
// commento.js for the following reasons:
// - We don't use jQuery in the actual JavaScript payload because we need
@ -56,8 +63,8 @@
var ID_FOOTER = "commento-footer";
var origin = global.commentoOrigin;
var cdn = global.commentoCdn;
var origin = global.origin;
var cdn = global.cdn;
var root = null;
var cssOverride = undefined;
var autoInit = undefined;
@ -140,6 +147,13 @@
}
function onclick(node, f, ...args) {
node.addEventListener("click", function() {
f(...args);
}, false);
}
function attrSet(node, a, value) {
node.setAttribute(a, value);
}
@ -254,13 +268,13 @@
name.innerText = resp.commenter.name;
logout.innerText = "Logout";
onclick(logout, global.logout);
attrSet(loggedContainer, "style", "display: none");
attrSet(logout, "onclick", "logout()");
attrSet(name, "href", resp.commenter.link);
if (resp.commenter.photo == "undefined") {
avatar = create("div");
avatar.style["background"] = color;
avatar.style["boxShadow"] = "0px 0px 0px 2px " + color;
avatar.innerHTML = resp.commenter.name[0].toUpperCase();
classAdd(avatar, "avatar");
} else {
@ -354,7 +368,7 @@
commenters = resp.commenters;
configuredOauths = resp.configuredOauths;
cssLoad(cdn + "/css/commento.css", "window.loadCssOverride()");
cssLoad(cdn + "/css/commento.css", "window.commento.loadCssOverride()");
call(callback);
});
@ -418,9 +432,11 @@
classAdd(loginButton, "login-button");
classAdd(anonymousButton, "anonymous-button");
attrSet(createButton, "onclick", "loginBoxShow()");
attrSet(loginButton, "onclick", "loginBoxShow(); loginSwitch(true);");
attrSet(anonymousButton, "onclick", "anonymousChoose()");
onclick(createButton, global.loginBoxShow);
onclick(loginButton, global.loginBoxShow);
onclick(loginButton, global.loginSwitch);
onclick(anonymousButton, global.anonymousChoose);
attrSet(textarea, "disabled", true);
createButton.innerText = "Create an Account";
@ -437,8 +453,9 @@
append(textareaContainer, buttonsContainer);
}
else {
onclick(textarea, global.showSubmitButton, id);
attrSet(textarea, "placeholder", "Join the discussion!");
attrSet(textarea, "onclick", "showSubmitButton('" + id + "')");
}
textarea.oninput = autoExpander(textarea);
@ -683,7 +700,6 @@
if (commenter.photo == "undefined") {
avatar = create("div");
avatar.style["background"] = color;
avatar.style["boxShadow"] = "0px 0px 0px 2px " + color;
avatar.innerHTML = commenter.name[0].toUpperCase();
classAdd(avatar, "avatar");
} else {
@ -735,35 +751,22 @@
classAdd(downvote, "downvoted");
}
attrSet(edit, "onclick", "startEdit('" + comment.commentHex + "')");
attrSet(collapse, "onclick", "commentCollapse('" + comment.commentHex + "')");
attrSet(approve, "onclick", "commentApprove('" + comment.commentHex + "')");
attrSet(remove, "onclick", "commentDelete('" + comment.commentHex + "')");
attrSet(sticky, "onclick", "commentSticky('" + comment.commentHex + "')");
onclick(collapse, global.commentCollapse, comment.commentHex);
onclick(approve, global.commentApprove, comment.commentHex);
onclick(remove, global.commentDelete, comment.commentHex);
onclick(sticky, global.commentSticky, comment.commentHex);
if (isAuthenticated) {
if (comment.direction > 0) {
attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', 1, 0)");
attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', 1, -1)");
}
else if (comment.direction < 0) {
attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', -1, 1)");
attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', -1, 0)");
}
else {
attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', 0, 1)");
attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', 0, -1)");
}
}
if (isAuthenticated)
upDownOnclickSet(upvote, downvote, comment.commentHex, comment.direction);
else {
attrSet(upvote, "onclick", "loginBoxShow()");
attrSet(downvote, "onclick", "loginBoxShow()");
onclick(upvote, global.loginBoxShow);
onclick(downvote, global.loginBoxShow);
}
if (isAuthenticated || chosenAnonymous)
attrSet(reply, "onclick", "replyShow('" + comment.commentHex + "')");
onclick(reply, global.replyShow, comment.commentHex);
else
attrSet(reply, "onclick", "loginBoxShow()");
onclick(reply, global.loginBoxShow);
if (commenter.link != "undefined" && commenter.link != "https://undefined" && commenter.link != "")
attrSet(name, "href", commenter.link);
@ -867,6 +870,22 @@
}
function upDownOnclickSet(upvote, downvote, commentHex, direction) {
if (direction > 0) {
onclick(upvote, global.vote, commentHex, 1, 0);
onclick(downvote, global.vote, commentHex, 1, -1);
}
else if (direction < 0) {
onclick(upvote, global.vote, commentHex, -1, 1);
onclick(downvote, global.vote, commentHex, -1, 0);
}
else {
onclick(upvote, global.vote, commentHex, 0, 1);
onclick(downvote, global.vote, commentHex, 0, -1);
}
}
global.vote = function(commentHex, oldVote, direction) {
var upvote = $(ID_UPVOTE + commentHex);
var downvote = $(ID_DOWNVOTE + commentHex);
@ -878,18 +897,7 @@
"direction": direction,
};
if (direction > 0) {
attrSet(upvote, "onclick", "vote('" + commentHex + "', 1, 0)");
attrSet(downvote, "onclick", "vote('" + commentHex + "', 1, -1)");
}
else if (direction < 0) {
attrSet(upvote, "onclick", "vote('" + commentHex + "', -1, 1)");
attrSet(downvote, "onclick", "vote('" + commentHex + "', -1, 0)");
}
else {
attrSet(upvote, "onclick", "vote('" + commentHex + "', 0, 1)");
attrSet(downvote, "onclick", "vote('" + commentHex + "', 0, -1)");
}
upDownOnclickSet(upvote, downvote, commentHex, direction);
classRemove(upvote, "upvoted");
classRemove(downvote, "downvoted");
@ -919,7 +927,7 @@
replyButton.title = "Cancel reply";
attrSet(replyButton, "onclick", "replyCollapse('" + id + "')")
onclick(replyButton, global.replyCollapse, id);
};
@ -936,7 +944,7 @@
replyButton.title = "Reply to this comment";
attrSet(replyButton, "onclick", "replyShow('" + id + "')")
onclick(replyButton, global.replyShow, id)
}
@ -951,7 +959,7 @@
button.title = "Expand";
attrSet(button, "onclick", "commentUncollapse('" + id + "')");
onclick(button, global.commentUncollapse, id);
}
@ -966,7 +974,7 @@
button.title = "Collapse";
attrSet(button, "onclick", "commentCollapse('" + id + "')");
onclick(button, global.commentCollapse, id);
}
@ -1009,7 +1017,7 @@
classAdd(submit, "submit-button");
classAdd(el, "button-margin");
attrSet(submit, "onclick", "commentNew('" + id + "')");
onclick(submit, global.commentNew, id);
append(el, submit);
}
@ -1048,7 +1056,7 @@
$(ID_ROOT).innerHTML = "";
shownSubmitButton = {"root": false};
shownReply = {};
main(callback);
global.main(callback);
}
@ -1116,14 +1124,15 @@
oauthPretext.innerText = "Or proceed with social login.";
anonymousButton.innerText = "Comment anonymously";
onclick(emailButton, global.passwordAsk);
onclick(loginLink, global.loginSwitch);
onclick(anonymousButton, global.anonymousChoose);
onclick(close, global.loginBoxClose);
attrSet(loginBoxContainer, "style", "display: none; opacity: 0;");
attrSet(emailInput, "name", "email");
attrSet(emailInput, "placeholder", "Email address");
attrSet(emailInput, "type", "text");
attrSet(emailButton, "onclick", "passwordAsk()");
attrSet(loginLink, "onclick", "loginSwitch()");
attrSet(anonymousButton, "onclick", "anonymousChoose()");
attrSet(close, "onclick", "loginBoxClose()");
for (var i = 0; i < configuredOauths.length; i++) {
var button = create("button");
@ -1133,7 +1142,7 @@
button.innerText = configuredOauths[i];
attrSet(button, "onclick", "commentoAuth('" + configuredOauths[i] + "')");
onclick(button, global.commentoAuth, configuredOauths[i]);
append(oauthButtons, button);
}
@ -1181,7 +1190,7 @@
loginLink.innerText = "Don't have an account? Sign up.";
subtitle.innerText = "Enter your email address to start with.";
attrSet(loginLink, "onclick", "signupSwitch()");
onclick(loginLink, global.signupSwitch);
loginBoxType = "login";
@ -1195,8 +1204,8 @@
global.signupSwitch = function() {
loginBoxClose();
loginBoxShow();
global.loginBoxClose();
global.loginBoxShow();
}
@ -1208,7 +1217,7 @@
post(origin + "/api/commenter/login", json, function(resp) {
if (!resp.success) {
loginBoxClose();
global.loginBoxClose();
errorShow(resp.message);
return
}
@ -1242,7 +1251,7 @@
post(origin + "/api/commenter/new", json, function(resp) {
if (!resp.success) {
loginBoxClose();
global.loginBoxClose();
errorShow(resp.message);
return
}
@ -1320,9 +1329,9 @@
fieldButton.innerText = loginBoxType;
if (loginBoxType == "signup")
attrSet(fieldButton, "onclick", "signup()");
onclick(fieldButton, global.signup);
else
attrSet(fieldButton, "onclick", "login()");
onclick(fieldButton, global.login);
append(field, fieldButton);
}
@ -1331,7 +1340,7 @@
}
if (loginBoxType == "signup")
$(ID_LOGIN_BOX_PASSWORD_NAME).focus();
$(ID_LOGIN_BOX_NAME_INPUT).focus();
else
$(ID_LOGIN_BOX_PASSWORD_INPUT).focus();
}
@ -1424,15 +1433,15 @@
lock.id = ID_MOD_TOOLS_LOCK_BUTTON;
classAdd(modTools, "mod-tools");
classAdd(lock, "mod-tools-lock-button");
if (isLocked)
lock.innerHTML = "Unlock Thread";
else
lock.innerHTML = "Lock Thread";
onclick(lock, global.threadLockToggle);
attrSet(modTools, "style", "display: none");
attrSet(lock, "onclick", "threadLockToggle()");
append(modTools, lock);
append(root, modTools);
@ -1543,7 +1552,7 @@
dataTagsLoad();
if (autoInit == "true" || autoInit === undefined)
main(undefined);
global.main(undefined);
else if (autoInit != "false")
console.log("[commento] error: invalid value for data-auto-init; allowed values: true, false");
}

View File

@ -11,9 +11,9 @@
global.domainDeleteHandler = function() {
var data = global.dashboard.$data;
domainDelete(data.domains[data.cd].domain, function(success) {
global.domainDelete(data.domains[data.cd].domain, function(success) {
if (success)
document.location = global.commentoOrigin + '/dashboard';
document.location = global.origin + '/dashboard';
});
}
@ -23,7 +23,7 @@
var data = global.dashboard.$data;
data.domains[data.cd].state = "frozen"
domainUpdate(data.domains[data.cd])
global.domainUpdate(data.domains[data.cd])
document.location.hash = "#modal-close";
}
@ -33,9 +33,9 @@
var data = global.dashboard.$data;
data.domains[data.cd].state = "unfrozen"
domainUpdate(data.domains[data.cd])
global.domainUpdate(data.domains[data.cd])
document.location.hash = "#modal-close";
}
} (window, document));
} (window.commento, document));

View File

@ -7,7 +7,7 @@
for (var i = 0; i < domains.length; i++) {
if (domains[i].domain == domain) {
vs("frozen", domains[i].state == "frozen");
global.vs("frozen", domains[i].state == "frozen");
domains[i].selected = true;
data.cd = i;
data.importedComments = domains[i].importedComments;
@ -18,7 +18,7 @@
data.showSettings = true;
settingDeselectAll();
global.settingDeselectAll();
$(".view").hide();
};
@ -42,7 +42,7 @@
}
global.buttonDisable("#add-site-button");
global.post(global.commentoOrigin + "/api/domain/new", json, function(resp) {
global.post(global.origin + "/api/domain/new", json, function(resp) {
global.buttonEnable("#add-site-button");
$("#new-domain-name").val("");
@ -69,7 +69,7 @@
"ownerToken": global.cookieGet("commentoOwnerToken"),
};
global.post(global.commentoOrigin + "/api/domain/list", json, function(resp) {
global.post(global.origin + "/api/domain/list", json, function(resp) {
if (!resp.success) {
global.globalErrorShow(resp.message);
return;
@ -111,7 +111,7 @@
"domain": domain,
};
global.post(global.commentoOrigin + "/api/domain/update", json, function(resp) {
global.post(global.origin + "/api/domain/update", json, function(resp) {
if (callback !== undefined)
callback(resp.success);
@ -130,7 +130,7 @@
"domain": domain,
};
global.post(global.commentoOrigin + "/api/domain/delete", json, function(resp) {
global.post(global.origin + "/api/domain/delete", json, function(resp) {
if (!resp.success) {
global.globalErrorShow(resp.message);
return;
@ -141,4 +141,4 @@
});
}
} (window, document));
} (window.commento, document));

View File

@ -16,4 +16,4 @@
});
};
} (window, document));
} (window.commento, document));

View File

@ -6,7 +6,6 @@
$("#import-view").show();
}
global.importDisqus = function() {
var url = $("#disqus-url").val();
var data = global.dashboard.$data;
@ -18,7 +17,7 @@
}
global.buttonDisable("#disqus-import-button");
global.post(global.commentoOrigin + "/api/domain/import/disqus", json, function(resp) {
global.post(global.origin + "/api/domain/import/disqus", json, function(resp) {
global.buttonEnable("#disqus-import-button");
if (!resp.success) {
@ -28,8 +27,8 @@
$("#disqus-import-button").hide();
globalOKShow("Imported " + resp.numImported + " comments!");
global.globalOKShow("Imported " + resp.numImported + " comments!");
});
}
} (window, document));
} (window.commento, document));

View File

@ -19,4 +19,4 @@
$("#installation-view").show();
};
} (window, document));
} (window.commento, document));

View File

@ -29,7 +29,7 @@
if (idx == -1) {
data.domains[data.cd].moderators.push({"email": email, "timeAgo": "just now"});
global.buttonDisable("#new-mod-button");
global.post(global.commentoOrigin + "/api/domain/moderator/new", json, function(resp) {
global.post(global.origin + "/api/domain/moderator/new", json, function(resp) {
global.buttonEnable("#new-mod-button");
if (!resp.success) {
@ -68,15 +68,15 @@
if (idx != -1) {
data.domains[data.cd].moderators.splice(idx, 1);
global.post(global.commentoOrigin + "/api/domain/moderator/delete", json, function(resp) {
global.post(global.origin + "/api/domain/moderator/delete", json, function(resp) {
if (!resp.success) {
global.globalErrorShow(resp.message);
return
}
globalOKShow("Removed!");
global.globalOKShow("Removed!");
});
}
}
} (window, document));
} (window.commento, document));

View File

@ -43,4 +43,4 @@
settings[i].selected = false;
}
} (window, document));
} (window.commento, document));

View File

@ -16,15 +16,15 @@
var res;
if (x < 1000000) {
res = numberify((x/1000).toFixed(0))
res = global.numberify((x/1000).toFixed(0))
res.units = "K"
}
else if (x < 1000000000) {
res = numberify((x/1000000).toFixed(0))
res = global.numberify((x/1000000).toFixed(0))
res.units = "M"
}
else if (x < 1000000000000) {
res = numberify((x/1000000000).toFixed(0))
res = global.numberify((x/1000000000).toFixed(0))
res.units = "B"
}
@ -43,11 +43,11 @@
}
$(".view").hide();
post(global.commentoOrigin + "/api/domain/statistics", json, function(resp) {
global.post(global.origin + "/api/domain/statistics", json, function(resp) {
$("#statistics-view").show();
if (!resp.success) {
globalErrorShow(resp.message);
global.globalErrorShow(resp.message);
return;
}
@ -97,4 +97,4 @@
});
}
} (window, document));
} (window.commento, document));

View File

@ -23,42 +23,42 @@
"text": "Installation",
"meaning": "Install Commento with HTML",
"selected": false,
"open": installationOpen,
"open": global.installationOpen,
},
{
"id": "general",
"text": "Configure Domain",
"meaning": "Names, domains and the rest",
"selected": false,
"open": generalOpen,
"open": global.generalOpen,
},
{
"id": "moderation",
"text": "Moderation Settings",
"meaning": "Manage list of moderators",
"selected": false,
"open": moderationOpen,
"open": global.moderationOpen,
},
{
"id": "statistics",
"text": "View Activity",
"meaning": "Usage and comment statistics",
"selected": false,
"open": statisticsOpen,
"open": global.statisticsOpen,
},
{
"id": "import",
"text": "Import Comments",
"meaning": "Import from a different service",
"selected": false,
"open": importOpen,
"open": global.importOpen,
},
{
"id": "danger",
"text": "Danger Zone",
"meaning": "Delete or freeze domain",
"selected": false,
"open": dangerOpen,
"open": global.dangerOpen,
},
];
@ -86,4 +86,4 @@
callback();
};
} (window, document));
} (window.commento, document));

View File

@ -28,4 +28,4 @@
global.showGlobalMessage("#global-ok", text);
}
} (window, document));
} (window.commento, document));

View File

@ -16,7 +16,7 @@
};
global.buttonDisable("#reset-button");
global.post(global.commentoOrigin + "/api/owner/send-reset-hex", json, function(resp) {
global.post(global.origin + "/api/owner/send-reset-hex", json, function(resp) {
global.buttonEnable("#reset-button");
global.textSet("#err", "");
@ -30,4 +30,4 @@
});
}
} (window, document));
} (window.commento, document));

View File

@ -28,4 +28,4 @@
});
}
} (window, document));
} (window.commento, document));

View File

@ -15,7 +15,7 @@
// Shows messages produced from password reset attempts.
function displayChangedPassword() {
var changed = paramGet("changed");
var changed = global.paramGet("changed");
if (changed == "true") {
$("#msg").html("Password changed successfully! Login to continue.")
@ -24,7 +24,7 @@
// Shows messages produced from completed signups.
function displaySignedUp() {
var signedUp = paramGet("signedUp");
var signedUp = global.paramGet("signedUp");
if (signedUp == "true") {
$("#msg").html("Registration successful! Login to continue.")
@ -57,7 +57,7 @@
};
global.buttonDisable("#login-button");
global.post(global.commentoOrigin + "/api/owner/login", json, function(resp) {
global.post(global.origin + "/api/owner/login", json, function(resp) {
global.buttonEnable("#login-button");
if (!resp.success) {
@ -66,8 +66,8 @@
}
global.cookieSet("commentoOwnerToken", resp.ownerToken);
document.location = global.commentoOrigin + "/dashboard";
document.location = global.origin + "/dashboard";
});
};
} (window, document));
} (window.commento, document));

View File

@ -2,7 +2,7 @@
global.logout = function() {
global.cookieDelete("commentoOwnerToken");
document.location = global.commentoOrigin + "/login";
document.location = global.origin + "/login";
}
} (window, document));
} (window.commento, document));

View File

@ -21,7 +21,7 @@
};
global.buttonDisable("#reset-button");
global.post(global.commentoOrigin + "/api/owner/reset-password", json, function(resp) {
global.post(global.origin + "/api/owner/reset-password", json, function(resp) {
global.buttonEnable("#reset-button");
global.textSet("#err", "");
@ -30,8 +30,8 @@
return
}
document.location = global.commentoOrigin + "/login?changed=true";
document.location = global.origin + "/login?changed=true";
});
}
} (window, document));
} (window.commento, document));

View File

@ -7,14 +7,14 @@
};
if (json.ownerToken === undefined) {
document.location = global.commentoOrigin + "/login";
document.location = global.origin + "/login";
return;
}
global.post(global.commentoOrigin + "/api/owner/self", json, function(resp) {
global.post(global.origin + "/api/owner/self", json, function(resp) {
if (!resp.success || !resp.loggedIn) {
global.cookieDelete("commentoOwnerToken");
document.location = global.commentoOrigin + "/login";
document.location = global.origin + "/login";
return;
}
@ -23,4 +23,4 @@
});
};
}(window, document));
}(window.commento, document));

View File

@ -9,7 +9,7 @@
return;
}
var all_ok = unfilledMark(["#email", "#name", "#password", "#password2"], function(el) {
var all_ok = global.unfilledMark(["#email", "#name", "#password", "#password2"], function(el) {
el.css("border-bottom", "1px solid red");
});
@ -25,7 +25,7 @@
};
global.buttonDisable("#signup-button");
post(global.commentoOrigin + "/api/owner/new", json, function(resp) {
global.post(global.origin + "/api/owner/new", json, function(resp) {
global.buttonEnable("#signup-button")
if (!resp.success) {
@ -34,10 +34,10 @@
}
if (resp.confirmEmail)
document.location = global.commentoOrigin + "/confirm-email";
document.locatidocumenton = global.origin + "/confirm-email";
else
document.location = global.commentoOrigin + "/login?signedUp=true";
document.location = global.origin + "/login?signedUp=true";
});
};
} (window, document));
} (window.commento, document));

View File

@ -72,7 +72,7 @@
expires = "; expires=" + date.toUTCString();
var cookieString = name + "=" + value + expires + "; path=/";
if (/^https:\/\//i.test(commentoOrigin))
if (/^https:\/\//i.test(origin))
cookieString += "; secure";
document.cookie = cookieString;
@ -115,4 +115,4 @@
return "just now";
}
} (window, document));
} (window.commento, document));