diff --git a/lib/modules/voteEnhancements.js b/lib/modules/voteEnhancements.js index bec313ac3a..0736dd6f07 100644 --- a/lib/modules/voteEnhancements.js +++ b/lib/modules/voteEnhancements.js @@ -19,10 +19,38 @@ modules['voteEnhancements'] = { description: 'Makes post/comment scores bold and therefore easier to find.' }, colorLinkScore: { - type: 'boolean', - value: false, + type: 'enum', + values: [{ + name: 'No coloration', + value: 'none' + }, { + name: 'Automatic coloration', + value: 'automatic' + }, { + name: 'User Defined coloration', + value: 'user' + }], + value: 'none', description: 'Add color to link\'s score depending on its value. (Does not work with "compressed link display" reddit preference)' }, + userDefinedLinkColoration: { + type: 'table', + addRowText: '+add threshold', + fields: [{ + name: 'score', + type: 'text' + }, { + name: 'color', + type: 'color', + }], + value: [ + ['0', '#5f99cf'], + ['10', '#F2B035'], + ['50', '#FF4500'], + ['100', '#D92B2B'] + ], + description: 'Choose color for colorLinkScore with threshold of your choice.' + }, colorCommentScore: { type: 'boolean', value: false, @@ -49,7 +77,7 @@ modules['voteEnhancements'] = { this.estimatePostScoreVotes(); } } - if (this.options.colorLinkScore.value) { + if (this.options.colorLinkScore.value !== 'none') { RESUtils.addCSS('.link .rank { color: #fff; text-align: center; border-radius: 1em; font-size: 12px; padding: 4px; line-height: 1; height: 1em; min-width: 1em; }'); this.applyLinkScoreColor(); RESUtils.watchForElement('siteTable', modules['voteEnhancements'].applyLinkScoreColor); @@ -83,6 +111,19 @@ modules['voteEnhancements'] = { } } }, + getLinkScoreColor: function(score) { + if (this.options.colorLinkScore.value === 'automatic') { + return 'hsl(' + 180+360*(1-100/(150+score)) + ', 75%,50%)'; + } else { + if (this.options.userDefinedLinkColoration.value.length) { + for (var len = this.options.userDefinedLinkColoration.value.length, i = len-1; i >= 0; i--) { + if (score >= this.options.userDefinedLinkColoration.value[i][0]) { + return this.options.userDefinedLinkColoration.value[i][1]; + } + } + } + } + }, highlightScores: function() { RESUtils.addCSS('span.score { font-weight: bold; color: #333; }'); }, @@ -92,7 +133,7 @@ modules['voteEnhancements'] = { for (var i = 0, len = scoreNode.length; i < len; i++) { var node = scoreNode[i]; if (!isNaN(parseInt(node.innerText), 10)) { - $(node).closest('.thing').find('.rank')[0].style.background = 'hsl(' + 180+360*(1-100/(150+parseInt(node.innerText, 10))) + ', 75%,50%)'; + $(node).closest('.thing').find('.rank')[0].style.background = this.getLinkScoreColor(parseInt(node.innerText, 10)); } else { $(node).closest('.thing').find('.rank')[0].style.background = '#c6c6c6'; } diff --git a/lib/res.css b/lib/res.css index 05747c8691..8be5ac6e93 100644 --- a/lib/res.css +++ b/lib/res.css @@ -554,10 +554,12 @@ p.moduleListing { float: left; width: 140px; } -.optionContainer input[type=color] { +.optionContainer>input[type=color] { margin-left: 10px; margin-top: -3px; float: left; +} +.optionContainer input[type=color] { width: 56px; height: 20px; }