jquery-minicolors-rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +81 -0
- data/Rakefile +9 -0
- data/app/inputs/minicolors_input.rb +12 -0
- data/lib/jquery-minicolors-rails.rb +4 -0
- data/lib/jquery-minicolors-rails/engine.rb +5 -0
- data/lib/jquery-minicolors-rails/version.rb +3 -0
- data/vendor/assets/images/jquery-minicolors/circle.gif +0 -0
- data/vendor/assets/images/jquery-minicolors/gradient.png +0 -0
- data/vendor/assets/images/jquery-minicolors/line.gif +0 -0
- data/vendor/assets/images/jquery-minicolors/rainbow.png +0 -0
- data/vendor/assets/images/jquery-minicolors/trigger.png +0 -0
- data/vendor/assets/javascripts/jquery-minicolors-simple_form.js.coffee +2 -0
- data/vendor/assets/javascripts/jquery-minicolors.js +567 -0
- data/vendor/assets/stylesheets/jquery-minicolors.css.erb +65 -0
- metadata +97 -0
data/README.md
ADDED
@@ -0,0 +1,81 @@
|
|
1
|
+
# jQuery colorpicker for Rails
|
2
|
+
|
3
|
+
This gem embedes the jQuery colorpicker plugin miniColors in the Rails asset pipeline.
|
4
|
+
|
5
|
+
See https://github.com/claviska/jquery-miniColors
|
6
|
+
|
7
|
+
## Installation
|
8
|
+
|
9
|
+
Add to `Gemfile` run `bundle install`:
|
10
|
+
|
11
|
+
```ruby
|
12
|
+
# Gemfile
|
13
|
+
gem 'jquery-minicolors-rails'
|
14
|
+
```
|
15
|
+
|
16
|
+
Add to `app/assets/javascripts/application.js`:
|
17
|
+
|
18
|
+
```javascript
|
19
|
+
//= require jquery # Not included
|
20
|
+
//= require jquery-minicolors
|
21
|
+
```
|
22
|
+
|
23
|
+
Add to `app/assets/stylesheets/application.css`:
|
24
|
+
|
25
|
+
```css
|
26
|
+
/*
|
27
|
+
*= require jquery-minicolors
|
28
|
+
*/
|
29
|
+
```
|
30
|
+
|
31
|
+
# Usage
|
32
|
+
|
33
|
+
Just call `miniColors()` with any text-input selector:
|
34
|
+
|
35
|
+
```coffeescript
|
36
|
+
jQuery ->
|
37
|
+
$('input[type=text]').miniColors();
|
38
|
+
```
|
39
|
+
|
40
|
+
# With SimpleForm
|
41
|
+
|
42
|
+
See https://github.com/plataformatec/simple_form
|
43
|
+
|
44
|
+
```erb
|
45
|
+
<%# app/views/balloons/_form.html.erb %>
|
46
|
+
|
47
|
+
<%= simple_form_for @balloon do |f| %>
|
48
|
+
<%= f.input :color, as: :minicolors %>
|
49
|
+
<% end %>
|
50
|
+
```
|
51
|
+
|
52
|
+
Add to `app/assets/javascripts/application.js`:
|
53
|
+
|
54
|
+
```javascript
|
55
|
+
//= require jquery # Not included
|
56
|
+
//= require jquery-minicolors
|
57
|
+
//= require jquery-minicolors-simple_form
|
58
|
+
```
|
59
|
+
|
60
|
+
## MIT-License
|
61
|
+
|
62
|
+
Copyright 2012 Kostiantyn Kahanskyi
|
63
|
+
|
64
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
65
|
+
a copy of this software and associated documentation files (the
|
66
|
+
"Software"), to deal in the Software without restriction, including
|
67
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
68
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
69
|
+
permit persons to whom the Software is furnished to do so, subject to
|
70
|
+
the following conditions:
|
71
|
+
|
72
|
+
The above copyright notice and this permission notice shall be
|
73
|
+
included in all copies or substantial portions of the Software.
|
74
|
+
|
75
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
76
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
77
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
78
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
79
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
80
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
81
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/Rakefile
ADDED
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,567 @@
|
|
1
|
+
/*
|
2
|
+
* jQuery miniColors: A small color selector
|
3
|
+
*
|
4
|
+
* Copyright 2011 Cory LaViska for A Beautiful Site, LLC. (http://abeautifulsite.net/)
|
5
|
+
*
|
6
|
+
* Dual licensed under the MIT or GPL Version 2 licenses
|
7
|
+
*
|
8
|
+
*/
|
9
|
+
if(jQuery) (function($) {
|
10
|
+
|
11
|
+
$.extend($.fn, {
|
12
|
+
|
13
|
+
miniColors: function(o, data) {
|
14
|
+
|
15
|
+
var create = function(input, o, data) {
|
16
|
+
//
|
17
|
+
// Creates a new instance of the miniColors selector
|
18
|
+
//
|
19
|
+
|
20
|
+
// Determine initial color (defaults to white)
|
21
|
+
var color = expandHex(input.val());
|
22
|
+
if( !color ) color = 'ffffff';
|
23
|
+
var hsb = hex2hsb(color);
|
24
|
+
|
25
|
+
// Create trigger
|
26
|
+
var trigger = $('<a class="miniColors-trigger" style="background-color: #' + color + '" href="#"></a>');
|
27
|
+
trigger.insertAfter(input);
|
28
|
+
|
29
|
+
// Set input data and update attributes
|
30
|
+
input
|
31
|
+
.addClass('miniColors')
|
32
|
+
.data('original-maxlength', input.attr('maxlength') || null)
|
33
|
+
.data('original-autocomplete', input.attr('autocomplete') || null)
|
34
|
+
.data('letterCase', 'uppercase')
|
35
|
+
.data('trigger', trigger)
|
36
|
+
.data('hsb', hsb)
|
37
|
+
.data('change', o.change ? o.change : null)
|
38
|
+
.attr('maxlength', 7)
|
39
|
+
.attr('autocomplete', 'off')
|
40
|
+
.val('#' + convertCase(color, o.letterCase));
|
41
|
+
|
42
|
+
// Handle options
|
43
|
+
if( o.readonly ) input.prop('readonly', true);
|
44
|
+
if( o.disabled ) disable(input);
|
45
|
+
|
46
|
+
// Show selector when trigger is clicked
|
47
|
+
trigger.bind('click.miniColors', function(event) {
|
48
|
+
event.preventDefault();
|
49
|
+
if( input.val() === '' ) input.val('#');
|
50
|
+
show(input);
|
51
|
+
|
52
|
+
});
|
53
|
+
|
54
|
+
// Show selector when input receives focus
|
55
|
+
input.bind('focus.miniColors', function(event) {
|
56
|
+
if( input.val() === '' ) input.val('#');
|
57
|
+
show(input);
|
58
|
+
});
|
59
|
+
|
60
|
+
// Hide on blur
|
61
|
+
input.bind('blur.miniColors', function(event) {
|
62
|
+
var hex = expandHex(input.val());
|
63
|
+
input.val( hex ? '#' + convertCase(hex, input.data('letterCase')) : '' );
|
64
|
+
});
|
65
|
+
|
66
|
+
// Hide when tabbing out of the input
|
67
|
+
input.bind('keydown.miniColors', function(event) {
|
68
|
+
if( event.keyCode === 9 ) hide(input);
|
69
|
+
});
|
70
|
+
|
71
|
+
// Update when color is typed in
|
72
|
+
input.bind('keyup.miniColors', function(event) {
|
73
|
+
setColorFromInput(input);
|
74
|
+
});
|
75
|
+
|
76
|
+
// Handle pasting
|
77
|
+
input.bind('paste.miniColors', function(event) {
|
78
|
+
// Short pause to wait for paste to complete
|
79
|
+
setTimeout( function() {
|
80
|
+
setColorFromInput(input);
|
81
|
+
}, 5);
|
82
|
+
});
|
83
|
+
|
84
|
+
};
|
85
|
+
|
86
|
+
var destroy = function(input) {
|
87
|
+
//
|
88
|
+
// Destroys an active instance of the miniColors selector
|
89
|
+
//
|
90
|
+
|
91
|
+
hide();
|
92
|
+
input = $(input);
|
93
|
+
|
94
|
+
// Restore to original state
|
95
|
+
input.data('trigger').remove();
|
96
|
+
input
|
97
|
+
.attr('autocomplete', input.data('original-autocomplete'))
|
98
|
+
.attr('maxlength', input.data('original-maxlength'))
|
99
|
+
.removeData()
|
100
|
+
.removeClass('miniColors')
|
101
|
+
.unbind('.miniColors');
|
102
|
+
$(document).unbind('.miniColors');
|
103
|
+
};
|
104
|
+
|
105
|
+
var enable = function(input) {
|
106
|
+
//
|
107
|
+
// Enables the input control and the selector
|
108
|
+
//
|
109
|
+
input
|
110
|
+
.prop('disabled', false)
|
111
|
+
.data('trigger')
|
112
|
+
.css('opacity', 1);
|
113
|
+
};
|
114
|
+
|
115
|
+
var disable = function(input) {
|
116
|
+
//
|
117
|
+
// Disables the input control and the selector
|
118
|
+
//
|
119
|
+
hide(input);
|
120
|
+
input
|
121
|
+
.prop('disabled', true)
|
122
|
+
.data('trigger')
|
123
|
+
.css('opacity', 0.5);
|
124
|
+
};
|
125
|
+
|
126
|
+
var show = function(input) {
|
127
|
+
//
|
128
|
+
// Shows the miniColors selector
|
129
|
+
//
|
130
|
+
if( input.prop('disabled') ) return false;
|
131
|
+
|
132
|
+
// Hide all other instances
|
133
|
+
hide();
|
134
|
+
|
135
|
+
// Generate the selector
|
136
|
+
var selector = $('<div class="miniColors-selector"></div>');
|
137
|
+
selector
|
138
|
+
.append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"></div></div>')
|
139
|
+
.append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>')
|
140
|
+
.css({
|
141
|
+
top: input.is(':visible') ? input.offset().top + input.outerHeight() : input.data('trigger').offset().top + input.data('trigger').outerHeight(),
|
142
|
+
left: input.is(':visible') ? input.offset().left : input.data('trigger').offset().left,
|
143
|
+
display: 'none'
|
144
|
+
})
|
145
|
+
.addClass( input.attr('class') );
|
146
|
+
|
147
|
+
// Set background for colors
|
148
|
+
var hsb = input.data('hsb');
|
149
|
+
selector
|
150
|
+
.find('.miniColors-colors')
|
151
|
+
.css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 }));
|
152
|
+
|
153
|
+
// Set colorPicker position
|
154
|
+
var colorPosition = input.data('colorPosition');
|
155
|
+
if( !colorPosition ) colorPosition = getColorPositionFromHSB(hsb);
|
156
|
+
selector.find('.miniColors-colorPicker')
|
157
|
+
.css('top', colorPosition.y + 'px')
|
158
|
+
.css('left', colorPosition.x + 'px');
|
159
|
+
|
160
|
+
// Set huePicker position
|
161
|
+
var huePosition = input.data('huePosition');
|
162
|
+
if( !huePosition ) huePosition = getHuePositionFromHSB(hsb);
|
163
|
+
selector.find('.miniColors-huePicker').css('top', huePosition.y + 'px');
|
164
|
+
|
165
|
+
// Set input data
|
166
|
+
input
|
167
|
+
.data('selector', selector)
|
168
|
+
.data('huePicker', selector.find('.miniColors-huePicker'))
|
169
|
+
.data('colorPicker', selector.find('.miniColors-colorPicker'))
|
170
|
+
.data('mousebutton', 0);
|
171
|
+
|
172
|
+
$('BODY').append(selector);
|
173
|
+
selector.fadeIn(100);
|
174
|
+
|
175
|
+
// Prevent text selection in IE
|
176
|
+
selector.bind('selectstart', function() { return false; });
|
177
|
+
|
178
|
+
$(document).bind('mousedown.miniColors touchstart.miniColors', function(event) {
|
179
|
+
|
180
|
+
input.data('mousebutton', 1);
|
181
|
+
|
182
|
+
if( $(event.target).parents().andSelf().hasClass('miniColors-colors') ) {
|
183
|
+
event.preventDefault();
|
184
|
+
input.data('moving', 'colors');
|
185
|
+
moveColor(input, event);
|
186
|
+
}
|
187
|
+
|
188
|
+
if( $(event.target).parents().andSelf().hasClass('miniColors-hues') ) {
|
189
|
+
event.preventDefault();
|
190
|
+
input.data('moving', 'hues');
|
191
|
+
moveHue(input, event);
|
192
|
+
}
|
193
|
+
|
194
|
+
if( $(event.target).parents().andSelf().hasClass('miniColors-selector') ) {
|
195
|
+
event.preventDefault();
|
196
|
+
return;
|
197
|
+
}
|
198
|
+
|
199
|
+
if( $(event.target).parents().andSelf().hasClass('miniColors') ) return;
|
200
|
+
|
201
|
+
hide(input);
|
202
|
+
});
|
203
|
+
|
204
|
+
$(document)
|
205
|
+
.bind('mouseup.miniColors touchend.miniColors', function(event) {
|
206
|
+
event.preventDefault();
|
207
|
+
input.data('mousebutton', 0).removeData('moving');
|
208
|
+
})
|
209
|
+
.bind('mousemove.miniColors touchmove.miniColors', function(event) {
|
210
|
+
event.preventDefault();
|
211
|
+
if( input.data('mousebutton') === 1 ) {
|
212
|
+
if( input.data('moving') === 'colors' ) moveColor(input, event);
|
213
|
+
if( input.data('moving') === 'hues' ) moveHue(input, event);
|
214
|
+
}
|
215
|
+
});
|
216
|
+
|
217
|
+
};
|
218
|
+
|
219
|
+
var hide = function(input) {
|
220
|
+
|
221
|
+
//
|
222
|
+
// Hides one or more miniColors selectors
|
223
|
+
//
|
224
|
+
|
225
|
+
// Hide all other instances if input isn't specified
|
226
|
+
if( !input ) input = '.miniColors';
|
227
|
+
|
228
|
+
$(input).each( function() {
|
229
|
+
var selector = $(this).data('selector');
|
230
|
+
$(this).removeData('selector');
|
231
|
+
$(selector).fadeOut(100, function() {
|
232
|
+
$(this).remove();
|
233
|
+
});
|
234
|
+
});
|
235
|
+
|
236
|
+
$(document).unbind('.miniColors');
|
237
|
+
|
238
|
+
};
|
239
|
+
|
240
|
+
var moveColor = function(input, event) {
|
241
|
+
|
242
|
+
var colorPicker = input.data('colorPicker');
|
243
|
+
|
244
|
+
colorPicker.hide();
|
245
|
+
|
246
|
+
var position = {
|
247
|
+
x: event.pageX,
|
248
|
+
y: event.pageY
|
249
|
+
};
|
250
|
+
|
251
|
+
// Touch support
|
252
|
+
if( event.originalEvent.changedTouches ) {
|
253
|
+
position.x = event.originalEvent.changedTouches[0].pageX;
|
254
|
+
position.y = event.originalEvent.changedTouches[0].pageY;
|
255
|
+
}
|
256
|
+
position.x = position.x - input.data('selector').find('.miniColors-colors').offset().left - 5;
|
257
|
+
position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 5;
|
258
|
+
if( position.x <= -5 ) position.x = -5;
|
259
|
+
if( position.x >= 144 ) position.x = 144;
|
260
|
+
if( position.y <= -5 ) position.y = -5;
|
261
|
+
if( position.y >= 144 ) position.y = 144;
|
262
|
+
|
263
|
+
input.data('colorPosition', position);
|
264
|
+
colorPicker.css('left', position.x).css('top', position.y).show();
|
265
|
+
|
266
|
+
// Calculate saturation
|
267
|
+
var s = Math.round((position.x + 5) * 0.67);
|
268
|
+
if( s < 0 ) s = 0;
|
269
|
+
if( s > 100 ) s = 100;
|
270
|
+
|
271
|
+
// Calculate brightness
|
272
|
+
var b = 100 - Math.round((position.y + 5) * 0.67);
|
273
|
+
if( b < 0 ) b = 0;
|
274
|
+
if( b > 100 ) b = 100;
|
275
|
+
|
276
|
+
// Update HSB values
|
277
|
+
var hsb = input.data('hsb');
|
278
|
+
hsb.s = s;
|
279
|
+
hsb.b = b;
|
280
|
+
|
281
|
+
// Set color
|
282
|
+
setColor(input, hsb, true);
|
283
|
+
};
|
284
|
+
|
285
|
+
var moveHue = function(input, event) {
|
286
|
+
|
287
|
+
var huePicker = input.data('huePicker');
|
288
|
+
|
289
|
+
huePicker.hide();
|
290
|
+
|
291
|
+
var position = {
|
292
|
+
y: event.pageY
|
293
|
+
};
|
294
|
+
|
295
|
+
// Touch support
|
296
|
+
if( event.originalEvent.changedTouches ) {
|
297
|
+
position.y = event.originalEvent.changedTouches[0].pageY;
|
298
|
+
}
|
299
|
+
|
300
|
+
position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 1;
|
301
|
+
if( position.y <= -1 ) position.y = -1;
|
302
|
+
if( position.y >= 149 ) position.y = 149;
|
303
|
+
input.data('huePosition', position);
|
304
|
+
huePicker.css('top', position.y).show();
|
305
|
+
|
306
|
+
// Calculate hue
|
307
|
+
var h = Math.round((150 - position.y - 1) * 2.4);
|
308
|
+
if( h < 0 ) h = 0;
|
309
|
+
if( h > 360 ) h = 360;
|
310
|
+
|
311
|
+
// Update HSB values
|
312
|
+
var hsb = input.data('hsb');
|
313
|
+
hsb.h = h;
|
314
|
+
|
315
|
+
// Set color
|
316
|
+
setColor(input, hsb, true);
|
317
|
+
|
318
|
+
};
|
319
|
+
|
320
|
+
var setColor = function(input, hsb, updateInput) {
|
321
|
+
input.data('hsb', hsb);
|
322
|
+
var hex = hsb2hex(hsb);
|
323
|
+
if( updateInput ) input.val( '#' + convertCase(hex, input.data('letterCase')) );
|
324
|
+
input.data('trigger').css('backgroundColor', '#' + hex);
|
325
|
+
if( input.data('selector') ) input.data('selector').find('.miniColors-colors').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 }));
|
326
|
+
|
327
|
+
// Fire change callback
|
328
|
+
if( input.data('change') ) {
|
329
|
+
if( hex === input.data('lastChange') ) return;
|
330
|
+
input.data('change').call(input.get(0), '#' + hex, hsb2rgb(hsb));
|
331
|
+
input.data('lastChange', hex);
|
332
|
+
}
|
333
|
+
|
334
|
+
};
|
335
|
+
|
336
|
+
var setColorFromInput = function(input) {
|
337
|
+
|
338
|
+
input.val('#' + cleanHex(input.val()));
|
339
|
+
var hex = expandHex(input.val());
|
340
|
+
if( !hex ) return false;
|
341
|
+
|
342
|
+
// Get HSB equivalent
|
343
|
+
var hsb = hex2hsb(hex);
|
344
|
+
|
345
|
+
// If color is the same, no change required
|
346
|
+
var currentHSB = input.data('hsb');
|
347
|
+
if( hsb.h === currentHSB.h && hsb.s === currentHSB.s && hsb.b === currentHSB.b ) return true;
|
348
|
+
|
349
|
+
// Set colorPicker position
|
350
|
+
var colorPosition = getColorPositionFromHSB(hsb);
|
351
|
+
var colorPicker = $(input.data('colorPicker'));
|
352
|
+
colorPicker.css('top', colorPosition.y + 'px').css('left', colorPosition.x + 'px');
|
353
|
+
input.data('colorPosition', colorPosition);
|
354
|
+
|
355
|
+
// Set huePosition position
|
356
|
+
var huePosition = getHuePositionFromHSB(hsb);
|
357
|
+
var huePicker = $(input.data('huePicker'));
|
358
|
+
huePicker.css('top', huePosition.y + 'px');
|
359
|
+
input.data('huePosition', huePosition);
|
360
|
+
|
361
|
+
setColor(input, hsb);
|
362
|
+
|
363
|
+
return true;
|
364
|
+
|
365
|
+
};
|
366
|
+
|
367
|
+
var convertCase = function(string, letterCase) {
|
368
|
+
if( letterCase === 'lowercase' ) return string.toLowerCase();
|
369
|
+
if( letterCase === 'uppercase' ) return string.toUpperCase();
|
370
|
+
return string;
|
371
|
+
};
|
372
|
+
|
373
|
+
var getColorPositionFromHSB = function(hsb) {
|
374
|
+
var x = Math.ceil(hsb.s / 0.67);
|
375
|
+
if( x < 0 ) x = 0;
|
376
|
+
if( x > 150 ) x = 150;
|
377
|
+
var y = 150 - Math.ceil(hsb.b / 0.67);
|
378
|
+
if( y < 0 ) y = 0;
|
379
|
+
if( y > 150 ) y = 150;
|
380
|
+
return { x: x - 5, y: y - 5 };
|
381
|
+
};
|
382
|
+
|
383
|
+
var getHuePositionFromHSB = function(hsb) {
|
384
|
+
var y = 150 - (hsb.h / 2.4);
|
385
|
+
if( y < 0 ) h = 0;
|
386
|
+
if( y > 150 ) h = 150;
|
387
|
+
return { y: y - 1 };
|
388
|
+
};
|
389
|
+
|
390
|
+
var cleanHex = function(hex) {
|
391
|
+
return hex.replace(/[^A-F0-9]/ig, '');
|
392
|
+
};
|
393
|
+
|
394
|
+
var expandHex = function(hex) {
|
395
|
+
hex = cleanHex(hex);
|
396
|
+
if( !hex ) return null;
|
397
|
+
if( hex.length === 3 ) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
398
|
+
return hex.length === 6 ? hex : null;
|
399
|
+
};
|
400
|
+
|
401
|
+
var hsb2rgb = function(hsb) {
|
402
|
+
var rgb = {};
|
403
|
+
var h = Math.round(hsb.h);
|
404
|
+
var s = Math.round(hsb.s*255/100);
|
405
|
+
var v = Math.round(hsb.b*255/100);
|
406
|
+
if(s === 0) {
|
407
|
+
rgb.r = rgb.g = rgb.b = v;
|
408
|
+
} else {
|
409
|
+
var t1 = v;
|
410
|
+
var t2 = (255 - s) * v / 255;
|
411
|
+
var t3 = (t1 - t2) * (h % 60) / 60;
|
412
|
+
if( h === 360 ) h = 0;
|
413
|
+
if( h < 60 ) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
|
414
|
+
else if( h < 120 ) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
|
415
|
+
else if( h < 180 ) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
|
416
|
+
else if( h < 240 ) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
|
417
|
+
else if( h < 300 ) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
|
418
|
+
else if( h < 360 ) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
|
419
|
+
else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
|
420
|
+
}
|
421
|
+
return {
|
422
|
+
r: Math.round(rgb.r),
|
423
|
+
g: Math.round(rgb.g),
|
424
|
+
b: Math.round(rgb.b)
|
425
|
+
};
|
426
|
+
};
|
427
|
+
|
428
|
+
var rgb2hex = function(rgb) {
|
429
|
+
var hex = [
|
430
|
+
rgb.r.toString(16),
|
431
|
+
rgb.g.toString(16),
|
432
|
+
rgb.b.toString(16)
|
433
|
+
];
|
434
|
+
$.each(hex, function(nr, val) {
|
435
|
+
if (val.length === 1) hex[nr] = '0' + val;
|
436
|
+
});
|
437
|
+
return hex.join('');
|
438
|
+
};
|
439
|
+
|
440
|
+
var hex2rgb = function(hex) {
|
441
|
+
hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
442
|
+
|
443
|
+
return {
|
444
|
+
r: hex >> 16,
|
445
|
+
g: (hex & 0x00FF00) >> 8,
|
446
|
+
b: (hex & 0x0000FF)
|
447
|
+
};
|
448
|
+
};
|
449
|
+
|
450
|
+
var rgb2hsb = function(rgb) {
|
451
|
+
var hsb = { h: 0, s: 0, b: 0 };
|
452
|
+
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
453
|
+
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
454
|
+
var delta = max - min;
|
455
|
+
hsb.b = max;
|
456
|
+
hsb.s = max !== 0 ? 255 * delta / max : 0;
|
457
|
+
if( hsb.s !== 0 ) {
|
458
|
+
if( rgb.r === max ) {
|
459
|
+
hsb.h = (rgb.g - rgb.b) / delta;
|
460
|
+
} else if( rgb.g === max ) {
|
461
|
+
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
462
|
+
} else {
|
463
|
+
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
464
|
+
}
|
465
|
+
} else {
|
466
|
+
hsb.h = -1;
|
467
|
+
}
|
468
|
+
hsb.h *= 60;
|
469
|
+
if( hsb.h < 0 ) {
|
470
|
+
hsb.h += 360;
|
471
|
+
}
|
472
|
+
hsb.s *= 100/255;
|
473
|
+
hsb.b *= 100/255;
|
474
|
+
return hsb;
|
475
|
+
};
|
476
|
+
|
477
|
+
var hex2hsb = function(hex) {
|
478
|
+
var hsb = rgb2hsb(hex2rgb(hex));
|
479
|
+
// Zero out hue marker for black, white, and grays (saturation === 0)
|
480
|
+
if( hsb.s === 0 ) hsb.h = 360;
|
481
|
+
return hsb;
|
482
|
+
};
|
483
|
+
|
484
|
+
var hsb2hex = function(hsb) {
|
485
|
+
return rgb2hex(hsb2rgb(hsb));
|
486
|
+
};
|
487
|
+
|
488
|
+
|
489
|
+
// Handle calls to $([selector]).miniColors()
|
490
|
+
switch(o) {
|
491
|
+
|
492
|
+
case 'readonly':
|
493
|
+
|
494
|
+
$(this).each( function() {
|
495
|
+
if( !$(this).hasClass('miniColors') ) return;
|
496
|
+
$(this).prop('readonly', data);
|
497
|
+
});
|
498
|
+
|
499
|
+
return $(this);
|
500
|
+
|
501
|
+
case 'disabled':
|
502
|
+
|
503
|
+
$(this).each( function() {
|
504
|
+
if( !$(this).hasClass('miniColors') ) return;
|
505
|
+
if( data ) {
|
506
|
+
disable($(this));
|
507
|
+
} else {
|
508
|
+
enable($(this));
|
509
|
+
}
|
510
|
+
});
|
511
|
+
|
512
|
+
return $(this);
|
513
|
+
|
514
|
+
case 'value':
|
515
|
+
|
516
|
+
// Getter
|
517
|
+
if( data === undefined ) {
|
518
|
+
if( !$(this).hasClass('miniColors') ) return;
|
519
|
+
var input = $(this),
|
520
|
+
hex = expandHex(input.val());
|
521
|
+
return hex ? '#' + convertCase(hex, input.data('letterCase')) : null;
|
522
|
+
}
|
523
|
+
|
524
|
+
// Setter
|
525
|
+
$(this).each( function() {
|
526
|
+
if( !$(this).hasClass('miniColors') ) return;
|
527
|
+
$(this).val(data);
|
528
|
+
setColorFromInput($(this));
|
529
|
+
});
|
530
|
+
|
531
|
+
return $(this);
|
532
|
+
|
533
|
+
case 'destroy':
|
534
|
+
|
535
|
+
$(this).each( function() {
|
536
|
+
if( !$(this).hasClass('miniColors') ) return;
|
537
|
+
destroy($(this));
|
538
|
+
});
|
539
|
+
|
540
|
+
return $(this);
|
541
|
+
|
542
|
+
default:
|
543
|
+
|
544
|
+
if( !o ) o = {};
|
545
|
+
|
546
|
+
$(this).each( function() {
|
547
|
+
|
548
|
+
// Must be called on an input element
|
549
|
+
if( $(this)[0].tagName.toLowerCase() !== 'input' ) return;
|
550
|
+
|
551
|
+
// If a trigger is present, the control was already created
|
552
|
+
if( $(this).data('trigger') ) return;
|
553
|
+
|
554
|
+
// Create the control
|
555
|
+
create($(this), o, data);
|
556
|
+
|
557
|
+
});
|
558
|
+
|
559
|
+
return $(this);
|
560
|
+
|
561
|
+
}
|
562
|
+
|
563
|
+
}
|
564
|
+
|
565
|
+
});
|
566
|
+
|
567
|
+
})(jQuery);
|
@@ -0,0 +1,65 @@
|
|
1
|
+
.miniColors-trigger {
|
2
|
+
height: 22px;
|
3
|
+
width: 22px;
|
4
|
+
background: url(<%= image_path('jquery-minicolors/trigger.png') %>) center no-repeat;
|
5
|
+
vertical-align: middle;
|
6
|
+
margin: 0 .25em;
|
7
|
+
display: inline-block;
|
8
|
+
outline: none;
|
9
|
+
}
|
10
|
+
|
11
|
+
.miniColors-selector {
|
12
|
+
position: absolute;
|
13
|
+
width: 175px;
|
14
|
+
height: 150px;
|
15
|
+
background: #FFF;
|
16
|
+
border: solid 1px #BBB;
|
17
|
+
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
|
18
|
+
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
|
19
|
+
box-shadow: 0 0 6px rgba(0, 0, 0, .25);
|
20
|
+
-moz-border-radius: 5px;
|
21
|
+
-webkit-border-radius: 5px;
|
22
|
+
border-radius: 5px;
|
23
|
+
padding: 5px;
|
24
|
+
z-index: 999999;
|
25
|
+
}
|
26
|
+
|
27
|
+
.miniColors-selector.black {
|
28
|
+
background: #000;
|
29
|
+
border-color: #000;
|
30
|
+
}
|
31
|
+
|
32
|
+
.miniColors-colors {
|
33
|
+
position: absolute;
|
34
|
+
top: 5px;
|
35
|
+
left: 5px;
|
36
|
+
width: 150px;
|
37
|
+
height: 150px;
|
38
|
+
background: url(<%= image_path('jquery-minicolors/gradient.png') %>) center no-repeat;
|
39
|
+
cursor: crosshair;
|
40
|
+
}
|
41
|
+
|
42
|
+
.miniColors-hues {
|
43
|
+
position: absolute;
|
44
|
+
top: 5px;
|
45
|
+
left: 160px;
|
46
|
+
width: 20px;
|
47
|
+
height: 150px;
|
48
|
+
background: url(<%= image_path('jquery-minicolors/rainbow.png') %>) center no-repeat;
|
49
|
+
cursor: crosshair;
|
50
|
+
}
|
51
|
+
|
52
|
+
.miniColors-colorPicker {
|
53
|
+
position: absolute;
|
54
|
+
width: 11px;
|
55
|
+
height: 11px;
|
56
|
+
background: url(<%= image_path('jquery-minicolors/circle.gif') %>) center no-repeat;
|
57
|
+
}
|
58
|
+
|
59
|
+
.miniColors-huePicker {
|
60
|
+
position: absolute;
|
61
|
+
left: -3px;
|
62
|
+
width: 26px;
|
63
|
+
height: 3px;
|
64
|
+
background: url(<%= image_path('jquery-minicolors/line.gif') %>) center no-repeat;
|
65
|
+
}
|
metadata
ADDED
@@ -0,0 +1,97 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: jquery-minicolors-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Kostiantyn Kahanskyi
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-10-08 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: rails
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ~>
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: 3.2.8
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ~>
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: 3.2.8
|
30
|
+
- !ruby/object:Gem::Dependency
|
31
|
+
name: jquery-rails
|
32
|
+
requirement: !ruby/object:Gem::Requirement
|
33
|
+
none: false
|
34
|
+
requirements:
|
35
|
+
- - ! '>='
|
36
|
+
- !ruby/object:Gem::Version
|
37
|
+
version: '0'
|
38
|
+
type: :runtime
|
39
|
+
prerelease: false
|
40
|
+
version_requirements: !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ! '>='
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: '0'
|
46
|
+
description: Colorpicker-plugin for jQuery, integrated in Rails asset pipeline
|
47
|
+
email:
|
48
|
+
- kostiantyn.kahanskyi@googlemail.com
|
49
|
+
executables: []
|
50
|
+
extensions: []
|
51
|
+
extra_rdoc_files: []
|
52
|
+
files:
|
53
|
+
- app/inputs/minicolors_input.rb
|
54
|
+
- lib/jquery-minicolors-rails/engine.rb
|
55
|
+
- lib/jquery-minicolors-rails/version.rb
|
56
|
+
- lib/jquery-minicolors-rails.rb
|
57
|
+
- vendor/assets/images/jquery-minicolors/circle.gif
|
58
|
+
- vendor/assets/images/jquery-minicolors/gradient.png
|
59
|
+
- vendor/assets/images/jquery-minicolors/line.gif
|
60
|
+
- vendor/assets/images/jquery-minicolors/rainbow.png
|
61
|
+
- vendor/assets/images/jquery-minicolors/trigger.png
|
62
|
+
- vendor/assets/javascripts/jquery-minicolors-simple_form.js.coffee
|
63
|
+
- vendor/assets/javascripts/jquery-minicolors.js
|
64
|
+
- vendor/assets/stylesheets/jquery-minicolors.css.erb
|
65
|
+
- Rakefile
|
66
|
+
- README.md
|
67
|
+
homepage: https://github.com/kostia/jquery-minicolors-rails
|
68
|
+
licenses: []
|
69
|
+
post_install_message:
|
70
|
+
rdoc_options: []
|
71
|
+
require_paths:
|
72
|
+
- lib
|
73
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
74
|
+
none: false
|
75
|
+
requirements:
|
76
|
+
- - ! '>='
|
77
|
+
- !ruby/object:Gem::Version
|
78
|
+
version: '0'
|
79
|
+
segments:
|
80
|
+
- 0
|
81
|
+
hash: 4555260701166408700
|
82
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
83
|
+
none: false
|
84
|
+
requirements:
|
85
|
+
- - ! '>='
|
86
|
+
- !ruby/object:Gem::Version
|
87
|
+
version: '0'
|
88
|
+
segments:
|
89
|
+
- 0
|
90
|
+
hash: 4555260701166408700
|
91
|
+
requirements: []
|
92
|
+
rubyforge_project:
|
93
|
+
rubygems_version: 1.8.23
|
94
|
+
signing_key:
|
95
|
+
specification_version: 3
|
96
|
+
summary: Colorpicker-plugin for jQuery, integrated in Rails asset pipeline
|
97
|
+
test_files: []
|