diff --git a/frontend/js/commento.js b/frontend/js/commento.js index 27327ea..72b63b6 100644 --- a/frontend/js/commento.js +++ b/frontend/js/commento.js @@ -27,6 +27,7 @@ var ID_LOGIN_BOX_HR = "commento-login-box-hr"; var ID_LOGIN_BOX_OAUTH_PRETEXT = "commento-login-box-oauth-pretext"; var ID_LOGIN_BOX_OAUTH_BUTTONS_CONTAINER = "commento-login-box-oauth-buttons-container"; + var ID_LOGIN_BOX_ANONYMOUS_BUTTON = "commento-login-box-anonymous-button"; var ID_MOD_TOOLS = "commento-mod-tools"; var ID_MOD_TOOLS_LOCK_BUTTON = "commento-mod-tools-lock-button"; var ID_ERROR = "commento-error"; @@ -112,7 +113,8 @@ function classRemove(el, cls) { - el.classList.remove("commento-" + cls); + if (el !== null) + el.classList.remove("commento-" + cls); } @@ -122,7 +124,8 @@ function remove(el) { - el.parentNode.removeChild(el); + if (el !== null) + el.parentNode.removeChild(el); } @@ -350,9 +353,6 @@ commenters = resp.commenters; configuredOauths = resp.configuredOauths; - if (!resp.requireIdentification) - configuredOauths.push("anonymous"); - cssLoad(cdn + "/css/commento.css", "window.loadCssOverride()"); call(callback); @@ -406,6 +406,7 @@ var buttons = create("div"); var createButton = create("div"); var loginButton = create("div"); + var anonymousButton = create("div"); classAdd(buttonsContainer, "account-buttons-container"); classAdd(question, "account-buttons-question"); @@ -414,18 +415,23 @@ classAdd(createButton, "create-button"); classAdd(loginButton, "button"); classAdd(loginButton, "login-button"); + classAdd(anonymousButton, "anonymous-button"); attrSet(createButton, "onclick", "loginBoxShow()"); attrSet(loginButton, "onclick", "loginBoxShow(); loginSwitch(true);"); + attrSet(anonymousButton, "onclick", "anonymousChoose()"); attrSet(textarea, "disabled", true); createButton.innerText = "Create an Account"; loginButton.innerText = "Login"; + anonymousButton.innerText = "Comment anonymously"; question.innerText = "Want to add to the discussion?"; append(buttons, createButton); append(buttons, loginButton); append(buttonsContainer, buttons); + if (!requireIdentification) + append(buttonsContainer, anonymousButton); append(textareaContainer, question); append(textareaContainer, buttonsContainer); } @@ -999,15 +1005,14 @@ append(el, submit); } + global.anonymousChoose = function(provider) { + cookieSet("commentoCommenterToken", "anonymous"); + chosenAnonymous = true; + refreshAll(); + } + global.commentoAuth = function(provider) { - if (provider == "anonymous") { - cookieSet("commentoCommenterToken", "anonymous"); - chosenAnonymous = true; - refreshAll(); - return; - } - var popup = window.open("", "_blank"); get(origin + "/api/commenter/token/new", function(resp) { @@ -1062,6 +1067,7 @@ var oauthPretext = create("div"); var oauthButtonsContainer = create("div"); var oauthButtons = create("div"); + var anonymousButton = create("div"); var close = create("div"); loginBox.id = ID_LOGIN_BOX; @@ -1074,6 +1080,7 @@ hr.id = ID_LOGIN_BOX_HR; oauthPretext.id = ID_LOGIN_BOX_OAUTH_PRETEXT; oauthButtonsContainer.id = ID_LOGIN_BOX_OAUTH_BUTTONS_CONTAINER; + anonymousButton.id = ID_LOGIN_BOX_ANONYMOUS_BUTTON; header.innerText = "Create an account to join the discussion!"; @@ -1090,6 +1097,7 @@ classAdd(oauthPretext, "login-box-subtitle"); classAdd(oauthButtonsContainer, "oauth-buttons-container"); classAdd(oauthButtons, "oauth-buttons"); + classAdd(anonymousButton, "anonymous-button"); classAdd(close, "login-box-close"); classAdd(root, "root-min-height"); @@ -1097,6 +1105,7 @@ loginLink.innerText = "Already have an account? Log in."; subtitle.innerText = "Sign up with your email to vote and comment."; oauthPretext.innerText = "Or proceed with social login."; + anonymousButton.innerText = "Comment anonymously"; attrSet(loginBoxContainer, "style", "display: none; opacity: 0;"); attrSet(emailInput, "name", "email"); @@ -1104,6 +1113,7 @@ 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++) { @@ -1135,6 +1145,8 @@ append(loginBox, oauthPretext); append(oauthButtonsContainer, oauthButtons); append(loginBox, oauthButtonsContainer); + if (!requireIdentification) + append(loginBox, anonymousButton); oauthButtonsShown = true; } else @@ -1240,6 +1252,9 @@ var hr = $(ID_LOGIN_BOX_HR); var oauthButtonsContainer = $(ID_LOGIN_BOX_OAUTH_BUTTONS_CONTAINER); var oauthPretext = $(ID_LOGIN_BOX_OAUTH_PRETEXT); + var anonymousButton = null; + if (!requireIdentification); + anonymousButton = $(ID_LOGIN_BOX_ANONYMOUS_BUTTON); remove(emailButton); remove(loginLinkContainer); @@ -1250,6 +1265,7 @@ remove(oauthButtonsContainer); } } + remove(anonymousButton); var order, id, type, placeholder; diff --git a/frontend/sass/commento-input.scss b/frontend/sass/commento-input.scss index 4ddaa2f..4fde262 100644 --- a/frontend/sass/commento-input.scss +++ b/frontend/sass/commento-input.scss @@ -16,7 +16,7 @@ textarea::placeholder { color: #aaa; font-size: 20px; display: flex; - line-height: 80px; + line-height: 110px; justify-content: center; align-items: center; text-align: center; @@ -28,7 +28,7 @@ textarea { padding: 8px; outline: none; overflow: auto; - min-height: 100px; + min-height: 130px; width: 100%; } @@ -78,7 +78,7 @@ textarea { .commento-account-buttons-question { position: absolute; - top: 0.5rem; + top: 10px; display: block; text-align: center; justify-content: center; @@ -124,9 +124,14 @@ textarea { } .commento-anonymous-button { - background: #096fa6; - text-transform: uppercase; + display: block; + color: $blue-6; + font-weight: 700; + margin-top: 12px; font-size: 12px; + cursor: pointer; + text-align: center; + text-transform: uppercase; } .commento-blurred-textarea { @@ -154,16 +159,22 @@ textarea { .commento-create-button { width: 150px; background: $pink-9; + text-transform: uppercase; + font-size: 12px; } .commento-login-button { width: 50px; background: $cyan-9; + text-transform: uppercase; + font-size: 12px; } .commento-submit-button { float: right; background: $indigo-7; + text-transform: uppercase; + font-size: 12px; } .commento-approve-button { diff --git a/frontend/sass/commento-login.scss b/frontend/sass/commento-login.scss index 57cad7e..ba64d40 100644 --- a/frontend/sass/commento-login.scss +++ b/frontend/sass/commento-login.scss @@ -52,7 +52,7 @@ text-align: center; .commento-login-link { - font-size: 15px; + font-size: 14px; font-weight: bold; border-bottom: none; }