jquery-minicolors-rails 0.0.4 → 2.1.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/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
- }