diff --git a/docs/docs/configuration/client.rst b/docs/docs/configuration/client.rst index 6daa3b1..ea7487a 100644 --- a/docs/docs/configuration/client.rst +++ b/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"> 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 ------------ diff --git a/isso/css/isso.css b/isso/css/isso.css index b0ed6d1..2d587ff 100644 --- a/isso/css/isso.css +++ b/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; diff --git a/isso/js/app/config.js b/isso/js/app/config.js index 64a0700..952d588 100644 --- a/isso/js/app/config.js +++ b/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"); diff --git a/isso/js/app/dom.js b/isso/js/app/dom.js index 9a50609..ec76e13 100644 --- a/isso/js/app/dom.js +++ b/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; }; diff --git a/isso/js/app/isso.js b/isso/js/app/isso.js index 2284164..0523e9b 100644 --- a/isso/js/app/isso.js +++ b/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", diff --git a/isso/js/app/text/comment.jade b/isso/js/app/text/comment.jade index 95dc7b1..4884bf7 100644 --- a/isso/js/app/text/comment.jade +++ b/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') |