jquery-minicolors-rails 0.0.4 → 2.1.1

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -1,17 +1,18 @@
1
1
  # jQuery colorpicker for Rails
2
2
 
3
+ [![Gem Version](https://badge.fury.io/rb/jquery-minicolors-rails.png)](http://badge.fury.io/rb/jquery-minicolors-rails)
3
4
  [![Build Status](https://travis-ci.org/kostia/jquery-minicolors-rails.png)](https://travis-ci.org/kostia/jquery-minicolors-rails)
4
5
  [![Code Climate](https://codeclimate.com/github/kostia/jquery-minicolors-rails.png)](https://codeclimate.com/github/kostia/jquery-minicolors-rails)
5
6
 
6
- This gem embedes the jQuery colorpicker plugin miniColors in the Rails asset pipeline.
7
+ This gem embeddes the jQuery colorpicker in the Rails asset pipeline.
7
8
 
8
9
  ![Screenshot](https://raw.github.com/kostia/jquery-minicolors-rails/master/screenshot.png)
9
10
 
10
- See https://github.com/claviska/jquery-miniColors
11
+ See http://labs.abeautifulsite.net/jquery-minicolors/
11
12
 
12
13
  ## Installation
13
14
 
14
- Add to `Gemfile` run `bundle install`:
15
+ Add to `Gemfile` and run `bundle install`:
15
16
 
16
17
  ```ruby
17
18
  # Gemfile
@@ -22,33 +23,39 @@ Add to `app/assets/javascripts/application.js`:
22
23
 
23
24
  ```javascript
24
25
  //= require jquery # Not included
25
- //= require jquery-minicolors
26
+ //= require jquery.minicolors
26
27
  ```
27
28
 
28
29
  Add to `app/assets/stylesheets/application.css`:
29
30
 
30
31
  ```css
31
32
  /*
32
- *= require jquery-minicolors
33
+ *= require jquery.minicolors
33
34
  */
34
35
  ```
35
36
 
36
37
  # Usage
37
38
 
38
- Just call `miniColors()` with any text-input selector:
39
+ Just call `minicolors()` with any text-input selector:
39
40
 
40
41
  ```coffeescript
41
- // With default options:
42
- jQuery ->
43
- $('input[type=text]').minicolors();
42
+ # With default options:
43
+ $ -> $('input[type=text]').minicolors()
44
44
 
45
- // With Bootstrap theme:
46
- jQuery ->
47
- $('input[type=text]').minicolors({theme: 'bootstrap'});
45
+ # With Bootstrap theme (Bootstrap-3 is supported):
46
+ $ -> $('input[type=text]').minicolors theme: 'bootstrap'
48
47
  ```
49
48
 
50
49
  # With SimpleForm
51
50
 
51
+ Add to `app/assets/javascripts/application.js`:
52
+
53
+ ```javascript
54
+ //= require jquery # Not included
55
+ //= require jquery.minicolors
56
+ //= require jquery.minicolors.simple_form
57
+ ```
58
+
52
59
  See https://github.com/plataformatec/simple_form
53
60
 
54
61
  ```erb
@@ -62,17 +69,14 @@ See https://github.com/plataformatec/simple_form
62
69
  <%# With Bootstrap theme and swatch on the right: %>
63
70
  <%= simple_form_for @balloon do |f| %>
64
71
  <%= f.input :color, as: :minicolors, input_html: {data: {
65
- minicolors: {theme: :bootstrap, swatchPosition: :right}}} %>
72
+ minicolors: {theme: :bootstrap, position: :right}}} %>
66
73
  <% end %>
67
74
  ```
68
75
 
69
- Add to `app/assets/javascripts/application.js`:
76
+ ## Versioning
70
77
 
71
- ```javascript
72
- //= require jquery # Not included
73
- //= require jquery-minicolors
74
- //= require jquery-minicolors-simple_form
75
- ```
78
+ Gem has the same version as the vendored minicolors library.
79
+ See https://github.com/claviska/jquery-minicolors.
76
80
 
77
81
  ## MIT-License
78
82
 
@@ -1,3 +1,3 @@
1
1
  module JqueryMinicolorsRails
2
- VERSION = '0.0.4'
2
+ VERSION = '2.1.1'
3
3
  end
@@ -3,16 +3,15 @@
3
3
  *
4
4
  * Copyright Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/)
5
5
  *
6
- * Dual-licensed under the MIT and GPL Version 2 licenses
6
+ * Licensed under the MIT license: http://opensource.org/licenses/MIT
7
7
  *
8
- */
8
+ */
9
9
  if(jQuery) (function($) {
10
10
 
11
- // Yay, MiniColors!
11
+ // Defaults
12
12
  $.minicolors = {
13
- // Default settings
14
- defaultSettings: {
15
- animationSpeed: 100,
13
+ defaults: {
14
+ animationSpeed: 50,
16
15
  animationEasing: 'swing',
17
16
  change: null,
18
17
  changeDelay: 0,
@@ -23,11 +22,9 @@ if(jQuery) (function($) {
23
22
  inline: false,
24
23
  letterCase: 'lowercase',
25
24
  opacity: false,
26
- position: 'default',
25
+ position: 'bottom left',
27
26
  show: null,
28
27
  showSpeed: 100,
29
- swatchPosition: 'left',
30
- textfield: true,
31
28
  theme: 'default'
32
29
  }
33
30
  };
@@ -52,16 +49,17 @@ if(jQuery) (function($) {
52
49
 
53
50
  // Get/set opacity
54
51
  case 'opacity':
52
+ // Getter
55
53
  if( data === undefined ) {
56
54
  // Getter
57
55
  return $(this).attr('data-opacity');
58
56
  } else {
59
57
  // Setter
60
58
  $(this).each( function() {
61
- refresh($(this).attr('data-opacity', data));
59
+ updateFromInput($(this).attr('data-opacity', data));
62
60
  });
63
- return $(this);
64
61
  }
62
+ return $(this);
65
63
 
66
64
  // Get an RGB(A) object based on the current color/opacity
67
65
  case 'rgbObject':
@@ -70,7 +68,7 @@ if(jQuery) (function($) {
70
68
  // Get an RGB(A) string based on the current color/opacity
71
69
  case 'rgbString':
72
70
  case 'rgbaString':
73
- return rgbString($(this), method === 'rgbaString')
71
+ return rgbString($(this), method === 'rgbaString');
74
72
 
75
73
  // Get/set settings on the fly
76
74
  case 'settings':
@@ -83,8 +81,8 @@ if(jQuery) (function($) {
83
81
  destroy($(this));
84
82
  $(this).minicolors($.extend(true, settings, data));
85
83
  });
86
- return $(this);
87
84
  }
85
+ return $(this);
88
86
 
89
87
  // Show the color picker
90
88
  case 'show':
@@ -99,13 +97,12 @@ if(jQuery) (function($) {
99
97
  } else {
100
98
  // Setter
101
99
  $(this).each( function() {
102
- refresh($(this).val(data));
100
+ updateFromInput($(this).val(data));
103
101
  });
104
- return $(this);
105
102
  }
103
+ return $(this);
106
104
 
107
105
  // Initializes the control
108
- case 'create':
109
106
  default:
110
107
  if( method !== 'create' ) data = method;
111
108
  $(this).each( function() {
@@ -121,20 +118,18 @@ if(jQuery) (function($) {
121
118
  // Initialize input elements
122
119
  function init(input, settings) {
123
120
 
124
- var minicolors = $('<span class="minicolors" />'),
125
- defaultSettings = $.minicolors.defaultSettings;
121
+ var minicolors = $('<div class="minicolors" />'),
122
+ defaults = $.minicolors.defaults;
126
123
 
127
124
  // Do nothing if already initialized
128
125
  if( input.data('minicolors-initialized') ) return;
129
126
 
130
127
  // Handle settings
131
- settings = $.extend(true, {}, defaultSettings, settings);
128
+ settings = $.extend(true, {}, defaults, settings);
132
129
 
133
130
  // The wrapper
134
131
  minicolors
135
132
  .addClass('minicolors-theme-' + settings.theme)
136
- .addClass('minicolors-swatch-position-' + settings.swatchPosition)
137
- .toggleClass('minicolors-swatch-left', settings.swatchPosition === 'left')
138
133
  .toggleClass('minicolors-with-opacity', settings.opacity);
139
134
 
140
135
  // Custom positioning
@@ -147,45 +142,43 @@ if(jQuery) (function($) {
147
142
  // The input
148
143
  input
149
144
  .addClass('minicolors-input')
150
- .data('minicolors-initialized', true)
145
+ .data('minicolors-initialized', false)
151
146
  .data('minicolors-settings', settings)
152
147
  .prop('size', 7)
153
- .prop('maxlength', 7)
154
148
  .wrap(minicolors)
155
149
  .after(
156
- '<span class="minicolors-panel minicolors-slider-' + settings.control + '">' +
157
- '<span class="minicolors-slider">' +
158
- '<span class="minicolors-picker"></span>' +
159
- '</span>' +
160
- '<span class="minicolors-opacity-slider">' +
161
- '<span class="minicolors-picker"></span>' +
162
- '</span>' +
163
- '<span class="minicolors-grid">' +
164
- '<span class="minicolors-grid-inner"></span>' +
165
- '<span class="minicolors-picker"><span></span></span>' +
166
- '</span>' +
167
- '</span>'
150
+ '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
151
+ '<div class="minicolors-slider">' +
152
+ '<div class="minicolors-picker"></div>' +
153
+ '</div>' +
154
+ '<div class="minicolors-opacity-slider">' +
155
+ '<div class="minicolors-picker"></div>' +
156
+ '</div>' +
157
+ '<div class="minicolors-grid">' +
158
+ '<div class="minicolors-grid-inner"></div>' +
159
+ '<div class="minicolors-picker"><div></div></div>' +
160
+ '</div>' +
161
+ '</div>'
168
162
  );
169
163
 
170
- // Prevent text selection in IE
171
- input.parent().find('.minicolors-panel').on('selectstart', function() { return false; }).end();
172
-
173
- // Detect swatch position
174
- if( settings.swatchPosition === 'left' ) {
175
- // Left
176
- input.before('<span class="minicolors-swatch"><span></span></span>');
177
- } else {
178
- // Right
179
- input.after('<span class="minicolors-swatch"><span></span></span>');
164
+ // The swatch
165
+ if( !settings.inline ) {
166
+ input.after('<span class="minicolors-swatch"><span class="minicolors-swatch-color"></span></span>');
167
+ input.next('.minicolors-swatch').on('click', function(event) {
168
+ event.preventDefault();
169
+ input.focus();
170
+ });
180
171
  }
181
172
 
182
- // Disable textfield
183
- if( !settings.textfield ) input.addClass('minicolors-hidden');
173
+ // Prevent text selection in IE
174
+ input.parent().find('.minicolors-panel').on('selectstart', function() { return false; }).end();
184
175
 
185
176
  // Inline controls
186
177
  if( settings.inline ) input.parent().addClass('minicolors-inline');
187
178
 
188
- updateFromInput(input, false, true);
179
+ updateFromInput(input, false);
180
+
181
+ input.data('minicolors-initialized', true);
189
182
 
190
183
  }
191
184
 
@@ -199,7 +192,6 @@ if(jQuery) (function($) {
199
192
  .removeData('minicolors-initialized')
200
193
  .removeData('minicolors-settings')
201
194
  .removeProp('size')
202
- .removeProp('maxlength')
203
195
  .removeClass('minicolors-input');
204
196
 
205
197
  // Remove the wrap and destroy whatever remains
@@ -207,11 +199,6 @@ if(jQuery) (function($) {
207
199
 
208
200
  }
209
201
 
210
- // Refresh the specified control
211
- function refresh(input) {
212
- updateFromInput(input);
213
- }
214
-
215
202
  // Shows the specified dropdown panel
216
203
  function show(input) {
217
204
 
@@ -340,7 +327,7 @@ if(jQuery) (function($) {
340
327
 
341
328
  }
342
329
 
343
- var hue, saturation, brightness, rgb, x, y, r, phi,
330
+ var hue, saturation, brightness, x, y, r, phi,
344
331
 
345
332
  hex = input.val(),
346
333
  opacity = input.attr('data-opacity'),
@@ -348,7 +335,6 @@ if(jQuery) (function($) {
348
335
  // Helpful references
349
336
  minicolors = input.parent(),
350
337
  settings = input.data('minicolors-settings'),
351
- panel = minicolors.find('.minicolors-panel'),
352
338
  swatch = minicolors.find('.minicolors-swatch'),
353
339
 
354
340
  // Panel objects
@@ -399,7 +385,7 @@ if(jQuery) (function($) {
399
385
 
400
386
  case 'saturation':
401
387
  // Calculate hue, saturation, and brightness
402
- hue = keepWithin(parseInt(gridPos.x * (360 / grid.width())), 0, 360);
388
+ hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
403
389
  saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
404
390
  brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
405
391
  hex = hsb2hex({
@@ -415,7 +401,7 @@ if(jQuery) (function($) {
415
401
 
416
402
  case 'brightness':
417
403
  // Calculate hue, saturation, and brightness
418
- hue = keepWithin(parseInt(gridPos.x * (360 / grid.width())), 0, 360);
404
+ hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
419
405
  saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
420
406
  brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
421
407
  hex = hsb2hex({
@@ -431,7 +417,7 @@ if(jQuery) (function($) {
431
417
 
432
418
  default:
433
419
  // Calculate hue, saturation, and brightness
434
- hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height())), 0, 360);
420
+ hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
435
421
  saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
436
422
  brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
437
423
  hex = hsb2hex({
@@ -447,8 +433,8 @@ if(jQuery) (function($) {
447
433
  }
448
434
 
449
435
  // Adjust case
450
- input.val( convertCase(hex, settings.letterCase) );
451
-
436
+ input.val( convertCase(hex, settings.letterCase) );
437
+
452
438
  }
453
439
 
454
440
  // Handle opacity
@@ -473,7 +459,7 @@ if(jQuery) (function($) {
473
459
  }
474
460
 
475
461
  // Sets the color picker values from the input
476
- function updateFromInput(input, preserveInputValue, firstRun) {
462
+ function updateFromInput(input, preserveInputValue) {
477
463
 
478
464
  var hex,
479
465
  hsb,
@@ -497,7 +483,9 @@ if(jQuery) (function($) {
497
483
 
498
484
  // Determine hex/HSB values
499
485
  hex = convertCase(parseHex(input.val(), true), settings.letterCase);
500
- if( !hex ) hex = convertCase(parseHex(settings.defaultValue, true));
486
+ if( !hex ){
487
+ hex = convertCase(parseHex(settings.defaultValue, true), settings.letterCase);
488
+ }
501
489
  hsb = hex2hsb(hex);
502
490
 
503
491
  // Update input value
@@ -558,7 +546,6 @@ if(jQuery) (function($) {
558
546
  // Update UI
559
547
  slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
560
548
  minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
561
-
562
549
  break;
563
550
 
564
551
  case 'brightness':
@@ -598,21 +585,27 @@ if(jQuery) (function($) {
598
585
 
599
586
  }
600
587
 
601
- // Handle change event
602
- if( !firstRun ) doChange(input, hex, opacity);
588
+ // Fire change event, but only if minicolors is fully initialized
589
+ if( input.data('minicolors-initialized') ) {
590
+ doChange(input, hex, opacity);
591
+ }
603
592
 
604
593
  }
605
594
 
606
595
  // Runs the change and changeDelay callbacks
607
596
  function doChange(input, hex, opacity) {
608
597
 
609
- var settings = input.data('minicolors-settings');
598
+ var settings = input.data('minicolors-settings'),
599
+ lastChange = input.data('minicolors-lastChange');
610
600
 
611
601
  // Only run if it actually changed
612
- if( hex + opacity !== input.data('minicolors-lastChange') ) {
602
+ if( !lastChange || lastChange.hex !== hex || lastChange.opacity !== opacity ) {
613
603
 
614
604
  // Remember last-changed value
615
- input.data('minicolors-lastChange', hex + opacity);
605
+ input.data('minicolors-lastChange', {
606
+ hex: hex,
607
+ opacity: opacity
608
+ });
616
609
 
617
610
  // Fire change event
618
611
  if( settings.change ) {
@@ -627,7 +620,7 @@ if(jQuery) (function($) {
627
620
  settings.change.call(input.get(0), hex, opacity);
628
621
  }
629
622
  }
630
-
623
+ input.trigger('change').trigger('input');
631
624
  }
632
625
 
633
626
  }
@@ -793,24 +786,20 @@ if(jQuery) (function($) {
793
786
  .on('mouseup.minicolors touchend.minicolors', function() {
794
787
  $(this).removeData('minicolors-target');
795
788
  })
796
- // Toggle panel when swatch is clicked
789
+ // Show panel when swatch is clicked
797
790
  .on('mousedown.minicolors touchstart.minicolors', '.minicolors-swatch', function(event) {
798
- var input = $(this).parent().find('.minicolors-input'),
799
- minicolors = input.parent();
800
- if( minicolors.hasClass('minicolors-focus') ) {
801
- hide(input);
802
- } else {
803
- show(input);
804
- }
791
+ var input = $(this).parent().find('.minicolors-input');
792
+ event.preventDefault();
793
+ show(input);
805
794
  })
806
795
  // Show on focus
807
- .on('focus.minicolors', '.minicolors-input', function(event) {
796
+ .on('focus.minicolors', '.minicolors-input', function() {
808
797
  var input = $(this);
809
798
  if( !input.data('minicolors-initialized') ) return;
810
799
  show(input);
811
800
  })
812
801
  // Fix hex on blur
813
- .on('blur.minicolors', '.minicolors-input', function(event) {
802
+ .on('blur.minicolors', '.minicolors-input', function() {
814
803
  var input = $(this),
815
804
  settings = input.data('minicolors-settings');
816
805
  if( !input.data('minicolors-initialized') ) return;
@@ -833,6 +822,7 @@ if(jQuery) (function($) {
833
822
  case 9: // tab
834
823
  hide();
835
824
  break;
825
+ case 13: // enter
836
826
  case 27: // esc
837
827
  hide();
838
828
  input.blur();
@@ -840,13 +830,13 @@ if(jQuery) (function($) {
840
830
  }
841
831
  })
842
832
  // Update on keyup
843
- .on('keyup.minicolors', '.minicolors-input', function(event) {
833
+ .on('keyup.minicolors', '.minicolors-input', function() {
844
834
  var input = $(this);
845
835
  if( !input.data('minicolors-initialized') ) return;
846
836
  updateFromInput(input, true);
847
837
  })
848
838
  // Update on paste
849
- .on('paste.minicolors', '.minicolors-input', function(event) {
839
+ .on('paste.minicolors', '.minicolors-input', function() {
850
840
  var input = $(this);
851
841
  if( !input.data('minicolors-initialized') ) return;
852
842
  setTimeout( function() {
@@ -0,0 +1,245 @@
1
+ .minicolors {
2
+ position: relative;
3
+ }
4
+
5
+ .minicolors-swatch {
6
+ position: absolute;
7
+ vertical-align: middle;
8
+ background: url(<%= image_path 'jquery.minicolors.png' %>) -80px 0;
9
+ border: solid 1px #ccc;
10
+ cursor: text;
11
+ padding: 0;
12
+ margin: 0;
13
+ display: inline-block;
14
+ }
15
+
16
+ .minicolors-swatch-color {
17
+ position: absolute;
18
+ top: 0;
19
+ left: 0;
20
+ right: 0;
21
+ bottom: 0;
22
+ }
23
+
24
+ .minicolors input[type=hidden] + .minicolors-swatch {
25
+ width: 28px;
26
+ position: static;
27
+ cursor: pointer;
28
+ }
29
+
30
+ /* Panel */
31
+ .minicolors-panel {
32
+ position: absolute;
33
+ width: 173px;
34
+ height: 152px;
35
+ background: white;
36
+ border: solid 1px #CCC;
37
+ box-shadow: 0 0 20px rgba(0, 0, 0, .2);
38
+ z-index: 99999;
39
+ -moz-box-sizing: content-box;
40
+ -webkit-box-sizing: content-box;
41
+ box-sizing: content-box;
42
+ display: none;
43
+ }
44
+
45
+ .minicolors-panel.minicolors-visible {
46
+ display: block;
47
+ }
48
+
49
+ /* Panel positioning */
50
+ .minicolors-position-top .minicolors-panel {
51
+ top: -154px;
52
+ }
53
+
54
+ .minicolors-position-right .minicolors-panel {
55
+ right: 0;
56
+ }
57
+
58
+ .minicolors-position-bottom .minicolors-panel {
59
+ top: auto;
60
+ }
61
+
62
+ .minicolors-position-left .minicolors-panel {
63
+ left: 0;
64
+ }
65
+
66
+ .minicolors-with-opacity .minicolors-panel {
67
+ width: 194px;
68
+ }
69
+
70
+ .minicolors .minicolors-grid {
71
+ position: absolute;
72
+ top: 1px;
73
+ left: 1px;
74
+ width: 150px;
75
+ height: 150px;
76
+ background: url(<%= image_path 'jquery.minicolors.png' %>) -120px 0;
77
+ cursor: crosshair;
78
+ }
79
+
80
+ .minicolors .minicolors-grid-inner {
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ width: 150px;
85
+ height: 150px;
86
+ background: none;
87
+ }
88
+
89
+ .minicolors-slider-saturation .minicolors-grid {
90
+ background-position: -420px 0;
91
+ }
92
+
93
+ .minicolors-slider-saturation .minicolors-grid-inner {
94
+ background: url(<%= image_path 'jquery.minicolors.png' %>) -270px 0;
95
+ }
96
+
97
+ .minicolors-slider-brightness .minicolors-grid {
98
+ background-position: -570px 0;
99
+ }
100
+
101
+ .minicolors-slider-brightness .minicolors-grid-inner {
102
+ background: black;
103
+ }
104
+
105
+ .minicolors-slider-wheel .minicolors-grid {
106
+ background-position: -720px 0;
107
+ }
108
+
109
+ .minicolors-slider,
110
+ .minicolors-opacity-slider {
111
+ position: absolute;
112
+ top: 1px;
113
+ left: 152px;
114
+ width: 20px;
115
+ height: 150px;
116
+ background: white url(<%= image_path 'jquery.minicolors.png' %>) 0 0;
117
+ cursor: row-resize;
118
+ }
119
+
120
+ .minicolors-slider-saturation .minicolors-slider {
121
+ background-position: -60px 0;
122
+ }
123
+
124
+ .minicolors-slider-brightness .minicolors-slider {
125
+ background-position: -20px 0;
126
+ }
127
+
128
+ .minicolors-slider-wheel .minicolors-slider {
129
+ background-position: -20px 0;
130
+ }
131
+
132
+ .minicolors-opacity-slider {
133
+ left: 173px;
134
+ background-position: -40px 0;
135
+ display: none;
136
+ }
137
+
138
+ .minicolors-with-opacity .minicolors-opacity-slider {
139
+ display: block;
140
+ }
141
+
142
+ /* Pickers */
143
+ .minicolors-grid .minicolors-picker {
144
+ position: absolute;
145
+ top: 70px;
146
+ left: 70px;
147
+ width: 12px;
148
+ height: 12px;
149
+ border: solid 1px black;
150
+ border-radius: 10px;
151
+ margin-top: -6px;
152
+ margin-left: -6px;
153
+ background: none;
154
+ }
155
+
156
+ .minicolors-grid .minicolors-picker > div {
157
+ position: absolute;
158
+ top: 0;
159
+ left: 0;
160
+ width: 8px;
161
+ height: 8px;
162
+ border-radius: 8px;
163
+ border: solid 2px white;
164
+ -moz-box-sizing: content-box;
165
+ -webkit-box-sizing: content-box;
166
+ box-sizing: content-box;
167
+ }
168
+
169
+ .minicolors-picker {
170
+ position: absolute;
171
+ top: 0;
172
+ left: 0;
173
+ width: 18px;
174
+ height: 2px;
175
+ background: white;
176
+ border: solid 1px black;
177
+ margin-top: -2px;
178
+ -moz-box-sizing: content-box;
179
+ -webkit-box-sizing: content-box;
180
+ box-sizing: content-box;
181
+ }
182
+
183
+ /* Inline controls */
184
+ .minicolors-inline {
185
+ display: inline-block;
186
+ }
187
+
188
+ .minicolors-inline .minicolors-input {
189
+ display: none !important;
190
+ }
191
+
192
+ .minicolors-inline .minicolors-panel {
193
+ position: relative;
194
+ top: auto;
195
+ left: auto;
196
+ box-shadow: none;
197
+ z-index: auto;
198
+ display: inline-block;
199
+ }
200
+
201
+ /* Default theme */
202
+ .minicolors-theme-default .minicolors-swatch {
203
+ top: 5px;
204
+ left: 5px;
205
+ width: 18px;
206
+ height: 18px;
207
+ }
208
+ .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
209
+ left: auto;
210
+ right: 5px;
211
+ }
212
+ .minicolors-theme-default.minicolors {
213
+ width: auto;
214
+ display: inline-block;
215
+ }
216
+ .minicolors-theme-default .minicolors-input {
217
+ height: 20px;
218
+ width: auto;
219
+ display: inline-block;
220
+ padding-left: 26px;
221
+ }
222
+ .minicolors-theme-default.minicolors-position-right .minicolors-input {
223
+ padding-right: 26px;
224
+ padding-left: inherit;
225
+ }
226
+
227
+ /* Bootstrap theme */
228
+ .minicolors-theme-bootstrap .minicolors-swatch {
229
+ top: 3px;
230
+ left: 3px;
231
+ width: 28px;
232
+ height: 28px;
233
+ border-radius: 3px;
234
+ }
235
+ .minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
236
+ left: auto;
237
+ right: 3px;
238
+ }
239
+ .minicolors-theme-bootstrap .minicolors-input {
240
+ padding-left: 44px;
241
+ }
242
+ .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
243
+ padding-right: 44px;
244
+ padding-left: 12px;
245
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jquery-minicolors-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4
4
+ version: 2.1.1
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,11 +9,11 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-07-31 00:00:00.000000000 Z
12
+ date: 2013-09-19 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
16
- requirement: &70239133516300 !ruby/object:Gem::Requirement
16
+ requirement: &70137962184980 !ruby/object:Gem::Requirement
17
17
  none: false
18
18
  requirements:
19
19
  - - ! '>='
@@ -21,10 +21,10 @@ dependencies:
21
21
  version: 3.2.8
22
22
  type: :runtime
23
23
  prerelease: false
24
- version_requirements: *70239133516300
24
+ version_requirements: *70137962184980
25
25
  - !ruby/object:Gem::Dependency
26
26
  name: jquery-rails
27
- requirement: &70239133515720 !ruby/object:Gem::Requirement
27
+ requirement: &70137962180920 !ruby/object:Gem::Requirement
28
28
  none: false
29
29
  requirements:
30
30
  - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
32
32
  version: '0'
33
33
  type: :runtime
34
34
  prerelease: false
35
- version_requirements: *70239133515720
35
+ version_requirements: *70137962180920
36
36
  - !ruby/object:Gem::Dependency
37
37
  name: multi_json
38
- requirement: &70239133514380 !ruby/object:Gem::Requirement
38
+ requirement: &70137962202060 !ruby/object:Gem::Requirement
39
39
  none: false
40
40
  requirements:
41
41
  - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
43
43
  version: '0'
44
44
  type: :development
45
45
  prerelease: false
46
- version_requirements: *70239133514380
46
+ version_requirements: *70137962202060
47
47
  - !ruby/object:Gem::Dependency
48
48
  name: pry
49
- requirement: &70239133513700 !ruby/object:Gem::Requirement
49
+ requirement: &70137962198820 !ruby/object:Gem::Requirement
50
50
  none: false
51
51
  requirements:
52
52
  - - ! '>='
@@ -54,10 +54,10 @@ dependencies:
54
54
  version: '0'
55
55
  type: :development
56
56
  prerelease: false
57
- version_requirements: *70239133513700
57
+ version_requirements: *70137962198820
58
58
  - !ruby/object:Gem::Dependency
59
59
  name: rake
60
- requirement: &70239133512120 !ruby/object:Gem::Requirement
60
+ requirement: &70137962195860 !ruby/object:Gem::Requirement
61
61
  none: false
62
62
  requirements:
63
63
  - - ! '>='
@@ -65,10 +65,10 @@ dependencies:
65
65
  version: '0'
66
66
  type: :development
67
67
  prerelease: false
68
- version_requirements: *70239133512120
68
+ version_requirements: *70137962195860
69
69
  - !ruby/object:Gem::Dependency
70
70
  name: rspec
71
- requirement: &70239133511220 !ruby/object:Gem::Requirement
71
+ requirement: &70137962194660 !ruby/object:Gem::Requirement
72
72
  none: false
73
73
  requirements:
74
74
  - - ! '>='
@@ -76,10 +76,10 @@ dependencies:
76
76
  version: '0'
77
77
  type: :development
78
78
  prerelease: false
79
- version_requirements: *70239133511220
79
+ version_requirements: *70137962194660
80
80
  - !ruby/object:Gem::Dependency
81
81
  name: rspec-rails
82
- requirement: &70239133510340 !ruby/object:Gem::Requirement
82
+ requirement: &70137962216020 !ruby/object:Gem::Requirement
83
83
  none: false
84
84
  requirements:
85
85
  - - ! '>='
@@ -87,10 +87,10 @@ dependencies:
87
87
  version: '0'
88
88
  type: :development
89
89
  prerelease: false
90
- version_requirements: *70239133510340
90
+ version_requirements: *70137962216020
91
91
  - !ruby/object:Gem::Dependency
92
92
  name: simple_form
93
- requirement: &70239133525340 !ruby/object:Gem::Requirement
93
+ requirement: &70137962215240 !ruby/object:Gem::Requirement
94
94
  none: false
95
95
  requirements:
96
96
  - - ! '>='
@@ -98,10 +98,10 @@ dependencies:
98
98
  version: '0'
99
99
  type: :development
100
100
  prerelease: false
101
- version_requirements: *70239133525340
101
+ version_requirements: *70137962215240
102
102
  - !ruby/object:Gem::Dependency
103
103
  name: webrat
104
- requirement: &70239133522740 !ruby/object:Gem::Requirement
104
+ requirement: &70137962214260 !ruby/object:Gem::Requirement
105
105
  none: false
106
106
  requirements:
107
107
  - - ! '>='
@@ -109,8 +109,8 @@ dependencies:
109
109
  version: '0'
110
110
  type: :development
111
111
  prerelease: false
112
- version_requirements: *70239133522740
113
- description: Colorpicker-plugin for jQuery, integrated in Rails asset pipeline
112
+ version_requirements: *70137962214260
113
+ description: This gem embeddes the jQuery colorpicker in the Rails asset pipeline.
114
114
  email:
115
115
  - kostiantyn.kahanskyi@googlemail.com
116
116
  executables: []
@@ -121,10 +121,10 @@ files:
121
121
  - lib/jquery-minicolors-rails/engine.rb
122
122
  - lib/jquery-minicolors-rails/version.rb
123
123
  - lib/jquery-minicolors-rails.rb
124
- - vendor/assets/images/jquery-minicolors/jquery.minicolors.png
125
- - vendor/assets/javascripts/jquery-minicolors-simple_form.js
126
- - vendor/assets/javascripts/jquery-minicolors.js
127
- - vendor/assets/stylesheets/jquery-minicolors.css.erb
124
+ - vendor/assets/images/jquery.minicolors.png
125
+ - vendor/assets/javascripts/jquery.minicolors.js
126
+ - vendor/assets/javascripts/jquery.minicolors.simple_form.js
127
+ - vendor/assets/stylesheets/jquery.minicolors.css.erb
128
128
  - Rakefile
129
129
  - README.md
130
130
  homepage: https://github.com/kostia/jquery-minicolors-rails
@@ -141,7 +141,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
141
141
  version: '0'
142
142
  segments:
143
143
  - 0
144
- hash: -101286193624482272
144
+ hash: -2017164528785475072
145
145
  required_rubygems_version: !ruby/object:Gem::Requirement
146
146
  none: false
147
147
  requirements:
@@ -150,11 +150,11 @@ required_rubygems_version: !ruby/object:Gem::Requirement
150
150
  version: '0'
151
151
  segments:
152
152
  - 0
153
- hash: -101286193624482272
153
+ hash: -2017164528785475072
154
154
  requirements: []
155
155
  rubyforge_project:
156
156
  rubygems_version: 1.8.5
157
157
  signing_key:
158
158
  specification_version: 3
159
- summary: Colorpicker-plugin for jQuery, integrated in Rails asset pipeline
159
+ summary: This gem embeddes the jQuery colorpicker in the Rails asset pipeline.
160
160
  test_files: []
@@ -1,278 +0,0 @@
1
- .minicolors {
2
- position: relative;
3
- display: inline-block;
4
- z-index: 1;
5
- }
6
-
7
- .minicolors-focus {
8
- z-index: 2;
9
- }
10
-
11
- .minicolors.minicolors-theme-default .minicolors-input {
12
- margin: 0px;
13
- margin-right: 3px;
14
- border: solid 1px #CCC;
15
- font: 14px sans-serif;
16
- width: 65px;
17
- height: 16px;
18
- border-radius: 0;
19
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, .04);
20
- padding: 2px;
21
- margin-right: -1px;
22
- }
23
-
24
- .minicolors-theme-default.minicolors .minicolors-input {
25
- vertical-align: middle;
26
- outline: none;
27
- }
28
-
29
- .minicolors-theme-default.minicolors-swatch-left .minicolors-input {
30
- margin-left: -1px;
31
- margin-right: auto;
32
- }
33
-
34
- .minicolors-theme-default.minicolors-focus .minicolors-input,
35
- .minicolors-theme-default.minicolors-focus .minicolors-swatch {
36
- border-color: #999;
37
- }
38
-
39
- .minicolors-hidden {
40
- position: absolute;
41
- left: -9999em;
42
- }
43
-
44
- .minicolors-swatch {
45
- position: relative;
46
- width: 20px;
47
- height: 20px;
48
- text-align: left;
49
- background: url(<%= image_path('jquery-minicolors/jquery.minicolors.png') %>) -80px 0;
50
- border: solid 1px #CCC;
51
- vertical-align: middle;
52
- display: inline-block;
53
- }
54
-
55
- .minicolors-swatch SPAN {
56
- position: absolute;
57
- width: 100%;
58
- height: 100%;
59
- background: none;
60
- box-shadow: inset 0 9px 0 rgba(255, 255, 255, .1);
61
- display: inline-block;
62
- }
63
-
64
- /* Panel */
65
- .minicolors-panel {
66
- position: absolute;
67
- top: 26px;
68
- left: 0;
69
- width: 173px;
70
- height: 152px;
71
- background: white;
72
- border: solid 1px #CCC;
73
- box-shadow: 0 0 20px rgba(0, 0, 0, .2);
74
- display: none;
75
- }
76
-
77
- .minicolors-position-top .minicolors-panel {
78
- top: -156px;
79
- }
80
-
81
- .minicolors-position-left .minicolors-panel {
82
- left: -83px;
83
- }
84
-
85
- .minicolors-position-left.minicolors-with-opacity .minicolors-panel {
86
- left: -104px;
87
- }
88
-
89
- .minicolors-with-opacity .minicolors-panel {
90
- width: 194px;
91
- }
92
-
93
- .minicolors .minicolors-grid {
94
- position: absolute;
95
- top: 1px;
96
- left: 1px;
97
- width: 150px;
98
- height: 150px;
99
- background: url(<%= image_path('jquery-minicolors/jquery.minicolors.png') %>) -120px 0;
100
- cursor: crosshair;
101
- }
102
-
103
- .minicolors .minicolors-grid-inner {
104
- position: absolute;
105
- top: 0;
106
- left: 0;
107
- width: 150px;
108
- height: 150px;
109
- background: none;
110
- }
111
-
112
- .minicolors-slider-saturation .minicolors-grid {
113
- background-position: -420px 0;
114
- }
115
-
116
- .minicolors-slider-saturation .minicolors-grid-inner {
117
- background: url(<%= image_path('jquery-minicolors/jquery.minicolors.png') %>) -270px 0;
118
- }
119
-
120
- .minicolors-slider-brightness .minicolors-grid {
121
- background-position: -570px 0;
122
- }
123
-
124
- .minicolors-slider-brightness .minicolors-grid-inner {
125
- background: black;
126
- }
127
-
128
- .minicolors-slider-wheel .minicolors-grid {
129
- background-position: -720px 0;
130
- }
131
-
132
- .minicolors-slider,
133
- .minicolors-opacity-slider {
134
- position: absolute;
135
- top: 1px;
136
- left: 152px;
137
- width: 20px;
138
- height: 150px;
139
- background: white url(<%= image_path('jquery-minicolors/jquery.minicolors.png') %>) 0 0;
140
- cursor: crosshair;
141
- }
142
-
143
- .minicolors-slider-saturation .minicolors-slider {
144
- background-position: -60px 0;
145
- }
146
-
147
- .minicolors-slider-brightness .minicolors-slider {
148
- background-position: -20px 0;
149
- }
150
-
151
- .minicolors-slider-wheel .minicolors-slider {
152
- background-position: -20px 0;
153
- }
154
-
155
- .minicolors-opacity-slider {
156
- left: 173px;
157
- background-position: -40px 0;
158
- display: none;
159
- }
160
-
161
- .minicolors-with-opacity .minicolors-opacity-slider {
162
- display: block;
163
- }
164
-
165
- /* Pickers */
166
- .minicolors-grid .minicolors-picker {
167
- position: absolute;
168
- top: 70px;
169
- left: 70px;
170
- width: 10px;
171
- height: 10px;
172
- border: solid 1px black;
173
- border-radius: 10px;
174
- margin-top: -6px;
175
- margin-left: -6px;
176
- background: none;
177
- }
178
-
179
- .minicolors-grid .minicolors-picker SPAN {
180
- position: absolute;
181
- top: 0;
182
- left: 0;
183
- width: 6px;
184
- height: 6px;
185
- border-radius: 6px;
186
- border: solid 2px white;
187
- }
188
-
189
- .minicolors-picker {
190
- position: absolute;
191
- top: 0;
192
- left: 0;
193
- width: 18px;
194
- height: 2px;
195
- background: white;
196
- border: solid 1px black;
197
- margin-top: -2px;
198
- }
199
-
200
- /* Inline controls */
201
- .minicolors-inline .minicolors-input,
202
- .minicolors-inline .minicolors-swatch {
203
- display: none;
204
- }
205
-
206
- .minicolors-inline .minicolors-panel {
207
- position: relative;
208
- top: auto;
209
- left: auto;
210
- display: inline-block;
211
- }
212
-
213
-
214
- /*
215
- * Bootstrap Theme (theme: 'bootstrap')
216
- *
217
- */
218
-
219
- /* Input styles */
220
- .minicolors-theme-bootstrap .minicolors-input {
221
- padding: 4px 6px;
222
- padding-left: 30px;
223
- background-color: white;
224
- border: 1px solid #CCC;
225
- border-radius: 3px;
226
- color: #555;
227
- font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
228
- font-size: 14px;
229
- height: 19px;
230
- margin: 0px;
231
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
232
- }
233
-
234
- /* When the input has focus */
235
- .minicolors-theme-bootstrap.minicolors-focus .minicolors-input {
236
- border-color: #6fb8f1;
237
- box-shadow: 0 0 10px #6fb8f1;
238
- outline: none;
239
- }
240
-
241
- /* Swatch styles */
242
- .minicolors-theme-bootstrap .minicolors-swatch {
243
- position: absolute;
244
- left: 4px;
245
- top: 4px;
246
- z-index: 2;
247
- }
248
-
249
- /* Handle swatch position (left = default / right) */
250
- .minicolors-theme-bootstrap.minicolors-swatch-position-right .minicolors-input {
251
- padding-left: 6px;
252
- padding-right: 30px;
253
- }
254
-
255
- .minicolors-theme-bootstrap.minicolors-swatch-position-right .minicolors-swatch {
256
- left: auto;
257
- right: 4px;
258
- }
259
-
260
- /* Panel styles */
261
- .minicolors-theme-bootstrap .minicolors-panel {
262
- top: 28px;
263
- z-index: 3;
264
- }
265
-
266
- /* Handle panel positions (top / left) */
267
- .minicolors-theme-bootstrap.minicolors-position-top .minicolors-panel {
268
- top: -154px;
269
- }
270
-
271
- .minicolors-theme-bootstrap.minicolors-position-left .minicolors-panel {
272
- left: -63px;
273
- }
274
-
275
- /* Don't forget to adjust the left position in case the opacity slider is visible! */
276
- .minicolors-theme-bootstrap.minicolors-position-left.minicolors-with-opacity .minicolors-panel {
277
- left: -84px;
278
- }