2 * Very simple jQuery Color Picker
3 * https://github.com/tkrotoff/jquery-simplecolorpicker
5 * Copyright (C) 2012-2013 Tanguy Krotoff <tkrotoff@gmail.com>
7 * Licensed under the MIT license
16 var SimpleColorPicker = function(select, options) {
17 this.init('simplecolorpicker', select, options);
21 * SimpleColorPicker class.
23 SimpleColorPicker.prototype = {
24 constructor: SimpleColorPicker,
26 init: function(type, select, options) {
31 self.$select = $(select);
34 self.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
36 self.$colorList = null;
38 if (self.options.picker === true) {
39 var selectText = self.$select.find('> option:selected').text();
40 self.$icon = $('<span class="simplecolorpicker icon"'
41 + ' title="' + selectText + '"'
42 + ' style="background-color: ' + self.$select.val() + ';"'
43 + ' role="button" tabindex="0">'
44 + '</span>').insertAfter(self.$select);
45 self.$icon.on('click.' + self.type, $.proxy(self.showPicker, self));
47 self.$picker = $('<span class="simplecolorpicker picker ' + self.options.theme + '"></span>').appendTo(document.body);
48 self.$colorList = self.$picker;
50 // Hide picker when clicking outside
51 $(document).on('mousedown.' + self.type, $.proxy(self.hidePicker, self));
52 self.$picker.on('mousedown.' + self.type, $.proxy(self.mousedown, self));
54 self.$inline = $('<span class="simplecolorpicker inline ' + self.options.theme + '"></span>').insertAfter(self.$select);
55 self.$colorList = self.$inline;
58 // Build the list of colors
59 // <span class="color selected" title="Green" style="background-color: #7bd148;" role="button"></span>
60 self.$select.find('> option').each(function() {
61 var $option = $(this);
62 var color = $option.val();
64 var isSelected = $option.is(':selected');
65 var isDisabled = $option.is(':disabled');
68 if (isSelected === true) {
69 selected = ' data-selected';
73 if (isDisabled === true) {
74 disabled = ' data-disabled';
78 if (isDisabled === false) {
79 title = ' title="' + $option.text() + '"';
83 if (isDisabled === false) {
84 role = ' role="button" tabindex="0"';
87 var $colorSpan = $('<span class="color"'
89 + ' style="background-color: ' + color + ';"'
90 + ' data-color="' + color + '"'
96 self.$colorList.append($colorSpan);
97 $colorSpan.on('click.' + self.type, $.proxy(self.colorSpanClicked, self));
99 var $next = $option.next();
100 if ($next.is('optgroup') === true) {
101 // Vertical break, like hr
102 self.$colorList.append('<span class="vr"></span>');
108 * Changes the selected color.
110 * @param color the hexadecimal color to select, ex: '#fbd75b'
112 selectColor: function(color) {
115 var $colorSpan = self.$colorList.find('> span.color').filter(function() {
116 return $(this).data('color').toLowerCase() === color.toLowerCase();
119 if ($colorSpan.length > 0) {
120 self.selectColorSpan($colorSpan);
122 console.error("The given color '" + color + "' could not be found");
126 showPicker: function() {
127 var pos = this.$icon.offset();
129 // Remove some pixels to align the picker icon with the icons inside the dropdown
131 top: pos.top + this.$icon.outerHeight()
134 this.$picker.show(this.options.pickerDelay);
137 hidePicker: function() {
138 this.$picker.hide(this.options.pickerDelay);
142 * Selects the given span inside $colorList.
144 * The given span becomes the selected one.
145 * It also changes the HTML select value, this will emit the 'change' event.
147 selectColorSpan: function($colorSpan) {
148 var color = $colorSpan.data('color');
149 var title = $colorSpan.prop('title');
151 // Mark this span as the selected one
152 $colorSpan.siblings().removeAttr('data-selected');
153 $colorSpan.attr('data-selected', '');
155 if (this.options.picker === true) {
156 this.$icon.css('background-color', color);
157 this.$icon.prop('title', title);
161 // Change HTML select value
162 this.$select.val(color);
166 * The user clicked on a color inside $colorList.
168 colorSpanClicked: function(e) {
169 // When a color is clicked, make it the new selected one (unless disabled)
170 if ($(e.target).is('[data-disabled]') === false) {
171 this.selectColorSpan($(e.target));
172 this.$select.trigger('change');
177 * Prevents the mousedown event from "eating" the click event.
179 mousedown: function(e) {
184 destroy: function() {
185 if (this.options.picker === true) {
186 this.$icon.off('.' + this.type);
188 $(document).off('.' + this.type);
191 this.$colorList.off('.' + this.type);
192 this.$colorList.remove();
194 this.$select.removeData(this.type);
201 * How to use: $('#id').simplecolorpicker()
203 $.fn.simplecolorpicker = function(option) {
204 var args = $.makeArray(arguments);
207 // For HTML element passed to the plugin
208 return this.each(function() {
210 data = $this.data('simplecolorpicker'),
211 options = typeof option === 'object' && option;
212 if (data === undefined) {
213 $this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
215 if (typeof option === 'string') {
216 data[option].apply(data, args);
224 $.fn.simplecolorpicker.defaults = {
225 // No theme by default
228 // Show the picker or make it inline
231 // Animation delay in milliseconds