From 0aceb92bc8f83126cd099ea241868c55a3826d24 Mon Sep 17 00:00:00 2001
From: peterd <peter@dematte.at>
Date: Sat, 21 Nov 2015 15:54:26 +0100
Subject: [PATCH] new RGB slider demo

---
 index.html |  3 ++-
 index.js   | 77 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index debbd57..2f78d95 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,8 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
 		<option value="memory">Color memory spaces</option>
 		<option value="skinned">Skinned (white)</option>
 		<option value="skinned_sa">Skinned, selective alpha</option>
-		<option value="dev_skinned">Skinned dev-tools like</option>
+        <option value="dev_skinned">Skinned dev-tools like</option>
+        <option value="dev_skinned_rgb">Skinned, RGB sliders</option>
 		<option value="dev_skinned_hh">Skinned dev-tools 3:2</option>
 		<option value="noalpha">Default without alpha</option>
 		<option value="small">Default but smaller</option>
diff --git a/index.js b/index.js
index b80e019..cb50794 100644
--- a/index.js
+++ b/index.js
@@ -478,9 +478,84 @@
 				' inset -1px -1px 6px rgba(0,0,0,.15);'});
 
 
+
+	plugin.dev_skinned_rgb = {
+		customBG: '#222',
+		margin: '5px 0 0',
+		doRender: 'div div',
+		colorNames: plugin.dev_skinned.colorNames,
+		buildCallback: function($elm) {
+			var that = this;
+			var currentRGB = '';
+			var $currentSlider = $();
+			var currentOffset = {};
+			var $window = $(window);
+			var mouseMove = function(e) { // don't render here. Just setColor;
+				var color = {};
+
+				color[currentRGB] = (e.pageX - currentOffset.left) / that.currentWidth * 255;
+				that.color.setColor(color, 'rgb', that.color.colors.alpha);
+				that.render();
+			};
+
+			$elm.append(
+				'<div class="cp-rgb-r"><div class="cp-rgb-r-cursor"></div></div>' +
+				'<div class="cp-rgb-g"><div class="cp-rgb-g-cursor"></div></div>' +
+				'<div class="cp-rgb-b"><div class="cp-rgb-b-cursor"></div></div>' +
+				'<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
+
+			this.$cursorR = $elm.find('.cp-rgb-r-cursor'); // caching for render renderCallback
+			this.$cursorG = $elm.find('.cp-rgb-g-cursor');
+			this.$cursorB = $elm.find('.cp-rgb-b-cursor');
+
+			$elm.on('mousedown', '.cp-rgb-r-cursor, .cp-rgb-g-cursor, .cp-rgb-b-cursor', function(e) {
+				$currentSlider = $(this);
+				currentRGB = this.className.replace(/cp-rgb-(\D){1}-cursor/, "$1");
+				currentOffset = $currentSlider.parent().offset();
+				that.currentWidth = $currentSlider.parent()[0].clientWidth;
+				$window.on('mousemove.rgb', mouseMove);
+				e.preventDefault && e.preventDefault();
+				return false;
+			});
+			$window.on('mouseup', function(e) {
+				$window.off('mousemove.rgb');
+			});
+		},
+
+		cssAddon: plugin.dev_skinned.cssAddon.replace('152px; margin:10px 0 0', '152px; margin:12px 0 0').
+		replace(
+			'.cp-alpha{', '.cp-alpha, div.cp-rgb-r, div.cp-rgb-g, div.cp-rgb-b{' +
+			'overflow: visible;').
+		replace(
+			'.cp-alpha-cursor{', '.cp-alpha-cursor, .cp-rgb-r-cursor, .cp-rgb-g-cursor, .cp-rgb-b-cursor{' +
+			'box-sizing: border-box; position: absolute;').
+		replace(
+			'.cp-alpha:after{', '.cp-alpha:after, .cp-rgb-r:after, .cp-rgb-g:after, .cp-rgb-b:after{') +
+		
+			'.cp-rgb-r:after{content:"R";}.cp-rgb-g:after{content:"G";}.cp-rgb-b:after{content:"B";}' +
+			'div.cp-rgb-r{background:linear-gradient(to right, rgba(220,220,220,1) 0%,rgba(255,0,0,1) 100%);}' +
+			'div.cp-rgb-g{background:linear-gradient(to right, rgba(220,220,220,1) 0%,rgba(0,255,0,1) 100%);}' +
+			'div.cp-rgb-b{background:linear-gradient(to right, rgba(220,220,220,1) 0%,rgba(0,0,255,1) 100%);}',
+
+
+		renderCallback: function($elm, toggled) {
+			var colors = this.color.colors,
+				rgb = colors.RND.rgb;
+
+			$('.cp-patch div').css({'background-color': $elm[0].style.backgroundColor});
+			$('.cp-disp').text(this.color.options.colorNames[colors.HEX] || $elm.val());
+
+			this.currentWidth = this.currentWidth || this.$UI.find('.cp-rgb-r')[0].clientWidth;
+			this.$cursorR.css({left: rgb.r / 255 * this.currentWidth});
+			this.$cursorG.css({left: rgb.g / 255 * this.currentWidth});
+			this.$cursorB.css({left: rgb.b / 255 * this.currentWidth});
+		}
+	};
+
+
 	$pluginSelect.val(type || 'desktop').
 	on('change', function(e) {
-		window.location = './?type=' + this.value + '#demo'
+		window.location = 'index.html?type=' + this.value + '#demo'
 	});