color picker (work in progress)

ChangeLog

@@ -63,6 +63,7 @@ danbarry
 + rfe #1962383 [designer] Option to create a PDF page 
 - patch #2007196, Typos in comments, thanks to knittl - knittl
 - bug #1982315 [GUI] Comma and quote in ENUM, thanks to Joshua Hogendorn
++ [GUI] Color picker (work in progress, now just for original theme) 
 
 2.11.8.0 (not yet released)
 - patch #1987593 [interface] Table list pagination in navi, 

js/mooRainbow/mooRainbow.css

@@ -0,0 +1,114 @@
+/***
+ *  - mooRainbow: defaultCSS
+ * author: w00fz <w00fzIT@gmail.com>
+ */
+
+#mooRainbow { font-size: 11px; color: #000; }
+
+.moor-box {
+	width: 390px; 
+	height: 310px; 
+	border: 1px solid #636163; 
+	background-color: #f9f9f9;
+}
+.moor-overlayBox {
+	width: 256px; /* Width and Height of the overlay must be setted here: default 256x256 */
+	height: 256px; 
+	margin-top: 9px; 
+	margin-left: 9px;
+	border: 1px solid #000;
+}
+.moor-slider {
+	border: 1px solid #000;
+	margin-top: 9px; 
+	margin-left: 280px;
+	width: 19px; /* if you want a bigger or smaller slider... */
+	height: 256px;
+}
+.moor-colorBox {
+	border: 1px solid #000; 
+	width: 59px; 
+	height: 68px; 
+	margin-top: 20px; 
+	margin-left: 315px;
+}
+.moor-currentColor { /* Bottom Box Color, the backup one */
+	margin-top: 55px; 
+	margin-left: 316px; 
+	width: 59px; 
+	height: 34px;
+}
+.moor-okButton {
+	font-family: Tahoma;
+	font-weight: bold;
+	font-size: 11px;
+	margin-top: 278px;
+	margin-left: 8px;
+	background: #e6e6e6;
+	height: 23px;
+	border: 1px solid #d6d6d6;
+	border-left-color: #f5f5f5;
+	border-top-color: #f5f5f5;
+}
+#mooRainbow label {
+	font-family: mono;
+}
+/* Following are just <label> */
+.moor-rLabel {
+	margin-top: 100px;
+	margin-left: 315px;
+}
+.moor-gLabel {
+	margin-top: 125px;
+	margin-left: 315px;
+}
+.moor-bLabel {
+	margin-top: 150px;
+	margin-left: 315px;
+}
+.moor-HueLabel {
+	margin-top: 190px;
+	margin-left: 315px;
+}
+span.moor-ballino { /* Style hue <20> (degree) !! */
+	margin-top: 190px;
+	margin-left: 370px;
+}
+.moor-SatuLabel {
+	margin-top: 215px;
+	margin-left: 315px;
+}
+.moor-BrighLabel {
+	margin-top: 240px;
+	margin-left: 315px;
+}
+.moor-hexLabel {
+	margin-top: 275px;
+	margin-left: 280px;
+}
+
+/* <input> */
+.moor-rInput, .moor-gInput, .moor-bInput, .moor-HueInput, .moor-SatuInput, .moor-BrighInput { 
+	width: 30px;
+}
+.moor-hexInput {
+	width: 55px;
+}
+.moor-cursor {
+	background-image: url(images/moor_cursor.gif); 
+	width: 12px;
+	height: 12px;
+}
+.moor-arrows {
+	background-image: url(images/moor_arrows.gif);
+	top: 9px; 
+	left: 270px;
+	width: 41px;
+	height: 9px;
+}
+.moor-chooseColor { /* Top Box Color, the choosen one */
+	margin-top: 21px; 
+	margin-left: 316px; 
+	width: 59px; 
+	height: 34px;
+}

js/mooRainbow/mooRainbow.js

