hide avatars with data-isso-avatar="false", part of #49

docs/docs/configuration/client.rst

@@ -13,6 +13,7 @@ preferably in the script tag which embeds the JS:
             data-isso-max-comments-top="10"
             data-isso-max-comments-nested="5"
             data-isso-reveal-on-click="5"
+            data-isso-avatar="true"
             data-avatar-bg="#f0f0f0"
             data-avatar-fg="#9abf88 #5698c4 #e279a3 #9163b6 ..."
             src="/prefix/js/embed.js"></script>
@@ -69,6 +70,11 @@ data-isso-reveal-on-click
 
 Number of comments to reveal on clicking the "X Hidden" link.
 
+data-isso-avatar
+----------------
+
+Enable or disable avatar generation.
+
 data-isso-avatar-bg
 -------------------
 

isso/js/app/config.js

@@ -8,6 +8,7 @@ define(function() {
         "max-comments-top": 10,
         "max-comments-nested": 5,
         "reveal-on-click": 5,
+        "avatar": true,
         "avatar-bg": "#f0f0f0",
         "avatar-fg": ["#9abf88", "#5698c4", "#e279a3", "#9163b6",
                       "#be5168", "#f19670", "#e4bf80", "#447c69"].join(" ")

isso/js/app/isso.js

@@ -11,35 +11,37 @@ define(["app/text/html", "app/dom", "app/utils", "app/config", "app/api", "app/m
 
         var el = $.htmlify(Mark.up(templates["postbox"]));
 
-        // add a default identicon to not waste CPU cycles
-        $(".avatar > svg", el).replace(lib.identicons.blank(4, 48));
-
-        // on text area focus, generate identicon from IP address
-        $(".textarea-wrapper > .textarea", el).on("focus", function() {
-            if ($(".avatar svg", el).getAttribute("className") === "blank") {
-                $(".avatar svg", el).replace(
-                    lib.identicons.generate(lib.pbkdf2(api.remote_addr(), api.salt, 1000, 6), 4, 48));
-            }
-        });
+        if (config["avatar"]) {
+            // add a default identicon to not waste CPU cycles
+            $(".avatar > svg", el).replace(lib.identicons.blank(4, 48));
+
+            // on text area focus, generate identicon from IP address
+            $(".textarea-wrapper > .textarea", el).on("focus", function() {
+                if ($(".avatar svg", el).getAttribute("className") === "blank") {
+                    $(".avatar svg", el).replace(
+                        lib.identicons.generate(lib.pbkdf2(api.remote_addr(), api.salt, 1000, 6), 4, 48));
+                }
+            });
 
-        // update identicon on email input. Listens on keyup, after 200ms the
-        // new identicon is generated.
-        var active;
-        $(".input-wrapper > [type=email]", el).on("keyup", function() {
-            if (active) {
-                clearTimeout(active);
-            }
-            active = setTimeout(function() {
-                lib.pbkdf2($(".input-wrapper > [type=email]", el).value || api.remote_addr(), api.salt, 1000, 6)
-                .then(function(rv) {
-                    $(".avatar svg", el).replace(lib.identicons.generate(rv, 4, 48));
-                });
-            }, 200);
-        }, false);
+            // update identicon on email input. Listens on keyup, after 200ms the
+            // new identicon is generated.
+            var active;
+            $(".input-wrapper > [type=email]", el).on("keyup", function() {
+                if (active) {
+                    clearTimeout(active);
+                }
+                active = setTimeout(function() {
+                    lib.pbkdf2($(".input-wrapper > [type=email]", el).value || api.remote_addr(), api.salt, 1000, 6)
+                    .then(function(rv) {
+                        $(".avatar svg", el).replace(lib.identicons.generate(rv, 4, 48));
+                    });
+                }, 200);
+            }, false);
 
-        $(".input-wrapper > [type=email]", el).on("keydown", function() {
-            clearTimeout(active);
-        }, false);
+            $(".input-wrapper > [type=email]", el).on("keydown", function() {
+                clearTimeout(active);
+            }, false);
+        }
 
         // callback on success (e.g. to toggle the reply button)
         el.onsuccess = function() {};
@@ -144,7 +146,9 @@ define(["app/text/html", "app/dom", "app/utils", "app/config", "app/api", "app/m
         // run once to activate
         refresh();
 
-        $("div.avatar > svg", el).replace(lib.identicons.generate(comment.hash, 4, 48));
+        if (config["avatar"]) {
+            $("div.avatar > svg", el).replace(lib.identicons.generate(comment.hash, 4, 48));
+        }
 
         var entrypoint;
         if (comment.parent === null) {

isso/js/app/markup.js

@@ -1,4 +1,4 @@
-define(["vendor/markup", "app/i18n", "app/text/svg"], function(Mark, i18n, svg) {
+define(["vendor/markup", "app/config", "app/i18n", "app/text/svg"], function(Mark, config, i18n, svg) {
 
     "use strict";
 
@@ -21,6 +21,7 @@ define(["vendor/markup", "app/i18n", "app/text/svg"], function(Mark, i18n, svg)
 
     Mark.delimiter = ":";
     Mark.includes = merge({
+        conf: config,
         i18n: i18n[i18n.lang],
         svg: svg
     });

isso/js/app/text/comment.html

@@ -1,10 +1,12 @@
 <div class="isso-comment" id="isso-{{ id | blank }}">
+    {{ if conf-avatar | bool }}
     <div class="avatar">
         <svg data-hash="{{ hash }}"></svg>
     </div>
+    {{ /if }}
     <div class="text-wrapper">
         <div class="isso-comment-header" role="meta">
-            {{ if bool(website) }}
+            {{ if website | bool }}
             <a class="author" href="{{ website }}" rel="nofollow">
                 {{ author | blank : `i18n-comment-anonymous` }}
             </a>

isso/js/app/text/postbox.html

@@ -1,7 +1,9 @@
 <div class="postbox">
+    {{ if conf-avatar | bool }}
     <div class="avatar">
         <svg class="blank" data-hash="{{ hash }}"></svg>
     </div>
+    {{ /if }}
     <div class="form-wrapper">
         <div class="textarea-wrapper">
             <div class="textarea placeholder" contenteditable="true">{{ i18n-postbox-text }}</div>