查看 | 历史 | 提交 | 提交对比
hjg
2023-11-18 bb48edb3d9faaaeab0088151c86fc24137acdb08
提交 | 用户 | 时间
58d006 1 /**
A 2  <b>Custom color picker element</b>. Converts html select elements to a dropdown color picker.
3 */
4 (function($ , undefined) {
5     var Ace_Colorpicker = function(element, _options) {
6
7         var attrib_values = ace.helper.getAttrSettings(element, $.fn.ace_colorpicker.defaults);
8         var options = $.extend({}, $.fn.ace_colorpicker.defaults, _options, attrib_values);
9
10
11         var $element = $(element);
12         var color_list = '';
13         var color_selected = '';
14         var selection = null;
15         var color_array = [];
16         
17         $element.addClass('hide').find('option').each(function() {
18             var $class = 'colorpick-btn';
19             var color = this.value.replace(/[^\w\s,#\(\)\.]/g, '');
20             if(this.value != color) this.value = color;
21             if(this.selected) {
22                 $class += ' selected';
23                 color_selected = color;
24             }
25             color_array.push(color)
26             color_list += '<li><a class="'+$class+'" href="#" style="background-color:'+color+';" data-color="'+color+'"></a></li>';
27         }).
28         end()
29         .on('change.color', function(){
30             $element.next().find('.btn-colorpicker').css('background-color', this.value);
31         })
32         .after('<div class="dropdown dropdown-colorpicker">\
33         <a data-toggle="dropdown" class="dropdown-toggle" '+(options.auto_pos ? 'data-position="auto"' : '')+' href="#"><span class="btn-colorpicker" style="background-color:'+color_selected+'"></span></a><ul class="dropdown-menu'+(options.caret? ' dropdown-caret' : '')+(options.pull_right ? ' dropdown-menu-right' : '')+'">'+color_list+'</ul></div>')
34
35         
36         var dropdown = $element.next().find('.dropdown-menu')
37         dropdown.on(ace.click_event, function(e) {
38             var a = $(e.target);
39             if(!a.is('.colorpick-btn')) return false;
40
41             if(selection) selection.removeClass('selected');
42             selection = a;
43             selection.addClass('selected');
44             var color = selection.data('color');
45
46             $element.val(color).trigger('change');
47
48             e.preventDefault();
49             return true;//to hide dropdown
50         })
51         selection = $element.next().find('a.selected');
52
53         this.pick = function(index, insert) {
54             if(typeof index === 'number') {
55                 if(index >= color_array.length) return;
56                 element.selectedIndex = index;
57                 dropdown.find('a:eq('+index+')').trigger(ace.click_event);
58             }
59             else if(typeof index === 'string') {
60                 var color = index.replace(/[^\w\s,#\(\)\.]/g, '');
61                 index = color_array.indexOf(color);
62                 //add this color if it doesn't exist
63                 if(index == -1 && insert === true) {
64                     color_array.push(color);
65                     
66                     $('<option />')
67                     .appendTo($element)
68                     .val(color);
69                     
70                     $('<li><a class="colorpick-btn" href="#"></a></li>')
71                     .appendTo(dropdown)
72                     .find('a')
73                     .css('background-color', color)
74                     .data('color', color);
75                     
76                     index = color_array.length - 1;
77                 }
78                 if(index == -1) return;
79                 dropdown.find('a:eq('+index+')').trigger(ace.click_event);
80             }
81         }
82
83         this.destroy = function() {
84             $element.removeClass('hide').off('change.color')
85             .next().remove();
86             color_array = [];
87         }
88     }
89
90
91     $.fn.ace_colorpicker = function(option, value) {
92         var retval;
93
94         var $set = this.each(function () {
95             var $this = $(this);
96             var data = $this.data('ace_colorpicker');
97             var options = typeof option === 'object' && option;
98
99             if (!data) $this.data('ace_colorpicker', (data = new Ace_Colorpicker(this, options)));
100             if (typeof option === 'string') retval = data[option](value);
101         });
102
103         return (retval === undefined) ? $set : retval;
104     }
105     
106     $.fn.ace_colorpicker.defaults = {
107         'pull_right' : false,
108         'caret': true,
109         'auto_pos': true
110     }
111     
112 })(window.jQuery);