@@ -0,0 +1,558 @@
+/***
+ * MooRainbow
+ *
+ * @version		1.11
+ * @license		MIT-style license
+ * @author		w00fz - < w00fzIT [at] gmail.com >
+ * @infos		http://moorainbow.woolly-sheep.net
+ * @copyright	Author
+ * 
+ *
+ */
+ 
+var MooRainbow = new Class({
+	options: {
+		id: 'mooRainbow',
+		prefix: 'moor-',
+		imgPath: 'images/',
+		startColor: [255, 0, 0],
+		wheel: false,
+		onComplete: Class.empty,
+		onChange: Class.empty
+	},
+	
+	initialize: function(el, options) {
+		this.element = $(el); if (!this.element) return;
+		this.setOptions(options);
+		
+		this.sliderPos = 0;
+		this.pickerPos = {x: 0, y: 0};
+		this.backupColor = this.options.startColor;
+		this.currentColor = this.options.startColor;
+		this.sets = {
+			rgb: [],
+			hsb: [],
+			hex: []	
+		};
+		this.pickerClick = this.sliderClick  = false;
+		if (!this.layout) this.doLayout();
+		this.OverlayEvents();
+		this.sliderEvents();
+		this.backupEvent();
+		if (this.options.wheel) this.wheelEvents();
+		this.element.addEvent('click', function(e) { this.toggle(e); }.bind(this));
+				
+		this.layout.overlay.setStyle('background-color', this.options.startColor.rgbToHex());
+		this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
+
+		this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
+		this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
+		
+		this.manualSet(this.options.startColor);
+		
+		this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
+		this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
+		this.sliderPos = this.snippet('arrPos') - this.snippet('arrSize', 'int');
+
+		if (window.khtml) this.hide();
+	},
+	
+	toggle: function() {
+		this[this.visible ? 'hide' : 'show']()
+	},
+	
+	show: function() {
+		this.rePosition();
+		this.layout.setStyle('display', 'block');
+		this.visible = true;
+	},
+	
+	hide: function() {
+		this.layout.setStyles({'display': 'none'});
+		this.visible = false;
+	},
+	
+	manualSet: function(color, type) {
+		if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
+		var rgb, hsb, hex;
+
+		if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } 
+		else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
+		else { hex = color; rgb = color.hexToRgb(true); hsb = rgb.rgbToHsb(); }
+		
+		this.setMooRainbow(rgb);
+		this.autoSet(hsb);
+	},
+	
+	autoSet: function(hsb) {
+		var curH = this.snippet('curSize', 'int').h;
+		var curW = this.snippet('curSize', 'int').w;
+		var oveH = this.layout.overlay.height;
+		var oveW = this.layout.overlay.width;
+		var sliH = this.layout.slider.height;
+		var arwH = this.snippet('arrSize', 'int');
+		var hue;
+		
+		var posx = Math.round(((oveW * hsb[1]) / 100) - curW);
+		var posy = Math.round(- ((oveH * hsb[2]) / 100) + oveH - curH);
+
+		var c = Math.round(((sliH * hsb[0]) / 360)); c = (c == 360) ? 0 : c;
+		var position = sliH - c + this.snippet('slider') - arwH;
+		hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
+		
+		this.layout.cursor.setStyles({'top': posy, 'left': posx});
+		this.layout.arrows.setStyle('top', position);
+		this.layout.overlay.setStyle('background-color', hue);
+		this.sliderPos = this.snippet('arrPos') - arwH;
+		this.pickerPos.x = this.snippet('curPos').l + curW;
+		this.pickerPos.y = this.snippet('curPos').t + curH;
+	},
+	
+	setMooRainbow: function(color, type) {
+		if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
+		var rgb, hsb, hex;
+
+		if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } 
+		else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
+		else { hex = color; rgb = color.hexToRgb(); hsb = rgb.rgbToHsb(); }
+
+		this.sets = {
+			rgb: rgb,
+			hsb: hsb,
+			hex: hex
+		};
+
+		if (!$chk(this.pickerPos.x))
+			this.autoSet(hsb);		
+
+		this.RedInput.value = rgb[0];
+		this.GreenInput.value = rgb[1];
+		this.BlueInput.value = rgb[2];
+		this.HueInput.value = hsb[0];
+		this.SatuInput.value =  hsb[1];
+		this.BrighInput.value = hsb[2];
+		this.hexInput.value = hex;
+		
+		this.currentColor = rgb;
+
+		this.chooseColor.setStyle('background-color', rgb.rgbToHex());
+	},
+	
+	parseColors: function(x, y, z) {
+		var s = Math.round((x * 100) / this.layout.overlay.width);
+		var b = 100 - Math.round((y * 100) / this.layout.overlay.height);
+		var h = 360 - Math.round((z * 360) / this.layout.slider.height) + this.snippet('slider') - this.snippet('arrSize', 'int');
+		h -= this.snippet('arrSize', 'int');
+		h = (h >= 360) ? 0 : (h < 0) ? 0 : h;
+		s = (s > 100) ? 100 : (s < 0) ? 0 : s;
+		b = (b > 100) ? 100 : (b < 0) ? 0 : b;
+
+		return [h, s, b];
+	},
+	
+	OverlayEvents: function() {
+		var lim, curH, curW, inputs;
+		curH = this.snippet('curSize', 'int').h;
+		curW = this.snippet('curSize', 'int').w;
+		inputs = this.arrRGB.copy().concat(this.arrHSB, this.hexInput);
+
+		document.addEvent('click', function() { 
+			if(this.visible) this.hide(this.layout); 
+		}.bind(this));
+
+		inputs.each(function(el) {
+			el.addEvent('keydown', this.eventKeydown.bindWithEvent(this, el));
+			el.addEvent('keyup', this.eventKeyup.bindWithEvent(this, el));
+		}, this);
+		[this.element, this.layout].each(function(el) {
+			el.addEvents({
+				'click': function(e) { new Event(e).stop(); },
+				'keyup': function(e) {
+					e = new Event(e);
+					if(e.key == 'esc' && this.visible) this.hide(this.layout);
+				}.bind(this)
+			}, this);
+		}, this);
+		
+		lim = {
+			x: [0 - curW, (this.layout.overlay.width - curW)],
+			y: [0 - curH, (this.layout.overlay.height - curH)]
+		};
+
+		this.layout.drag = new Drag.Base(this.layout.cursor, {
+			limit: lim,
+			onStart: this.overlayDrag.bind(this),
+			onDrag: this.overlayDrag.bind(this),
+			snap: 0
+		});	
+		
+		this.layout.overlay2.addEvent('mousedown', function(e){
+			e = new Event(e);
+			this.layout.cursor.setStyles({
+				'top': e.page.y - this.layout.overlay.getTop() - curH,
+				'left': e.page.x - this.layout.overlay.getLeft() - curW
+			});
+			this.layout.drag.start(e);
+		}.bind(this));
+		
+		this.okButton.addEvent('click', function() {
+			if(this.currentColor == this.options.startColor) {
+				this.hide();
+				this.fireEvent('onComplete', [this.sets, this]);
+			}
+			else {
+				this.backupColor = this.currentColor;
+				this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
+				this.hide();
+				this.fireEvent('onComplete', [this.sets, this]);
+			}
+		}.bind(this));
+	},
+	
+	overlayDrag: function() {
+		var curH = this.snippet('curSize', 'int').h;
+		var curW = this.snippet('curSize', 'int').w;
+		this.pickerPos.x = this.snippet('curPos').l + curW;
+		this.pickerPos.y = this.snippet('curPos').t + curH;
+		
+		this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
+		this.fireEvent('onChange', [this.sets, this]);
+	},
+	
+	sliderEvents: function() {
+		var arwH = this.snippet('arrSize', 'int'), lim;
+
+		lim = [0 + this.snippet('slider') - arwH, this.layout.slider.height - arwH + this.snippet('slider')];
+		this.layout.sliderDrag = new Drag.Base(this.layout.arrows, {
+			limit: {y: lim},
+			modifiers: {x: false},
+			onStart: this.sliderDrag.bind(this),
+			onDrag: this.sliderDrag.bind(this),
+			snap: 0
+		});	
+	
+		this.layout.slider.addEvent('mousedown', function(e){
+			e = new Event(e);
+
+			this.layout.arrows.setStyle(
+				'top', e.page.y - this.layout.slider.getTop() + this.snippet('slider') - arwH
+			);
+			this.layout.sliderDrag.start(e);
+		}.bind(this));
+	},
+
+	sliderDrag: function() {
+		var arwH = this.snippet('arrSize', 'int'), hue;
+		
+		this.sliderPos = this.snippet('arrPos') - arwH;
+		this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
+		hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
+		this.layout.overlay.setStyle('background-color', hue);
+		this.fireEvent('onChange', [this.sets, this]);
+	},
+	
+	backupEvent: function() {
+		this.layout.backup.addEvent('click', function() {
+			this.manualSet(this.backupColor);
+			this.fireEvent('onChange', [this.sets, this]);
+		}.bind(this));
+	},
+	
+	wheelEvents: function() {
+		var arrColors = this.arrRGB.copy().extend(this.arrHSB);
+
+		arrColors.each(function(el) {
+			el.addEvents({
+				'mousewheel': this.eventKeys.bindWithEvent(this, el),
+				'keydown': this.eventKeys.bindWithEvent(this, el)
+			});
+		}, this);
+		
+		[this.layout.arrows, this.layout.slider].each(function(el) {
+			el.addEvents({
+				'mousewheel': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider']),
+				'keydown': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider'])
+			});
+		}, this);
+	},
+	
+	eventKeys: function(e, el, id) {
+		var wheel, type;		
+		id = (!id) ? el.id : this.arrHSB[0];
+
+		if (e.type == 'keydown') {
+			if (e.key == 'up') wheel = 1;
+			else if (e.key == 'down') wheel = -1;
+			else return;
+		} else if (e.type == Element.Events.mousewheel.type) wheel = (e.wheel > 0) ? 1 : -1;
+
+		if (this.arrRGB.test(el)) type = 'rgb';
+		else if (this.arrHSB.test(el)) type = 'hsb';
+		else type = 'hsb';
+
+		if (type == 'rgb') {
+			var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
+			var value = el.value.toInt() + wheel;
+			value = (value > 255) ? 255 : (value < 0) ? 0 : value;
+
+			switch(el.className) {
+				case prefix + 'rInput': pass = [value, rgb[1], rgb[2]];	break;
+				case prefix + 'gInput': pass = [rgb[0], value, rgb[2]];	break;
+				case prefix + 'bInput':	pass = [rgb[0], rgb[1], value];	break;
+				default : pass = rgb;
+			}
+			this.manualSet(pass);
+			this.fireEvent('onChange', [this.sets, this]);
+		} else {
+			var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
+			var value = el.value.toInt() + wheel;
+
+			if (el.className.test(/(HueInput)/)) value = (value > 359) ? 0 : (value < 0) ? 0 : value;
+			else value = (value > 100) ? 100 : (value < 0) ? 0 : value;
+
+			switch(el.className) {
+				case prefix + 'HueInput': pass = [value, hsb[1], hsb[2]]; break;
+				case prefix + 'SatuInput': pass = [hsb[0], value, hsb[2]]; break;
+				case prefix + 'BrighInput':	pass = [hsb[0], hsb[1], value]; break;
+				default : pass = hsb;
+			}
+			this.manualSet(pass, 'hsb');
+			this.fireEvent('onChange', [this.sets, this]);
+		}
+		e.stop();
+	},
+	
+	eventKeydown: function(e, el) {
+		var n = e.code, k = e.key;
+
+		if 	((!el.className.test(/hexInput/) && !(n >= 48 && n <= 57)) &&
+			(k!='backspace' && k!='tab' && k !='delete' && k!='left' && k!='right'))
+		e.stop();
+	},
+	
+	eventKeyup: function(e, el) {
+		var n = e.code, k = e.key, pass, prefix, chr = el.value.charAt(0);
+
+		if (!$chk(el.value)) return;
+		if (el.className.test(/hexInput/)) {
+			if (chr != "#" && el.value.length != 6) return;
+			if (chr == '#' && el.value.length != 7) return;
+		} else {
+			if (!(n >= 48 && n <= 57) && (!['backspace', 'tab', 'delete', 'left', 'right'].test(k)) && el.value.length > 3) return;
+		}
+		
+		prefix = this.options.prefix;
+
+		if (el.className.test(/(rInput|gInput|bInput)/)) {
+			if (el.value  < 0 || el.value > 255) return;
+			switch(el.className){
+				case prefix + 'rInput': pass = [el.value, this.sets.rgb[1], this.sets.rgb[2]]; break;
+				case prefix + 'gInput': pass = [this.sets.rgb[0], el.value, this.sets.rgb[2]]; break;
+				case prefix + 'bInput': pass = [this.sets.rgb[0], this.sets.rgb[1], el.value]; break;
+				default : pass = this.sets.rgb;
+			}
+			this.manualSet(pass);
+			this.fireEvent('onChange', [this.sets, this]);
+		}
+		else if (!el.className.test(/hexInput/)) {
+			if (el.className.test(/HueInput/) && el.value  < 0 || el.value > 360) return;
+			else if (el.className.test(/HueInput/) && el.value == 360) el.value = 0;
+			else if (el.className.test(/(SatuInput|BrighInput)/) && el.value  < 0 || el.value > 100) return;
+			switch(el.className){
+				case prefix + 'HueInput': pass = [el.value, this.sets.hsb[1], this.sets.hsb[2]]; break;
+				case prefix + 'SatuInput': pass = [this.sets.hsb[0], el.value, this.sets.hsb[2]]; break;
+				case prefix + 'BrighInput': pass = [this.sets.hsb[0], this.sets.hsb[1], el.value]; break;
+				default : pass = this.sets.hsb;
+			}
+			this.manualSet(pass, 'hsb');
+			this.fireEvent('onChange', [this.sets, this]);
+		} else {
+			pass = el.value.hexToRgb(true);
+			if (isNaN(pass[0])||isNaN(pass[1])||isNaN(pass[2])) return;
+
+			if ($chk(pass)) {
+				this.manualSet(pass);
+				this.fireEvent('onChange', [this.sets, this]);
+			}
+		}
+			
+	},
+			
+	doLayout: function() {
+		var id = this.options.id, prefix = this.options.prefix;
+		var idPrefix = id + ' .' + prefix;
+
+		this.layout = new Element('div', {
+			'styles': {'display': 'block', 'position': 'absolute'},
+			'id': id
+		}).inject(document.body);
+
+		var box = new Element('div', {
+			'styles':  {'position': 'relative'},
+			'class': prefix + 'box'
+		}).inject(this.layout);
+			
+		var div = new Element('div', {
+			'styles': {'position': 'absolute', 'overflow': 'hidden'},
+			'class': prefix + 'overlayBox'
+		}).inject(box);
+		
+		var ar = new Element('div', {
+			'styles': {'position': 'absolute', 'zIndex': 1},
+			'class': prefix + 'arrows'
+		}).inject(box);
+		ar.width = ar.getStyle('width').toInt();
+		ar.height = ar.getStyle('height').toInt();
+		
+		var ov = new Element('img', {
+			'styles': {'background-color': '#fff', 'position': 'relative', 'zIndex': 2},
+			'src': this.options.imgPath + 'moor_woverlay.png',
+			'class': prefix + 'overlay'
+		}).inject(div);
+		
+		var ov2 = new Element('img', {
+			'styles': {'position': 'absolute', 'top': 0, 'left': 0, 'zIndex': 2},
+			'src': this.options.imgPath + 'moor_boverlay.png',
+			'class': prefix + 'overlay'
+		}).inject(div);
+		
+		if (window.ie6) {
+			div.setStyle('overflow', '');
+			var src = ov.src;
+			ov.src = this.options.imgPath + 'blank.gif';
+			ov.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
+			src = ov2.src;
+			ov2.src = this.options.imgPath + 'blank.gif';
+			ov2.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
+		}
+		ov.width = ov2.width = div.getStyle('width').toInt();
+		ov.height = ov2.height = div.getStyle('height').toInt();
+
+		var cr = new Element('div', {
+			'styles': {'overflow': 'hidden', 'position': 'absolute', 'zIndex': 2},
+			'class': prefix + 'cursor'	
+		}).inject(div);
+		cr.width = cr.getStyle('width').toInt();
+		cr.height = cr.getStyle('height').toInt();
+		
+		var sl = new Element('img', {
+			'styles': {'position': 'absolute', 'z-index': 2},
+			'src': this.options.imgPath + 'moor_slider.png',
+			'class': prefix + 'slider'
+		}).inject(box);
+		this.layout.slider = $E('#' + idPrefix + 'slider');
+		sl.width = sl.getStyle('width').toInt();
+		sl.height = sl.getStyle('height').toInt();
+
+		new Element('div', {
+			'styles': {'position': 'absolute'},
+			'class': prefix + 'colorBox'
+		}).inject(box);
+
+		new Element('div', {
+			'styles': {'zIndex': 2, 'position': 'absolute'},
+			'class': prefix + 'chooseColor'
+		}).inject(box);
+			
+		this.layout.backup = new Element('div', {
+			'styles': {'zIndex': 2, 'position': 'absolute', 'cursor': 'pointer'},
+			'class': prefix + 'currentColor'
+		}).inject(box);
+		
+		var R = new Element('label').inject(box).setStyle('position', 'absolute');
+		var G = R.clone().inject(box).addClass(prefix + 'gLabel').appendText('G: ');
+		var B = R.clone().inject(box).addClass(prefix + 'bLabel').appendText('B: ');
+		R.appendText('R: ').addClass(prefix + 'rLabel');
+		
+		var inputR = new Element('input');
+		var inputG = inputR.clone().inject(G).addClass(prefix + 'gInput');
+		var inputB = inputR.clone().inject(B).addClass(prefix + 'bInput');
+		inputR.inject(R).addClass(prefix + 'rInput');
+		
+		var HU = new Element('label').inject(box).setStyle('position', 'absolute');
+		var SA = HU.clone().inject(box).addClass(prefix + 'SatuLabel').appendText('S: ');
+		var BR = HU.clone().inject(box).addClass(prefix + 'BrighLabel').appendText('B: ');
+		HU.appendText('H: ').addClass(prefix + 'HueLabel');
+
+		var inputHU = new Element('input');
+		var inputSA = inputHU.clone().inject(SA).addClass(prefix + 'SatuInput');
+		var inputBR = inputHU.clone().inject(BR).addClass(prefix + 'BrighInput');
+		inputHU.inject(HU).addClass(prefix + 'HueInput');
+		SA.appendText(' %'); BR.appendText(' %');
+		new Element('span', {'styles': {'position': 'absolute'}, 'class': prefix + 'ballino'}).setHTML(" &deg;").injectAfter(HU);
+
+		var hex = new Element('label').inject(box).setStyle('position', 'absolute').addClass(prefix + 'hexLabel').appendText('#hex: ').adopt(new Element('input').addClass(prefix + 'hexInput'));
+		
+		var ok = new Element('input', {
+			'styles': {'position': 'absolute'},
+			'type': 'button',
+			'value': 'Select',
+			'class': prefix + 'okButton'
+		}).inject(box);
+		
+		this.rePosition();
+
+		var overlays = $$('#' + idPrefix + 'overlay');
+		this.layout.overlay = overlays[0];
+		this.layout.overlay2 = overlays[1];
+		this.layout.cursor = $E('#' + idPrefix + 'cursor');
+		this.layout.arrows = $E('#' + idPrefix + 'arrows');
+		this.chooseColor = $E('#' + idPrefix + 'chooseColor');
+		this.layout.backup = $E('#' + idPrefix + 'currentColor');
+		this.RedInput = $E('#' + idPrefix + 'rInput');
+		this.GreenInput = $E('#' + idPrefix + 'gInput');
+		this.BlueInput = $E('#' + idPrefix + 'bInput');
+		this.HueInput = $E('#' + idPrefix + 'HueInput');
+		this.SatuInput = $E('#' + idPrefix + 'SatuInput');
+		this.BrighInput = $E('#' + idPrefix + 'BrighInput');
+		this.hexInput = $E('#' + idPrefix + 'hexInput');
+
+		this.arrRGB = [this.RedInput, this.GreenInput, this.BlueInput];
+		this.arrHSB = [this.HueInput, this.SatuInput, this.BrighInput];
+		this.okButton = $E('#' + idPrefix + 'okButton');
+		
+		if (!window.khtml) this.hide();
+	},
+	rePosition: function() {
+		var coords = this.element.getCoordinates();
+		this.layout.setStyles({
+			'left': coords.left,
+			'top': coords.top + coords.height + 1
+		});
+	},
+	
+	snippet: function(mode, type) {
+		var size; type = (type) ? type : 'none';
+
+		switch(mode) {
+			case 'arrPos':
+				var t = this.layout.arrows.getStyle('top').toInt();
+				size = t;
+				break;
+			case 'arrSize': 
+				var h = this.layout.arrows.height;
+				h = (type == 'int') ? (h/2).toInt() : h;
+				size = h;
+				break;		
+			case 'curPos':
+				var l = this.layout.cursor.getStyle('left').toInt();
+				var t = this.layout.cursor.getStyle('top').toInt();
+				size = {'l': l, 't': t};
+				break;
+			case 'slider':
+				var t = this.layout.slider.getStyle('marginTop').toInt();
+				size = t;
+				break;
+			default :
+				var h = this.layout.cursor.height;
+				var w = this.layout.cursor.width;
+				h = (type == 'int') ? (h/2).toInt() : h;
+				w = (type == 'int') ? (w/2).toInt() : w;
+				size = {w: w, h: h};
+		};
+		return size;
+	}
+});
+
+MooRainbow.implement(new Options);
+MooRainbow.implement(new Events);

