commento.js, commento-input.scss: make textarea cleaner

frontend/js/commento.js

@@ -35,7 +35,6 @@
   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";
@@ -44,6 +43,7 @@
   var ID_SUPER_CONTAINER = "commento-textarea-super-container-";
   var ID_TEXTAREA_CONTAINER = "commento-textarea-container-";
   var ID_TEXTAREA = "commento-textarea-";
+  var ID_ANONYMOUS_CHECKBOX = "commento-anonymous-checkbox-";
   var ID_CARD = "commento-comment-card-";
   var ID_BODY = "commento-comment-body-";
   var ID_TEXT = "commento-comment-text-";
@@ -77,13 +77,12 @@
   var requireIdentification = true;
   var isModerator = false;
   var isFrozen = false;
-  var shownSubmitButton = {"root": false};
   var chosenAnonymous = false;
   var isLocked = false;
   var stickyCommentHex = "none";
   var shownReply = {};
   var configuredOauths = [];
-  var loginBoxType = "signup";
+  var loginBoxType = "login";
   var oauthButtonsShown = false;
   var selfHex = undefined;
 
@@ -226,6 +225,57 @@
     refreshAll();
   }
 
+  function selfLoad(commenter) {
+    commenters[commenter.commenterHex] = commenter;
+    selfHex = commenter.commenterHex;
+
+    var loggedContainer = create("div");
+    var loggedInAs = create("div");
+    var name = create("a");
+    var avatar;
+    var logout = create("div");
+    var color = colorGet(commenter.commenterHex + "-" + commenter.name);
+
+    loggedContainer.id = ID_LOGGED_CONTAINER;
+
+    classAdd(loggedContainer, "logged-container");
+    classAdd(loggedInAs, "logged-in-as");
+    classAdd(name, "name");
+    classAdd(logout, "logout");
+
+    name.innerText = commenter.name;
+    logout.innerText = "Logout";
+
+    onclick(logout, global.logout);
+
+    attrSet(loggedContainer, "style", "display: none");
+    attrSet(name, "href", commenter.link);
+    if (commenter.photo === "undefined") {
+      avatar = create("div");
+      avatar.style["background"] = color;
+      avatar.innerHTML = commenter.name[0].toUpperCase();
+      classAdd(avatar, "avatar");
+    } else {
+      avatar = create("img");
+      if (commenter.provider === "google") {
+        attrSet(avatar, "src", commenter.photo + "?sz=50");
+      } else if (commenter.provider === "github") {
+        attrSet(avatar, "src", commenter.photo + "&s=50");
+      } else {
+        attrSet(avatar, "src", commenter.photo);
+      }
+      classAdd(avatar, "avatar-img");
+    }
+
+    append(loggedInAs, avatar);
+    append(loggedInAs, name);
+    append(loggedContainer, loggedInAs);
+    append(loggedContainer, logout);
+    prepend(root, loggedContainer);
+
+    isAuthenticated = true;
+  }
+
 
   function selfGet(callback) {
     var commenterToken = commenterTokenGet();
@@ -246,54 +296,7 @@
         return;
       }
 
-      commenters[resp.commenter.commenterHex] = resp.commenter;
+      selfLoad(resp.commenter);
-      selfHex = resp.commenter.commenterHex;
-
-      var loggedContainer = create("div");
-      var loggedInAs = create("div");
-      var name = create("a");
-      var avatar;
-      var logout = create("div");
-      var color = colorGet(resp.commenter.commenterHex + "-" + resp.commenter.name);
-
-      loggedContainer.id = ID_LOGGED_CONTAINER;
-
-      classAdd(loggedContainer, "logged-container");
-      classAdd(loggedInAs, "logged-in-as");
-      classAdd(name, "name");
-      classAdd(logout, "logout");
-
-      name.innerText = resp.commenter.name;
-      logout.innerText = "Logout";
-
-      onclick(logout, global.logout);
-
-      attrSet(loggedContainer, "style", "display: none");
-      attrSet(name, "href", resp.commenter.link);
-      if (resp.commenter.photo === "undefined") {
-        avatar = create("div");
-        avatar.style["background"] = color;
-        avatar.innerHTML = resp.commenter.name[0].toUpperCase();
-        classAdd(avatar, "avatar");
-      } else {
-        avatar = create("img");
-        if (resp.commenter.provider === "google") {
-          attrSet(avatar, "src", resp.commenter.photo + "?sz=50");
-        } else if (resp.commenter.provider === "github") {
-          attrSet(avatar, "src", resp.commenter.photo + "&s=50");
-        } else {
-          attrSet(avatar, "src", resp.commenter.photo);
-        }
-        classAdd(avatar, "avatar-img");
-      }
-
-      append(loggedInAs, avatar);
-      append(loggedInAs, name);
-      append(loggedContainer, loggedInAs);
-      append(loggedContainer, logout);
-      append(root, loggedContainer);
-
-      isAuthenticated = true;
 
       call(callback);
     });
