bootstrap-colorpick-rails 0.0.0

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.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: '08a0ded9afedb86c8c8df1913ae0eb3bc4a59d859552db8c8a948aa20c96ae20'
4
+ data.tar.gz: cc389da83cf1c01e582d3dbcc3b813041b9f775433dda747c1a0fcff116726ff
5
+ SHA512:
6
+ metadata.gz: e523275012f32a346cdc33915eb79a0842483016c49fc453c5a3b74eac71264003971bc5a1372bff431f21a4e06461357c32059bb9475d298e48931603e85741
7
+ data.tar.gz: 54390ef8fc1905e79f42119128287b02f43d8b9750ca0b2215fdfcf920ff45ce52e5aae4dd901a186abdbdb2817fe817a50bdb1d33ba64ee182aea1459bbad5b
@@ -0,0 +1,39 @@
1
+ # See https://help.github.com/articles/ignoring-files for more about ignoring files.
2
+ #
3
+ # If you find yourself ignoring temporary files generated by your text editor
4
+ # or operating system, you probably want to add a global ignore instead:
5
+ # git config --global core.excludesfile '~/.gitignore_global'
6
+
7
+ *.gem
8
+ *.rbc
9
+ /.config
10
+ /.rake_tasks~
11
+ /coverage/
12
+ /InstalledFiles
13
+ /pkg/
14
+ /tmp/
15
+
16
+ # RSpec configuration and generated files:
17
+ /.rspec
18
+ /spec/examples.txt
19
+
20
+ # Documentation cache and generated files:
21
+ /.yardoc/
22
+ /_yardoc/
23
+ /doc/
24
+ /rdoc/
25
+
26
+ # Environment normalization:
27
+ /.bundle/
28
+ /vendor/bundle/*
29
+ !/vendor/bundle/.keep
30
+ /lib/bundler/man/
31
+
32
+ # For a library or gem, you might want to ignore these files since the code is
33
+ # intended to run in multiple environments; otherwise, check them in:
34
+ /Gemfile.lock
35
+ /.ruby-version
36
+ /.ruby-gemset
37
+
38
+ # Unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
39
+ .rvmrc
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'http://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in bootstrap-rails.gemspec
4
+ gemspec
@@ -0,0 +1,49 @@
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 color 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
+ group :assets do
24
+ gem 'bootstrap-colorpicker-rails'
25
+ end
26
+ or you can install from latest build;
27
+
28
+ group :assets do
29
+ gem 'bootstrap-colorpicker-rails', :require => 'bootstrap-colorpicker-rails',
30
+ :git => 'git://github.com/alessani/bootstrap-colorpicker-rails.git'
31
+ end
32
+ and run bundle install.
33
+
34
+ Stylesheets
35
+ Add necessary stylesheet file to app/assets/stylesheets/application.css
36
+
37
+ *= require bootstrap-colorpicker
38
+
39
+ Javascripts
40
+ Add necessary javascript(s) files to app/assets/javascripts/application.js
41
+
42
+ //= require bootstrap-colorpicker
43
+
44
+ Using bootstrap-colorpicker-rails
45
+ Just call colorpicker() with any selector.
46
+
47
+ $('.colorpicker').colorpicker()
48
+
49
+ There are some options you can pass to colorpicker(). They are documented at http://www.eyecon.ro/bootstrap-colorpicker/
@@ -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
Binary file
@@ -0,0 +1,540 @@
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
+ setValue: function(newColor) {
207
+ this.color = new Color(newColor);
208
+ this.picker.find('i')
209
+ .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
210
+ .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
211
+ .eq(2).css('top', 100 * (1 - this.color.value.a));
212
+ this.previewColor();
213
+ this.element.trigger({
214
+ type: 'changeColor',
215
+ color: this.color
216
+ });
217
+ },
218
+
219
+ hide: function(){
220
+ this.picker.hide();
221
+ $(window).off('resize', this.place);
222
+ if (!this.isInput) {
223
+ $(document).off({
224
+ 'mousedown': this.hide
225
+ });
226
+ if (this.component){
227
+ this.element.find('input').prop('value', this.format.call(this));
228
+ }
229
+ this.element.data('color', this.format.call(this));
230
+ } else {
231
+ this.element.prop('value', this.format.call(this));
232
+ }
233
+ this.element.trigger({
234
+ type: 'hide',
235
+ color: this.color
236
+ });
237
+ },
238
+
239
+ place: function(){
240
+ var offset = this.component ? this.component.offset() : this.element.offset();
241
+ this.picker.css({
242
+ top: offset.top + this.height,
243
+ left: offset.left
244
+ });
245
+ },
246
+
247
+ //preview color change
248
+ previewColor: function(){
249
+ try {
250
+ this.preview.backgroundColor = this.format.call(this);
251
+ } catch(e) {
252
+ this.preview.backgroundColor = this.color.toHex();
253
+ }
254
+ //set the color for brightness/saturation slider
255
+ this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
256
+ //set te color for alpha slider
257
+ if (this.alpha) {
258
+ this.alpha.backgroundColor = this.color.toHex();
259
+ }
260
+ },
261
+
262
+ pointer: null,
263
+
264
+ slider: null,
265
+
266
+ mousedown: function(e){
267
+ e.stopPropagation();
268
+ e.preventDefault();
269
+
270
+ var target = $(e.target);
271
+
272
+ //detect the slider and set the limits and callbacks
273
+ var zone = target.closest('div');
274
+ if (!zone.is('.colorpicker')) {
275
+ if (zone.is('.colorpicker-saturation')) {
276
+ this.slider = $.extend({}, CPGlobal.sliders.saturation);
277
+ }
278
+ else if (zone.is('.colorpicker-hue')) {
279
+ this.slider = $.extend({}, CPGlobal.sliders.hue);
280
+ }
281
+ else if (zone.is('.colorpicker-alpha')) {
282
+ this.slider = $.extend({}, CPGlobal.sliders.alpha);
283
+ } else {
284
+ return false;
285
+ }
286
+ var offset = zone.offset();
287
+ //reference to knob's style
288
+ this.slider.knob = zone.find('i')[0].style;
289
+ this.slider.left = e.pageX - offset.left;
290
+ this.slider.top = e.pageY - offset.top;
291
+ this.pointer = {
292
+ left: e.pageX,
293
+ top: e.pageY
294
+ };
295
+ //trigger mousemove to move the knob to the current position
296
+ $(document).on({
297
+ mousemove: $.proxy(this.mousemove, this),
298
+ mouseup: $.proxy(this.mouseup, this)
299
+ }).trigger('mousemove');
300
+ }
301
+ return false;
302
+ },
303
+
304
+ mousemove: function(e){
305
+ e.stopPropagation();
306
+ e.preventDefault();
307
+ var left = Math.max(
308
+ 0,
309
+ Math.min(
310
+ this.slider.maxLeft,
311
+ this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
312
+ )
313
+ );
314
+ var top = Math.max(
315
+ 0,
316
+ Math.min(
317
+ this.slider.maxTop,
318
+ this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
319
+ )
320
+ );
321
+ this.slider.knob.left = left + 'px';
322
+ this.slider.knob.top = top + 'px';
323
+ if (this.slider.callLeft) {
324
+ this.color[this.slider.callLeft].call(this.color, left/100);
325
+ }
326
+ if (this.slider.callTop) {
327
+ this.color[this.slider.callTop].call(this.color, top/100);
328
+ }
329
+ this.previewColor();
330
+ this.element.trigger({
331
+ type: 'changeColor',
332
+ color: this.color
333
+ });
334
+ return false;
335
+ },
336
+
337
+ mouseup: function(e){
338
+ e.stopPropagation();
339
+ e.preventDefault();
340
+ $(document).off({
341
+ mousemove: this.mousemove,
342
+ mouseup: this.mouseup
343
+ });
344
+ return false;
345
+ }
346
+ }
347
+
348
+ $.fn.colorpicker = function ( option, val ) {
349
+ return this.each(function () {
350
+ var $this = $(this),
351
+ data = $this.data('colorpicker'),
352
+ options = typeof option === 'object' && option;
353
+ if (!data) {
354
+ $this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
355
+ }
356
+ if (typeof option === 'string') data[option](val);
357
+ });
358
+ };
359
+
360
+ $.fn.colorpicker.defaults = {
361
+ };
362
+
363
+ $.fn.colorpicker.Constructor = Colorpicker;
364
+
365
+ var CPGlobal = {
366
+
367
+ // translate a format from Color object to a string
368
+ translateFormats: {
369
+ 'rgb': function(){
370
+ var rgb = this.color.toRGB();
371
+ return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
372
+ },
373
+
374
+ 'rgba': function(){
375
+ var rgb = this.color.toRGB();
376
+ return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
377
+ },
378
+
379
+ 'hsl': function(){
380
+ var hsl = this.color.toHSL();
381
+ return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
382
+ },
383
+
384
+ 'hsla': function(){
385
+ var hsl = this.color.toHSL();
386
+ return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
387
+ },
388
+
389
+ 'hex': function(){
390
+ return this.color.toHex();
391
+ }
392
+ },
393
+
394
+ sliders: {
395
+ saturation: {
396
+ maxLeft: 100,
397
+ maxTop: 100,
398
+ callLeft: 'setSaturation',
399
+ callTop: 'setLightness'
400
+ },
401
+
402
+ hue: {
403
+ maxLeft: 0,
404
+ maxTop: 100,
405
+ callLeft: false,
406
+ callTop: 'setHue'
407
+ },
408
+
409
+ alpha: {
410
+ maxLeft: 0,
411
+ maxTop: 100,
412
+ callLeft: false,
413
+ callTop: 'setAlpha'
414
+ }
415
+ },
416
+
417
+ // HSBtoRGB from RaphaelJS
418
+ // https://github.com/DmitryBaranovskiy/raphael/
419
+ RGBtoHSB: function (r, g, b, a){
420
+ r /= 255;
421
+ g /= 255;
422
+ b /= 255;
423
+
424
+ var H, S, V, C;
425
+ V = Math.max(r, g, b);
426
+ C = V - Math.min(r, g, b);
427
+ H = (C === 0 ? null :
428
+ V == r ? (g - b) / C :
429
+ V == g ? (b - r) / C + 2 :
430
+ (r - g) / C + 4
431
+ );
432
+ H = ((H + 360) % 6) * 60 / 360;
433
+ S = C === 0 ? 0 : C / V;
434
+ return {h: H||1, s: S, b: V, a: a||1};
435
+ },
436
+
437
+ HueToRGB: function (p, q, h) {
438
+ if (h < 0)
439
+ h += 1;
440
+ else if (h > 1)
441
+ h -= 1;
442
+
443
+ if ((h * 6) < 1)
444
+ return p + (q - p) * h * 6;
445
+ else if ((h * 2) < 1)
446
+ return q;
447
+ else if ((h * 3) < 2)
448
+ return p + (q - p) * ((2 / 3) - h) * 6;
449
+ else
450
+ return p;
451
+ },
452
+
453
+ HSLtoRGB: function (h, s, l, a)
454
+ {
455
+ if (s < 0) {
456
+ s = 0;
457
+ }
458
+ var q;
459
+ if (l <= 0.5) {
460
+ q = l * (1 + s);
461
+ } else {
462
+ q = l + s - (l * s);
463
+ }
464
+
465
+ var p = 2 * l - q;
466
+
467
+ var tr = h + (1 / 3);
468
+ var tg = h;
469
+ var tb = h - (1 / 3);
470
+
471
+ var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
472
+ var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
473
+ var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
474
+ return [r, g, b, a||1];
475
+ },
476
+
477
+ // a set of RE's that can match strings and generate color tuples.
478
+ // from John Resig color plugin
479
+ // https://github.com/jquery/jquery-color/
480
+ stringParsers: [
481
+ {
482
+ re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
483
+ parse: function( execResult ) {
484
+ return [
485
+ execResult[ 1 ],
486
+ execResult[ 2 ],
487
+ execResult[ 3 ],
488
+ execResult[ 4 ]
489
+ ];
490
+ }
491
+ }, {
492
+ re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
493
+ parse: function( execResult ) {
494
+ return [
495
+ 2.55 * execResult[1],
496
+ 2.55 * execResult[2],
497
+ 2.55 * execResult[3],
498
+ execResult[ 4 ]
499
+ ];
500
+ }
501
+ }, {
502
+ re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
503
+ parse: function( execResult ) {
504
+ return [
505
+ parseInt( execResult[ 1 ], 16 ),
506
+ parseInt( execResult[ 2 ], 16 ),
507
+ parseInt( execResult[ 3 ], 16 )
508
+ ];
509
+ }
510
+ }, {
511
+ re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
512
+ parse: function( execResult ) {
513
+ return [
514
+ parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
515
+ parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
516
+ parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
517
+ ];
518
+ }
519
+ }, {
520
+ re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
521
+ space: 'hsla',
522
+ parse: function( execResult ) {
523
+ return [
524
+ execResult[1]/360,
525
+ execResult[2] / 100,
526
+ execResult[3] / 100,
527
+ execResult[4]
528
+ ];
529
+ }
530
+ }
531
+ ],
532
+ template: '<div class="colorpicker dropdown-menu">'+
533
+ '<div class="colorpicker-saturation"><i><b></b></i></div>'+
534
+ '<div class="colorpicker-hue"><i></i></div>'+
535
+ '<div class="colorpicker-alpha"><i></i></div>'+
536
+ '<div class="colorpicker-color"><div /></div>'+
537
+ '</div>'
538
+ };
539
+
540
+ }( 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: 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: image-url('hue.png');
59
+ }
60
+ .colorpicker-alpha {
61
+ background-image: 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: 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
+ }
@@ -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-colorpick-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 @@
1
+ require 'bootstrap-colorpicker-rails'
@@ -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
@@ -0,0 +1,6 @@
1
+ module BootstrapColorpickerRails
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -0,0 +1,5 @@
1
+ module BootstrapColorpickerRails
2
+ module Rails
3
+ class Railtie < ::Rails::Railtie; end
4
+ end
5
+ end
@@ -0,0 +1,5 @@
1
+ module BootstrapColorpickerRails
2
+ module Rails
3
+ VERSION = "0.0.0"
4
+ end
5
+ end
metadata ADDED
@@ -0,0 +1,100 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: bootstrap-colorpick-rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.0
5
+ platform: ruby
6
+ authors:
7
+ - Matteo Alessani
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2019-06-29 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: railties
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '3.0'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: '3.0'
27
+ - !ruby/object:Gem::Dependency
28
+ name: bundler
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: '1.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ">="
39
+ - !ruby/object:Gem::Version
40
+ version: '1.0'
41
+ - !ruby/object:Gem::Dependency
42
+ name: rake
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - ">="
46
+ - !ruby/object:Gem::Version
47
+ version: '0'
48
+ type: :development
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - ">="
53
+ - !ruby/object:Gem::Version
54
+ version: '0'
55
+ description: A color picker for Twitter Bootstrap
56
+ email:
57
+ - alessani@gmail.com
58
+ executables: []
59
+ extensions: []
60
+ extra_rdoc_files: []
61
+ files:
62
+ - ".gitignore"
63
+ - Gemfile
64
+ - README.md
65
+ - Rakefile
66
+ - app/assets/images/alpha.png
67
+ - app/assets/images/hue.png
68
+ - app/assets/images/saturation.png
69
+ - app/assets/javascripts/bootstrap-colorpicker.js
70
+ - app/assets/stylesheets/bootstrap-colorpicker.css.scss
71
+ - bootstrap-colorpick-rails.gemspec
72
+ - lib/bootstrap-colorpick-rails.rb
73
+ - lib/bootstrap-colorpicker-rails.rb
74
+ - lib/bootstrap-colorpicker-rails/engine.rb
75
+ - lib/bootstrap-colorpicker-rails/railtie.rb
76
+ - lib/bootstrap-colorpicker-rails/version.rb
77
+ homepage: https://github.com/alessani/bootstrap-colorpicker-rails
78
+ licenses: []
79
+ metadata: {}
80
+ post_install_message:
81
+ rdoc_options: []
82
+ require_paths:
83
+ - lib
84
+ required_ruby_version: !ruby/object:Gem::Requirement
85
+ requirements:
86
+ - - ">="
87
+ - !ruby/object:Gem::Version
88
+ version: '0'
89
+ required_rubygems_version: !ruby/object:Gem::Requirement
90
+ requirements:
91
+ - - ">="
92
+ - !ruby/object:Gem::Version
93
+ version: '0'
94
+ requirements: []
95
+ rubyforge_project:
96
+ rubygems_version: 2.7.10
97
+ signing_key:
98
+ specification_version: 4
99
+ summary: A color picker for Twitter Bootstrap
100
+ test_files: []