js/mootools-domready-rainbow.js

@@ -0,0 +1,16 @@
+window.addEvent('domready', function() {
+	var r = new MooRainbow('myRainbow', {
+		'startColor': [58, 142, 246],
+		'imgPath': 'js/mooRainbow/images/',
+		'onChange': function(color) {
+			top.frame_navigation.document.getElementById('body_leftFrame').style.backgroundColor = color.hex;
+			top.frame_navigation.document.getElementById('pmalogo').style.backgroundColor = color.hex;
+			top.frame_content.document.body.style.backgroundColor = color.hex;
+			},
+		'onComplete': function(color) {
+			top.frame_content.document.getElementById('rainbowform').custom_color.value = color.hex;
+			top.frame_content.document.getElementById('rainbowform').custom_color_rgb.value = color.rgb;
+			top.frame_content.document.getElementById('rainbowform').submit();
+			}
+	});
+});

libraries/Config.class.php

@@ -541,7 +541,7 @@ class PMA_Config
      */
     function getThemeUniqueValue()
     {
-        return intval((null !== $_SESSION['PMA_Config']->get('fontsize') ? $_SESSION['PMA_Config']->get('fontsize') : $_COOKIE['pma_fontsize'])) + ($this->source_mtime + $this->default_source_mtime + $_SESSION['PMA_Theme']->mtime_info + $_SESSION['PMA_Theme']->filesize_info);
+        return intval((null !== $_SESSION['PMA_Config']->get('fontsize') ? $_SESSION['PMA_Config']->get('fontsize') : $_COOKIE['pma_fontsize'])) + ($this->source_mtime + $this->default_source_mtime + $_SESSION['PMA_Theme']->mtime_info + $_SESSION['PMA_Theme']->filesize_info) . (isset($_SESSION['userconf']['custom_color']) ? substr($_SESSION['userconf']['custom_color'],1,6) : '');
     }
 
     /**

libraries/common.inc.php

@@ -634,6 +634,10 @@ unset($default_server);
 /******************************************************************************/
 /* setup themes                                          LABEL_theme_setup    */
 