@@ -407,60 +410,42 @@
     var textareaSuperContainer = create("div");
     var textareaContainer = create("div");
     var textarea = create("textarea");
+    var anonymousCheckboxContainer = create("div");
+    var anonymousCheckbox = create("input");
+    var anonymousCheckboxLabel = create("label");
+    var submitButton = create("button");
 
     textareaSuperContainer.id = ID_SUPER_CONTAINER + id;
     textareaContainer.id = ID_TEXTAREA_CONTAINER + id;
     textarea.id = ID_TEXTAREA + id;
+    anonymousCheckbox.id = ID_ANONYMOUS_CHECKBOX + id;
+    submitButton.id = ID_SUBMIT_BUTTON + id;
 
     classAdd(textareaContainer, "textarea-container");
+    classAdd(anonymousCheckboxContainer, "round-check");
+    classAdd(anonymousCheckboxContainer, "anonymous-checkbox-container");
+    classAdd(submitButton, "button");
+    classAdd(submitButton, "submit-button");
+    classAdd(textareaSuperContainer, "button-margin");
 
-    if (!isAuthenticated && !chosenAnonymous) {
+    attrSet(textarea, "placeholder", "Add a comment");
-      var buttonsContainer = create("div");
+    attrSet(anonymousCheckbox, "type", "checkbox");
-      var question = create("div");
+    attrSet(anonymousCheckboxLabel, "for", ID_ANONYMOUS_CHECKBOX + id);
-      var buttons = create("div");
-      var createButton = create("div");
-      var loginButton = create("div");
-      var anonymousButton = create("div");
 
-      classAdd(buttonsContainer, "account-buttons-container");
+    anonymousCheckboxLabel.innerText = "Comment anonymously";
-      classAdd(question, "account-buttons-question");
+    submitButton.innerText = "Add Comment";
-      classAdd(buttons, "account-buttons");
-      classAdd(createButton, "button");
-      classAdd(createButton, "create-button");
-      classAdd(loginButton, "button");
-      classAdd(loginButton, "login-button");
-      classAdd(anonymousButton, "anonymous-button");
-
-      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";
-      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);
-    } else {
-      onclick(textarea, global.showSubmitButton, id);
-
-      attrSet(textarea, "placeholder", "Join the discussion!");
-    }
 
     textarea.oninput = autoExpander(textarea);
+    onclick(submitButton, submitAccountDecide, id);
 
     append(textareaContainer, textarea);
     append(textareaSuperContainer, textareaContainer);
+    append(anonymousCheckboxContainer, anonymousCheckbox);
+    append(anonymousCheckboxContainer, anonymousCheckboxLabel);
+    append(textareaSuperContainer, submitButton);
+    if (!requireIdentification) {
+      append(textareaSuperContainer, anonymousCheckboxContainer);
+    }
 
     return textareaSuperContainer;
   }
@@ -504,7 +489,7 @@
   }
 
 
-  global.commentNew = function(id) {
+  global.commentNew = function(id, commenterToken, callback) {
     var textareaSuperContainer = $(ID_SUPER_CONTAINER + id);
     var textarea = $(ID_TEXTAREA + id);
     var replyButton = $(ID_REPLY + id);
@@ -544,7 +529,7 @@
       }
       
       var commenterHex = selfHex;
-      if (commenterHex === undefined && commenterTokenGet() === "anonymous") {
+      if (commenterHex === undefined || commenterToken === "anonymous") {
         commenterHex = "anonymous";
       }
 
@@ -566,7 +551,6 @@
         textareaSuperContainer.replaceWith(newCard);
 
         shownReply[id] = false;
-        shownSubmitButton[id] = false;
 
         classAdd(replyButton, "option-reply");
         classRemove(replyButton, "option-cancel");
@@ -578,6 +562,8 @@
         textarea.value = "";
         insertAfter(textareaSuperContainer, newCard);
       }
+
+      call(callback);
     });
   }
 
