colorpicker added, par56 licht ansicht erweitert
This commit is contained in:
parent
56293334e5
commit
620796248b
|
@ -14,6 +14,8 @@
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.8.18.custom.min.js" />"></script>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery.cookie.js" />"></script>
|
||||||
<script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
|
<script type="text/javascript" src="<c:url value="/resources/js/backbone-min.js" />"></script>
|
||||||
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery.colorpicker.js" />"></script>
|
||||||
|
<script type="text/javascript" src="<c:url value="/resources/js/jquery.mousewheel.js" />"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(document).ready(
|
$(document).ready(
|
||||||
|
@ -81,6 +83,9 @@
|
||||||
$(this).addClass('black');
|
$(this).addClass('black');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
var colorpicker_raum1 = new jQuery.ColorPicker('#colorpicker-raum1', {
|
||||||
|
imagepath: '/resources/images/colorpicker/'
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -99,6 +104,17 @@
|
||||||
<li><a href="#tabs-5">Raum 4</a></li>
|
<li><a href="#tabs-5">Raum 4</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div id="tabs-1">
|
<div id="tabs-1">
|
||||||
|
|
||||||
|
<div class="buzzer">
|
||||||
|
<span class="circle red">Zu</span>
|
||||||
|
<button>Buzzern</button>
|
||||||
|
</div>
|
||||||
|
<div class="buzzer">
|
||||||
|
<span class="circle green">Auf</span>
|
||||||
|
<button>Buzzern</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="tabs-2">
|
||||||
<div id="v-tabs" class="inner-tabs-container">
|
<div id="v-tabs" class="inner-tabs-container">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#v-tabs-1">Licht</a></li>
|
<li><a href="#v-tabs-1">Licht</a></li>
|
||||||
|
@ -106,12 +122,20 @@
|
||||||
<li><a href="#v-tabs-3">Lampel</a></li>
|
<li><a href="#v-tabs-3">Lampel</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div id="v-tabs-1">
|
<div id="v-tabs-1">
|
||||||
Liiiiiichtsteuerung
|
<div id="colorpicker-raum1"></div>
|
||||||
|
<select multiple="multiple">
|
||||||
|
<option>Par 56 Lampe 1</option>
|
||||||
|
<option>Par 56 Lampe 2</option>
|
||||||
|
<option>Par 56 Lampe 3</option>
|
||||||
|
<option>Par 56 Lampe 4</option>
|
||||||
|
<option>Par 56 Lampe 5</option>
|
||||||
|
<option>Par 56 Lampe 6</option>
|
||||||
|
<option>Par 56 Lampe 7</option>
|
||||||
|
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div id="v-tabs-2">
|
<div id="v-tabs-2">
|
||||||
Muuuusik
|
<label for="slider1">Lautstärke Raum 1:</label><div id="slider1" class="slider"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="v-tabs-3">
|
<div id="v-tabs-3">
|
||||||
<div class="lampel">
|
<div class="lampel">
|
||||||
|
@ -123,18 +147,11 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="buzzer">
|
|
||||||
<span class="circle red">Zu</span>
|
|
||||||
<button>Buzzern</button>
|
|
||||||
</div>
|
|
||||||
<div class="buzzer">
|
|
||||||
<span class="circle green">Auf</span>
|
|
||||||
<button>Buzzern</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="tabs-2">
|
|
||||||
|
|
||||||
<label for="slider1">Lautstärke Raum 1:</label><div id="slider1" class="slider"></div>
|
<div class="switch">
|
||||||
|
Raumlicht:<br />
|
||||||
|
<input type="radio" name="raum-1-licht">An <input type="radio" name="raum-1-licht" checked="checked">Aus
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="tabs-3">
|
<div id="tabs-3">
|
||||||
|
|
|
@ -4,7 +4,7 @@ body {
|
||||||
}
|
}
|
||||||
#tabs {
|
#tabs {
|
||||||
height: 500px;
|
height: 500px;
|
||||||
width: 700px;
|
width: 770px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,7 +43,7 @@ body {
|
||||||
|
|
||||||
.inner-tabs-container {
|
.inner-tabs-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 530px;
|
width: 600px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
left: 120px;
|
left: 120px;
|
||||||
top: 400px;
|
top: 400px;
|
||||||
|
@ -62,6 +62,10 @@ body {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
select {
|
||||||
|
width: 200px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
/* Vertical Tabs
|
/* Vertical Tabs
|
||||||
----------------------------------*/
|
----------------------------------*/
|
||||||
.ui-tabs-vertical .ui-tabs-nav {
|
.ui-tabs-vertical .ui-tabs-nav {
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 388 B |
Binary file not shown.
After Width: | Height: | Size: 380 B |
Binary file not shown.
After Width: | Height: | Size: 461 B |
Binary file not shown.
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
After Width: | Height: | Size: 388 B |
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
|
@ -0,0 +1,385 @@
|
||||||
|
function rgbToHsv(r, g, b){
|
||||||
|
r = r/255, g = g/255, b = b/255;
|
||||||
|
var max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||||
|
var h, s, v = max;
|
||||||
|
|
||||||
|
var d = max - min;
|
||||||
|
s = max == 0 ? 0 : d / max;
|
||||||
|
|
||||||
|
if(max == min){
|
||||||
|
h = 0; // achromatic
|
||||||
|
}else{
|
||||||
|
switch(max){
|
||||||
|
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
||||||
|
case g: h = (b - r) / d + 2; break;
|
||||||
|
case b: h = (r - g) / d + 4; break;
|
||||||
|
}
|
||||||
|
h /= 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [Math.round(h * 360), s, v];
|
||||||
|
}
|
||||||
|
|
||||||
|
function hsvToRgb(h, s, v){
|
||||||
|
var r, g, b;
|
||||||
|
var i;
|
||||||
|
var f, p, q, t;
|
||||||
|
|
||||||
|
while (h < 0) { h += 360; };
|
||||||
|
while (h > 360) { h -= 360; };
|
||||||
|
s = Math.max(0, Math.min(1, s));
|
||||||
|
v = Math.max(0, Math.min(1, v));
|
||||||
|
|
||||||
|
if(s == 0) {
|
||||||
|
r = g = b = v;
|
||||||
|
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
||||||
|
}
|
||||||
|
|
||||||
|
h /= 60;
|
||||||
|
i = Math.floor(h);
|
||||||
|
f = h - i;
|
||||||
|
p = v * (1 - s);
|
||||||
|
q = v * (1 - s * f);
|
||||||
|
t = v * (1 - s * (1 - f));
|
||||||
|
|
||||||
|
switch(i) {
|
||||||
|
case 0: r = v; g = t; b = p; break;
|
||||||
|
case 1: r = q; g = v; b = p; break;
|
||||||
|
case 2: r = p; g = v; b = t; break;
|
||||||
|
case 3: r = p; g = q; b = v; break;
|
||||||
|
case 4: r = t; g = p; b = v; break;
|
||||||
|
default: r = v; g = p; b = q;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
||||||
|
}
|
||||||
|
|
||||||
|
function hsvToHex(h,s,v){
|
||||||
|
var rgb = hsvToRgb(h,s,v);
|
||||||
|
return rgbToHex(rgb[0], rgb[1], rgb[2]);
|
||||||
|
};
|
||||||
|
|
||||||
|
function hexToRgb(hex) {
|
||||||
|
if (hex.substring(0,1) == '#') { hex = hex.substring(1,hex.length); };
|
||||||
|
|
||||||
|
var strPattern = /^([0-9a-f]{3}|[0-9a-f]{6})$/i;
|
||||||
|
if(strPattern.test(hex) == true) {
|
||||||
|
if (hex.length == 3) {
|
||||||
|
var r = hex.substring(0,0);
|
||||||
|
var g = hex.substring(1,1);
|
||||||
|
var b = hex.substring(2,2);
|
||||||
|
hex = r + r + g + g + b + b;
|
||||||
|
};
|
||||||
|
var r = parseInt(hex.substring(0,2), 16);
|
||||||
|
var g = parseInt(hex.substring(2,4), 16);
|
||||||
|
var b = parseInt(hex.substring(4,6), 16);
|
||||||
|
return [r, g, b];
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
function rgbToHex(r,g,b) {
|
||||||
|
r = parseInt(r).toString(16);
|
||||||
|
g = parseInt(g).toString(16);
|
||||||
|
b = parseInt(b).toString(16);
|
||||||
|
if (r.length < 2) { r = '0' + r; };
|
||||||
|
if (g.length < 2) { g = '0' + g; };
|
||||||
|
if (b.length < 2) { b = '0' + b; };
|
||||||
|
return r + g + b;
|
||||||
|
};
|
||||||
|
|
||||||
|
jQuery.ColorPicker = function(container, options) {
|
||||||
|
var picker = this;
|
||||||
|
|
||||||
|
picker.build = function(){
|
||||||
|
// Container setup
|
||||||
|
var container = picker.el.container
|
||||||
|
.empty()
|
||||||
|
.css({
|
||||||
|
'display': 'inline-block',
|
||||||
|
'position': 'relative',
|
||||||
|
'width': '312px',
|
||||||
|
'height': '272px'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wheel setup
|
||||||
|
var wheel_container = picker.el.wheel_container = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '1',
|
||||||
|
'top': '8px',
|
||||||
|
'left': '8px',
|
||||||
|
'width': '272px',
|
||||||
|
'height': '272px;'
|
||||||
|
}).appendTo(container);
|
||||||
|
var wheel = picker.el.wheel = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '2',
|
||||||
|
'top': '0',
|
||||||
|
'left': '0',
|
||||||
|
'width': '256px',
|
||||||
|
'height': '256px',
|
||||||
|
'background': 'url(' + picker.settings.imagepath + 'jquery.colorpicker.wheel.png)'
|
||||||
|
}).appendTo(wheel_container);
|
||||||
|
var wheel_mask = picker.el.wheel_mask = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '3',
|
||||||
|
'top': '0',
|
||||||
|
'left': '0',
|
||||||
|
'width': '256px',
|
||||||
|
'height': '256px',
|
||||||
|
'background': 'url(' + picker.settings.imagepath + 'jquery.colorpicker.wheel_mask.png)',
|
||||||
|
'opacity': 0
|
||||||
|
}).appendTo(wheel_container);
|
||||||
|
var wheel_cursor = picker.el.wheel_cursor = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '4',
|
||||||
|
'top': '120px',
|
||||||
|
'left': '120px',
|
||||||
|
'width': '16px',
|
||||||
|
'height': '16px',
|
||||||
|
'background': 'url(' + picker.settings.imagepath + 'jquery.colorpicker.wheel_cursor.png)'
|
||||||
|
}).appendTo(wheel_container);
|
||||||
|
var wheel_hit = picker.el.wheel_hit = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '5',
|
||||||
|
'top': '-8px',
|
||||||
|
'left': '-8px',
|
||||||
|
'width': '272px',
|
||||||
|
'height': '272px'
|
||||||
|
}).appendTo(wheel_container);
|
||||||
|
|
||||||
|
// Slider setup
|
||||||
|
var slider_container = picker.el.slider_container = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '1',
|
||||||
|
'top': '8px',
|
||||||
|
'left': '280px',
|
||||||
|
'width': '24px',
|
||||||
|
'height': '256px;'
|
||||||
|
}).appendTo(container);
|
||||||
|
var slider_bg = picker.el.slider_bg = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '2',
|
||||||
|
'top': '0',
|
||||||
|
'left': '0',
|
||||||
|
'width': '16px',
|
||||||
|
'height': '256px',
|
||||||
|
'background': picker.color.hex
|
||||||
|
}).appendTo(slider_container);
|
||||||
|
var slider = picker.el.slider = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '3',
|
||||||
|
'top': '0',
|
||||||
|
'left': '0',
|
||||||
|
'width': '16px',
|
||||||
|
'height': '256px',
|
||||||
|
'background': 'url(' + picker.settings.imagepath + 'jquery.colorpicker.slider.png)'
|
||||||
|
}).appendTo(slider_container);
|
||||||
|
var slider_cursor = picker.el.slider_cursor = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '4',
|
||||||
|
'top': '-8px',
|
||||||
|
'left': '8px',
|
||||||
|
'width': '16px',
|
||||||
|
'height': '16px',
|
||||||
|
'background': 'url(' + picker.settings.imagepath + 'jquery.colorpicker.slider_cursor.png)'
|
||||||
|
}).appendTo(slider_container);
|
||||||
|
var slider_hit = picker.el.slider_hit = jQuery('<div/>')
|
||||||
|
.css({
|
||||||
|
'position': 'absolute',
|
||||||
|
'z-index': '5',
|
||||||
|
'top': '-8px',
|
||||||
|
'left': '-8px',
|
||||||
|
'width': '40px',
|
||||||
|
'height': '272px'
|
||||||
|
}).appendTo(slider_container);
|
||||||
|
|
||||||
|
// events
|
||||||
|
wheel_cursor.click(function(){return false;});
|
||||||
|
wheel_cursor.mousedown(function(){return false;});
|
||||||
|
wheel_hit.mousedown(function(){ picker.mouse.wheel = true; });
|
||||||
|
wheel_hit.mouseup(function(){ picker.mouse.wheel = false; });
|
||||||
|
wheel_hit.mouseout(function(){ picker.mouse.wheel = false; });
|
||||||
|
wheel_hit.click(function(e){ picker.wheel_update(e); });
|
||||||
|
|
||||||
|
slider_cursor.click(function(){return false;});
|
||||||
|
slider_cursor.mousedown(function(){return false;});
|
||||||
|
slider_hit.mousedown(function(){ picker.mouse.slider = true; });
|
||||||
|
slider_hit.mouseup(function(){ picker.mouse.slider = false; });
|
||||||
|
slider_hit.mouseout(function(){ picker.mouse.slider = false; });
|
||||||
|
slider_hit.click(function(e){ picker.slider_update(e); });
|
||||||
|
|
||||||
|
jQuery(window).mousemove(function(e){
|
||||||
|
if (picker.mouse.wheel) { picker.wheel_update(e); } else
|
||||||
|
if (picker.mouse.slider) { picker.slider_update(e); };
|
||||||
|
});
|
||||||
|
|
||||||
|
// if jQuery mousewheel is loaded add scrollwheel events
|
||||||
|
if (jQuery.fn.mousewheel){
|
||||||
|
slider_hit.mousewheel(function(e, rawDelta){
|
||||||
|
if (rawDelta < 0) { delta = -1; }
|
||||||
|
else if (rawDelta > 0) { delta = 1; }
|
||||||
|
picker.color.val = Math.max(0, Math.min(1, picker.color.val + delta * 0.0039));
|
||||||
|
picker.update_hex();
|
||||||
|
picker.update_val();
|
||||||
|
picker.update();
|
||||||
|
}, true);
|
||||||
|
|
||||||
|
jQuery(document).keydown(function(e) { if (e.which == 16) { picker.io.shift = true; }});
|
||||||
|
jQuery(document).keyup(function(e) { if (e.which == 16) { picker.io.shift = false; }});
|
||||||
|
wheel_hit.mousewheel(function(e, rawDelta){
|
||||||
|
if (rawDelta < 0) { delta = -1; }
|
||||||
|
else if (rawDelta > 0) { delta = 1; }
|
||||||
|
if (!picker.io.shift) {
|
||||||
|
var hue = picker.color.hue = picker.color.hue + delta * 0.5;
|
||||||
|
while (hue < 0) {hue += 360;}
|
||||||
|
while (hue > 360) {hue -= 360;}
|
||||||
|
picker.color.hue = hue;
|
||||||
|
} else {
|
||||||
|
picker.color.sat = Math.max(0, Math.min(1, picker.color.sat + delta * 0.008));
|
||||||
|
};
|
||||||
|
picker.update_hex();
|
||||||
|
picker.update_hue();
|
||||||
|
picker.update();
|
||||||
|
}, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return picker;
|
||||||
|
};
|
||||||
|
|
||||||
|
picker.wheel_update = function(e) {
|
||||||
|
var x = Math.max(0, Math.min(255, e.pageX - Math.round(picker.el.wheel.offset().left)));
|
||||||
|
var y = Math.max(0, Math.min(255, e.pageY - Math.round(picker.el.wheel.offset().top)));
|
||||||
|
var d = Math.sqrt(Math.pow(x-picker.math.center.x,2) + Math.pow(y-picker.math.center.y,2));
|
||||||
|
if (d <= picker.math.radius) {
|
||||||
|
picker.el.wheel_cursor.css({'top': y-8+'px', 'left': x-8+'px'});
|
||||||
|
var angle = picker.math.angle = Math.atan2((picker.math.center.y - y), (picker.math.center.x - x));
|
||||||
|
var hue = picker.color.hue = Math.round(angle * 180/Math.PI) + 90;
|
||||||
|
if (hue < 0) { hue = picker.color.hue += 360; };
|
||||||
|
picker.color.sat = d/128;
|
||||||
|
|
||||||
|
picker.update_hex();
|
||||||
|
|
||||||
|
var fullVal = hsvToHex(hue, picker.color.sat, 1);
|
||||||
|
picker.el.slider_bg.css('background', '#' + fullVal);
|
||||||
|
|
||||||
|
picker.update();
|
||||||
|
};
|
||||||
|
return picker;
|
||||||
|
};
|
||||||
|
|
||||||
|
picker.slider_update = function(e) {
|
||||||
|
var pxOffset = Math.max(0, Math.min(255, e.pageY - Math.round(picker.el.slider.offset().top)));
|
||||||
|
var val = Math.round(100 - (pxOffset * 0.390625)) * 0.01;
|
||||||
|
picker.el.slider_cursor.css('top', pxOffset - 8 + 'px');
|
||||||
|
picker.color.val = val;
|
||||||
|
picker.update_hex();
|
||||||
|
|
||||||
|
var fullVal = hsvToHex(picker.color.hue, picker.color.sat, 1);
|
||||||
|
picker.el.slider_bg.css('background', '#' + fullVal);
|
||||||
|
|
||||||
|
picker.el.wheel_mask.css('opacity', 1 - picker.color.val);
|
||||||
|
|
||||||
|
picker.update();
|
||||||
|
|
||||||
|
return picker;
|
||||||
|
};
|
||||||
|
|
||||||
|
picker.hex_update = function(hex) {
|
||||||
|
if (hex.substring(0,1) == '#') { hex = hex.substring(1,hex.length); };
|
||||||
|
|
||||||
|
var rgb = hexToRgb(hex);
|
||||||
|
var hsv = rgbToHsv(rgb[0], rgb[1], rgb[2]);
|
||||||
|
|
||||||
|
picker.color.hex = hex;
|
||||||
|
picker.color.hue = hsv[0];
|
||||||
|
picker.color.sat = hsv[1];
|
||||||
|
picker.color.val = hsv[2];
|
||||||
|
|
||||||
|
picker.update_val();
|
||||||
|
picker.update_hue();
|
||||||
|
picker.update();
|
||||||
|
};
|
||||||
|
|
||||||
|
picker.update_hex = function() {
|
||||||
|
picker.color.hex = hsvToHex(picker.color.hue, picker.color.sat, picker.color.val);
|
||||||
|
};
|
||||||
|
|
||||||
|
picker.update_val = function() {
|
||||||
|
var top = 256 * (1 - picker.color.val) - 8;
|
||||||
|
picker.el.slider_cursor.css('top', top + 'px');
|
||||||
|
picker.el.wheel_mask.css('opacity', 1 - picker.color.val);
|
||||||
|
};
|
||||||
|
|
||||||
|
picker.update_hue = function() {
|
||||||
|
var adeg = picker.color.hue + 90;
|
||||||
|
if (adeg < 0) { adeg += 360; };
|
||||||
|
var arad = adeg * Math.PI/180;
|
||||||
|
var x2 = picker.math.center.x + Math.round(picker.color.sat * picker.math.radius * Math.cos(arad));
|
||||||
|
var y2 = picker.math.center.y + Math.round(picker.color.sat * picker.math.radius * Math.sin(arad));
|
||||||
|
picker.el.wheel_cursor.css({
|
||||||
|
'top': y2 - 8 + 'px',
|
||||||
|
'left': x2 - 8 + 'px'
|
||||||
|
});
|
||||||
|
var fullVal = hsvToHex(picker.color.hue, picker.color.sat, 1);
|
||||||
|
picker.el.slider_bg.css('background', '#' + fullVal);
|
||||||
|
};
|
||||||
|
picker.update_sat = picker.update_hue;
|
||||||
|
|
||||||
|
picker.update = function() {
|
||||||
|
picker.update_hex();
|
||||||
|
picker.fn.change('#' + picker.color.hex);
|
||||||
|
};
|
||||||
|
picker.change = picker.update;
|
||||||
|
|
||||||
|
picker.hex = function(hex) {
|
||||||
|
var strPattern = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
|
||||||
|
if (hex && strPattern.test(hex)) {
|
||||||
|
picker.hex_update(hex);
|
||||||
|
return picker;
|
||||||
|
} else {
|
||||||
|
return '#' + picker.color.hex;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
picker.init = function(){
|
||||||
|
var container = arguments[0];
|
||||||
|
var options = (arguments[1]) ? arguments[1] : {};
|
||||||
|
|
||||||
|
picker.settings = jQuery.extend({
|
||||||
|
color: '#ffffff',
|
||||||
|
imagepath: '',
|
||||||
|
change: function(hex){}
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
|
||||||
|
picker.fn = {};
|
||||||
|
picker.fn.change = picker.settings.change;
|
||||||
|
picker.el = {};
|
||||||
|
picker.el.container = jQuery(container);
|
||||||
|
picker.io = {shift: false};
|
||||||
|
picker.mouse = {wheel: false, slider: false};
|
||||||
|
picker.math = {};
|
||||||
|
picker.math.angle = 0;
|
||||||
|
picker.math.center = {x: 128, y: 128};
|
||||||
|
picker.math.radius = 128;
|
||||||
|
picker.color = {};
|
||||||
|
picker.color.hue = 0;
|
||||||
|
picker.color.sat = 0;
|
||||||
|
picker.color.val = 1;
|
||||||
|
picker.color.hex = "ffffff";
|
||||||
|
picker.build().hex(picker.settings.color);
|
||||||
|
return picker;
|
||||||
|
};
|
||||||
|
return picker.init(container, options);
|
||||||
|
};
|
|
@ -0,0 +1,79 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* credits for this plugin go to brandonaaron.net
|
||||||
|
*
|
||||||
|
* unfortunately his site is down
|
||||||
|
*
|
||||||
|
* @param {Object} up
|
||||||
|
* @param {Object} down
|
||||||
|
* @param {Object} preventDefault
|
||||||
|
*/
|
||||||
|
jQuery.fn.extend({
|
||||||
|
mousewheel: function(up, down, preventDefault) {
|
||||||
|
return this.hover(
|
||||||
|
function() {
|
||||||
|
jQuery.event.mousewheel.giveFocus(this, up, down, preventDefault);
|
||||||
|
},
|
||||||
|
function() {
|
||||||
|
jQuery.event.mousewheel.removeFocus(this);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
mousewheeldown: function(fn, preventDefault) {
|
||||||
|
return this.mousewheel(function(){}, fn, preventDefault);
|
||||||
|
},
|
||||||
|
mousewheelup: function(fn, preventDefault) {
|
||||||
|
return this.mousewheel(fn, function(){}, preventDefault);
|
||||||
|
},
|
||||||
|
unmousewheel: function() {
|
||||||
|
return this.each(function() {
|
||||||
|
jQuery(this).unmouseover().unmouseout();
|
||||||
|
jQuery.event.mousewheel.removeFocus(this);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
unmousewheeldown: jQuery.fn.unmousewheel,
|
||||||
|
unmousewheelup: jQuery.fn.unmousewheel
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
jQuery.event.mousewheel = {
|
||||||
|
giveFocus: function(el, up, down, preventDefault) {
|
||||||
|
if (el._handleMousewheel) jQuery(el).unmousewheel();
|
||||||
|
|
||||||
|
if (preventDefault == window.undefined && down && down.constructor != Function) {
|
||||||
|
preventDefault = down;
|
||||||
|
down = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
el._handleMousewheel = function(event) {
|
||||||
|
if (!event) event = window.event;
|
||||||
|
if (preventDefault)
|
||||||
|
if (event.preventDefault) event.preventDefault();
|
||||||
|
else event.returnValue = false;
|
||||||
|
var delta = 0;
|
||||||
|
if (event.wheelDelta) {
|
||||||
|
delta = event.wheelDelta/120;
|
||||||
|
if (window.opera) delta = -delta;
|
||||||
|
} else if (event.detail) {
|
||||||
|
delta = -event.detail/3;
|
||||||
|
}
|
||||||
|
if (up && (delta > 0 || !down))
|
||||||
|
up.apply(el, [event, delta]);
|
||||||
|
else if (down && delta < 0)
|
||||||
|
down.apply(el, [event, delta]);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (window.addEventListener)
|
||||||
|
window.addEventListener('DOMMouseScroll', el._handleMousewheel, false);
|
||||||
|
window.onmousewheel = document.onmousewheel = el._handleMousewheel;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeFocus: function(el) {
|
||||||
|
if (!el._handleMousewheel) return;
|
||||||
|
|
||||||
|
if (window.removeEventListener)
|
||||||
|
window.removeEventListener('DOMMouseScroll', el._handleMousewheel, false);
|
||||||
|
window.onmousewheel = document.onmousewheel = null;
|
||||||
|
el._handleMousewheel = null;
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue