Permalink
Browse files

Fix for #75: support array of swatches.

Specify swatches as an array of {name: '000000', r: 0, g: 0, b: 0}.
  • Loading branch information...
Pablo Gra\~na
Pablo Gra\~na committed Feb 20, 2014
1 parent e97f18f commit 9e34b917cdf0117ad173492a073273610c76c5dd
Showing with 64 additions and 11 deletions.
  1. +46 −1 demo.html
  2. +18 −10 jquery.colorpicker.js
View
@@ -48,6 +48,7 @@ <h1>jQuery ColorPicker - Demo page</h1>
<li><a href="#tab-no-inline">Any element to popup</a></li>
<li><a href="#tab-layout">Custom layout</a></li>
<li><a href="#tab-pantone">Custom swatches</a></li>
+ <li><a href="#tab-swatches-array">Custom swatches - array</a></li>
<li><a href="#tab-hidden-input">Hidden input</a></li>
<li><a href="#tab-plugins">Plugins</a></li>
<li><a href="#tab-buttonImageOnly">buttonImageOnly</a></li>
@@ -352,6 +353,50 @@ <h2>Custom swatches</h2>
</script>
</div>
+ <div id="tab-swatches-array">
+ <h2>Custom swatches - array</h2>
+ Use an array of swatches<br/>
+ <input type="text" class="cp-custom-array" value="666666"/>
+ <span class="cp-custom-array-output"></span>
+
+ <script>
+ $(function() {
+ /** Correctly handles the order of swatches.
+ */
+ jQuery.colorpicker.swatches.custom_array = [
+ {name: '000000', r: 0, g: 0, b: 0},
+ {name: '444444', r: 0.266666666666667, g: 0.266666666666667, b:
+ 0.266666666666667},
+ {name: '666666', r: 0.4, g: 0.4, b: 0.4},
+ {name: '999999', r: 0.6, g: 0.6, b: 0.6}
+ ];
+ /** This is supported, but does not respect the order in chrome.
+ Black appears at the end of the list of swatches. */
+ jQuery.colorpicker.swatches.custom = {
+ '000000': {r: 0, g: 0, b: 0},
+ '444444': {r: 0.266666666666667, g: 0.266666666666667, b:
+ 0.266666666666667},
+ '666666': {r: 0.4, g: 0.4, b: 0.4},
+ '999999': {r: 0.6, g: 0.6, b: 0.6}
+ };
+
+ $('.cp-custom-array').colorpicker({
+ parts: 'full',
+ swatches: 'custom_array',
+ colorFormat: 'NAME',
+ swatchesWidth: 173,
+ limit: 'name',
+ init: function(event, color) {
+ $('.cp-custom-array-output').text(color.formatted);
+ },
+ select: function(event, color) {
+ $('.cp-custom-array-output').text(color.formatted);
+ }
+ });
+ });
+ </script>
+ </div>
+
<div id="tab-hidden-input">
<h2>Hidden input</h2>
Uses a hidden input and buttons to pop open the colorpicker<br/>
@@ -492,4 +537,4 @@ <h2>Custom color format</h2>
</div>
</div>
</body>
-</html>
+</html>
View
@@ -1318,7 +1318,7 @@
html = function () {
var html = '';
- $.each(inst._getSwatches(), function (name, color) {
+ inst._eachSwatch(function (name, color) {
var c = new $.colorpicker.Color(color.r, color.g, color.b),
css = c.toCSS();
html += '<div class="ui-colorpicker-swatch" style="background-color:' + css + '" title="' + name + '"></div>';
@@ -2622,15 +2622,23 @@
return $.colorpicker.swatches.html;
},
- _getSwatch: function(name) {
- var swatches = this._getSwatches(),
- swatch = false;
+ _eachSwatch: function (callback) {
+ var currentSwatches = this._getSwatches();
+ var name;
+ $.each(currentSwatches, function (nameOrIndex, swatch) {
+ if ($.isArray(currentSwatches)) {
+ name = swatch.name;
+ } else {
+ name = nameOrIndex;
+ }
+ callback(name, swatch);
+ });
+ },
- if (swatches[name] !== undefined) {
- return swatches[name];
- }
+ _getSwatch: function(name) {
+ var swatch = false;
- $.each(swatches, function(swatchName, current) {
+ this._eachSwatch(function(swatchName, current) {
if (swatchName.toLowerCase() == name.toLowerCase()) {
swatch = current;
return false;
@@ -2662,7 +2670,7 @@
_exactName: function(color) {
var name = false;
- $.each(this._getSwatches(), function(n, swatch) {
+ this._eachSwatch(function(n, swatch) {
if (color.equals(new $.colorpicker.Color(swatch.r, swatch.g, swatch.b))) {
name = n;
return false;
@@ -2679,7 +2687,7 @@
name = false,
d;
- $.each(this._getSwatches(), function(n, swatch) {
+ this._eachSwatch(function(n, swatch) {
d = color.distance(new $.colorpicker.Color(swatch.r, swatch.g, swatch.b));
if (d < distance || distance === null) {
name = n;

0 comments on commit 9e34b91

Please sign in to comment.