@@ -802,15 +788,11 @@
       if (isAuthenticated) {
         upDownOnclickSet(upvote, downvote, comment.commentHex, comment.direction);
       } else {
-        onclick(upvote, global.loginBoxShow);
+        onclick(upvote, global.loginBoxShow, null);
-        onclick(downvote, global.loginBoxShow);
+        onclick(downvote, global.loginBoxShow, null);
       }
 
-      if (isAuthenticated || chosenAnonymous) {
+      onclick(reply, global.replyShow, comment.commentHex);
-        onclick(reply, global.replyShow, comment.commentHex);
-      } else {
-        onclick(reply, global.loginBoxShow);
-      }
 
       if (commenter.link !== "undefined" && commenter.link !== "https://undefined" && commenter.link !== "") {
         attrSet(name, "href", commenter.link);
@@ -869,8 +851,6 @@
       append(card, header);
       append(card, contents);
       append(cards, card);
-
-      shownSubmitButton[comment.commentHex] = false;
     });
 
     return cards;
@@ -1003,7 +983,6 @@
 
     el.remove();
     shownReply[id] = false;
-    shownSubmitButton[id] = false;
 
     classAdd(replyButton, "option-reply");
     classRemove(replyButton, "option-cancel");
@@ -1069,39 +1048,44 @@
   }
 
 
