kolor-picker 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +9 -9
- data/.rspec +1 -1
- data/.travis.yml +10 -11
- data/CHANGELOG.md +14 -6
- data/app/assets/javascripts/kolor-picker.js +33 -33
- data/app/assets/javascripts/kolor-picker/color-sampler.js +219 -213
- data/app/assets/javascripts/kolor-picker/kolor-picker.js +185 -185
- data/app/assets/stylesheets/kolor-picker/color-sampler.css +57 -54
- data/lib/kolor-picker/engine.rb +11 -11
- data/lib/kolor-picker/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 354187e29d33fd02a857473b8990a618df88b71c
|
4
|
+
data.tar.gz: 7314277c0a49b7e23565efeadd52c138344d8055
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0e7dfea643e637a4de94ce6cdb1ef0c4e26c7e93a5cba4a5219ef7fe7f2f701b3dbdf44262a18cf85b890b86f0d692b061eaba28b5a7615d462cda2703887386
|
7
|
+
data.tar.gz: 8b831cdd099bff14f356aee518b76a6ba2bffcf3b3003fe4989619e89e296413ed9cd61e493fc21ef0ccd3ffb343ab8341b186b36264bc6f68722f163623170c
|
data/.gitignore
CHANGED
@@ -1,9 +1,9 @@
|
|
1
|
-
/.bundle/
|
2
|
-
/.yardoc
|
3
|
-
/Gemfile.lock
|
4
|
-
/_yardoc/
|
5
|
-
/coverage/
|
6
|
-
/doc/
|
7
|
-
/pkg/
|
8
|
-
/spec/reports/
|
9
|
-
/tmp/
|
1
|
+
/.bundle/
|
2
|
+
/.yardoc
|
3
|
+
/Gemfile.lock
|
4
|
+
/_yardoc/
|
5
|
+
/coverage/
|
6
|
+
/doc/
|
7
|
+
/pkg/
|
8
|
+
/spec/reports/
|
9
|
+
/tmp/
|
data/.rspec
CHANGED
@@ -1 +1 @@
|
|
1
|
-
--color
|
1
|
+
--color
|
data/.travis.yml
CHANGED
@@ -1,11 +1,10 @@
|
|
1
|
-
language: ruby
|
2
|
-
rvm:
|
3
|
-
- 2.3.0
|
4
|
-
- 2.2.4
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
- COVERALLS=1
|
1
|
+
language: ruby
|
2
|
+
rvm:
|
3
|
+
- 2.3.0
|
4
|
+
- 2.2.4
|
5
|
+
before_install: gem install bundler
|
6
|
+
branches:
|
7
|
+
only:
|
8
|
+
- master
|
9
|
+
env:
|
10
|
+
- COVERALLS=1
|
data/CHANGELOG.md
CHANGED
@@ -1,9 +1,17 @@
|
|
1
|
-
#
|
1
|
+
# Change Log
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
|
3
|
+
## v0.1.2 / 2016-10-15
|
4
|
+
### Changed
|
5
|
+
- Upgraded color-sampler to v0.1.6
|
6
|
+
- trigger change event.
|
6
7
|
|
7
|
-
|
8
|
+
## v0.1.1 / 2016-05-10
|
9
|
+
### Changed
|
10
|
+
- Upgraded kolor-picker to v0.2.1
|
11
|
+
- Restructured helper and widget.
|
12
|
+
### Fixed
|
13
|
+
- missing value.
|
8
14
|
|
9
|
-
|
15
|
+
## v0.1.0 / 2016-04-19
|
16
|
+
### Added
|
17
|
+
- Created project
|
@@ -1,33 +1,33 @@
|
|
1
|
-
//= require kolor-picker/jqColorPicker.min
|
2
|
-
//= require kolor-picker/color-sampler
|
3
|
-
//= require kolor-picker/kolor-picker
|
4
|
-
|
5
|
-
(function ($) {
|
6
|
-
var colorPicker = $();
|
7
|
-
|
8
|
-
$(document).on('ready page:load', function () {
|
9
|
-
$('[data-widget-kolor-picker]').each(function () {
|
10
|
-
var element = $(this);
|
11
|
-
var options = element.data('widget-kolor-picker') || {};
|
12
|
-
options.onSelect = function (color) {
|
13
|
-
element.val(color);
|
14
|
-
};
|
15
|
-
element.addClass('kolor-picker-input')
|
16
|
-
.attr('autocomplete', 'off')
|
17
|
-
.kolorPicker(options)
|
18
|
-
.wrap('<span class="kolor-picker-wrapper" />');
|
19
|
-
});
|
20
|
-
});
|
21
|
-
|
22
|
-
$(document).on('page:before-unload', function() {
|
23
|
-
if (!colorPicker.length) {
|
24
|
-
colorPicker = $('.cp-color-picker');
|
25
|
-
}
|
26
|
-
});
|
27
|
-
|
28
|
-
$(document).on('page:load', function() {
|
29
|
-
if (colorPicker.length) {
|
30
|
-
$('body').append(colorPicker);
|
31
|
-
}
|
32
|
-
});
|
33
|
-
})(jQuery);
|
1
|
+
//= require kolor-picker/jqColorPicker.min
|
2
|
+
//= require kolor-picker/color-sampler
|
3
|
+
//= require kolor-picker/kolor-picker
|
4
|
+
|
5
|
+
(function ($) {
|
6
|
+
var colorPicker = $();
|
7
|
+
|
8
|
+
$(document).on('ready page:load', function () {
|
9
|
+
$('[data-widget-kolor-picker]').each(function () {
|
10
|
+
var element = $(this);
|
11
|
+
var options = element.data('widget-kolor-picker') || {};
|
12
|
+
options.onSelect = function (color) {
|
13
|
+
element.val(color).change();
|
14
|
+
};
|
15
|
+
element.addClass('kolor-picker-input')
|
16
|
+
.attr('autocomplete', 'off')
|
17
|
+
.kolorPicker(options)
|
18
|
+
.wrap('<span class="kolor-picker-wrapper" />');
|
19
|
+
});
|
20
|
+
});
|
21
|
+
|
22
|
+
$(document).on('page:before-unload', function() {
|
23
|
+
if (!colorPicker.length) {
|
24
|
+
colorPicker = $('.cp-color-picker');
|
25
|
+
}
|
26
|
+
});
|
27
|
+
|
28
|
+
$(document).on('page:load', function() {
|
29
|
+
if (colorPicker.length) {
|
30
|
+
$('body').append(colorPicker);
|
31
|
+
}
|
32
|
+
});
|
33
|
+
})(jQuery);
|
@@ -1,213 +1,219 @@
|
|
1
|
-
/*!
|
2
|
-
* [color-sampler]{@link https://github.com/emn178/color-sampler}
|
3
|
-
*
|
4
|
-
* @version 0.1.
|
5
|
-
* @author Chen, Yi-Cyuan [emn178@gmail.com]
|
6
|
-
* @copyright Chen, Yi-Cyuan 2015-2016
|
7
|
-
* @license MIT
|
8
|
-
*/
|
9
|
-
(function ($, window, document) {
|
10
|
-
'use strict';
|
11
|
-
|
12
|
-
var KEY = 'color-sampler';
|
13
|
-
var SELECTOR = ':' + KEY;
|
14
|
-
var INACCURACY = 5;
|
15
|
-
var init = false, preview, previewPixels = [], previewing = false, interval = 200,
|
16
|
-
timer, observations = $();
|
17
|
-
|
18
|
-
$.expr[':'][KEY] = function (element) {
|
19
|
-
return $(element).data(KEY) !== undefined;
|
20
|
-
};
|
21
|
-
|
22
|
-
function Sampler(canvas, options) {
|
23
|
-
this.canvas = $(canvas);
|
24
|
-
this.options = options || {};
|
25
|
-
this.enabled = true;
|
26
|
-
this.context = canvas.getContext("2d");
|
27
|
-
this.resize();
|
28
|
-
this.canvas.on('mousemove', this.onMousemove.bind(this));
|
29
|
-
this.canvas.on('mouseout', this.onMouseout.bind(this));
|
30
|
-
this.canvas.on('click', this.onClick.bind(this));
|
31
|
-
}
|
32
|
-
|
33
|
-
Sampler.prototype.resize = function () {
|
34
|
-
var canvas = this.canvas;
|
35
|
-
this.bounds = {
|
36
|
-
left: parseInt(canvas.css('padding-left')) || 0,
|
37
|
-
top: parseInt(canvas.css('padding-top')) || 0,
|
38
|
-
right: canvas.width(),
|
39
|
-
bottom: canvas.height()
|
40
|
-
};
|
41
|
-
};
|
42
|
-
|
43
|
-
Sampler.prototype.onMousemove = function (e) {
|
44
|
-
if (!this.enabled) {
|
45
|
-
return;
|
46
|
-
}
|
47
|
-
var canvas = this.canvas;
|
48
|
-
var bounds = this.bounds;
|
49
|
-
var x = e.offsetX - bounds.left;
|
50
|
-
var y = e.offsetY - bounds.top;
|
51
|
-
this.inRange = x
|
52
|
-
if (!this.inRange && (x < -INACCURACY || y < -INACCURACY || x >= bounds.right + INACCURACY || y >= bounds.bottom + INACCURACY)) {
|
53
|
-
hidePreview();
|
54
|
-
return;
|
55
|
-
}
|
56
|
-
preview.css({
|
57
|
-
left: (e.pageX + 5) + 'px',
|
58
|
-
top: (e.pageY + 5) + 'px'
|
59
|
-
});
|
60
|
-
var pixels = this.setupPreview(x, y);
|
61
|
-
showPreview();
|
62
|
-
this.color = previewPixels[60].css('background-color');
|
63
|
-
if ($.isFunction(this.options.onPreview)) {
|
64
|
-
this.options.onPreview.call(canvas, this.color);
|
65
|
-
}
|
66
|
-
this.canvas.trigger('sampler:preview', this.color);
|
67
|
-
};
|
68
|
-
|
69
|
-
Sampler.prototype.setupPreview = function (centralX, centralY) {
|
70
|
-
var startX = centralX - 5;
|
71
|
-
var startY = centralY - 5;
|
72
|
-
var data = this.context.getImageData(startX, startY, 11, 11).data;
|
73
|
-
for (var i = 0, j = 0; i < data.length; i += 4, ++j) {
|
74
|
-
var y = parseInt(j / 11) + startY;
|
75
|
-
var x = j % 11 + startX;
|
76
|
-
if (x
|
77
|
-
previewPixels[j].css('background-color', 'white');
|
78
|
-
} else {
|
79
|
-
var color =
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
this.
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
};
|
104
|
-
|
105
|
-
Sampler.prototype.
|
106
|
-
if (
|
107
|
-
|
108
|
-
}
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
}
|
125
|
-
|
126
|
-
function
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
1
|
+
/*!
|
2
|
+
* [color-sampler]{@link https://github.com/emn178/color-sampler}
|
3
|
+
*
|
4
|
+
* @version 0.1.6
|
5
|
+
* @author Chen, Yi-Cyuan [emn178@gmail.com]
|
6
|
+
* @copyright Chen, Yi-Cyuan 2015-2016
|
7
|
+
* @license MIT
|
8
|
+
*/
|
9
|
+
(function ($, window, document) {
|
10
|
+
'use strict';
|
11
|
+
|
12
|
+
var KEY = 'color-sampler';
|
13
|
+
var SELECTOR = ':' + KEY;
|
14
|
+
var INACCURACY = 5;
|
15
|
+
var init = false, preview, previewPixels = [], previewing = false, interval = 200,
|
16
|
+
timer, observations = $();
|
17
|
+
|
18
|
+
$.expr[':'][KEY] = function (element) {
|
19
|
+
return $(element).data(KEY) !== undefined;
|
20
|
+
};
|
21
|
+
|
22
|
+
function Sampler(canvas, options) {
|
23
|
+
this.canvas = $(canvas);
|
24
|
+
this.options = options || {};
|
25
|
+
this.enabled = true;
|
26
|
+
this.context = canvas.getContext("2d");
|
27
|
+
this.resize();
|
28
|
+
this.canvas.on('mousemove', this.onMousemove.bind(this));
|
29
|
+
this.canvas.on('mouseout', this.onMouseout.bind(this));
|
30
|
+
this.canvas.on('click', this.onClick.bind(this));
|
31
|
+
}
|
32
|
+
|
33
|
+
Sampler.prototype.resize = function () {
|
34
|
+
var canvas = this.canvas;
|
35
|
+
this.bounds = {
|
36
|
+
left: parseInt(canvas.css('padding-left')) || 0,
|
37
|
+
top: parseInt(canvas.css('padding-top')) || 0,
|
38
|
+
right: canvas.width(),
|
39
|
+
bottom: canvas.height()
|
40
|
+
};
|
41
|
+
};
|
42
|
+
|
43
|
+
Sampler.prototype.onMousemove = function (e) {
|
44
|
+
if (!this.enabled) {
|
45
|
+
return;
|
46
|
+
}
|
47
|
+
var canvas = this.canvas;
|
48
|
+
var bounds = this.bounds;
|
49
|
+
var x = e.offsetX - bounds.left;
|
50
|
+
var y = e.offsetY - bounds.top;
|
51
|
+
this.inRange = this.checkInRange(x, y);
|
52
|
+
if (!this.inRange && (x < -INACCURACY || y < -INACCURACY || x >= bounds.right + INACCURACY || y >= bounds.bottom + INACCURACY)) {
|
53
|
+
hidePreview();
|
54
|
+
return;
|
55
|
+
}
|
56
|
+
preview.css({
|
57
|
+
left: (e.pageX + 5) + 'px',
|
58
|
+
top: (e.pageY + 5) + 'px'
|
59
|
+
});
|
60
|
+
var pixels = this.setupPreview(x, y);
|
61
|
+
showPreview();
|
62
|
+
this.color = previewPixels[60].css('background-color');
|
63
|
+
if ($.isFunction(this.options.onPreview)) {
|
64
|
+
this.options.onPreview.call(canvas, this.color);
|
65
|
+
}
|
66
|
+
this.canvas.trigger('sampler:preview', this.color);
|
67
|
+
};
|
68
|
+
|
69
|
+
Sampler.prototype.setupPreview = function (centralX, centralY) {
|
70
|
+
var startX = centralX - 5;
|
71
|
+
var startY = centralY - 5;
|
72
|
+
var data = this.context.getImageData(startX, startY, 11, 11).data;
|
73
|
+
for (var i = 0, j = 0; i < data.length; i += 4, ++j) {
|
74
|
+
var y = parseInt(j / 11) + startY;
|
75
|
+
var x = j % 11 + startX;
|
76
|
+
if (!this.checkInRange(x, y)) {
|
77
|
+
previewPixels[j].css('background-color', 'white');
|
78
|
+
} else {
|
79
|
+
var color = Array.prototype.slice.call(data, i, i + 4);
|
80
|
+
color[3] = Math.min(color[3] / 100, 1);
|
81
|
+
color = 'rgba(' + color.join(',') + ')';
|
82
|
+
previewPixels[j].css('background-color', color);
|
83
|
+
}
|
84
|
+
}
|
85
|
+
};
|
86
|
+
|
87
|
+
Sampler.prototype.checkInRange = function (x, y) {
|
88
|
+
return x >= 0 && y >= 0 && x < this.bounds.right && y < this.bounds.bottom;
|
89
|
+
};
|
90
|
+
|
91
|
+
Sampler.prototype.onMouseout = function () {
|
92
|
+
hidePreview();
|
93
|
+
};
|
94
|
+
|
95
|
+
Sampler.prototype.onClick = function (e) {
|
96
|
+
if (!this.color || !this.enabled || !this.inRange) {
|
97
|
+
return;
|
98
|
+
}
|
99
|
+
if ($.isFunction(this.options.onSelect)) {
|
100
|
+
this.options.onSelect.call(this.canvas, this.color);
|
101
|
+
}
|
102
|
+
this.canvas.trigger('sampler:select', this.color);
|
103
|
+
};
|
104
|
+
|
105
|
+
Sampler.prototype.detect = function () {
|
106
|
+
if (this.canvas.width() != this.bounds.right || this.canvas.height() != this.bounds.bottom) {
|
107
|
+
this.resize();
|
108
|
+
}
|
109
|
+
};
|
110
|
+
|
111
|
+
Sampler.prototype.enable = function (enabled) {
|
112
|
+
if (enabled === undefined) {
|
113
|
+
enabled = true;
|
114
|
+
}
|
115
|
+
this.enabled = enabled;
|
116
|
+
};
|
117
|
+
|
118
|
+
Sampler.prototype.disable = function (disabled) {
|
119
|
+
if (disabled === undefined) {
|
120
|
+
disabled = true;
|
121
|
+
}
|
122
|
+
this.enabled = !disabled;
|
123
|
+
hidePreview();
|
124
|
+
};
|
125
|
+
|
126
|
+
function resize() {
|
127
|
+
$(SELECTOR).each(function () {
|
128
|
+
$(this).data(KEY).resize();
|
129
|
+
});
|
130
|
+
}
|
131
|
+
|
132
|
+
function createPreview() {
|
133
|
+
preview = $('<div class="color-sampler-preview"/>');
|
134
|
+
var table = $('<table/>');
|
135
|
+
preview.append(table);
|
136
|
+
for (var y = 0; y < 11; ++y) {
|
137
|
+
var tr = $('<tr>');
|
138
|
+
for (var x = 0; x < 11; ++x) {
|
139
|
+
var td = $('<td></td>').attr('x', x).attr('y', y);
|
140
|
+
previewPixels.push(td);
|
141
|
+
tr.append(td);
|
142
|
+
}
|
143
|
+
table.append(tr);
|
144
|
+
}
|
145
|
+
$('body').append(preview);
|
146
|
+
}
|
147
|
+
|
148
|
+
function showPreview() {
|
149
|
+
if (previewing) {
|
150
|
+
return;
|
151
|
+
}
|
152
|
+
previewing = true;
|
153
|
+
preview.addClass('active');
|
154
|
+
}
|
155
|
+
|
156
|
+
function hidePreview() {
|
157
|
+
if (!previewing) {
|
158
|
+
return;
|
159
|
+
}
|
160
|
+
previewing = false;
|
161
|
+
preview.removeClass('active');
|
162
|
+
}
|
163
|
+
|
164
|
+
function detect() {
|
165
|
+
observations = observations.filter(SELECTOR);
|
166
|
+
observations.each(function () {
|
167
|
+
$(this).data(KEY).detect();
|
168
|
+
});
|
169
|
+
if (observations.length === 0) {
|
170
|
+
timer = clearInterval(timer);
|
171
|
+
}
|
172
|
+
}
|
173
|
+
|
174
|
+
var PublicMethods = ['enable', 'disable', 'resize'];
|
175
|
+
$.fn.colorSampler = function (method, options) {
|
176
|
+
var sampler, isString = typeof (method) == 'string';
|
177
|
+
this.filter('canvas').each(function () {
|
178
|
+
if (isString) {
|
179
|
+
if ($.inArray(method, PublicMethods) != -1) {
|
180
|
+
sampler = $(this).data(KEY);
|
181
|
+
if (sampler) {
|
182
|
+
sampler[method].apply(sampler, options);
|
183
|
+
}
|
184
|
+
}
|
185
|
+
} else {
|
186
|
+
options = method;
|
187
|
+
sampler = new Sampler(this, options);
|
188
|
+
$(this).data(KEY, sampler);
|
189
|
+
|
190
|
+
if (!init) {
|
191
|
+
init = true;
|
192
|
+
createPreview();
|
193
|
+
$(document).ready(function () {
|
194
|
+
$(window).bind('resize', resize);
|
195
|
+
});
|
196
|
+
}
|
197
|
+
|
198
|
+
observations = observations.add(this);
|
199
|
+
if (interval && !timer) {
|
200
|
+
timer = setInterval(detect, interval);
|
201
|
+
}
|
202
|
+
}
|
203
|
+
});
|
204
|
+
return this;
|
205
|
+
};
|
206
|
+
|
207
|
+
$.colorSamper = {};
|
208
|
+
|
209
|
+
$.colorSamper.setInterval = function (v) {
|
210
|
+
if (v == interval || !$.isNumeric(v) || v < 0) {
|
211
|
+
return;
|
212
|
+
}
|
213
|
+
interval = v;
|
214
|
+
timer = clearInterval(timer);
|
215
|
+
if (interval > 0) {
|
216
|
+
timer = setInterval(detect, interval);
|
217
|
+
}
|
218
|
+
};
|
219
|
+
})(jQuery, window, document);
|
@@ -1,185 +1,185 @@
|
|
1
|
-
/**
|
2
|
-
* [kolor-picker]{@link https://github.com/emn178/kolor-picker}
|
3
|
-
*
|
4
|
-
* @version 0.2.1
|
5
|
-
* @author Yi-Cyuan Chen [emn178@gmail.com]
|
6
|
-
* @copyright Yi-Cyuan Chen 2015-2016
|
7
|
-
* @license MIT
|
8
|
-
*/
|
9
|
-
(function ($) {
|
10
|
-
'use strict';
|
11
|
-
|
12
|
-
var KEY = 'kolor-picker';
|
13
|
-
var wrapper;
|
14
|
-
|
15
|
-
function Wrapper(element, colorPicker) {
|
16
|
-
this.element = element;
|
17
|
-
this.colorPicker = colorPicker;
|
18
|
-
this.previewElement = $('<div class="kolor-picker"><div class="sampler"></div><div class="preview-block"><input type="text"/><div class="preview-wrapper"><div class="preview" /></div></div></div>');
|
19
|
-
this.element.append(this.previewElement);
|
20
|
-
|
21
|
-
var elements = {
|
22
|
-
preview: this.previewElement.find('.preview'),
|
23
|
-
input: this.previewElement.find('input'),
|
24
|
-
sampler: this.previewElement.find('.sampler'),
|
25
|
-
alpha: this.element.find('.cp-alpha')
|
26
|
-
};
|
27
|
-
this.elements = elements;
|
28
|
-
elements.sampler.click(this.enableSampler.bind(this));
|
29
|
-
|
30
|
-
this.sampling = false;
|
31
|
-
this.lastToggled = false;
|
32
|
-
}
|
33
|
-
|
34
|
-
Wrapper.prototype.enableSampler = function () {
|
35
|
-
if (!this.kolorPicker.canvas) {
|
36
|
-
return;
|
37
|
-
}
|
38
|
-
this.kolorPicker.canvas.colorSampler('enable');
|
39
|
-
this.sampling = true;
|
40
|
-
this.colorPicker.toggle(false);
|
41
|
-
};
|
42
|
-
|
43
|
-
Wrapper.prototype.setKolorPicker = function (kolorPicker) {
|
44
|
-
this.kolorPicker = kolorPicker;
|
45
|
-
this.element.attr('data-theme', kolorPicker.theme);
|
46
|
-
this.elements.sampler.toggle(!!kolorPicker.canvas);
|
47
|
-
this.elements.alpha.toggle(kolorPicker.options.opacity !== false);
|
48
|
-
if (kolorPicker.options.doRender === undefined) {
|
49
|
-
this.colorPicker.color.options.doRender = true;
|
50
|
-
} else {
|
51
|
-
this.colorPicker.color.options.doRender = kolorPicker.options.doRender;
|
52
|
-
}
|
53
|
-
};
|
54
|
-
|
55
|
-
Wrapper.prototype.getColor = function () {
|
56
|
-
var rgb = this.colorPicker.color.colors.rgb;
|
57
|
-
return 'rgba(' + [parseInt(rgb.r * 255), parseInt(rgb.g * 255), parseInt(rgb.b * 255), this.colorPicker.color.colors.alpha.toFixed(2)].join(',') + ')';
|
58
|
-
};
|
59
|
-
|
60
|
-
Wrapper.prototype.updateColor = function () {
|
61
|
-
var color = this.getColor();
|
62
|
-
this.elements.preview.css('background-color', color);
|
63
|
-
this.elements.input.val(color);
|
64
|
-
this.kolorPicker.changeColor(color);
|
65
|
-
};
|
66
|
-
|
67
|
-
Wrapper.prototype.render = function (toggled) {
|
68
|
-
if (toggled === undefined) {
|
69
|
-
this.updateColor();
|
70
|
-
} else if (this.lastToggled === toggled) {
|
71
|
-
return;
|
72
|
-
}
|
73
|
-
this.lastToggled = toggled;
|
74
|
-
if (toggled === false) {
|
75
|
-
if (!this.sampling) {
|
76
|
-
var color = this.getColor();
|
77
|
-
this.kolorPicker.selectColor(color);
|
78
|
-
}
|
79
|
-
} else {
|
80
|
-
this.updateColor();
|
81
|
-
}
|
82
|
-
};
|
83
|
-
|
84
|
-
function KolorPicker(element, options) {
|
85
|
-
this.element = element;
|
86
|
-
this.options = options || {};
|
87
|
-
this.canvas = this.options.canvas;
|
88
|
-
this.theme = this.options.theme || $.kolorPicker.theme;
|
89
|
-
this.color = this.element.css('background-color');
|
90
|
-
|
91
|
-
if (this.canvas) {
|
92
|
-
this.canvas = $(this.canvas);
|
93
|
-
this.canvas.colorSampler().colorSampler('disable')
|
94
|
-
.bind('sampler:preview', this.onSamplerPreview.bind(this))
|
95
|
-
.bind('sampler:select', this.onSamplerSelect.bind(this));
|
96
|
-
}
|
97
|
-
}
|
98
|
-
|
99
|
-
KolorPicker.prototype.onSamplerSelect = function (e, color) {
|
100
|
-
if (wrapper.kolorPicker != this) {
|
101
|
-
return;
|
102
|
-
}
|
103
|
-
wrapper.sampling = false;
|
104
|
-
this.canvas.colorSampler('disable');
|
105
|
-
this.setColor(color);
|
106
|
-
color = wrapper.getColor();
|
107
|
-
this.selectColor(color);
|
108
|
-
};
|
109
|
-
|
110
|
-
KolorPicker.prototype.onSamplerPreview = function (e, color) {
|
111
|
-
if (wrapper.kolorPicker != this) {
|
112
|
-
return;
|
113
|
-
}
|
114
|
-
this.element.css('background-color', color);
|
115
|
-
color = wrapper.getColor();
|
116
|
-
this.changeColor(color);
|
117
|
-
};
|
118
|
-
|
119
|
-
KolorPicker.prototype.selectColor = function (color) {
|
120
|
-
this.color = color;
|
121
|
-
if ($.isFunction(this.options.onSelect)) {
|
122
|
-
this.options.onSelect.call(this.element, color);
|
123
|
-
}
|
124
|
-
this.element.trigger('kolorPicker:select', color)
|
125
|
-
};
|
126
|
-
|
127
|
-
KolorPicker.prototype.changeColor = function (color) {
|
128
|
-
if ($.isFunction(this.options.onChange)) {
|
129
|
-
this.options.onChange.call(this.element, color);
|
130
|
-
}
|
131
|
-
this.element.trigger('kolorPicker:change', color)
|
132
|
-
};
|
133
|
-
|
134
|
-
KolorPicker.prototype.setColor = function (color) {
|
135
|
-
this.color = color;
|
136
|
-
this.element.css('background-color', color);
|
137
|
-
if (wrapper) {
|
138
|
-
wrapper.colorPicker.color.setColor(color);
|
139
|
-
wrapper.colorPicker.render();
|
140
|
-
}
|
141
|
-
};
|
142
|
-
|
143
|
-
KolorPicker.prototype.getColor = function () {
|
144
|
-
return this.color;
|
145
|
-
};
|
146
|
-
|
147
|
-
var KolorPickerOptions = {
|
148
|
-
buildCallback: function (element) {
|
149
|
-
wrapper = new Wrapper(element, this);
|
150
|
-
},
|
151
|
-
|
152
|
-
renderCallback: function (element, toggled) {
|
153
|
-
wrapper.setKolorPicker($(element).data(KEY));
|
154
|
-
wrapper.render(toggled);
|
155
|
-
}
|
156
|
-
};
|
157
|
-
|
158
|
-
var PublicMethods = ['setColor', 'getColor'];
|
159
|
-
$.fn.kolorPicker = function (options) {
|
160
|
-
if (typeof (options) == 'string') {
|
161
|
-
if ($.inArray(options, PublicMethods) != -1) {
|
162
|
-
var args = Array.prototype.splice.call(arguments, 1);
|
163
|
-
var kolorPicker = $(this).data(KEY);
|
164
|
-
if (kolorPicker) {
|
165
|
-
return kolorPicker[options].apply(kolorPicker, args);
|
166
|
-
}
|
167
|
-
}
|
168
|
-
} else {
|
169
|
-
this.each(function () {
|
170
|
-
var element = $(this);
|
171
|
-
if (!element.data(KEY)) {
|
172
|
-
return element.data(KEY, new KolorPicker(element, options))
|
173
|
-
.colorPicker($.extend({ cssAddon: $.kolorPicker.css }, options, KolorPickerOptions));
|
174
|
-
}
|
175
|
-
});
|
176
|
-
}
|
177
|
-
return this;
|
178
|
-
};
|
179
|
-
|
180
|
-
$.kolorPicker = {
|
181
|
-
theme: ''
|
182
|
-
};
|
183
|
-
})(jQuery);
|
184
|
-
|
185
|
-
$.kolorPicker.css="[data-theme=light].cp-color-picker{background-color:#fff}[data-theme=light] .kolor-picker .sampler{border-color:#ebebeb;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAgNJREFUWAntlztOw0AURWPRQEPFAgxsBIkGUbABdoBYARsIEhUSDQ0dG0A07AAKGjoa5FAg0VIB4neulBdNRmM7CfHYkeZKV/O15/hl/Mbp9ZJSBFIEUgS6HIFV4Pr4Dt/jU7yGO6kcqif86/mFduegc6AK7MNaW5GOrowVlwOr5vQV2OBCpbZHVO2y2iv+wmd4CUs5LnAI0u3Tno6mPVb6xC7AJe1NXHj97hy33mdeFO2wig9rIO+MWb2q1Iuo7BFFA1apgqkbK7g+x1Gkl+wN10GVjRdcm+NK2ctQOWnKwe0p52u6fpktXODoOmfFsiiG+gvm57gVbbCqohUCC/XpRVT2aEWCfcYCU/69HtZDoG6fUl4TW5PblmudIYusYPeHU08oXbiyug6XaCqDNYBJoPWQoWPc7jG3sg7WFqrbHjrGM5vcVDkprLaHIli2HT4Y07dHo5oFdgCRn/IEq2+PRjUrrK6TjrBORD2Avj0a1X9hDS6zSpPlvGCbZBzdO8GOQjHnykJFdoWHf8TKn+5x68dEefZ7OG9AqYdsRcesKtgfbN8GPoh7KLQKK7AHLOALNQLqFKz47O/O4SLAivEWK8I3ajjqXGSN7YCKgA1akdb20J5WX+t7FoYxZbSusEG7pbJHa9lgjNJrCFqR1vbQntaLqOyhlJeUIpAikCLQwQj8Ad75Juue3l4FAAAAAElFTkSuQmCC)}[data-theme=light] .kolor-picker input{border-color:#ebebeb;color:#85888f}[data-theme=light] .kolor-picker .preview{border-color:#ebebeb}.cp-color-picker{background-color:#2f3239;border-radius:3px}.cp-xy-slider{width:240px;height:178px}.cp-xy-cursor{height:15px;width:15px;border:2px solid #fff}.cp-z-slider{height:178px}.cp-z-cursor{border:0;background-color:#fff;height:8px;border-radius:3px}.kolor-picker .sampler,.kolor-picker input{border:2px solid #555b60;vertical-align:middle}.kolor-picker{clear:both;height:35px;margin:10px 0;padding-top:5px}.kolor-picker .sampler{display:inline-block;width:26px;height:26px;border-radius:3px;cursor:pointer;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAhZJREFUWAntl7FOwlAUhkEXWZzcBXkZ4sAL8AaGF9AXwMSJxMWFzRcwLmyOOrC4uRh1MLoaBzVq/f6mxzQX2oKWtsZ7kp/b3nt7z9ef01uo1Xx4B7wD3gHvwL91IAiCdTRAF2iChmijkoYA1kTXyI17OqoFDZBgb1zS2PmwcJdJXkdrbmL6smDFPXGvs/MVO8izJeE26z2gZ44P0arWp23SnKFNlBbvaYO5jgHVRW8oHsectFFaGcTnD3KFSlqMjB3kwhrIix1ktHoQ15Ny5NpPotsMmKxhfQPNXKGSFiORHrKnLKKU8eJg7SaA2U0BShsqHjYGfZRGNmOsVNgtgBapYz2IbbvZQlsSC/YOKd7RaXiU/aEtL9ynCwMmYQuZs4LtKTntAZonDkuHNQBo54HWTU69xm2N3FqSzHTWTcC8rPJ4ZE7dvS7X8wVge8yVg0nxyoB+eywvSDCvs3FY1bi75Qm2uzxSVv4FbEtgXL+H9EbUDXQqDWtwgC63XiNnfloGobMGW0iLIx52KU7/NWcbAF8hxffr1nWGMW1dH5pE6MkvvmYFReJ9ERCfKPxtkABrL4XyYCPgyxA3CEYuaDTuvhTKcdbggLW/O33rs1aOo2o4G4M6jxweW5/aSsJGYDsRsJox6qMRUk0ryq3ZuIsRcB2okxBt+kO7R7k16wLHoOW0ykM1rQdRu0dj1nzf5x3wDmQ78AUqu6QCF8YEagAAAABJRU5ErkJggg==);background-size:22px;background-repeat:no-repeat;background-position:center;opacity:.5}.kolor-picker .sampler:hover{opacity:1}.kolor-picker .preview-block{display:inline-block;vertical-align:middle;float:right}.kolor-picker input{height:26px;width:150px;background-color:transparent;padding:0;margin:0 10px 0 0;border-radius:3px;text-align:center;color:#fff;font-size:14px;font-family:SourceSansPro-Regular}.kolor-picker .preview-wrapper{display:inline-block;width:31px;height:26px;border:2px solid #555b60;border-radius:3px;vertical-align:middle;background-image:url(data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7)}.kolor-picker .preview{height:100%}";
|
1
|
+
/**
|
2
|
+
* [kolor-picker]{@link https://github.com/emn178/kolor-picker}
|
3
|
+
*
|
4
|
+
* @version 0.2.1
|
5
|
+
* @author Yi-Cyuan Chen [emn178@gmail.com]
|
6
|
+
* @copyright Yi-Cyuan Chen 2015-2016
|
7
|
+
* @license MIT
|
8
|
+
*/
|
9
|
+
(function ($) {
|
10
|
+
'use strict';
|
11
|
+
|
12
|
+
var KEY = 'kolor-picker';
|
13
|
+
var wrapper;
|
14
|
+
|
15
|
+
function Wrapper(element, colorPicker) {
|
16
|
+
this.element = element;
|
17
|
+
this.colorPicker = colorPicker;
|
18
|
+
this.previewElement = $('<div class="kolor-picker"><div class="sampler"></div><div class="preview-block"><input type="text"/><div class="preview-wrapper"><div class="preview" /></div></div></div>');
|
19
|
+
this.element.append(this.previewElement);
|
20
|
+
|
21
|
+
var elements = {
|
22
|
+
preview: this.previewElement.find('.preview'),
|
23
|
+
input: this.previewElement.find('input'),
|
24
|
+
sampler: this.previewElement.find('.sampler'),
|
25
|
+
alpha: this.element.find('.cp-alpha')
|
26
|
+
};
|
27
|
+
this.elements = elements;
|
28
|
+
elements.sampler.click(this.enableSampler.bind(this));
|
29
|
+
|
30
|
+
this.sampling = false;
|
31
|
+
this.lastToggled = false;
|
32
|
+
}
|
33
|
+
|
34
|
+
Wrapper.prototype.enableSampler = function () {
|
35
|
+
if (!this.kolorPicker.canvas) {
|
36
|
+
return;
|
37
|
+
}
|
38
|
+
this.kolorPicker.canvas.colorSampler('enable');
|
39
|
+
this.sampling = true;
|
40
|
+
this.colorPicker.toggle(false);
|
41
|
+
};
|
42
|
+
|
43
|
+
Wrapper.prototype.setKolorPicker = function (kolorPicker) {
|
44
|
+
this.kolorPicker = kolorPicker;
|
45
|
+
this.element.attr('data-theme', kolorPicker.theme);
|
46
|
+
this.elements.sampler.toggle(!!kolorPicker.canvas);
|
47
|
+
this.elements.alpha.toggle(kolorPicker.options.opacity !== false);
|
48
|
+
if (kolorPicker.options.doRender === undefined) {
|
49
|
+
this.colorPicker.color.options.doRender = true;
|
50
|
+
} else {
|
51
|
+
this.colorPicker.color.options.doRender = kolorPicker.options.doRender;
|
52
|
+
}
|
53
|
+
};
|
54
|
+
|
55
|
+
Wrapper.prototype.getColor = function () {
|
56
|
+
var rgb = this.colorPicker.color.colors.rgb;
|
57
|
+
return 'rgba(' + [parseInt(rgb.r * 255), parseInt(rgb.g * 255), parseInt(rgb.b * 255), this.colorPicker.color.colors.alpha.toFixed(2)].join(',') + ')';
|
58
|
+
};
|
59
|
+
|
60
|
+
Wrapper.prototype.updateColor = function () {
|
61
|
+
var color = this.getColor();
|
62
|
+
this.elements.preview.css('background-color', color);
|
63
|
+
this.elements.input.val(color);
|
64
|
+
this.kolorPicker.changeColor(color);
|
65
|
+
};
|
66
|
+
|
67
|
+
Wrapper.prototype.render = function (toggled) {
|
68
|
+
if (toggled === undefined) {
|
69
|
+
this.updateColor();
|
70
|
+
} else if (this.lastToggled === toggled) {
|
71
|
+
return;
|
72
|
+
}
|
73
|
+
this.lastToggled = toggled;
|
74
|
+
if (toggled === false) {
|
75
|
+
if (!this.sampling) {
|
76
|
+
var color = this.getColor();
|
77
|
+
this.kolorPicker.selectColor(color);
|
78
|
+
}
|
79
|
+
} else {
|
80
|
+
this.updateColor();
|
81
|
+
}
|
82
|
+
};
|
83
|
+
|
84
|
+
function KolorPicker(element, options) {
|
85
|
+
this.element = element;
|
86
|
+
this.options = options || {};
|
87
|
+
this.canvas = this.options.canvas;
|
88
|
+
this.theme = this.options.theme || $.kolorPicker.theme;
|
89
|
+
this.color = this.element.css('background-color');
|
90
|
+
|
91
|
+
if (this.canvas) {
|
92
|
+
this.canvas = $(this.canvas);
|
93
|
+
this.canvas.colorSampler().colorSampler('disable')
|
94
|
+
.bind('sampler:preview', this.onSamplerPreview.bind(this))
|
95
|
+
.bind('sampler:select', this.onSamplerSelect.bind(this));
|
96
|
+
}
|
97
|
+
}
|
98
|
+
|
99
|
+
KolorPicker.prototype.onSamplerSelect = function (e, color) {
|
100
|
+
if (wrapper.kolorPicker != this) {
|
101
|
+
return;
|
102
|
+
}
|
103
|
+
wrapper.sampling = false;
|
104
|
+
this.canvas.colorSampler('disable');
|
105
|
+
this.setColor(color);
|
106
|
+
color = wrapper.getColor();
|
107
|
+
this.selectColor(color);
|
108
|
+
};
|
109
|
+
|
110
|
+
KolorPicker.prototype.onSamplerPreview = function (e, color) {
|
111
|
+
if (wrapper.kolorPicker != this) {
|
112
|
+
return;
|
113
|
+
}
|
114
|
+
this.element.css('background-color', color);
|
115
|
+
color = wrapper.getColor();
|
116
|
+
this.changeColor(color);
|
117
|
+
};
|
118
|
+
|
119
|
+
KolorPicker.prototype.selectColor = function (color) {
|
120
|
+
this.color = color;
|
121
|
+
if ($.isFunction(this.options.onSelect)) {
|
122
|
+
this.options.onSelect.call(this.element, color);
|
123
|
+
}
|
124
|
+
this.element.trigger('kolorPicker:select', color)
|
125
|
+
};
|
126
|
+
|
127
|
+
KolorPicker.prototype.changeColor = function (color) {
|
128
|
+
if ($.isFunction(this.options.onChange)) {
|
129
|
+
this.options.onChange.call(this.element, color);
|
130
|
+
}
|
131
|
+
this.element.trigger('kolorPicker:change', color)
|
132
|
+
};
|
133
|
+
|
134
|
+
KolorPicker.prototype.setColor = function (color) {
|
135
|
+
this.color = color;
|
136
|
+
this.element.css('background-color', color);
|
137
|
+
if (wrapper) {
|
138
|
+
wrapper.colorPicker.color.setColor(color);
|
139
|
+
wrapper.colorPicker.render();
|
140
|
+
}
|
141
|
+
};
|
142
|
+
|
143
|
+
KolorPicker.prototype.getColor = function () {
|
144
|
+
return this.color;
|
145
|
+
};
|
146
|
+
|
147
|
+
var KolorPickerOptions = {
|
148
|
+
buildCallback: function (element) {
|
149
|
+
wrapper = new Wrapper(element, this);
|
150
|
+
},
|
151
|
+
|
152
|
+
renderCallback: function (element, toggled) {
|
153
|
+
wrapper.setKolorPicker($(element).data(KEY));
|
154
|
+
wrapper.render(toggled);
|
155
|
+
}
|
156
|
+
};
|
157
|
+
|
158
|
+
var PublicMethods = ['setColor', 'getColor'];
|
159
|
+
$.fn.kolorPicker = function (options) {
|
160
|
+
if (typeof (options) == 'string') {
|
161
|
+
if ($.inArray(options, PublicMethods) != -1) {
|
162
|
+
var args = Array.prototype.splice.call(arguments, 1);
|
163
|
+
var kolorPicker = $(this).data(KEY);
|
164
|
+
if (kolorPicker) {
|
165
|
+
return kolorPicker[options].apply(kolorPicker, args);
|
166
|
+
}
|
167
|
+
}
|
168
|
+
} else {
|
169
|
+
this.each(function () {
|
170
|
+
var element = $(this);
|
171
|
+
if (!element.data(KEY)) {
|
172
|
+
return element.data(KEY, new KolorPicker(element, options))
|
173
|
+
.colorPicker($.extend({ cssAddon: $.kolorPicker.css }, options, KolorPickerOptions));
|
174
|
+
}
|
175
|
+
});
|
176
|
+
}
|
177
|
+
return this;
|
178
|
+
};
|
179
|
+
|
180
|
+
$.kolorPicker = {
|
181
|
+
theme: ''
|
182
|
+
};
|
183
|
+
})(jQuery);
|
184
|
+
|
185
|
+
$.kolorPicker.css="[data-theme=light].cp-color-picker{background-color:#fff}[data-theme=light] .kolor-picker .sampler{border-color:#ebebeb;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAgNJREFUWAntlztOw0AURWPRQEPFAgxsBIkGUbABdoBYARsIEhUSDQ0dG0A07AAKGjoa5FAg0VIB4neulBdNRmM7CfHYkeZKV/O15/hl/Mbp9ZJSBFIEUgS6HIFV4Pr4Dt/jU7yGO6kcqif86/mFduegc6AK7MNaW5GOrowVlwOr5vQV2OBCpbZHVO2y2iv+wmd4CUs5LnAI0u3Tno6mPVb6xC7AJe1NXHj97hy33mdeFO2wig9rIO+MWb2q1Iuo7BFFA1apgqkbK7g+x1Gkl+wN10GVjRdcm+NK2ctQOWnKwe0p52u6fpktXODoOmfFsiiG+gvm57gVbbCqohUCC/XpRVT2aEWCfcYCU/69HtZDoG6fUl4TW5PblmudIYusYPeHU08oXbiyug6XaCqDNYBJoPWQoWPc7jG3sg7WFqrbHjrGM5vcVDkprLaHIli2HT4Y07dHo5oFdgCRn/IEq2+PRjUrrK6TjrBORD2Avj0a1X9hDS6zSpPlvGCbZBzdO8GOQjHnykJFdoWHf8TKn+5x68dEefZ7OG9AqYdsRcesKtgfbN8GPoh7KLQKK7AHLOALNQLqFKz47O/O4SLAivEWK8I3ajjqXGSN7YCKgA1akdb20J5WX+t7FoYxZbSusEG7pbJHa9lgjNJrCFqR1vbQntaLqOyhlJeUIpAikCLQwQj8Ad75Juue3l4FAAAAAElFTkSuQmCC)}[data-theme=light] .kolor-picker input{border-color:#ebebeb;color:#85888f}[data-theme=light] .kolor-picker .preview{border-color:#ebebeb}.cp-color-picker{background-color:#2f3239;border-radius:3px}.cp-xy-slider{width:240px;height:178px}.cp-xy-cursor{height:15px;width:15px;border:2px solid #fff}.cp-z-slider{height:178px}.cp-z-cursor{border:0;background-color:#fff;height:8px;border-radius:3px}.kolor-picker .sampler,.kolor-picker input{border:2px solid #555b60;vertical-align:middle}.kolor-picker{clear:both;height:35px;margin:10px 0;padding-top:5px}.kolor-picker .sampler{display:inline-block;width:26px;height:26px;border-radius:3px;cursor:pointer;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAhZJREFUWAntl7FOwlAUhkEXWZzcBXkZ4sAL8AaGF9AXwMSJxMWFzRcwLmyOOrC4uRh1MLoaBzVq/f6mxzQX2oKWtsZ7kp/b3nt7z9ef01uo1Xx4B7wD3gHvwL91IAiCdTRAF2iChmijkoYA1kTXyI17OqoFDZBgb1zS2PmwcJdJXkdrbmL6smDFPXGvs/MVO8izJeE26z2gZ44P0arWp23SnKFNlBbvaYO5jgHVRW8oHsectFFaGcTnD3KFSlqMjB3kwhrIix1ktHoQ15Ny5NpPotsMmKxhfQPNXKGSFiORHrKnLKKU8eJg7SaA2U0BShsqHjYGfZRGNmOsVNgtgBapYz2IbbvZQlsSC/YOKd7RaXiU/aEtL9ynCwMmYQuZs4LtKTntAZonDkuHNQBo54HWTU69xm2N3FqSzHTWTcC8rPJ4ZE7dvS7X8wVge8yVg0nxyoB+eywvSDCvs3FY1bi75Qm2uzxSVv4FbEtgXL+H9EbUDXQqDWtwgC63XiNnfloGobMGW0iLIx52KU7/NWcbAF8hxffr1nWGMW1dH5pE6MkvvmYFReJ9ERCfKPxtkABrL4XyYCPgyxA3CEYuaDTuvhTKcdbggLW/O33rs1aOo2o4G4M6jxweW5/aSsJGYDsRsJox6qMRUk0ryq3ZuIsRcB2okxBt+kO7R7k16wLHoOW0ykM1rQdRu0dj1nzf5x3wDmQ78AUqu6QCF8YEagAAAABJRU5ErkJggg==);background-size:22px;background-repeat:no-repeat;background-position:center;opacity:.5}.kolor-picker .sampler:hover{opacity:1}.kolor-picker .preview-block{display:inline-block;vertical-align:middle;float:right}.kolor-picker input{height:26px;width:150px;background-color:transparent;padding:0;margin:0 10px 0 0;border-radius:3px;text-align:center;color:#fff;font-size:14px;font-family:SourceSansPro-Regular}.kolor-picker .preview-wrapper{display:inline-block;width:31px;height:26px;border:2px solid #555b60;border-radius:3px;vertical-align:middle;background-image:url(data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7)}.kolor-picker .preview{height:100%}";
|
@@ -1,54 +1,57 @@
|
|
1
|
-
/*!
|
2
|
-
* [color-sampler]{@link https://github.com/emn178/color-sampler}
|
3
|
-
*
|
4
|
-
* @version 0.1.5
|
5
|
-
* @author Chen, Yi-Cyuan [emn178@gmail.com]
|
6
|
-
* @copyright Chen, Yi-Cyuan 2015-2016
|
7
|
-
* @license MIT
|
8
|
-
*/
|
9
|
-
.color-sampler-preview {
|
10
|
-
position: absolute;
|
11
|
-
z-index: 100;
|
12
|
-
display: none;
|
13
|
-
width: 110px;
|
14
|
-
height: 110px;
|
15
|
-
border: 1px solid;
|
16
|
-
border-radius: 50%;
|
17
|
-
overflow: hidden;
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
1
|
+
/*!
|
2
|
+
* [color-sampler]{@link https://github.com/emn178/color-sampler}
|
3
|
+
*
|
4
|
+
* @version 0.1.5
|
5
|
+
* @author Chen, Yi-Cyuan [emn178@gmail.com]
|
6
|
+
* @copyright Chen, Yi-Cyuan 2015-2016
|
7
|
+
* @license MIT
|
8
|
+
*/
|
9
|
+
.color-sampler-preview {
|
10
|
+
position: absolute;
|
11
|
+
z-index: 100;
|
12
|
+
display: none;
|
13
|
+
width: 110px;
|
14
|
+
height: 110px;
|
15
|
+
border: 1px solid;
|
16
|
+
border-radius: 50%;
|
17
|
+
overflow: hidden;
|
18
|
+
background-color: white;
|
19
|
+
background-image: url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
|
20
|
+
background-size: 6px;
|
21
|
+
}
|
22
|
+
|
23
|
+
.color-sampler-preview.active {
|
24
|
+
display: block;
|
25
|
+
}
|
26
|
+
|
27
|
+
.color-sampler-preview table {
|
28
|
+
border-spacing: 0;
|
29
|
+
}
|
30
|
+
|
31
|
+
.color-sampler-preview td {
|
32
|
+
border: 1px solid gray;
|
33
|
+
height: 8px;
|
34
|
+
width: 8px;
|
35
|
+
background-color: #BBB4B4;
|
36
|
+
padding: 0;
|
37
|
+
}
|
38
|
+
|
39
|
+
.color-sampler-preview td[x="5"][y="5"] {
|
40
|
+
border-color: red;
|
41
|
+
}
|
42
|
+
|
43
|
+
.color-sampler-preview td[x="5"][y="4"] {
|
44
|
+
border-bottom-color: red;
|
45
|
+
}
|
46
|
+
|
47
|
+
.color-sampler-preview td[x="5"][y="6"] {
|
48
|
+
border-top-color: red;
|
49
|
+
}
|
50
|
+
|
51
|
+
.color-sampler-preview td[x="4"][y="5"] {
|
52
|
+
border-right-color: red;
|
53
|
+
}
|
54
|
+
|
55
|
+
.color-sampler-preview td[x="6"][y="5"] {
|
56
|
+
border-left-color: red;
|
57
|
+
}
|
data/lib/kolor-picker/engine.rb
CHANGED
@@ -1,11 +1,11 @@
|
|
1
|
-
if defined?(::Rails::Engine)
|
2
|
-
module KolorPicker
|
3
|
-
class Engine < ::Rails::Engine
|
4
|
-
initializer "kolor-picker" do
|
5
|
-
ActiveSupport.on_load(:action_view) do
|
6
|
-
include KolorPicker::Helper
|
7
|
-
end
|
8
|
-
end
|
9
|
-
end
|
10
|
-
end
|
11
|
-
end
|
1
|
+
if defined?(::Rails::Engine)
|
2
|
+
module KolorPicker
|
3
|
+
class Engine < ::Rails::Engine
|
4
|
+
initializer "kolor-picker" do
|
5
|
+
ActiveSupport.on_load(:action_view) do
|
6
|
+
include KolorPicker::Helper
|
7
|
+
end
|
8
|
+
end
|
9
|
+
end
|
10
|
+
end
|
11
|
+
end
|
data/lib/kolor-picker/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: kolor-picker
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Chen, Yi-Cyuan
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-
|
11
|
+
date: 2016-10-15 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|