提交 | 用户 | 时间
|
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); |