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 |
}); |