Merge pull request #260 from panta82/vote-levels

Vote levels

docs/docs/configuration/client.rst

@@ -19,6 +19,7 @@ preferably in the script tag which embeds the JS:
             data-isso-avatar-bg="#f0f0f0"
             data-isso-avatar-fg="#9abf88 #5698c4 #e279a3 #9163b6 ..."
             data-isso-vote="true"
+            data-vote-levels=""
             src="/prefix/js/embed.js"></script>
 
 Furthermore you can override the automatic title detection inside
@@ -110,6 +111,20 @@ data-isso-vote
 
 Enable or disable voting feature on the client side.
 
+data-isso-vote-levels
+---------------------
+
+List of vote levels used to customize comment appearance based on score.
+Provide a comma-separated values (eg. `"0,5,10,25,100"`) or a JSON array (eg. `"[-5,5,15]"`).
+
+For example, the value `"-5,5"` will cause each `isso-comment` to be given one of these 3 classes:
+
+- `isso-vote-level-0` for scores lower than `-5`
+- `isso-vote-level-1` for scores between `-5` and `4`
+- `isso-vote-level-2` for scores of `5` and greater
+
+These classes can then be used to customize the appearance of comments (eg. put a star on popular comments)
+
 data-isso-id
 ------------
 

isso/css/isso.css

@@ -145,6 +145,9 @@
 .isso-comment .isso-postbox {
     margin-top: 0.8em;
 }
+.isso-comment.isso-no-votes span.votes {
+    display: none;
+}
 
 .isso-postbox {
     max-width: 68em;

isso/js/app/config.js

@@ -14,7 +14,8 @@ define(function() {
         "avatar-bg": "#f0f0f0",
         "avatar-fg": ["#9abf88", "#5698c4", "#e279a3", "#9163b6",
                       "#be5168", "#f19670", "#e4bf80", "#447c69"].join(" "),
-        "vote": true
+        "vote": true,
+        "vote-levels": null
     };
 
     var js = document.getElementsByTagName("script");

isso/js/app/dom.js

@@ -205,10 +205,13 @@ define(function() {
             el.href = "#";
         }
 
+        if (!content && content !== 0) {
+            content = "";
+        }
         if (["TEXTAREA", "INPUT"].indexOf(el.nodeName) > -1) {
-            el.value = content || "";
+            el.value = content;
         } else {
-            el.textContent = content || "";
+            el.textContent = content;
         }
         return el;
     };

isso/js/app/isso.js

@@ -178,18 +178,34 @@ define(["app/dom", "app/utils", "app/config", "app/api", "app/jade", "app/i18n",
         );
 
         if (config.vote) {
-            // update vote counter, but hide if votes sum to 0
+            var voteLevels = config['vote-levels'];
+            if (typeof voteLevels === 'string') {
+                // Eg. -5,5,15
+                voteLevels = voteLevels.split(',');
+            }
+            
+            // update vote counter
             var votes = function (value) {
                 var span = $("span.votes", footer);
                 if (span === null) {
-                    if (value !== 0) {
-                        footer.prepend($.new("span.votes", value));
-                    }
+                    footer.prepend($.new("span.votes", value));
                 } else {
-                    if (value === 0) {
-                        span.remove();
-                    } else {
-                        span.textContent = value;
+                    span.textContent = value;
+                }
+                if (value) {
+                    el.classList.remove('isso-no-votes');
+                } else {
+                    el.classList.add('isso-no-votes');
+                }
+                if (voteLevels) {
+                    var before = true;
+                    for (var index = 0; index <= voteLevels.length; index++) {
+                        if (before && (index >= voteLevels.length || value < voteLevels[index])) {
+                            el.classList.add('isso-vote-level-' + index);
+                            before = false;
+                        } else {
+                            el.classList.remove('isso-vote-level-' + index);
+                        }
                     }
                 }
             };
@@ -205,6 +221,8 @@ define(["app/dom", "app/utils", "app/config", "app/api", "app/jade", "app/i18n",
                     votes(rv.likes - rv.dislikes);
                 });
             });
+            
+            votes(comment.likes - comment.dislikes);
         }
 
         $("a.edit", footer).toggle("click",

isso/js/app/text/comment.jade

@@ -24,8 +24,6 @@ div(class='isso-comment' id='isso-#{comment.id}')
 
         div(class='isso-comment-footer')
             if conf.vote
-                if comment.likes - comment.dislikes != 0
-                    span(class='votes') #{comment.likes - comment.dislikes}
                 a(class='upvote' href='#')
                     != svg['arrow-up']
                 span(class='spacer') |