wcolorpicker-rails 1.2 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +19 -5
- data/lib/wcolorpicker-rails/version.rb +1 -1
- data/vendor/assets/javascripts/wcolorpicker.js +371 -344
- metadata +21 -39
data/README.md
CHANGED
|
@@ -7,16 +7,30 @@ For info on how to use the plugin see the original documentation:
|
|
|
7
7
|
|
|
8
8
|
[Websanova Color Picker](http://www.websanova.com/plugins/websanova/color-picker)
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
Praise for creating this tool should of course be directed at [Websanova](http://www.websanova.com/)!
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
For the orignal javascript and css file go to their [Github repository](https://github.com/websanova/wColorPicker).
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
In your Gemfile, add:
|
|
17
|
+
|
|
18
|
+
```ruby
|
|
19
|
+
group :assets do
|
|
20
|
+
gem 'wcolorpicker-rails'
|
|
21
|
+
end
|
|
22
|
+
```
|
|
15
23
|
|
|
16
24
|
You can include it by adding the following to your javascript file:
|
|
17
25
|
|
|
18
|
-
|
|
26
|
+
```javascript
|
|
27
|
+
//= require wcolorpicker
|
|
28
|
+
```
|
|
19
29
|
|
|
20
30
|
And to the css file:
|
|
21
31
|
|
|
22
|
-
|
|
32
|
+
```css
|
|
33
|
+
/*
|
|
34
|
+
*= require wcolorpicker
|
|
35
|
+
*/
|
|
36
|
+
```
|
|
@@ -8,353 +8,380 @@
|
|
|
8
8
|
* @license This websanova color picker jQuery plug-in is dual licensed under the MIT and GPL licenses.
|
|
9
9
|
* @link http://www.websanova.com
|
|
10
10
|
* @docs http://www.websanova.com/plugins/websanova/color-picker
|
|
11
|
-
* @version Version 1.2
|
|
11
|
+
* @version Version 1.2.2
|
|
12
12
|
*
|
|
13
13
|
******************************************/
|
|
14
14
|
(function($)
|
|
15
|
-
{
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
15
|
+
{
|
|
16
|
+
$.fn.wColorPicker = function(settings)
|
|
17
|
+
{
|
|
18
|
+
if(typeof option === 'object')
|
|
19
|
+
{
|
|
20
|
+
settings = option;
|
|
21
|
+
}
|
|
22
|
+
else if(typeof option === 'string')
|
|
23
|
+
{
|
|
24
|
+
var values = [];
|
|
25
|
+
|
|
26
|
+
var elements = this.each(function()
|
|
27
|
+
{
|
|
28
|
+
var data = $(this).data('_wColorPicker');
|
|
29
|
+
|
|
30
|
+
if(data)
|
|
31
|
+
{
|
|
32
|
+
if($.fn.wColorPicker.defaultSettings[option] !== undefined)
|
|
33
|
+
{
|
|
34
|
+
if(settings !== undefined) { data.settings[option] = settings; }
|
|
35
|
+
else { values.push(data.settings[option]); }
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
if(values.length === 1) { return values[0]; }
|
|
41
|
+
if(values.length > 0) { return values; }
|
|
42
|
+
else { return elements; }
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
settings = $.extend({}, $.fn.wColorPicker.defaultSettings, settings || {});
|
|
46
|
+
|
|
47
|
+
return this.each(function()
|
|
48
|
+
{
|
|
49
|
+
var elem = $(this);
|
|
50
|
+
var $settings = jQuery.extend(true, {}, settings);
|
|
51
|
+
|
|
52
|
+
var cp = new ColorPicker($settings);
|
|
53
|
+
|
|
54
|
+
cp.generate();
|
|
55
|
+
|
|
56
|
+
cp.appendToElement(elem);
|
|
57
|
+
|
|
58
|
+
cp.colorSelect(cp, $settings.initColor);
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
$.fn.wColorPicker.defaultSettings = {
|
|
63
|
+
color : 'black', // colors - black, white, cream, red, green, blue, yellow, orange, plum
|
|
64
|
+
opacity : 0.8, // opacity level
|
|
65
|
+
initColor : '#FF0000', // initial colour to set palette to
|
|
66
|
+
onMouseover : null, // function to run when palette color is moused over
|
|
67
|
+
onMouseout : null, // function to run when palette color is moused out
|
|
68
|
+
onSelect : null, // function to run when palette color is selected
|
|
69
|
+
mode : 'flat', // flat mode inserts the palette to container, other modes insert button into container - hover, click
|
|
70
|
+
buttonSize : 20, // size of button if mode is ohter than flat
|
|
71
|
+
effect : 'slide', // none/slide/fade
|
|
72
|
+
showSpeed : 500, // time to run the effects on show
|
|
73
|
+
hideSpeed : 500 // time to run the effects on hide
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* ColorPicker class definition
|
|
78
|
+
*/
|
|
79
|
+
function ColorPicker(settings)
|
|
80
|
+
{
|
|
81
|
+
this.colorPicker = null;
|
|
82
|
+
this.settings = settings;
|
|
83
|
+
this.currentColor = settings.initColor;
|
|
84
|
+
|
|
85
|
+
this.height = null; // init this, need to get height/width proper while element is still showing
|
|
86
|
+
this.width = null;
|
|
87
|
+
this.slideTopToBottom = null; // used to assist with sliding in proper direction
|
|
88
|
+
|
|
89
|
+
this.customTarget = null;
|
|
90
|
+
this.buttonColor = null;
|
|
91
|
+
this.paletteHolder = null;
|
|
92
|
+
|
|
93
|
+
return this;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
ColorPicker.prototype =
|
|
97
|
+
{
|
|
98
|
+
generate: function ()
|
|
99
|
+
{
|
|
100
|
+
if(this.colorPicker) return this.colorPicker;
|
|
101
|
+
|
|
102
|
+
var $this = this;
|
|
103
|
+
|
|
104
|
+
var clearFloats = {clear: 'both', height: 0, lineHeight: 0, fontSize: 0};
|
|
105
|
+
|
|
106
|
+
//custom colors
|
|
107
|
+
this.customTarget = $('<div class="_wColorPicker_customTarget"></div>');
|
|
108
|
+
this.customInput =
|
|
109
|
+
$('<input type="text" class="_wColorPicker_customInput" value=""/>').keyup(function(e)
|
|
110
|
+
{
|
|
111
|
+
var code = (e.keyCode ? e.keyCode : e.which);
|
|
112
|
+
|
|
113
|
+
var hex = $this.validHex($(this).val());
|
|
114
|
+
|
|
115
|
+
$(this).val(hex)
|
|
116
|
+
|
|
117
|
+
//auto set color in target if it's valid hex code
|
|
118
|
+
if(hex.length == 7) $this.customTarget.css('backgroundColor', hex);
|
|
119
|
+
|
|
120
|
+
if(code == 13)//set color if user hits enter while on input
|
|
121
|
+
{
|
|
122
|
+
$this.colorSelect($this, $(this).val());
|
|
123
|
+
if($this.buttonColor) $this.hidePalette($this)
|
|
124
|
+
}
|
|
125
|
+
})
|
|
126
|
+
.click(function(e){e.stopPropagation();});
|
|
127
|
+
|
|
128
|
+
//setup custom area
|
|
129
|
+
var custom =
|
|
130
|
+
$('<div class="_wColorPicker_custom"></div>')
|
|
131
|
+
.append(this.appendColors($('<div class="_wColorPicker_noColor">'), ['transparent'], 1))
|
|
132
|
+
.append(this.customTarget)
|
|
133
|
+
.append(this.customInput)
|
|
134
|
+
//clear floats
|
|
135
|
+
.append($('<div></div>').css(clearFloats))
|
|
136
|
+
|
|
137
|
+
//grays/simple palette
|
|
138
|
+
var simpleColors = ['000000', '333333', '666666', '999999', 'CCCCCC', 'FFFFFF', 'FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF'];
|
|
139
|
+
var simplePalette = this.appendColors($('<div class="_wColorPicker_palette_simple"></div>'), simpleColors, 1);
|
|
140
|
+
|
|
141
|
+
//colors palette
|
|
142
|
+
var mixedColors = [
|
|
143
|
+
'000000', '003300', '006600', '009900', '00CC00', '00FF00', '330000', '333300', '336600', '339900', '33CC00', '33FF00', '660000', '663300', '666600', '669900', '66CC00', '66FF00',
|
|
144
|
+
'000033', '003333', '006633', '009933', '00CC33', '00FF33', '330033', '333333', '336633', '339933', '33CC33', '33FF33', '660033', '663333', '666633', '669933', '66CC33', '66FF33',
|
|
145
|
+
'000066', '003366', '006666', '009966', '00CC66', '00FF66', '330066', '333366', '336666', '339966', '33CC66', '33FF66', '660066', '663366', '666666', '669966', '66CC66', '66FF66',
|
|
146
|
+
'000099', '003399', '006699', '009999', '00CC99', '00FF99', '330099', '333399', '336699', '339999', '33CC99', '33FF99', '660099', '663399', '666699', '669999', '66CC99', '66FF99',
|
|
147
|
+
'0000CC', '0033CC', '0066CC', '0099CC', '00CCCC', '00FFCC', '3300CC', '3333CC', '3366CC', '3399CC', '33CCCC', '33FFCC', '6600CC', '6633CC', '6666CC', '6699CC', '66CCCC', '66FFCC',
|
|
148
|
+
'0000FF', '0033FF', '0066FF', '0099FF', '00CCFF', '00FFFF', '3300FF', '3333FF', '3366FF', '3399FF', '33CCFF', '33FFFF', '6600FF', '6633FF', '6666FF', '6699FF', '66CCFF', '66FFFF',
|
|
149
|
+
'990000', '993300', '996600', '999900', '99CC00', '99FF00', 'CC0000', 'CC3300', 'CC6600', 'CC9900', 'CCCC00', 'CCFF00', 'FF0000', 'FF3300', 'FF6600', 'FF9900', 'FFCC00', 'FFFF00',
|
|
150
|
+
'990033', '993333', '996633', '999933', '99CC33', '99FF33', 'CC0033', 'CC3333', 'CC6633', 'CC9933', 'CCCC33', 'CCFF33', 'FF0033', 'FF3333', 'FF6633', 'FF9933', 'FFCC33', 'FFFF33',
|
|
151
|
+
'990066', '993366', '996666', '999966', '99CC66', '99FF66', 'CC0066', 'CC3366', 'CC6666', 'CC9966', 'CCCC66', 'CCFF66', 'FF0066', 'FF3366', 'FF6666', 'FF9966', 'FFCC66', 'FFFF66',
|
|
152
|
+
'990099', '993399', '996699', '999999', '99CC99', '99FF99', 'CC0099', 'CC3399', 'CC6699', 'CC9999', 'CCCC99', 'CCFF99', 'FF0099', 'FF3399', 'FF6699', 'FF9999', 'FFCC99', 'FFFF99',
|
|
153
|
+
'9900CC', '9933CC', '9966CC', '9999CC', '99CCCC', '99FFCC', 'CC00CC', 'CC33CC', 'CC66CC', 'CC99CC', 'CCCCCC', 'CCFFCC', 'FF00CC', 'FF33CC', 'FF66CC', 'FF99CC', 'FFCCCC', 'FFFFCC',
|
|
154
|
+
'9900FF', '9933FF', '9966FF', '9999FF', '99CCFF', '99FFFF', 'CC00FF', 'CC33FF', 'CC66FF', 'CC99FF', 'CCCCFF', 'CCFFFF', 'FF00FF', 'FF33FF', 'FF66FF', 'FF99FF', 'FFCCFF', 'FFFFFF',
|
|
155
|
+
];
|
|
156
|
+
var mixedPalette = this.appendColors($('<div class="_wColorPicker_palette_mixed"></div>'), mixedColors, 18);
|
|
157
|
+
|
|
158
|
+
//palette container
|
|
159
|
+
var bg = $('<div class="_wColorPicker_bg"></div>').css({opacity: this.settings.opacity});
|
|
160
|
+
var content =
|
|
161
|
+
$('<div class="_wColorPicker_content"></div>')
|
|
162
|
+
.append(custom)
|
|
163
|
+
.append(simplePalette)
|
|
164
|
+
.append(mixedPalette)
|
|
165
|
+
.append($('<div></div>').css(clearFloats));
|
|
166
|
+
|
|
167
|
+
//put it all together
|
|
168
|
+
this.colorPicker =
|
|
169
|
+
$('<div class="_wColorPicker_holder"></div>')
|
|
170
|
+
.click(function(e){e.stopPropagation();})
|
|
171
|
+
.append(
|
|
172
|
+
$('<div class="_wColorPicker_outer"></div>')
|
|
173
|
+
.append(
|
|
174
|
+
$('<div class="_wColorPicker_inner"></div>')
|
|
175
|
+
.append( bg )
|
|
176
|
+
.append( content )
|
|
177
|
+
)
|
|
178
|
+
)
|
|
179
|
+
.addClass('_wColorPicker_' + this.settings.color)
|
|
180
|
+
|
|
181
|
+
return this.colorPicker;
|
|
182
|
+
},
|
|
183
|
+
|
|
184
|
+
appendColors: function($palette, colors, lineCount)
|
|
185
|
+
{
|
|
186
|
+
var counter = 1;
|
|
187
|
+
var $this = this;
|
|
188
|
+
|
|
189
|
+
for(index in colors)
|
|
190
|
+
{
|
|
191
|
+
$palette.append(
|
|
192
|
+
$('<div id="_wColorPicker_color_' + counter + '" class="_wColorPicker_color _wColorPicker_color_' + counter + '"></div>').css('backgroundColor', '#' + colors[index])
|
|
193
|
+
.click(function(){$this.colorSelect($this, $(this).css('backgroundColor'));})
|
|
194
|
+
.mouseout(function(e){$this.colorHoverOff($this, $(this));})
|
|
195
|
+
.mouseover(function(){$this.colorHoverOn($this, $(this));})
|
|
196
|
+
);
|
|
197
|
+
|
|
198
|
+
if(counter == lineCount)
|
|
199
|
+
{
|
|
200
|
+
$palette.append($('<div></div>').css({clear:'both', height:0, fontSize:0, lineHeight:0, marginTop:-1}))
|
|
201
|
+
counter = 0;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
counter++;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
return $palette;
|
|
208
|
+
},
|
|
209
|
+
|
|
210
|
+
colorSelect: function($this, color)
|
|
211
|
+
{
|
|
212
|
+
color = $this.toHex(color);;
|
|
213
|
+
|
|
214
|
+
$this.customTarget.css('backgroundColor', color);
|
|
215
|
+
$this.currentColor = color;
|
|
216
|
+
$this.customInput.val(color);
|
|
217
|
+
|
|
218
|
+
if($this.settings.onSelect) $this.settings.onSelect(color);
|
|
219
|
+
|
|
220
|
+
if($this.buttonColor)
|
|
221
|
+
{
|
|
222
|
+
$this.buttonColor.css('backgroundColor', color);
|
|
223
|
+
$this.hidePalette($this);
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
|
|
227
|
+
colorHoverOn: function($this, $element)
|
|
228
|
+
{
|
|
229
|
+
$element.parent().children('active').removeClass('active');
|
|
230
|
+
$element.addClass('active').next().addClass('activeLeft');
|
|
231
|
+
$element.nextAll('.' + $element.attr('id') + ':first').addClass('activeTop');
|
|
232
|
+
|
|
233
|
+
var color = $this.toHex($element.css('backgroundColor'));
|
|
234
|
+
|
|
235
|
+
$this.customTarget.css('backgroundColor', color);
|
|
236
|
+
$this.customInput.val(color);
|
|
237
|
+
|
|
238
|
+
if($this.settings.onMouseover) $this.settings.onMouseover(color);
|
|
239
|
+
},
|
|
240
|
+
|
|
241
|
+
colorHoverOff: function($this, $element)
|
|
242
|
+
{
|
|
243
|
+
$element.removeClass('active').next().removeClass('activeLeft')
|
|
244
|
+
$element.nextAll('.' + $element.attr('id') + ':first').removeClass('activeTop')
|
|
245
|
+
|
|
246
|
+
$this.customTarget.css('backgroundColor', $this.currentColor);
|
|
247
|
+
$this.customInput.val($this.currentColor);
|
|
248
|
+
|
|
249
|
+
if($this.settings.onMouseout) $this.settings.onMouseout($this.currentColor);
|
|
250
|
+
},
|
|
251
|
+
|
|
252
|
+
appendToElement: function($element)
|
|
253
|
+
{
|
|
254
|
+
var $this = this;
|
|
255
|
+
|
|
256
|
+
if($this.settings.mode == 'flat') $element.append($this.colorPicker);
|
|
257
|
+
else
|
|
258
|
+
{
|
|
259
|
+
//setup button
|
|
260
|
+
$this.paletteHolder = $('<div class="_wColorPicker_paletteHolder"></div>').css({position: 'absolute', overflow: 'hidden', width: 1000}).append($this.colorPicker);
|
|
261
|
+
|
|
262
|
+
$this.buttonColor = $('<div class="_wColorPicker_buttonColor"></div>').css({width: $this.settings.buttonSize, height: $this.settings.buttonSize});
|
|
263
|
+
|
|
264
|
+
var buttonHolder =
|
|
265
|
+
$('<div class="_wColorPicker_buttonHolder"></div>')
|
|
266
|
+
.css({position: 'relative'})
|
|
267
|
+
.append($('<div class="_wColorPicker_buttonBorder"></div>').append($this.buttonColor))
|
|
268
|
+
.append($this.paletteHolder);
|
|
269
|
+
|
|
270
|
+
$element.append(buttonHolder);
|
|
271
|
+
|
|
272
|
+
$this.width = $this.colorPicker.outerWidth();
|
|
273
|
+
$this.height = $this.colorPicker.outerHeight();
|
|
274
|
+
$this.paletteHolder.css({width: $this.width, height: $this.height}).hide();
|
|
275
|
+
|
|
276
|
+
if($this.settings.effect == 'fade') $this.paletteHolder.css({opacity: 0});
|
|
277
|
+
|
|
278
|
+
//setup events
|
|
279
|
+
if($this.settings.mode == 'hover')
|
|
280
|
+
{
|
|
281
|
+
buttonHolder.hover(
|
|
282
|
+
function(e){$this.showPalette(e, $this);},
|
|
283
|
+
function(e){$this.hidePalette($this);}
|
|
284
|
+
)
|
|
285
|
+
}
|
|
286
|
+
else if($this.settings.mode == 'click')
|
|
287
|
+
{
|
|
288
|
+
$(document).click(function(){if($this.paletteHolder.hasClass('active'))$this.hidePalette($this);});
|
|
289
|
+
|
|
290
|
+
buttonHolder
|
|
291
|
+
.click(function(e)
|
|
292
|
+
{
|
|
293
|
+
e.stopPropagation();
|
|
294
|
+
$this.paletteHolder.hasClass('active') ? $this.hidePalette($this) : $this.showPalette(e, $this);
|
|
295
|
+
});
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
$this.colorSelect($this, $this.settings.initColor);
|
|
299
|
+
}
|
|
300
|
+
},
|
|
301
|
+
|
|
302
|
+
showPalette: function(e, $this)
|
|
303
|
+
{
|
|
304
|
+
var offset = $this.paletteHolder.parent().offset();
|
|
305
|
+
|
|
306
|
+
//init some vars
|
|
307
|
+
var left = 0;
|
|
308
|
+
var top = $this.paletteHolder.parent().outerHeight();
|
|
309
|
+
$this.slideTopToBottom = top;
|
|
310
|
+
|
|
311
|
+
if(offset.left - $(window).scrollLeft() + $this.width > $(window).width()) left = -1 * ($this.width - $this.paletteHolder.parent().outerWidth());
|
|
312
|
+
if(offset.top - $(window).scrollTop() + $this.height > $(window).height())
|
|
313
|
+
{
|
|
314
|
+
$this.slideTopToBottom = 0;
|
|
315
|
+
top = -1 * ($this.height);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
$this.paletteHolder.css({left: left, top: top});
|
|
319
|
+
|
|
320
|
+
$this.paletteHolder.addClass('active')
|
|
321
|
+
|
|
322
|
+
if($this.settings.effect == 'slide')
|
|
323
|
+
{
|
|
324
|
+
$this.paletteHolder.stop(true, false).css({height: 0, top: ($this.slideTopToBottom == 0 ? 0 : top)}).show().animate({height: $this.height, top: top}, $this.settings.showSpeed);
|
|
325
|
+
}
|
|
326
|
+
else if($this.settings.effect == 'fade')
|
|
327
|
+
{
|
|
328
|
+
$this.paletteHolder.stop(true, false).show().animate({opacity: 1}, $this.settings.showSpeed);
|
|
329
|
+
}
|
|
330
|
+
else
|
|
331
|
+
{
|
|
332
|
+
$this.paletteHolder.show();
|
|
333
|
+
}
|
|
334
|
+
},
|
|
335
|
+
|
|
336
|
+
hidePalette: function($this)
|
|
337
|
+
{
|
|
338
|
+
//need this to avoid the double hide when you click on colour (once on click, once on mouse out) - this way it's only triggered once
|
|
339
|
+
if($this.paletteHolder.hasClass('active'))
|
|
340
|
+
{
|
|
341
|
+
$this.paletteHolder.removeClass('active');
|
|
342
|
+
|
|
343
|
+
if($this.settings.effect == 'slide')
|
|
344
|
+
{
|
|
345
|
+
$this.paletteHolder.stop(true, false).animate({height: 0, top: ($this.slideTopToBottom == 0 ? 0 : $this.slideTopToBottom)}, $this.settings.hideSpeed, function(){$this.paletteHolder.hide()});
|
|
346
|
+
}
|
|
347
|
+
else if($this.settings.effect == 'fade')
|
|
348
|
+
{
|
|
349
|
+
$this.paletteHolder.stop(true, false).animate({opacity: 0}, $this.settings.hideSpeed, function(){$this.paletteHolder.hide()});
|
|
350
|
+
}
|
|
351
|
+
else
|
|
352
|
+
{
|
|
353
|
+
$this.paletteHolder.hide();
|
|
354
|
+
}
|
|
355
|
+
}
|
|
356
|
+
},
|
|
357
|
+
|
|
358
|
+
toHex: function(color)
|
|
359
|
+
{
|
|
360
|
+
if(color.substring(0,3) == 'rgb')
|
|
361
|
+
{
|
|
362
|
+
var rgb = color.substring(4, color.length - 1).replace(/\s/g, '').split(',');
|
|
363
|
+
|
|
364
|
+
for(i in rgb)
|
|
365
|
+
{
|
|
366
|
+
rgb[i] = parseInt(rgb[i]).toString(16);
|
|
367
|
+
if(rgb[i] == '0') rgb[i] = '00';
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
var hex = '#' + rgb.join('').toUpperCase();
|
|
371
|
+
}
|
|
372
|
+
else
|
|
373
|
+
{
|
|
374
|
+
hex = color;//color.substring(0, 1) == '#' ? color.substring(1, color.length) : color;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
return hex;
|
|
378
|
+
},
|
|
379
|
+
|
|
380
|
+
validHex: function(hex)
|
|
381
|
+
{
|
|
382
|
+
return '#' + hex.replace(/[^0-9a-f]/ig, '').substring(0,6).toUpperCase();
|
|
383
|
+
}
|
|
384
|
+
}
|
|
358
385
|
|
|
359
386
|
})(jQuery);
|
|
360
387
|
|
metadata
CHANGED
|
@@ -1,32 +1,24 @@
|
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: wcolorpicker-rails
|
|
3
|
-
version: !ruby/object:Gem::Version
|
|
4
|
-
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 1.2.2
|
|
5
5
|
prerelease:
|
|
6
|
-
segments:
|
|
7
|
-
- 1
|
|
8
|
-
- 2
|
|
9
|
-
version: "1.2"
|
|
10
6
|
platform: ruby
|
|
11
|
-
authors:
|
|
7
|
+
authors:
|
|
12
8
|
- RogerE
|
|
13
9
|
autorequire:
|
|
14
10
|
bindir: bin
|
|
15
11
|
cert_chain: []
|
|
16
|
-
|
|
17
|
-
date: 2012-04-12 00:00:00 Z
|
|
12
|
+
date: 2012-10-20 00:00:00.000000000 Z
|
|
18
13
|
dependencies: []
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
email:
|
|
14
|
+
description: This gem Provides the Websanova Color Picker assets for your Rails application
|
|
15
|
+
.
|
|
16
|
+
email:
|
|
22
17
|
- roger@webfokus.no
|
|
23
18
|
executables: []
|
|
24
|
-
|
|
25
19
|
extensions: []
|
|
26
|
-
|
|
27
20
|
extra_rdoc_files: []
|
|
28
|
-
|
|
29
|
-
files:
|
|
21
|
+
files:
|
|
30
22
|
- .gitignore
|
|
31
23
|
- Gemfile
|
|
32
24
|
- README.md
|
|
@@ -38,36 +30,26 @@ files:
|
|
|
38
30
|
- wcolorpicker-rails.gemspec
|
|
39
31
|
homepage: https://github.com/RogerE/wcolorpicker-rails
|
|
40
32
|
licenses: []
|
|
41
|
-
|
|
42
33
|
post_install_message:
|
|
43
34
|
rdoc_options: []
|
|
44
|
-
|
|
45
|
-
require_paths:
|
|
35
|
+
require_paths:
|
|
46
36
|
- lib
|
|
47
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
|
37
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
48
38
|
none: false
|
|
49
|
-
requirements:
|
|
50
|
-
- -
|
|
51
|
-
- !ruby/object:Gem::Version
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
- 0
|
|
55
|
-
version: "0"
|
|
56
|
-
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
39
|
+
requirements:
|
|
40
|
+
- - ! '>='
|
|
41
|
+
- !ruby/object:Gem::Version
|
|
42
|
+
version: '0'
|
|
43
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
57
44
|
none: false
|
|
58
|
-
requirements:
|
|
59
|
-
- -
|
|
60
|
-
- !ruby/object:Gem::Version
|
|
61
|
-
|
|
62
|
-
segments:
|
|
63
|
-
- 0
|
|
64
|
-
version: "0"
|
|
45
|
+
requirements:
|
|
46
|
+
- - ! '>='
|
|
47
|
+
- !ruby/object:Gem::Version
|
|
48
|
+
version: '0'
|
|
65
49
|
requirements: []
|
|
66
|
-
|
|
67
50
|
rubyforge_project:
|
|
68
|
-
rubygems_version: 1.8.
|
|
51
|
+
rubygems_version: 1.8.24
|
|
69
52
|
signing_key:
|
|
70
53
|
specification_version: 3
|
|
71
54
|
summary: Use Websanova Color Picker with Rails Asset Pipeline
|
|
72
55
|
test_files: []
|
|
73
|
-
|