Named colors

README.md

@@ -48,11 +48,17 @@ Color Picker will use the value of the input field, which the picker is attached
 
 **Color Palette**
 
-Overrides the default color palette by passing an array of color values.
+Overrides the default color palette by passing an array of color values or an array of color objects with `name` and `hex` properties.
 
   ```javascript
     $('#color1').colorPicker({colors: ["333333", "111111"]});
   ```
+_or_
+
+  ```javascript
+    $('#color1').colorPicker({colors: [{name: "Asphault", hex: "333333"}, {name: "White as Snow", hex:"ffffff"}]});
+  ```
+
 
 **Transparency**
 
@@ -67,7 +73,7 @@ Enable transparency value as an option.
 Registers a callback that can be used to notify the calling code of a color change.
 
   ```javascript
-    $('#color1').colorPicker( { onColorChange : function(id, newValue) { console.log("ID: " + id + " has been changed to " + newValue); } } );
+    $('#color1').colorPicker( { onColorChange : function(id, newHexValue, newColorName) { console.log("ID: " + id + " has been changed to " + newValue); } } );
   ```
 
 If you want to set an option gloablly (to apply for all color pickers), use:
@@ -90,6 +96,7 @@ Let us know how you are using Really Simple Color Picker...
 
 * Lakshan Perera - http://laktek.com
 * Daniel Lacy  - http://daniellacy.com
+* Ross Brown - http://rossisbrown.com
 
 ### Issues & Suggestions
 

demo.html

@@ -7,19 +7,44 @@
 
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script language="javascript" type="text/javascript" src="jquery.colorPicker.js"/></script>
+<script language="javascript" type="text/javascript" src="jquery.colorPicker.min.js"/></script>
 
 <script type="text/javascript">
   //Run the code when document ready
   $(function() {    
    //use this method to add new colors to pallete
    //$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
+
+  var colors = [
+    "cb3398",
+    "cc0001",
+    "fe6500",
+    "32ccfe",
+    "fe98ca",
+    "ffcc00",
+    "000000",
+    "c2aeeb",
+    "006500"
+  ]
+
+  var namedColors = [
+      {name: "Hot Pink", hex: "cb3398"},
+      {name: "Red", hex: "cc0001"},
+      {name: "Orange", hex: "fe6500"},
+      {name: "Powder", hex: "32ccfe"},
+      {name: "Soft Pink", hex: "fe98ca"},
+      {name: "Navy Blue", hex: "010066"},
+      {name: "Yellow", hex: "ffcc00"},
+      {name: "Black", hex: "000000"},
+      {name: "Purple", hex: "c2aeeb"},
+      {name: "Green", hex: "006500"}
+  ]   
 
    $('#color1').colorPicker();
 
-   $('#color2').colorPicker();
+   $('#color2').colorPicker({pickerDefault: "ffffff", colors: colors});
 
-   $('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true}); 
+   $('#color3').colorPicker({pickerDefault: "ffffff", colors: namedColors, transparency: true}); 
 
    //fires an event when the color is changed
    //$('#color1').change(function(){

jquery.colorPicker.js

@@ -39,7 +39,7 @@
             hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
             hexField: $('<input type="text" id="colorPicker_hex" />')
         },
-        transparent     = "transparent",
+        transparent     = "#transparent",
         lastColor;
 
     /**
@@ -65,17 +65,27 @@
             /**
              * Build a color palette.
             **/
-            $.each(opts.colors, function (i) {
+            $.each(opts.colors, function (i, option) {
                 swatch = templates.swatch.clone();
-
-                if (opts.colors[i] === transparent) {
+                if (typeof option === 'object') {
+                    var color = {
+                        name: option.name,
+                        hex: "#" + option.hex
+                    }
+                } else {
+                    var color = {
+                        name: "#" + option,
+                        hex: "#" + option
+                    }
+                }
+                if (color.hex === transparent) {
                     swatch.addClass(transparent).text('X');
                     $.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
                 } else {
-                    swatch.css("background-color", "#" + this);
-                    $.fn.colorPicker.bindPalette(newHexField, swatch);
+                    swatch.css("background-color", color.hex);
+                    $.fn.colorPicker.bindPalette(newHexField, swatch, color);
                 }
-                swatch.appendTo(newPalette);
+                swatch.appendTo(newPalette);                
             });
 
             newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
@@ -244,13 +254,14 @@
         /**
          * Update the input with a newly selected color.
         **/
-        changeColor : function (value) {
-            selectorOwner.css("background-color", value);
-            selectorOwner.prev("input").val(value).change();
+        changeColor : function (color) {
+            selectorOwner.css("background-color", color.hex);
+            selectorOwner.prev("input").val(color.hex).change();
 
             $.fn.colorPicker.hidePalette();
 
-            selectorOwner.data('onColorChange').call(selectorOwner, $(selectorOwner).prev("input").attr("id"), value);
+            selectorOwner.data('onColorChange').call(selectorOwner, $(selectorOwner).prev("input").attr("id"), color.hex.replace('#',''), color.name);
+            selectorOwner.data('selected-color', color);
         },
 
 
@@ -265,31 +276,31 @@
          * Bind events to the color palette swatches.
         */
         bindPalette : function (paletteInput, element, color) {
-            color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
-
+            // color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
             element.bind({
                 click : function (ev) {
                     lastColor = color;
 
                     $.fn.colorPicker.changeColor(color);
                 },
                 mouseover : function (ev) {
-                    lastColor = paletteInput.val();
+                    selectedColor = selectorOwner.data('selected-color')
+                    lastColor = selectedColor ? selectedColor : paletteInput.val();
 
                     $(this).css("border-color", "#598FEF");
 
-                    paletteInput.val(color);
+                    paletteInput.val(color.name);
 
-                    $.fn.colorPicker.previewColor(color);
+                    $.fn.colorPicker.previewColor(color.hex);
                 },
                 mouseout : function (ev) {
                     $(this).css("border-color", "#000");
 
                     paletteInput.val(selectorOwner.css("background-color"));
 
-                    paletteInput.val(lastColor);
+                    paletteInput.val(lastColor.name ? lastColor.name : "#" + $.fn.colorPicker.defaults.pickerDefault);
 
-                    $.fn.colorPicker.previewColor(lastColor);
+                    $.fn.colorPicker.previewColor(lastColor.hex ? lastColor.hex : "#" + $.fn.colorPicker.defaults.pickerDefault);
                 }
             });
         }