1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var ComponentsColorPickers = function() {
var handleColorPicker = function () {
if (!jQuery().colorpicker) {
return;
}
$('.colorpicker-default').colorpicker({
format: 'hex'
});
$('.colorpicker-rgba').colorpicker();
}
var handleMiniColors = function() {
$('.demo').each(function() {
//
// Dear reader, it's actually very easy to initialize MiniColors. For example:
//
// $(selector).minicolors();
//
// The way I've done it below is just for the demo, so don't get confused
// by it. Also, data- attributes aren't supported at this time...they're
// only used for this demo.
//
$(this).minicolors({
control: $(this).attr('data-control') || 'hue',
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
letterCase: $(this).attr('data-letterCase') || 'lowercase',
opacity: $(this).attr('data-opacity'),
position: $(this).attr('data-position') || 'bottom left',
change: function(hex, opacity) {
if (!hex) return;
if (opacity) hex += ', ' + opacity;
if (typeof console === 'object') {
console.log(hex);
}
},
theme: 'bootstrap'
});
});
}
return {
//main function to initiate the module
init: function() {
handleMiniColors();
handleColorPicker();
}
};
}();
jQuery(document).ready(function() {
ComponentsColorPickers.init();
});