bootstrap-colorpicker-rails 0.1
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/Gemfile +4 -0
- data/README.md +46 -0
- data/Rakefile +12 -0
- data/bootstrap-colorpicker-rails.gemspec +19 -0
- data/lib/bootstrap-colorpicker-rails.rb +12 -0
- data/lib/bootstrap-colorpicker-rails/engine.rb +6 -0
- data/lib/bootstrap-colorpicker-rails/railtie.rb +5 -0
- data/lib/bootstrap-colorpicker-rails/version.rb +5 -0
- data/vendor/assets/images/alpha.png +0 -0
- data/vendor/assets/images/hue.png +0 -0
- data/vendor/assets/images/saturation.png +0 -0
- data/vendor/assets/javascripts/bootstrap-colorpicker.js +520 -0
- data/vendor/assets/stylesheets/bootstrap-colorpicker.css +127 -0
- metadata +92 -0
data/Gemfile
ADDED
data/README.md
ADDED
@@ -0,0 +1,46 @@
|
|
1
|
+
bootstrap-colorpicker-rails
|
2
|
+
===========================
|
3
|
+
|
4
|
+
A Colorpicker for Twitter Bootstrap, integrated with Rails assets pipeline
|
5
|
+
|
6
|
+
Bootstrap colorpicker for Rails
|
7
|
+
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
|
8
|
+
|
9
|
+
http://twitter.github.com/bootstrap/
|
10
|
+
|
11
|
+
Bootstrap colorpicker is a plugin for Bootstrap designed by Stefan Petre. It provides a stylish date picker for Bootstrap.
|
12
|
+
|
13
|
+
http://www.eyecon.ro/bootstrap-colorpicker/
|
14
|
+
|
15
|
+
bootstrap-colorpicker-rails project integrates colorpicker with Rails 3 assets pipeline.
|
16
|
+
|
17
|
+
http://github.com/alessani/bootstrap-colorpicker-rails
|
18
|
+
|
19
|
+
|
20
|
+
Rails > 3.1
|
21
|
+
Include bootstrap-colorpicker-rails in Gemfile;
|
22
|
+
|
23
|
+
gem 'bootstrap-colorpicker-rails'
|
24
|
+
|
25
|
+
or you can install from latest build;
|
26
|
+
|
27
|
+
gem 'bootstrap-colorpicker-rails', :require => 'bootstrap-colorpicker-rails',
|
28
|
+
:git => 'git://github.com/alessani/bootstrap-colorpicker-rails.git'
|
29
|
+
and run bundle install.
|
30
|
+
|
31
|
+
Stylesheets
|
32
|
+
Add necessary stylesheet file to app/assets/stylesheets/application.css
|
33
|
+
|
34
|
+
*= require bootstrap-colorpicker
|
35
|
+
|
36
|
+
Javascripts
|
37
|
+
Add necessary javascript(s) files to app/assets/javascripts/application.js
|
38
|
+
|
39
|
+
//= require bootstrap-colorpicker
|
40
|
+
|
41
|
+
Using bootstrap-colorpicker-rails
|
42
|
+
Just call colorpicker() with any selector.
|
43
|
+
|
44
|
+
$('.colorpicker').colorpicker()
|
45
|
+
|
46
|
+
There are some options you can pass to colorpicker(). They are documented at http://www.eyecon.ro/bootstrap-colorpicker/
|
data/Rakefile
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
#!/usr/bin/env rake
|
2
|
+
require File.expand_path('../lib/bootstrap-colorpicker-rails/version', __FILE__)
|
3
|
+
|
4
|
+
desc "Build the gem"
|
5
|
+
task "build" do
|
6
|
+
system("gem build bootstrap-colorpicker-rails.gemspec")
|
7
|
+
end
|
8
|
+
|
9
|
+
desc "Publish the gem"
|
10
|
+
task 'publish' do
|
11
|
+
system("gem push bootstrap-colorpicker-rails-#{BootstrapColorpickerRails::Rails::VERSION}.gem")
|
12
|
+
end
|
@@ -0,0 +1,19 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
require File.expand_path('../lib/bootstrap-colorpicker-rails/version', __FILE__)
|
3
|
+
|
4
|
+
Gem::Specification.new do |gem|
|
5
|
+
gem.authors = ["Matteo Alessani"]
|
6
|
+
gem.email = ["alessani@gmail.com"]
|
7
|
+
gem.description = %q{A color picker for Twitter Bootstrap}
|
8
|
+
gem.homepage = "https://github.com/alessani/bootstrap-colorpicker-rails"
|
9
|
+
gem.summary = gem.description
|
10
|
+
|
11
|
+
gem.name = "bootstrap-colorpicker-rails"
|
12
|
+
gem.require_paths = ["lib"]
|
13
|
+
gem.files = `git ls-files`.split("\n")
|
14
|
+
gem.version = BootstrapColorpickerRails::Rails::VERSION
|
15
|
+
|
16
|
+
gem.add_dependency "railties", ">= 3.0"
|
17
|
+
gem.add_development_dependency "bundler", ">= 1.0"
|
18
|
+
gem.add_development_dependency "rake"
|
19
|
+
end
|
@@ -0,0 +1,12 @@
|
|
1
|
+
require "rails"
|
2
|
+
require "bootstrap-colorpicker-rails/version"
|
3
|
+
|
4
|
+
module BootstrapDatepickerRails
|
5
|
+
module Rails
|
6
|
+
if ::Rails.version < "3.1"
|
7
|
+
require "bootstrap-colorpicker-rails/railtie"
|
8
|
+
else
|
9
|
+
require "bootstrap-colorpicker-rails/engine"
|
10
|
+
end
|
11
|
+
end
|
12
|
+
end
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,520 @@
|
|
1
|
+
/* =========================================================
|
2
|
+
* bootstrap-colorpicker.js
|
3
|
+
* http://www.eyecon.ro/bootstrap-colorpicker
|
4
|
+
* =========================================================
|
5
|
+
* Copyright 2012 Stefan Petre
|
6
|
+
*
|
7
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
8
|
+
* you may not use this file except in compliance with the License.
|
9
|
+
* You may obtain a copy of the License at
|
10
|
+
*
|
11
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
12
|
+
*
|
13
|
+
* Unless required by applicable law or agreed to in writing, software
|
14
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
15
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
16
|
+
* See the License for the specific language governing permissions and
|
17
|
+
* limitations under the License.
|
18
|
+
* ========================================================= */
|
19
|
+
|
20
|
+
!function( $ ) {
|
21
|
+
|
22
|
+
// Color object
|
23
|
+
|
24
|
+
var Color = function(val) {
|
25
|
+
this.value = {
|
26
|
+
h: 1,
|
27
|
+
s: 1,
|
28
|
+
b: 1,
|
29
|
+
a: 1
|
30
|
+
};
|
31
|
+
this.setColor(val);
|
32
|
+
};
|
33
|
+
|
34
|
+
Color.prototype = {
|
35
|
+
constructor: Color,
|
36
|
+
|
37
|
+
//parse a string to HSB
|
38
|
+
setColor: function(val){
|
39
|
+
val = val.toLowerCase();
|
40
|
+
var that = this;
|
41
|
+
$.each( CPGlobal.stringParsers, function( i, parser ) {
|
42
|
+
var match = parser.re.exec( val ),
|
43
|
+
values = match && parser.parse( match ),
|
44
|
+
space = parser.space||'rgba';
|
45
|
+
if ( values ) {
|
46
|
+
if (space == 'hsla') {
|
47
|
+
that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
|
48
|
+
} else {
|
49
|
+
that.value = CPGlobal.RGBtoHSB.apply(null, values);
|
50
|
+
}
|
51
|
+
return false;
|
52
|
+
}
|
53
|
+
});
|
54
|
+
},
|
55
|
+
|
56
|
+
setHue: function(h) {
|
57
|
+
this.value.h = 1- h;
|
58
|
+
},
|
59
|
+
|
60
|
+
setSaturation: function(s) {
|
61
|
+
this.value.s = s;
|
62
|
+
},
|
63
|
+
|
64
|
+
setLightness: function(b) {
|
65
|
+
this.value.b = 1- b;
|
66
|
+
},
|
67
|
+
|
68
|
+
setAlpha: function(a) {
|
69
|
+
this.value.a = parseInt((1 - a)*100, 10)/100;
|
70
|
+
},
|
71
|
+
|
72
|
+
// HSBtoRGB from RaphaelJS
|
73
|
+
// https://github.com/DmitryBaranovskiy/raphael/
|
74
|
+
toRGB: function(h, s, b, a) {
|
75
|
+
if (!h) {
|
76
|
+
h = this.value.h;
|
77
|
+
s = this.value.s;
|
78
|
+
b = this.value.b;
|
79
|
+
}
|
80
|
+
h *= 360;
|
81
|
+
var R, G, B, X, C;
|
82
|
+
h = (h % 360) / 60;
|
83
|
+
C = b * s;
|
84
|
+
X = C * (1 - Math.abs(h % 2 - 1));
|
85
|
+
R = G = B = b - C;
|
86
|
+
|
87
|
+
h = ~~h;
|
88
|
+
R += [C, X, 0, 0, X, C][h];
|
89
|
+
G += [X, C, C, X, 0, 0][h];
|
90
|
+
B += [0, 0, X, C, C, X][h];
|
91
|
+
return {
|
92
|
+
r: Math.round(R*255),
|
93
|
+
g: Math.round(G*255),
|
94
|
+
b: Math.round(B*255),
|
95
|
+
a: a||this.value.a
|
96
|
+
};
|
97
|
+
},
|
98
|
+
|
99
|
+
toHex: function(h, s, b, a){
|
100
|
+
var rgb = this.toRGB(h, s, b, a);
|
101
|
+
return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
|
102
|
+
},
|
103
|
+
|
104
|
+
toHSL: function(h, s, b, a){
|
105
|
+
if (!h) {
|
106
|
+
h = this.value.h;
|
107
|
+
s = this.value.s;
|
108
|
+
b = this.value.b;
|
109
|
+
}
|
110
|
+
var H = h,
|
111
|
+
L = (2 - s) * b,
|
112
|
+
S = s * b;
|
113
|
+
if (L > 0 && L <= 1) {
|
114
|
+
S /= L;
|
115
|
+
} else {
|
116
|
+
S /= 2 - L;
|
117
|
+
}
|
118
|
+
L /= 2;
|
119
|
+
if (S > 1) {
|
120
|
+
S = 1;
|
121
|
+
}
|
122
|
+
return {
|
123
|
+
h: H,
|
124
|
+
s: S,
|
125
|
+
l: L,
|
126
|
+
a: a||this.value.a
|
127
|
+
};
|
128
|
+
}
|
129
|
+
};
|
130
|
+
|
131
|
+
// Picker object
|
132
|
+
|
133
|
+
var Colorpicker = function(element, options){
|
134
|
+
this.element = $(element);
|
135
|
+
var format = options.format||this.element.data('color-format')||'hex';
|
136
|
+
this.format = CPGlobal.translateFormats[format];
|
137
|
+
this.isInput = this.element.is('input');
|
138
|
+
this.component = this.element.is('.color') ? this.element.find('.add-on') : false;
|
139
|
+
|
140
|
+
this.picker = $(CPGlobal.template)
|
141
|
+
.appendTo('body')
|
142
|
+
.on('mousedown', $.proxy(this.mousedown, this));
|
143
|
+
|
144
|
+
if (this.isInput) {
|
145
|
+
this.element.on({
|
146
|
+
'focus': $.proxy(this.show, this),
|
147
|
+
'keyup': $.proxy(this.update, this)
|
148
|
+
});
|
149
|
+
} else if (this.component){
|
150
|
+
this.component.on({
|
151
|
+
'click': $.proxy(this.show, this)
|
152
|
+
});
|
153
|
+
} else {
|
154
|
+
this.element.on({
|
155
|
+
'click': $.proxy(this.show, this)
|
156
|
+
});
|
157
|
+
}
|
158
|
+
if (format == 'rgba' || format == 'hsla') {
|
159
|
+
this.picker.addClass('alpha');
|
160
|
+
this.alpha = this.picker.find('.colorpicker-alpha')[0].style;
|
161
|
+
}
|
162
|
+
|
163
|
+
if (this.component){
|
164
|
+
this.picker.find('.colorpicker-color').hide();
|
165
|
+
this.preview = this.element.find('i')[0].style;
|
166
|
+
} else {
|
167
|
+
this.preview = this.picker.find('div:last')[0].style;
|
168
|
+
}
|
169
|
+
|
170
|
+
this.base = this.picker.find('div:first')[0].style;
|
171
|
+
this.update();
|
172
|
+
};
|
173
|
+
|
174
|
+
Colorpicker.prototype = {
|
175
|
+
constructor: Colorpicker,
|
176
|
+
|
177
|
+
show: function(e) {
|
178
|
+
this.picker.show();
|
179
|
+
this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
|
180
|
+
this.place();
|
181
|
+
$(window).on('resize', $.proxy(this.place, this));
|
182
|
+
if (!this.isInput) {
|
183
|
+
if (e) {
|
184
|
+
e.stopPropagation();
|
185
|
+
e.preventDefault();
|
186
|
+
}
|
187
|
+
}
|
188
|
+
$(document).on({
|
189
|
+
'mousedown': $.proxy(this.hide, this)
|
190
|
+
});
|
191
|
+
this.element.trigger({
|
192
|
+
type: 'show',
|
193
|
+
color: this.color
|
194
|
+
});
|
195
|
+
},
|
196
|
+
|
197
|
+
update: function(){
|
198
|
+
this.color = new Color(this.isInput ? this.element.prop('value') : this.element.data('color'));
|
199
|
+
this.picker.find('i')
|
200
|
+
.eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
|
201
|
+
.eq(1).css('top', 100 * (1 - this.color.value.h)).end()
|
202
|
+
.eq(2).css('top', 100 * (1 - this.color.value.a));
|
203
|
+
this.previewColor();
|
204
|
+
},
|
205
|
+
|
206
|
+
hide: function(){
|
207
|
+
this.picker.hide();
|
208
|
+
$(window).off('resize', this.place);
|
209
|
+
if (!this.isInput) {
|
210
|
+
$(document).off({
|
211
|
+
'mousedown': this.hide
|
212
|
+
});
|
213
|
+
if (this.component){
|
214
|
+
this.element.find('input').prop('value', this.format.call(this));
|
215
|
+
}
|
216
|
+
this.element.data('color', this.format.call(this));
|
217
|
+
} else {
|
218
|
+
this.element.prop('value', this.format.call(this));
|
219
|
+
}
|
220
|
+
this.element.trigger({
|
221
|
+
type: 'hide',
|
222
|
+
color: this.color
|
223
|
+
});
|
224
|
+
},
|
225
|
+
|
226
|
+
place: function(){
|
227
|
+
var offset = this.component ? this.component.offset() : this.element.offset();
|
228
|
+
this.picker.css({
|
229
|
+
top: offset.top + this.height,
|
230
|
+
left: offset.left
|
231
|
+
});
|
232
|
+
},
|
233
|
+
|
234
|
+
//preview color change
|
235
|
+
previewColor: function(){
|
236
|
+
this.preview.backgroundColor = this.format.call(this);
|
237
|
+
//set the color for brightness/saturation slider
|
238
|
+
this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
|
239
|
+
//set te color for alpha slider
|
240
|
+
if (this.alpha) {
|
241
|
+
this.alpha.backgroundColor = this.color.toHex();
|
242
|
+
}
|
243
|
+
},
|
244
|
+
|
245
|
+
pointer: null,
|
246
|
+
|
247
|
+
slider: null,
|
248
|
+
|
249
|
+
mousedown: function(e){
|
250
|
+
e.stopPropagation();
|
251
|
+
e.preventDefault();
|
252
|
+
|
253
|
+
var target = $(e.target);
|
254
|
+
|
255
|
+
//detect the slider and set the limits and callbacks
|
256
|
+
var zone = target.closest('div');
|
257
|
+
if (!zone.is('.colorpicker')) {
|
258
|
+
if (zone.is('.colorpicker-saturation')) {
|
259
|
+
this.slider = $.extend({}, CPGlobal.sliders['saturation']);
|
260
|
+
}
|
261
|
+
else if (zone.is('.colorpicker-hue')) {
|
262
|
+
this.slider = $.extend({}, CPGlobal.sliders['hue']);
|
263
|
+
}
|
264
|
+
else if (zone.is('.colorpicker-alpha')) {
|
265
|
+
this.slider = $.extend({}, CPGlobal.sliders['alpha']);
|
266
|
+
}
|
267
|
+
var offset = zone.offset();
|
268
|
+
//reference to knob's style
|
269
|
+
this.slider.knob = zone.find('i')[0].style;
|
270
|
+
this.slider.left = e.pageX - offset.left;
|
271
|
+
this.slider.top = e.pageY - offset.top;
|
272
|
+
this.pointer = {
|
273
|
+
left: e.pageX,
|
274
|
+
top: e.pageY
|
275
|
+
};
|
276
|
+
//trigger mousemove to move the knob to the current position
|
277
|
+
$(document).on({
|
278
|
+
mousemove: $.proxy(this.mousemove, this),
|
279
|
+
mouseup: $.proxy(this.mouseup, this)
|
280
|
+
}).trigger('mousemove');
|
281
|
+
}
|
282
|
+
return false;
|
283
|
+
},
|
284
|
+
|
285
|
+
mousemove: function(e){
|
286
|
+
e.stopPropagation();
|
287
|
+
e.preventDefault();
|
288
|
+
var left = Math.max(
|
289
|
+
0,
|
290
|
+
Math.min(
|
291
|
+
this.slider.maxLeft,
|
292
|
+
this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
|
293
|
+
)
|
294
|
+
);
|
295
|
+
var top = Math.max(
|
296
|
+
0,
|
297
|
+
Math.min(
|
298
|
+
this.slider.maxTop,
|
299
|
+
this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
|
300
|
+
)
|
301
|
+
);
|
302
|
+
this.slider.knob.left = left + 'px';
|
303
|
+
this.slider.knob.top = top + 'px';
|
304
|
+
if (this.slider.callLeft) {
|
305
|
+
this.color[this.slider.callLeft].call(this.color, left/100);
|
306
|
+
}
|
307
|
+
if (this.slider.callTop) {
|
308
|
+
this.color[this.slider.callTop].call(this.color, top/100);
|
309
|
+
}
|
310
|
+
this.previewColor();
|
311
|
+
this.element.trigger({
|
312
|
+
type: 'changeColor',
|
313
|
+
color: this.color
|
314
|
+
});
|
315
|
+
return false;
|
316
|
+
},
|
317
|
+
|
318
|
+
mouseup: function(e){
|
319
|
+
e.stopPropagation();
|
320
|
+
e.preventDefault();
|
321
|
+
$(document).off({
|
322
|
+
mousemove: this.mousemove,
|
323
|
+
mouseup: this.mouseup
|
324
|
+
});
|
325
|
+
return false;
|
326
|
+
}
|
327
|
+
}
|
328
|
+
|
329
|
+
$.fn.colorpicker = function ( option ) {
|
330
|
+
return this.each(function () {
|
331
|
+
var $this = $(this),
|
332
|
+
data = $this.data('colorpicker'),
|
333
|
+
options = typeof option == 'object' && option;
|
334
|
+
if (!data) {
|
335
|
+
$this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
|
336
|
+
}
|
337
|
+
if (typeof option == 'string') data[option]();
|
338
|
+
});
|
339
|
+
};
|
340
|
+
|
341
|
+
$.fn.colorpicker.defaults = {
|
342
|
+
};
|
343
|
+
|
344
|
+
$.fn.colorpicker.Constructor = Colorpicker;
|
345
|
+
|
346
|
+
var CPGlobal = {
|
347
|
+
|
348
|
+
// translate a format from Color object to a string
|
349
|
+
translateFormats: {
|
350
|
+
'rgb': function(){
|
351
|
+
var rgb = this.color.toRGB();
|
352
|
+
return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
|
353
|
+
},
|
354
|
+
|
355
|
+
'rgba': function(){
|
356
|
+
var rgb = this.color.toRGB();
|
357
|
+
return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
|
358
|
+
},
|
359
|
+
|
360
|
+
'hsl': function(){
|
361
|
+
var hsl = this.color.toHSL();
|
362
|
+
return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
|
363
|
+
},
|
364
|
+
|
365
|
+
'hsla': function(){
|
366
|
+
var hsl = this.color.toHSL();
|
367
|
+
return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
|
368
|
+
},
|
369
|
+
|
370
|
+
'hex': function(){
|
371
|
+
return this.color.toHex();
|
372
|
+
}
|
373
|
+
},
|
374
|
+
|
375
|
+
sliders: {
|
376
|
+
saturation: {
|
377
|
+
maxLeft: 100,
|
378
|
+
maxTop: 100,
|
379
|
+
callLeft: 'setSaturation',
|
380
|
+
callTop: 'setLightness'
|
381
|
+
},
|
382
|
+
|
383
|
+
hue: {
|
384
|
+
maxLeft: 0,
|
385
|
+
maxTop: 100,
|
386
|
+
callLeft: false,
|
387
|
+
callTop: 'setHue'
|
388
|
+
},
|
389
|
+
|
390
|
+
alpha: {
|
391
|
+
maxLeft: 0,
|
392
|
+
maxTop: 100,
|
393
|
+
callLeft: false,
|
394
|
+
callTop: 'setAlpha'
|
395
|
+
}
|
396
|
+
},
|
397
|
+
|
398
|
+
// HSBtoRGB from RaphaelJS
|
399
|
+
// https://github.com/DmitryBaranovskiy/raphael/
|
400
|
+
RGBtoHSB: function (r, g, b, a){
|
401
|
+
r /= 255;
|
402
|
+
g /= 255;
|
403
|
+
b /= 255;
|
404
|
+
|
405
|
+
var H, S, V, C;
|
406
|
+
V = Math.max(r, g, b);
|
407
|
+
C = V - Math.min(r, g, b);
|
408
|
+
H = (C == 0 ? null :
|
409
|
+
V == r ? (g - b) / C :
|
410
|
+
V == g ? (b - r) / C + 2 :
|
411
|
+
(r - g) / C + 4
|
412
|
+
);
|
413
|
+
H = ((H + 360) % 6) * 60 / 360;
|
414
|
+
S = C == 0 ? 0 : C / V;
|
415
|
+
return {h: H||1, s: S, b: V, a: a||1};
|
416
|
+
},
|
417
|
+
|
418
|
+
HueToRGB: function (p, q, h) {
|
419
|
+
if (h < 0)
|
420
|
+
h += 1;
|
421
|
+
else if (h > 1)
|
422
|
+
h -= 1;
|
423
|
+
|
424
|
+
if ((h * 6) < 1)
|
425
|
+
return p + (q - p) * h * 6;
|
426
|
+
else if ((h * 2) < 1)
|
427
|
+
return q;
|
428
|
+
else if ((h * 3) < 2)
|
429
|
+
return p + (q - p) * ((2 / 3) - h) * 6;
|
430
|
+
else
|
431
|
+
return p;
|
432
|
+
},
|
433
|
+
|
434
|
+
HSLtoRGB: function (h, s, l, a)
|
435
|
+
{
|
436
|
+
|
437
|
+
if (s < 0)
|
438
|
+
s = 0;
|
439
|
+
|
440
|
+
if (l <= 0.5)
|
441
|
+
var q = l * (1 + s);
|
442
|
+
else
|
443
|
+
var q = l + s - (l * s);
|
444
|
+
|
445
|
+
var p = 2 * l - q;
|
446
|
+
|
447
|
+
var tr = h + (1 / 3);
|
448
|
+
var tg = h;
|
449
|
+
var tb = h - (1 / 3);
|
450
|
+
|
451
|
+
var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
|
452
|
+
var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
|
453
|
+
var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
|
454
|
+
return [r, g, b, a||1];
|
455
|
+
},
|
456
|
+
|
457
|
+
// a set of RE's that can match strings and generate color tuples.
|
458
|
+
// from John Resig color plugin
|
459
|
+
// https://github.com/jquery/jquery-color/
|
460
|
+
stringParsers: [
|
461
|
+
{
|
462
|
+
re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
|
463
|
+
parse: function( execResult ) {
|
464
|
+
return [
|
465
|
+
execResult[ 1 ],
|
466
|
+
execResult[ 2 ],
|
467
|
+
execResult[ 3 ],
|
468
|
+
execResult[ 4 ]
|
469
|
+
];
|
470
|
+
}
|
471
|
+
}, {
|
472
|
+
re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
|
473
|
+
parse: function( execResult ) {
|
474
|
+
return [
|
475
|
+
2.55 * execResult[1],
|
476
|
+
2.55 * execResult[2],
|
477
|
+
2.55 * execResult[3],
|
478
|
+
execResult[ 4 ]
|
479
|
+
];
|
480
|
+
}
|
481
|
+
}, {
|
482
|
+
re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
|
483
|
+
parse: function( execResult ) {
|
484
|
+
return [
|
485
|
+
parseInt( execResult[ 1 ], 16 ),
|
486
|
+
parseInt( execResult[ 2 ], 16 ),
|
487
|
+
parseInt( execResult[ 3 ], 16 )
|
488
|
+
];
|
489
|
+
}
|
490
|
+
}, {
|
491
|
+
re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
|
492
|
+
parse: function( execResult ) {
|
493
|
+
return [
|
494
|
+
parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
|
495
|
+
parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
|
496
|
+
parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
|
497
|
+
];
|
498
|
+
}
|
499
|
+
}, {
|
500
|
+
re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
|
501
|
+
space: 'hsla',
|
502
|
+
parse: function( execResult ) {
|
503
|
+
return [
|
504
|
+
execResult[1]/360,
|
505
|
+
execResult[2] / 100,
|
506
|
+
execResult[3] / 100,
|
507
|
+
execResult[4]
|
508
|
+
];
|
509
|
+
}
|
510
|
+
}
|
511
|
+
],
|
512
|
+
template: '<div class="colorpicker dropdown-menu">'+
|
513
|
+
'<div class="colorpicker-saturation"><i><b></b></i></div>'+
|
514
|
+
'<div class="colorpicker-hue"><i></i></div>'+
|
515
|
+
'<div class="colorpicker-alpha"><i></i></div>'+
|
516
|
+
'<div class="colorpicker-color"><div /></div>'+
|
517
|
+
'</div>'
|
518
|
+
};
|
519
|
+
|
520
|
+
}( window.jQuery )
|
@@ -0,0 +1,127 @@
|
|
1
|
+
/*!
|
2
|
+
* Colorpicker for Bootstrap
|
3
|
+
*
|
4
|
+
* Copyright 2012 Stefan Petre
|
5
|
+
* Licensed under the Apache License v2.0
|
6
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
7
|
+
*
|
8
|
+
*/
|
9
|
+
.colorpicker-saturation {
|
10
|
+
width: 100px;
|
11
|
+
height: 100px;
|
12
|
+
background-image: url(saturation.png);
|
13
|
+
cursor: crosshair;
|
14
|
+
float: left;
|
15
|
+
}
|
16
|
+
.colorpicker-saturation i {
|
17
|
+
display: block;
|
18
|
+
height: 5px;
|
19
|
+
width: 5px;
|
20
|
+
border: 1px solid #000;
|
21
|
+
-webkit-border-radius: 5px;
|
22
|
+
-moz-border-radius: 5px;
|
23
|
+
border-radius: 5px;
|
24
|
+
position: absolute;
|
25
|
+
top: 0;
|
26
|
+
left: 0;
|
27
|
+
margin: -4px 0 0 -4px;
|
28
|
+
}
|
29
|
+
.colorpicker-saturation i b {
|
30
|
+
display: block;
|
31
|
+
height: 5px;
|
32
|
+
width: 5px;
|
33
|
+
border: 1px solid #fff;
|
34
|
+
-webkit-border-radius: 5px;
|
35
|
+
-moz-border-radius: 5px;
|
36
|
+
border-radius: 5px;
|
37
|
+
}
|
38
|
+
.colorpicker-hue, .colorpicker-alpha {
|
39
|
+
width: 15px;
|
40
|
+
height: 100px;
|
41
|
+
float: left;
|
42
|
+
cursor: row-resize;
|
43
|
+
margin-left: 4px;
|
44
|
+
margin-bottom: 4px;
|
45
|
+
}
|
46
|
+
.colorpicker-hue i, .colorpicker-alpha i {
|
47
|
+
display: block;
|
48
|
+
height: 1px;
|
49
|
+
background: #000;
|
50
|
+
border-top: 1px solid #fff;
|
51
|
+
position: absolute;
|
52
|
+
top: 0;
|
53
|
+
left: 0;
|
54
|
+
width: 100%;
|
55
|
+
margin-top: -1px;
|
56
|
+
}
|
57
|
+
.colorpicker-hue {
|
58
|
+
background-image: url(hue.png);
|
59
|
+
}
|
60
|
+
.colorpicker-alpha {
|
61
|
+
background-image: url(alpha.png);
|
62
|
+
display: none;
|
63
|
+
}
|
64
|
+
.colorpicker {
|
65
|
+
*zoom: 1;
|
66
|
+
top: 0;
|
67
|
+
left: 0;
|
68
|
+
padding: 4px;
|
69
|
+
min-width: 120px;
|
70
|
+
margin-top: 1px;
|
71
|
+
-webkit-border-radius: 4px;
|
72
|
+
-moz-border-radius: 4px;
|
73
|
+
border-radius: 4px;
|
74
|
+
}
|
75
|
+
.colorpicker:before, .colorpicker:after {
|
76
|
+
display: table;
|
77
|
+
content: "";
|
78
|
+
}
|
79
|
+
.colorpicker:after {
|
80
|
+
clear: both;
|
81
|
+
}
|
82
|
+
.colorpicker:before {
|
83
|
+
content: '';
|
84
|
+
display: inline-block;
|
85
|
+
border-left: 7px solid transparent;
|
86
|
+
border-right: 7px solid transparent;
|
87
|
+
border-bottom: 7px solid #ccc;
|
88
|
+
border-bottom-color: rgba(0, 0, 0, 0.2);
|
89
|
+
position: absolute;
|
90
|
+
top: -7px;
|
91
|
+
left: 6px;
|
92
|
+
}
|
93
|
+
.colorpicker:after {
|
94
|
+
content: '';
|
95
|
+
display: inline-block;
|
96
|
+
border-left: 6px solid transparent;
|
97
|
+
border-right: 6px solid transparent;
|
98
|
+
border-bottom: 6px solid #ffffff;
|
99
|
+
position: absolute;
|
100
|
+
top: -6px;
|
101
|
+
left: 7px;
|
102
|
+
}
|
103
|
+
.colorpicker div {
|
104
|
+
position: relative;
|
105
|
+
}
|
106
|
+
.colorpicker.alpha {
|
107
|
+
min-width: 140px;
|
108
|
+
}
|
109
|
+
.colorpicker.alpha .colorpicker-alpha {
|
110
|
+
display: block;
|
111
|
+
}
|
112
|
+
.colorpicker-color {
|
113
|
+
height: 10px;
|
114
|
+
margin-top: 5px;
|
115
|
+
clear: both;
|
116
|
+
background-image: url(alpha.png);
|
117
|
+
background-position: 0 100%;
|
118
|
+
}
|
119
|
+
.colorpicker-color div {
|
120
|
+
height: 10px;
|
121
|
+
}
|
122
|
+
.input-append.color .add-on i, .input-prepend.color .add-on i {
|
123
|
+
display: block;
|
124
|
+
cursor: pointer;
|
125
|
+
width: 16px;
|
126
|
+
height: 16px;
|
127
|
+
}
|
metadata
ADDED
@@ -0,0 +1,92 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: bootstrap-colorpicker-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: '0.1'
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Matteo Alessani
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-05-10 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: railties
|
16
|
+
requirement: &70360315494160 !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '3.0'
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: *70360315494160
|
25
|
+
- !ruby/object:Gem::Dependency
|
26
|
+
name: bundler
|
27
|
+
requirement: &70360315493660 !ruby/object:Gem::Requirement
|
28
|
+
none: false
|
29
|
+
requirements:
|
30
|
+
- - ! '>='
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: '1.0'
|
33
|
+
type: :development
|
34
|
+
prerelease: false
|
35
|
+
version_requirements: *70360315493660
|
36
|
+
- !ruby/object:Gem::Dependency
|
37
|
+
name: rake
|
38
|
+
requirement: &70360315493280 !ruby/object:Gem::Requirement
|
39
|
+
none: false
|
40
|
+
requirements:
|
41
|
+
- - ! '>='
|
42
|
+
- !ruby/object:Gem::Version
|
43
|
+
version: '0'
|
44
|
+
type: :development
|
45
|
+
prerelease: false
|
46
|
+
version_requirements: *70360315493280
|
47
|
+
description: A color picker for Twitter Bootstrap
|
48
|
+
email:
|
49
|
+
- alessani@gmail.com
|
50
|
+
executables: []
|
51
|
+
extensions: []
|
52
|
+
extra_rdoc_files: []
|
53
|
+
files:
|
54
|
+
- Gemfile
|
55
|
+
- README.md
|
56
|
+
- Rakefile
|
57
|
+
- bootstrap-colorpicker-rails-0.1.gem
|
58
|
+
- bootstrap-colorpicker-rails.gemspec
|
59
|
+
- lib/bootstrap-colorpicker-rails.rb
|
60
|
+
- lib/bootstrap-colorpicker-rails/engine.rb
|
61
|
+
- lib/bootstrap-colorpicker-rails/railtie.rb
|
62
|
+
- lib/bootstrap-colorpicker-rails/version.rb
|
63
|
+
- vendor/assets/images/alpha.png
|
64
|
+
- vendor/assets/images/hue.png
|
65
|
+
- vendor/assets/images/saturation.png
|
66
|
+
- vendor/assets/javascripts/bootstrap-colorpicker.js
|
67
|
+
- vendor/assets/stylesheets/bootstrap-colorpicker.css
|
68
|
+
homepage: https://github.com/alessani/bootstrap-colorpicker-rails
|
69
|
+
licenses: []
|
70
|
+
post_install_message:
|
71
|
+
rdoc_options: []
|
72
|
+
require_paths:
|
73
|
+
- lib
|
74
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
75
|
+
none: false
|
76
|
+
requirements:
|
77
|
+
- - ! '>='
|
78
|
+
- !ruby/object:Gem::Version
|
79
|
+
version: '0'
|
80
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
81
|
+
none: false
|
82
|
+
requirements:
|
83
|
+
- - ! '>='
|
84
|
+
- !ruby/object:Gem::Version
|
85
|
+
version: '0'
|
86
|
+
requirements: []
|
87
|
+
rubyforge_project:
|
88
|
+
rubygems_version: 1.8.6
|
89
|
+
signing_key:
|
90
|
+
specification_version: 3
|
91
|
+
summary: A color picker for Twitter Bootstrap
|
92
|
+
test_files: []
|