+if (isset($_REQUEST['custom_color'])) {
+    $_SESSION['userconf']['custom_color'] = $_REQUEST['custom_color'];
+    $_SESSION['userconf']['custom_color_rgb'] = $_REQUEST['custom_color_rgb'];
+}
 /**
  * @global PMA_Theme_Manager $_SESSION['PMA_Theme_Manager']
  */

libraries/header_meta_style.inc.php

@@ -46,5 +46,6 @@ if ($GLOBALS['text_dir'] == 'ltr') {
     }
 ?></title>
     <link rel="stylesheet" type="text/css" href="<?php echo defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : ''; ?>phpmyadmin.css.php?<?php echo PMA_generate_common_url(); ?>&amp;js_frame=<?php echo isset($print_view) ? 'print' : 'right'; ?>&amp;nocache=<?php echo $_SESSION['PMA_Config']->getThemeUniqueValue(); ?>" />
+    <link rel="stylesheet" type="text/css" href="js/mooRainbow/mooRainbow.css" />
     <link rel="stylesheet" type="text/css" href="<?php echo defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : ''; ?>print.css" media="print" />
     <meta name="robots" content="noindex,nofollow" />

main.php

@@ -9,6 +9,9 @@
  * Gets some core libraries and displays a top message if required
  */
 require_once './libraries/common.inc.php';
