2 * Really Simple Color Picker in jQuery
4 * Licensed under the MIT (MIT-LICENSE.txt) licenses.
6 * Copyright (c) 2008 Lakshan Perera (www.laktek.com)
7 * Daniel Lacy (daniellacy.com)
9 * Permission is hereby granted, free of charge, to any person obtaining a copy
10 * of this software and associated documentation files (the "Software"), to
11 * deal in the Software without restriction, including without limitation the
12 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
13 * sell copies of the Software, and to permit persons to whom the Software is
14 * furnished to do so, subject to the following conditions:
16 * The above copyright notice and this permission notice shall be included in
17 * all copies or substantial portions of the Software.
19 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
20 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
21 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
22 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
23 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
24 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
30 * Create a couple private variables.
36 control : $('<div class="colorPicker-picker"> </div>'),
37 palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
38 swatch : $('<div class="colorPicker-swatch"> </div>'),
39 hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
40 hexField: $('<input type="text" id="colorPicker_hex" />')
42 transparent = "transparent",
46 * Create our colorPicker function
48 $.fn.colorPicker = function (options) {
49 return this.each(function () {
50 // Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
51 var element = $(this),
52 opts = $.extend({}, $.fn.colorPicker.defaults, options),
53 defaultColor = $.fn.colorPicker.toHex(
54 (element.val().length > 0) ? element.val() : opts.pickerDefault
56 newControl = templates.control.clone(),
57 newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
58 newHexLabel = templates.hexLabel.clone(),
59 newHexField = templates.hexField.clone(),
60 paletteId = newPalette[0].id,
64 * Build a color palette.
66 $.each(opts.colors, function (i) {
67 swatch = templates.swatch.clone();
69 if (opts.colors[i] === transparent) {
70 swatch.addClass(transparent).text('X');
72 $.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
75 swatch.css("background-color", "#" + this);
77 $.fn.colorPicker.bindPalette(newHexField, swatch);
81 swatch.appendTo(newPalette);
84 newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
87 'id' : 'colorPicker_hex-' + cItterate,
88 'value' : defaultColor
91 newHexField.bind("keydown", function (event) {
92 if (event.keyCode === 13) {
93 $.fn.colorPicker.changeColor($.fn.colorPicker.toHex($(this).val()));
95 if (event.keyCode === 27) {
96 $.fn.colorPicker.hidePalette(paletteId);
100 $('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
102 newPalette.find('.colorPicker_hexWrap').append(newHexField);
104 $("body").append(newPalette);
110 * Build replacement interface for original color input.
112 newControl.css("background-color", defaultColor);
114 newControl.bind("click", function () {
115 $.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
118 element.after(newControl);
120 element.bind("change", function () {
121 element.next(".colorPicker-picker").css(
122 "background-color", $.fn.colorPicker.toHex($(this).val())
126 // Hide the original input.
127 element.val(defaultColor).hide();
134 * Extend colorPicker with... all our functionality.
136 $.extend(true, $.fn.colorPicker, {
138 * Return a Hex color, convert an RGB value and return Hex, or return false.
140 * Inspired by http://code.google.com/p/jquery-color-utils
142 toHex : function (color) {
143 // If we have a standard or shorthand Hex color, return that value.
144 if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) {
145 return (color.charAt(0) === "#") ? color : ("#" + color);
147 // Alternatively, check for RGB color, then convert and return it as Hex.
148 } else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) {
149 var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
150 pad = function (str) {
151 if (str.length < 2) {
152 for (var i = 0, len = 2 - str.length; i < len; i++) {
160 if (c.length === 3) {
161 var r = pad(c[0].toString(16)),
162 g = pad(c[1].toString(16)),
163 b = pad(c[2].toString(16));
165 return '#' + r + g + b;
168 // Otherwise we wont do anything.
176 * Check whether user clicked on the selector or owner.
178 checkMouse : function (event, paletteId) {
179 var selector = activePalette,
180 selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
182 if (event.target === $(selector)[0] || event.target === selectorOwner || selectorParent > 0) {
186 $.fn.colorPicker.hidePalette();
190 * Hide the color palette modal.
192 hidePalette : function (paletteId) {
193 $(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
195 $('.colorPicker-palette').hide();
199 * Show the color palette modal.
201 showPalette : function (palette) {
202 var hexColor = selectorOwner.prev("input").val();
205 top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
206 left: selectorOwner.offset().left
209 $("#color_value").val(hexColor);
213 $(document).bind("mousedown", $.fn.colorPicker.checkMouse);
217 * Toggle visibility of the colorPicker palette.
219 togglePalette : function (palette, origin) {
220 // selectorOwner is the clicked .colorPicker-picker.
222 selectorOwner = origin;
225 activePalette = palette;
227 if (activePalette.is(':visible')) {
228 $.fn.colorPicker.hidePalette();
231 $.fn.colorPicker.showPalette(palette);
237 * Update the input with a newly selected color.
239 changeColor : function (value) {
240 selectorOwner.css("background-color", value);
242 selectorOwner.prev("input").val(value).change();
244 $.fn.colorPicker.hidePalette();
248 * Bind events to the color palette swatches.
250 bindPalette : function (paletteInput, element, color) {
251 color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
254 click : function (ev) {
257 $.fn.colorPicker.changeColor(color);
259 mouseover : function (ev) {
260 lastColor = paletteInput.val();
262 $(this).css("border-color", "#598FEF");
264 paletteInput.val(color);
266 mouseout : function (ev) {
267 $(this).css("border-color", "#000");
269 paletteInput.val(selectorOwner.css("background-color"));
271 paletteInput.val(lastColor);
278 * Default colorPicker options.
280 * These are publibly available for global modification using a setting such as:
282 * $.fn.colorPicker.defaults.colors = ['151337', '111111']
284 * They can also be applied on a per-bound element basis like so:
286 * $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
287 * $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
290 $.fn.colorPicker.defaults = {
291 // colorPicker default selected color.
292 pickerDefault : "FFFFFF",
294 // Default color set.
296 '000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600',
297 '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900',
298 '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
299 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99',
300 'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'
303 // If we want to simply add more colors to the default set, use addColors.