bootstrap-addons-rails 0.1.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.
Files changed (32) hide show
  1. data/.document +5 -0
  2. data/.rspec +1 -0
  3. data/Gemfile +13 -0
  4. data/Gemfile.lock +109 -0
  5. data/LICENSE.txt +20 -0
  6. data/README.md +54 -0
  7. data/Rakefile +49 -0
  8. data/VERSION +1 -0
  9. data/bootstrap-addons-rails.gemspec +85 -0
  10. data/lib/bootstrap-addons-rails.rb +6 -0
  11. data/spec/spec_helper.rb +6 -0
  12. data/vendor/assets/colorpicker/css/colorpicker.css +127 -0
  13. data/vendor/assets/colorpicker/img/alpha.png +0 -0
  14. data/vendor/assets/colorpicker/img/hue.png +0 -0
  15. data/vendor/assets/colorpicker/img/saturation.png +0 -0
  16. data/vendor/assets/colorpicker/js/bootstrap-colorpicker.js +520 -0
  17. data/vendor/assets/colorpicker/less/colorpicker.less +89 -0
  18. data/vendor/assets/images/bootstrap/colorpicker/alpha.png +0 -0
  19. data/vendor/assets/images/bootstrap/colorpicker/hue.png +0 -0
  20. data/vendor/assets/images/bootstrap/colorpicker/saturation.png +0 -0
  21. data/vendor/assets/images/bootstrap/image-gallery/loading.gif +0 -0
  22. data/vendor/assets/javascripts/bootstrap/colorpicker.js +520 -0
  23. data/vendor/assets/javascripts/bootstrap/datepicker.js +401 -0
  24. data/vendor/assets/javascripts/bootstrap/image-gallery.js +387 -0
  25. data/vendor/assets/javascripts/bootstrap/image-gallery.min.js +1 -0
  26. data/vendor/assets/less/bootstrap/colorpicker.less +89 -0
  27. data/vendor/assets/less/bootstrap/datepicker.less +122 -0
  28. data/vendor/assets/stylesheets/bootstrap/colorpicker.css +127 -0
  29. data/vendor/assets/stylesheets/bootstrap/datepicker.css +156 -0
  30. data/vendor/assets/stylesheets/bootstrap/image-gallery.css +141 -0
  31. data/vendor/assets/stylesheets/bootstrap/image-gallery.min.css +21 -0
  32. metadata +178 -0
@@ -0,0 +1,89 @@
1
+ .colorpicker-saturation {
2
+ width: 100px;
3
+ height: 100px;
4
+ background-image: url(../img/saturation.png);
5
+ cursor: crosshair;
6
+ float: left;
7
+ i {
8
+ display: block;
9
+ height: 5px;
10
+ width: 5px;
11
+ border: 1px solid #000;
12
+ .border-radius();
13
+ position: absolute;
14
+ top: 0;
15
+ left: 0;
16
+ margin: -4px 0 0 -4px;
17
+ b{
18
+ display: block;
19
+ height: 5px;
20
+ width: 5px;
21
+ border: 1px solid #fff;
22
+ .border-radius();
23
+ }
24
+ }
25
+ }
26
+ .colorpicker-hue,
27
+ .colorpicker-alpha {
28
+ width: 15px;
29
+ height: 100px;
30
+ float: left;
31
+ cursor: row-resize;
32
+ margin-left: 4px;
33
+ margin-bottom: 4px;
34
+ i {
35
+ display: block;
36
+ height: 1px;
37
+ background: #000;
38
+ border-top: 1px solid #fff;
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ width: 100%;
43
+ margin-top: -1px;
44
+ }
45
+ }
46
+ .colorpicker-hue {
47
+ background-image: url(../img/hue.png);
48
+ }
49
+ .colorpicker-alpha {
50
+ background-image: url(../img/alpha.png);
51
+ display:none;
52
+ }
53
+ .colorpicker {
54
+ .clearfix();
55
+ top: 0;
56
+ left: 0;
57
+ padding: 4px;
58
+ min-width: 120px;
59
+ div {
60
+ position: relative;
61
+ }
62
+ &.alpha {
63
+ min-width: 140px;
64
+ .colorpicker-alpha {
65
+ display: block;
66
+ }
67
+ }
68
+ }
69
+ .colorpicker-color {
70
+ height: 10px;
71
+ margin-top: 5px;
72
+ clear: both;
73
+ background-image: url(../img/alpha.png);
74
+ background-position: 0 100%;
75
+ div {
76
+ height: 10px;
77
+ }
78
+ }
79
+ .input-append,
80
+ .input-prepend {
81
+ &.color {
82
+ .add-on i {
83
+ display: block;
84
+ cursor: pointer;
85
+ width: 16px;
86
+ height: 16px;
87
+ }
88
+ }
89
+ }
@@ -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 )