+$GLOBALS['js_include'][] = 'mootools.js';
+$GLOBALS['js_include'][] = 'mooRainbow/mooRainbow.js';
+$GLOBALS['js_include'][] = 'mootools-domready-rainbow.js';
 
 // Handles some variables that may have been sent by the calling script
 $GLOBALS['db'] = '';
@@ -144,6 +147,13 @@ if (empty($cfg['Lang'])) {
 if ($GLOBALS['cfg']['ThemeManager']) {
     echo '<li id="li_select_theme">';
     echo $_SESSION['PMA_Theme_Manager']->getHtmlSelectBox();
+    echo '<img id="myRainbow" src="js/mooRainbow/images/rainbow.png" alt="[r]" 
+        width="16" height="16" />';
+    echo '<form name="rainbowform" id="rainbowform" method="post" action="index.php" target="_parent">';
+    echo PMA_generate_common_hidden_inputs();
+    echo '<input type="hidden" name="custom_color" />';
+    echo '<input type="hidden" name="custom_color_rgb" />';
+    echo '</form>';
     echo '</li>';
 }
 echo '<li id="li_select_fontsize">';

themes/original/css/theme_left.css.php

@@ -27,7 +27,7 @@ body {
 <?php if (! empty($GLOBALS['cfg']['FontFamily'])) { ?>
     font-family:        <?php echo $GLOBALS['cfg']['FontFamily']; ?>;
 <?php } ?>
-    background:         <?php echo $GLOBALS['cfg']['NaviBackground']; ?>;
+    background:         <?php echo (isset($_SESSION['userconf']['custom_color']) ? $_SESSION['userconf']['custom_color'] : $GLOBALS['cfg']['NaviBackground']); ?>;
     color:              <?php echo $GLOBALS['cfg']['NaviColor']; ?>;
     margin:             0;
     padding:            0.2em 0.2em 0.2em 0.2em;
@@ -85,7 +85,8 @@ button {
 /* specific elements */
 
 div#pmalogo {
-    background-color: #D0DCE0<?php //better echo $GLOBALS['cfg']['logoBGC']; ?>;
+    <?php //better echo $GLOBALS['cfg']['logoBGC']; ?>
+    background-color: <?php echo (isset($_SESSION['userconf']['custom_color']) ? $_SESSION['userconf']['custom_color'] : '#D0CDE0'); ?>;
     padding:.3em;
 }
 div#pmalogo,
@@ -159,7 +160,7 @@ div#left_tableList ul {
     margin:             0;
     padding:            0;
     font-size:          80%;
-    background:         <?php echo $GLOBALS['cfg']['NaviBackground']; ?>;
+    background:         <?php echo (isset($_SESSION['userconf']['custom_color']) ? $_SESSION['userconf']['custom_color'] : $GLOBALS['cfg']['NaviBackground']); ?>;
 }
 
 div#left_tableList ul ul {

themes/original/css/theme_right.css.php

@@ -30,7 +30,7 @@ body {
     padding:            0;
     margin:             0.5em;
     color:              <?php echo $GLOBALS['cfg']['MainColor']; ?>;
-    background:         <?php echo $GLOBALS['cfg']['MainBackground']; ?>;
+    background:         <?php echo (isset($_SESSION['userconf']['custom_color']) ? $_SESSION['userconf']['custom_color'] : $GLOBALS['cfg']['MainBackground']); ?>;
 }
 
 <?php if (! empty($GLOBALS['cfg']['FontFamilyFixed'])) { ?>