| author | Tero Marttila <terom@paivola.fi> |
| Mon, 21 Apr 2014 00:03:49 +0300 | |
| changeset 81 | 6f1e9a5ac874 |
| parent 80 | 5254ba612630 |
| child 83 | 136e210fce82 |
| permissions | -rw-r--r-- |
|
80
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
1 |
$.fn.extend({
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
2 |
/* |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
3 |
* Set background to solid color |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
4 |
*/ |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
5 |
background_color: function (r, g, b, a) {
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
6 |
if (a == undefined) |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
7 |
a = 1.0; |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
8 |
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
9 |
this.css('background', 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')');
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
10 |
}, |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
11 |
}); |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
12 |
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
13 |
function color_slider_slide (event, ui) {
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
14 |
// $(this).css('background', 'rgba(0, 0, 0, ' + (ui.value / 255) + ')');
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
15 |
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
16 |
$('#color').background_color(
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
17 |
$('#slider-r').slider('value'),
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
18 |
$('#slider-g').slider('value'),
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
19 |
$('#slider-b').slider('value')
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
20 |
); |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
21 |
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
22 |
$(['r', 'g', 'b']).each(function (i, c) {
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
23 |
var value = $('#slider-' + c).slider('value');
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
24 |
var input = $('#' + c);
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
25 |
var color = {r: 0, g: 0, b: 0};
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
26 |
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
27 |
color[c] = 255; |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
28 |
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
29 |
input.val(value.toString(16)); |
|
81
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
30 |
input.background_color(color.r, color.g, color.b, value / 255); |
|
80
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
31 |
}); |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
32 |
} |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
33 |
|
|
81
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
34 |
function color_slider_input (input, c) {
|
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
35 |
var value; |
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
36 |
|
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
37 |
if (input.val()) |
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
38 |
value = parseInt(input.val(), 16); |
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
39 |
else |
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
40 |
value = 0; |
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
41 |
|
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
42 |
$('#slider-' + c).slider('value', value);
|
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
43 |
} |
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
44 |
|
|
80
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
45 |
$(function () {
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
46 |
$('.color-slider').slider({
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
47 |
orientation: 'horizontal', |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
48 |
range: 'min', |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
49 |
min: 0, |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
50 |
max: 255, |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
51 |
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
52 |
slide: color_slider_slide, |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
53 |
}); |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
54 |
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
55 |
$(['r', 'g', 'b']).each(function (i, c) {
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
56 |
var input = $('#' + c);
|
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
57 |
|
|
81
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
58 |
// bind |
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
59 |
input.change(function () { color_slider_input($(this), this.id); });
|
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
60 |
|
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
61 |
// initialize |
|
6f1e9a5ac874
color-slider: fixup input-slider bindings
Tero Marttila <terom@paivola.fi>
parents:
80
diff
changeset
|
62 |
color_slider_input(input, c); |
|
80
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
63 |
}); |
|
5254ba612630
dmx-web: slightly better RGB colorpicker control..
Tero Marttila <terom@paivola.fi>
parents:
diff
changeset
|
64 |
}); |