http://www.koreafashion.org/js/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-2012
7 * Lakshan Perera (www.laktek.com) & 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
50        return this.each(function () {
51            // Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
52            var element      = $(this),
53                opts         = $.extend({}, $.fn.colorPicker.defaults, options),
54                defaultColor = $.fn.colorPicker.toHex(
55                        (element.val().length > 0) ? element.val() : opts.pickerDefault
56                    ),
57                newControl   = templates.control.clone(),
58                newPalette   = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
59                newHexLabel  = templates.hexLabel.clone(),
60                newHexField  = templates.hexField.clone(),
61                paletteId    = newPalette[0].id,
62                swatch, controlText;
63
64
65            /**
66             * Build a color palette.
67            **/
68            $.each(opts.colors, function (i) {
69                swatch = templates.swatch.clone();
70
71                if (opts.colors[i] === transparent) {
72                    swatch.addClass(transparent).text('X');
73                    $.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
74                } else {
75                    swatch.css("background-color", "#" + this);
76                    $.fn.colorPicker.bindPalette(newHexField, swatch);
77                }
78                swatch.appendTo(newPalette);
79            });
80
81
82            newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
83
84            newHexField.attr({
85                'id'    : 'colorPicker_hex-' + cItterate,
86                'value' : defaultColor
87            });
88
89            newHexField.bind("keydown", function (event) {
90                if (event.keyCode === 13) {
91                    var hexColor = $.fn.colorPicker.toHex($(this).val());
92                    $.fn.colorPicker.changeColor(hexColor ? hexColor : element.val());
93                }
94                if (event.keyCode === 27) {
95                    $.fn.colorPicker.hidePalette();
96                }
97            });
98
99            newHexField.bind("keyup", function (event) {
100              var hexColor = $.fn.colorPicker.toHex($(event.target).val());

101              $.fn.colorPicker.previewColor(hexColor ? hexColor : element.val());
102            });
103
104            $('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
105
106            newPalette.find('.colorPicker_hexWrap').append(newHexField);
107            if (opts.showHexField === false) {
108                newHexField.hide();
109                newHexLabel.hide();
110            }
111
112            $("body").append(newPalette);
113
114            newPalette.hide();
115
116
117            /**
118             * Build replacement interface for original color input.
119            **/
120            newControl.css("background-color", defaultColor);
121
122            newControl.bind("click", function () {
123                if( element.is( ':not(:disabled)' ) ) {
124                                    $.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
125                }
126            });
127
128            if( options && options.onColorChange ) {
129              newControl.data('onColorChange', options.onColorChange);
130            } else {
131              newControl.data('onColorChange', function() {} );
132            }
133
134            if (controlText = element.data('text'))
135                newControl.html(controlText)
136
137            element.after(newControl);
138
139            element.bind("change", function () {
140                element.next(".colorPicker-picker").css(
141                    "background-color", $.fn.colorPicker.toHex($(this).val())
142                );
143            });
144
145            element.val(defaultColor);
146
147            // Hide the original input.
148            if (element[0].tagName.toLowerCase() === 'input') {
149                try {
150                    element.attr('type', 'hidden')
151                } catch(err) { // oldIE doesn't allow changing of input.type
152                    element.css('visibility', 'hidden').css('position', 'absolute')
153                }
154            } else {
155                element.hide();
156            }
157
158            cItterate++;
159        });
160    };
161
162    /**
163     * Extend colorPicker with... all our functionality.
164    **/
165    $.extend(true, $.fn.colorPicker, {
166        /**
167         * Return a Hex color, convert an RGB value and return Hex, or return false.
168         *
169         * Inspired by http://code.google.com/p/jquery-color-utils
170        **/
171        toHex : function (color) {
172            // If we have a standard or shorthand Hex color, return that value.
173            if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) {
174                return (color.charAt(0) === "#") ? color : ("#" + color);
175
176            // Alternatively, check for RGB color, then convert and return it as Hex.
177            } else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) {
178                var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
179                    pad = function (str) {
180                        if (str.length < 2) {
181                            for (var i = 0, len = 2 - str.length; i < len; i++) {
182                                str = '0' + str;
183                            }
184                        }
185
186                        return str;
187                    };
188
189                if (c.length === 3) {
190                    var r = pad(c[0].toString(16)),
191                        g = pad(c[1].toString(16)),
192                        b = pad(c[2].toString(16));
193
194                    return '#' + r + g + b;
195                }
196
197            // Otherwise we wont do anything.
198            } else {
199                return false;
200
201            }
202        },
203
204        /**
205         * Check whether user clicked on the selector or owner.
206        **/
207        checkMouse : function (event, paletteId) {
208            var selector = activePalette,
209                selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
210
211            if (event.target === $(selector)[0] || event.target === selectorOwner[0] || selectorParent > 0) {
212                return;
213            }
214
215            $.fn.colorPicker.hidePalette();
216        },
217
218        /**
219         * Hide the color palette modal.
220        **/
221        hidePalette : function () {
222            $(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
223
224            $('.colorPicker-palette').hide();
225        },
226
227        /**
228         * Show the color palette modal.
229        **/
230        showPalette : function (palette) {
231            var hexColor = selectorOwner.prev("input").val();
232
233            palette.css({
234                top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
235                left: selectorOwner.offset().left
236            });
237
238            $("#color_value").val(hexColor);
239
240            palette.show();
241
242            $(document).bind("mousedown", $.fn.colorPicker.checkMouse);
243        },
244
245        /**
246         * Toggle visibility of the colorPicker palette.
247        **/
248        togglePalette : function (palette, origin) {
249            // selectorOwner is the clicked .colorPicker-picker.
250            if (origin) {
251                selectorOwner = origin;
252            }
253
254            activePalette = palette;
255
256            if (activePalette.is(':visible')) {
257                $.fn.colorPicker.hidePalette();
258
259            } else {
260                $.fn.colorPicker.showPalette(palette);
261
262            }
263        },
264
265        /**
266         * Update the input with a newly selected color.
267        **/
268        changeColor : function (value) {
269            selectorOwner.css("background-color", value);
270            selectorOwner.prev("input").val(value).change();
271
272            $.fn.colorPicker.hidePalette();
273
274            selectorOwner.data('onColorChange').call(selectorOwner, $(selectorOwner).prev("input").attr("id"), value);
275        },
276
277
278        /**
279         * Preview the input with a newly selected color.
280        **/
281        previewColor : function (value) {
282            selectorOwner.css("background-color", value);
283        },
284
285        /**
286         * Bind events to the color palette swatches.
287        */
288        bindPalette : function (paletteInput, element, color) {
289            color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
290
291            element.bind({
292                click : function (ev) {
293                    lastColor = color;
294
295                    $.fn.colorPicker.changeColor(color);
296                },
297                mouseover : function (ev) {
298                    lastColor = paletteInput.val();
299
300                    $(this).css("border-color", "#598FEF");
301
302                    paletteInput.val(color);
303

304                    $.fn.colorPicker.previewColor(color);
305                },
306                mouseout : function (ev) {
307                    $(this).css("border-color", "#000");
308
309                    paletteInput.val(selectorOwner.css("background-color"));
310
311                    paletteInput.val(lastColor);
312
313                    $.fn.colorPicker.previewColor(lastColor);
314                }
315            });
316        }
317    });
318
319    /**
320     * Default colorPicker options.
321     *
322     * These are publibly available for global modification using a setting such as:
323     *
324     * $.fn.colorPicker.defaults.colors = ['151337', '111111']
325     *
326     * They can also be applied on a per-bound element basis like so:
327     *
328     * $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
329     * $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
330     *
331    **/
332    $.fn.colorPicker.defaults = {
333        // colorPicker default selected color.
334        pickerDefault : "FFFFFF",
335
336        // Default color set.
337        colors : [
338            '000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600',
339            '808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900',
340            '99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
341            'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99',
342            'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'
343        ],
344
345        // If we want to simply add more colors to the default set, use addColors.
346        addColors : [],
347
348        // Show hex field
349        showHexField: true
350    };
351
352})(jQuery);