diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..32421b0 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + tiny jQuery color picker demo + + +
+

Tiny jQuery colorPicker

+

This a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.

+ +

Skinned dev-tools like, with RGB sliders

+
+ + + +
+
+
+
+
+ +Fork me on GitHub + + \ 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;