From 0a2fc4f88a58f129fdd5e29801a3f0650b1c39d9 Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 20:41:25 +0200 Subject: [PATCH 01/12] Input type color Css --- lib/res.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lib/res.css b/lib/res.css index 1b9bc6cb58..eb4617f9c2 100644 --- a/lib/res.css +++ b/lib/res.css @@ -538,6 +538,13 @@ p.moduleListing { float: left; width: 140px; } +.optionContainer input[type=color] { + margin-left: 10px; + margin-top: -3px; + float: left; + width: 60px; + height: 20px; +} .optionContainer input[type=checkbox] { margin-left: 10px; margin-top: 0; From 444f36caa064cfec1a1e35a33585c88c9dc332a9 Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 20:41:36 +0200 Subject: [PATCH 02/12] Example color input --- lib/modules/userHighlight.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/modules/userHighlight.js b/lib/modules/userHighlight.js index dab8423cde..c77cfa1a14 100644 --- a/lib/modules/userHighlight.js +++ b/lib/modules/userHighlight.js @@ -10,7 +10,7 @@ modules['userHighlight'] = { description: 'Highlight OP\'s comments' }, OPColor: { - type: 'text', + type: 'color', value: '#0055DF', description: 'Color to use to highlight OP. Defaults to original text color' }, From fd2565eaf21f72f1fe26dd165738f57babdeda05 Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 20:45:18 +0200 Subject: [PATCH 03/12] Fix color input width --- lib/res.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/res.css b/lib/res.css index eb4617f9c2..449f57a6e1 100644 --- a/lib/res.css +++ b/lib/res.css @@ -542,7 +542,7 @@ p.moduleListing { margin-left: 10px; margin-top: -3px; float: left; - width: 60px; + width: 56px; height: 20px; } .optionContainer input[type=checkbox] { From 6e6a9e6e16a1b54a13f1fe21bc986cca1c246c61 Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 20:55:46 +0200 Subject: [PATCH 04/12] Input type color Js --- lib/console.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/lib/console.js b/lib/console.js index 77f9c8a1f6..4f0252bb8a 100644 --- a/lib/console.js +++ b/lib/console.js @@ -358,6 +358,14 @@ var RESConsole = { thisOptionFormEle.setAttribute('placeHolder', optionObject.placeHolder || ''); thisOptionFormEle.setAttribute('value', optionObject.value); break; + case 'color': + // color... + thisOptionFormEle = RESUtils.createElementWithID('input', optionName); + thisOptionFormEle.setAttribute('type', 'color'); + thisOptionFormEle.setAttribute('moduleID', moduleID); + // thisOptionFormEle.setAttribute('value', optionObject.value); // didn't work on chrome, need to work with .value + thisOptionFormEle.value = optionObject.value; + break; case 'button': // button... thisOptionFormEle = RESUtils.createElementWithID('button', optionName); From 8095f2ca13d963fa8c24d5da3f48f8b776594be8 Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 21:08:57 +0200 Subject: [PATCH 05/12] focusBGColorNight use type color and change default value - fix #1173 --- lib/modules/keyboardNav.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/modules/keyboardNav.js b/lib/modules/keyboardNav.js index 15991b80ca..576062289f 100644 --- a/lib/modules/keyboardNav.js +++ b/lib/modules/keyboardNav.js @@ -18,8 +18,8 @@ modules['keyboardNav'] = { description: 'border style (e.g. 1px dashed gray) for focused element' }, focusBGColorNight: { - type: 'text', - value: 'rgba(66,66,66,0.5)', + type: 'color', + value: '#373737', description: 'Background color of focused element in Night Mode' }, focusFGColorNight: { From 7cca83af5e91403337667bb758044fa5c92cc78e Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 21:22:16 +0200 Subject: [PATCH 06/12] Change option type to color --- lib/modules/keyboardNav.js | 4 ++-- lib/modules/userHighlight.js | 22 +++++++++++----------- lib/modules/userTagger.js | 4 ++-- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/lib/modules/keyboardNav.js b/lib/modules/keyboardNav.js index 576062289f..8e4f55b420 100644 --- a/lib/modules/keyboardNav.js +++ b/lib/modules/keyboardNav.js @@ -8,7 +8,7 @@ modules['keyboardNav'] = { // valid types are: text, boolean (if boolean, value must be true or false) // for example: focusBGColor: { - type: 'text', + type: 'color', value: '#F0F3FC', description: 'Background color of focused element' }, @@ -23,7 +23,7 @@ modules['keyboardNav'] = { description: 'Background color of focused element in Night Mode' }, focusFGColorNight: { - type: 'text', + type: 'color', value: '#DDD', description: 'Foreground color of focused element in Night Mode' }, diff --git a/lib/modules/userHighlight.js b/lib/modules/userHighlight.js index c77cfa1a14..a7dc437ffc 100644 --- a/lib/modules/userHighlight.js +++ b/lib/modules/userHighlight.js @@ -15,7 +15,7 @@ modules['userHighlight'] = { description: 'Color to use to highlight OP. Defaults to original text color' }, OPColorHover: { - type: 'text', + type: 'color', value: '#4E7EAB', description: 'Color used to highlight OP on hover.' }, @@ -25,12 +25,12 @@ modules['userHighlight'] = { description: 'Highlight Admin\'s comments' }, adminColor: { - type: 'text', + type: 'color', value: '#FF0011', description: 'Color to use to highlight Admins. Defaults to original text color' }, adminColorHover: { - type: 'text', + type: 'color', value: '#B3000C', description: 'Color used to highlight Admins on hover.' }, @@ -40,12 +40,12 @@ modules['userHighlight'] = { description: 'Highlight Friends\' comments' }, friendColor: { - type: 'text', + type: 'color', value: '#FF4500', description: 'Color to use to highlight Friends. Defaults to original text color' }, friendColorHover: { - type: 'text', + type: 'color', value: '#B33000', description: 'Color used to highlight Friends on hover.' }, @@ -55,12 +55,12 @@ modules['userHighlight'] = { description: 'Highlight Mod\'s comments' }, modColor: { - type: 'text', + type: 'color', value: '#228822', description: 'Color to use to highlight Mods. Defaults to original text color' }, modColorHover: { - type: 'text', + type: 'color', value: '#134913', description: 'Color used to highlight Mods on hover. Defaults to gray.' }, @@ -75,18 +75,18 @@ modules['userHighlight'] = { description: 'Don\'t highlight the "first commenter" on the first comment in a tree' }, firstCommentColor: { - type: 'text', + type: 'color', value: '#46B6CC', description: 'Color to use to highlight the first-commenter. Defaults to original text color' }, firstCommentColorHover: { - type: 'text', + type: 'color', value: '#72D2E5', description: 'Color used to highlight the first-commenter on hover.' }, fontColor: { - type: 'text', - value: 'white', + type: 'color', + value: '#FFFFFF', description: 'Color for highlighted text.' }, autoColorUsernames: { diff --git a/lib/modules/userTagger.js b/lib/modules/userTagger.js index 4d5f1351a4..93ec8a2846 100644 --- a/lib/modules/userTagger.js +++ b/lib/modules/userTagger.js @@ -56,12 +56,12 @@ modules['userTagger'] = { description: 'Show "highlight" button in user hover info, for distinguishing posts/comments from particular users.' }, highlightColor: { - type: 'text', + type: 'color', value: '#5544CC', description: 'Color used to highlight a selected user, when "highlighted" from hover info.' }, highlightColorHover: { - type: 'text', + type: 'color', value: '#6677AA', description: 'Color used to highlight a selected user on hover.' }, From 829172121b3d51eb6a2d2f2963924f1538179c44 Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 21:28:45 +0200 Subject: [PATCH 07/12] Default value tooltip for color --- lib/console.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/console.js b/lib/console.js index 4f0252bb8a..370449b899 100644 --- a/lib/console.js +++ b/lib/console.js @@ -571,6 +571,12 @@ var RESConsole = { case 'password': niceDefaultOption = thisOptions[i].default; break; + case 'color': + niceDefaultOption = thisOptions[i].default; + if (thisOptions[i].default.substr(0,1) === '#') { + niceDefaultOption += ' (R:' + parseInt(thisOptions[i].default.substr(1,2),16) + ', V:' + parseInt(thisOptions[i].default.substr(3,2),16) + ', B:' + parseInt(thisOptions[i].default.substr(5,2),16) + ')'; + } + break; case 'boolean': niceDefaultOption = thisOptions[i].default ? 'on' : 'off'; break; From 01db33c3b0e0db7a4c68f91c5bb787f0aee2520f Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 21:31:56 +0200 Subject: [PATCH 08/12] Replace RVB by RGB --- lib/console.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/console.js b/lib/console.js index 370449b899..016e80549a 100644 --- a/lib/console.js +++ b/lib/console.js @@ -574,7 +574,7 @@ var RESConsole = { case 'color': niceDefaultOption = thisOptions[i].default; if (thisOptions[i].default.substr(0,1) === '#') { - niceDefaultOption += ' (R:' + parseInt(thisOptions[i].default.substr(1,2),16) + ', V:' + parseInt(thisOptions[i].default.substr(3,2),16) + ', B:' + parseInt(thisOptions[i].default.substr(5,2),16) + ')'; + niceDefaultOption += ' (R:' + parseInt(thisOptions[i].default.substr(1,2),16) + ', G:' + parseInt(thisOptions[i].default.substr(3,2),16) + ', B:' + parseInt(thisOptions[i].default.substr(5,2),16) + ')'; } break; case 'boolean': From 771d034c914668b98d9ee2bf0f49e37cf117a2b7 Mon Sep 17 00:00:00 2001 From: Matheod Date: Wed, 4 Jun 2014 22:32:34 +0200 Subject: [PATCH 09/12] Add a button to generate hover color in userHighlight --- lib/modules/userHighlight.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/lib/modules/userHighlight.js b/lib/modules/userHighlight.js index a7dc437ffc..86a6a0f632 100644 --- a/lib/modules/userHighlight.js +++ b/lib/modules/userHighlight.js @@ -98,6 +98,12 @@ modules['userHighlight'] = { description: 'Select a method for setting colors for usernames', type: 'enum', values: [] + }, + generateHoverColors: { + type: 'button', + text: 'Generate', + callback: null, + description: 'Automaticaly generate hover color based on normal color.' } }, isEnabled: function() { @@ -126,6 +132,7 @@ modules['userHighlight'] = { } }, go: function() { + this.options['generateHoverColors'].callback = modules['userHighlight'].generateHoverColors; if ((this.isEnabled()) && (this.isMatchURL())) { this.findDefaults(); if (this.options.highlightOP.value) this.doHighlight('submitter'); @@ -407,5 +414,34 @@ modules['userHighlight'] = { } return RESUtils.addCSS(css); + }, + generateHoverColor: function(color) { // generate a darker color + if (!/^#[0-9A-F]{6}$/i.test(color)) { + return false; + } + var R = parseInt(color.substr(1,2), 16); + var G = parseInt(color.substr(3,2), 16); + var B = parseInt(color.substr(5,2), 16); + // R = R + 0.25 *(255-R); // 25% lighter + R = Math.round(0.75*R) + 256; // we add 256 to add a 1 before the color in the hex format + G = Math.round(0.75*G) + 256; // then we remove the 1, this have for effect to + B = Math.round(0.75*B) + 256; // add a 0 before one char color in hex format (i.e. 0xA -> 0x10A -> 0x0A) + return '#' + R.toString(16).substr(1) + G.toString(16).substr(1) + B.toString(16).substr(1); + }, + generateHoverColors: function() { // apply generateHoverColor on all option + var options = ['OPColor', 'adminColor', 'friendColor', 'modColor', 'firstCommentColor']; + var error = false; + var newColor; + for (var i = 0, len = options.length; i Date: Wed, 4 Jun 2014 22:40:09 +0200 Subject: [PATCH 10/12] Correct spelling mistake - I feel like a wizard --- lib/modules/userHighlight.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/modules/userHighlight.js b/lib/modules/userHighlight.js index 86a6a0f632..2b561e0077 100644 --- a/lib/modules/userHighlight.js +++ b/lib/modules/userHighlight.js @@ -103,7 +103,7 @@ modules['userHighlight'] = { type: 'button', text: 'Generate', callback: null, - description: 'Automaticaly generate hover color based on normal color.' + description: 'Automatically generate hover color based on normal color.' } }, isEnabled: function() { From 5134dc1c827e7bb74cc3bfcde4158a3c9c9ae019 Mon Sep 17 00:00:00 2001 From: Matheod Date: Thu, 5 Jun 2014 03:31:37 +0200 Subject: [PATCH 11/12] Use RESConsole.setOptionValue for better compatibility in future --- lib/console.js | 9 +++++++++ lib/modules/userHighlight.js | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/lib/console.js b/lib/console.js index 016e80549a..7bdab94051 100644 --- a/lib/console.js +++ b/lib/console.js @@ -1112,6 +1112,15 @@ var RESConsole = { this.drawConfigPanelCategory(category); break; } + }, + setOptionValue: function(moduleID, optionKey, value) { + // https://github.com/matheod/Reddit-Enhancement-Suite/commit/771d034c914668b98d9ee2bf0f49e37cf117a2b7#commitcomment-6559134 + var optionInput; + if (optionInput = document.getElementById(optionKey)) { + optionInput.value = value; + } else { + console.error('Can\'t set Option Value because the element doesn\' exist.'); + } } }; diff --git a/lib/modules/userHighlight.js b/lib/modules/userHighlight.js index 2b561e0077..25f6066643 100644 --- a/lib/modules/userHighlight.js +++ b/lib/modules/userHighlight.js @@ -435,7 +435,7 @@ modules['userHighlight'] = { for (var i = 0, len = options.length; i Date: Sat, 7 Jun 2014 17:45:48 +0200 Subject: [PATCH 12/12] Use RESConsole.getOptionValue --- lib/console.js | 9 +++++++++ lib/modules/userHighlight.js | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/lib/console.js b/lib/console.js index 7bdab94051..ba9f6f5473 100644 --- a/lib/console.js +++ b/lib/console.js @@ -1113,6 +1113,15 @@ var RESConsole = { break; } }, + getOptionValue: function(moduleID, optionKey) { + var optionInput; + if (optionInput = document.getElementById(optionKey)) { + return optionInput.value; + } else { + console.error('Can\'t get Option Value because the element doesn\' exist.'); + return null; + } + }, setOptionValue: function(moduleID, optionKey, value) { // https://github.com/matheod/Reddit-Enhancement-Suite/commit/771d034c914668b98d9ee2bf0f49e37cf117a2b7#commitcomment-6559134 var optionInput; diff --git a/lib/modules/userHighlight.js b/lib/modules/userHighlight.js index 25f6066643..494638420c 100644 --- a/lib/modules/userHighlight.js +++ b/lib/modules/userHighlight.js @@ -433,7 +433,7 @@ modules['userHighlight'] = { var error = false; var newColor; for (var i = 0, len = options.length; i