| 9 |
lars |
1 |
/*jslint devel: true, bitwise: true, regexp: true, browser: true, confusion: true, unparam: true, eqeq: true, white: true, nomen: true, plusplus: true, maxerr: 50, indent: 4 */
|
|
|
2 |
/*globals jQuery,Color */
|
|
|
3 |
|
|
|
4 |
/*
|
|
|
5 |
* ColorPicker
|
|
|
6 |
*
|
|
|
7 |
* Copyright (c) 2011-2012 Martijn W. van der Lee
|
|
|
8 |
* Licensed under the MIT.
|
|
|
9 |
*
|
|
|
10 |
* Full-featured colorpicker for jQueryUI with full theming support.
|
|
|
11 |
* Most images from jPicker by Christopher T. Tillman.
|
|
|
12 |
* Sourcecode created from scratch by Martijn W. van der Lee.
|
|
|
13 |
*/
|
|
|
14 |
|
|
|
15 |
(function ($) {
|
|
|
16 |
"use strict";
|
|
|
17 |
|
|
|
18 |
$.colorpicker = new function() {
|
|
|
19 |
this.regional = [];
|
|
|
20 |
this.regional[''] = {
|
|
|
21 |
ok: 'OK',
|
|
|
22 |
cancel: 'Cancel',
|
|
|
23 |
none: 'None',
|
|
|
24 |
button: 'Color',
|
|
|
25 |
title: 'Pick a color',
|
|
|
26 |
transparent: 'Transparent',
|
|
|
27 |
hsvH: 'H',
|
|
|
28 |
hsvS: 'S',
|
|
|
29 |
hsvV: 'V',
|
|
|
30 |
rgbR: 'R',
|
|
|
31 |
rgbG: 'G',
|
|
|
32 |
rgbB: 'B',
|
|
|
33 |
labL: 'L',
|
|
|
34 |
labA: 'a',
|
|
|
35 |
labB: 'b',
|
|
|
36 |
hslH: 'H',
|
|
|
37 |
hslS: 'S',
|
|
|
38 |
hslL: 'L',
|
|
|
39 |
cmykC: 'C',
|
|
|
40 |
cmykM: 'M',
|
|
|
41 |
cmykY: 'Y',
|
|
|
42 |
cmykK: 'K',
|
|
|
43 |
alphaA: 'A'
|
|
|
44 |
};
|
|
|
45 |
};
|
|
|
46 |
|
|
|
47 |
var _colorpicker_index = 0,
|
|
|
48 |
|
|
|
49 |
_container_popup = '<div class="ui-colorpicker ui-colorpicker-dialog ui-dialog ui-widget ui-widget-content ui-corner-all" style="display: none;"></div>',
|
|
|
50 |
|
|
|
51 |
_container_inline = '<div class="ui-colorpicker ui-colorpicker-inline ui-dialog ui-widget ui-widget-content ui-corner-all"></div>',
|
|
|
52 |
|
|
|
53 |
_parts_lists = {
|
|
|
54 |
'full': ['header', 'map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'lab', 'cmyk', 'preview', 'swatches', 'footer'],
|
|
|
55 |
'popup': ['map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview', 'footer'],
|
|
|
56 |
'draggable': ['header', 'map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview', 'footer'],
|
|
|
57 |
'inline': ['map', 'bar', 'hex', 'hsv', 'rgb', 'alpha', 'preview']
|
|
|
58 |
},
|
|
|
59 |
|
|
|
60 |
_intToHex = function (dec) {
|
|
|
61 |
var result = Math.round(dec).toString(16);
|
|
|
62 |
if (result.length === 1) {
|
|
|
63 |
result = ('0' + result);
|
|
|
64 |
}
|
|
|
65 |
return result.toLowerCase();
|
|
|
66 |
},
|
|
|
67 |
|
|
|
68 |
_formats = {
|
|
|
69 |
'#HEX': function(color) {
|
|
|
70 |
return _formatColor('#rxgxbx', color);
|
|
|
71 |
}
|
|
|
72 |
, '#HEX3': function(color) {
|
|
|
73 |
var hex3 = _formats.HEX3(color);
|
|
|
74 |
return hex3 === false? false : '#'+hex3;
|
|
|
75 |
}
|
|
|
76 |
, 'HEX': function(color) {
|
|
|
77 |
return _formatColor('rxgxbx', color);
|
|
|
78 |
}
|
|
|
79 |
, 'HEX3': function(color) {
|
|
|
80 |
var rgb = color.getRGB(),
|
|
|
81 |
r = Math.round(rgb.r * 255),
|
|
|
82 |
g = Math.round(rgb.g * 255),
|
|
|
83 |
b = Math.round(rgb.b * 255);
|
|
|
84 |
|
|
|
85 |
if (((r >>> 4) == (r &= 0xf))
|
|
|
86 |
&& ((g >>> 4) == (g &= 0xf))
|
|
|
87 |
&& ((b >>> 4) == (b &= 0xf))) {
|
|
|
88 |
return r.toString(16)+g.toString(16)+b.toString(16);
|
|
|
89 |
}
|
|
|
90 |
return false;
|
|
|
91 |
}
|
|
|
92 |
, 'RGB': function(color) {
|
|
|
93 |
return color.getAlpha() >= 1
|
|
|
94 |
? _formatColor('rgb(rd,gd,bd)', color)
|
|
|
95 |
: false;
|
|
|
96 |
}
|
|
|
97 |
, 'RGBA': function(color) {
|
|
|
98 |
return _formatColor('rgba(rd,gd,bd,af)', color);
|
|
|
99 |
}
|
|
|
100 |
, 'RGB%': function(color) {
|
|
|
101 |
return color.getAlpha() >= 1
|
|
|
102 |
? _formatColor('rgb(rp%,gp%,bp%)', color)
|
|
|
103 |
: false;
|
|
|
104 |
}
|
|
|
105 |
, 'RGBA%': function(color) {
|
|
|
106 |
return _formatColor('rgba(rp%,gp%,bp%,af)', color);
|
|
|
107 |
}
|
|
|
108 |
, 'HSL': function(color) {
|
|
|
109 |
return color.getAlpha() >= 1
|
|
|
110 |
? _formatColor('hsl(hd,sd,vd)', color)
|
|
|
111 |
: false;
|
|
|
112 |
}
|
|
|
113 |
, 'HSLA': function(color) {
|
|
|
114 |
return _formatColor('hsla(hd,sd,vd,af)', color);
|
|
|
115 |
}
|
|
|
116 |
, 'HSL%': function(color) {
|
|
|
117 |
return color.getAlpha() >= 1
|
|
|
118 |
? _formatColor('hsl(hp%,sp%,vp%)', color)
|
|
|
119 |
: false;
|
|
|
120 |
}
|
|
|
121 |
, 'HSLA%': function(color) {
|
|
|
122 |
return _formatColor('hsla(hp%,sp%,vp%,af)', color);
|
|
|
123 |
}
|
|
|
124 |
, 'NAME': function(color) {
|
|
|
125 |
return _closestName(color);
|
|
|
126 |
}
|
|
|
127 |
, 'EXACT': function(color) { //@todo experimental. Implement a good fallback list
|
|
|
128 |
return _exactName(color);
|
|
|
129 |
}
|
|
|
130 |
},
|
|
|
131 |
|
|
|
132 |
_formatColor = function (formats, color) {
|
|
|
133 |
var that = this,
|
|
|
134 |
text = null,
|
|
|
135 |
types = { 'x': function(v) {return _intToHex(v * 255);}
|
|
|
136 |
, 'd': function(v) {return Math.round(v * 255);}
|
|
|
137 |
, 'f': function(v) {return v;}
|
|
|
138 |
, 'p': function(v) {return v * 100;}
|
|
|
139 |
},
|
|
|
140 |
channels = color.getChannels();
|
|
|
141 |
|
|
|
142 |
if (!$.isArray(formats)) {
|
|
|
143 |
formats = [formats];
|
|
|
144 |
}
|
|
|
145 |
|
|
|
146 |
$.each(formats, function(index, format) {
|
|
|
147 |
if (_formats[format]) {
|
|
|
148 |
text = _formats[format](color);
|
|
|
149 |
return (text === false);
|
|
|
150 |
} else {
|
|
|
151 |
text = format.replace(/\\?[argbhsvcmykLAB][xdfp]/g, function(m) {
|
|
|
152 |
if (m.match(/^\\/)) {
|
|
|
153 |
return m.slice(1);
|
|
|
154 |
}
|
|
|
155 |
return types[m.charAt(1)](channels[m.charAt(0)]);
|
|
|
156 |
});
|
|
|
157 |
return false;
|
|
|
158 |
}
|
|
|
159 |
});
|
|
|
160 |
|
|
|
161 |
return text;
|
|
|
162 |
},
|
|
|
163 |
|
|
|
164 |
_colors = {
|
|
|
165 |
'black': {r: 0, g: 0, b: 0},
|
|
|
166 |
'dimgray': {r: 0.4117647058823529, g: 0.4117647058823529, b: 0.4117647058823529},
|
|
|
167 |
'gray': {r: 0.5019607843137255, g: 0.5019607843137255, b: 0.5019607843137255},
|
|
|
168 |
'darkgray': {r: 0.6627450980392157, g: 0.6627450980392157, b: 0.6627450980392157},
|
|
|
169 |
'silver': {r: 0.7529411764705882, g: 0.7529411764705882, b: 0.7529411764705882},
|
|
|
170 |
'lightgrey': {r: 0.8274509803921568, g: 0.8274509803921568, b: 0.8274509803921568},
|
|
|
171 |
'gainsboro': {r: 0.8627450980392157, g: 0.8627450980392157, b: 0.8627450980392157},
|
|
|
172 |
'whitesmoke': {r: 0.9607843137254902, g: 0.9607843137254902, b: 0.9607843137254902},
|
|
|
173 |
'white': {r: 1, g: 1, b: 1},
|
|
|
174 |
'rosybrown': {r: 0.7372549019607844, g: 0.5607843137254902, b: 0.5607843137254902},
|
|
|
175 |
'indianred': {r: 0.803921568627451, g: 0.3607843137254902, b: 0.3607843137254902},
|
|
|
176 |
'brown': {r: 0.6470588235294118, g: 0.16470588235294117, b: 0.16470588235294117},
|
|
|
177 |
'firebrick': {r: 0.6980392156862745, g: 0.13333333333333333, b: 0.13333333333333333},
|
|
|
178 |
'lightcoral': {r: 0.9411764705882353, g: 0.5019607843137255, b: 0.5019607843137255},
|
|
|
179 |
'maroon': {r: 0.5019607843137255, g: 0, b: 0},
|
|
|
180 |
'darkred': {r: 0.5450980392156862, g: 0, b: 0},
|
|
|
181 |
'red': {r: 1, g: 0, b: 0},
|
|
|
182 |
'snow': {r: 1, g: 0.9803921568627451, b: 0.9803921568627451},
|
|
|
183 |
'salmon': {r: 0.9803921568627451, g: 0.5019607843137255, b: 0.4470588235294118},
|
|
|
184 |
'mistyrose': {r: 1, g: 0.8941176470588236, b: 0.8823529411764706},
|
|
|
185 |
'tomato': {r: 1, g: 0.38823529411764707, b: 0.2784313725490196},
|
|
|
186 |
'darksalmon': {r: 0.9137254901960784, g: 0.5882352941176471, b: 0.47843137254901963},
|
|
|
187 |
'orangered': {r: 1, g: 0.27058823529411763, b: 0},
|
|
|
188 |
'coral': {r: 1, g: 0.4980392156862745, b: 0.3137254901960784},
|
|
|
189 |
'lightsalmon': {r: 1, g: 0.6274509803921569, b: 0.47843137254901963},
|
|
|
190 |
'sienna': {r: 0.6274509803921569, g: 0.3215686274509804, b: 0.17647058823529413},
|
|
|
191 |
'seashell': {r: 1, g: 0.9607843137254902, b: 0.9333333333333333},
|
|
|
192 |
'chocolate': {r: 0.8235294117647058, g: 0.4117647058823529, b: 0.11764705882352941},
|
|
|
193 |
'saddlebrown': {r: 0.5450980392156862, g: 0.27058823529411763, b: 0.07450980392156863},
|
|
|
194 |
'sandybrown': {r: 0.9568627450980393, g: 0.6431372549019608, b: 0.3764705882352941},
|
|
|
195 |
'peachpuff': {r: 1, g: 0.8549019607843137, b: 0.7254901960784313},
|
|
|
196 |
'peru': {r: 0.803921568627451, g: 0.5215686274509804, b: 0.24705882352941178},
|
|
|
197 |
'linen': {r: 0.9803921568627451, g: 0.9411764705882353, b: 0.9019607843137255},
|
|
|
198 |
'darkorange': {r: 1, g: 0.5490196078431373, b: 0},
|
|
|
199 |
'bisque': {r: 1, g: 0.8941176470588236, b: 0.7686274509803922},
|
|
|
200 |
'burlywood': {r: 0.8705882352941177, g: 0.7215686274509804, b: 0.5294117647058824},
|
|
|
201 |
'tan': {r: 0.8235294117647058, g: 0.7058823529411765, b: 0.5490196078431373},
|
|
|
202 |
'antiquewhite': {r: 0.9803921568627451, g: 0.9215686274509803, b: 0.8431372549019608},
|
|
|
203 |
'navajowhite': {r: 1, g: 0.8705882352941177, b: 0.6784313725490196},
|
|
|
204 |
'blanchedalmond': {r: 1, g: 0.9215686274509803, b: 0.803921568627451},
|
|
|
205 |
'papayawhip': {r: 1, g: 0.9372549019607843, b: 0.8352941176470589},
|
|
|
206 |
'orange': {r: 1, g: 0.6470588235294118, b: 0},
|
|
|
207 |
'moccasin': {r: 1, g: 0.8941176470588236, b: 0.7098039215686275},
|
|
|
208 |
'wheat': {r: 0.9607843137254902, g: 0.8705882352941177, b: 0.7019607843137254},
|
|
|
209 |
'oldlace': {r: 0.9921568627450981, g: 0.9607843137254902, b: 0.9019607843137255},
|
|
|
210 |
'floralwhite': {r: 1, g: 0.9803921568627451, b: 0.9411764705882353},
|
|
|
211 |
'goldenrod': {r: 0.8549019607843137, g: 0.6470588235294118, b: 0.12549019607843137},
|
|
|
212 |
'darkgoldenrod': {r: 0.7215686274509804, g: 0.5254901960784314, b: 0.043137254901960784},
|
|
|
213 |
'cornsilk': {r: 1, g: 0.9725490196078431, b: 0.8627450980392157},
|
|
|
214 |
'gold': {r: 1, g: 0.8431372549019608, b: 0},
|
|
|
215 |
'palegoldenrod': {r: 0.9333333333333333, g: 0.9098039215686274, b: 0.6666666666666666},
|
|
|
216 |
'khaki': {r: 0.9411764705882353, g: 0.9019607843137255, b: 0.5490196078431373},
|
|
|
217 |
'lemonchiffon': {r: 1, g: 0.9803921568627451, b: 0.803921568627451},
|
|
|
218 |
'darkkhaki': {r: 0.7411764705882353, g: 0.7176470588235294, b: 0.4196078431372549},
|
|
|
219 |
'beige': {r: 0.9607843137254902, g: 0.9607843137254902, b: 0.8627450980392157},
|
|
|
220 |
'lightgoldenrodyellow': {r: 0.9803921568627451, g: 0.9803921568627451, b: 0.8235294117647058},
|
|
|
221 |
'olive': {r: 0.5019607843137255, g: 0.5019607843137255, b: 0},
|
|
|
222 |
'yellow': {r: 1, g: 1, b: 0},
|
|
|
223 |
'lightyellow': {r: 1, g: 1, b: 0.8784313725490196},
|
|
|
224 |
'ivory': {r: 1, g: 1, b: 0.9411764705882353},
|
|
|
225 |
'olivedrab': {r: 0.4196078431372549, g: 0.5568627450980392, b: 0.13725490196078433},
|
|
|
226 |
'yellowgreen': {r: 0.6039215686274509, g: 0.803921568627451, b: 0.19607843137254902},
|
|
|
227 |
'darkolivegreen': {r: 0.3333333333333333, g: 0.4196078431372549, b: 0.1843137254901961},
|
|
|
228 |
'greenyellow': {r: 0.6784313725490196, g: 1, b: 0.1843137254901961},
|
|
|
229 |
'lawngreen': {r: 0.48627450980392156, g: 0.9882352941176471, b: 0},
|
|
|
230 |
'chartreuse': {r: 0.4980392156862745, g: 1, b: 0},
|
|
|
231 |
'darkseagreen': {r: 0.5607843137254902, g: 0.7372549019607844, b: 0.5607843137254902},
|
|
|
232 |
'forestgreen': {r: 0.13333333333333333, g: 0.5450980392156862, b: 0.13333333333333333},
|
|
|
233 |
'limegreen': {r: 0.19607843137254902, g: 0.803921568627451, b: 0.19607843137254902},
|
|
|
234 |
'lightgreen': {r: 0.5647058823529412, g: 0.9333333333333333, b: 0.5647058823529412},
|
|
|
235 |
'palegreen': {r: 0.596078431372549, g: 0.984313725490196, b: 0.596078431372549},
|
|
|
236 |
'darkgreen': {r: 0, g: 0.39215686274509803, b: 0},
|
|
|
237 |
'green': {r: 0, g: 0.5019607843137255, b: 0},
|
|
|
238 |
'lime': {r: 0, g: 1, b: 0},
|
|
|
239 |
'honeydew': {r: 0.9411764705882353, g: 1, b: 0.9411764705882353},
|
|
|
240 |
'mediumseagreen': {r: 0.23529411764705882, g: 0.7019607843137254, b: 0.44313725490196076},
|
|
|
241 |
'seagreen': {r: 0.1803921568627451, g: 0.5450980392156862, b: 0.3411764705882353},
|
|
|
242 |
'springgreen': {r: 0, g: 1, b: 0.4980392156862745},
|
|
|
243 |
'mintcream': {r: 0.9607843137254902, g: 1, b: 0.9803921568627451},
|
|
|
244 |
'mediumspringgreen': {r: 0, g: 0.9803921568627451, b: 0.6039215686274509},
|
|
|
245 |
'mediumaquamarine': {r: 0.4, g: 0.803921568627451, b: 0.6666666666666666},
|
|
|
246 |
'aquamarine': {r: 0.4980392156862745, g: 1, b: 0.8313725490196079},
|
|
|
247 |
'turquoise': {r: 0.25098039215686274, g: 0.8784313725490196, b: 0.8156862745098039},
|
|
|
248 |
'lightseagreen': {r: 0.12549019607843137, g: 0.6980392156862745, b: 0.6666666666666666},
|
|
|
249 |
'mediumturquoise': {r: 0.2823529411764706, g: 0.8196078431372549, b: 0.8},
|
|
|
250 |
'darkslategray': {r: 0.1843137254901961, g: 0.30980392156862746, b: 0.30980392156862746},
|
|
|
251 |
'paleturquoise': {r: 0.6862745098039216, g: 0.9333333333333333, b: 0.9333333333333333},
|
|
|
252 |
'teal': {r: 0, g: 0.5019607843137255, b: 0.5019607843137255},
|
|
|
253 |
'darkcyan': {r: 0, g: 0.5450980392156862, b: 0.5450980392156862},
|
|
|
254 |
'darkturquoise': {r: 0, g: 0.807843137254902, b: 0.8196078431372549},
|
|
|
255 |
'aqua': {r: 0, g: 1, b: 1},
|
|
|
256 |
'cyan': {r: 0, g: 1, b: 1},
|
|
|
257 |
'lightcyan': {r: 0.8784313725490196, g: 1, b: 1},
|
|
|
258 |
'azure': {r: 0.9411764705882353, g: 1, b: 1},
|
|
|
259 |
'cadetblue': {r: 0.37254901960784315, g: 0.6196078431372549, b: 0.6274509803921569},
|
|
|
260 |
'powderblue': {r: 0.6901960784313725, g: 0.8784313725490196, b: 0.9019607843137255},
|
|
|
261 |
'lightblue': {r: 0.6784313725490196, g: 0.8470588235294118, b: 0.9019607843137255},
|
|
|
262 |
'deepskyblue': {r: 0, g: 0.7490196078431373, b: 1},
|
|
|
263 |
'skyblue': {r: 0.5294117647058824, g: 0.807843137254902, b: 0.9215686274509803},
|
|
|
264 |
'lightskyblue': {r: 0.5294117647058824, g: 0.807843137254902, b: 0.9803921568627451},
|
|
|
265 |
'steelblue': {r: 0.27450980392156865, g: 0.5098039215686274, b: 0.7058823529411765},
|
|
|
266 |
'aliceblue': {r: 0.9411764705882353, g: 0.9725490196078431, b: 1},
|
|
|
267 |
'dodgerblue': {r: 0.11764705882352941, g: 0.5647058823529412, b: 1},
|
|
|
268 |
'slategray': {r: 0.4392156862745098, g: 0.5019607843137255, b: 0.5647058823529412},
|
|
|
269 |
'lightslategray': {r: 0.4666666666666667, g: 0.5333333333333333, b: 0.6},
|
|
|
270 |
'lightsteelblue': {r: 0.6901960784313725, g: 0.7686274509803922, b: 0.8705882352941177},
|
|
|
271 |
'cornflowerblue': {r: 0.39215686274509803, g: 0.5843137254901961, b: 0.9294117647058824},
|
|
|
272 |
'royalblue': {r: 0.2549019607843137, g: 0.4117647058823529, b: 0.8823529411764706},
|
|
|
273 |
'midnightblue': {r: 0.09803921568627451, g: 0.09803921568627451, b: 0.4392156862745098},
|
|
|
274 |
'lavender': {r: 0.9019607843137255, g: 0.9019607843137255, b: 0.9803921568627451},
|
|
|
275 |
'navy': {r: 0, g: 0, b: 0.5019607843137255},
|
|
|
276 |
'darkblue': {r: 0, g: 0, b: 0.5450980392156862},
|
|
|
277 |
'mediumblue': {r: 0, g: 0, b: 0.803921568627451},
|
|
|
278 |
'blue': {r: 0, g: 0, b: 1},
|
|
|
279 |
'ghostwhite': {r: 0.9725490196078431, g: 0.9725490196078431, b: 1},
|
|
|
280 |
'darkslateblue': {r: 0.2823529411764706, g: 0.23921568627450981, b: 0.5450980392156862},
|
|
|
281 |
'slateblue': {r: 0.41568627450980394, g: 0.35294117647058826, b: 0.803921568627451},
|
|
|
282 |
'mediumslateblue': {r: 0.4823529411764706, g: 0.40784313725490196, b: 0.9333333333333333},
|
|
|
283 |
'mediumpurple': {r: 0.5764705882352941, g: 0.4392156862745098, b: 0.8588235294117647},
|
|
|
284 |
'blueviolet': {r: 0.5411764705882353, g: 0.16862745098039217, b: 0.8862745098039215},
|
|
|
285 |
'indigo': {r: 0.29411764705882354, g: 0, b: 0.5098039215686274},
|
|
|
286 |
'darkorchid': {r: 0.6, g: 0.19607843137254902, b: 0.8},
|
|
|
287 |
'darkviolet': {r: 0.5803921568627451, g: 0, b: 0.8274509803921568},
|
|
|
288 |
'mediumorchid': {r: 0.7294117647058823, g: 0.3333333333333333, b: 0.8274509803921568},
|
|
|
289 |
'thistle': {r: 0.8470588235294118, g: 0.7490196078431373, b: 0.8470588235294118},
|
|
|
290 |
'plum': {r: 0.8666666666666667, g: 0.6274509803921569, b: 0.8666666666666667},
|
|
|
291 |
'violet': {r: 0.9333333333333333, g: 0.5098039215686274, b: 0.9333333333333333},
|
|
|
292 |
'purple': {r: 0.5019607843137255, g: 0, b: 0.5019607843137255},
|
|
|
293 |
'darkmagenta': {r: 0.5450980392156862, g: 0, b: 0.5450980392156862},
|
|
|
294 |
'magenta': {r: 1, g: 0, b: 1},
|
|
|
295 |
'fuchsia': {r: 1, g: 0, b: 1},
|
|
|
296 |
'orchid': {r: 0.8549019607843137, g: 0.4392156862745098, b: 0.8392156862745098},
|
|
|
297 |
'mediumvioletred': {r: 0.7803921568627451, g: 0.08235294117647059, b: 0.5215686274509804},
|
|
|
298 |
'deeppink': {r: 1, g: 0.0784313725490196, b: 0.5764705882352941},
|
|
|
299 |
'hotpink': {r: 1, g: 0.4117647058823529, b: 0.7058823529411765},
|
|
|
300 |
'palevioletred': {r: 0.8588235294117647, g: 0.4392156862745098, b: 0.5764705882352941},
|
|
|
301 |
'lavenderblush': {r: 1, g: 0.9411764705882353, b: 0.9607843137254902},
|
|
|
302 |
'crimson': {r: 0.8627450980392157, g: 0.0784313725490196, b: 0.23529411764705882},
|
|
|
303 |
'pink': {r: 1, g: 0.7529411764705882, b: 0.796078431372549},
|
|
|
304 |
'lightpink': {r: 1, g: 0.7137254901960784, b: 0.7568627450980392}
|
|
|
305 |
},
|
|
|
306 |
|
|
|
307 |
_exactName = function(color) {
|
|
|
308 |
var name = false;
|
|
|
309 |
|
|
|
310 |
$.each(_colors, function(n, color_b) {
|
|
|
311 |
if (color.equals(new Color(color_b.r, color_b.g, color_b.b))) {
|
|
|
312 |
name = n;
|
|
|
313 |
return false;
|
|
|
314 |
}
|
|
|
315 |
});
|
|
|
316 |
|
|
|
317 |
return name;
|
|
|
318 |
},
|
|
|
319 |
|
|
|
320 |
_closestName = function(color) {
|
|
|
321 |
var rgb = color.getRGB(),
|
|
|
322 |
distance = null,
|
|
|
323 |
name = false,
|
|
|
324 |
d;
|
|
|
325 |
|
|
|
326 |
$.each(_colors, function(n, color_b) {
|
|
|
327 |
d = color.distance(new Color(color_b.r, color_b.g, color_b.b));
|
|
|
328 |
if (d < distance || distance === null) {
|
|
|
329 |
name = n;
|
|
|
330 |
if (d == 0) {
|
|
|
331 |
return false; // can't get much closer than 0
|
|
|
332 |
}
|
|
|
333 |
distance = d;
|
|
|
334 |
}
|
|
|
335 |
});
|
|
|
336 |
|
|
|
337 |
return name;
|
|
|
338 |
},
|
|
|
339 |
|
|
|
340 |
_parseHex = function(color) {
|
|
|
341 |
var c,
|
|
|
342 |
m;
|
|
|
343 |
|
|
|
344 |
// {#}rrggbb
|
|
|
345 |
m = /^#?([a-fA-F0-9]{1,6})$/.exec(color);
|
|
|
346 |
if (m) {
|
|
|
347 |
c = parseInt(m[1], 16);
|
|
|
348 |
return new Color(
|
|
|
349 |
((c >> 16) & 0xFF) / 255,
|
|
|
350 |
((c >> 8) & 0xFF) / 255,
|
|
|
351 |
(c & 0xFF) / 255
|
|
|
352 |
);
|
|
|
353 |
}
|
|
|
354 |
|
|
|
355 |
return false;
|
|
|
356 |
},
|
|
|
357 |
|
|
|
358 |
_parseColor = function(color) {
|
|
|
359 |
var name = $.trim(color).toLowerCase(),
|
|
|
360 |
m;
|
|
|
361 |
|
|
|
362 |
if (color == '') {
|
|
|
363 |
return new Color();
|
|
|
364 |
}
|
|
|
365 |
|
|
|
366 |
if (_colors[name]) {
|
|
|
367 |
return new Color(_colors[name].r, _colors[name].g, _colors[name].b);
|
|
|
368 |
}
|
|
|
369 |
|
|
|
370 |
// rgba(r,g,b,a)
|
|
|
371 |
m = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
|
|
|
372 |
if (m) {
|
|
|
373 |
return new Color(
|
|
|
374 |
m[1] / 255,
|
|
|
375 |
m[2] / 255,
|
|
|
376 |
m[3] / 255,
|
|
|
377 |
parseFloat(m[4])
|
|
|
378 |
);
|
|
|
379 |
}
|
|
|
380 |
|
|
|
381 |
// hsla(r,g,b,a)
|
|
|
382 |
m = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
|
|
|
383 |
if (m) {
|
|
|
384 |
return (new Color()).setHSL(
|
|
|
385 |
m[1] / 255,
|
|
|
386 |
m[2] / 255,
|
|
|
387 |
m[3] / 255).setAlpha(parseFloat(m[4]));
|
|
|
388 |
}
|
|
|
389 |
|
|
|
390 |
// rgba(r%,g%,b%,a%)
|
|
|
391 |
m = /^rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
|
|
|
392 |
if (m) {
|
|
|
393 |
return new Color(
|
|
|
394 |
m[1] / 100,
|
|
|
395 |
m[2] / 100,
|
|
|
396 |
m[3] / 100,
|
|
|
397 |
m[4] / 100
|
|
|
398 |
);
|
|
|
399 |
}
|
|
|
400 |
|
|
|
401 |
// hsla(r%,g%,b%,a%)
|
|
|
402 |
m = /^hsla?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/.exec(color);
|
|
|
403 |
if (m) {
|
|
|
404 |
return (new Color()).setHSL(
|
|
|
405 |
m[1] / 100,
|
|
|
406 |
m[2] / 100,
|
|
|
407 |
m[3] / 100).setAlpha(m[4] / 100);
|
|
|
408 |
}
|
|
|
409 |
|
|
|
410 |
// #rrggbb
|
|
|
411 |
m = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/.exec(color);
|
|
|
412 |
if (m) {
|
|
|
413 |
return new Color(
|
|
|
414 |
parseInt(m[1], 16) / 255,
|
|
|
415 |
parseInt(m[2], 16) / 255,
|
|
|
416 |
parseInt(m[3], 16) / 255
|
|
|
417 |
);
|
|
|
418 |
}
|
|
|
419 |
|
|
|
420 |
// #rgb
|
|
|
421 |
m = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/.exec(color);
|
|
|
422 |
if (m) {
|
|
|
423 |
return new Color(
|
|
|
424 |
parseInt(m[1] + m[1], 16) / 255,
|
|
|
425 |
parseInt(m[2] + m[2], 16) / 255,
|
|
|
426 |
parseInt(m[3] + m[3], 16) / 255
|
|
|
427 |
);
|
|
|
428 |
}
|
|
|
429 |
|
|
|
430 |
return _parseHex(color);
|
|
|
431 |
},
|
|
|
432 |
|
|
|
433 |
_layoutTable = function(layout, callback) {
|
|
|
434 |
var bitmap,
|
|
|
435 |
x,
|
|
|
436 |
y,
|
|
|
437 |
width, height,
|
|
|
438 |
columns, rows,
|
|
|
439 |
index,
|
|
|
440 |
cell,
|
|
|
441 |
html,
|
|
|
442 |
w,
|
|
|
443 |
h,
|
|
|
444 |
colspan,
|
|
|
445 |
walked;
|
|
|
446 |
|
|
|
447 |
layout.sort(function(a, b) {
|
|
|
448 |
if (a.pos[1] == b.pos[1]) {
|
|
|
449 |
return a.pos[0] - b.pos[0];
|
|
|
450 |
}
|
|
|
451 |
return a.pos[1] - b.pos[1];
|
|
|
452 |
});
|
|
|
453 |
|
|
|
454 |
// Determine dimensions of the table
|
|
|
455 |
width = 0;
|
|
|
456 |
height = 0;
|
|
|
457 |
$.each (layout, function(index, part) {
|
|
|
458 |
width = Math.max(width, part.pos[0] + part.pos[2]);
|
|
|
459 |
height = Math.max(height, part.pos[1] + part.pos[3]);
|
|
|
460 |
});
|
|
|
461 |
|
|
|
462 |
// Initialize bitmap
|
|
|
463 |
bitmap = [];
|
|
|
464 |
for (x = 0; x < width; ++x) {
|
|
|
465 |
bitmap.push([]);
|
|
|
466 |
}
|
|
|
467 |
|
|
|
468 |
// Mark rows and columns which have layout assigned
|
|
|
469 |
rows = [];
|
|
|
470 |
columns = [];
|
|
|
471 |
$.each(layout, function(index, part) {
|
|
|
472 |
// mark columns
|
|
|
473 |
for (x = 0; x < part.pos[2]; x += 1) {
|
|
|
474 |
columns[part.pos[0] + x] = true;
|
|
|
475 |
}
|
|
|
476 |
for (y = 0; y < part.pos[3]; y += 1) {
|
|
|
477 |
rows[part.pos[1] + y] = true;
|
|
|
478 |
}
|
|
|
479 |
});
|
|
|
480 |
|
|
|
481 |
// Generate the table
|
|
|
482 |
html = '';
|
|
|
483 |
cell = layout[index = 0];
|
|
|
484 |
for (y = 0; y < height; ++y) {
|
|
|
485 |
html += '<tr>';
|
|
|
486 |
for (x = 0; x < width; x) {
|
|
|
487 |
if (typeof cell !== 'undefined' && x == cell.pos[0] && y == cell.pos[1]) {
|
|
|
488 |
// Create a "real" cell
|
|
|
489 |
html += callback(cell, x, y);
|
|
|
490 |
|
|
|
491 |
for (h = 0; h < cell.pos[3]; h +=1) {
|
|
|
492 |
for (w = 0; w < cell.pos[2]; w +=1) {
|
|
|
493 |
bitmap[x + w][y + h] = true;
|
|
|
494 |
}
|
|
|
495 |
}
|
|
|
496 |
|
|
|
497 |
x += cell.pos[2];
|
|
|
498 |
cell = layout[++index];
|
|
|
499 |
} else {
|
|
|
500 |
// Fill in the gaps
|
|
|
501 |
colspan = 0;
|
|
|
502 |
walked = false;
|
|
|
503 |
|
|
|
504 |
while (x < width && bitmap[x][y] === undefined && (cell === undefined || y < cell.pos[1] || (y == cell.pos[1] && x < cell.pos[0]))) {
|
|
|
505 |
if (columns[x] === true) {
|
|
|
506 |
colspan += 1;
|
|
|
507 |
}
|
|
|
508 |
walked = true;
|
|
|
509 |
x += 1;
|
|
|
510 |
}
|
|
|
511 |
|
|
|
512 |
if (colspan > 0) {
|
|
|
513 |
html += '<td colspan="'+colspan+'"></td>';
|
|
|
514 |
} else if (!walked) {
|
|
|
515 |
x += 1;
|
|
|
516 |
}
|
|
|
517 |
}
|
|
|
518 |
}
|
|
|
519 |
html += '</tr>';
|
|
|
520 |
}
|
|
|
521 |
|
|
|
522 |
return '<table cellspacing="0" cellpadding="0" border="0"><tbody>' + html + '</tbody></table>';
|
|
|
523 |
},
|
|
|
524 |
|
|
|
525 |
_parts = {
|
|
|
526 |
header: function (inst) {
|
|
|
527 |
var that = this,
|
|
|
528 |
e = null,
|
|
|
529 |
_html =function() {
|
|
|
530 |
var title = inst.options.title || inst._getRegional('title'),
|
|
|
531 |
html = '<span class="ui-dialog-title">' + title + '</span>';
|
|
|
532 |
|
|
|
533 |
if (!inst.inline && inst.options.showCloseButton) {
|
|
|
534 |
html += '<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">'
|
|
|
535 |
+ '<span class="ui-icon ui-icon-closethick">close</span></a>';
|
|
|
536 |
}
|
|
|
537 |
|
|
|
538 |
return '<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">' + html + '</div>';
|
|
|
539 |
};
|
|
|
540 |
|
|
|
541 |
this.init = function() {
|
|
|
542 |
e = $(_html()).prependTo(inst.dialog);
|
|
|
543 |
|
|
|
544 |
var close = $('.ui-dialog-titlebar-close', e);
|
|
|
545 |
inst._hoverable(close);
|
|
|
546 |
inst._focusable(close);
|
|
|
547 |
close.click(function(event) {
|
|
|
548 |
event.preventDefault();
|
|
|
549 |
inst.close();
|
|
|
550 |
});
|
|
|
551 |
|
|
|
552 |
if (!inst.inline && inst.options.draggable) {
|
|
|
553 |
inst.dialog.draggable({
|
|
|
554 |
handle: e
|
|
|
555 |
});
|
|
|
556 |
}
|
|
|
557 |
};
|
|
|
558 |
},
|
|
|
559 |
|
|
|
560 |
map: function (inst) {
|
|
|
561 |
var that = this,
|
|
|
562 |
e = null,
|
|
|
563 |
mousemove_timeout = null,
|
|
|
564 |
_mousedown, _mouseup, _mousemove, _html;
|
|
|
565 |
|
|
|
566 |
_mousedown = function (event) {
|
|
|
567 |
if (!inst.opened) {
|
|
|
568 |
return;
|
|
|
569 |
}
|
|
|
570 |
|
|
|
571 |
var div = $('.ui-colorpicker-map-layer-pointer', e),
|
|
|
572 |
offset = div.offset(),
|
|
|
573 |
width = div.width(),
|
|
|
574 |
height = div.height(),
|
|
|
575 |
x = event.pageX - offset.left,
|
|
|
576 |
y = event.pageY - offset.top;
|
|
|
577 |
|
|
|
578 |
if (x >= 0 && x < width && y >= 0 && y < height) {
|
|
|
579 |
event.stopImmediatePropagation();
|
|
|
580 |
event.preventDefault();
|
|
|
581 |
e.unbind('mousedown', _mousedown);
|
|
|
582 |
$(document).bind('mouseup', _mouseup);
|
|
|
583 |
$(document).bind('mousemove', _mousemove);
|
|
|
584 |
_mousemove(event);
|
|
|
585 |
}
|
|
|
586 |
};
|
|
|
587 |
|
|
|
588 |
_mouseup = function (event) {
|
|
|
589 |
event.stopImmediatePropagation();
|
|
|
590 |
event.preventDefault();
|
|
|
591 |
$(document).unbind('mouseup', _mouseup);
|
|
|
592 |
$(document).unbind('mousemove', _mousemove);
|
|
|
593 |
e.bind('mousedown', _mousedown);
|
|
|
594 |
};
|
|
|
595 |
|
|
|
596 |
_mousemove = function (event) {
|
|
|
597 |
event.stopImmediatePropagation();
|
|
|
598 |
event.preventDefault();
|
|
|
599 |
|
|
|
600 |
if (event.pageX === that.x && event.pageY === that.y) {
|
|
|
601 |
return;
|
|
|
602 |
}
|
|
|
603 |
that.x = event.pageX;
|
|
|
604 |
that.y = event.pageY;
|
|
|
605 |
|
|
|
606 |
var div = $('.ui-colorpicker-map-layer-pointer', e),
|
|
|
607 |
offset = div.offset(),
|
|
|
608 |
width = div.width(),
|
|
|
609 |
height = div.height(),
|
|
|
610 |
x = event.pageX - offset.left,
|
|
|
611 |
y = event.pageY - offset.top;
|
|
|
612 |
|
|
|
613 |
x = Math.max(0, Math.min(x / width, 1));
|
|
|
614 |
y = Math.max(0, Math.min(y / height, 1));
|
|
|
615 |
|
|
|
616 |
// interpret values
|
|
|
617 |
switch (inst.mode) {
|
|
|
618 |
case 'h':
|
|
|
619 |
inst.color.setHSV(null, x, 1 - y);
|
|
|
620 |
break;
|
|
|
621 |
|
|
|
622 |
case 's':
|
|
|
623 |
case 'a':
|
|
|
624 |
inst.color.setHSV(x, null, 1 - y);
|
|
|
625 |
break;
|
|
|
626 |
|
|
|
627 |
case 'v':
|
|
|
628 |
inst.color.setHSV(x, 1 - y, null);
|
|
|
629 |
break;
|
|
|
630 |
|
|
|
631 |
case 'r':
|
|
|
632 |
inst.color.setRGB(null, 1 - y, x);
|
|
|
633 |
break;
|
|
|
634 |
|
|
|
635 |
case 'g':
|
|
|
636 |
inst.color.setRGB(1 - y, null, x);
|
|
|
637 |
break;
|
|
|
638 |
|
|
|
639 |
case 'b':
|
|
|
640 |
inst.color.setRGB(x, 1 - y, null);
|
|
|
641 |
break;
|
|
|
642 |
}
|
|
|
643 |
|
|
|
644 |
inst._change();
|
|
|
645 |
};
|
|
|
646 |
|
|
|
647 |
_html = function () {
|
|
|
648 |
var html = '<div class="ui-colorpicker-map ui-colorpicker-border">'
|
|
|
649 |
+ '<span class="ui-colorpicker-map-layer-1"> </span>'
|
|
|
650 |
+ '<span class="ui-colorpicker-map-layer-2"> </span>'
|
|
|
651 |
+ (inst.options.alpha ? '<span class="ui-colorpicker-map-layer-alpha"> </span>' : '')
|
|
|
652 |
+ '<span class="ui-colorpicker-map-layer-pointer"><span class="ui-colorpicker-map-pointer"></span></span></div>';
|
|
|
653 |
return html;
|
|
|
654 |
};
|
|
|
655 |
|
|
|
656 |
this.update = function () {
|
|
|
657 |
switch (inst.mode) {
|
|
|
658 |
case 'h':
|
|
|
659 |
$('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 0', 'opacity': ''}).show();
|
|
|
660 |
$('.ui-colorpicker-map-layer-2', e).hide();
|
|
|
661 |
break;
|
|
|
662 |
|
|
|
663 |
case 's':
|
|
|
664 |
case 'a':
|
|
|
665 |
$('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -260px', 'opacity': ''}).show();
|
|
|
666 |
$('.ui-colorpicker-map-layer-2', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
|
|
|
667 |
break;
|
|
|
668 |
|
|
|
669 |
case 'v':
|
|
|
670 |
$(e).css('background-color', 'black');
|
|
|
671 |
$('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -780px', 'opacity': ''}).show();
|
|
|
672 |
$('.ui-colorpicker-map-layer-2', e).hide();
|
|
|
673 |
break;
|
|
|
674 |
|
|
|
675 |
case 'r':
|
|
|
676 |
$('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -1040px', 'opacity': ''}).show();
|
|
|
677 |
$('.ui-colorpicker-map-layer-2', e).css({'background-position': '0 -1300px', 'opacity': ''}).show();
|
|
|
678 |
break;
|
|
|
679 |
|
|
|
680 |
case 'g':
|
|
|
681 |
$('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -1560px', 'opacity': ''}).show();
|
|
|
682 |
$('.ui-colorpicker-map-layer-2', e).css({'background-position': '0 -1820px', 'opacity': ''}).show();
|
|
|
683 |
break;
|
|
|
684 |
|
|
|
685 |
case 'b':
|
|
|
686 |
$('.ui-colorpicker-map-layer-1', e).css({'background-position': '0 -2080px', 'opacity': ''}).show();
|
|
|
687 |
$('.ui-colorpicker-map-layer-2', e).css({'background-position': '0 -2340px', 'opacity': ''}).show();
|
|
|
688 |
break;
|
|
|
689 |
}
|
|
|
690 |
that.repaint();
|
|
|
691 |
};
|
|
|
692 |
|
|
|
693 |
this.repaint = function () {
|
|
|
694 |
var div = $('.ui-colorpicker-map-layer-pointer', e),
|
|
|
695 |
x = 0,
|
|
|
696 |
y = 0;
|
|
|
697 |
|
|
|
698 |
switch (inst.mode) {
|
|
|
699 |
case 'h':
|
|
|
700 |
x = inst.color.getHSV().s * div.width();
|
|
|
701 |
y = (1 - inst.color.getHSV().v) * div.width();
|
|
|
702 |
$(e).css('background-color', inst.color.copy().normalize().toCSS());
|
|
|
703 |
break;
|
|
|
704 |
|
|
|
705 |
case 's':
|
|
|
706 |
case 'a':
|
|
|
707 |
x = inst.color.getHSV().h * div.width();
|
|
|
708 |
y = (1 - inst.color.getHSV().v) * div.width();
|
|
|
709 |
$('.ui-colorpicker-map-layer-2', e).css('opacity', 1 - inst.color.getHSV().s);
|
|
|
710 |
break;
|
|
|
711 |
|
|
|
712 |
case 'v':
|
|
|
713 |
x = inst.color.getHSV().h * div.width();
|
|
|
714 |
y = (1 - inst.color.getHSV().s) * div.width();
|
|
|
715 |
$('.ui-colorpicker-map-layer-1', e).css('opacity', inst.color.getHSV().v);
|
|
|
716 |
break;
|
|
|
717 |
|
|
|
718 |
case 'r':
|
|
|
719 |
x = inst.color.getRGB().b * div.width();
|
|
|
720 |
y = (1 - inst.color.getRGB().g) * div.width();
|
|
|
721 |
$('.ui-colorpicker-map-layer-2', e).css('opacity', inst.color.getRGB().r);
|
|
|
722 |
break;
|
|
|
723 |
|
|
|
724 |
case 'g':
|
|
|
725 |
x = inst.color.getRGB().b * div.width();
|
|
|
726 |
y = (1 - inst.color.getRGB().r) * div.width();
|
|
|
727 |
$('.ui-colorpicker-map-layer-2', e).css('opacity', inst.color.getRGB().g);
|
|
|
728 |
break;
|
|
|
729 |
|
|
|
730 |
case 'b':
|
|
|
731 |
x = inst.color.getRGB().r * div.width();
|
|
|
732 |
y = (1 - inst.color.getRGB().g) * div.width();
|
|
|
733 |
$('.ui-colorpicker-map-layer-2', e).css('opacity', inst.color.getRGB().b);
|
|
|
734 |
break;
|
|
|
735 |
}
|
|
|
736 |
|
|
|
737 |
if (inst.options.alpha) {
|
|
|
738 |
$('.ui-colorpicker-map-layer-alpha', e).css('opacity', 1 - inst.color.getAlpha());
|
|
|
739 |
}
|
|
|
740 |
|
|
|
741 |
$('.ui-colorpicker-map-pointer', e).css({
|
|
|
742 |
'left': x - 7,
|
|
|
743 |
'top': y - 7
|
|
|
744 |
});
|
|
|
745 |
};
|
|
|
746 |
|
|
|
747 |
this.init = function () {
|
|
|
748 |
e = $(_html()).appendTo($('.ui-colorpicker-map-container', inst.dialog));
|
|
|
749 |
|
|
|
750 |
e.bind('mousedown', _mousedown);
|
|
|
751 |
};
|
|
|
752 |
},
|
|
|
753 |
|
|
|
754 |
bar: function (inst) {
|
|
|
755 |
var that = this,
|
|
|
756 |
e = null,
|
|
|
757 |
_mousedown, _mouseup, _mousemove, _html;
|
|
|
758 |
|
|
|
759 |
_mousedown = function (event) {
|
|
|
760 |
if (!inst.opened) {
|
|
|
761 |
return;
|
|
|
762 |
}
|
|
|
763 |
|
|
|
764 |
var div = $('.ui-colorpicker-bar-layer-pointer', e),
|
|
|
765 |
offset = div.offset(),
|
|
|
766 |
width = div.width(),
|
|
|
767 |
height = div.height(),
|
|
|
768 |
x = event.pageX - offset.left,
|
|
|
769 |
y = event.pageY - offset.top;
|
|
|
770 |
|
|
|
771 |
if (x >= 0 && x < width && y >= 0 && y < height) {
|
|
|
772 |
event.stopImmediatePropagation();
|
|
|
773 |
event.preventDefault();
|
|
|
774 |
e.unbind('mousedown', _mousedown);
|
|
|
775 |
$(document).bind('mouseup', _mouseup);
|
|
|
776 |
$(document).bind('mousemove', _mousemove);
|
|
|
777 |
_mousemove(event);
|
|
|
778 |
}
|
|
|
779 |
};
|
|
|
780 |
|
|
|
781 |
_mouseup = function (event) {
|
|
|
782 |
event.stopImmediatePropagation();
|
|
|
783 |
event.preventDefault();
|
|
|
784 |
$(document).unbind('mouseup', _mouseup);
|
|
|
785 |
$(document).unbind('mousemove', _mousemove);
|
|
|
786 |
e.bind('mousedown', _mousedown);
|
|
|
787 |
};
|
|
|
788 |
|
|
|
789 |
_mousemove = function (event) {
|
|
|
790 |
event.stopImmediatePropagation();
|
|
|
791 |
event.preventDefault();
|
|
|
792 |
|
|
|
793 |
if (event.pageY === that.y) {
|
|
|
794 |
return;
|
|
|
795 |
}
|
|
|
796 |
that.y = event.pageY;
|
|
|
797 |
|
|
|
798 |
var div = $('.ui-colorpicker-bar-layer-pointer', e),
|
|
|
799 |
offset = div.offset(),
|
|
|
800 |
height = div.height(),
|
|
|
801 |
y = event.pageY - offset.top;
|
|
|
802 |
|
|
|
803 |
y = Math.max(0, Math.min(y / height, 1));
|
|
|
804 |
|
|
|
805 |
// interpret values
|
|
|
806 |
switch (inst.mode) {
|
|
|
807 |
case 'h':
|
|
|
808 |
inst.color.setHSV(1 - y, null, null);
|
|
|
809 |
break;
|
|
|
810 |
|
|
|
811 |
case 's':
|
|
|
812 |
inst.color.setHSV(null, 1 - y, null);
|
|
|
813 |
break;
|
|
|
814 |
|
|
|
815 |
case 'v':
|
|
|
816 |
inst.color.setHSV(null, null, 1 - y);
|
|
|
817 |
break;
|
|
|
818 |
|
|
|
819 |
case 'r':
|
|
|
820 |
inst.color.setRGB(1 - y, null, null);
|
|
|
821 |
break;
|
|
|
822 |
|
|
|
823 |
case 'g':
|
|
|
824 |
inst.color.setRGB(null, 1 - y, null);
|
|
|
825 |
break;
|
|
|
826 |
|
|
|
827 |
case 'b':
|
|
|
828 |
inst.color.setRGB(null, null, 1 - y);
|
|
|
829 |
break;
|
|
|
830 |
|
|
|
831 |
case 'a':
|
|
|
832 |
inst.color.setAlpha(1 - y);
|
|
|
833 |
break;
|
|
|
834 |
}
|
|
|
835 |
|
|
|
836 |
inst._change();
|
|
|
837 |
};
|
|
|
838 |
|
|
|
839 |
_html = function () {
|
|
|
840 |
var html = '<div class="ui-colorpicker-bar ui-colorpicker-border">'
|
|
|
841 |
+ '<span class="ui-colorpicker-bar-layer-1"> </span>'
|
|
|
842 |
+ '<span class="ui-colorpicker-bar-layer-2"> </span>'
|
|
|
843 |
+ '<span class="ui-colorpicker-bar-layer-3"> </span>'
|
|
|
844 |
+ '<span class="ui-colorpicker-bar-layer-4"> </span>';
|
|
|
845 |
|
|
|
846 |
if (inst.options.alpha) {
|
|
|
847 |
html += '<span class="ui-colorpicker-bar-layer-alpha"> </span>'
|
|
|
848 |
+ '<span class="ui-colorpicker-bar-layer-alphabar"> </span>';
|
|
|
849 |
}
|
|
|
850 |
|
|
|
851 |
html += '<span class="ui-colorpicker-bar-layer-pointer"><span class="ui-colorpicker-bar-pointer"></span></span></div>';
|
|
|
852 |
|
|
|
853 |
return html;
|
|
|
854 |
};
|
|
|
855 |
|
|
|
856 |
this.update = function () {
|
|
|
857 |
switch (inst.mode) {
|
|
|
858 |
case 'h':
|
|
|
859 |
case 's':
|
|
|
860 |
case 'v':
|
|
|
861 |
case 'r':
|
|
|
862 |
case 'g':
|
|
|
863 |
case 'b':
|
|
|
864 |
$('.ui-colorpicker-bar-layer-alpha', e).show();
|
|
|
865 |
$('.ui-colorpicker-bar-layer-alphabar', e).hide();
|
|
|
866 |
break;
|
|
|
867 |
|
|
|
868 |
case 'a':
|
|
|
869 |
$('.ui-colorpicker-bar-layer-alpha', e).hide();
|
|
|
870 |
$('.ui-colorpicker-bar-layer-alphabar', e).show();
|
|
|
871 |
break;
|
|
|
872 |
}
|
|
|
873 |
|
|
|
874 |
switch (inst.mode) {
|
|
|
875 |
case 'h':
|
|
|
876 |
$('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 0', 'opacity': ''}).show();
|
|
|
877 |
$('.ui-colorpicker-bar-layer-2', e).hide();
|
|
|
878 |
$('.ui-colorpicker-bar-layer-3', e).hide();
|
|
|
879 |
$('.ui-colorpicker-bar-layer-4', e).hide();
|
|
|
880 |
break;
|
|
|
881 |
|
|
|
882 |
case 's':
|
|
|
883 |
$('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -260px', 'opacity': ''}).show();
|
|
|
884 |
$('.ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
|
|
|
885 |
$('.ui-colorpicker-bar-layer-3', e).hide();
|
|
|
886 |
$('.ui-colorpicker-bar-layer-4', e).hide();
|
|
|
887 |
break;
|
|
|
888 |
|
|
|
889 |
case 'v':
|
|
|
890 |
$('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -520px', 'opacity': ''}).show();
|
|
|
891 |
$('.ui-colorpicker-bar-layer-2', e).hide();
|
|
|
892 |
$('.ui-colorpicker-bar-layer-3', e).hide();
|
|
|
893 |
$('.ui-colorpicker-bar-layer-4', e).hide();
|
|
|
894 |
break;
|
|
|
895 |
|
|
|
896 |
case 'r':
|
|
|
897 |
$('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -1560px', 'opacity': ''}).show();
|
|
|
898 |
$('.ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -1300px', 'opacity': ''}).show();
|
|
|
899 |
$('.ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -780px', 'opacity': ''}).show();
|
|
|
900 |
$('.ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -1040px', 'opacity': ''}).show();
|
|
|
901 |
break;
|
|
|
902 |
|
|
|
903 |
case 'g':
|
|
|
904 |
$('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -2600px', 'opacity': ''}).show();
|
|
|
905 |
$('.ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -2340px', 'opacity': ''}).show();
|
|
|
906 |
$('.ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -1820px', 'opacity': ''}).show();
|
|
|
907 |
$('.ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -2080px', 'opacity': ''}).show();
|
|
|
908 |
break;
|
|
|
909 |
|
|
|
910 |
case 'b':
|
|
|
911 |
$('.ui-colorpicker-bar-layer-1', e).css({'background-position': '0 -3640px', 'opacity': ''}).show();
|
|
|
912 |
$('.ui-colorpicker-bar-layer-2', e).css({'background-position': '0 -3380px', 'opacity': ''}).show();
|
|
|
913 |
$('.ui-colorpicker-bar-layer-3', e).css({'background-position': '0 -2860px', 'opacity': ''}).show();
|
|
|
914 |
$('.ui-colorpicker-bar-layer-4', e).css({'background-position': '0 -3120px', 'opacity': ''}).show();
|
|
|
915 |
break;
|
|
|
916 |
|
|
|
917 |
case 'a':
|
|
|
918 |
$('.ui-colorpicker-bar-layer-1', e).hide();
|
|
|
919 |
$('.ui-colorpicker-bar-layer-2', e).hide();
|
|
|
920 |
$('.ui-colorpicker-bar-layer-3', e).hide();
|
|
|
921 |
$('.ui-colorpicker-bar-layer-4', e).hide();
|
|
|
922 |
break;
|
|
|
923 |
}
|
|
|
924 |
that.repaint();
|
|
|
925 |
};
|
|
|
926 |
|
|
|
927 |
this.repaint = function () {
|
|
|
928 |
var div = $('.ui-colorpicker-bar-layer-pointer', e),
|
|
|
929 |
y = 0;
|
|
|
930 |
|
|
|
931 |
switch (inst.mode) {
|
|
|
932 |
case 'h':
|
|
|
933 |
y = (1 - inst.color.getHSV().h) * div.height();
|
|
|
934 |
break;
|
|
|
935 |
|
|
|
936 |
case 's':
|
|
|
937 |
y = (1 - inst.color.getHSV().s) * div.height();
|
|
|
938 |
$('.ui-colorpicker-bar-layer-2', e).css('opacity', 1 - inst.color.getHSV().v);
|
|
|
939 |
$(e).css('background-color', inst.color.copy().normalize().toCSS());
|
|
|
940 |
break;
|
|
|
941 |
|
|
|
942 |
case 'v':
|
|
|
943 |
y = (1 - inst.color.getHSV().v) * div.height();
|
|
|
944 |
$(e).css('background-color', inst.color.copy().normalize().toCSS());
|
|
|
945 |
break;
|
|
|
946 |
|
|
|
947 |
case 'r':
|
|
|
948 |
y = (1 - inst.color.getRGB().r) * div.height();
|
|
|
949 |
$('.ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.getRGB().b - inst.color.getRGB().g)));
|
|
|
950 |
$('.ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.getRGB().g - inst.color.getRGB().b)));
|
|
|
951 |
$('.ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.getRGB().b, inst.color.getRGB().g));
|
|
|
952 |
break;
|
|
|
953 |
|
|
|
954 |
case 'g':
|
|
|
955 |
y = (1 - inst.color.getRGB().g) * div.height();
|
|
|
956 |
$('.ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.getRGB().b - inst.color.getRGB().r)));
|
|
|
957 |
$('.ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.getRGB().r - inst.color.getRGB().b)));
|
|
|
958 |
$('.ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.getRGB().r, inst.color.getRGB().b));
|
|
|
959 |
break;
|
|
|
960 |
|
|
|
961 |
case 'b':
|
|
|
962 |
y = (1 - inst.color.getRGB().b) * div.height();
|
|
|
963 |
$('.ui-colorpicker-bar-layer-2', e).css('opacity', Math.max(0, (inst.color.getRGB().r - inst.color.getRGB().g)));
|
|
|
964 |
$('.ui-colorpicker-bar-layer-3', e).css('opacity', Math.max(0, (inst.color.getRGB().g - inst.color.getRGB().r)));
|
|
|
965 |
$('.ui-colorpicker-bar-layer-4', e).css('opacity', Math.min(inst.color.getRGB().r, inst.color.getRGB().g));
|
|
|
966 |
break;
|
|
|
967 |
|
|
|
968 |
case 'a':
|
|
|
969 |
y = (1 - inst.color.getAlpha()) * div.height();
|
|
|
970 |
$(e).css('background-color', inst.color.copy().normalize().toCSS());
|
|
|
971 |
break;
|
|
|
972 |
}
|
|
|
973 |
|
|
|
974 |
if (inst.mode !== 'a') {
|
|
|
975 |
$('.ui-colorpicker-bar-layer-alpha', e).css('opacity', 1 - inst.color.getAlpha());
|
|
|
976 |
}
|
|
|
977 |
|
|
|
978 |
$('.ui-colorpicker-bar-pointer', e).css('top', y - 3);
|
|
|
979 |
};
|
|
|
980 |
|
|
|
981 |
this.init = function () {
|
|
|
982 |
e = $(_html()).appendTo($('.ui-colorpicker-bar-container', inst.dialog));
|
|
|
983 |
|
|
|
984 |
e.bind('mousedown', _mousedown);
|
|
|
985 |
};
|
|
|
986 |
},
|
|
|
987 |
|
|
|
988 |
preview: function (inst) {
|
|
|
989 |
var that = this,
|
|
|
990 |
e = null,
|
|
|
991 |
_html;
|
|
|
992 |
|
|
|
993 |
_html = function () {
|
|
|
994 |
return '<div class="ui-colorpicker-preview ui-colorpicker-border">'
|
|
|
995 |
+ '<div class="ui-colorpicker-preview-initial"><div class="ui-colorpicker-preview-initial-alpha"></div></div>'
|
|
|
996 |
+ '<div class="ui-colorpicker-preview-current"><div class="ui-colorpicker-preview-current-alpha"></div></div>'
|
|
|
997 |
+ '</div>';
|
|
|
998 |
};
|
|
|
999 |
|
|
|
1000 |
this.init = function () {
|
|
|
1001 |
e = $(_html()).appendTo($('.ui-colorpicker-preview-container', inst.dialog));
|
|
|
1002 |
|
|
|
1003 |
$('.ui-colorpicker-preview-initial', e).click(function () {
|
|
|
1004 |
inst.color = inst.currentColor.copy();
|
|
|
1005 |
inst._change();
|
|
|
1006 |
});
|
|
|
1007 |
|
|
|
1008 |
};
|
|
|
1009 |
|
|
|
1010 |
this.update = function () {
|
|
|
1011 |
if (inst.options.alpha) {
|
|
|
1012 |
$('.ui-colorpicker-preview-initial-alpha, .ui-colorpicker-preview-current-alpha', e).show();
|
|
|
1013 |
} else {
|
|
|
1014 |
$('.ui-colorpicker-preview-initial-alpha, .ui-colorpicker-preview-current-alpha', e).hide();
|
|
|
1015 |
}
|
|
|
1016 |
|
|
|
1017 |
this.repaint();
|
|
|
1018 |
};
|
|
|
1019 |
|
|
|
1020 |
this.repaint = function () {
|
|
|
1021 |
$('.ui-colorpicker-preview-initial', e).css('background-color', inst.currentColor.toCSS()).attr('title', inst.currentColor.toHex());
|
|
|
1022 |
$('.ui-colorpicker-preview-initial-alpha', e).css('opacity', 1 - inst.currentColor.getAlpha());
|
|
|
1023 |
$('.ui-colorpicker-preview-current', e).css('background-color', inst.color.toCSS()).attr('title', inst.color.toHex());
|
|
|
1024 |
$('.ui-colorpicker-preview-current-alpha', e).css('opacity', 1 - inst.color.getAlpha());
|
|
|
1025 |
};
|
|
|
1026 |
},
|
|
|
1027 |
|
|
|
1028 |
hsv: function (inst) {
|
|
|
1029 |
var that = this,
|
|
|
1030 |
e = null,
|
|
|
1031 |
_html;
|
|
|
1032 |
|
|
|
1033 |
_html = function () {
|
|
|
1034 |
var html = '';
|
|
|
1035 |
|
|
|
1036 |
if (inst.options.hsv) {
|
|
|
1037 |
html += '<div class="ui-colorpicker-hsv-h"><input class="ui-colorpicker-mode" type="radio" value="h"/><label>' + inst._getRegional('hsvH') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="360" size="10"/><span class="ui-colorpicker-unit">°</span></div>'
|
|
|
1038 |
+ '<div class="ui-colorpicker-hsv-s"><input class="ui-colorpicker-mode" type="radio" value="s"/><label>' + inst._getRegional('hsvS') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100" size="10"/><span class="ui-colorpicker-unit">%</span></div>'
|
|
|
1039 |
+ '<div class="ui-colorpicker-hsv-v"><input class="ui-colorpicker-mode" type="radio" value="v"/><label>' + inst._getRegional('hsvV') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100" size="10"/><span class="ui-colorpicker-unit">%</span></div>';
|
|
|
1040 |
}
|
|
|
1041 |
|
|
|
1042 |
return '<div class="ui-colorpicker-hsv">' + html + '</div>';
|
|
|
1043 |
};
|
|
|
1044 |
|
|
|
1045 |
this.init = function () {
|
|
|
1046 |
e = $(_html()).appendTo($('.ui-colorpicker-hsv-container', inst.dialog));
|
|
|
1047 |
|
|
|
1048 |
$('.ui-colorpicker-mode', e).click(function () {
|
|
|
1049 |
inst.mode = $(this).val();
|
|
|
1050 |
inst._updateAllParts();
|
|
|
1051 |
});
|
|
|
1052 |
|
|
|
1053 |
$('.ui-colorpicker-number', e).bind('change keyup', function () {
|
|
|
1054 |
inst.color.setHSV(
|
|
|
1055 |
$('.ui-colorpicker-hsv-h .ui-colorpicker-number', e).val() / 360,
|
|
|
1056 |
$('.ui-colorpicker-hsv-s .ui-colorpicker-number', e).val() / 100,
|
|
|
1057 |
$('.ui-colorpicker-hsv-v .ui-colorpicker-number', e).val() / 100
|
|
|
1058 |
);
|
|
|
1059 |
inst._change();
|
|
|
1060 |
});
|
|
|
1061 |
};
|
|
|
1062 |
|
|
|
1063 |
this.repaint = function () {
|
|
|
1064 |
var hsv = inst.color.getHSV();
|
|
|
1065 |
hsv.h *= 360;
|
|
|
1066 |
hsv.s *= 100;
|
|
|
1067 |
hsv.v *= 100;
|
|
|
1068 |
|
|
|
1069 |
$.each(hsv, function (index, value) {
|
|
|
1070 |
var input = $('.ui-colorpicker-hsv-' + index + ' .ui-colorpicker-number', e);
|
|
|
1071 |
value = Math.round(value);
|
|
|
1072 |
if (input.val() !== value) {
|
|
|
1073 |
input.val(value);
|
|
|
1074 |
}
|
|
|
1075 |
});
|
|
|
1076 |
};
|
|
|
1077 |
|
|
|
1078 |
this.update = function () {
|
|
|
1079 |
$('.ui-colorpicker-mode', e).each(function () {
|
|
|
1080 |
$(this).attr('checked', $(this).val() === inst.mode);
|
|
|
1081 |
});
|
|
|
1082 |
this.repaint();
|
|
|
1083 |
};
|
|
|
1084 |
},
|
|
|
1085 |
|
|
|
1086 |
rgb: function (inst) {
|
|
|
1087 |
var that = this,
|
|
|
1088 |
e = null,
|
|
|
1089 |
_html;
|
|
|
1090 |
|
|
|
1091 |
_html = function () {
|
|
|
1092 |
var html = '';
|
|
|
1093 |
|
|
|
1094 |
if (inst.options.rgb) {
|
|
|
1095 |
html += '<div class="ui-colorpicker-rgb-r"><input class="ui-colorpicker-mode" type="radio" value="r"/><label>' + inst._getRegional('rgbR') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="255"/></div>'
|
|
|
1096 |
+ '<div class="ui-colorpicker-rgb-g"><input class="ui-colorpicker-mode" type="radio" value="g"/><label>' + inst._getRegional('rgbG') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="255"/></div>'
|
|
|
1097 |
+ '<div class="ui-colorpicker-rgb-b"><input class="ui-colorpicker-mode" type="radio" value="b"/><label>' + inst._getRegional('rgbB') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="255"/></div>';
|
|
|
1098 |
}
|
|
|
1099 |
|
|
|
1100 |
return '<div class="ui-colorpicker-rgb">' + html + '</div>';
|
|
|
1101 |
};
|
|
|
1102 |
|
|
|
1103 |
this.init = function () {
|
|
|
1104 |
e = $(_html()).appendTo($('.ui-colorpicker-rgb-container', inst.dialog));
|
|
|
1105 |
|
|
|
1106 |
$('.ui-colorpicker-mode', e).click(function () {
|
|
|
1107 |
inst.mode = $(this).val();
|
|
|
1108 |
inst._updateAllParts();
|
|
|
1109 |
});
|
|
|
1110 |
|
|
|
1111 |
$('.ui-colorpicker-number', e).bind('change keyup', function () {
|
|
|
1112 |
inst.color.setRGB(
|
|
|
1113 |
$('.ui-colorpicker-rgb-r .ui-colorpicker-number', e).val() / 255,
|
|
|
1114 |
$('.ui-colorpicker-rgb-g .ui-colorpicker-number', e).val() / 255,
|
|
|
1115 |
$('.ui-colorpicker-rgb-b .ui-colorpicker-number', e).val() / 255
|
|
|
1116 |
);
|
|
|
1117 |
|
|
|
1118 |
inst._change();
|
|
|
1119 |
});
|
|
|
1120 |
};
|
|
|
1121 |
|
|
|
1122 |
this.repaint = function () {
|
|
|
1123 |
$.each(inst.color.getRGB(), function (index, value) {
|
|
|
1124 |
var input = $('.ui-colorpicker-rgb-' + index + ' .ui-colorpicker-number', e);
|
|
|
1125 |
value = Math.round(value * 255);
|
|
|
1126 |
if (input.val() !== value) {
|
|
|
1127 |
input.val(value);
|
|
|
1128 |
}
|
|
|
1129 |
});
|
|
|
1130 |
};
|
|
|
1131 |
|
|
|
1132 |
this.update = function () {
|
|
|
1133 |
$('.ui-colorpicker-mode', e).each(function () {
|
|
|
1134 |
$(this).attr('checked', $(this).val() === inst.mode);
|
|
|
1135 |
});
|
|
|
1136 |
this.repaint();
|
|
|
1137 |
};
|
|
|
1138 |
},
|
|
|
1139 |
|
|
|
1140 |
lab: function (inst) {
|
|
|
1141 |
var that = this,
|
|
|
1142 |
part = null,
|
|
|
1143 |
html = function () {
|
|
|
1144 |
var html = '';
|
|
|
1145 |
|
|
|
1146 |
if (inst.options.hsv) {
|
|
|
1147 |
html += '<div class="ui-colorpicker-lab-l"><label>' + inst._getRegional('labL') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100"/></div>'
|
|
|
1148 |
+ '<div class="ui-colorpicker-lab-a"><label>' + inst._getRegional('labA') + '</label><input class="ui-colorpicker-number" type="number" min="-128" max="127"/></div>'
|
|
|
1149 |
+ '<div class="ui-colorpicker-lab-b"><label>' + inst._getRegional('labB') + '</label><input class="ui-colorpicker-number" type="number" min="-128" max="127"/></div>';
|
|
|
1150 |
}
|
|
|
1151 |
|
|
|
1152 |
return '<div class="ui-colorpicker-lab">' + html + '</div>';
|
|
|
1153 |
};
|
|
|
1154 |
|
|
|
1155 |
this.init = function () {
|
|
|
1156 |
var data = 0;
|
|
|
1157 |
|
|
|
1158 |
part = $(html()).appendTo($('.ui-colorpicker-lab-container', inst.dialog));
|
|
|
1159 |
|
|
|
1160 |
$('.ui-colorpicker-number', part).on('change keyup', function (event) {
|
|
|
1161 |
inst.color.setLAB(
|
|
|
1162 |
parseInt($('.ui-colorpicker-lab-l .ui-colorpicker-number', part).val(), 10) / 100,
|
|
|
1163 |
(parseInt($('.ui-colorpicker-lab-a .ui-colorpicker-number', part).val(), 10) + 128) / 255,
|
|
|
1164 |
(parseInt($('.ui-colorpicker-lab-b .ui-colorpicker-number', part).val(), 10) + 128) / 255
|
|
|
1165 |
);
|
|
|
1166 |
inst._change();
|
|
|
1167 |
});
|
|
|
1168 |
};
|
|
|
1169 |
|
|
|
1170 |
this.repaint = function () {
|
|
|
1171 |
var lab = inst.color.getLAB();
|
|
|
1172 |
lab.l *= 100;
|
|
|
1173 |
lab.a = (lab.a * 255) - 128;
|
|
|
1174 |
lab.b = (lab.b * 255) - 128;
|
|
|
1175 |
|
|
|
1176 |
$.each(lab, function (index, value) {
|
|
|
1177 |
var input = $('.ui-colorpicker-lab-' + index + ' .ui-colorpicker-number', part);
|
|
|
1178 |
value = Math.round(value);
|
|
|
1179 |
if (input.val() !== value) {
|
|
|
1180 |
input.val(value);
|
|
|
1181 |
}
|
|
|
1182 |
});
|
|
|
1183 |
};
|
|
|
1184 |
|
|
|
1185 |
this.update = function () {
|
|
|
1186 |
this.repaint();
|
|
|
1187 |
};
|
|
|
1188 |
|
|
|
1189 |
},
|
|
|
1190 |
|
|
|
1191 |
cmyk: function (inst) {
|
|
|
1192 |
var that = this,
|
|
|
1193 |
part = null,
|
|
|
1194 |
html = function () {
|
|
|
1195 |
var html = '';
|
|
|
1196 |
|
|
|
1197 |
if (inst.options.hsv) {
|
|
|
1198 |
html += '<div class="ui-colorpicker-cmyk-c"><label>' + inst._getRegional('cmykC') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100"/><span class="ui-colorpicker-unit">%</span></div>'
|
|
|
1199 |
+ '<div class="ui-colorpicker-cmyk-m"><label>' + inst._getRegional('cmykM') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100"/><span class="ui-colorpicker-unit">%</span></div>'
|
|
|
1200 |
+ '<div class="ui-colorpicker-cmyk-y"><label>' + inst._getRegional('cmykY') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100"/><span class="ui-colorpicker-unit">%</span></div>'
|
|
|
1201 |
+ '<div class="ui-colorpicker-cmyk-k"><label>' + inst._getRegional('cmykK') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100"/><span class="ui-colorpicker-unit">%</span></div>';
|
|
|
1202 |
}
|
|
|
1203 |
|
|
|
1204 |
return '<div class="ui-colorpicker-cmyk">' + html + '</div>';
|
|
|
1205 |
};
|
|
|
1206 |
|
|
|
1207 |
this.init = function () {
|
|
|
1208 |
part = $(html()).appendTo($('.ui-colorpicker-cmyk-container', inst.dialog));
|
|
|
1209 |
|
|
|
1210 |
$('.ui-colorpicker-number', part).on('change keyup', function (event) {
|
|
|
1211 |
inst.color.setCMYK(
|
|
|
1212 |
parseInt($('.ui-colorpicker-cmyk-c .ui-colorpicker-number', part).val(), 10) / 100,
|
|
|
1213 |
parseInt($('.ui-colorpicker-cmyk-m .ui-colorpicker-number', part).val(), 10) / 100,
|
|
|
1214 |
parseInt($('.ui-colorpicker-cmyk-y .ui-colorpicker-number', part).val(), 10) / 100,
|
|
|
1215 |
parseInt($('.ui-colorpicker-cmyk-k .ui-colorpicker-number', part).val(), 10) / 100
|
|
|
1216 |
);
|
|
|
1217 |
inst._change();
|
|
|
1218 |
});
|
|
|
1219 |
};
|
|
|
1220 |
|
|
|
1221 |
this.repaint = function () {
|
|
|
1222 |
$.each(inst.color.getCMYK(), function (index, value) {
|
|
|
1223 |
var input = $('.ui-colorpicker-cmyk-' + index + ' .ui-colorpicker-number', part);
|
|
|
1224 |
value = Math.round(value * 100);
|
|
|
1225 |
if (input.val() !== value) {
|
|
|
1226 |
input.val(value);
|
|
|
1227 |
}
|
|
|
1228 |
});
|
|
|
1229 |
};
|
|
|
1230 |
|
|
|
1231 |
this.update = function () {
|
|
|
1232 |
this.repaint();
|
|
|
1233 |
};
|
|
|
1234 |
|
|
|
1235 |
},
|
|
|
1236 |
|
|
|
1237 |
alpha: function (inst) {
|
|
|
1238 |
var that = this,
|
|
|
1239 |
e = null,
|
|
|
1240 |
_html;
|
|
|
1241 |
|
|
|
1242 |
_html = function () {
|
|
|
1243 |
var html = '';
|
|
|
1244 |
|
|
|
1245 |
if (inst.options.alpha) {
|
|
|
1246 |
html += '<div class="ui-colorpicker-a"><input class="ui-colorpicker-mode" name="mode" type="radio" value="a"/><label>' + inst._getRegional('alphaA') + '</label><input class="ui-colorpicker-number" type="number" min="0" max="100"/><span class="ui-colorpicker-unit">%</span></div>';
|
|
|
1247 |
}
|
|
|
1248 |
|
|
|
1249 |
return '<div class="ui-colorpicker-alpha">' + html + '</div>';
|
|
|
1250 |
};
|
|
|
1251 |
|
|
|
1252 |
this.init = function () {
|
|
|
1253 |
e = $(_html()).appendTo($('.ui-colorpicker-alpha-container', inst.dialog));
|
|
|
1254 |
|
|
|
1255 |
$('.ui-colorpicker-mode', e).click(function () {
|
|
|
1256 |
inst.mode = $(this).val();
|
|
|
1257 |
inst._updateAllParts();
|
|
|
1258 |
});
|
|
|
1259 |
|
|
|
1260 |
$('.ui-colorpicker-number', e).bind('change keyup', function () {
|
|
|
1261 |
inst.color.setAlpha($('.ui-colorpicker-a .ui-colorpicker-number', e).val() / 100);
|
|
|
1262 |
inst._change();
|
|
|
1263 |
});
|
|
|
1264 |
};
|
|
|
1265 |
|
|
|
1266 |
this.update = function () {
|
|
|
1267 |
$('.ui-colorpicker-mode', e).each(function () {
|
|
|
1268 |
$(this).attr('checked', $(this).val() === inst.mode);
|
|
|
1269 |
});
|
|
|
1270 |
this.repaint();
|
|
|
1271 |
};
|
|
|
1272 |
|
|
|
1273 |
this.repaint = function () {
|
|
|
1274 |
var input = $('.ui-colorpicker-a .ui-colorpicker-number', e),
|
|
|
1275 |
value = Math.round(inst.color.getAlpha() * 100);
|
|
|
1276 |
if (!input.is(':focus') && input.val() !== value) {
|
|
|
1277 |
input.val(value);
|
|
|
1278 |
}
|
|
|
1279 |
};
|
|
|
1280 |
},
|
|
|
1281 |
|
|
|
1282 |
hex: function (inst) {
|
|
|
1283 |
var that = this,
|
|
|
1284 |
e = null,
|
|
|
1285 |
_html;
|
|
|
1286 |
|
|
|
1287 |
_html = function () {
|
|
|
1288 |
var html = '';
|
|
|
1289 |
|
|
|
1290 |
if (inst.options.alpha) {
|
|
|
1291 |
html += '<input class="ui-colorpicker-hex-alpha" type="text" maxlength="2" size="2"/>';
|
|
|
1292 |
}
|
|
|
1293 |
|
|
|
1294 |
html += '<input class="ui-colorpicker-hex-input" type="text" maxlength="6" size="6"/>';
|
|
|
1295 |
|
|
|
1296 |
return '<div class="ui-colorpicker-hex"><label>#</label>' + html + '</div>';
|
|
|
1297 |
};
|
|
|
1298 |
|
|
|
1299 |
this.init = function () {
|
|
|
1300 |
e = $(_html()).appendTo($('.ui-colorpicker-hex-container', inst.dialog));
|
|
|
1301 |
|
|
|
1302 |
// repeat here makes the invalid input disappear faster
|
|
|
1303 |
$('.ui-colorpicker-hex-input', e).bind('change keydown keyup', function (a, b, c) {
|
|
|
1304 |
if (/[^a-fA-F0-9]/.test($(this).val())) {
|
|
|
1305 |
$(this).val($(this).val().replace(/[^a-fA-F0-9]/, ''));
|
|
|
1306 |
}
|
|
|
1307 |
});
|
|
|
1308 |
|
|
|
1309 |
$('.ui-colorpicker-hex-input', e).bind('change keyup', function () {
|
|
|
1310 |
// repeat here makes sure that the invalid input doesn't get parsed
|
|
|
1311 |
inst.color = _parseHex($(this).val()).setAlpha(inst.color.getAlpha());
|
|
|
1312 |
inst._change();
|
|
|
1313 |
});
|
|
|
1314 |
|
|
|
1315 |
$('.ui-colorpicker-hex-alpha', e).bind('change keydown keyup', function () {
|
|
|
1316 |
if (/[^a-fA-F0-9]/.test($(this).val())) {
|
|
|
1317 |
$(this).val($(this).val().replace(/[^a-fA-F0-9]/, ''));
|
|
|
1318 |
}
|
|
|
1319 |
});
|
|
|
1320 |
|
|
|
1321 |
$('.ui-colorpicker-hex-alpha', e).bind('change keyup', function () {
|
|
|
1322 |
inst.color.setAlpha(parseInt($('.ui-colorpicker-hex-alpha', e).val(), 16) / 255);
|
|
|
1323 |
inst._change();
|
|
|
1324 |
});
|
|
|
1325 |
};
|
|
|
1326 |
|
|
|
1327 |
this.update = function () {
|
|
|
1328 |
this.repaint();
|
|
|
1329 |
};
|
|
|
1330 |
|
|
|
1331 |
this.repaint = function () {
|
|
|
1332 |
if (!$('.ui-colorpicker-hex-input', e).is(':focus')) {
|
|
|
1333 |
$('.ui-colorpicker-hex-input', e).val(inst.color.toHex(true));
|
|
|
1334 |
}
|
|
|
1335 |
|
|
|
1336 |
if (!$('.ui-colorpicker-hex-alpha', e).is(':focus')) {
|
|
|
1337 |
$('.ui-colorpicker-hex-alpha', e).val(_intToHex(inst.color.getAlpha() * 255));
|
|
|
1338 |
}
|
|
|
1339 |
};
|
|
|
1340 |
},
|
|
|
1341 |
|
|
|
1342 |
swatches: function (inst) {
|
|
|
1343 |
var that = this,
|
|
|
1344 |
part = null,
|
|
|
1345 |
html = function () {
|
|
|
1346 |
var html = '';
|
|
|
1347 |
|
|
|
1348 |
$.each(inst.options.swatches, function (name, color) {
|
|
|
1349 |
var c = new Color(color.r, color.g, color.b),
|
|
|
1350 |
css = c.toCSS();
|
|
|
1351 |
html += '<div class="ui-colorpicker-swatch" style="background-color: ' + css + '" title="' + name + '"></div>';
|
|
|
1352 |
});
|
|
|
1353 |
|
|
|
1354 |
return '<div class="ui-colorpicker-swatches ui-colorpicker-border">' + html + '</div>';
|
|
|
1355 |
};
|
|
|
1356 |
|
|
|
1357 |
this.init = function () {
|
|
|
1358 |
part = $(html()).appendTo($('.ui-colorpicker-swatches-container', inst.dialog));
|
|
|
1359 |
|
|
|
1360 |
$('.ui-colorpicker-swatch', part).click(function () {
|
|
|
1361 |
inst.color = _parseColor($(this).css('background-color'));
|
|
|
1362 |
inst._change();
|
|
|
1363 |
});
|
|
|
1364 |
};
|
|
|
1365 |
},
|
|
|
1366 |
|
|
|
1367 |
footer: function (inst) {
|
|
|
1368 |
var that = this,
|
|
|
1369 |
part = null,
|
|
|
1370 |
id_transparent = 'ui-colorpicker-special-transparent-'+_colorpicker_index,
|
|
|
1371 |
id_none = 'ui-colorpicker-special-none-'+_colorpicker_index,
|
|
|
1372 |
html = function () {
|
|
|
1373 |
var html = '';
|
|
|
1374 |
|
|
|
1375 |
if (inst.options.alpha || (!inst.inline && inst.options.showNoneButton)) {
|
|
|
1376 |
html += '<div class="ui-colorpicker-buttonset">';
|
|
|
1377 |
|
|
|
1378 |
if (inst.options.alpha) {
|
|
|
1379 |
html += '<input type="radio" name="ui-colorpicker-special" id="'+id_transparent+'" class="ui-colorpicker-special-transparent"/><label for="'+id_transparent+'">' + inst._getRegional('transparent') + '</label>';
|
|
|
1380 |
}
|
|
|
1381 |
if (!inst.inline && inst.options.showNoneButton) {
|
|
|
1382 |
html += '<input type="radio" name="ui-colorpicker-special" id="'+id_none+'" class="ui-colorpicker-special-none"><label for="'+id_none+'">' + inst._getRegional('none') + '</label>';
|
|
|
1383 |
}
|
|
|
1384 |
html += '</div>';
|
|
|
1385 |
}
|
|
|
1386 |
|
|
|
1387 |
if (!inst.inline) {
|
|
|
1388 |
html += '<div class="ui-dialog-buttonset">';
|
|
|
1389 |
if (inst.options.showCancelButton) {
|
|
|
1390 |
html += '<button class="ui-colorpicker-cancel">' + inst._getRegional('cancel') + '</button>';
|
|
|
1391 |
}
|
|
|
1392 |
html += '<button class="ui-colorpicker-ok">' + inst._getRegional('ok') + '</button>';
|
|
|
1393 |
html += '</div>';
|
|
|
1394 |
}
|
|
|
1395 |
|
|
|
1396 |
return '<div class="ui-dialog-buttonpane ui-widget-content">' + html + '</div>';
|
|
|
1397 |
};
|
|
|
1398 |
|
|
|
1399 |
this.init = function () {
|
|
|
1400 |
part = $(html()).appendTo(inst.dialog);
|
|
|
1401 |
|
|
|
1402 |
$('.ui-colorpicker-ok', part).button().click(function () {
|
|
|
1403 |
inst.close();
|
|
|
1404 |
});
|
|
|
1405 |
|
|
|
1406 |
$('.ui-colorpicker-cancel', part).button().click(function () {
|
|
|
1407 |
inst.color = inst.currentColor.copy();
|
|
|
1408 |
inst._change(inst.color.set);
|
|
|
1409 |
inst.close();
|
|
|
1410 |
});
|
|
|
1411 |
|
|
|
1412 |
//inst._getRegional('transparent')
|
|
|
1413 |
$('.ui-colorpicker-buttonset', part).buttonset();
|
|
|
1414 |
|
|
|
1415 |
$('.ui-colorpicker-special-color', part).click(function () {
|
|
|
1416 |
inst._change();
|
|
|
1417 |
});
|
|
|
1418 |
|
|
|
1419 |
$('#'+id_none, part).click(function () {
|
|
|
1420 |
inst._change(false);
|
|
|
1421 |
});
|
|
|
1422 |
|
|
|
1423 |
$('#'+id_transparent, part).click(function () {
|
|
|
1424 |
inst.color.setAlpha(0);
|
|
|
1425 |
inst._change();
|
|
|
1426 |
});
|
|
|
1427 |
};
|
|
|
1428 |
|
|
|
1429 |
this.repaint = function () {
|
|
|
1430 |
if (!inst.color.set) {
|
|
|
1431 |
$('.ui-colorpicker-special-none', part).attr('checked', true).button( "refresh" );
|
|
|
1432 |
} else if (inst.color.getAlpha() == 0) {
|
|
|
1433 |
$('.ui-colorpicker-special-transparent', part).attr('checked', true).button( "refresh" );
|
|
|
1434 |
} else {
|
|
|
1435 |
$('input', part).attr('checked', false).button( "refresh" );
|
|
|
1436 |
}
|
|
|
1437 |
|
|
|
1438 |
$('.ui-colorpicker-cancel', part).button(inst.changed ? 'enable' : 'disable');
|
|
|
1439 |
};
|
|
|
1440 |
|
|
|
1441 |
this.update = function () {};
|
|
|
1442 |
}
|
|
|
1443 |
},
|
|
|
1444 |
|
|
|
1445 |
Color = function () {
|
|
|
1446 |
var spaces = { rgb: {r: 0, g: 0, b: 0},
|
|
|
1447 |
hsv: {h: 0, s: 0, v: 0},
|
|
|
1448 |
hsl: {h: 0, s: 0, l: 0},
|
|
|
1449 |
lab: {l: 0, a: 0, b: 0},
|
|
|
1450 |
cmyk: {c: 0, m: 0, y: 0, k: 1}
|
|
|
1451 |
},
|
|
|
1452 |
a = 1,
|
|
|
1453 |
args = arguments,
|
|
|
1454 |
_clip = function(v) {
|
|
|
1455 |
if (isNaN(v) || v === null) {
|
|
|
1456 |
return 0;
|
|
|
1457 |
}
|
|
|
1458 |
if (typeof v == 'string') {
|
|
|
1459 |
v = parseInt(v, 10);
|
|
|
1460 |
}
|
|
|
1461 |
return Math.max(0, Math.min(v, 1));
|
|
|
1462 |
},
|
|
|
1463 |
_hexify = function (number) {
|
|
|
1464 |
var digits = '0123456789abcdef',
|
|
|
1465 |
lsd = number % 16,
|
|
|
1466 |
msd = (number - lsd) / 16,
|
|
|
1467 |
hexified = digits.charAt(msd) + digits.charAt(lsd);
|
|
|
1468 |
return hexified;
|
|
|
1469 |
},
|
|
|
1470 |
_rgb_to_xyz = function(rgb) {
|
|
|
1471 |
var r = (rgb.r > 0.04045) ? Math.pow((rgb.r + 0.055) / 1.055, 2.4) : rgb.r / 12.92,
|
|
|
1472 |
g = (rgb.g > 0.04045) ? Math.pow((rgb.g + 0.055) / 1.055, 2.4) : rgb.g / 12.92,
|
|
|
1473 |
b = (rgb.b > 0.04045) ? Math.pow((rgb.b + 0.055) / 1.055, 2.4) : rgb.b / 12.92;
|
|
|
1474 |
|
|
|
1475 |
return {
|
|
|
1476 |
x: r * 0.4124 + g * 0.3576 + b * 0.1805,
|
|
|
1477 |
y: r * 0.2126 + g * 0.7152 + b * 0.0722,
|
|
|
1478 |
z: r * 0.0193 + g * 0.1192 + b * 0.9505
|
|
|
1479 |
};
|
|
|
1480 |
},
|
|
|
1481 |
_xyz_to_rgb = function(xyz) {
|
|
|
1482 |
var rgb = {
|
|
|
1483 |
r: xyz.x * 3.2406 + xyz.y * -1.5372 + xyz.z * -0.4986,
|
|
|
1484 |
g: xyz.x * -0.9689 + xyz.y * 1.8758 + xyz.z * 0.0415,
|
|
|
1485 |
b: xyz.x * 0.0557 + xyz.y * -0.2040 + xyz.z * 1.0570
|
|
|
1486 |
};
|
|
|
1487 |
|
|
|
1488 |
rgb.r = (rgb.r > 0.0031308) ? 1.055 * Math.pow(rgb.r, (1 / 2.4)) - 0.055 : 12.92 * rgb.r;
|
|
|
1489 |
rgb.g = (rgb.g > 0.0031308) ? 1.055 * Math.pow(rgb.g, (1 / 2.4)) - 0.055 : 12.92 * rgb.g;
|
|
|
1490 |
rgb.b = (rgb.b > 0.0031308) ? 1.055 * Math.pow(rgb.b, (1 / 2.4)) - 0.055 : 12.92 * rgb.b;
|
|
|
1491 |
|
|
|
1492 |
return rgb;
|
|
|
1493 |
},
|
|
|
1494 |
_rgb_to_hsv = function(rgb) {
|
|
|
1495 |
var minVal = Math.min(rgb.r, rgb.g, rgb.b),
|
|
|
1496 |
maxVal = Math.max(rgb.r, rgb.g, rgb.b),
|
|
|
1497 |
delta = maxVal - minVal,
|
|
|
1498 |
del_R, del_G, del_B,
|
|
|
1499 |
hsv = {
|
|
|
1500 |
h: 0,
|
|
|
1501 |
s: 0,
|
|
|
1502 |
v: maxVal
|
|
|
1503 |
};
|
|
|
1504 |
|
|
|
1505 |
if (delta === 0) {
|
|
|
1506 |
hsv.h = 0;
|
|
|
1507 |
hsv.s = 0;
|
|
|
1508 |
} else {
|
|
|
1509 |
hsv.s = delta / maxVal;
|
|
|
1510 |
|
|
|
1511 |
del_R = (((maxVal - rgb.r) / 6) + (delta / 2)) / delta;
|
|
|
1512 |
del_G = (((maxVal - rgb.g) / 6) + (delta / 2)) / delta;
|
|
|
1513 |
del_B = (((maxVal - rgb.b) / 6) + (delta / 2)) / delta;
|
|
|
1514 |
|
|
|
1515 |
if (rgb.r === maxVal) {
|
|
|
1516 |
hsv.h = del_B - del_G;
|
|
|
1517 |
} else if (rgb.g === maxVal) {
|
|
|
1518 |
hsv.h = (1 / 3) + del_R - del_B;
|
|
|
1519 |
} else if (rgb.b === maxVal) {
|
|
|
1520 |
hsv.h = (2 / 3) + del_G - del_R;
|
|
|
1521 |
}
|
|
|
1522 |
|
|
|
1523 |
if (hsv.h < 0) {
|
|
|
1524 |
hsv.h += 1;
|
|
|
1525 |
} else if (hsv.h > 1) {
|
|
|
1526 |
hsv.h -= 1;
|
|
|
1527 |
}
|
|
|
1528 |
}
|
|
|
1529 |
|
|
|
1530 |
return hsv;
|
|
|
1531 |
},
|
|
|
1532 |
_hsv_to_rgb = function(hsv) {
|
|
|
1533 |
var rgb = {
|
|
|
1534 |
r: 0,
|
|
|
1535 |
g: 0,
|
|
|
1536 |
b: 0
|
|
|
1537 |
},
|
|
|
1538 |
var_h,
|
|
|
1539 |
var_i,
|
|
|
1540 |
var_1,
|
|
|
1541 |
var_2,
|
|
|
1542 |
var_3;
|
|
|
1543 |
|
|
|
1544 |
if (hsv.s === 0) {
|
|
|
1545 |
rgb.r = rgb.g = rgb.b = hsv.v;
|
|
|
1546 |
} else {
|
|
|
1547 |
var_h = hsv.h === 1 ? 0 : hsv.h * 6;
|
|
|
1548 |
var_i = Math.floor(var_h);
|
|
|
1549 |
var_1 = hsv.v * (1 - hsv.s);
|
|
|
1550 |
var_2 = hsv.v * (1 - hsv.s * (var_h - var_i));
|
|
|
1551 |
var_3 = hsv.v * (1 - hsv.s * (1 - (var_h - var_i)));
|
|
|
1552 |
|
|
|
1553 |
if (var_i === 0) {
|
|
|
1554 |
rgb.r = hsv.v;
|
|
|
1555 |
rgb.g = var_3;
|
|
|
1556 |
rgb.b = var_1;
|
|
|
1557 |
} else if (var_i === 1) {
|
|
|
1558 |
rgb.r = var_2;
|
|
|
1559 |
rgb.g = hsv.v;
|
|
|
1560 |
rgb.b = var_1;
|
|
|
1561 |
} else if (var_i === 2) {
|
|
|
1562 |
rgb.r = var_1;
|
|
|
1563 |
rgb.g = hsv.v;
|
|
|
1564 |
rgb.b = var_3;
|
|
|
1565 |
} else if (var_i === 3) {
|
|
|
1566 |
rgb.r = var_1;
|
|
|
1567 |
rgb.g = var_2;
|
|
|
1568 |
rgb.b = hsv.v;
|
|
|
1569 |
} else if (var_i === 4) {
|
|
|
1570 |
rgb.r = var_3;
|
|
|
1571 |
rgb.g = var_1;
|
|
|
1572 |
rgb.b = hsv.v;
|
|
|
1573 |
} else {
|
|
|
1574 |
rgb.r = hsv.v;
|
|
|
1575 |
rgb.g = var_1;
|
|
|
1576 |
rgb.b = var_2;
|
|
|
1577 |
}
|
|
|
1578 |
}
|
|
|
1579 |
|
|
|
1580 |
return rgb;
|
|
|
1581 |
},
|
|
|
1582 |
_rgb_to_hsl = function(rgb) {
|
|
|
1583 |
var minVal = Math.min(rgb.r, rgb.g, rgb.b),
|
|
|
1584 |
maxVal = Math.max(rgb.r, rgb.g, rgb.b),
|
|
|
1585 |
delta = maxVal - minVal,
|
|
|
1586 |
del_R, del_G, del_B,
|
|
|
1587 |
hsl = {
|
|
|
1588 |
h: 0,
|
|
|
1589 |
s: 0,
|
|
|
1590 |
l: (maxVal + minVal) / 2
|
|
|
1591 |
};
|
|
|
1592 |
|
|
|
1593 |
if (delta === 0) {
|
|
|
1594 |
hsl.h = 0;
|
|
|
1595 |
hsl.s = 0;
|
|
|
1596 |
} else {
|
|
|
1597 |
hsl.s = hsl.l < 0.5 ? delta / (maxVal + minVal) : delta / (2 - maxVal - minVal);
|
|
|
1598 |
|
|
|
1599 |
del_R = (((maxVal - rgb.r) / 6) + (delta / 2)) / delta;
|
|
|
1600 |
del_G = (((maxVal - rgb.g) / 6) + (delta / 2)) / delta;
|
|
|
1601 |
del_B = (((maxVal - rgb.b) / 6) + (delta / 2)) / delta;
|
|
|
1602 |
|
|
|
1603 |
if (rgb.r === maxVal) {
|
|
|
1604 |
hsl.h = del_B - del_G;
|
|
|
1605 |
} else if (rgb.g === maxVal) {
|
|
|
1606 |
hsl.h = (1 / 3) + del_R - del_B;
|
|
|
1607 |
} else if (rgb.b === maxVal) {
|
|
|
1608 |
hsl.h = (2 / 3) + del_G - del_R;
|
|
|
1609 |
}
|
|
|
1610 |
|
|
|
1611 |
if (hsl.h < 0) {
|
|
|
1612 |
hsl.h += 1;
|
|
|
1613 |
} else if (hsl.h > 1) {
|
|
|
1614 |
hsl.h -= 1;
|
|
|
1615 |
}
|
|
|
1616 |
}
|
|
|
1617 |
|
|
|
1618 |
return hsl;
|
|
|
1619 |
},
|
|
|
1620 |
_hsl_to_rgb = function(hsl) {
|
|
|
1621 |
var var_1,
|
|
|
1622 |
var_2,
|
|
|
1623 |
hue_to_rgb = function(v1, v2, vH) {
|
|
|
1624 |
if (vH < 0) {
|
|
|
1625 |
vH += 1;
|
|
|
1626 |
}
|
|
|
1627 |
if (vH > 1) {
|
|
|
1628 |
vH -= 1;
|
|
|
1629 |
}
|
|
|
1630 |
if ((6 * vH) < 1) {
|
|
|
1631 |
return v1 + (v2 - v1) * 6 * vH;
|
|
|
1632 |
}
|
|
|
1633 |
if ((2 * vH) < 1) {
|
|
|
1634 |
return v2;
|
|
|
1635 |
}
|
|
|
1636 |
if ((3 * vH) < 2) {
|
|
|
1637 |
return v1 + (v2 - v1) * ((2 / 3) - vH) * 6;
|
|
|
1638 |
}
|
|
|
1639 |
return v1;
|
|
|
1640 |
};
|
|
|
1641 |
|
|
|
1642 |
if (hsl.s === 0) {
|
|
|
1643 |
return {
|
|
|
1644 |
r: hsl.l,
|
|
|
1645 |
g: hsl.l,
|
|
|
1646 |
b: hsl.l
|
|
|
1647 |
};
|
|
|
1648 |
}
|
|
|
1649 |
|
|
|
1650 |
var_2 = (hsl.l < 0.5) ? hsl.l * (1 + hsl.s) : (hsl.l + hsl.s) - (hsl.s * hsl.l);
|
|
|
1651 |
var_1 = 2 * hsl.l - var_2;
|
|
|
1652 |
|
|
|
1653 |
return {
|
|
|
1654 |
r: hue_to_rgb(var_1, var_2, hsl.h + (1 / 3)),
|
|
|
1655 |
g: hue_to_rgb(var_1, var_2, hsl.h),
|
|
|
1656 |
b: hue_to_rgb(var_1, var_2, hsl.h - (1 / 3))
|
|
|
1657 |
};
|
|
|
1658 |
},
|
|
|
1659 |
_xyz_to_lab = function(xyz) {
|
|
|
1660 |
// CIE-L*ab D65 1931
|
|
|
1661 |
var x = xyz.x / 0.95047,
|
|
|
1662 |
y = xyz.y,
|
|
|
1663 |
z = xyz.z / 1.08883;
|
|
|
1664 |
|
|
|
1665 |
x = (x > 0.008856) ? Math.pow(x, (1/3)) : (7.787 * x) + (16/116);
|
|
|
1666 |
y = (y > 0.008856) ? Math.pow(y, (1/3)) : (7.787 * y) + (16/116);
|
|
|
1667 |
z = (z > 0.008856) ? Math.pow(z, (1/3)) : (7.787 * z) + (16/116);
|
|
|
1668 |
|
|
|
1669 |
return {
|
|
|
1670 |
l: ((116 * y) - 16) / 100, // [0,100]
|
|
|
1671 |
a: ((500 * (x - y)) + 128) / 255, // [-128,127]
|
|
|
1672 |
b: ((200 * (y - z)) + 128) / 255 // [-128,127]
|
|
|
1673 |
};
|
|
|
1674 |
},
|
|
|
1675 |
_lab_to_xyz = function(lab) {
|
|
|
1676 |
var lab2 = {
|
|
|
1677 |
l: lab.l * 100,
|
|
|
1678 |
a: (lab.a * 255) - 128,
|
|
|
1679 |
b: (lab.b * 255) - 128
|
|
|
1680 |
},
|
|
|
1681 |
xyz = {
|
|
|
1682 |
x: 0,
|
|
|
1683 |
y: (lab2.l + 16) / 116,
|
|
|
1684 |
z: 0
|
|
|
1685 |
};
|
|
|
1686 |
|
|
|
1687 |
xyz.x = lab2.a / 500 + xyz.y;
|
|
|
1688 |
xyz.z = xyz.y - lab2.b / 200;
|
|
|
1689 |
|
|
|
1690 |
xyz.x = (Math.pow(xyz.x, 3) > 0.008856) ? Math.pow(xyz.x, 3) : (xyz.x - 16 / 116) / 7.787;
|
|
|
1691 |
xyz.y = (Math.pow(xyz.y, 3) > 0.008856) ? Math.pow(xyz.y, 3) : (xyz.y - 16 / 116) / 7.787;
|
|
|
1692 |
xyz.z = (Math.pow(xyz.z, 3) > 0.008856) ? Math.pow(xyz.z, 3) : (xyz.z - 16 / 116) / 7.787;
|
|
|
1693 |
|
|
|
1694 |
xyz.x *= 0.95047;
|
|
|
1695 |
xyz.y *= 1;
|
|
|
1696 |
xyz.z *= 1.08883;
|
|
|
1697 |
|
|
|
1698 |
return xyz;
|
|
|
1699 |
},
|
|
|
1700 |
_rgb_to_cmy = function(rgb) {
|
|
|
1701 |
return {
|
|
|
1702 |
c: 1 - (rgb.r),
|
|
|
1703 |
m: 1 - (rgb.g),
|
|
|
1704 |
y: 1 - (rgb.b)
|
|
|
1705 |
};
|
|
|
1706 |
},
|
|
|
1707 |
_cmy_to_rgb = function(cmy) {
|
|
|
1708 |
return {
|
|
|
1709 |
r: 1 - (cmy.c),
|
|
|
1710 |
g: 1 - (cmy.m),
|
|
|
1711 |
b: 1 - (cmy.y)
|
|
|
1712 |
};
|
|
|
1713 |
},
|
|
|
1714 |
_cmy_to_cmyk = function(cmy) {
|
|
|
1715 |
var K = 1;
|
|
|
1716 |
|
|
|
1717 |
if (cmy.c < K) {
|
|
|
1718 |
K = cmy.c;
|
|
|
1719 |
}
|
|
|
1720 |
if (cmy.m < K) {
|
|
|
1721 |
K = cmy.m;
|
|
|
1722 |
}
|
|
|
1723 |
if (cmy.y < K) {
|
|
|
1724 |
K = cmy.y;
|
|
|
1725 |
}
|
|
|
1726 |
|
|
|
1727 |
if (K == 1) {
|
|
|
1728 |
return {
|
|
|
1729 |
c: 0,
|
|
|
1730 |
m: 0,
|
|
|
1731 |
y: 0,
|
|
|
1732 |
k: 1
|
|
|
1733 |
};
|
|
|
1734 |
}
|
|
|
1735 |
|
|
|
1736 |
return {
|
|
|
1737 |
c: (cmy.c - K) / (1 - K),
|
|
|
1738 |
m: (cmy.m - K) / (1 - K),
|
|
|
1739 |
y: (cmy.y - K) / (1 - K),
|
|
|
1740 |
k: K
|
|
|
1741 |
};
|
|
|
1742 |
},
|
|
|
1743 |
_cmyk_to_cmy = function(cmyk) {
|
|
|
1744 |
return {
|
|
|
1745 |
c: cmyk.c * (1 - cmyk.k) + cmyk.k,
|
|
|
1746 |
m: cmyk.m * (1 - cmyk.k) + cmyk.k,
|
|
|
1747 |
y: cmyk.y * (1 - cmyk.k) + cmyk.k
|
|
|
1748 |
};
|
|
|
1749 |
};
|
|
|
1750 |
|
|
|
1751 |
this.set = true;
|
|
|
1752 |
|
|
|
1753 |
this.setAlpha = function(_a) {
|
|
|
1754 |
if (_a !== null) {
|
|
|
1755 |
a = _clip(_a);
|
|
|
1756 |
}
|
|
|
1757 |
|
|
|
1758 |
return this;
|
|
|
1759 |
};
|
|
|
1760 |
|
|
|
1761 |
this.getAlpha = function() {
|
|
|
1762 |
return a;
|
|
|
1763 |
};
|
|
|
1764 |
|
|
|
1765 |
this.setRGB = function(r, g, b) {
|
|
|
1766 |
spaces = {rgb: this.getRGB()};
|
|
|
1767 |
if (r !== null) {
|
|
|
1768 |
spaces.rgb.r = _clip(r);
|
|
|
1769 |
}
|
|
|
1770 |
if (g !== null) {
|
|
|
1771 |
spaces.rgb.g = _clip(g);
|
|
|
1772 |
}
|
|
|
1773 |
if (b !== null) {
|
|
|
1774 |
spaces.rgb.b = _clip(b);
|
|
|
1775 |
}
|
|
|
1776 |
|
|
|
1777 |
return this;
|
|
|
1778 |
};
|
|
|
1779 |
|
|
|
1780 |
this.setHSV = function(h, s, v) {
|
|
|
1781 |
spaces = {hsv: this.getHSV()};
|
|
|
1782 |
if (h !== null) {
|
|
|
1783 |
spaces.hsv.h = _clip(h);
|
|
|
1784 |
}
|
|
|
1785 |
if (s !== null) {
|
|
|
1786 |
spaces.hsv.s = _clip(s);
|
|
|
1787 |
}
|
|
|
1788 |
if (v !== null) {
|
|
|
1789 |
spaces.hsv.v = _clip(v);
|
|
|
1790 |
}
|
|
|
1791 |
|
|
|
1792 |
return this;
|
|
|
1793 |
};
|
|
|
1794 |
|
|
|
1795 |
this.setHSL = function(h, s, l) {
|
|
|
1796 |
spaces = {hsl: this.getHSL()};
|
|
|
1797 |
if (h !== null) {
|
|
|
1798 |
spaces.hsl.h = _clip(h);
|
|
|
1799 |
}
|
|
|
1800 |
if (s !== null) {
|
|
|
1801 |
spaces.hsl.s = _clip(s);
|
|
|
1802 |
}
|
|
|
1803 |
if (l !== null) {
|
|
|
1804 |
spaces.hsl.l = _clip(l);
|
|
|
1805 |
}
|
|
|
1806 |
|
|
|
1807 |
return this;
|
|
|
1808 |
};
|
|
|
1809 |
|
|
|
1810 |
this.setLAB = function(l, a, b) {
|
|
|
1811 |
spaces = {lab: this.getLAB()};
|
|
|
1812 |
if (l !== null) {
|
|
|
1813 |
spaces.lab.l = _clip(l);
|
|
|
1814 |
}
|
|
|
1815 |
if (a !== null) {
|
|
|
1816 |
spaces.lab.a = _clip(a);
|
|
|
1817 |
}
|
|
|
1818 |
if (b !== null) {
|
|
|
1819 |
spaces.lab.b = _clip(b);
|
|
|
1820 |
}
|
|
|
1821 |
|
|
|
1822 |
return this;
|
|
|
1823 |
};
|
|
|
1824 |
|
|
|
1825 |
this.setCMYK = function(c, m, y, k) {
|
|
|
1826 |
spaces = {cmyk: this.getCMYK()};
|
|
|
1827 |
if (c !== null) {
|
|
|
1828 |
spaces.cmyk.c = _clip(c);
|
|
|
1829 |
}
|
|
|
1830 |
if (m !== null) {
|
|
|
1831 |
spaces.cmyk.m = _clip(m);
|
|
|
1832 |
}
|
|
|
1833 |
if (y !== null) {
|
|
|
1834 |
spaces.cmyk.y = _clip(y);
|
|
|
1835 |
}
|
|
|
1836 |
if (k !== null) {
|
|
|
1837 |
spaces.cmyk.k = _clip(k);
|
|
|
1838 |
}
|
|
|
1839 |
|
|
|
1840 |
return this;
|
|
|
1841 |
};
|
|
|
1842 |
|
|
|
1843 |
this.getRGB = function() {
|
|
|
1844 |
if (!spaces.rgb) {
|
|
|
1845 |
spaces.rgb = spaces.lab ? _xyz_to_rgb(_lab_to_xyz(spaces.lab))
|
|
|
1846 |
: spaces.hsv ? _hsv_to_rgb(spaces.hsv)
|
|
|
1847 |
: spaces.hsl ? _hsl_to_rgb(spaces.hsl)
|
|
|
1848 |
: spaces.cmyk ? _cmy_to_rgb(_cmyk_to_cmy(spaces.cmyk))
|
|
|
1849 |
: {r: 0, g: 0, b: 0};
|
|
|
1850 |
spaces.rgb.r = _clip(spaces.rgb.r);
|
|
|
1851 |
spaces.rgb.g = _clip(spaces.rgb.g);
|
|
|
1852 |
spaces.rgb.b = _clip(spaces.rgb.b);
|
|
|
1853 |
}
|
|
|
1854 |
return $.extend({}, spaces.rgb);
|
|
|
1855 |
};
|
|
|
1856 |
|
|
|
1857 |
this.getHSV = function() {
|
|
|
1858 |
if (!spaces.hsv) {
|
|
|
1859 |
spaces.hsv = spaces.lab ? _rgb_to_hsv(this.getRGB())
|
|
|
1860 |
: spaces.rgb ? _rgb_to_hsv(spaces.rgb)
|
|
|
1861 |
: spaces.hsl ? _rgb_to_hsv(this.getRGB())
|
|
|
1862 |
: spaces.cmyk ? _rgb_to_hsv(this.getRGB())
|
|
|
1863 |
: {h: 0, s: 0, v: 0};
|
|
|
1864 |
spaces.hsv.h = _clip(spaces.hsv.h);
|
|
|
1865 |
spaces.hsv.s = _clip(spaces.hsv.s);
|
|
|
1866 |
spaces.hsv.v = _clip(spaces.hsv.v);
|
|
|
1867 |
}
|
|
|
1868 |
return $.extend({}, spaces.hsv);
|
|
|
1869 |
};
|
|
|
1870 |
|
|
|
1871 |
this.getHSL = function() {
|
|
|
1872 |
if (!spaces.hsl) {
|
|
|
1873 |
spaces.hsl = spaces.rgb ? _rgb_to_hsl(spaces.rgb)
|
|
|
1874 |
: spaces.hsv ? _rgb_to_hsl(this.getRGB())
|
|
|
1875 |
: spaces.cmyk ? _rgb_to_hsl(this.getRGB())
|
|
|
1876 |
: spaces.hsv ? _rgb_to_hsl(this.getRGB())
|
|
|
1877 |
: {h: 0, s: 0, l: 0};
|
|
|
1878 |
spaces.hsl.h = _clip(spaces.hsl.h);
|
|
|
1879 |
spaces.hsl.s = _clip(spaces.hsl.s);
|
|
|
1880 |
spaces.hsl.l = _clip(spaces.hsl.l);
|
|
|
1881 |
}
|
|
|
1882 |
return $.extend({}, spaces.hsl);
|
|
|
1883 |
};
|
|
|
1884 |
|
|
|
1885 |
this.getCMYK = function() {
|
|
|
1886 |
if (!spaces.cmyk) {
|
|
|
1887 |
spaces.cmyk = spaces.rgb ? _cmy_to_cmyk(_rgb_to_cmy(spaces.rgb))
|
|
|
1888 |
: spaces.hsv ? _cmy_to_cmyk(_rgb_to_cmy(this.getRGB()))
|
|
|
1889 |
: spaces.hsl ? _cmy_to_cmyk(_rgb_to_cmy(this.getRGB()))
|
|
|
1890 |
: spaces.lab ? _cmy_to_cmyk(_rgb_to_cmy(this.getRGB()))
|
|
|
1891 |
: {c: 0, m: 0, y: 0, k: 1};
|
|
|
1892 |
spaces.cmyk.c = _clip(spaces.cmyk.c);
|
|
|
1893 |
spaces.cmyk.m = _clip(spaces.cmyk.m);
|
|
|
1894 |
spaces.cmyk.y = _clip(spaces.cmyk.y);
|
|
|
1895 |
spaces.cmyk.k = _clip(spaces.cmyk.k);
|
|
|
1896 |
}
|
|
|
1897 |
return $.extend({}, spaces.cmyk);
|
|
|
1898 |
};
|
|
|
1899 |
|
|
|
1900 |
this.getLAB = function() {
|
|
|
1901 |
if (!spaces.lab) {
|
|
|
1902 |
spaces.lab = spaces.rgb ? _xyz_to_lab(_rgb_to_xyz(spaces.rgb))
|
|
|
1903 |
: spaces.hsv ? _xyz_to_lab(_rgb_to_xyz(this.getRGB()))
|
|
|
1904 |
: spaces.hsl ? _xyz_to_lab(_rgb_to_xyz(this.getRGB()))
|
|
|
1905 |
: spaces.cmyk ? _xyz_to_lab(_rgb_to_xyz(this.getRGB()))
|
|
|
1906 |
: {l: 0, a: 0, b: 0};
|
|
|
1907 |
spaces.lab.l = _clip(spaces.lab.l);
|
|
|
1908 |
spaces.lab.a = _clip(spaces.lab.a);
|
|
|
1909 |
spaces.lab.b = _clip(spaces.lab.b);
|
|
|
1910 |
}
|
|
|
1911 |
return $.extend({}, spaces.lab);
|
|
|
1912 |
};
|
|
|
1913 |
|
|
|
1914 |
this.getChannels = function() {
|
|
|
1915 |
return {
|
|
|
1916 |
r: this.getRGB().r,
|
|
|
1917 |
g: this.getRGB().g,
|
|
|
1918 |
b: this.getRGB().b,
|
|
|
1919 |
a: this.getAlpha(),
|
|
|
1920 |
h: this.getHSV().h,
|
|
|
1921 |
s: this.getHSV().s,
|
|
|
1922 |
v: this.getHSV().v,
|
|
|
1923 |
c: this.getCMYK().c,
|
|
|
1924 |
m: this.getCMYK().m,
|
|
|
1925 |
y: this.getCMYK().y,
|
|
|
1926 |
k: this.getCMYK().k,
|
|
|
1927 |
L: this.getLAB().l,
|
|
|
1928 |
A: this.getLAB().a,
|
|
|
1929 |
B: this.getLAB().b
|
|
|
1930 |
};
|
|
|
1931 |
};
|
|
|
1932 |
|
|
|
1933 |
this.getSpaces = function() {
|
|
|
1934 |
return $.extend(true, {}, spaces);
|
|
|
1935 |
};
|
|
|
1936 |
|
|
|
1937 |
this.setSpaces = function(new_spaces) {
|
|
|
1938 |
spaces = new_spaces;
|
|
|
1939 |
return this;
|
|
|
1940 |
};
|
|
|
1941 |
|
|
|
1942 |
this.distance = function(color) {
|
|
|
1943 |
var space = 'lab',
|
|
|
1944 |
getter = 'get'+space.toUpperCase(),
|
|
|
1945 |
a = this[getter](),
|
|
|
1946 |
b = color[getter](),
|
|
|
1947 |
distance = 0,
|
|
|
1948 |
channel;
|
|
|
1949 |
|
|
|
1950 |
for (channel in a) {
|
|
|
1951 |
distance += Math.pow(a[channel] - b[channel], 2);
|
|
|
1952 |
}
|
|
|
1953 |
|
|
|
1954 |
return distance;
|
|
|
1955 |
};
|
|
|
1956 |
|
|
|
1957 |
this.equals = function(color) {
|
|
|
1958 |
var a = this.getRGB(),
|
|
|
1959 |
b = color.getRGB();
|
|
|
1960 |
|
|
|
1961 |
return this.getAlpha() == color.getAlpha()
|
|
|
1962 |
&& a.r == b.r
|
|
|
1963 |
&& a.g == b.g
|
|
|
1964 |
&& a.b == b.b;
|
|
|
1965 |
};
|
|
|
1966 |
|
|
|
1967 |
this.limit = function(steps) {
|
|
|
1968 |
steps -= 1;
|
|
|
1969 |
var rgb = this.getRGB();
|
|
|
1970 |
this.setRGB(
|
|
|
1971 |
Math.round(rgb.r * steps) / steps,
|
|
|
1972 |
Math.round(rgb.g * steps) / steps,
|
|
|
1973 |
Math.round(rgb.b * steps) / steps
|
|
|
1974 |
);
|
|
|
1975 |
};
|
|
|
1976 |
|
|
|
1977 |
this.toHex = function() {
|
|
|
1978 |
var rgb = this.getRGB();
|
|
|
1979 |
return _hexify(rgb.r * 255) + _hexify(rgb.g * 255) + _hexify(rgb.b * 255);
|
|
|
1980 |
};
|
|
|
1981 |
|
|
|
1982 |
this.toCSS = function() {
|
|
|
1983 |
return '#' + this.toHex();
|
|
|
1984 |
};
|
|
|
1985 |
|
|
|
1986 |
this.normalize = function() {
|
|
|
1987 |
this.setHSV(null, 1, 1);
|
|
|
1988 |
return this;
|
|
|
1989 |
};
|
|
|
1990 |
|
|
|
1991 |
this.copy = function() {
|
|
|
1992 |
var spaces = this.getSpaces(),
|
|
|
1993 |
a = this.getAlpha();
|
|
|
1994 |
return new Color(spaces, a);
|
|
|
1995 |
};
|
|
|
1996 |
|
|
|
1997 |
// Construct
|
|
|
1998 |
if (args.length == 2) {
|
|
|
1999 |
this.setSpaces(args[0]);
|
|
|
2000 |
this.setAlpha(args[1] === 0 ? 0 : args[1] || 1);
|
|
|
2001 |
}
|
|
|
2002 |
if (args.length > 2) {
|
|
|
2003 |
this.setRGB(args[0], args[1], args[2]);
|
|
|
2004 |
this.setAlpha(args[3] === 0 ? 0 : args[3] || 1);
|
|
|
2005 |
}
|
|
|
2006 |
};
|
|
|
2007 |
|
|
|
2008 |
$.widget("vanderlee.colorpicker", {
|
|
|
2009 |
options: {
|
|
|
2010 |
alpha: false, // Show alpha controls and mode
|
|
|
2011 |
altAlpha: true, // change opacity of altField as well?
|
|
|
2012 |
altField: '', // selector for DOM elements which change background color on change.
|
|
|
2013 |
altOnChange: true, // true to update on each change, false to update only on close.
|
|
|
2014 |
altProperties: 'background-color', // comma separated list of any of 'background-color', 'color', 'border-color', 'outline-color'
|
|
|
2015 |
autoOpen: false, // Open dialog automatically upon creation
|
|
|
2016 |
buttonColorize: false,
|
|
|
2017 |
buttonImage: 'images/ui-colorpicker.png',
|
|
|
2018 |
buttonImageOnly: false,
|
|
|
2019 |
buttonText: null, // Text on the button and/or title of button image.
|
|
|
2020 |
closeOnEscape: true, // Close the dialog when the escape key is pressed.
|
|
|
2021 |
closeOnOutside: true, // Close the dialog when clicking outside the dialog (not for inline)
|
|
|
2022 |
color: '#00FF00', // Initial color (for inline only)
|
|
|
2023 |
colorFormat: 'HEX', // Format string for output color format
|
|
|
2024 |
draggable: true, // Make popup dialog draggable if header is visible.
|
|
|
2025 |
duration: 'fast',
|
|
|
2026 |
hsv: true, // Show HSV controls and modes
|
|
|
2027 |
inline: true, // Show any divs as inline by default
|
|
|
2028 |
layout: {
|
|
|
2029 |
map: [0, 0, 1, 5], // Left, Top, Width, Height (in table cells).
|
|
|
2030 |
bar: [1, 0, 1, 5],
|
|
|
2031 |
preview: [2, 0, 1, 1],
|
|
|
2032 |
hsv: [2, 1, 1, 1],
|
|
|
2033 |
rgb: [2, 2, 1, 1],
|
|
|
2034 |
alpha: [2, 3, 1, 1],
|
|
|
2035 |
hex: [2, 4, 1, 1],
|
|
|
2036 |
lab: [3, 1, 1, 1],
|
|
|
2037 |
cmyk: [3, 2, 1, 2],
|
|
|
2038 |
swatches: [4, 0, 1, 5]
|
|
|
2039 |
},
|
|
|
2040 |
limit: '', // Limit color "resolution": '', 'websafe', 'nibble', 'binary', 'name'
|
|
|
2041 |
modal: false, // Modal dialog?
|
|
|
2042 |
mode: 'h', // Initial editing mode, h, s, v, r, g, b or a
|
|
|
2043 |
parts: '', // leave empty for automatic selection
|
|
|
2044 |
regional: '',
|
|
|
2045 |
rgb: true, // Show RGB controls and modes
|
|
|
2046 |
showAnim: 'fadeIn',
|
|
|
2047 |
showCancelButton: true,
|
|
|
2048 |
showNoneButton: false,
|
|
|
2049 |
showCloseButton: true,
|
|
|
2050 |
showOn: 'focus', // 'focus', 'button', 'both'
|
|
|
2051 |
showOptions: {},
|
|
|
2052 |
swatches: null,
|
|
|
2053 |
title: null,
|
|
|
2054 |
|
|
|
2055 |
close: null,
|
|
|
2056 |
init: null,
|
|
|
2057 |
select: null,
|
|
|
2058 |
open: null
|
|
|
2059 |
},
|
|
|
2060 |
|
|
|
2061 |
_create: function () {
|
|
|
2062 |
var that = this,
|
|
|
2063 |
text;
|
|
|
2064 |
|
|
|
2065 |
++_colorpicker_index;
|
|
|
2066 |
|
|
|
2067 |
that.widgetEventPrefix = 'color';
|
|
|
2068 |
|
|
|
2069 |
that.opened = false;
|
|
|
2070 |
that.generated = false;
|
|
|
2071 |
that.inline = false;
|
|
|
2072 |
that.changed = false;
|
|
|
2073 |
|
|
|
2074 |
that.dialog = null;
|
|
|
2075 |
that.button = null;
|
|
|
2076 |
that.image = null;
|
|
|
2077 |
that.overlay = null;
|
|
|
2078 |
|
|
|
2079 |
that.mode = that.options.mode;
|
|
|
2080 |
|
|
|
2081 |
if (that.options.swatches === null) {
|
|
|
2082 |
that.options.swatches = _colors;
|
|
|
2083 |
}
|
|
|
2084 |
|
|
|
2085 |
if (this.element[0].nodeName.toLowerCase() === 'input' || !that.options.inline) {
|
|
|
2086 |
that._setColor(that.element.val());
|
|
|
2087 |
|
|
|
2088 |
this._callback('init');
|
|
|
2089 |
|
|
|
2090 |
$('body').append(_container_popup);
|
|
|
2091 |
that.dialog = $('.ui-colorpicker:last');
|
|
|
2092 |
|
|
|
2093 |
// Click outside/inside
|
|
|
2094 |
$(document).mousedown(function (event) {
|
|
|
2095 |
if (!that.opened || event.target === that.element[0] || that.overlay) {
|
|
|
2096 |
return;
|
|
|
2097 |
}
|
|
|
2098 |
|
|
|
2099 |
// Check if clicked on any part of dialog
|
|
|
2100 |
if (that.dialog.is(event.target) || that.dialog.has(event.target).length > 0) {
|
|
|
2101 |
that.element.blur(); // inside window!
|
|
|
2102 |
return;
|
|
|
2103 |
}
|
|
|
2104 |
|
|
|
2105 |
// Check if clicked on button
|
|
|
2106 |
var p,
|
|
|
2107 |
parents = $(event.target).parents();
|
|
|
2108 |
for (p = 0; p <= parents.length; ++p) {
|
|
|
2109 |
if (that.button !== null && parents[p] === that.button[0]) {
|
|
|
2110 |
return;
|
|
|
2111 |
}
|
|
|
2112 |
}
|
|
|
2113 |
|
|
|
2114 |
// no closeOnOutside
|
|
|
2115 |
if (!that.options.closeOnOutside) {
|
|
|
2116 |
return;
|
|
|
2117 |
}
|
|
|
2118 |
|
|
|
2119 |
that.close();
|
|
|
2120 |
});
|
|
|
2121 |
|
|
|
2122 |
$(document).keydown(function (event) {
|
|
|
2123 |
if (event.keyCode == 27 && that.opened && that.options.closeOnEscape) {
|
|
|
2124 |
that.close();
|
|
|
2125 |
}
|
|
|
2126 |
});
|
|
|
2127 |
|
|
|
2128 |
if (that.options.showOn === 'focus' || that.options.showOn === 'both') {
|
|
|
2129 |
that.element.on('focus click', function () {
|
|
|
2130 |
that.open();
|
|
|
2131 |
});
|
|
|
2132 |
}
|
|
|
2133 |
if (that.options.showOn === 'button' || that.options.showOn === 'both') {
|
|
|
2134 |
if (that.options.buttonImage !== '') {
|
|
|
2135 |
text = that.options.buttonText || that._getRegional('button');
|
|
|
2136 |
|
|
|
2137 |
that.image = $('<img/>').attr({
|
|
|
2138 |
'src': that.options.buttonImage,
|
|
|
2139 |
'alt': text,
|
|
|
2140 |
'title': text
|
|
|
2141 |
});
|
|
|
2142 |
|
|
|
2143 |
that._setImageBackground();
|
|
|
2144 |
}
|
|
|
2145 |
|
|
|
2146 |
if (that.options.buttonImageOnly && that.image) {
|
|
|
2147 |
that.button = that.image;
|
|
|
2148 |
} else {
|
|
|
2149 |
that.button = $('<button type="button"></button>').html(that.image || that.options.buttonText).button();
|
|
|
2150 |
that.image = that.image ? $('img', that.button).first() : null;
|
|
|
2151 |
}
|
|
|
2152 |
that.button.insertAfter(that.element).click(function () {
|
|
|
2153 |
that[that.opened ? 'close' : 'open']();
|
|
|
2154 |
});
|
|
|
2155 |
}
|
|
|
2156 |
|
|
|
2157 |
if (that.options.autoOpen) {
|
|
|
2158 |
that.open();
|
|
|
2159 |
}
|
|
|
2160 |
|
|
|
2161 |
that.element.keydown(function (event) {
|
|
|
2162 |
if (event.keyCode === 9) {
|
|
|
2163 |
that.close();
|
|
|
2164 |
}
|
|
|
2165 |
}).keyup(function (event) {
|
|
|
2166 |
var color = _parseColor(that.element.val());
|
|
|
2167 |
if (!that.color.equals(color)) {
|
|
|
2168 |
that.color = color;
|
|
|
2169 |
that._change();
|
|
|
2170 |
}
|
|
|
2171 |
});
|
|
|
2172 |
} else {
|
|
|
2173 |
that.inline = true;
|
|
|
2174 |
|
|
|
2175 |
$(this.element).html(_container_inline);
|
|
|
2176 |
that.dialog = $('.ui-colorpicker', this.element);
|
|
|
2177 |
|
|
|
2178 |
that._generate();
|
|
|
2179 |
|
|
|
2180 |
that.opened = true;
|
|
|
2181 |
}
|
|
|
2182 |
|
|
|
2183 |
return this;
|
|
|
2184 |
},
|
|
|
2185 |
|
|
|
2186 |
_setOption: function(key, value){
|
|
|
2187 |
var that = this;
|
|
|
2188 |
|
|
|
2189 |
switch (key) {
|
|
|
2190 |
case "disabled":
|
|
|
2191 |
if (value) {
|
|
|
2192 |
that.dialog.addClass('ui-colorpicker-disabled');
|
|
|
2193 |
} else {
|
|
|
2194 |
that.dialog.removeClass('ui-colorpicker-disabled');
|
|
|
2195 |
}
|
|
|
2196 |
break;
|
|
|
2197 |
}
|
|
|
2198 |
|
|
|
2199 |
$.Widget.prototype._setOption.apply(that, arguments);
|
|
|
2200 |
},
|
|
|
2201 |
|
|
|
2202 |
/* setBackground */
|
|
|
2203 |
_setImageBackground: function() {
|
|
|
2204 |
if (this.image && this.options.buttonColorize) {
|
|
|
2205 |
this.image.css('background-color', this.color.set? _formatColor('RGBA', this.color) : '');
|
|
|
2206 |
}
|
|
|
2207 |
},
|
|
|
2208 |
|
|
|
2209 |
/**
|
|
|
2210 |
* If an alternate field is specified, set it according to the current color.
|
|
|
2211 |
*/
|
|
|
2212 |
_setAltField: function () {
|
|
|
2213 |
if (this.options.altOnChange && this.options.altField && this.options.altProperties) {
|
|
|
2214 |
var index,
|
|
|
2215 |
property,
|
|
|
2216 |
properties = this.options.altProperties.split(',');
|
|
|
2217 |
|
|
|
2218 |
for (index = 0; index <= properties.length; ++index) {
|
|
|
2219 |
property = $.trim(properties[index]);
|
|
|
2220 |
switch (property) {
|
|
|
2221 |
case 'color':
|
|
|
2222 |
case 'background-color':
|
|
|
2223 |
case 'outline-color':
|
|
|
2224 |
case 'border-color':
|
|
|
2225 |
$(this.options.altField).css(property, this.color.set? this.color.toCSS() : '');
|
|
|
2226 |
break;
|
|
|
2227 |
}
|
|
|
2228 |
}
|
|
|
2229 |
|
|
|
2230 |
if (this.options.altAlpha) {
|
|
|
2231 |
$(this.options.altField).css('opacity', this.color.set? this.color.getAlpha() : '');
|
|
|
2232 |
}
|
|
|
2233 |
}
|
|
|
2234 |
},
|
|
|
2235 |
|
|
|
2236 |
_setColor: function(text) {
|
|
|
2237 |
this.color = _parseColor(text);
|
|
|
2238 |
this.currentColor = this.color.copy();
|
|
|
2239 |
|
|
|
2240 |
this._setImageBackground();
|
|
|
2241 |
this._setAltField();
|
|
|
2242 |
},
|
|
|
2243 |
|
|
|
2244 |
setColor: function(text) {
|
|
|
2245 |
this._setColor(text);
|
|
|
2246 |
this._change(this.color.set);
|
|
|
2247 |
},
|
|
|
2248 |
|
|
|
2249 |
_generate: function () {
|
|
|
2250 |
var that = this,
|
|
|
2251 |
index,
|
|
|
2252 |
part,
|
|
|
2253 |
parts_list,
|
|
|
2254 |
layout_parts;
|
|
|
2255 |
|
|
|
2256 |
// Set color based on element?
|
|
|
2257 |
that._setColor(that.inline? that.options.color : that.element.val());
|
|
|
2258 |
|
|
|
2259 |
// Determine the parts to include in this colorpicker
|
|
|
2260 |
if (typeof that.options.parts === 'string') {
|
|
|
2261 |
if (_parts_lists[that.options.parts]) {
|
|
|
2262 |
parts_list = _parts_lists[that.options.parts];
|
|
|
2263 |
} else {
|
|
|
2264 |
// automatic
|
|
|
2265 |
parts_list = _parts_lists[that.inline ? 'inline' : 'popup'];
|
|
|
2266 |
}
|
|
|
2267 |
} else {
|
|
|
2268 |
parts_list = that.options.parts;
|
|
|
2269 |
}
|
|
|
2270 |
|
|
|
2271 |
// Add any parts to the internal parts list
|
|
|
2272 |
that.parts = {};
|
|
|
2273 |
$.each(parts_list, function(index, part) {
|
|
|
2274 |
if (_parts[part]) {
|
|
|
2275 |
that.parts[part] = new _parts[part](that);
|
|
|
2276 |
}
|
|
|
2277 |
});
|
|
|
2278 |
|
|
|
2279 |
if (!that.generated) {
|
|
|
2280 |
layout_parts = [];
|
|
|
2281 |
|
|
|
2282 |
$.each(that.options.layout, function(part, pos) {
|
|
|
2283 |
if (that.parts[part]) {
|
|
|
2284 |
layout_parts.push({
|
|
|
2285 |
'part': part,
|
|
|
2286 |
'pos': pos
|
|
|
2287 |
});
|
|
|
2288 |
}
|
|
|
2289 |
});
|
|
|
2290 |
|
|
|
2291 |
$(_layoutTable(layout_parts, function(cell, x, y) {
|
|
|
2292 |
var classes = ['ui-colorpicker-' + cell.part + '-container'];
|
|
|
2293 |
|
|
|
2294 |
if (x > 0) {
|
|
|
2295 |
classes.push('ui-colorpicker-padding-left');
|
|
|
2296 |
}
|
|
|
2297 |
|
|
|
2298 |
if (y > 0) {
|
|
|
2299 |
classes.push('ui-colorpicker-padding-top');
|
|
|
2300 |
}
|
|
|
2301 |
|
|
|
2302 |
return '<td class="' + classes.join(' ') + '"'
|
|
|
2303 |
+ (cell.pos[2] > 1 ? ' colspan="' + cell.pos[2] + '"' : '')
|
|
|
2304 |
+ (cell.pos[3] > 1 ? ' rowspan="' + cell.pos[3] + '"' : '')
|
|
|
2305 |
+ ' valign="top"></td>';
|
|
|
2306 |
})).appendTo(that.dialog).addClass('ui-dialog-content ui-widget-content');
|
|
|
2307 |
|
|
|
2308 |
that._initAllParts();
|
|
|
2309 |
that._updateAllParts();
|
|
|
2310 |
that.generated = true;
|
|
|
2311 |
}
|
|
|
2312 |
},
|
|
|
2313 |
|
|
|
2314 |
_effectGeneric: function (element, show, slide, fade, callback) {
|
|
|
2315 |
var that = this;
|
|
|
2316 |
|
|
|
2317 |
if ($.effects && $.effects[that.options.showAnim]) {
|
|
|
2318 |
element[show](that.options.showAnim, that.options.showOptions, that.options.duration, callback);
|
|
|
2319 |
} else {
|
|
|
2320 |
element[(that.options.showAnim === 'slideDown' ?
|
|
|
2321 |
slide
|
|
|
2322 |
: (that.options.showAnim === 'fadeIn' ?
|
|
|
2323 |
fade
|
|
|
2324 |
: show))]((that.options.showAnim ? that.options.duration : null), callback);
|
|
|
2325 |
if (!that.options.showAnim || !that.options.duration) {
|
|
|
2326 |
callback();
|
|
|
2327 |
}
|
|
|
2328 |
}
|
|
|
2329 |
},
|
|
|
2330 |
|
|
|
2331 |
_effectShow: function(element, callback) {
|
|
|
2332 |
this._effectGeneric(element, 'show', 'slideDown', 'fadeIn', callback);
|
|
|
2333 |
},
|
|
|
2334 |
|
|
|
2335 |
_effectHide: function(element, callback) {
|
|
|
2336 |
this._effectGeneric(element, 'hide', 'slideUp', 'fadeOut', callback);
|
|
|
2337 |
},
|
|
|
2338 |
|
|
|
2339 |
open: function() {
|
|
|
2340 |
var that = this,
|
|
|
2341 |
offset,
|
|
|
2342 |
bottom,
|
|
|
2343 |
right,
|
|
|
2344 |
height,
|
|
|
2345 |
width,
|
|
|
2346 |
x,
|
|
|
2347 |
y,
|
|
|
2348 |
zIndex;
|
|
|
2349 |
|
|
|
2350 |
if (!that.opened) {
|
|
|
2351 |
that._generate();
|
|
|
2352 |
|
|
|
2353 |
offset = that.element.offset();
|
|
|
2354 |
bottom = $(window).height() + $(window).scrollTop();
|
|
|
2355 |
right = $(window).width() + $(window).scrollLeft();
|
|
|
2356 |
height = that.dialog.outerHeight();
|
|
|
2357 |
width = that.dialog.outerWidth();
|
|
|
2358 |
x = offset.left;
|
|
|
2359 |
y = offset.top + that.element.outerHeight();
|
|
|
2360 |
|
|
|
2361 |
if (x + width > right) {
|
|
|
2362 |
x = Math.max(0, right - width);
|
|
|
2363 |
}
|
|
|
2364 |
|
|
|
2365 |
if (y + height > bottom) {
|
|
|
2366 |
if (offset.top - height >= $(window).scrollTop()) {
|
|
|
2367 |
y = offset.top - height;
|
|
|
2368 |
} else {
|
|
|
2369 |
y = Math.max(0, bottom - height);
|
|
|
2370 |
}
|
|
|
2371 |
}
|
|
|
2372 |
|
|
|
2373 |
that.dialog.css({'left': x, 'top': y});
|
|
|
2374 |
|
|
|
2375 |
// Automatically find highest z-index.
|
|
|
2376 |
zIndex = 0;
|
|
|
2377 |
$(that.element[0]).parents().each(function() {
|
|
|
2378 |
var z = $(this).css('z-index');
|
|
|
2379 |
if ((typeof(z) === 'number' || typeof(z) === 'string') && z !== '' && !isNaN(z)) {
|
|
|
2380 |
zIndex = z;
|
|
|
2381 |
return false;
|
|
|
2382 |
}
|
|
|
2383 |
});
|
|
|
2384 |
|
|
|
2385 |
//@todo zIndexOffset option, to raise above other elements?
|
|
|
2386 |
that.dialog.css('z-index', zIndex += 2);
|
|
|
2387 |
|
|
|
2388 |
that.overlay = that.options.modal ? new $.ui.dialog.overlay(that) : null;
|
|
|
2389 |
|
|
|
2390 |
that._effectShow(this.dialog);
|
|
|
2391 |
that.opened = true;
|
|
|
2392 |
that._callback('open', true);
|
|
|
2393 |
|
|
|
2394 |
// Without waiting for domready the width of the map is 0 and we
|
|
|
2395 |
// wind up with the cursor stuck in the upper left corner
|
|
|
2396 |
$(function() {
|
|
|
2397 |
that._repaintAllParts();
|
|
|
2398 |
});
|
|
|
2399 |
}
|
|
|
2400 |
},
|
|
|
2401 |
|
|
|
2402 |
close: function () {
|
|
|
2403 |
var that = this;
|
|
|
2404 |
|
|
|
2405 |
that.currentColor = that.color.copy();
|
|
|
2406 |
that.changed = false;
|
|
|
2407 |
|
|
|
2408 |
// tear down the interface
|
|
|
2409 |
that._effectHide(that.dialog, function () {
|
|
|
2410 |
that.dialog.empty();
|
|
|
2411 |
that.generated = false;
|
|
|
2412 |
|
|
|
2413 |
that.opened = false;
|
|
|
2414 |
that._callback('close', true);
|
|
|
2415 |
});
|
|
|
2416 |
|
|
|
2417 |
if (that.overlay) {
|
|
|
2418 |
that.overlay.destroy();
|
|
|
2419 |
}
|
|
|
2420 |
},
|
|
|
2421 |
|
|
|
2422 |
destroy: function() {
|
|
|
2423 |
this.element.unbind();
|
|
|
2424 |
|
|
|
2425 |
if (this.image !== null) {
|
|
|
2426 |
this.image.remove();
|
|
|
2427 |
}
|
|
|
2428 |
|
|
|
2429 |
if (this.button !== null) {
|
|
|
2430 |
this.button.remove();
|
|
|
2431 |
}
|
|
|
2432 |
|
|
|
2433 |
if (this.dialog !== null) {
|
|
|
2434 |
this.dialog.remove();
|
|
|
2435 |
}
|
|
|
2436 |
|
|
|
2437 |
if (this.overlay) {
|
|
|
2438 |
this.overlay.destroy();
|
|
|
2439 |
}
|
|
|
2440 |
},
|
|
|
2441 |
|
|
|
2442 |
_callback: function (callback, spaces) {
|
|
|
2443 |
var that = this,
|
|
|
2444 |
data,
|
|
|
2445 |
lab;
|
|
|
2446 |
|
|
|
2447 |
if (that.color.set) {
|
|
|
2448 |
data = {
|
|
|
2449 |
formatted: _formatColor(that.options.colorFormat, that.color)
|
|
|
2450 |
};
|
|
|
2451 |
|
|
|
2452 |
lab = that.color.getLAB();
|
|
|
2453 |
lab.a = (lab.a * 2) - 1;
|
|
|
2454 |
lab.b = (lab.b * 2) - 1;
|
|
|
2455 |
|
|
|
2456 |
if (spaces === true) {
|
|
|
2457 |
data.a = that.color.getAlpha();
|
|
|
2458 |
data.rgb = that.color.getRGB();
|
|
|
2459 |
data.hsv = that.color.getHSV();
|
|
|
2460 |
data.cmyk = that.color.getCMYK();
|
|
|
2461 |
data.hsl = that.color.getHSL();
|
|
|
2462 |
data.lab = lab;
|
|
|
2463 |
}
|
|
|
2464 |
|
|
|
2465 |
return that._trigger(callback, null, data);
|
|
|
2466 |
} else {
|
|
|
2467 |
return that._trigger(callback, null, {
|
|
|
2468 |
formatted: ''
|
|
|
2469 |
});
|
|
|
2470 |
}
|
|
|
2471 |
},
|
|
|
2472 |
|
|
|
2473 |
_initAllParts: function () {
|
|
|
2474 |
$.each(this.parts, function (index, part) {
|
|
|
2475 |
if (part.init) {
|
|
|
2476 |
part.init();
|
|
|
2477 |
}
|
|
|
2478 |
});
|
|
|
2479 |
},
|
|
|
2480 |
|
|
|
2481 |
_updateAllParts: function () {
|
|
|
2482 |
$.each(this.parts, function (index, part) {
|
|
|
2483 |
if (part.update) {
|
|
|
2484 |
part.update();
|
|
|
2485 |
}
|
|
|
2486 |
});
|
|
|
2487 |
},
|
|
|
2488 |
|
|
|
2489 |
_repaintAllParts: function () {
|
|
|
2490 |
$.each(this.parts, function (index, part) {
|
|
|
2491 |
if (part.repaint) {
|
|
|
2492 |
part.repaint();
|
|
|
2493 |
}
|
|
|
2494 |
});
|
|
|
2495 |
},
|
|
|
2496 |
|
|
|
2497 |
_change: function (set /* = true */) {
|
|
|
2498 |
this.color.set = (set !== false);
|
|
|
2499 |
|
|
|
2500 |
this.changed = true;
|
|
|
2501 |
|
|
|
2502 |
// Limit color palette
|
|
|
2503 |
switch (this.options.limit) {
|
|
|
2504 |
case 'websafe':
|
|
|
2505 |
this.color.limit(6);
|
|
|
2506 |
break;
|
|
|
2507 |
|
|
|
2508 |
case 'nibble':
|
|
|
2509 |
this.color.limit(16);
|
|
|
2510 |
break;
|
|
|
2511 |
|
|
|
2512 |
case 'binary':
|
|
|
2513 |
this.color.limit(2);
|
|
|
2514 |
break;
|
|
|
2515 |
|
|
|
2516 |
case 'name':
|
|
|
2517 |
var name = _closestName(this.color);
|
|
|
2518 |
this.color.setRGB(_colors[name].r, _colors[name].g, _colors[name].b);
|
|
|
2519 |
break;
|
|
|
2520 |
}
|
|
|
2521 |
|
|
|
2522 |
// update input element content
|
|
|
2523 |
if (!this.inline) {
|
|
|
2524 |
if (!this.color.set) {
|
|
|
2525 |
this.element.val('');
|
|
|
2526 |
} else if (!this.color.equals(_parseColor(this.element.val()))) {
|
|
|
2527 |
this.element.val(_formatColor(this.options.colorFormat, this.color));
|
|
|
2528 |
}
|
|
|
2529 |
|
|
|
2530 |
this._setImageBackground();
|
|
|
2531 |
this._setAltField();
|
|
|
2532 |
}
|
|
|
2533 |
|
|
|
2534 |
if (this.opened) {
|
|
|
2535 |
this._repaintAllParts();
|
|
|
2536 |
}
|
|
|
2537 |
|
|
|
2538 |
// callback
|
|
|
2539 |
this._callback('select');
|
|
|
2540 |
},
|
|
|
2541 |
|
|
|
2542 |
// This will be deprecated by jQueryUI 1.9 widget
|
|
|
2543 |
_hoverable: function (e) {
|
|
|
2544 |
e.hover(function () {
|
|
|
2545 |
e.addClass("ui-state-hover");
|
|
|
2546 |
}, function () {
|
|
|
2547 |
e.removeClass("ui-state-hover");
|
|
|
2548 |
});
|
|
|
2549 |
},
|
|
|
2550 |
|
|
|
2551 |
// This will be deprecated by jQueryUI 1.9 widget
|
|
|
2552 |
_focusable: function (e) {
|
|
|
2553 |
e.focus(function () {
|
|
|
2554 |
e.addClass("ui-state-focus");
|
|
|
2555 |
}).blur(function () {
|
|
|
2556 |
e.removeClass("ui-state-focus");
|
|
|
2557 |
});
|
|
|
2558 |
},
|
|
|
2559 |
|
|
|
2560 |
_getRegional: function(name) {
|
|
|
2561 |
return $.colorpicker.regional[this.options.regional][name] !== undefined ?
|
|
|
2562 |
$.colorpicker.regional[this.options.regional][name] : $.colorpicker.regional[''][name];
|
|
|
2563 |
}
|
|
|
2564 |
});
|
|
|
2565 |
}(jQuery));
|