first version

README.md

@@ -2,3 +2,33 @@ colorShades
 ===========
 
 Plugin create a widget having the shades of single color. 
+
+Following code is needed to show widget.
+
+```js
+
+$('#fieldId').colorShades({
+    l_items: LIGHTER_SHADES_COUNT,
+    r_items: DARKER_SHADES_COUNT,
+    step: STEPS,
+    base_color: BASE_COLOR
+});
+
+``` 
+* BASE_COLOR is hex color code for color which shades are needed 
+* LIGHTER_SHADES_COUNT is color shades lighter than base color.
+* DARKER_SHADES_COUNT is color shades darker than base color
+* STEPS define the how much color change during next palette color. More steps means bigger change.
+
+Also checkout demo.html file to see example.
+
+Note : Plugin requires following libraries.
+
+jQuery and tinycolor library.
+* [jQuery] 
+* [TinyColor] 
+
+
+[jQuery]:http://jquery.com
+[Tinycolor]:https://github.com/bgrins/TinyColor
+

colorShades.css

@@ -0,0 +1,26 @@
+table.color-shades {
+  border-collapse: collapse;
+}
+table.color-shades td, table.color-shades th {
+  border: 1px solid black;
+}
+table.color-shades tr:first-child th {
+  border-top: 0;
+}
+table.color-shades tr:last-child td {
+  border-bottom: 0;
+}
+table.color-shades tr td:first-child,
+table.color-shades tr th:first-child {
+  border-left: 0;
+}
+table.color-shades tr td:last-child,
+table.color-shades tr th:last-child {
+  border-right: 0;
+}
+table.color-shades td {
+    width: 20px;
+    height: 30px;
+    font-size: 9px;
+}
+

colorShades.js

@@ -0,0 +1,60 @@
+(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
+
+        }, options );
+        var cell_count = settings.l_items + settings.r_items + 1;
+        var input_name = $(this).prop('name');
+        $('<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();
+            $('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();
+
+        $('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();
+            $('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());            
+        });
+        return this;
+    }; 
+}( jQuery ));

demo.html

@@ -0,0 +1,36 @@
+<html>
+<head>
+<link href="colorShades.css" media="screen" rel="stylesheet" type="text/css">
+<script src="vendors/jquery.min.js"></script>
+<script src="vendors/tinycolor.js"></script>
+<script src="colorShades.js"></script>
+
+</head>
+<body>
+<input type="text" name="custom" id="custom"  />
+<br/>
+<br/><br/><br/><br/>
+
+<input type="text" name="custom1" id="custom1" />
+
+
+<script>
+
+$('#custom').colorShades({
+            l_items: 3,
+            r_items: 5,
+            step: 3,
+            base_color: '#568203'
+        });
+
+$('#custom1').colorShades({
+            l_items: 20,
+            r_items: 20,
+            step: 1,
+            base_color: '#568203'
+        });
+
+
+</script>
+</body>
+</html>