This a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/index.js b/demo/index.js
new file mode 100644
index 0000000..e915d0d
--- /dev/null
+++ b/demo/index.js
@@ -0,0 +1,90 @@
+$(function(){
+ 'use strict';
+
+ var options = {
+ customBG: '#222', // bg of page is dark, so if opcity close to 0 -> dark shines through
+ doRender: 'div div', // tell it where to render bg-color if no input
+ colorNames: { // get more colors in the other demo... will be displayed next to color patch
+ '808080': 'grey',
+ '00FFFF': 'cyan',
+ '000000': 'black',
+ '0000FF': 'blue',
+ 'FF00FF': 'magenta',
+ '008000': 'green',
+ 'FF0000': 'red',
+ 'C0C0C0': 'silver',
+ 'FFFFFF': 'white',
+ 'FFFF00': 'yellow'
+ },
+ buildCallback: function($elm) { // called the first time colorPicker gets triggered
+ var that = this; // for callback function
+ var currentRGB = ''; // either r, g or b
+ var $currentSlider = $(); // the clicked rgb slider
+ var currentOffset = {}; // of slider
+ var $window = $(window);
+ var mouseMove = function(e) { // don't render sliders here. Just setColor;
+ var color = {}; // new calculated color
+
+ color[currentRGB] = (e.pageX - currentOffset.left) / that.currentWidth * 255;
+ that.color.setColor(color, 'rgb'); // set calculated value
+ that.render(); // tell colorPicker to render
+ };
+
+ $elm.append( // render extra sliders and patch
+ '
' +
+ '
' +
+ '
' +
+ '
');
+
+ this.cursorRStyle = $elm.find('.cp-rgb-r-cursor')[0].style; // caching for faster render renderCallback
+ this.cursorGStyle = $elm.find('.cp-rgb-g-cursor')[0].style;
+ this.cursorBStyle = $elm.find('.cp-rgb-b-cursor')[0].style;
+
+ this.patchStyle = $('.cp-patch div')[0].style;
+ this.$display = $('.cp-disp');
+
+ $elm.on('mousedown', '.cp-rgb-r, .cp-rgb-g, .cp-rgb-b', function(e) { // event delegation
+ $currentSlider = $(this); // well ;o)
+ currentRGB = this.className.replace(/cp-rgb-(\D){1}/, "$1"); // cp-rgb-r -> r
+ currentOffset = $currentSlider.offset(); // for later calculations
+ that.currentWidth = $currentSlider.width(); // ... also here
+ $window.on('mousemove.rgb', mouseMove); // install mousemove listener
+ e.preventDefault && e.preventDefault(); // prevent selecting text
+ mouseMove(e); // render color picker the first time
+ return false; // for IE
+ });
+
+ $window.on('mouseup', function(e) {
+ $window.off('mousemove.rgb'); // turn off mousemove event handler
+ });
+
+ // append css after just generated / use cssAddon instead if you want
+ $('#colorPickerMod').appendTo('head');
+ },
+ renderCallback: function($elm, toggled) {
+ var colors = this.color.colors; // the whole color object
+ var rgb = colors.RND.rgb; // the RGB color in 0-255
+
+ // the following 6 lines are not necessary if you don't have the trigger icons with the arrows...
+ // if (toggled === true) { // just showing (only on show)
+ // $('.trigger').removeClass('active'); // turns arrow of color triggers
+ // $elm.closest('.trigger').addClass('active');
+ // } else if (toggled === false) { // just hiding (only on hide)
+ // $elm.closest('.trigger').removeClass('active');
+ // }
+
+ this.patchStyle.backgroundColor = $elm[0].style.backgroundColor; // set patch color...
+ this.$display.text(this.color.options.colorNames[colors.HEX] || $elm.val()); // ...and text aside
+
+ this.currentWidth = this.currentWidth || this.$UI.find('.cp-rgb-r')[0].clientWidth; // first time
+ this.cursorRStyle.left = (rgb.r / 255 * this.currentWidth) + 'px'; // render sliders
+ this.cursorGStyle.left = (rgb.g / 255 * this.currentWidth) + 'px'; // faster than with $().css
+ this.cursorBStyle.left = (rgb.b / 255 * this.currentWidth) + 'px';
+ }
+ };
+
+
+ window.myColorPicker =
+ $('.color').colorPicker(options);
+ $('.trigger').colorPicker();
+});
\ No newline at end of file
diff --git a/demo/mod.css b/demo/mod.css
new file mode 100644
index 0000000..d12d2be
--- /dev/null
+++ b/demo/mod.css
@@ -0,0 +1,149 @@
+.cp-patch {
+ float: left;
+ margin: 9px 0 0;
+ height: 24px;
+ width: 24px;
+ border: 1px solid #aaa;
+}
+
+.cp-patch {
+ background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
+}
+
+.cp-patch div {
+ height: 24px;
+ width: 24px;
+}
+
+.cp-disp {
+ padding: 4px 0 4px 4px;
+ margin-top: 10px;
+ font-size: 12px;
+ height: 16px;
+ line-height: 16px;
+ color: #333;
+}
+
+.cp-color-picker {
+ border: 1px solid #999;
+ padding: 8px;
+ box-shadow: 5px 5px 16px rgba(0,0,0,0.4);
+ background: #eee;
+ overflow: visible;
+ border-radius: 3px;
+ margin: 5px 0 0;
+}
+
+.cp-color-picker:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: -8px;
+ left: 8px;
+ border: 8px solid #eee;
+ border-width: 0px 8px 8px;
+ border-color: transparent transparent #eee;
+}
+
+.cp-color-picker:before {
+ content: "";
+ display: block;
+
+ position: absolute;
+ top: -9px;
+ left: 8px;
+ border: 8px solid #eee;
+ border-width: 0px 8px 8px;
+ border-color: transparent transparent #999;
+}
+
+.cp-xy-slider {
+ border: 1px solid #aaa;
+ margin-bottom: 10px;
+ width: 150px;
+ height: 150px;
+}
+.cp-xy-slider:active {
+ cursor: none;
+}
+
+.cp-xy-cursor{
+ width: 12px;
+ height: 12px;
+ margin: -6px;
+}
+
+.cp-z-slider {
+ margin-left: 8px;
+ border: 1px solid #aaa;
+ height: 150px;
+ width: 24px;
+}
+
+.cp-z-cursor{
+ border-width: 5px;
+ margin-top: -5px;
+}
+
+.cp-color-picker .cp-alpha,
+.cp-color-picker .cp-rgb-r,
+.cp-color-picker .cp-rgb-g,
+.cp-color-picker .cp-rgb-b {
+ overflow: visible;
+ width: 152px;
+ margin: 12px 0 0;
+ height: 6px;
+ border-radius: 6px;
+ overflow: visible;
+ border: 1px solid #aaa;
+ box-sizing: border-box;
+ background-image: linear-gradient(to right, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%);
+}
+.cp-alpha-cursor,
+.cp-rgb-r-cursor,
+.cp-rgb-g-cursor,
+.cp-rgb-b-cursor{
+ box-sizing: border-box;
+ position: absolute;
+ background: #eee;
+ border-radius: 100%;
+ width: 14px;
+ height: 14px;
+ margin: -5px -7px;
+ border: 1px solid #999!important;
+ box-shadow: inset -2px -4px 3px #ccc;
+}
+
+.cp-alpha:after,
+.cp-rgb-r:after,
+.cp-rgb-g:after,
+.cp-rgb-b:after {
+ position: relative;
+ content: "α";
+ color: #666;
+ font-size: 16px;
+ font-family: monospace;
+ position: absolute;
+ right: -26px;
+ top: -8px
+}
+
+.cp-rgb-r:after {
+ content: "R";
+}
+.cp-rgb-g:after {
+ content: "G";
+}
+.cp-rgb-b:after {
+ content: "B";
+}
+
+div.cp-rgb-r {
+ background-color: red;
+}
+div.cp-rgb-g {
+ background-color: green;
+}
+div.cp-rgb-b {
+ background-color: blue;
+}
diff --git a/index.css b/index.css
index 651ee9b..d4ace74 100644
--- a/index.css
+++ b/index.css
@@ -1,3 +1,6 @@
+html, body {
+ height: 100%;
+}
body {
color: #ccc;
padding: .5em 1em;