dash_creator 0.1.2
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.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +170 -0
- data/Rakefile +36 -0
- data/app/assets/config/dash_creator_manifest.js +2 -0
- data/app/assets/javascripts/dash_creator/application.js +24 -0
- data/app/assets/javascripts/dash_creator/chart.js +2 -0
- data/app/assets/javascripts/dash_creator/dashboard.js +2 -0
- data/app/assets/javascripts/dash_creator/dashboard_object.js +2 -0
- data/app/assets/javascripts/dash_creator/filter.js +2 -0
- data/app/assets/javascripts/dash_creator/libs/Chart.js +12269 -0
- data/app/assets/javascripts/dash_creator/libs/bootstrap.js +3535 -0
- data/app/assets/javascripts/dash_creator/libs/chartCreator.js +1582 -0
- data/app/assets/javascripts/dash_creator/libs/dashboardCreator.js +531 -0
- data/app/assets/javascripts/dash_creator/libs/daterangepicker.js +1626 -0
- data/app/assets/javascripts/dash_creator/libs/filterCreator.js +733 -0
- data/app/assets/javascripts/dash_creator/libs/jquery-ui.js +18706 -0
- data/app/assets/javascripts/dash_creator/libs/jquery.minicolors.js +1108 -0
- data/app/assets/javascripts/dash_creator/libs/moment.js +4301 -0
- data/app/assets/javascripts/dash_creator/libs/tether.js +1811 -0
- data/app/assets/javascripts/dash_creator/user.js +2 -0
- data/app/assets/stylesheets/dash_creator/application.css +16 -0
- data/app/assets/stylesheets/dash_creator/chart.css +4 -0
- data/app/assets/stylesheets/dash_creator/dashboard.css +4 -0
- data/app/assets/stylesheets/dash_creator/dashboard_object.css +4 -0
- data/app/assets/stylesheets/dash_creator/filter.css +4 -0
- data/app/assets/stylesheets/dash_creator/fonts/FontAwesome.otf +0 -0
- data/app/assets/stylesheets/dash_creator/fonts/fontawesome-webfont.eot +0 -0
- data/app/assets/stylesheets/dash_creator/fonts/fontawesome-webfont.svg +2671 -0
- data/app/assets/stylesheets/dash_creator/fonts/fontawesome-webfont.ttf +0 -0
- data/app/assets/stylesheets/dash_creator/fonts/fontawesome-webfont.woff +0 -0
- data/app/assets/stylesheets/dash_creator/fonts/fontawesome-webfont.woff2 +0 -0
- data/app/assets/stylesheets/dash_creator/libs/font-awesome.css +2199 -0
- data/app/assets/stylesheets/dash_creator/libs/jquery.minicolors.css +319 -0
- data/app/assets/stylesheets/dash_creator/libs/jquery.minicolors.png +0 -0
- data/app/assets/stylesheets/dash_creator/libs/style.css +13714 -0
- data/app/assets/stylesheets/dash_creator/user.css +4 -0
- data/app/controllers/dash_creator/application_controller.rb +3 -0
- data/app/controllers/dash_creator/chart_controller.rb +81 -0
- data/app/controllers/dash_creator/dashboard_controller.rb +37 -0
- data/app/controllers/dash_creator/dashboard_object_controller.rb +34 -0
- data/app/controllers/dash_creator/filter_controller.rb +60 -0
- data/app/controllers/dash_creator/user_controller.rb +82 -0
- data/app/helpers/dash_creator/application_helper.rb +4 -0
- data/app/helpers/dash_creator/chart_helper.rb +829 -0
- data/app/helpers/dash_creator/dashboard_helper.rb +4 -0
- data/app/helpers/dash_creator/dashboard_object_helper.rb +4 -0
- data/app/helpers/dash_creator/filter_helper.rb +237 -0
- data/app/helpers/dash_creator/user_helper.rb +4 -0
- data/app/jobs/dash_creator/application_job.rb +4 -0
- data/app/mailers/dash_creator/application_mailer.rb +6 -0
- data/app/models/dash_creator/application_record.rb +5 -0
- data/app/models/dash_creator/chart.rb +21 -0
- data/app/models/dash_creator/dashboard.rb +13 -0
- data/app/models/dash_creator/dashboard_object.rb +7 -0
- data/app/models/dash_creator/filter.rb +22 -0
- data/app/views/dash_creator/chart/_chart_creator.html.erb +230 -0
- data/app/views/dash_creator/chart/_modals.html.erb +74 -0
- data/app/views/dash_creator/chart/_plot_chart.html.erb +45 -0
- data/app/views/dash_creator/chart/create_chart.js.erb +53 -0
- data/app/views/dash_creator/dashboard/_dashboard_creator.html.erb +182 -0
- data/app/views/dash_creator/dashboard/_modals.html.erb +74 -0
- data/app/views/dash_creator/dashboard_object/_chart.html.erb +9 -0
- data/app/views/dash_creator/dashboard_object/_stat.html.erb +24 -0
- data/app/views/dash_creator/dashboard_object/_table.html.erb +16 -0
- data/app/views/dash_creator/filter/_filtering_card.html.erb +132 -0
- data/app/views/dash_creator/filter/_modals.html.erb +51 -0
- data/app/views/dash_creator/filter/_result_tables.html.erb +55 -0
- data/app/views/dash_creator/filter/apply_filtering.js.erb +46 -0
- data/app/views/dash_creator/filter/create_stat.js.erb +20 -0
- data/app/views/dash_creator/layouts/application.html.erb +64 -0
- data/app/views/dash_creator/layouts/menu/_left_menu.html.erb +12 -0
- data/app/views/dash_creator/user/_section_card.html.erb +17 -0
- data/app/views/dash_creator/user/creator.html.erb +11 -0
- data/app/views/dash_creator/user/dashboard.html.erb +10 -0
- data/config/initializers/dash_creator.rb +0 -0
- data/config/routes.rb +30 -0
- data/lib/dash_creator.rb +87 -0
- data/lib/dash_creator/acts_as_dash_creator.rb +16 -0
- data/lib/dash_creator/acts_as_dashboard_object.rb +19 -0
- data/lib/dash_creator/engine.rb +11 -0
- data/lib/dash_creator/version.rb +3 -0
- data/lib/generators/dash_creator/install/install_generator.rb +70 -0
- data/lib/generators/dash_creator/install/templates/_chart.html.erb +9 -0
- data/lib/generators/dash_creator/install/templates/_section_card.html.erb +17 -0
- data/lib/generators/dash_creator/install/templates/_stat.html.erb +24 -0
- data/lib/generators/dash_creator/install/templates/_table.html.erb +16 -0
- data/lib/generators/dash_creator/install/templates/add_indexes_to_dash_creator_tables.rb +15 -0
- data/lib/generators/dash_creator/install/templates/create_dash_creator_charts.rb +25 -0
- data/lib/generators/dash_creator/install/templates/create_dash_creator_dashboard_objects.rb +36 -0
- data/lib/generators/dash_creator/install/templates/create_dash_creator_dashboards.rb +28 -0
- data/lib/generators/dash_creator/install/templates/create_dash_creator_filters.rb +22 -0
- data/lib/generators/dash_creator/install/templates/dashboard.html.erb +10 -0
- data/lib/generators/dash_creator/install/templates/initializer.rb +48 -0
- data/lib/tasks/dash_creator_tasks.rake +4 -0
- metadata +196 -0
@@ -0,0 +1,1108 @@
|
|
1
|
+
//
|
2
|
+
// jQuery MiniColors: A tiny color picker built on jQuery
|
3
|
+
//
|
4
|
+
// Developed by Cory LaViska for A Beautiful Site, LLC
|
5
|
+
//
|
6
|
+
// Licensed under the MIT license: http://opensource.org/licenses/MIT
|
7
|
+
//
|
8
|
+
(function (factory) {
|
9
|
+
if(typeof define === 'function' && define.amd) {
|
10
|
+
// AMD. Register as an anonymous module.
|
11
|
+
define(['jquery'], factory);
|
12
|
+
} else if(typeof exports === 'object') {
|
13
|
+
// Node/CommonJS
|
14
|
+
module.exports = factory(require('jquery'));
|
15
|
+
} else {
|
16
|
+
// Browser globals
|
17
|
+
factory(jQuery);
|
18
|
+
}
|
19
|
+
}(function ($) {
|
20
|
+
'use strict';
|
21
|
+
|
22
|
+
// Defaults
|
23
|
+
$.minicolors = {
|
24
|
+
defaults: {
|
25
|
+
animationSpeed: 50,
|
26
|
+
animationEasing: 'swing',
|
27
|
+
change: null,
|
28
|
+
changeDelay: 0,
|
29
|
+
control: 'hue',
|
30
|
+
defaultValue: '',
|
31
|
+
format: 'hex',
|
32
|
+
hide: null,
|
33
|
+
hideSpeed: 100,
|
34
|
+
inline: false,
|
35
|
+
keywords: '',
|
36
|
+
letterCase: 'lowercase',
|
37
|
+
opacity: false,
|
38
|
+
position: 'bottom left',
|
39
|
+
show: null,
|
40
|
+
showSpeed: 100,
|
41
|
+
theme: 'default',
|
42
|
+
swatches: []
|
43
|
+
}
|
44
|
+
};
|
45
|
+
|
46
|
+
// Public methods
|
47
|
+
$.extend($.fn, {
|
48
|
+
minicolors: function(method, data) {
|
49
|
+
|
50
|
+
switch(method) {
|
51
|
+
// Destroy the control
|
52
|
+
case 'destroy':
|
53
|
+
$(this).each(function() {
|
54
|
+
destroy($(this));
|
55
|
+
});
|
56
|
+
return $(this);
|
57
|
+
|
58
|
+
// Hide the color picker
|
59
|
+
case 'hide':
|
60
|
+
hide();
|
61
|
+
return $(this);
|
62
|
+
|
63
|
+
// Get/set opacity
|
64
|
+
case 'opacity':
|
65
|
+
// Getter
|
66
|
+
if(data === undefined) {
|
67
|
+
// Getter
|
68
|
+
return $(this).attr('data-opacity');
|
69
|
+
} else {
|
70
|
+
// Setter
|
71
|
+
$(this).each(function() {
|
72
|
+
updateFromInput($(this).attr('data-opacity', data));
|
73
|
+
});
|
74
|
+
}
|
75
|
+
return $(this);
|
76
|
+
|
77
|
+
// Get an RGB(A) object based on the current color/opacity
|
78
|
+
case 'rgbObject':
|
79
|
+
return rgbObject($(this), method === 'rgbaObject');
|
80
|
+
|
81
|
+
// Get an RGB(A) string based on the current color/opacity
|
82
|
+
case 'rgbString':
|
83
|
+
case 'rgbaString':
|
84
|
+
return rgbString($(this), method === 'rgbaString');
|
85
|
+
|
86
|
+
// Get/set settings on the fly
|
87
|
+
case 'settings':
|
88
|
+
if(data === undefined) {
|
89
|
+
return $(this).data('minicolors-settings');
|
90
|
+
} else {
|
91
|
+
// Setter
|
92
|
+
$(this).each(function() {
|
93
|
+
var settings = $(this).data('minicolors-settings') || {};
|
94
|
+
destroy($(this));
|
95
|
+
$(this).minicolors($.extend(true, settings, data));
|
96
|
+
});
|
97
|
+
}
|
98
|
+
return $(this);
|
99
|
+
|
100
|
+
// Show the color picker
|
101
|
+
case 'show':
|
102
|
+
show($(this).eq(0));
|
103
|
+
return $(this);
|
104
|
+
|
105
|
+
// Get/set the hex color value
|
106
|
+
case 'value':
|
107
|
+
if(data === undefined) {
|
108
|
+
// Getter
|
109
|
+
return $(this).val();
|
110
|
+
} else {
|
111
|
+
// Setter
|
112
|
+
$(this).each(function() {
|
113
|
+
if(typeof(data) === 'object' && data !== 'null') {
|
114
|
+
if(data.opacity) {
|
115
|
+
$(this).attr('data-opacity', keepWithin(data.opacity, 0, 1));
|
116
|
+
}
|
117
|
+
if(data.color) {
|
118
|
+
$(this).val(data.color);
|
119
|
+
}
|
120
|
+
} else {
|
121
|
+
$(this).val(data);
|
122
|
+
}
|
123
|
+
updateFromInput($(this));
|
124
|
+
});
|
125
|
+
}
|
126
|
+
return $(this);
|
127
|
+
|
128
|
+
// Initializes the control
|
129
|
+
default:
|
130
|
+
if(method !== 'create') data = method;
|
131
|
+
$(this).each(function() {
|
132
|
+
init($(this), data);
|
133
|
+
});
|
134
|
+
return $(this);
|
135
|
+
|
136
|
+
}
|
137
|
+
|
138
|
+
}
|
139
|
+
});
|
140
|
+
|
141
|
+
// Initialize input elements
|
142
|
+
function init(input, settings) {
|
143
|
+
var minicolors = $('<div class="minicolors" />');
|
144
|
+
var defaults = $.minicolors.defaults;
|
145
|
+
var size;
|
146
|
+
var swatches;
|
147
|
+
var swatch;
|
148
|
+
var panel;
|
149
|
+
var i;
|
150
|
+
|
151
|
+
// Do nothing if already initialized
|
152
|
+
if(input.data('minicolors-initialized')) return;
|
153
|
+
|
154
|
+
// Handle settings
|
155
|
+
settings = $.extend(true, {}, defaults, settings);
|
156
|
+
|
157
|
+
// The wrapper
|
158
|
+
minicolors
|
159
|
+
.addClass('minicolors-theme-' + settings.theme)
|
160
|
+
.toggleClass('minicolors-with-opacity', settings.opacity);
|
161
|
+
|
162
|
+
// Custom positioning
|
163
|
+
if(settings.position !== undefined) {
|
164
|
+
$.each(settings.position.split(' '), function() {
|
165
|
+
minicolors.addClass('minicolors-position-' + this);
|
166
|
+
});
|
167
|
+
}
|
168
|
+
|
169
|
+
// Input size
|
170
|
+
if(settings.format === 'rgb') {
|
171
|
+
size = settings.opacity ? '25' : '20';
|
172
|
+
} else {
|
173
|
+
size = settings.keywords ? '11' : '7';
|
174
|
+
}
|
175
|
+
|
176
|
+
// The input
|
177
|
+
input
|
178
|
+
.addClass('minicolors-input')
|
179
|
+
.data('minicolors-initialized', false)
|
180
|
+
.data('minicolors-settings', settings)
|
181
|
+
.prop('size', size)
|
182
|
+
.wrap(minicolors)
|
183
|
+
.after(
|
184
|
+
'<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
|
185
|
+
'<div class="minicolors-slider minicolors-sprite">' +
|
186
|
+
'<div class="minicolors-picker"></div>' +
|
187
|
+
'</div>' +
|
188
|
+
'<div class="minicolors-opacity-slider minicolors-sprite">' +
|
189
|
+
'<div class="minicolors-picker"></div>' +
|
190
|
+
'</div>' +
|
191
|
+
'<div class="minicolors-grid minicolors-sprite">' +
|
192
|
+
'<div class="minicolors-grid-inner"></div>' +
|
193
|
+
'<div class="minicolors-picker"><div></div></div>' +
|
194
|
+
'</div>' +
|
195
|
+
'</div>'
|
196
|
+
);
|
197
|
+
|
198
|
+
// The swatch
|
199
|
+
if(!settings.inline) {
|
200
|
+
input.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>');
|
201
|
+
input.next('.minicolors-input-swatch').on('click', function(event) {
|
202
|
+
event.preventDefault();
|
203
|
+
input.focus();
|
204
|
+
});
|
205
|
+
}
|
206
|
+
|
207
|
+
// Prevent text selection in IE
|
208
|
+
panel = input.parent().find('.minicolors-panel');
|
209
|
+
panel.on('selectstart', function() { return false; }).end();
|
210
|
+
|
211
|
+
// Swatches
|
212
|
+
if(settings.swatches && settings.swatches.length !== 0) {
|
213
|
+
panel.addClass('minicolors-with-swatches');
|
214
|
+
swatches = $('<ul class="minicolors-swatches"></ul>')
|
215
|
+
.appendTo(panel);
|
216
|
+
for(i = 0; i < settings.swatches.length; ++i) {
|
217
|
+
swatch = settings.swatches[i];
|
218
|
+
swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));
|
219
|
+
$('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>')
|
220
|
+
.appendTo(swatches)
|
221
|
+
.data('swatch-color', settings.swatches[i])
|
222
|
+
.find('.minicolors-swatch-color')
|
223
|
+
.css({
|
224
|
+
backgroundColor: rgb2hex(swatch),
|
225
|
+
opacity: swatch.a
|
226
|
+
});
|
227
|
+
settings.swatches[i] = swatch;
|
228
|
+
}
|
229
|
+
}
|
230
|
+
|
231
|
+
// Inline controls
|
232
|
+
if(settings.inline) input.parent().addClass('minicolors-inline');
|
233
|
+
|
234
|
+
updateFromInput(input, false);
|
235
|
+
|
236
|
+
input.data('minicolors-initialized', true);
|
237
|
+
}
|
238
|
+
|
239
|
+
// Returns the input back to its original state
|
240
|
+
function destroy(input) {
|
241
|
+
var minicolors = input.parent();
|
242
|
+
|
243
|
+
// Revert the input element
|
244
|
+
input
|
245
|
+
.removeData('minicolors-initialized')
|
246
|
+
.removeData('minicolors-settings')
|
247
|
+
.removeProp('size')
|
248
|
+
.removeClass('minicolors-input');
|
249
|
+
|
250
|
+
// Remove the wrap and destroy whatever remains
|
251
|
+
minicolors.before(input).remove();
|
252
|
+
}
|
253
|
+
|
254
|
+
// Shows the specified dropdown panel
|
255
|
+
function show(input) {
|
256
|
+
var minicolors = input.parent();
|
257
|
+
var panel = minicolors.find('.minicolors-panel');
|
258
|
+
var settings = input.data('minicolors-settings');
|
259
|
+
|
260
|
+
// Do nothing if uninitialized, disabled, inline, or already open
|
261
|
+
if(
|
262
|
+
!input.data('minicolors-initialized') ||
|
263
|
+
input.prop('disabled') ||
|
264
|
+
minicolors.hasClass('minicolors-inline') ||
|
265
|
+
minicolors.hasClass('minicolors-focus')
|
266
|
+
) return;
|
267
|
+
|
268
|
+
hide();
|
269
|
+
|
270
|
+
minicolors.addClass('minicolors-focus');
|
271
|
+
panel
|
272
|
+
.stop(true, true)
|
273
|
+
.fadeIn(settings.showSpeed, function() {
|
274
|
+
if(settings.show) settings.show.call(input.get(0));
|
275
|
+
});
|
276
|
+
}
|
277
|
+
|
278
|
+
// Hides all dropdown panels
|
279
|
+
function hide() {
|
280
|
+
$('.minicolors-focus').each(function() {
|
281
|
+
var minicolors = $(this);
|
282
|
+
var input = minicolors.find('.minicolors-input');
|
283
|
+
var panel = minicolors.find('.minicolors-panel');
|
284
|
+
var settings = input.data('minicolors-settings');
|
285
|
+
|
286
|
+
panel.fadeOut(settings.hideSpeed, function() {
|
287
|
+
if(settings.hide) settings.hide.call(input.get(0));
|
288
|
+
minicolors.removeClass('minicolors-focus');
|
289
|
+
});
|
290
|
+
|
291
|
+
});
|
292
|
+
}
|
293
|
+
|
294
|
+
// Moves the selected picker
|
295
|
+
function move(target, event, animate) {
|
296
|
+
var input = target.parents('.minicolors').find('.minicolors-input');
|
297
|
+
var settings = input.data('minicolors-settings');
|
298
|
+
var picker = target.find('[class$=-picker]');
|
299
|
+
var offsetX = target.offset().left;
|
300
|
+
var offsetY = target.offset().top;
|
301
|
+
var x = Math.round(event.pageX - offsetX);
|
302
|
+
var y = Math.round(event.pageY - offsetY);
|
303
|
+
var duration = animate ? settings.animationSpeed : 0;
|
304
|
+
var wx, wy, r, phi;
|
305
|
+
|
306
|
+
// Touch support
|
307
|
+
if(event.originalEvent.changedTouches) {
|
308
|
+
x = event.originalEvent.changedTouches[0].pageX - offsetX;
|
309
|
+
y = event.originalEvent.changedTouches[0].pageY - offsetY;
|
310
|
+
}
|
311
|
+
|
312
|
+
// Constrain picker to its container
|
313
|
+
if(x < 0) x = 0;
|
314
|
+
if(y < 0) y = 0;
|
315
|
+
if(x > target.width()) x = target.width();
|
316
|
+
if(y > target.height()) y = target.height();
|
317
|
+
|
318
|
+
// Constrain color wheel values to the wheel
|
319
|
+
if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) {
|
320
|
+
wx = 75 - x;
|
321
|
+
wy = 75 - y;
|
322
|
+
r = Math.sqrt(wx * wx + wy * wy);
|
323
|
+
phi = Math.atan2(wy, wx);
|
324
|
+
if(phi < 0) phi += Math.PI * 2;
|
325
|
+
if(r > 75) {
|
326
|
+
r = 75;
|
327
|
+
x = 75 - (75 * Math.cos(phi));
|
328
|
+
y = 75 - (75 * Math.sin(phi));
|
329
|
+
}
|
330
|
+
x = Math.round(x);
|
331
|
+
y = Math.round(y);
|
332
|
+
}
|
333
|
+
|
334
|
+
// Move the picker
|
335
|
+
if(target.is('.minicolors-grid')) {
|
336
|
+
picker
|
337
|
+
.stop(true)
|
338
|
+
.animate({
|
339
|
+
top: y + 'px',
|
340
|
+
left: x + 'px'
|
341
|
+
}, duration, settings.animationEasing, function() {
|
342
|
+
updateFromControl(input, target);
|
343
|
+
});
|
344
|
+
} else {
|
345
|
+
picker
|
346
|
+
.stop(true)
|
347
|
+
.animate({
|
348
|
+
top: y + 'px'
|
349
|
+
}, duration, settings.animationEasing, function() {
|
350
|
+
updateFromControl(input, target);
|
351
|
+
});
|
352
|
+
}
|
353
|
+
}
|
354
|
+
|
355
|
+
// Sets the input based on the color picker values
|
356
|
+
function updateFromControl(input, target) {
|
357
|
+
|
358
|
+
function getCoords(picker, container) {
|
359
|
+
var left, top;
|
360
|
+
if(!picker.length || !container) return null;
|
361
|
+
left = picker.offset().left;
|
362
|
+
top = picker.offset().top;
|
363
|
+
|
364
|
+
return {
|
365
|
+
x: left - container.offset().left + (picker.outerWidth() / 2),
|
366
|
+
y: top - container.offset().top + (picker.outerHeight() / 2)
|
367
|
+
};
|
368
|
+
}
|
369
|
+
|
370
|
+
var hue, saturation, brightness, x, y, r, phi;
|
371
|
+
var hex = input.val();
|
372
|
+
var opacity = input.attr('data-opacity');
|
373
|
+
|
374
|
+
// Helpful references
|
375
|
+
var minicolors = input.parent();
|
376
|
+
var settings = input.data('minicolors-settings');
|
377
|
+
var swatch = minicolors.find('.minicolors-input-swatch');
|
378
|
+
|
379
|
+
// Panel objects
|
380
|
+
var grid = minicolors.find('.minicolors-grid');
|
381
|
+
var slider = minicolors.find('.minicolors-slider');
|
382
|
+
var opacitySlider = minicolors.find('.minicolors-opacity-slider');
|
383
|
+
|
384
|
+
// Picker objects
|
385
|
+
var gridPicker = grid.find('[class$=-picker]');
|
386
|
+
var sliderPicker = slider.find('[class$=-picker]');
|
387
|
+
var opacityPicker = opacitySlider.find('[class$=-picker]');
|
388
|
+
|
389
|
+
// Picker positions
|
390
|
+
var gridPos = getCoords(gridPicker, grid);
|
391
|
+
var sliderPos = getCoords(sliderPicker, slider);
|
392
|
+
var opacityPos = getCoords(opacityPicker, opacitySlider);
|
393
|
+
|
394
|
+
// Handle colors
|
395
|
+
if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) {
|
396
|
+
|
397
|
+
// Determine HSB values
|
398
|
+
switch(settings.control) {
|
399
|
+
case 'wheel':
|
400
|
+
// Calculate hue, saturation, and brightness
|
401
|
+
x = (grid.width() / 2) - gridPos.x;
|
402
|
+
y = (grid.height() / 2) - gridPos.y;
|
403
|
+
r = Math.sqrt(x * x + y * y);
|
404
|
+
phi = Math.atan2(y, x);
|
405
|
+
if(phi < 0) phi += Math.PI * 2;
|
406
|
+
if(r > 75) {
|
407
|
+
r = 75;
|
408
|
+
gridPos.x = 69 - (75 * Math.cos(phi));
|
409
|
+
gridPos.y = 69 - (75 * Math.sin(phi));
|
410
|
+
}
|
411
|
+
saturation = keepWithin(r / 0.75, 0, 100);
|
412
|
+
hue = keepWithin(phi * 180 / Math.PI, 0, 360);
|
413
|
+
brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
|
414
|
+
hex = hsb2hex({
|
415
|
+
h: hue,
|
416
|
+
s: saturation,
|
417
|
+
b: brightness
|
418
|
+
});
|
419
|
+
|
420
|
+
// Update UI
|
421
|
+
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
|
422
|
+
break;
|
423
|
+
|
424
|
+
case 'saturation':
|
425
|
+
// Calculate hue, saturation, and brightness
|
426
|
+
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
|
427
|
+
saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
|
428
|
+
brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
|
429
|
+
hex = hsb2hex({
|
430
|
+
h: hue,
|
431
|
+
s: saturation,
|
432
|
+
b: brightness
|
433
|
+
});
|
434
|
+
|
435
|
+
// Update UI
|
436
|
+
slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
|
437
|
+
minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
|
438
|
+
break;
|
439
|
+
|
440
|
+
case 'brightness':
|
441
|
+
// Calculate hue, saturation, and brightness
|
442
|
+
hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
|
443
|
+
saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
|
444
|
+
brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
|
445
|
+
hex = hsb2hex({
|
446
|
+
h: hue,
|
447
|
+
s: saturation,
|
448
|
+
b: brightness
|
449
|
+
});
|
450
|
+
|
451
|
+
// Update UI
|
452
|
+
slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
|
453
|
+
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
|
454
|
+
break;
|
455
|
+
|
456
|
+
default:
|
457
|
+
// Calculate hue, saturation, and brightness
|
458
|
+
hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
|
459
|
+
saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
|
460
|
+
brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
|
461
|
+
hex = hsb2hex({
|
462
|
+
h: hue,
|
463
|
+
s: saturation,
|
464
|
+
b: brightness
|
465
|
+
});
|
466
|
+
|
467
|
+
// Update UI
|
468
|
+
grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
|
469
|
+
break;
|
470
|
+
}
|
471
|
+
|
472
|
+
// Handle opacity
|
473
|
+
if(settings.opacity) {
|
474
|
+
opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
|
475
|
+
} else {
|
476
|
+
opacity = 1;
|
477
|
+
}
|
478
|
+
|
479
|
+
updateInput(input, hex, opacity);
|
480
|
+
}
|
481
|
+
else {
|
482
|
+
// Set swatch color
|
483
|
+
swatch.find('span').css({
|
484
|
+
backgroundColor: hex,
|
485
|
+
opacity: opacity
|
486
|
+
});
|
487
|
+
|
488
|
+
// Handle change event
|
489
|
+
doChange(input, hex, opacity);
|
490
|
+
}
|
491
|
+
}
|
492
|
+
|
493
|
+
// Sets the value of the input and does the appropriate conversions
|
494
|
+
// to respect settings, also updates the swatch
|
495
|
+
function updateInput(input, value, opacity) {
|
496
|
+
var rgb;
|
497
|
+
|
498
|
+
// Helpful references
|
499
|
+
var minicolors = input.parent();
|
500
|
+
var settings = input.data('minicolors-settings');
|
501
|
+
var swatch = minicolors.find('.minicolors-input-swatch');
|
502
|
+
|
503
|
+
if(settings.opacity) input.attr('data-opacity', opacity);
|
504
|
+
|
505
|
+
// Set color string
|
506
|
+
if(settings.format === 'rgb') {
|
507
|
+
// Returns RGB(A) string
|
508
|
+
|
509
|
+
// Checks for input format and does the conversion
|
510
|
+
if(isRgb(value)) {
|
511
|
+
rgb = parseRgb(value, true);
|
512
|
+
}
|
513
|
+
else {
|
514
|
+
rgb = hex2rgb(parseHex(value, true));
|
515
|
+
}
|
516
|
+
|
517
|
+
opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
|
518
|
+
if(isNaN(opacity) || !settings.opacity) opacity = 1;
|
519
|
+
|
520
|
+
if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
|
521
|
+
// Set RGBA string if alpha
|
522
|
+
value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
|
523
|
+
} else {
|
524
|
+
// Set RGB string (alpha = 1)
|
525
|
+
value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
|
526
|
+
}
|
527
|
+
} else {
|
528
|
+
// Returns hex color
|
529
|
+
|
530
|
+
// Checks for input format and does the conversion
|
531
|
+
if(isRgb(value)) {
|
532
|
+
value = rgbString2hex(value);
|
533
|
+
}
|
534
|
+
|
535
|
+
value = convertCase(value, settings.letterCase);
|
536
|
+
}
|
537
|
+
|
538
|
+
// Update value from picker
|
539
|
+
input.val(value);
|
540
|
+
|
541
|
+
// Set swatch color
|
542
|
+
swatch.find('span').css({
|
543
|
+
backgroundColor: value,
|
544
|
+
opacity: opacity
|
545
|
+
});
|
546
|
+
|
547
|
+
// Handle change event
|
548
|
+
doChange(input, value, opacity);
|
549
|
+
}
|
550
|
+
|
551
|
+
// Sets the color picker values from the input
|
552
|
+
function updateFromInput(input, preserveInputValue) {
|
553
|
+
var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi;
|
554
|
+
|
555
|
+
// Helpful references
|
556
|
+
var minicolors = input.parent();
|
557
|
+
var settings = input.data('minicolors-settings');
|
558
|
+
var swatch = minicolors.find('.minicolors-input-swatch');
|
559
|
+
|
560
|
+
// Panel objects
|
561
|
+
var grid = minicolors.find('.minicolors-grid');
|
562
|
+
var slider = minicolors.find('.minicolors-slider');
|
563
|
+
var opacitySlider = minicolors.find('.minicolors-opacity-slider');
|
564
|
+
|
565
|
+
// Picker objects
|
566
|
+
var gridPicker = grid.find('[class$=-picker]');
|
567
|
+
var sliderPicker = slider.find('[class$=-picker]');
|
568
|
+
var opacityPicker = opacitySlider.find('[class$=-picker]');
|
569
|
+
|
570
|
+
// Determine hex/HSB values
|
571
|
+
if(isRgb(input.val())) {
|
572
|
+
// If input value is a rgb(a) string, convert it to hex color and update opacity
|
573
|
+
hex = rgbString2hex(input.val());
|
574
|
+
alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1);
|
575
|
+
if(alpha) {
|
576
|
+
input.attr('data-opacity', alpha);
|
577
|
+
}
|
578
|
+
} else {
|
579
|
+
hex = convertCase(parseHex(input.val(), true), settings.letterCase);
|
580
|
+
}
|
581
|
+
|
582
|
+
if(!hex){
|
583
|
+
hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);
|
584
|
+
}
|
585
|
+
hsb = hex2hsb(hex);
|
586
|
+
|
587
|
+
// Get array of lowercase keywords
|
588
|
+
keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
|
589
|
+
return $.trim(a.toLowerCase());
|
590
|
+
});
|
591
|
+
|
592
|
+
// Set color string
|
593
|
+
if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
|
594
|
+
value = convertCase(input.val());
|
595
|
+
} else {
|
596
|
+
value = isRgb(input.val()) ? parseRgb(input.val()) : hex;
|
597
|
+
}
|
598
|
+
|
599
|
+
// Update input value
|
600
|
+
if(!preserveInputValue) input.val(value);
|
601
|
+
|
602
|
+
// Determine opacity value
|
603
|
+
if(settings.opacity) {
|
604
|
+
// Get from data-opacity attribute and keep within 0-1 range
|
605
|
+
opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
|
606
|
+
if(isNaN(opacity)) opacity = 1;
|
607
|
+
input.attr('data-opacity', opacity);
|
608
|
+
swatch.find('span').css('opacity', opacity);
|
609
|
+
|
610
|
+
// Set opacity picker position
|
611
|
+
y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
|
612
|
+
opacityPicker.css('top', y + 'px');
|
613
|
+
}
|
614
|
+
|
615
|
+
// Set opacity to zero if input value is transparent
|
616
|
+
if(input.val().toLowerCase() === 'transparent') {
|
617
|
+
swatch.find('span').css('opacity', 0);
|
618
|
+
}
|
619
|
+
|
620
|
+
// Update swatch
|
621
|
+
swatch.find('span').css('backgroundColor', hex);
|
622
|
+
|
623
|
+
// Determine picker locations
|
624
|
+
switch(settings.control) {
|
625
|
+
case 'wheel':
|
626
|
+
// Set grid position
|
627
|
+
r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
|
628
|
+
phi = hsb.h * Math.PI / 180;
|
629
|
+
x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
|
630
|
+
y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
|
631
|
+
gridPicker.css({
|
632
|
+
top: y + 'px',
|
633
|
+
left: x + 'px'
|
634
|
+
});
|
635
|
+
|
636
|
+
// Set slider position
|
637
|
+
y = 150 - (hsb.b / (100 / grid.height()));
|
638
|
+
if(hex === '') y = 0;
|
639
|
+
sliderPicker.css('top', y + 'px');
|
640
|
+
|
641
|
+
// Update panel color
|
642
|
+
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
|
643
|
+
break;
|
644
|
+
|
645
|
+
case 'saturation':
|
646
|
+
// Set grid position
|
647
|
+
x = keepWithin((5 * hsb.h) / 12, 0, 150);
|
648
|
+
y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
|
649
|
+
gridPicker.css({
|
650
|
+
top: y + 'px',
|
651
|
+
left: x + 'px'
|
652
|
+
});
|
653
|
+
|
654
|
+
// Set slider position
|
655
|
+
y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
|
656
|
+
sliderPicker.css('top', y + 'px');
|
657
|
+
|
658
|
+
// Update UI
|
659
|
+
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
|
660
|
+
minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
|
661
|
+
break;
|
662
|
+
|
663
|
+
case 'brightness':
|
664
|
+
// Set grid position
|
665
|
+
x = keepWithin((5 * hsb.h) / 12, 0, 150);
|
666
|
+
y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
|
667
|
+
gridPicker.css({
|
668
|
+
top: y + 'px',
|
669
|
+
left: x + 'px'
|
670
|
+
});
|
671
|
+
|
672
|
+
// Set slider position
|
673
|
+
y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
|
674
|
+
sliderPicker.css('top', y + 'px');
|
675
|
+
|
676
|
+
// Update UI
|
677
|
+
slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
|
678
|
+
minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
|
679
|
+
break;
|
680
|
+
|
681
|
+
default:
|
682
|
+
// Set grid position
|
683
|
+
x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
|
684
|
+
y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
|
685
|
+
gridPicker.css({
|
686
|
+
top: y + 'px',
|
687
|
+
left: x + 'px'
|
688
|
+
});
|
689
|
+
|
690
|
+
// Set slider position
|
691
|
+
y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
|
692
|
+
sliderPicker.css('top', y + 'px');
|
693
|
+
|
694
|
+
// Update panel color
|
695
|
+
grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
|
696
|
+
break;
|
697
|
+
}
|
698
|
+
|
699
|
+
// Fire change event, but only if minicolors is fully initialized
|
700
|
+
if(input.data('minicolors-initialized')) {
|
701
|
+
doChange(input, value, opacity);
|
702
|
+
}
|
703
|
+
}
|
704
|
+
|
705
|
+
// Runs the change and changeDelay callbacks
|
706
|
+
function doChange(input, value, opacity) {
|
707
|
+
var settings = input.data('minicolors-settings');
|
708
|
+
var lastChange = input.data('minicolors-lastChange');
|
709
|
+
var obj, sel, i;
|
710
|
+
|
711
|
+
// Only run if it actually changed
|
712
|
+
if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) {
|
713
|
+
|
714
|
+
// Remember last-changed value
|
715
|
+
input.data('minicolors-lastChange', {
|
716
|
+
value: value,
|
717
|
+
opacity: opacity
|
718
|
+
});
|
719
|
+
|
720
|
+
// Check and select applicable swatch
|
721
|
+
if(settings.swatches && settings.swatches.length !== 0) {
|
722
|
+
if(!isRgb(value)) {
|
723
|
+
obj = hex2rgb(value);
|
724
|
+
}
|
725
|
+
else {
|
726
|
+
obj = parseRgb(value, true);
|
727
|
+
}
|
728
|
+
sel = -1;
|
729
|
+
for(i = 0; i < settings.swatches.length; ++i) {
|
730
|
+
if(obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) {
|
731
|
+
sel = i;
|
732
|
+
break;
|
733
|
+
}
|
734
|
+
}
|
735
|
+
|
736
|
+
input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
|
737
|
+
if(sel !== -1) {
|
738
|
+
input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
|
739
|
+
}
|
740
|
+
}
|
741
|
+
|
742
|
+
// Fire change event
|
743
|
+
if(settings.change) {
|
744
|
+
if(settings.changeDelay) {
|
745
|
+
// Call after a delay
|
746
|
+
clearTimeout(input.data('minicolors-changeTimeout'));
|
747
|
+
input.data('minicolors-changeTimeout', setTimeout(function() {
|
748
|
+
settings.change.call(input.get(0), value, opacity);
|
749
|
+
}, settings.changeDelay));
|
750
|
+
} else {
|
751
|
+
// Call immediately
|
752
|
+
settings.change.call(input.get(0), value, opacity);
|
753
|
+
}
|
754
|
+
}
|
755
|
+
input.trigger('change').trigger('input');
|
756
|
+
}
|
757
|
+
}
|
758
|
+
|
759
|
+
// Generates an RGB(A) object based on the input's value
|
760
|
+
function rgbObject(input) {
|
761
|
+
var rgb,
|
762
|
+
opacity = $(input).attr('data-opacity');
|
763
|
+
if( isRgb($(input).val()) ) {
|
764
|
+
rgb = parseRgb($(input).val(), true);
|
765
|
+
} else {
|
766
|
+
var hex = parseHex($(input).val(), true);
|
767
|
+
rgb = hex2rgb(hex);
|
768
|
+
}
|
769
|
+
if( !rgb ) return null;
|
770
|
+
if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
|
771
|
+
return rgb;
|
772
|
+
}
|
773
|
+
|
774
|
+
// Generates an RGB(A) string based on the input's value
|
775
|
+
function rgbString(input, alpha) {
|
776
|
+
var rgb,
|
777
|
+
opacity = $(input).attr('data-opacity');
|
778
|
+
if( isRgb($(input).val()) ) {
|
779
|
+
rgb = parseRgb($(input).val(), true);
|
780
|
+
} else {
|
781
|
+
var hex = parseHex($(input).val(), true);
|
782
|
+
rgb = hex2rgb(hex);
|
783
|
+
}
|
784
|
+
if( !rgb ) return null;
|
785
|
+
if( opacity === undefined ) opacity = 1;
|
786
|
+
if( alpha ) {
|
787
|
+
return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
|
788
|
+
} else {
|
789
|
+
return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
|
790
|
+
}
|
791
|
+
}
|
792
|
+
|
793
|
+
// Converts to the letter case specified in settings
|
794
|
+
function convertCase(string, letterCase) {
|
795
|
+
return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
|
796
|
+
}
|
797
|
+
|
798
|
+
// Parses a string and returns a valid hex string when possible
|
799
|
+
function parseHex(string, expand) {
|
800
|
+
string = string.replace(/^#/g, '');
|
801
|
+
if(!string.match(/^[A-F0-9]{3,6}/ig)) return '';
|
802
|
+
if(string.length !== 3 && string.length !== 6) return '';
|
803
|
+
if(string.length === 3 && expand) {
|
804
|
+
string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
|
805
|
+
}
|
806
|
+
return '#' + string;
|
807
|
+
}
|
808
|
+
|
809
|
+
// Parses a string and returns a valid RGB(A) string when possible
|
810
|
+
function parseRgb(string, obj) {
|
811
|
+
var values = string.replace(/[^\d,.]/g, '');
|
812
|
+
var rgba = values.split(',');
|
813
|
+
|
814
|
+
rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);
|
815
|
+
rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);
|
816
|
+
rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255);
|
817
|
+
if(rgba[3]) {
|
818
|
+
rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1);
|
819
|
+
}
|
820
|
+
|
821
|
+
// Return RGBA object
|
822
|
+
if( obj ) {
|
823
|
+
if (rgba[3]) {
|
824
|
+
return {
|
825
|
+
r: rgba[0],
|
826
|
+
g: rgba[1],
|
827
|
+
b: rgba[2],
|
828
|
+
a: rgba[3]
|
829
|
+
};
|
830
|
+
} else {
|
831
|
+
return {
|
832
|
+
r: rgba[0],
|
833
|
+
g: rgba[1],
|
834
|
+
b: rgba[2]
|
835
|
+
};
|
836
|
+
}
|
837
|
+
}
|
838
|
+
|
839
|
+
// Return RGBA string
|
840
|
+
if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) {
|
841
|
+
return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';
|
842
|
+
} else {
|
843
|
+
return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';
|
844
|
+
}
|
845
|
+
|
846
|
+
}
|
847
|
+
|
848
|
+
// Parses a string and returns a valid color string when possible
|
849
|
+
function parseInput(string, expand) {
|
850
|
+
if(isRgb(string)) {
|
851
|
+
// Returns a valid rgb(a) string
|
852
|
+
return parseRgb(string);
|
853
|
+
} else {
|
854
|
+
return parseHex(string, expand);
|
855
|
+
}
|
856
|
+
}
|
857
|
+
|
858
|
+
// Keeps value within min and max
|
859
|
+
function keepWithin(value, min, max) {
|
860
|
+
if(value < min) value = min;
|
861
|
+
if(value > max) value = max;
|
862
|
+
return value;
|
863
|
+
}
|
864
|
+
|
865
|
+
// Checks if a string is a valid RGB(A) string
|
866
|
+
function isRgb(string) {
|
867
|
+
var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
|
868
|
+
return (rgb && rgb.length === 4) ? true : false;
|
869
|
+
}
|
870
|
+
|
871
|
+
// Function to get alpha from a RGB(A) string
|
872
|
+
function getAlpha(rgba) {
|
873
|
+
rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
|
874
|
+
return (rgba && rgba.length === 6) ? rgba[4] : '1';
|
875
|
+
}
|
876
|
+
|
877
|
+
// Converts an HSB object to an RGB object
|
878
|
+
function hsb2rgb(hsb) {
|
879
|
+
var rgb = {};
|
880
|
+
var h = Math.round(hsb.h);
|
881
|
+
var s = Math.round(hsb.s * 255 / 100);
|
882
|
+
var v = Math.round(hsb.b * 255 / 100);
|
883
|
+
if(s === 0) {
|
884
|
+
rgb.r = rgb.g = rgb.b = v;
|
885
|
+
} else {
|
886
|
+
var t1 = v;
|
887
|
+
var t2 = (255 - s) * v / 255;
|
888
|
+
var t3 = (t1 - t2) * (h % 60) / 60;
|
889
|
+
if(h === 360) h = 0;
|
890
|
+
if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
|
891
|
+
else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
|
892
|
+
else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
|
893
|
+
else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
|
894
|
+
else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
|
895
|
+
else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
|
896
|
+
else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
|
897
|
+
}
|
898
|
+
return {
|
899
|
+
r: Math.round(rgb.r),
|
900
|
+
g: Math.round(rgb.g),
|
901
|
+
b: Math.round(rgb.b)
|
902
|
+
};
|
903
|
+
}
|
904
|
+
|
905
|
+
// Converts an RGB string to a hex string
|
906
|
+
function rgbString2hex(rgb){
|
907
|
+
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
|
908
|
+
return (rgb && rgb.length === 4) ? '#' +
|
909
|
+
('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +
|
910
|
+
('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +
|
911
|
+
('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
|
912
|
+
}
|
913
|
+
|
914
|
+
// Converts an RGB object to a hex string
|
915
|
+
function rgb2hex(rgb) {
|
916
|
+
var hex = [
|
917
|
+
rgb.r.toString(16),
|
918
|
+
rgb.g.toString(16),
|
919
|
+
rgb.b.toString(16)
|
920
|
+
];
|
921
|
+
$.each(hex, function(nr, val) {
|
922
|
+
if(val.length === 1) hex[nr] = '0' + val;
|
923
|
+
});
|
924
|
+
return '#' + hex.join('');
|
925
|
+
}
|
926
|
+
|
927
|
+
// Converts an HSB object to a hex string
|
928
|
+
function hsb2hex(hsb) {
|
929
|
+
return rgb2hex(hsb2rgb(hsb));
|
930
|
+
}
|
931
|
+
|
932
|
+
// Converts a hex string to an HSB object
|
933
|
+
function hex2hsb(hex) {
|
934
|
+
var hsb = rgb2hsb(hex2rgb(hex));
|
935
|
+
if(hsb.s === 0) hsb.h = 360;
|
936
|
+
return hsb;
|
937
|
+
}
|
938
|
+
|
939
|
+
// Converts an RGB object to an HSB object
|
940
|
+
function rgb2hsb(rgb) {
|
941
|
+
var hsb = { h: 0, s: 0, b: 0 };
|
942
|
+
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
943
|
+
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
944
|
+
var delta = max - min;
|
945
|
+
hsb.b = max;
|
946
|
+
hsb.s = max !== 0 ? 255 * delta / max : 0;
|
947
|
+
if(hsb.s !== 0) {
|
948
|
+
if(rgb.r === max) {
|
949
|
+
hsb.h = (rgb.g - rgb.b) / delta;
|
950
|
+
} else if(rgb.g === max) {
|
951
|
+
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
952
|
+
} else {
|
953
|
+
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
954
|
+
}
|
955
|
+
} else {
|
956
|
+
hsb.h = -1;
|
957
|
+
}
|
958
|
+
hsb.h *= 60;
|
959
|
+
if(hsb.h < 0) {
|
960
|
+
hsb.h += 360;
|
961
|
+
}
|
962
|
+
hsb.s *= 100/255;
|
963
|
+
hsb.b *= 100/255;
|
964
|
+
return hsb;
|
965
|
+
}
|
966
|
+
|
967
|
+
// Converts a hex string to an RGB object
|
968
|
+
function hex2rgb(hex) {
|
969
|
+
hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
970
|
+
return {
|
971
|
+
r: hex >> 16,
|
972
|
+
g: (hex & 0x00FF00) >> 8,
|
973
|
+
b: (hex & 0x0000FF)
|
974
|
+
};
|
975
|
+
}
|
976
|
+
|
977
|
+
// Handle events
|
978
|
+
$([document, top.document])
|
979
|
+
// Hide on clicks outside of the control
|
980
|
+
.on('mousedown.minicolors touchstart.minicolors', function(event) {
|
981
|
+
if(!$(event.target).parents().add(event.target).hasClass('minicolors')) {
|
982
|
+
hide();
|
983
|
+
}
|
984
|
+
})
|
985
|
+
// Start moving
|
986
|
+
.on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
|
987
|
+
var target = $(this);
|
988
|
+
event.preventDefault();
|
989
|
+
$(event.delegateTarget).data('minicolors-target', target);
|
990
|
+
move(target, event, true);
|
991
|
+
})
|
992
|
+
// Move pickers
|
993
|
+
.on('mousemove.minicolors touchmove.minicolors', function(event) {
|
994
|
+
var target = $(event.delegateTarget).data('minicolors-target');
|
995
|
+
if(target) move(target, event);
|
996
|
+
})
|
997
|
+
// Stop moving
|
998
|
+
.on('mouseup.minicolors touchend.minicolors', function() {
|
999
|
+
$(this).removeData('minicolors-target');
|
1000
|
+
})
|
1001
|
+
// Selected a swatch
|
1002
|
+
.on('click.minicolors', '.minicolors-swatches li', function(event) {
|
1003
|
+
event.preventDefault();
|
1004
|
+
var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');
|
1005
|
+
updateInput(input, color, getAlpha(color));
|
1006
|
+
updateFromInput(input);
|
1007
|
+
})
|
1008
|
+
// Show panel when swatch is clicked
|
1009
|
+
.on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {
|
1010
|
+
var input = $(this).parent().find('.minicolors-input');
|
1011
|
+
event.preventDefault();
|
1012
|
+
show(input);
|
1013
|
+
})
|
1014
|
+
// Show on focus
|
1015
|
+
.on('focus.minicolors', '.minicolors-input', function() {
|
1016
|
+
var input = $(this);
|
1017
|
+
if(!input.data('minicolors-initialized')) return;
|
1018
|
+
show(input);
|
1019
|
+
})
|
1020
|
+
// Update value on blur
|
1021
|
+
.on('blur.minicolors', '.minicolors-input', function() {
|
1022
|
+
var input = $(this);
|
1023
|
+
var settings = input.data('minicolors-settings');
|
1024
|
+
var keywords;
|
1025
|
+
var hex;
|
1026
|
+
var rgba;
|
1027
|
+
var swatchOpacity;
|
1028
|
+
var value;
|
1029
|
+
|
1030
|
+
if(!input.data('minicolors-initialized')) return;
|
1031
|
+
|
1032
|
+
// Get array of lowercase keywords
|
1033
|
+
keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
|
1034
|
+
return $.trim(a.toLowerCase());
|
1035
|
+
});
|
1036
|
+
|
1037
|
+
// Set color string
|
1038
|
+
if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
|
1039
|
+
value = input.val();
|
1040
|
+
} else {
|
1041
|
+
// Get RGBA values for easy conversion
|
1042
|
+
if(isRgb(input.val())) {
|
1043
|
+
rgba = parseRgb(input.val(), true);
|
1044
|
+
} else {
|
1045
|
+
hex = parseHex(input.val(), true);
|
1046
|
+
rgba = hex ? hex2rgb(hex) : null;
|
1047
|
+
}
|
1048
|
+
|
1049
|
+
// Convert to format
|
1050
|
+
if(rgba === null) {
|
1051
|
+
value = settings.defaultValue;
|
1052
|
+
} else if(settings.format === 'rgb') {
|
1053
|
+
value = settings.opacity ?
|
1054
|
+
parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') :
|
1055
|
+
parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')');
|
1056
|
+
} else {
|
1057
|
+
value = rgb2hex(rgba);
|
1058
|
+
}
|
1059
|
+
}
|
1060
|
+
|
1061
|
+
// Update swatch opacity
|
1062
|
+
swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1;
|
1063
|
+
if(value.toLowerCase() === 'transparent') swatchOpacity = 0;
|
1064
|
+
input
|
1065
|
+
.closest('.minicolors')
|
1066
|
+
.find('.minicolors-input-swatch > span')
|
1067
|
+
.css('opacity', swatchOpacity);
|
1068
|
+
|
1069
|
+
// Set input value
|
1070
|
+
input.val(value);
|
1071
|
+
|
1072
|
+
// Is it blank?
|
1073
|
+
if(input.val() === '') input.val(parseInput(settings.defaultValue, true));
|
1074
|
+
|
1075
|
+
// Adjust case
|
1076
|
+
input.val(convertCase(input.val(), settings.letterCase));
|
1077
|
+
|
1078
|
+
})
|
1079
|
+
// Handle keypresses
|
1080
|
+
.on('keydown.minicolors', '.minicolors-input', function(event) {
|
1081
|
+
var input = $(this);
|
1082
|
+
if(!input.data('minicolors-initialized')) return;
|
1083
|
+
switch(event.keyCode) {
|
1084
|
+
case 9: // tab
|
1085
|
+
hide();
|
1086
|
+
break;
|
1087
|
+
case 13: // enter
|
1088
|
+
case 27: // esc
|
1089
|
+
hide();
|
1090
|
+
input.blur();
|
1091
|
+
break;
|
1092
|
+
}
|
1093
|
+
})
|
1094
|
+
// Update on keyup
|
1095
|
+
.on('keyup.minicolors', '.minicolors-input', function() {
|
1096
|
+
var input = $(this);
|
1097
|
+
if(!input.data('minicolors-initialized')) return;
|
1098
|
+
updateFromInput(input, true);
|
1099
|
+
})
|
1100
|
+
// Update on paste
|
1101
|
+
.on('paste.minicolors', '.minicolors-input', function() {
|
1102
|
+
var input = $(this);
|
1103
|
+
if(!input.data('minicolors-initialized')) return;
|
1104
|
+
setTimeout(function() {
|
1105
|
+
updateFromInput(input, true);
|
1106
|
+
}, 1);
|
1107
|
+
});
|
1108
|
+
}));
|