Ivan/commento
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend: allow CSS overrides

Browse Source
This commit is contained in:
Adhityaa 2018-06-16 18:38:24 +05:30
parent e93733510b
commit fea61af08d
2 changed files with 112 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
frontend/js/commento.js
View File

@ -53,6 +53,7 @@
var origin = global.commento_origin; var origin = global.commento_origin;
var cdn = global.commento_cdn; var cdn = global.commento_cdn;
var root = null; var root = null;
var cssOverride = undefined;
var isAuthenticated = false; var isAuthenticated = false;
var comments = []; var comments = [];
var commenters = []; var commenters = [];
@ -72,6 +73,11 @@
} }
function tags(tag) {
return document.getElementsByTagName(tag);
}
function dataGet(el, key) { function dataGet(el, key) {
return el.dataset[key]; return el.dataset[key];
} }
@ -112,7 +118,17 @@
} }
function attr(node, a, value) { function attrGet(node, a) {
var attr = node.attributes[a];
if (attr === undefined)
return undefined;
return attr.value;
}
function attrSet(node, a, value) {
node.setAttribute(a, value); node.setAttribute(a, value);
} }
@ -223,9 +239,9 @@
name.innerText = resp.commenter.name; name.innerText = resp.commenter.name;
logout.innerText = "Logout"; logout.innerText = "Logout";
attr(loggedContainer, "style", "display: none"); attrSet(loggedContainer, "style", "display: none");
attr(logout, "onclick", "logout()"); attrSet(logout, "onclick", "logout()");
attr(name, "href", resp.commenter.link); attrSet(name, "href", resp.commenter.link);
if (resp.commenter.photo == "undefined") { if (resp.commenter.photo == "undefined") {
avatar = create("div"); avatar = create("div");
avatar.style["background"] = color; avatar.style["background"] = color;
@ -235,9 +251,9 @@
} else { } else {
avatar = create("img"); avatar = create("img");
if (resp.commenter.provider == "google") { if (resp.commenter.provider == "google") {
attr(avatar, "src", resp.commenter.photo + "?sz=50"); attrSet(avatar, "src", resp.commenter.photo + "?sz=50");
} else { } else {
attr(avatar, "src", resp.commenter.photo); attrSet(avatar, "src", resp.commenter.photo);
} }
classAdd(avatar, "avatar-img"); classAdd(avatar, "avatar-img");
} }
@ -254,14 +270,14 @@
}); });
} }
function cssLoad(file) { function cssLoad(file, onload) {
var link = create("link"); var link = create("link");
var head = document.getElementsByTagName('head')[0]; var head = document.getElementsByTagName('head')[0];
link.type = "text/css"; link.type = "text/css";
attr(link, "href", file); attrSet(link, "href", file);
attr(link, "rel", "stylesheet"); attrSet(link, "rel", "stylesheet");
attr(link, "onload", "window.allShow()"); attrSet(link, "onload", onload);
append(head, link); append(head, link);
} }
@ -304,10 +320,10 @@
classAdd(img, "logo-svg"); classAdd(img, "logo-svg");
classAdd(text, "logo-text"); classAdd(text, "logo-text");
attr(footer, "style", "display: none"); attrSet(footer, "style", "display: none");
attr(a, "href", "https://commento.io"); attrSet(a, "href", "https://commento.io");
attr(a, "target", "_blank"); attrSet(a, "target", "_blank");
attr(img, "src", cdn + "/images/logo.svg"); attrSet(img, "src", cdn + "/images/logo.svg");
text.innerText = "Powered by Commento"; text.innerText = "Powered by Commento";
@ -342,7 +358,7 @@
if (!resp.requireIdentification) if (!resp.requireIdentification)
configuredOauths.push("anonymous"); configuredOauths.push("anonymous");
cssLoad(cdn + "/css/commento.css"); cssLoad(cdn + "/css/commento.css", "window.loadCssOverride()");
call(callback); call(callback);
}); });
@ -353,7 +369,7 @@
el.innerText = text; el.innerText = text;
attr(el, "style", "display: block;"); attrSet(el, "style", "display: block;");
} }
function errorElementCreate() { function errorElementCreate() {
@ -362,7 +378,7 @@
el.id = ID_ERROR; el.id = ID_ERROR;
classAdd(el, "error-box"); classAdd(el, "error-box");
attr(el, "style", "display: none;"); attrSet(el, "style", "display: none;");
append(root, el); append(root, el);
} }
@ -403,8 +419,8 @@
classAdd(createButton, "button"); classAdd(createButton, "button");
classAdd(createButton, "create-button"); classAdd(createButton, "create-button");
attr(createButton, "onclick", "loginBoxShow()"); attrSet(createButton, "onclick", "loginBoxShow()");
attr(textarea, "disabled", true); attrSet(textarea, "disabled", true);
createButton.innerText = "Create an Account"; createButton.innerText = "Create an Account";
@ -412,8 +428,8 @@
append(textareaContainer, buttonsContainer); append(textareaContainer, buttonsContainer);
} }
else { else {
attr(textarea, "placeholder", "Join the discussion!"); attrSet(textarea, "placeholder", "Join the discussion!");
attr(textarea, "onclick", "showSubmitButton('" + id + "')"); attrSet(textarea, "onclick", "showSubmitButton('" + id + "')");
} }
textarea.oninput = autoExpander(textarea); textarea.oninput = autoExpander(textarea);
@ -625,9 +641,9 @@
} else { } else {
avatar = create("img"); avatar = create("img");
if (commenter.provider == "google") { if (commenter.provider == "google") {
attr(avatar, "src", commenter.photo + "?sz=50"); attrSet(avatar, "src", commenter.photo + "?sz=50");
} else { } else {
attr(avatar, "src", commenter.photo); attrSet(avatar, "src", commenter.photo);
} }
classAdd(avatar, "avatar-img"); classAdd(avatar, "avatar-img");
} }
@ -663,50 +679,50 @@
classAdd(downvote, "downvoted"); classAdd(downvote, "downvoted");
} }
attr(edit, "onclick", "startEdit('" + comment.commentHex + "')"); attrSet(edit, "onclick", "startEdit('" + comment.commentHex + "')");
attr(collapse, "onclick", "commentCollapse('" + comment.commentHex + "')"); attrSet(collapse, "onclick", "commentCollapse('" + comment.commentHex + "')");
attr(approve, "onclick", "commentApprove('" + comment.commentHex + "')"); attrSet(approve, "onclick", "commentApprove('" + comment.commentHex + "')");
attr(remove, "onclick", "commentDelete('" + comment.commentHex + "')"); attrSet(remove, "onclick", "commentDelete('" + comment.commentHex + "')");
if (isAuthenticated) { if (isAuthenticated) {
if (comment.direction > 0) { if (comment.direction > 0) {
attr(upvote, "onclick", "vote('" + comment.commentHex + "', 1, 0)"); attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', 1, 0)");
attr(downvote, "onclick", "vote('" + comment.commentHex + "', 1, -1)"); attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', 1, -1)");
} }
else if (comment.direction < 0) { else if (comment.direction < 0) {
attr(upvote, "onclick", "vote('" + comment.commentHex + "', -1, 1)"); attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', -1, 1)");
attr(downvote, "onclick", "vote('" + comment.commentHex + "', -1, 0)"); attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', -1, 0)");
} }
else { else {
attr(upvote, "onclick", "vote('" + comment.commentHex + "', 0, 1)"); attrSet(upvote, "onclick", "vote('" + comment.commentHex + "', 0, 1)");
attr(downvote, "onclick", "vote('" + comment.commentHex + "', 0, -1)"); attrSet(downvote, "onclick", "vote('" + comment.commentHex + "', 0, -1)");
} }
} }
else { else {
attr(upvote, "onclick", "loginBoxShow()"); attrSet(upvote, "onclick", "loginBoxShow()");
attr(downvote, "onclick", "loginBoxShow()"); attrSet(downvote, "onclick", "loginBoxShow()");
} }
if (isAuthenticated || chosenAnonymous) if (isAuthenticated || chosenAnonymous)
attr(reply, "onclick", "replyShow('" + comment.commentHex + "')"); attrSet(reply, "onclick", "replyShow('" + comment.commentHex + "')");
else else
attr(reply, "onclick", "loginBoxShow()"); attrSet(reply, "onclick", "loginBoxShow()");
if (isAuthenticated) { if (isAuthenticated) {
if (isModerator) { if (isModerator) {
if (comment.state == "unapproved") if (comment.state == "unapproved")
attr(options, "style", "width: 192px;"); attrSet(options, "style", "width: 192px;");
else else
attr(options, "style", "width: 160px;"); attrSet(options, "style", "width: 160px;");
} }
else else
attr(options, "style", "width: 128px;"); attrSet(options, "style", "width: 128px;");
} }
else else
attr(options, "style", "width: 32px;"); attrSet(options, "style", "width: 32px;");
if (commenter.link != "undefined") if (commenter.link != "undefined")
attr(name, "href", commenter.link); attrSet(name, "href", commenter.link);
if (false) // replace when edit is implemented if (false) // replace when edit is implemented
append(options, edit); append(options, edit);
@ -762,7 +778,7 @@
var tick = $(ID_APPROVE + commentHex); var tick = $(ID_APPROVE + commentHex);
classRemove(card, "dark-card"); classRemove(card, "dark-card");
attr(options, "style", "width: 160px;"); attrSet(options, "style", "width: 160px;");
remove(tick); remove(tick);
}); });
} }
@ -790,7 +806,7 @@
var els = document.getElementsByClassName("commento-name"); var els = document.getElementsByClassName("commento-name");
for (var i = 0; i < els.length; i++) for (var i = 0; i < els.length; i++)
attr(els[i], "style", "max-width: " + (els[i].getBoundingClientRect()["width"] + 20) + "px;") attrSet(els[i], "style", "max-width: " + (els[i].getBoundingClientRect()["width"] + 20) + "px;")
} }
@ -806,16 +822,16 @@
}; };
if (direction > 0) { if (direction > 0) {
attr(upvote, "onclick", "vote('" + commentHex + "', 1, 0)"); attrSet(upvote, "onclick", "vote('" + commentHex + "', 1, 0)");
attr(downvote, "onclick", "vote('" + commentHex + "', 1, -1)"); attrSet(downvote, "onclick", "vote('" + commentHex + "', 1, -1)");
} }
else if (direction < 0) { else if (direction < 0) {
attr(upvote, "onclick", "vote('" + commentHex + "', -1, 1)"); attrSet(upvote, "onclick", "vote('" + commentHex + "', -1, 1)");
attr(downvote, "onclick", "vote('" + commentHex + "', -1, 0)"); attrSet(downvote, "onclick", "vote('" + commentHex + "', -1, 0)");
} }
else { else {
attr(upvote, "onclick", "vote('" + commentHex + "', 0, 1)"); attrSet(upvote, "onclick", "vote('" + commentHex + "', 0, 1)");
attr(downvote, "onclick", "vote('" + commentHex + "', 0, -1)"); attrSet(downvote, "onclick", "vote('" + commentHex + "', 0, -1)");
} }
classRemove(upvote, "upvoted"); classRemove(upvote, "upvoted");
@ -845,7 +861,7 @@
replyButton.title = "Cancel reply"; replyButton.title = "Cancel reply";
attr(replyButton, "onclick", "replyCollapse('" + id + "')") attrSet(replyButton, "onclick", "replyCollapse('" + id + "')")
}; };
global.replyCollapse = function(id) { global.replyCollapse = function(id) {
@ -861,7 +877,7 @@
replyButton.title = "Reply to this comment"; replyButton.title = "Reply to this comment";
attr(replyButton, "onclick", "replyShow('" + id + "')") attrSet(replyButton, "onclick", "replyShow('" + id + "')")
} }
global.commentCollapse = function(id) { global.commentCollapse = function(id) {
@ -875,7 +891,7 @@
button.title = "Expand"; button.title = "Expand";
attr(button, "onclick", "commentUncollapse('" + id + "')"); attrSet(button, "onclick", "commentUncollapse('" + id + "')");
} }
global.commentUncollapse = function(id) { global.commentUncollapse = function(id) {
@ -889,7 +905,7 @@
button.title = "Collapse"; button.title = "Collapse";
attr(button, "onclick", "commentCollapse('" + id + "')"); attrSet(button, "onclick", "commentCollapse('" + id + "')");
} }
function commentsRender() { function commentsRender() {
@ -930,7 +946,7 @@
classAdd(submit, "submit-button"); classAdd(submit, "submit-button");
classAdd(el, "button-margin"); classAdd(el, "button-margin");
attr(submit, "onclick", "postComment('" + id + "')"); attrSet(submit, "onclick", "postComment('" + id + "')");
append(el, submit); append(el, submit);
} }
@ -1029,13 +1045,13 @@
subtitle.innerText = "Sign up with your email to vote and comment."; subtitle.innerText = "Sign up with your email to vote and comment.";
oauthPretext.innerText = "Or proceed with social login."; oauthPretext.innerText = "Or proceed with social login.";
attr(loginBoxContainer, "style", "display: none; opacity: 0;"); attrSet(loginBoxContainer, "style", "display: none; opacity: 0;");
attr(emailInput, "name", "email"); attrSet(emailInput, "name", "email");
attr(emailInput, "placeholder", "Email address"); attrSet(emailInput, "placeholder", "Email address");
attr(emailInput, "type", "text"); attrSet(emailInput, "type", "text");
attr(emailButton, "onclick", "passwordAsk()"); attrSet(emailButton, "onclick", "passwordAsk()");
attr(loginLink, "onclick", "loginSwitch()"); attrSet(loginLink, "onclick", "loginSwitch()");
attr(close, "onclick", "loginBoxClose()"); attrSet(close, "onclick", "loginBoxClose()");
for (var i = 0; i < configuredOauths.length; i++) { for (var i = 0; i < configuredOauths.length; i++) {
var button = create("button"); var button = create("button");
@ -1045,7 +1061,7 @@
button.innerText = configuredOauths[i]; button.innerText = configuredOauths[i];
attr(button, "onclick", "commentoAuth('" + configuredOauths[i] + "')"); attrSet(button, "onclick", "commentoAuth('" + configuredOauths[i] + "')");
append(oauthButtons, button); append(oauthButtons, button);
} }
@ -1087,7 +1103,7 @@
loginLink.innerText = "Don't have an account? Sign up."; loginLink.innerText = "Don't have an account? Sign up.";
subtitle.innerText = "Enter your email address to start with."; subtitle.innerText = "Enter your email address to start with.";
attr(loginLink, "onclick", "signupSwitch()"); attrSet(loginLink, "onclick", "signupSwitch()");
loginBoxType = "login"; loginBoxType = "login";
@ -1200,9 +1216,9 @@
classAdd(field, "email"); classAdd(field, "email");
classAdd(fieldInput, "input"); classAdd(fieldInput, "input");
attr(fieldInput, "name", order[i]); attrSet(fieldInput, "name", order[i]);
attr(fieldInput, "type", type[i]); attrSet(fieldInput, "type", type[i]);
attr(fieldInput, "placeholder", placeholder[i]); attrSet(fieldInput, "placeholder", placeholder[i]);
append(field, fieldInput); append(field, fieldInput);
append(fieldContainer, field); append(fieldContainer, field);
@ -1213,9 +1229,9 @@
fieldButton.innerText = loginBoxType; fieldButton.innerText = loginBoxType;
if (loginBoxType == "signup") if (loginBoxType == "signup")
attr(fieldButton, "onclick", "signup()"); attrSet(fieldButton, "onclick", "signup()");
else else
attr(fieldButton, "onclick", "login()"); attrSet(fieldButton, "onclick", "login()");
append(field, fieldButton); append(field, fieldButton);
} }
@ -1231,20 +1247,27 @@
classAdd(mainArea, "main-area"); classAdd(mainArea, "main-area");
attr(mainArea, "style", "display: none"); attrSet(mainArea, "style", "display: none");
append(root, mainArea); append(root, mainArea);
} }
global.loadCssOverride = function() {
if (cssOverride === undefined)
global.allShow();
else
cssLoad(cssOverride, "window.allShow()");
}
global.allShow = function() { global.allShow = function() {
var mainArea = $(ID_MAIN_AREA); var mainArea = $(ID_MAIN_AREA);
var loggedContainer = $(ID_LOGGED_CONTAINER); var loggedContainer = $(ID_LOGGED_CONTAINER);
var footer = $(ID_FOOTER); var footer = $(ID_FOOTER);
attr(mainArea, "style", ""); attrSet(mainArea, "style", "");
if (loggedContainer) if (loggedContainer)
attr(loggedContainer, "style", ""); attrSet(loggedContainer, "style", "");
attr(footer, "style", ""); attrSet(footer, "style", "");
nameWidthFix(); nameWidthFix();
} }
@ -1255,7 +1278,7 @@
classRemove(mainArea, "blurred"); classRemove(mainArea, "blurred");
attr(loginBoxContainer, "style", "display: none"); attrSet(loginBoxContainer, "style", "display: none");
} }
global.loginBoxShow = function() { global.loginBoxShow = function() {
@ -1266,15 +1289,27 @@
classAdd(mainArea, "blurred"); classAdd(mainArea, "blurred");
attr(loginBoxContainer, "style", ""); attrSet(loginBoxContainer, "style", "");
window.location.hash = ID_LOGIN_BOX_CONTAINER; window.location.hash = ID_LOGIN_BOX_CONTAINER;
$(ID_LOGIN_BOX_EMAIL_INPUT).focus(); $(ID_LOGIN_BOX_EMAIL_INPUT).focus();
} }
function dataTagsLoad() {
var scripts = tags("script")
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].src.match(/\/js\/commento\.js$/)) {
cssOverride = attrGet(scripts[i], "data-css-override");
}
}
}
function main(callback) { function main(callback) {
root = $(ID_ROOT); root = $(ID_ROOT);
classAdd(root, "root");
dataTagsLoad();
loginBoxCreate(); loginBoxCreate();
@ -1287,7 +1322,7 @@
rootCreate(function() { rootCreate(function() {
commentsRender(); commentsRender();
footerLoad(); footerLoad();
attr(root, "style", ""); attrSet(root, "style", "");
call(callback); call(callback);
}); });
}); });

2
frontend/sass/commento.scss
View File

@ -1,6 +1,6 @@
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
#commento { .commento-root {
font-family: "Source Sans Pro", "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-family: "Source Sans Pro", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
font-size: 15px; font-size: 15px;
line-height: 1.5; line-height: 1.5;