diff --git a/lib/console.js b/lib/console.js index 77f9c8a1f6..ba9f6f5473 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); @@ -563,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) + ', G:' + 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; @@ -1098,6 +1112,24 @@ var RESConsole = { this.drawConfigPanelCategory(category); 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; + 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/keyboardNav.js b/lib/modules/keyboardNav.js index 15991b80ca..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' }, @@ -18,12 +18,12 @@ 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: { - 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 dab8423cde..494638420c 100644 --- a/lib/modules/userHighlight.js +++ b/lib/modules/userHighlight.js @@ -10,12 +10,12 @@ 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' }, 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: { @@ -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: 'Automatically 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