Permalink
Browse files

colorFormat array.

HEX3 format returns false if nibbles different.
Fix _exactName.
  • Loading branch information...
Martijn
Martijn committed Jul 3, 2012
1 parent 5267894 commit 9cb8611b2bd50d84d3acefc8c6c213243503981d
Showing with 66 additions and 37 deletions.
  1. +11 −2 README
  2. +0 −2 TODO
  3. +2 −3 index.html
  4. +53 −30 jquery.colorpicker.js
View
13 README
@@ -1,4 +1,4 @@
-jQuery.colorpicker v0.9.1
+jQuery.colorpicker v0.9.2
Copyright (c) 2011-2012 Martijn W. van der Lee
Licensed under the MIT.
@@ -69,12 +69,13 @@ Options:
Specifies the format of the color string returned in callbacks.
You can either specify one of the predefined formats:
HEX #123456
- HEX3 #135 (rounds colors)
+ HEX3 #135 if possible, otherwise false.
RGBA rgb(123,45,67) or rgba(123,45,67,0.123%)
RGBA% rgb(12%,34%,56%) or rgba(12%,34%,56%,0.123%)
HSLA hsl(123,45,67) or hsla(123,45,67,0.123%)
HSLA% hsl(12%,34%,56%) or hsla(12%,34%,56%,0.123%)
NAME Closest color name
+ EXACT Exact name if possible, otherwise false.
or specify your own format...
Each color channel is specified as a pair of two characters.
The first character determines the color channel:
@@ -89,6 +90,12 @@ Options:
For example, to create the common hex color format, use "#rxgxbx".
For an rgba() format, use "rgba(rd,gd,bd,af)"
+ You can also specify an array of formats where the first non-FALSE one
+ is returned. Note that the only formats able to return FALSE are the
+ predefined formats HEX3 and EXACT. For example, this array will output
+ HEX3 format if possible or HEX format otherwise:
+ ['HEX3', 'HEX']
+
dragggable: true
Make the dialog draggable if the header is visible and the dialog is
not inline.
@@ -183,6 +190,8 @@ Events:
Callbacks recieve same data as select event and an additional number
of fields containing the current color in all supported color spaces.
These are rgb{}, hsv{}, cmyk{}, lab{}, hsl{} and a.
+ Most values are floating point numbers in range [0,1] for accuracy.
+ The a and b values in the lab color space have range [-1,1].
select: null
Triggered on each change, confirmation (click on OK button) and
View
2 TODO
@@ -6,12 +6,10 @@ Special rendering mode for color_none? Use [X] images?
Fix parsing from input with websafe colors
Recognize "transparent" color name.
Limit number of events triggered.
-Output format array for fallbacks? ie. NAME, HEX, RGBA.
Small size variant (128x128)
isRTL? What to RTL, besides button?
Undo/redo memory?
ARIA support.
Allow only set (dec/hex) characters in inputs
Most-recently-used swatches
-Close callback color model output; scale values to UI ranges?
HSL/HSV distance calculations should take into account cyclic hue.
View
@@ -144,14 +144,13 @@
<hr/>
- Output format/limit name: <input type="text" class="cp-name" value="a92fb4"/>
+ Output format list: <input type="text" class="cp-name" value="a92fb4"/>
<span class="cp-name-output"></span>
<script>
$( function() {
$('.cp-name').colorpicker({
parts: 'full',
- limit: 'name',
- colorFormat: 'NAME',
+ colorFormat: ['EXACT', 'HEX3', 'RGBA'],
init: function(event, color) {
$('.cp-name-output').text(color.formatted);
},
View
@@ -71,10 +71,17 @@
}
, 'HEX3': function(color) {
var rgb = color.getRGB();
- var r = Math.round(rgb.r * 16);
- var g = Math.round(rgb.g * 16);
- var b = Math.round(rgb.b * 16);
- return '#'+r.toString(16)+g.toString(16)+b.toString(16);
+
+ var r = Math.round(rgb.r * 255);
+ var g = Math.round(rgb.g * 255);
+ var b = Math.round(rgb.b * 255);
+
+ if (((r >>> 4) == (r &= 0xf))
+ && ((g >>> 4) == (g &= 0xf))
+ && ((b >>> 4) == (b &= 0xf))) {
+ return '#'+r.toString(16)+g.toString(16)+b.toString(16);
+ }
+ return false;
}
, 'RGBA': function(color) {
return _formatColor(color.getAlpha() >= 1
@@ -99,33 +106,42 @@
, 'NAME': function(color) {
return _closestName(color);
}
- , '_EXACT': function(color) { //@todo experimental. Implement a good fallback list
- return _exactName(COLOR);
+ , 'EXACT': function(color) { //@todo experimental. Implement a good fallback list
+ return _exactName(color);
}
},
- _formatColor = function (format, color) {
- var that = this;
-
- var types = {
- 'x': function(v) {return _intToHex(v * 255);}
- , 'd': function(v) {return Math.round(v * 255);}
- , 'f': function(v) {return v;}
- , 'p': function(v) {return v * 100;}
- };
-
- if (_formats[format]) {
- return _formats[format](color);
+ _formatColor = function (formats, color) {
+ var that = this,
+ text = null,
+ types = { 'x': function(v) {return _intToHex(v * 255);}
+ , 'd': function(v) {return Math.round(v * 255);}
+ , 'f': function(v) {return v;}
+ , 'p': function(v) {return v * 100;}
+ },
+ channels = color.getChannels();
+
+ if (!$.isArray(formats)) {
+ formats = [formats];
}
- var channels = color.getChannels();
-
- return format.replace(/\\?[rgbhsva][xdfp]/g, function(m) {
- if (m.match(/^\\/)) {
- return m.slice(1);
+ $.each(formats, function(index, format) {
+ if (_formats[format]) {
+ text = _formats[format](color);
+//console.debug(format, text);
+ return (text === false);
+ } else {
+ text = format.replace(/\\?[rgbhsva][xdfp]/g, function(m) {
+ if (m.match(/^\\/)) {
+ return m.slice(1);
+ }
+ return types[m[1]](channels[m[0]]);
+ });
+ return false;
}
- return types[m[1]](channels[m[0]]);
});
+
+ return text;
},
_colors = {
@@ -272,20 +288,23 @@
},
_exactName = function(color) {
- $.each(_colors, function(name, color_b) {
+ var name = false;
+
+ $.each(_colors, function(n, color_b) {
if (color.equals(new Color(color_b.r, color_b.g, color_b.b))) {
- return name;
+ name = n;
+ return false;
}
});
- return false;
+ return name;
},
_closestName = function(color) {
var rgb = color.getRGB();
var distance = null;
- var name = '';
+ var name = false;
$.each(_colors, function(n, color_b) {
var d = color.distance(new Color(color_b.r, color_b.g, color_b.b));
@@ -2269,13 +2288,17 @@
formatted: _formatColor(that.options.colorFormat, that.color)
};
+ var lab = that.color.getLAB();
+ lab.a = (lab.a * 2) - 1;
+ lab.b = (lab.b * 2) - 1;
+
if (spaces === true) {
data.a = that.color.getAlpha();
data.rgb = that.color.getRGB();
data.hsv = that.color.getHSV();
data.cmyk = that.color.getCMYK();
data.hsl = that.color.getHSL();
- data.lab = that.color.getLAB();
+ data.lab = lab;
}
return that._trigger(callback, null, data);
@@ -2379,4 +2402,4 @@
}
});
-}(jQuery));
+}(jQuery));

0 comments on commit 9cb8611

Please sign in to comment.