Add a button to generate Hover color in UserHightlight

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.');
+		}
 	}
 };
 

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'
 		},

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<len; i++) {
+			newColor = modules['userHighlight'].generateHoverColor(RESConsole.getOptionValue('userHighlight', options[i]));
+			if (newColor !== false) {
+				RESConsole.setOptionValue('userHighlight', options[i] + 'Hover', newColor);
+			} else {
+				error = true;
+			}
+		}
+		if (error) {
+			alert('Some Hover color couldn\'t be generated. This is probably due to the use of color in special format.');
+		}
 	}
 };

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.'
 		},

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: 56px;
+	height: 20px;
+}
 .optionContainer input[type=checkbox] {
 	margin-left: 10px;
 	margin-top: 0;