-  global.showSubmitButton = function(id) {
+  function submitAuthenticated(id) {
-    if (id in shownSubmitButton && shownSubmitButton[id]) {
+    if (isAuthenticated) {
+      global.commentNew(id, commenterTokenGet());
       return;
     }
 
-    shownSubmitButton[id] = true;
+    global.loginBoxShow(id);
-
+    return;
-    var el = $(ID_SUPER_CONTAINER + id);
-
-    var submit = create("button");
-
-    submit.id = ID_SUBMIT_BUTTON + id;
-
-    submit.innerText = "Add Comment";
-
-    classAdd(submit, "button");
-    classAdd(submit, "submit-button");
-    classAdd(el, "button-margin");
-
-    onclick(submit, global.commentNew, id);
-
-    append(el, submit);
   }
 
 
-  global.anonymousChoose = function() {
+  function submitAnonymous(id) {
-    cookieSet("commentoCommenterToken", "anonymous");
     chosenAnonymous = true;
-    refreshAll();
+    global.commentNew(id, "anonymous");
   }
 
 
-  global.commentoAuth = function(provider) {
+  function submitAccountDecide(id) {
+    if (requireIdentification) {
+      submitAuthenticated(id);
+      return;
+    }
+
+    var anonymousCheckbox = $(ID_ANONYMOUS_CHECKBOX + id);
+
+    if (!anonymousCheckbox.checked) {
+      submitAuthenticated(id);
+      return;
+    } else {
+      submitAnonymous(id);
+      return;
+    }
+  }
+
+
+  global.commentoAuth = function(data) {
+    var provider = data.provider;
+    var id = data.id;
     var popup = window.open("", "_blank");
 
     get(origin + "/api/commenter/token/new", function(resp) {
@@ -1116,8 +1100,17 @@
 
       var interval = setInterval(function() {
         if (popup.closed) {
-          refreshAll();
           clearInterval(interval);
+          selfGet(function() {
+            var loggedContainer = $(ID_LOGGED_CONTAINER);
+            if (loggedContainer) {
+              attrSet(loggedContainer, "style", "");
+            }
+
+            global.commentNew(id, resp.commenterToken, function() {
+              global.loginBoxClose();
+            });
+          });
         }
       }, 250);
     });
@@ -1126,7 +1119,6 @@
 
   function refreshAll(callback) {
     $(ID_ROOT).innerHTML = "";
-    shownSubmitButton = {"root": false};
     shownReply = {};
     global.main(callback);
   }
@@ -1141,7 +1133,7 @@
   }
 
 
-  global.signupRender = function() {
+  global.popupRender = function(id) {
     var loginBoxContainer = $(ID_LOGIN_BOX_CONTAINER);
     var loginBox = create("div");
     var header = create("div");
@@ -1156,7 +1148,6 @@
     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;
@@ -1169,9 +1160,6 @@
     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!";
 
     classAdd(loginBoxContainer, "login-box-container");
     classAdd(loginBox, "login-box");
@@ -1186,19 +1174,17 @@
     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");
 
+    header.innerText = "Create an account to continue";
     emailButton.innerText = "Continue";
     loginLink.innerText = "Already have an account? Log in.";
-    subtitle.innerText = "Sign up with your email to vote and comment.";
+    subtitle.innerText = "Sign up with your email to comment and receive email notifications.";
     oauthPretext.innerText = "Or proceed with social login.";
-    anonymousButton.innerText = "Comment anonymously";
 
-    onclick(emailButton, global.passwordAsk);
+    onclick(emailButton, global.passwordAsk, id);
-    onclick(loginLink, global.loginSwitch);
+    onclick(loginLink, global.loginSwitch, id);
-    onclick(anonymousButton, global.anonymousChoose);
     onclick(close, global.loginBoxClose);
 
     attrSet(loginBoxContainer, "style", "display: none; opacity: 0;");
@@ -1214,7 +1200,7 @@
 
       button.innerText = configuredOauths[i];
 
-      onclick(button, global.commentoAuth, configuredOauths[i]); 
+      onclick(button, global.commentoAuth, {"provider": configuredOauths[i], "id": id});
 
       append(oauthButtons, button);
     }
@@ -1235,9 +1221,6 @@
       append(loginBox, oauthPretext);
       append(oauthButtonsContainer, oauthButtons);
       append(loginBox, oauthButtonsContainer);
-      if (!requireIdentification) {
-        append(loginBox, anonymousButton);
-      }
       oauthButtonsShown = true;
     } else {
       oauthButtonsShown = false;
@@ -1251,7 +1234,7 @@
   }
 
 
-  global.loginSwitch = function(leaveOauth) {
+  global.loginSwitch = function(id) {
     var header = $(ID_LOGIN_BOX_HEADER);
     var subtitle = $(ID_LOGIN_BOX_SUBTITLE);
     var loginLink = $(ID_LOGIN_BOX_LOGIN_LINK);
@@ -1263,11 +1246,11 @@
     loginLink.innerText = "Don't have an account? Sign up.";
     subtitle.innerText = "Enter your email address to start with.";
 
-    onclick(loginLink, global.signupSwitch);
+    onclick(loginLink, global.signupSwitch, id);
 
     loginBoxType = "login";
 
-    if (ouathButtonsShown && leaveOauth !== true && configuredOauths.length > 0) {
+    if (ouathButtonsShown && configuredOauths.length > 0) {
       remove(hr);
       remove(oauthPretext);
       remove(oauthButtonsContainer);
@@ -1276,13 +1259,13 @@
   }
 
 
-  global.signupSwitch = function() {
+  global.signupSwitch = function(id) {
     global.loginBoxClose();
-    global.loginBoxShow();
+    global.loginBoxShow(id);
   }
 
 
-  function loginUP(username, password) {
+  function loginUP(username, password, id) {
     var json = {
       "email": username,
       "password": password,
@@ -1296,20 +1279,29 @@
       }
 
       cookieSet("commentoCommenterToken", resp.commenterToken);
-      refreshAll();
+
+      selfLoad(resp.commenter);
+      var loggedContainer = $(ID_LOGGED_CONTAINER);
+      if (loggedContainer) {
+        attrSet(loggedContainer, "style", "");
+      }
+
+      global.commentNew(id, resp.commenterToken, function() {
+        global.loginBoxClose();
+      });
     });
   }
 
 
-  global.login = function() {
+  global.login = function(id) {
     var email = $(ID_LOGIN_BOX_EMAIL_INPUT);
     var password = $(ID_LOGIN_BOX_PASSWORD_INPUT);
 
-    loginUP(email.value, password.value);
+    loginUP(email.value, password.value, id);
   }
 
 
-  global.signup = function() {
+  global.signup = function(id) {
     var email = $(ID_LOGIN_BOX_EMAIL_INPUT);
     var name = $(ID_LOGIN_BOX_NAME_INPUT);
     var website = $(ID_LOGIN_BOX_WEBSITE_INPUT);
@@ -1329,12 +1321,12 @@
         return
       }
 
-      loginUP(email.value, password.value);
+      loginUP(email.value, password.value, id);
     });
   }
 
 
-  global.passwordAsk = function() {
+  global.passwordAsk = function(id) {
     var loginBox = $(ID_LOGIN_BOX);
     var subtitle = $(ID_LOGIN_BOX_SUBTITLE);
     var emailButton = $(ID_LOGIN_BOX_EMAIL_BUTTON);
@@ -1342,11 +1334,6 @@
     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);
@@ -1357,20 +1344,19 @@
         remove(oauthButtonsContainer);
       }
     }
-    remove(anonymousButton);
 
-    var order, id, type, placeholder;
+    var order, fid, type, placeholder;
 
     if (loginBoxType === "signup") {
-      var order = ["name", "website", "password"];
+      order = ["name", "website", "password"];
-      var id = [ID_LOGIN_BOX_NAME_INPUT, ID_LOGIN_BOX_WEBSITE_INPUT, ID_LOGIN_BOX_PASSWORD_INPUT];
+      fid = [ID_LOGIN_BOX_NAME_INPUT, ID_LOGIN_BOX_WEBSITE_INPUT, ID_LOGIN_BOX_PASSWORD_INPUT];
-      var type = ["text", "text", "password"];
+      type = ["text", "text", "password"];
-      var placeholder = ["Real Name", "Website (Optional)", "Password"];
+      placeholder = ["Real Name", "Website (Optional)", "Password"];
     } else {
-      var order = ["password"];
+      order = ["password"];
-      var id = [ID_LOGIN_BOX_PASSWORD_INPUT];
+      fid = [ID_LOGIN_BOX_PASSWORD_INPUT];
-      var type = ["password"];
+      type = ["password"];
-      var placeholder = ["Password"];
+      placeholder = ["Password"];
     }
 
     if (loginBoxType === "signup") {
@@ -1384,7 +1370,7 @@
       var field = create("div");
       var fieldInput = create("input");
 
-      fieldInput.id = id[i];
+      fieldInput.id = fid[i];
 
       classAdd(fieldContainer, "email-container");
       classAdd(field, "email");
@@ -1403,9 +1389,9 @@
         fieldButton.innerText = loginBoxType;
 
         if (loginBoxType === "signup") {
-          onclick(fieldButton, global.signup);
+          onclick(fieldButton, global.signup, id);
         } else {
-          onclick(fieldButton, global.login);
+          onclick(fieldButton, global.login, id);
         }
 
         append(field, fieldButton);
@@ -1564,11 +1550,11 @@
   }
 
 
-  global.loginBoxShow = function() {
+  global.loginBoxShow = function(id) {
     var mainArea = $(ID_MAIN_AREA);
     var loginBoxContainer = $(ID_LOGIN_BOX_CONTAINER);
 
-    global.signupRender();
+    global.popupRender(id);
 
     classAdd(mainArea, "blurred");
     

frontend/sass/commento-input.scss

@@ -1,4 +1,5 @@
 @import "colors-main.scss";
+@import "checkbox.scss";
 
 textarea,
 input[type=text] {
@@ -52,9 +53,7 @@ textarea {
   justify-content: center;
 }
 
-.commento-oauth-buttons,
+.commento-oauth-buttons {
-.commento-account-buttons,
-.commento-account-buttons-container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -62,34 +61,10 @@ textarea {
   z-index: 1;
 }
 
-.commento-account-buttons {
-  position: static;
-  flex-direction: row;
-}
-
-.commento-account-buttons-container {
-  top: 45px;
-  padding-bottom: 10px;
-}
-
 .commento-oauth-buttons {
   display: contents;
 }
 
-.commento-account-buttons-question {
-  position: absolute;
-  top: 10px;
-  display: block;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  font-weight: bold;
-  font-size: 14px;
-  padding: 6px;
-  color: $gray-8;
-  outline: none;
-}
-
 .commento-google-button {
   background: #dd4b39;
   text-transform: uppercase;
@@ -135,23 +110,9 @@ textarea {
   width: fit-content;
 }
 
-.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;
+  background: $blue-8;
   text-transform: uppercase;
   font-size: 12px;
 }
@@ -167,3 +128,24 @@ textarea {
 .commento-button-margin {
   padding-bottom: 60px;
 }
+
+.commento-anonymous-checkbox-container {
+  float: right;
+  margin: 20px 16px;
+
+  input[type="checkbox"] + label {
+    padding-left: 24px;
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: bold;
+    color: $gray-7;
+  }
+
+  input[type="checkbox"] + label:before {
+    margin-top: 1px;
+  }
+
+  input[type="checkbox"] + label:after {
+    margin-top: -1px;
+  }
+}