-
Notifications
You must be signed in to change notification settings - Fork 3
/
colorShades.js
78 lines (73 loc) · 3.03 KB
/
colorShades.js
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/*
Copyright 2015 Kuldeep Kamboj
colorShades.js (https://github.com/kuldeep-k/colorShades)
Color Shades jQuery Plugin - version 0.2
Apache License
*/
(function ( $ ) {
$.fn.colorShades = function(options) {
var settings = $.extend({
// These are the defaults.
l_items: 3,
r_items: 7,
step: 2,
base_color: '#568203',
show_color_code: false,
onSelect : function(color) {},
onComplete : function(shades) {},
}, options );
var shades = [];
var cell_count = settings.l_items + settings.r_items + 1;
var input_name = $(this).prop('name');
$('table.color-shades-'+ input_name).remove();
$('<table class="color-shades color-shades-'+ input_name +'"><tr></tr><tr></tr></table>').insertAfter($(this));
var col = tinycolor(settings.base_color);
var colostr = col.toString();
for(i=0;i< cell_count;i++)
{
$('table.color-shades-'+ input_name + ' tr:first').append('<td></td>');
if(settings.show_color_code === true)
{
$('table.color-shades-'+ input_name + ' tr:eq(1)').append('<td></td>');
}
}
for(i=0;i<settings.l_items;i++)
{
colostr = col.lighten(settings.step).toString();
shades.push(colostr);
$('table.color-shades-'+ input_name + ' tr:first').find('td').eq(settings.l_items-i-1).css('background-color', colostr);
if(settings.show_color_code === true)
{
$('table.color-shades-'+ input_name + ' tr:eq(1)').find('td').eq(settings.l_items-i-1).html(colostr);
}
}
var col = tinycolor(settings.base_color);
var colostr = col.toString();
shades.push(colostr);
$('table.color-shades-'+ input_name + ' tr:first').find('td').eq(settings.l_items).css('background-color', colostr);
if(settings.show_color_code === true)
{
$('table.color-shades-'+ input_name + ' tr:eq(1)').find('td').eq(settings.l_items).html(colostr);
}
for(i=0;i<settings.r_items;i++)
{
colostr = col.darken(settings.step).toString();
shades.push(colostr);
$('table.color-shades-'+ input_name + ' tr:first').find('td').eq(settings.l_items+1+i).css('background-color', colostr);
if(settings.show_color_code === true)
{
$('table.color-shades-'+ input_name + ' tr:eq(1)').find('td').eq(settings.l_items+1+i).html(colostr);;
}
}
var $input = $(this);
$('table.color-shades-'+ input_name + ' tr:first').find('td').click(function() {
var color = tinycolor($(this).css('background-color'));
$input.val(color.toHex());
settings.onSelect.call( color );
});
console.log('--------------------')
console.log(shades)
settings.onComplete.call( shades );
return this;
};
}( jQuery ));