Implement multi-avatar

haacked · Jun 17, 2018 · 6307606 · 6307606
1 parent 983b594
commit 6307606
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 32 deletions.
diff --git a/_includes/comment-new.html b/_includes/comment-new.html
@@ -3,19 +3,19 @@
   <input name="post_id" type="hidden" value="{{ slug }}">
   <input name="comment-site" type="hidden" value="{{ site.url }}">
   <div id="comment-box">
-    <img src="/images/comments/unknown-avatar.png" data-role="user-avatar" alt="avatar" class="avatar" id="new-avatar" />
+    <img src="/images/comments/unknown-avatar.png" data-fallbacksrc="/images/comments/unknown-avatar.png" data-role="user-avatar" alt="avatar" class="avatar" id="avatarPreview" />
     <div id="commenttext">
       <div id="commentstatus" class="status"></div>
       <div contenteditable="PLAINTEXT-ONLY" tabindex="0" role="textbox" aria-multiline="true" data-role="editable" class="textarea" aria-label="Join the discussion..." id="comment-div"></div>
-      <input type="hidden" name="message" id="message" />
+      <input type="hidden" name="message" id="message" data-required="true" value="" />
     </div>
   </div>
   <div id="comment-author">
     <div class="control-group">
-      <input type="hidden" name="avatar" id="avatarUrl" />
-      <input type="text" name="name" id="name" placeholder="Name" />
-      <input type="text" id="email" placeholder="Email" />
-      <span class="info-circle" title="Email is used to generate a gravatar image only. It is not submitted with the form."></span>
+      <input type="hidden" name="avatar" id="avatarInput" />
+      <input type="text" name="name" id="name" placeholder="Display Name" title="Name displayed with your comment" data-required="true" />
+      <input type="text" name="identity" id="identity" placeholder="email/@twitter/github" data-required="true" value="" />
+      <span class="info-circle" title="Identity is used to generate an avatar image only. It is not submitted with the form."></span>
       <button type="button" id="commentbutton">Leave response</button>
       <div id="remember-me">
         <input type="checkbox" name="remember" id="remember"><label for="remember">Remember me</label>

diff --git a/_scss/comments.scss b/_scss/comments.scss
@@ -155,10 +155,16 @@ div#comments {
           background-color: 1px #cbcfd4;
           background-image: none;
         }
+
+        &.confirm-button {
+          background-color: 1px solid #ffffee;
+          background-image: linear-gradient(-180deg, #ffffee 0%, #eeeedd 90%)
+        }
       }
 
       #remember-me {
         display: inline-block;
+        padding: 10px 6px;
 
         input {
           margin: auto;

diff --git a/js/comment-box.js b/js/comment-box.js
@@ -1,29 +1,54 @@
 Haack.ready(function() {
 
-  var form = Haack.get('commentform')
+  let form = Haack.get('commentform')
 
   if (form) {
-    // Load values from Local Storage.
-    retrieveUser(Haack.get('name'), Haack.get('email'), Haack.get('remember'))
+    var emailRegex = /[^@\s]+@[^@\s]+\.[^@\s]+$/
+    var avatarPreview = Haack.get('avatarPreview')
+    avatarPreview.onerror = (e) => { tryLoad(e.target, 1) }
 
-    Haack.get('comment-div').oninput = function() {
-      Haack.get('message').value = this.innerText
+    function changeAvatar() {
+      let image = avatarPreview
+      image.possible = buildPossibleAvatars(Haack.get('identity').value)
+      image.currentIndex = 0
+      tryLoad(image)
     }
 
-    Haack.get('email').onchange = function() {
-      var email = this.value
-      var avatar = Haack.get('avatarUrl')
-      if (email && email.length > 0) {
-        var hash = md5(email)
-        var avatarUrl = 'https://www.gravatar.com/avatar/' + hash
-        Haack.get('new-avatar').src = avatarUrl
-        avatar.value = avatarUrl
+    function tryLoad(image, increment) {
+      if (increment) {
+        image.currentIndex += increment
+      }
+
+      if (image.currentIndex < image.possible.length) {
+        image.src = image.possible[image.currentIndex]
       }
       else {
-        avatar.value = ''
+        image.onerror = null
+        image.src = image.dataset.fallbacksrc;
       }
     }
 
+    function buildPossibleAvatars(identity) {
+      let possibleAvatars = []
+
+      if (identity.match(emailRegex)) {
+        possibleAvatars.push('https://secure.gravatar.com/avatar/' + md5(identity) + '?s=80&d=identicon&r=pg')
+      } else {
+        possibleAvatars.push('https://github.com/' + identity + '.png')
+        possibleAvatars.push('https://avatars.io/twitter/' + identity + '/medium')
+      }
+
+      return possibleAvatars
+    }
+
+    Haack.get('comment-div').oninput = (e) => {
+      Haack.get('message').value = e.target.innerText
+    }
+
+    Haack.get('identity').onchange = () => {
+      changeAvatar()
+    }
+
     function storeUser(name, identity) {
       window.localStorage.name = name;
       window.localStorage.identity = identity;
@@ -44,33 +69,42 @@ Haack.ready(function() {
       }
     }
 
-    Haack.get('commentbutton').onclick = function() {
-      var status = Haack.get('commentstatus')
+    Haack.get('commentbutton').onclick = (e) => {
+      let status = Haack.get('commentstatus')
       status.innerText = ''
-      var requiredIds = ['message', 'name']
-      var missing = requiredIds.filter(id => Haack.get(id).value.length < 3)
+
+      let missing = Array.from(form.querySelectorAll('[data-required]')).filter(el => el.value === '').map(el => el.name)
       if (missing.length > 0) {
         status.innerText = 'Some required fields are missing - (' + missing.join(', ') + ')'
         return
       }
-      var button = this
+      let button = e.target
       if (button.innerText != 'Confirm comment') {
         button.innerText = 'Confirm comment'
+        button.title = 'Click the button again to confirm the comment'
+        button.classList.add('confirm-button')
         return
       }
-      var form = Haack.get('commentform')
-      var name = Haack.get('name')
-      var email = Haack.get('email')
+      let name = Haack.get('name')
+      let identity = Haack.get('identity')
 
       if (Haack.get('remember').checked) {
-        storeUser(name.value, email.value)
+        storeUser(name.value, identity.value)
       }
+      else {
+        storeUser('', '')
+      }
+      Haack.get('avatarInput').value = avatarPreview.src
 
-      email.value = '';
-      form.action = form.dataset.action
-      button.innerText = 'Posting...'
       button.disabled = true
+      button.innerText = 'Posting...'
+      identity.value = ""
+      form.action = form.dataset.action
       form.submit()
     }
+
+    // Load values from Local Storage.
+    retrieveUser(Haack.get('name'), Haack.get('identity'), Haack.get('remember'))
+    changeAvatar() // initial load of avatar
   }
 })