dav/colorpicker/jquery.colorPicker.js

   1 /**
   2  * Really Simple Color Picker in jQuery
   3  *
   4  * Licensed under the MIT (MIT-LICENSE.txt) licenses.
   5  *
   6  * Copyright (c) 2008 Lakshan Perera (www.laktek.com)
   7  *                    Daniel Lacy (daniellacy.com)
   8  *
   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:
  15  *
  16  * The above copyright notice and this permission notice shall be included in
  17  * all copies or substantial portions of the Software.
  18  *
  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
  25  * IN THE SOFTWARE.
  26  */
  27
  28 (function ($) {
  29     /**
  30      * Create a couple private variables.
  31     **/
  32     var selectorOwner,
  33         activePalette,
  34         cItterate       = 0,
  35         templates       = {
  36             control : $('<div class="colorPicker-picker">&nbsp;</div>'),
  37             palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
  38             swatch  : $('<div class="colorPicker-swatch">&nbsp;</div>'),
  39             hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
  40             hexField: $('<input type="text" id="colorPicker_hex" />')
  41         },
  42         transparent     = "transparent",
  43         lastColor;
  44
  45     /**
  46      * Create our colorPicker function
  47     **/
  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
  55                     ),
  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,
  61                 swatch;
  62
  63             /**
  64              * Build a color palette.
  65             **/
  66             $.each(opts.colors, function (i) {
  67                 swatch = templates.swatch.clone();
  68
  69                 if (opts.colors[i] === transparent) {
  70                     swatch.addClass(transparent).text('X');
  71
  72                     $.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
  73
  74                 } else {
  75                     swatch.css("background-color", "#" + this);
  76
  77                     $.fn.colorPicker.bindPalette(newHexField, swatch);
  78
  79                 }
  80
  81                 swatch.appendTo(newPalette);
  82             });
  83
  84             newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
  85
  86             newHexField.attr({
  87                 'id'    : 'colorPicker_hex-' + cItterate,
  88                 'value' : defaultColor
  89             });
  90
  91             newHexField.bind("keydown", function (event) {
  92                 if (event.keyCode === 13) {
  93                     $.fn.colorPicker.changeColor($.fn.colorPicker.toHex($(this).val()));
  94                 }
  95                 if (event.keyCode === 27) {
  96                     $.fn.colorPicker.hidePalette(paletteId);
  97                 }
  98             });
  99
 100             $('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
 101
 102             newPalette.find('.colorPicker_hexWrap').append(newHexField);
 103
 104             $("body").append(newPalette);
 105
 106             newPalette.hide();
 107
 108
 109             /**
 110              * Build replacement interface for original color input.
 111             **/
 112             newControl.css("background-color", defaultColor);
 113
 114             newControl.bind("click", function () {
 115                 $.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
 116             });
 117
 118             element.after(newControl);
 119
 120             element.bind("change", function () {
 121                 element.next(".colorPicker-picker").css(
 122                     "background-color", $.fn.colorPicker.toHex($(this).val())
 123                 );
 124             });
 125
 126             // Hide the original input.
 127             element.val(defaultColor).hide();
 128
 129             cItterate++;
 130         });
 131     };
 132
 133     /**
 134      * Extend colorPicker with... all our functionality.
 135     **/
 136     $.extend(true, $.fn.colorPicker, {
 137         /**
 138          * Return a Hex color, convert an RGB value and return Hex, or return false.
 139          *
 140          * Inspired by http://code.google.com/p/jquery-color-utils
 141         **/
 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);
 146
 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++) {
 153                                 str = '0' + str;
 154                             }
 155                         }
 156
 157                         return str;
 158                     };
 159
 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));
 164
 165                     return '#' + r + g + b;
 166                 }
 167
 168             // Otherwise we wont do anything.
 169             } else {
 170                 return false;
 171
 172             }
 173         },
 174
 175         /**
 176          * Check whether user clicked on the selector or owner.
 177         **/
 178         checkMouse : function (event, paletteId) {
 179             var selector = activePalette,
 180                 selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
 181
 182             if (event.target === $(selector)[0] || event.target === selectorOwner || selectorParent > 0) {
 183                 return;
 184             }
 185
 186             $.fn.colorPicker.hidePalette();
 187         },
 188
 189         /**
 190          * Hide the color palette modal.
 191         **/
 192         hidePalette : function (paletteId) {
 193             $(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
 194
 195             $('.colorPicker-palette').hide();
 196         },
 197
 198         /**
 199          * Show the color palette modal.
 200         **/
 201         showPalette : function (palette) {
 202             var hexColor = selectorOwner.prev("input").val();
 203
 204             palette.css({
 205                 top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
 206                 left: selectorOwner.offset().left
 207             });
 208
 209             $("#color_value").val(hexColor);
 210
 211             palette.show();
 212
 213             $(document).bind("mousedown", $.fn.colorPicker.checkMouse);
 214         },
 215
 216         /**
 217          * Toggle visibility of the colorPicker palette.
 218         **/
 219         togglePalette : function (palette, origin) {
 220             // selectorOwner is the clicked .colorPicker-picker.
 221             if (origin) {
 222                 selectorOwner = origin;
 223             }
 224
 225             activePalette = palette;
 226
 227             if (activePalette.is(':visible')) {
 228                 $.fn.colorPicker.hidePalette();
 229
 230             } else {
 231                 $.fn.colorPicker.showPalette(palette);
 232
 233             }
 234         },
 235
 236         /**
 237          * Update the input with a newly selected color.
 238         **/
 239         changeColor : function (value) {
 240             selectorOwner.css("background-color", value);
 241
 242             selectorOwner.prev("input").val(value).change();
 243
 244             $.fn.colorPicker.hidePalette();
 245         },
 246
 247         /**
 248          * Bind events to the color palette swatches.
 249         */
 250         bindPalette : function (paletteInput, element, color) {
 251             color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
 252
 253             element.bind({
 254                 click : function (ev) {
 255                     lastColor = color;
 256
 257                     $.fn.colorPicker.changeColor(color);
 258                 },
 259                 mouseover : function (ev) {
 260                     lastColor = paletteInput.val();
 261
 262                     $(this).css("border-color", "#598FEF");
 263
 264                     paletteInput.val(color);
 265                 },
 266                 mouseout : function (ev) {
 267                     $(this).css("border-color", "#000");
 268
 269                     paletteInput.val(selectorOwner.css("background-color"));
 270
 271                     paletteInput.val(lastColor);
 272                 }
 273             });
 274         }
 275     });
 276
 277     /**
 278      * Default colorPicker options.
 279      *
 280      * These are publibly available for global modification using a setting such as:
 281      *
 282      * $.fn.colorPicker.defaults.colors = ['151337', '111111']
 283      *
 284      * They can also be applied on a per-bound element basis like so:
 285      *
 286      * $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
 287      * $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
 288      *
 289     **/
 290     $.fn.colorPicker.defaults = {
 291         // colorPicker default selected color.
 292         pickerDefault : "FFFFFF",
 293
 294         // Default color set.
 295         colors : [
 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'
 301         ],
 302
 303         // If we want to simply add more colors to the default set, use addColors.
 304         addColors : []
 305     };
 306
 307 })(jQuery);