jquery-simplecolorpicker-rails 0.0.3 → 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.
data/README.md
CHANGED
|
@@ -27,31 +27,39 @@ Add the following stylesheet file to `app/assets/stylesheets/application.css`:
|
|
|
27
27
|
|
|
28
28
|
*= require jquery.simplecolorpicker.css
|
|
29
29
|
|
|
30
|
-
If you use [simple_form](https://github.com/plataformatec/simple_form)
|
|
30
|
+
If you use [simple_form](https://github.com/plataformatec/simple_form) write this inside your form:
|
|
31
31
|
|
|
32
32
|
<%= f.input :color, collection: MY_COLORS, selected: my_default_color %>
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
And then inside your JavaScript:
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
'Bold blue' => '#5484ed',
|
|
40
|
-
'Blue' => '#a4bdfc',
|
|
41
|
-
'Turquoise' => '#46d6db',
|
|
42
|
-
'Light green' => '#7ae7bf',
|
|
43
|
-
'Bold green' => '#51b749',
|
|
44
|
-
'Yellow' => '#fbd75b',
|
|
45
|
-
'Orange' => '#ffb878',
|
|
46
|
-
'Red' => '#ff887c',
|
|
47
|
-
'Bold red' => '#dc2127',
|
|
48
|
-
'Purple' => '#dbadff',
|
|
49
|
-
'Gray' => '#e1e1e1',
|
|
50
|
-
}
|
|
36
|
+
```JavaScript
|
|
37
|
+
$('#color').simplecolorpicker();
|
|
38
|
+
```
|
|
51
39
|
|
|
52
|
-
|
|
40
|
+
With `MY_COLORS` being:
|
|
41
|
+
```ruby
|
|
42
|
+
# Colors from Google Calendar
|
|
43
|
+
MY_COLORS = {
|
|
44
|
+
green: '#7bd148',
|
|
45
|
+
bold_blue: '#5484ed',
|
|
46
|
+
blue: '#a4bdfc',
|
|
47
|
+
turquoise: '#46d6db',
|
|
48
|
+
light_green: '#7ae7bf',
|
|
49
|
+
bold_green: '#51b749',
|
|
50
|
+
yellow: '#fbd75b',
|
|
51
|
+
orange: '#ffb878',
|
|
52
|
+
red: '#ff887c',
|
|
53
|
+
bold_red: '#dc2127',
|
|
54
|
+
purple: '#dbadff',
|
|
55
|
+
gray: '#e1e1e1'
|
|
56
|
+
}
|
|
57
|
+
```
|
|
53
58
|
|
|
54
|
-
|
|
59
|
+
And `my_default_color` being:
|
|
60
|
+
```ruby
|
|
61
|
+
my_default_color = MY_COLORS[:green]
|
|
62
|
+
```
|
|
55
63
|
|
|
56
64
|
## License
|
|
57
65
|
|
|
@@ -7,57 +7,13 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
(function($) {
|
|
10
|
-
|
|
10
|
+
'use strict';
|
|
11
11
|
|
|
12
12
|
/**
|
|
13
13
|
* Constructor.
|
|
14
14
|
*/
|
|
15
|
-
var SimpleColorPicker = function(
|
|
16
|
-
this.select
|
|
17
|
-
this.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
|
|
18
|
-
|
|
19
|
-
this.select.hide();
|
|
20
|
-
|
|
21
|
-
// Trick: fix span alignment
|
|
22
|
-
// When a span does not contain any text, its alignment is not correct
|
|
23
|
-
var fakeText = ' ';
|
|
24
|
-
|
|
25
|
-
// Build the list of colors
|
|
26
|
-
// <div class="selected" title="Green" style="background-color: #7bd148;" role="button"></div>
|
|
27
|
-
var colorList = '';
|
|
28
|
-
$('option', this.select).each(function() {
|
|
29
|
-
var option = $(this);
|
|
30
|
-
var color = option.val();
|
|
31
|
-
var title = option.text();
|
|
32
|
-
var selected = '';
|
|
33
|
-
if (option.attr('selected')) {
|
|
34
|
-
selected = 'class="selected"';
|
|
35
|
-
}
|
|
36
|
-
colorList += '<div ' + selected + ' title="' + title + '" style="background-color: ' + color + ';" role="button" tabindex="0">'
|
|
37
|
-
+ fakeText
|
|
38
|
-
+ '</div>';
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
if (this.options.picker) {
|
|
42
|
-
var selectText = this.select.find('option:selected').text();
|
|
43
|
-
var selectValue = this.select.val();
|
|
44
|
-
this.icon = $('<span class="simplecolorpicker icon" title="' + selectText + '" style="background-color: ' + selectValue + ';" role="button" tabindex="0">'
|
|
45
|
-
+ fakeText
|
|
46
|
-
+ '</span>').insertAfter(this.select);
|
|
47
|
-
this.icon.on('click', $.proxy(this.show, this));
|
|
48
|
-
|
|
49
|
-
this.picker = $('<span class="simplecolorpicker picker"></span>').appendTo(document.body);
|
|
50
|
-
this.picker.html(colorList);
|
|
51
|
-
this.picker.on('click', $.proxy(this.click, this));
|
|
52
|
-
|
|
53
|
-
// Hide picker when clicking outside
|
|
54
|
-
$(document).on('mousedown', $.proxy(this.hide, this));
|
|
55
|
-
this.picker.on('mousedown', $.proxy(this.mousedown, this));
|
|
56
|
-
} else {
|
|
57
|
-
this.inline = $('<span class="simplecolorpicker inline"></span>').insertAfter(this.select);
|
|
58
|
-
this.inline.html(colorList);
|
|
59
|
-
this.inline.on('click', $.proxy(this.click, this));
|
|
60
|
-
}
|
|
15
|
+
var SimpleColorPicker = function(select, options) {
|
|
16
|
+
this.init('simplecolorpicker', select, options);
|
|
61
17
|
};
|
|
62
18
|
|
|
63
19
|
/**
|
|
@@ -66,19 +22,69 @@
|
|
|
66
22
|
SimpleColorPicker.prototype = {
|
|
67
23
|
constructor: SimpleColorPicker,
|
|
68
24
|
|
|
69
|
-
|
|
25
|
+
init: function(type, select, options) {
|
|
26
|
+
this.type = type;
|
|
27
|
+
|
|
28
|
+
this.$select = $(select);
|
|
29
|
+
this.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
|
|
30
|
+
|
|
31
|
+
this.$select.hide();
|
|
32
|
+
|
|
33
|
+
// Trick: fix span alignment
|
|
34
|
+
// When a span does not contain any text, its alignment is not correct
|
|
35
|
+
var fakeText = ' ';
|
|
36
|
+
|
|
37
|
+
// Build the list of colors
|
|
38
|
+
// <div class="selected" title="Green" style="background-color: #7bd148;" role="button"></div>
|
|
39
|
+
var colorList = '';
|
|
40
|
+
$('option', this.$select).each(function() {
|
|
41
|
+
var option = $(this);
|
|
42
|
+
var color = option.val();
|
|
43
|
+
var title = option.text();
|
|
44
|
+
var selected = '';
|
|
45
|
+
if (option.attr('selected')) {
|
|
46
|
+
selected = 'class="selected"';
|
|
47
|
+
}
|
|
48
|
+
colorList += '<div ' + selected + ' title="' + title + '" style="background-color: ' + color + ';" role="button" tabindex="0">'
|
|
49
|
+
+ fakeText
|
|
50
|
+
+ '</div>';
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
if (this.options.picker) {
|
|
54
|
+
var selectText = this.$select.find('option:selected').text();
|
|
55
|
+
var selectValue = this.$select.val();
|
|
56
|
+
this.$icon = $('<span class="simplecolorpicker icon" title="' + selectText + '" style="background-color: ' + selectValue + ';" role="button" tabindex="0">'
|
|
57
|
+
+ fakeText
|
|
58
|
+
+ '</span>').insertAfter(this.$select);
|
|
59
|
+
this.$icon.on('click.' + this.type, $.proxy(this.showPicker, this));
|
|
60
|
+
|
|
61
|
+
this.$picker = $('<span class="simplecolorpicker picker"></span>').appendTo(document.body);
|
|
62
|
+
this.$picker.html(colorList);
|
|
63
|
+
this.$picker.on('click.' + this.type, $.proxy(this.click, this));
|
|
64
|
+
|
|
65
|
+
// Hide picker when clicking outside
|
|
66
|
+
$(document).on('mousedown.' + this.type, $.proxy(this.hidePicker, this));
|
|
67
|
+
this.$picker.on('mousedown.' + this.type, $.proxy(this.mousedown, this));
|
|
68
|
+
} else {
|
|
69
|
+
this.$inline = $('<span class="simplecolorpicker inline"></span>').insertAfter(this.$select);
|
|
70
|
+
this.$inline.html(colorList);
|
|
71
|
+
this.$inline.on('click.' + this.type, $.proxy(this.click, this));
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
|
|
75
|
+
showPicker: function() {
|
|
70
76
|
var bootstrapArrowWidth = 16; // Empirical value
|
|
71
|
-
var pos = this
|
|
72
|
-
this
|
|
73
|
-
left: pos.left + this
|
|
74
|
-
top: pos.top + this
|
|
77
|
+
var pos = this.$icon.offset();
|
|
78
|
+
this.$picker.css({
|
|
79
|
+
left: pos.left + this.$icon.width() / 2 - bootstrapArrowWidth, // Middle of the icon
|
|
80
|
+
top: pos.top + this.$icon.outerHeight()
|
|
75
81
|
});
|
|
76
82
|
|
|
77
|
-
this
|
|
83
|
+
this.$picker.show(this.options.delay);
|
|
78
84
|
},
|
|
79
85
|
|
|
80
|
-
|
|
81
|
-
this
|
|
86
|
+
hidePicker: function() {
|
|
87
|
+
this.$picker.hide(this.options.delay);
|
|
82
88
|
},
|
|
83
89
|
|
|
84
90
|
click: function(e) {
|
|
@@ -95,15 +101,13 @@
|
|
|
95
101
|
target.addClass('selected');
|
|
96
102
|
|
|
97
103
|
if (this.options.picker) {
|
|
98
|
-
this
|
|
99
|
-
this
|
|
100
|
-
|
|
101
|
-
// Hide the picker
|
|
102
|
-
this.hide();
|
|
104
|
+
this.$icon.css('background-color', color);
|
|
105
|
+
this.$icon.attr('title', title);
|
|
106
|
+
this.hidePicker();
|
|
103
107
|
}
|
|
104
108
|
|
|
105
|
-
// Change select value
|
|
106
|
-
this
|
|
109
|
+
// Change HTML select value
|
|
110
|
+
this.$select.val(this.rgb2hex(color)).change();
|
|
107
111
|
}
|
|
108
112
|
}
|
|
109
113
|
},
|
|
@@ -123,7 +127,7 @@
|
|
|
123
127
|
*/
|
|
124
128
|
rgb2hex: function(rgb) {
|
|
125
129
|
function hex(x) {
|
|
126
|
-
return (
|
|
130
|
+
return ('0' + parseInt(x, 10).toString(16)).slice(-2);
|
|
127
131
|
}
|
|
128
132
|
|
|
129
133
|
var matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
|
@@ -132,13 +136,30 @@
|
|
|
132
136
|
// Variable rgb is already a hexadecimal value
|
|
133
137
|
return rgb;
|
|
134
138
|
} else {
|
|
135
|
-
return
|
|
139
|
+
return '#' + hex(matches[1]) + hex(matches[2]) + hex(matches[3]);
|
|
136
140
|
}
|
|
141
|
+
},
|
|
142
|
+
|
|
143
|
+
destroy: function() {
|
|
144
|
+
if (this.options.picker) {
|
|
145
|
+
this.$icon.off('.' + this.type);
|
|
146
|
+
this.$icon.remove();
|
|
147
|
+
this.$picker.off('.' + this.type);
|
|
148
|
+
this.$picker.remove();
|
|
149
|
+
$(document).off('.' + this.type);
|
|
150
|
+
} else {
|
|
151
|
+
this.$inline.off('.' + this.type);
|
|
152
|
+
this.$inline.remove();
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
this.$select.removeData(this.type);
|
|
156
|
+
this.$select.show();
|
|
137
157
|
}
|
|
138
158
|
};
|
|
139
159
|
|
|
140
160
|
/**
|
|
141
161
|
* Plugin definition.
|
|
162
|
+
* How to use: $('#id').simplecolorpicker()
|
|
142
163
|
*/
|
|
143
164
|
$.fn.simplecolorpicker = function(option) {
|
|
144
165
|
// For HTML element passed to the plugin
|
|
@@ -146,7 +167,7 @@
|
|
|
146
167
|
var $this = $(this),
|
|
147
168
|
data = $this.data('simplecolorpicker'),
|
|
148
169
|
options = typeof option === 'object' && option;
|
|
149
|
-
if (
|
|
170
|
+
if (data === undefined) {
|
|
150
171
|
$this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
|
|
151
172
|
}
|
|
152
173
|
if (typeof option === 'string') {
|
|
@@ -155,8 +176,6 @@
|
|
|
155
176
|
});
|
|
156
177
|
};
|
|
157
178
|
|
|
158
|
-
$.fn.simplecolorpicker.Constructor = SimpleColorPicker;
|
|
159
|
-
|
|
160
179
|
/**
|
|
161
180
|
* Default options.
|
|
162
181
|
*/
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
* See http://twitter.github.com/bootstrap/assets/css/bootstrap.css
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
.simplecolorpicker:before {
|
|
13
|
+
.simplecolorpicker.picker:before {
|
|
14
14
|
position: absolute;
|
|
15
15
|
top: -7px;
|
|
16
16
|
left: 9px;
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
content: '';
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.simplecolorpicker:after {
|
|
25
|
+
.simplecolorpicker.picker:after {
|
|
26
26
|
position: absolute;
|
|
27
27
|
top: -6px;
|
|
28
28
|
left: 10px;
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
position: absolute;
|
|
38
38
|
top: 100%;
|
|
39
39
|
left: 0;
|
|
40
|
-
z-index:
|
|
40
|
+
z-index: 1051; /* Above Bootstrap modal (z-index of 1050) */
|
|
41
41
|
display: none;
|
|
42
42
|
float: left;
|
|
43
43
|
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jquery-simplecolorpicker-rails
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0
|
|
4
|
+
version: 0.1.0
|
|
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: 2012-06
|
|
12
|
+
date: 2012-12-06 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: railties
|
|
16
|
-
requirement: &
|
|
16
|
+
requirement: &70176716718180 !ruby/object:Gem::Requirement
|
|
17
17
|
none: false
|
|
18
18
|
requirements:
|
|
19
19
|
- - ! '>='
|
|
@@ -21,7 +21,7 @@ dependencies:
|
|
|
21
21
|
version: 3.1.0
|
|
22
22
|
type: :runtime
|
|
23
23
|
prerelease: false
|
|
24
|
-
version_requirements: *
|
|
24
|
+
version_requirements: *70176716718180
|
|
25
25
|
description: simplecolorpicker jQuery plugin
|
|
26
26
|
email:
|
|
27
27
|
- tkrotoff@gmail.com
|
|
@@ -59,7 +59,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
59
59
|
version: '0'
|
|
60
60
|
requirements: []
|
|
61
61
|
rubyforge_project:
|
|
62
|
-
rubygems_version: 1.8.
|
|
62
|
+
rubygems_version: 1.8.15
|
|
63
63
|
signing_key:
|
|
64
64
|
specification_version: 3
|
|
65
65
|
summary: simplecolorpicker packaged for the Rails 3.1+ asset pipeline
|