mirror of
https://github.com/jquery/jquery-ui.git
synced 2026-02-08 19:55:04 -05:00
- moved all default css files into themes/default
- added Colorpicker, heavily modified for UI (thanks Stefan!)
This commit is contained in:
Paul Bakaus
358
tests/visual/colorpicker.html
Normal file
358
tests/visual/colorpicker.html
Normal file
@@ -0,0 +1,358 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
|
||||
<link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
|
||||
<title>ColorPicker</title>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
|
||||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
fieldset,img {
|
||||
border:0;
|
||||
}
|
||||
address,caption,cite,code,dfn,em,strong,th,var {
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
}
|
||||
ol,ul {
|
||||
list-style:none;
|
||||
}
|
||||
caption,th {
|
||||
text-align:left;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-size:100%;
|
||||
font-weight:normal;
|
||||
}
|
||||
q:before,q:after {
|
||||
content:'';
|
||||
}
|
||||
abbr,acronym { border:0;
|
||||
}
|
||||
html, body {
|
||||
background-color: #fff;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #52697E;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
}
|
||||
.wrapper {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
h1 {
|
||||
font-size: 21px;
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.navigationTabs {
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.navigationTabs li {
|
||||
float: left;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
.navigationTabs li a{
|
||||
float: left;
|
||||
dispaly: block;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
color: #52697E;
|
||||
background-color: #eee;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navigationTabs li a:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.navigationTabs li a.active {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 0px solid;
|
||||
}
|
||||
.tabsContent {
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0px solid;
|
||||
width: 698px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tab {
|
||||
padding: 16px;
|
||||
display: block;
|
||||
}
|
||||
.tab h2 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
.tab h3 {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tab p {
|
||||
margin-top: 16px;
|
||||
clear: both;
|
||||
}
|
||||
.tab ul {
|
||||
margin-top: 16px;
|
||||
list-style: disc;
|
||||
}
|
||||
.tab li {
|
||||
margin: 10px 0 0 35px;
|
||||
}
|
||||
.tab a {
|
||||
color: #8FB0CF;
|
||||
}
|
||||
.tab strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab pre {
|
||||
font-size: 11px;
|
||||
margin-top: 20px;
|
||||
width: 668px;
|
||||
overflow: auto;
|
||||
clear: both;
|
||||
}
|
||||
.tab table {
|
||||
width: 100%;
|
||||
}
|
||||
.tab table td {
|
||||
padding: 6px 10px 6px 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tab dt {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#colorSelector {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url(../../themes/default/images/select.png);
|
||||
}
|
||||
#colorSelector div {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../../themes/default/images/select.png) center;
|
||||
}
|
||||
#colorSelector2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url(../../themes/default/images/select2.png);
|
||||
}
|
||||
#colorSelector2 div {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: url(../../themes/default/images/select2.png) center;
|
||||
}
|
||||
#colorpickerHolder2 {
|
||||
top: 32px;
|
||||
left: 0;
|
||||
width: 356px;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker {
|
||||
background-image: url(../../themes/default/images/custom_background.png);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-hue div {
|
||||
background-image: url(../../themes/default/images/custom_indic.gif);
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-hex {
|
||||
background-image: url(../../themes/default/images/custom_hex.png);
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-rgb-r {
|
||||
background-image: url(../../themes/default/images/custom_rgb_r.png);
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-rgb-g {
|
||||
background-image: url(../../themes/default/images/custom_rgb_g.png);
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-rgb-b {
|
||||
background-image: url(../../themes/default/images/custom_rgb_b.png);
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-hsb-s {
|
||||
background-image: url(../../themes/default/images/custom_hsb_s.png);
|
||||
display: none;
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-hsb-h {
|
||||
background-image: url(../../themes/default/images/custom_hsb_h.png);
|
||||
display: none;
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-hsb-b {
|
||||
background-image: url(../../themes/default/images/custom_hsb_b.png);
|
||||
display: none;
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker-submit {
|
||||
background-image: url(../../themes/default/images/colorpicker_submit.png);
|
||||
}
|
||||
#colorpickerHolder2 .ui-colorpicker input {
|
||||
color: #778398;
|
||||
}
|
||||
#customWidget {
|
||||
position: relative;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="../../themes/default/ui.colorpicker.css" type="text/css" media="screen" title="no title" charset="utf-8">
|
||||
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.colorpicker.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$('#colorpickerHolder').colorpicker({ flat: true });
|
||||
$('#colorpickerHolder2').colorpicker({
|
||||
flat: true,
|
||||
color: '#00ff00',
|
||||
submit: function(e, ui) {
|
||||
$('#colorSelector2 div').css('backgroundColor', '#' + ui.hex);
|
||||
}
|
||||
});
|
||||
$('#colorpickerHolder2>div').css('position', 'absolute');
|
||||
var widt = false;
|
||||
$('#colorSelector2').bind('click', function() {
|
||||
$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
|
||||
widt = !widt;
|
||||
});
|
||||
$('#colorpickerField1').colorpicker({
|
||||
submit: function(e, ui) {
|
||||
$('#colorpickerField1').val(ui.hex);
|
||||
},
|
||||
beforeShow: function (e, ui) {
|
||||
$(this).colorpicker("setColor", this.value);
|
||||
}
|
||||
})
|
||||
.bind('keyup', function(){
|
||||
$(this).colorpicker("setColor", this.value);
|
||||
});
|
||||
$('#colorSelector').colorpicker({
|
||||
color: '#0000ff',
|
||||
show: function (e, ui) {
|
||||
$(this).data("colorpicker").picker.fadeIn(500);
|
||||
return false;
|
||||
},
|
||||
hide: function (e, ui) {
|
||||
$(this).data("colorpicker").picker.fadeOut(500);
|
||||
return false;
|
||||
},
|
||||
change: function (e, ui) {
|
||||
$('#colorSelector div').css('backgroundColor', '#' + ui.hex);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>Color Picker</h1>
|
||||
<ul class="navigationTabs">
|
||||
<li><a href="#about" rel="about">About</a></li>
|
||||
</ul>
|
||||
<div class="tabsContent">
|
||||
<div class="tab">
|
||||
<h2>About</h2>
|
||||
<p>A simple component to select color in the same way you select color in Adobe Photoshop</p>
|
||||
<h3>Features</h3>
|
||||
<ul>
|
||||
<li>Flat mode - as element in page</li>
|
||||
<li>Powerful controls for color selection</li>
|
||||
<li>Easy to customize the look by changing some images</li>
|
||||
<li>Fits into the viewport</li>
|
||||
</ul>
|
||||
<h3>Examples</h3>
|
||||
<p>Flat mode.</p>
|
||||
<p id="colorpickerHolder">
|
||||
</p>
|
||||
<pre>
|
||||
$('#colorpickerHolder').ColorPicker({flat: true});
|
||||
</pre>
|
||||
<p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
|
||||
<div id="customWidget">
|
||||
<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
|
||||
<div id="colorpickerHolder2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
|
||||
<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
|
||||
<pre>
|
||||
$('#colorpickerField1').ColorPicker({
|
||||
onSubmit: function(hsb, hex, rgb) {
|
||||
$('#colorpickerField1').val(hex);
|
||||
},
|
||||
onBeforeShow: function () {
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
}
|
||||
})
|
||||
.bind('keyup', function(){
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
});
|
||||
</pre>
|
||||
<p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
|
||||
<p>
|
||||
<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
|
||||
</p>
|
||||
<pre>
|
||||
$('#colorSelector').ColorPicker({
|
||||
color: '#0000ff',
|
||||
onShow: function (colpkr) {
|
||||
$(colpkr).fadeIn(500);
|
||||
return false;
|
||||
},
|
||||
onHide: function (colpkr) {
|
||||
$(colpkr).fadeOut(500);
|
||||
return false;
|
||||
},
|
||||
onChange: function (hsb, hex, rgb) {
|
||||
$('#colorSelector div').css('backgroundColor', '#' + hex);
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
themes/default/images/colorpicker_background.png
Normal file
BIN
themes/default/images/colorpicker_background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
themes/default/images/colorpicker_hex.png
Normal file
BIN
themes/default/images/colorpicker_hex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 B |
BIN
themes/default/images/colorpicker_hsb_b.png
Normal file
BIN
themes/default/images/colorpicker_hsb_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
BIN
themes/default/images/colorpicker_hsb_h.png
Normal file
BIN
themes/default/images/colorpicker_hsb_h.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1012 B |
BIN
themes/default/images/colorpicker_hsb_s.png
Normal file
BIN
themes/default/images/colorpicker_hsb_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
themes/default/images/colorpicker_indic.gif
Normal file
BIN
themes/default/images/colorpicker_indic.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
BIN
themes/default/images/colorpicker_overlay.png
Normal file
BIN
themes/default/images/colorpicker_overlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
themes/default/images/colorpicker_rgb_b.png
Normal file
BIN
themes/default/images/colorpicker_rgb_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
BIN
themes/default/images/colorpicker_rgb_g.png
Normal file
BIN
themes/default/images/colorpicker_rgb_g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
themes/default/images/colorpicker_rgb_r.png
Normal file
BIN
themes/default/images/colorpicker_rgb_r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
themes/default/images/colorpicker_select.gif
Normal file
BIN
themes/default/images/colorpicker_select.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 B |
BIN
themes/default/images/colorpicker_submit.png
Normal file
BIN
themes/default/images/colorpicker_submit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 984 B |
BIN
themes/default/images/custom_background.png
Normal file
BIN
themes/default/images/custom_background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
themes/default/images/custom_hex.png
Normal file
BIN
themes/default/images/custom_hex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 B |
BIN
themes/default/images/custom_hsb_b.png
Normal file
BIN
themes/default/images/custom_hsb_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
themes/default/images/custom_hsb_h.png
Normal file
BIN
themes/default/images/custom_hsb_h.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
BIN
themes/default/images/custom_hsb_s.png
Normal file
BIN
themes/default/images/custom_hsb_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
themes/default/images/custom_indic.gif
Normal file
BIN
themes/default/images/custom_indic.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
BIN
themes/default/images/custom_rgb_b.png
Normal file
BIN
themes/default/images/custom_rgb_b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1008 B |
BIN
themes/default/images/custom_rgb_g.png
Normal file
BIN
themes/default/images/custom_rgb_g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
themes/default/images/custom_rgb_r.png
Normal file
BIN
themes/default/images/custom_rgb_r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
BIN
themes/default/images/custom_submit.png
Normal file
BIN
themes/default/images/custom_submit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 997 B |
BIN
themes/default/images/select.png
Normal file
BIN
themes/default/images/select.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 506 B |
BIN
themes/default/images/select2.png
Normal file
BIN
themes/default/images/select2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 518 B |
161
themes/default/ui.colorpicker.css
Normal file
161
themes/default/ui.colorpicker.css
Normal file
@@ -0,0 +1,161 @@
|
||||
.ui-colorpicker {
|
||||
width: 356px;
|
||||
height: 176px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
background: url(images/colorpicker_background.png);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
display: none;
|
||||
}
|
||||
.ui-colorpicker-color {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
left: 14px;
|
||||
top: 13px;
|
||||
position: absolute;
|
||||
background: #f00;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.ui-colorpicker-color div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: url(images/colorpicker_overlay.png);
|
||||
}
|
||||
.ui-colorpicker-color div div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
overflow: hidden;
|
||||
background: url(images/colorpicker_select.gif);
|
||||
margin: -5px 0 0 -5px;
|
||||
}
|
||||
.ui-colorpicker-hue {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 171px;
|
||||
width: 35px;
|
||||
height: 150px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.ui-colorpicker-hue div {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 9px;
|
||||
overflow: hidden;
|
||||
background: url(images/colorpicker_indic.gif) left top;
|
||||
margin: -4px 0 0 0;
|
||||
left: 0px;
|
||||
}
|
||||
.ui-colorpicker-new-color {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
left: 213px;
|
||||
top: 13px;
|
||||
background: #f00;
|
||||
}
|
||||
.ui-colorpicker-current-color {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
left: 283px;
|
||||
top: 13px;
|
||||
background: #f00;
|
||||
}
|
||||
.colorpicker input {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #898989;
|
||||
top: 4px;
|
||||
right: 11px;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 11px;
|
||||
}
|
||||
.ui-colorpicker-hex {
|
||||
position: absolute;
|
||||
width: 72px;
|
||||
height: 22px;
|
||||
background: url(images/colorpicker_hex.png) top;
|
||||
left: 212px;
|
||||
top: 142px;
|
||||
}
|
||||
.ui-colorpicker-hex input {
|
||||
right: 6px;
|
||||
}
|
||||
.ui-colorpicker-field {
|
||||
height: 22px;
|
||||
width: 62px;
|
||||
background-position: top;
|
||||
position: absolute;
|
||||
}
|
||||
.ui-colorpicker-field span {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 22px;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.ui-colorpicker-rgb-r {
|
||||
background-image: url(images/colorpicker_rgb_r.png);
|
||||
top: 52px;
|
||||
left: 212px;
|
||||
}
|
||||
.ui-colorpicker-rgb-g {
|
||||
background-image: url(images/colorpicker_rgb_g.png);
|
||||
top: 82px;
|
||||
left: 212px;
|
||||
}
|
||||
.ui-colorpicker-rgb-b {
|
||||
background-image: url(images/colorpicker_rgb_b.png);
|
||||
top: 112px;
|
||||
left: 212px;
|
||||
}
|
||||
.ui-colorpicker-hsb-h {
|
||||
background-image: url(images/colorpicker_hsb_h.png);
|
||||
top: 52px;
|
||||
left: 282px;
|
||||
}
|
||||
.ui-colorpicker-hsb-s {
|
||||
background-image: url(images/colorpicker_hsb_s.png);
|
||||
top: 82px;
|
||||
left: 282px;
|
||||
}
|
||||
.ui-colorpicker-hsb-b {
|
||||
background-image: url(images/colorpicker_hsb_b.png);
|
||||
top: 112px;
|
||||
left: 282px;
|
||||
}
|
||||
.ui-colorpicker-submit {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(images/colorpicker_submit.png) top;
|
||||
left: 322px;
|
||||
top: 142px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui-colorpicker-focus {
|
||||
background-position: center;
|
||||
}
|
||||
.ui-colorpicker-hex.ui-colorpicker-focus {
|
||||
background-position: bottom;
|
||||
}
|
||||
.ui-colorpicker-submit.ui-colorpicker-focus {
|
||||
background-position: bottom;
|
||||
}
|
||||
.ui-colorpicker-slider {
|
||||
background-position: bottom;
|
||||
}
|
||||
@@ -1,207 +1,207 @@
|
||||
/* Main Style Sheet for jQuery UI date picker */
|
||||
#ui-datepicker-div, .ui-datepicker-inline {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #ddd;
|
||||
width: 185px;
|
||||
}
|
||||
#ui-datepicker-div {
|
||||
display: none;
|
||||
border: 1px solid #777;
|
||||
z-index: 9999; /*must have*/
|
||||
}
|
||||
.ui-datepicker-inline {
|
||||
float: left;
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
.ui-datepicker-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.ui-datepicker-dialog {
|
||||
padding: 5px !important;
|
||||
border: 4px ridge #ddd !important;
|
||||
}
|
||||
button.ui-datepicker-trigger {
|
||||
width: 25px;
|
||||
}
|
||||
img.ui-datepicker-trigger {
|
||||
margin: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui-datepicker-prompt {
|
||||
float: left;
|
||||
padding: 2px;
|
||||
background: #ddd;
|
||||
color: #000;
|
||||
}
|
||||
* html .ui-datepicker-prompt {
|
||||
width: 185px;
|
||||
}
|
||||
.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
|
||||
clear: both;
|
||||
float: left;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.ui-datepicker-control {
|
||||
background: #400;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
.ui-datepicker-links {
|
||||
background: #000;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
.ui-datepicker-control, .ui-datepicker-links {
|
||||
font-weight: bold;
|
||||
font-size: 80%;
|
||||
}
|
||||
.ui-datepicker-links label { /* disabled links */
|
||||
padding: 2px 5px;
|
||||
color: #888;
|
||||
}
|
||||
.ui-datepicker-clear, .ui-datepicker-prev {
|
||||
float: left;
|
||||
width: 34%;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.ui-datepicker-current {
|
||||
float: left;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.ui-datepicker-close, .ui-datepicker-next {
|
||||
float: right;
|
||||
width: 34%;
|
||||
text-align: right;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-datepicker-header {
|
||||
padding: 1px 0 3px;
|
||||
background: #333;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
height: 1.3em;
|
||||
}
|
||||
.ui-datepicker-header select {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-datepicker {
|
||||
background: #ccc;
|
||||
text-align: center;
|
||||
font-size: 100%;
|
||||
}
|
||||
.ui-datepicker a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.ui-datepicker-title-row {
|
||||
background: #777;
|
||||
}
|
||||
.ui-datepicker-days-row {
|
||||
background: #eee;
|
||||
color: #666;
|
||||
}
|
||||
.ui-datepicker-week-col {
|
||||
background: #777;
|
||||
color: #fff;
|
||||
}
|
||||
.ui-datepicker-days-cell {
|
||||
color: #000;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.ui-datepicker-days-cell a{
|
||||
display: block;
|
||||
}
|
||||
.ui-datepicker-week-end-cell {
|
||||
background: #ddd;
|
||||
}
|
||||
.ui-datepicker-title-row .ui-datepicker-week-end-cell {
|
||||
background: #777;
|
||||
}
|
||||
.ui-datepicker-days-cell-over {
|
||||
background: #fff;
|
||||
border: 1px solid #777;
|
||||
}
|
||||
.ui-datepicker-unselectable {
|
||||
color: #888;
|
||||
}
|
||||
.ui-datepicker-today {
|
||||
background: #fcc !important;
|
||||
}
|
||||
.ui-datepicker-current-day {
|
||||
background: #999 !important;
|
||||
}
|
||||
.ui-datepicker-status {
|
||||
background: #ddd;
|
||||
width: 100%;
|
||||
font-size: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ________ Datepicker Links _______
|
||||
|
||||
** Reset link properties and then override them with !important */
|
||||
#ui-datepicker-div a, .ui-datepicker-inline a {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: #000;
|
||||
}
|
||||
.ui-datepicker-inline .ui-datepicker-links a {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
.ui-datepicker-control a, .ui-datepicker-links a {
|
||||
padding: 2px 5px !important;
|
||||
color: #eee !important;
|
||||
}
|
||||
.ui-datepicker-title-row a {
|
||||
color: #eee !important;
|
||||
}
|
||||
.ui-datepicker-control a:hover {
|
||||
background: #fdd !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
.ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
|
||||
background: #ddd !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
/* ___________ MULTIPLE MONTHS _________*/
|
||||
|
||||
.ui-datepicker-multi .ui-datepicker {
|
||||
border: 1px solid #777;
|
||||
}
|
||||
.ui-datepicker-one-month {
|
||||
float: left;
|
||||
width: 185px;
|
||||
}
|
||||
.ui-datepicker-new-row {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/* ___________ IE6 IFRAME FIX ________ */
|
||||
|
||||
.ui-datepicker-cover {
|
||||
display: none; /*sorry for IE5*/
|
||||
display/**/: block; /*sorry for IE5*/
|
||||
position: absolute; /*must have*/
|
||||
z-index: -1; /*must have*/
|
||||
filter: mask(); /*must have*/
|
||||
top: -4px; /*must have*/
|
||||
left: -4px; /*must have*/
|
||||
width: 200px; /*must have*/
|
||||
height: 200px; /*must have*/
|
||||
}
|
||||
/* Main Style Sheet for jQuery UI date picker */
|
||||
#ui-datepicker-div, .ui-datepicker-inline {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #ddd;
|
||||
width: 185px;
|
||||
}
|
||||
#ui-datepicker-div {
|
||||
display: none;
|
||||
border: 1px solid #777;
|
||||
z-index: 9999; /*must have*/
|
||||
}
|
||||
.ui-datepicker-inline {
|
||||
float: left;
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
.ui-datepicker-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.ui-datepicker-dialog {
|
||||
padding: 5px !important;
|
||||
border: 4px ridge #ddd !important;
|
||||
}
|
||||
button.ui-datepicker-trigger {
|
||||
width: 25px;
|
||||
}
|
||||
img.ui-datepicker-trigger {
|
||||
margin: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui-datepicker-prompt {
|
||||
float: left;
|
||||
padding: 2px;
|
||||
background: #ddd;
|
||||
color: #000;
|
||||
}
|
||||
* html .ui-datepicker-prompt {
|
||||
width: 185px;
|
||||
}
|
||||
.ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker {
|
||||
clear: both;
|
||||
float: left;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.ui-datepicker-control {
|
||||
background: #400;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
.ui-datepicker-links {
|
||||
background: #000;
|
||||
padding: 2px 0px;
|
||||
}
|
||||
.ui-datepicker-control, .ui-datepicker-links {
|
||||
font-weight: bold;
|
||||
font-size: 80%;
|
||||
}
|
||||
.ui-datepicker-links label { /* disabled links */
|
||||
padding: 2px 5px;
|
||||
color: #888;
|
||||
}
|
||||
.ui-datepicker-clear, .ui-datepicker-prev {
|
||||
float: left;
|
||||
width: 34%;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
.ui-datepicker-current {
|
||||
float: left;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
.ui-datepicker-close, .ui-datepicker-next {
|
||||
float: right;
|
||||
width: 34%;
|
||||
text-align: right;
|
||||
}
|
||||
.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-datepicker-header {
|
||||
padding: 1px 0 3px;
|
||||
background: #333;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
height: 1.3em;
|
||||
}
|
||||
.ui-datepicker-header select {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-datepicker {
|
||||
background: #ccc;
|
||||
text-align: center;
|
||||
font-size: 100%;
|
||||
}
|
||||
.ui-datepicker a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.ui-datepicker-title-row {
|
||||
background: #777;
|
||||
}
|
||||
.ui-datepicker-days-row {
|
||||
background: #eee;
|
||||
color: #666;
|
||||
}
|
||||
.ui-datepicker-week-col {
|
||||
background: #777;
|
||||
color: #fff;
|
||||
}
|
||||
.ui-datepicker-days-cell {
|
||||
color: #000;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
.ui-datepicker-days-cell a{
|
||||
display: block;
|
||||
}
|
||||
.ui-datepicker-week-end-cell {
|
||||
background: #ddd;
|
||||
}
|
||||
.ui-datepicker-title-row .ui-datepicker-week-end-cell {
|
||||
background: #777;
|
||||
}
|
||||
.ui-datepicker-days-cell-over {
|
||||
background: #fff;
|
||||
border: 1px solid #777;
|
||||
}
|
||||
.ui-datepicker-unselectable {
|
||||
color: #888;
|
||||
}
|
||||
.ui-datepicker-today {
|
||||
background: #fcc !important;
|
||||
}
|
||||
.ui-datepicker-current-day {
|
||||
background: #999 !important;
|
||||
}
|
||||
.ui-datepicker-status {
|
||||
background: #ddd;
|
||||
width: 100%;
|
||||
font-size: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ________ Datepicker Links _______
|
||||
|
||||
** Reset link properties and then override them with !important */
|
||||
#ui-datepicker-div a, .ui-datepicker-inline a {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: #000;
|
||||
}
|
||||
.ui-datepicker-inline .ui-datepicker-links a {
|
||||
padding: 0 5px !important;
|
||||
}
|
||||
.ui-datepicker-control a, .ui-datepicker-links a {
|
||||
padding: 2px 5px !important;
|
||||
color: #eee !important;
|
||||
}
|
||||
.ui-datepicker-title-row a {
|
||||
color: #eee !important;
|
||||
}
|
||||
.ui-datepicker-control a:hover {
|
||||
background: #fdd !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
.ui-datepicker-links a:hover, .ui-datepicker-title-row a:hover {
|
||||
background: #ddd !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
/* ___________ MULTIPLE MONTHS _________*/
|
||||
|
||||
.ui-datepicker-multi .ui-datepicker {
|
||||
border: 1px solid #777;
|
||||
}
|
||||
.ui-datepicker-one-month {
|
||||
float: left;
|
||||
width: 185px;
|
||||
}
|
||||
.ui-datepicker-new-row {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/* ___________ IE6 IFRAME FIX ________ */
|
||||
|
||||
.ui-datepicker-cover {
|
||||
display: none; /*sorry for IE5*/
|
||||
display/**/: block; /*sorry for IE5*/
|
||||
position: absolute; /*must have*/
|
||||
z-index: -1; /*must have*/
|
||||
filter: mask(); /*must have*/
|
||||
top: -4px; /*must have*/
|
||||
left: -4px; /*must have*/
|
||||
width: 200px; /*must have*/
|
||||
height: 200px; /*must have*/
|
||||
}
|
||||
472
ui/ui.colorpicker.js
Normal file
472
ui/ui.colorpicker.js
Normal file
@@ -0,0 +1,472 @@
|
||||
/*
|
||||
* jQuery UI Draggable
|
||||
*
|
||||
* Copyright (c) 2008 Stefan Petre, Paul Bakaus
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*
|
||||
* http://docs.jquery.com/UI/Draggables
|
||||
*
|
||||
* Depends:
|
||||
* ui.core.js
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
$.widget("ui.colorpicker", {
|
||||
|
||||
init: function() {
|
||||
|
||||
this.charMin = 65;
|
||||
var o = this.options, self = this,
|
||||
tpl = '<div class="ui-colorpicker"><div class="ui-colorpicker-color"><div><div></div></div></div><div class="ui-colorpicker-hue"><div></div></div><div class="ui-colorpicker-new-color"></div><div class="ui-colorpicker-current-color"></div><div class="ui-colorpicker-hex"><input type="text" maxlength="6" size="6" /></div><div class="ui-colorpicker-rgb-r ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-rgb-g ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-rgb-b ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-h ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-s ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-b ui-colorpicker-field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-submit"></div></div>';
|
||||
|
||||
if (typeof o.color == 'string') {
|
||||
this.color = this.HexToHSB(o.color);
|
||||
} else if (o.color.r != undefined && o.color.g != undefined && o.color.b != undefined) {
|
||||
this.color = this.RGBToHSB(o.color);
|
||||
} else if (o.color.h != undefined && o.color.s != undefined && o.color.b != undefined) {
|
||||
this.color = this.fixHSB(o.color);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.origColor = this.color;
|
||||
this.picker = $(tpl);
|
||||
|
||||
if (o.flat) {
|
||||
this.picker.appendTo(this.element).show();
|
||||
} else {
|
||||
this.picker.appendTo(document.body);
|
||||
}
|
||||
|
||||
this.fields = this.picker.find('input')
|
||||
.bind('keydown', function(e) { return self.keyDown.call(self, e); })
|
||||
.bind('change', function(e) { return self.change.call(self, e); })
|
||||
.bind('blur', function(e) { return self.blur.call(self, e); })
|
||||
.bind('focus', function(e) { return self.focus.call(self, e); });
|
||||
|
||||
this.picker.find('span').bind('mousedown', function(e) { return self.downIncrement.call(self, e); });
|
||||
|
||||
this.selector = this.picker.find('div.ui-colorpicker-color').bind('mousedown', function(e) { return self.downSelector.call(self, e); });
|
||||
this.selectorIndic = this.selector.find('div div');
|
||||
this.hue = this.picker.find('div.ui-colorpicker-hue div');
|
||||
this.picker.find('div.ui-colorpicker-hue').bind('mousedown', function(e) { return self.downHue.call(self, e); });
|
||||
|
||||
this.newColor = this.picker.find('div.ui-colorpicker-new-color');
|
||||
this.currentColor = this.picker.find('div.ui-colorpicker-current-color');
|
||||
|
||||
this.picker.find('div.ui-colorpicker-submit')
|
||||
.bind('mouseenter', function(e) { return self.enterSubmit.call(self, e); })
|
||||
.bind('mouseleave', function(e) { return self.leaveSubmit.call(self, e); })
|
||||
.bind('click', function(e) { return self.clickSubmit.call(self, e); });
|
||||
|
||||
this.fillRGBFields(this.color);
|
||||
this.fillHSBFields(this.color);
|
||||
this.fillHexFields(this.color);
|
||||
this.setHue(this.color);
|
||||
this.setSelector(this.color);
|
||||
this.setCurrentColor(this.color);
|
||||
this.setNewColor(this.color);
|
||||
|
||||
if (o.flat) {
|
||||
this.picker.css({
|
||||
position: 'relative',
|
||||
display: 'block'
|
||||
});
|
||||
} else {
|
||||
$(this.element).bind(o.eventName+".colorpicker", function(e) { return self.show.call(self, e); });
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
|
||||
this.picker.remove();
|
||||
this.element.removeData("colorpicker").unbind(".colorpicker");
|
||||
|
||||
},
|
||||
|
||||
fillRGBFields: function(hsb) {
|
||||
var rgb = this.HSBToRGB(hsb);
|
||||
this.fields
|
||||
.eq(1).val(rgb.r).end()
|
||||
.eq(2).val(rgb.g).end()
|
||||
.eq(3).val(rgb.b).end();
|
||||
},
|
||||
fillHSBFields: function(hsb) {
|
||||
this.fields
|
||||
.eq(4).val(hsb.h).end()
|
||||
.eq(5).val(hsb.s).end()
|
||||
.eq(6).val(hsb.b).end();
|
||||
},
|
||||
fillHexFields: function (hsb) {
|
||||
this.fields
|
||||
.eq(0).val(this.HSBToHex(hsb)).end();
|
||||
},
|
||||
setSelector: function(hsb) {
|
||||
this.selector.css('backgroundColor', '#' + this.HSBToHex({h: hsb.h, s: 100, b: 100}));
|
||||
this.selectorIndic.css({
|
||||
left: parseInt(150 * hsb.s/100, 10),
|
||||
top: parseInt(150 * (100-hsb.b)/100, 10)
|
||||
});
|
||||
},
|
||||
setHue: function(hsb) {
|
||||
this.hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
|
||||
},
|
||||
setCurrentColor: function(hsb) {
|
||||
this.currentColor.css('backgroundColor', '#' + this.HSBToHex(hsb));
|
||||
},
|
||||
setNewColor: function(hsb) {
|
||||
this.newColor.css('backgroundColor', '#' + this.HSBToHex(hsb));
|
||||
},
|
||||
keyDown: function(e) {
|
||||
var pressedKey = e.charCode || e.keyCode || -1;
|
||||
if ((pressedKey >= this.charMin && pressedKey <= 90) || pressedKey == 32) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
change: function(e, target) {
|
||||
|
||||
var col;
|
||||
target = target || e.target;
|
||||
if (target.parentNode.className.indexOf('-hex') > 0) {
|
||||
this.color = col = this.HexToHSB(this.value);
|
||||
this.fillRGBFields(col.color);
|
||||
this.fillHSBFields(col);
|
||||
} else if (target.parentNode.className.indexOf('-hsb') > 0) {
|
||||
this.color = col = this.fixHSB({
|
||||
h: parseInt(this.fields.eq(4).val(), 10),
|
||||
s: parseInt(this.fields.eq(5).val(), 10),
|
||||
b: parseInt(this.fields.eq(6).val(), 10)
|
||||
});
|
||||
this.fillRGBFields(col);
|
||||
this.fillHexFields(col);
|
||||
} else {
|
||||
this.color = col = this.RGBToHSB(this.fixRGB({
|
||||
r: parseInt(this.fields.eq(1).val(), 10),
|
||||
g: parseInt(this.fields.eq(2).val(), 10),
|
||||
b: parseInt(this.fields.eq(3).val(), 10)
|
||||
}));
|
||||
this.fillHexFields(col);
|
||||
this.fillHSBFields(col);
|
||||
}
|
||||
this.setSelector(col);
|
||||
this.setHue(col);
|
||||
this.setNewColor(col);
|
||||
|
||||
this.trigger('change', e, { options: this.options, hsb: col, hex: this.HSBToHex(col), rgb: this.HSBToRGB(col) });
|
||||
},
|
||||
blur: function(e) {
|
||||
|
||||
var col = this.color;
|
||||
this.fillRGBFields(col);
|
||||
this.fillHSBFields(col);
|
||||
this.fillHexFields(col);
|
||||
this.setHue(col);
|
||||
this.setSelector(col);
|
||||
this.setNewColor(col);
|
||||
this.fields.parent().removeClass('ui-colorpicker-focus');
|
||||
|
||||
},
|
||||
focus: function(e) {
|
||||
|
||||
this.charMin = e.target.parentNode.className.indexOf('-hex') > 0 ? 70 : 65;
|
||||
this.fields.parent().removeClass('ui-colorpicker-focus');
|
||||
$(e.target.parentNode).addClass('ui-colorpicker-focus');
|
||||
|
||||
},
|
||||
downIncrement: function(e) {
|
||||
|
||||
var field = $(e.target).parent().find('input').focus(), self = this;
|
||||
this.currentIncrement = {
|
||||
el: $(e.target).parent().addClass('ui-colorpicker-slider'),
|
||||
max: e.target.parentNode.className.indexOf('-hsb-h') > 0 ? 360 : (e.target.parentNode.className.indexOf('-hsb') > 0 ? 100 : 255),
|
||||
y: e.pageY,
|
||||
field: field,
|
||||
val: parseInt(field.val(), 10)
|
||||
};
|
||||
$(document).bind('mouseup.cpSlider', function(e) { return self.upIncrement.call(self, e); });
|
||||
$(document).bind('mousemove.cpSlider', function(e) { return self.moveIncrement.call(self, e); });
|
||||
return false;
|
||||
|
||||
},
|
||||
moveIncrement: function(e) {
|
||||
this.currentIncrement.field.val(Math.max(0, Math.min(this.currentIncrement.max, parseInt(this.currentIncrement.val + e.pageY - this.currentIncrement.y, 10))));
|
||||
this.change.apply(this, [e, this.currentIncrement.field.get(0)]);
|
||||
return false;
|
||||
},
|
||||
upIncrement: function(e) {
|
||||
this.currentIncrement.el.removeClass('ui-colorpicker-slider').find('input').focus();
|
||||
this.change.apply(this, [e, this.currentIncrement.field.get(0)]);
|
||||
$(document).unbind('mouseup.cpSlider');
|
||||
$(document).unbind('mousemove.cpSlider');
|
||||
return false;
|
||||
},
|
||||
downHue: function(e) {
|
||||
|
||||
this.currentHue = {
|
||||
y: this.picker.find('div.ui-colorpicker-hue').offset().top
|
||||
};
|
||||
|
||||
this.change.apply(this, [e, this
|
||||
.fields
|
||||
.eq(4)
|
||||
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentHue.y))))/150, 10))
|
||||
.get(0)]);
|
||||
|
||||
var self = this;
|
||||
$(document).bind('mouseup.cpSlider', function(e) { return self.upHue.call(self, e); });
|
||||
$(document).bind('mousemove.cpSlider', function(e) { return self.moveHue.call(self, e); });
|
||||
return false;
|
||||
|
||||
},
|
||||
moveHue: function(e) {
|
||||
|
||||
this.change.apply(this, [e, this
|
||||
.fields
|
||||
.eq(4)
|
||||
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentHue.y))))/150, 10))
|
||||
.get(0)]);
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
upHue: function(e) {
|
||||
$(document).unbind('mouseup.cpSlider');
|
||||
$(document).unbind('mousemove.cpSlider');
|
||||
return false;
|
||||
},
|
||||
downSelector: function(e) {
|
||||
|
||||
var self = this;
|
||||
this.currentSelector = {
|
||||
pos: this.picker.find('div.ui-colorpicker-color').offset()
|
||||
};
|
||||
|
||||
this.change.apply(this, [e, this
|
||||
.fields
|
||||
.eq(6)
|
||||
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentSelector.pos.top))))/150, 10))
|
||||
.end()
|
||||
.eq(5)
|
||||
.val(parseInt(100*(Math.max(0,Math.min(150,(e.pageX - this.currentSelector.pos.left))))/150, 10))
|
||||
.get(0)
|
||||
]);
|
||||
$(document).bind('mouseup.cpSlider', function(e) { return self.upSelector.call(self, e); });
|
||||
$(document).bind('mousemove.cpSlider', function(e) { return self.moveSelector.call(self, e); });
|
||||
return false;
|
||||
|
||||
},
|
||||
moveSelector: function(e) {
|
||||
|
||||
this.change.apply(this, [e, this
|
||||
.fields
|
||||
.eq(6)
|
||||
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(e.pageY - this.currentSelector.pos.top))))/150, 10))
|
||||
.end()
|
||||
.eq(5)
|
||||
.val(parseInt(100*(Math.max(0,Math.min(150,(e.pageX - this.currentSelector.pos.left))))/150, 10))
|
||||
.get(0)
|
||||
]);
|
||||
return false;
|
||||
|
||||
},
|
||||
upSelector: function(e) {
|
||||
$(document).unbind('mouseup.cpSlider');
|
||||
$(document).unbind('mousemove.cpSlider');
|
||||
return false;
|
||||
},
|
||||
enterSubmit: function(e) {
|
||||
this.picker.find('div.ui-colorpicker-submit').addClass('ui-colorpicker-focus');
|
||||
},
|
||||
leaveSubmit: function(e) {
|
||||
this.picker.find('div.ui-colorpicker-submit').removeClass('ui-colorpicker-focus');
|
||||
},
|
||||
clickSubmit: function(e) {
|
||||
|
||||
var col = this.color;
|
||||
this.origColor = col;
|
||||
this.setCurrentColor(col);
|
||||
|
||||
this.trigger("submit", e, { options: this.options, hsb: col, hex: this.HSBToHex(col), rgb: this.HSBToRGB(col) });
|
||||
return false;
|
||||
|
||||
},
|
||||
show: function(e) {
|
||||
|
||||
this.trigger("beforeShow", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) });
|
||||
|
||||
var pos = this.element.offset();
|
||||
var viewPort = this.getScroll();
|
||||
var top = pos.top + this.element[0].offsetHeight;
|
||||
var left = pos.left;
|
||||
if (top + 176 > viewPort.t + Math.min(viewPort.h,viewPort.ih)) {
|
||||
top -= this.element[0].offsetHeight + 176;
|
||||
}
|
||||
if (left + 356 > viewPort.l + Math.min(viewPort.w,viewPort.iw)) {
|
||||
left -= 356;
|
||||
}
|
||||
this.picker.css({left: left + 'px', top: top + 'px'});
|
||||
if (this.trigger("show", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) }) != false) {
|
||||
this.picker.show();
|
||||
}
|
||||
|
||||
var self = this;
|
||||
$(document).bind('mousedown.colorpicker', function(e) { return self.hide.call(self, e); });
|
||||
return false;
|
||||
|
||||
},
|
||||
hide: function(e) {
|
||||
|
||||
if (!this.isChildOf(this.picker[0], e.target, this.picker[0])) {
|
||||
if (this.trigger("hide", e, { options: this.options, hsb: this.color, hex: this.HSBToHex(this.color), rgb: this.HSBToRGB(this.color) }) != false) {
|
||||
this.picker.hide();
|
||||
}
|
||||
$(document).unbind('mousedown.colorpicker');
|
||||
}
|
||||
|
||||
},
|
||||
isChildOf: function(parentEl, el, container) {
|
||||
if (parentEl == el) {
|
||||
return true;
|
||||
}
|
||||
if (parentEl.contains && !$.browser.safari) {
|
||||
return parentEl.contains(el);
|
||||
}
|
||||
if ( parentEl.compareDocumentPosition ) {
|
||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
||||
}
|
||||
var prEl = el.parentNode;
|
||||
while(prEl && prEl != container) {
|
||||
if (prEl == parentEl)
|
||||
return true;
|
||||
prEl = prEl.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getScroll: function() {
|
||||
var t,l,w,h,iw,ih;
|
||||
if (document.documentElement) {
|
||||
t = document.documentElement.scrollTop;
|
||||
l = document.documentElement.scrollLeft;
|
||||
w = document.documentElement.scrollWidth;
|
||||
h = document.documentElement.scrollHeight;
|
||||
} else {
|
||||
t = document.body.scrollTop;
|
||||
l = document.body.scrollLeft;
|
||||
w = document.body.scrollWidth;
|
||||
h = document.body.scrollHeight;
|
||||
}
|
||||
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
|
||||
ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
|
||||
return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
|
||||
},
|
||||
fixHSB: function(hsb) {
|
||||
return {
|
||||
h: Math.min(360, Math.max(0, hsb.h)),
|
||||
s: Math.min(100, Math.max(0, hsb.s)),
|
||||
b: Math.min(100, Math.max(0, hsb.b))
|
||||
};
|
||||
},
|
||||
fixRGB: function(rgb) {
|
||||
return {
|
||||
r: Math.min(255, Math.max(0, rgb.r)),
|
||||
g: Math.min(255, Math.max(0, rgb.g)),
|
||||
b: Math.min(255, Math.max(0, rgb.b))
|
||||
};
|
||||
},
|
||||
HexToRGB: function (hex) {
|
||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
||||
},
|
||||
HexToHSB: function(hex) {
|
||||
return this.RGBToHSB(this.HexToRGB(hex));
|
||||
},
|
||||
RGBToHSB: function(rgb) {
|
||||
var hsb = {};
|
||||
hsb.b = Math.max(Math.max(rgb.r,rgb.g),rgb.b);
|
||||
hsb.s = (hsb.b <= 0) ? 0 : Math.round(100*(hsb.b - Math.min(Math.min(rgb.r,rgb.g),rgb.b))/hsb.b);
|
||||
hsb.b = Math.round((hsb.b /255)*100);
|
||||
if((rgb.r==rgb.g) && (rgb.g==rgb.b)) hsb.h = 0;
|
||||
else if(rgb.r>=rgb.g && rgb.g>=rgb.b) hsb.h = 60*(rgb.g-rgb.b)/(rgb.r-rgb.b);
|
||||
else if(rgb.g>=rgb.r && rgb.r>=rgb.b) hsb.h = 60 + 60*(rgb.g-rgb.r)/(rgb.g-rgb.b);
|
||||
else if(rgb.g>=rgb.b && rgb.b>=rgb.r) hsb.h = 120 + 60*(rgb.b-rgb.r)/(rgb.g-rgb.r);
|
||||
else if(rgb.b>=rgb.g && rgb.g>=rgb.r) hsb.h = 180 + 60*(rgb.b-rgb.g)/(rgb.b-rgb.r);
|
||||
else if(rgb.b>=rgb.r && rgb.r>=rgb.g) hsb.h = 240 + 60*(rgb.r-rgb.g)/(rgb.b-rgb.g);
|
||||
else if(rgb.r>=rgb.b && rgb.b>=rgb.g) hsb.h = 300 + 60*(rgb.r-rgb.b)/(rgb.r-rgb.g);
|
||||
else hsb.h = 0;
|
||||
hsb.h = Math.round(hsb.h);
|
||||
return hsb;
|
||||
},
|
||||
HSBToRGB: function(hsb) {
|
||||
var rgb = {};
|
||||
var h = Math.round(hsb.h);
|
||||
var s = Math.round(hsb.s*255/100);
|
||||
var v = Math.round(hsb.b*255/100);
|
||||
if(s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
var t1 = v;
|
||||
var t2 = (255-s)*v/255;
|
||||
var t3 = (t1-t2)*(h%60)/60;
|
||||
if(h==360) h = 0;
|
||||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3;}
|
||||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3;}
|
||||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3;}
|
||||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3;}
|
||||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3;}
|
||||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3;}
|
||||
else {rgb.r=0; rgb.g=0; rgb.b=0;}
|
||||
}
|
||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||
},
|
||||
RGBToHex: function(rgb) {
|
||||
var hex = [
|
||||
rgb.r.toString(16),
|
||||
rgb.g.toString(16),
|
||||
rgb.b.toString(16)
|
||||
];
|
||||
$.each(hex, function (nr, val) {
|
||||
if (val.length == 1) {
|
||||
hex[nr] = '0' + val;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
},
|
||||
HSBToHex: function(hsb) {
|
||||
return this.RGBToHex(this.HSBToRGB(hsb));
|
||||
},
|
||||
setColor: function(col) {
|
||||
if (typeof col == 'string') {
|
||||
col = this.HexToHSB(col);
|
||||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
||||
col = this.RGBToHSB(col);
|
||||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
||||
col = this.fixHSB(col);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.color = col;
|
||||
this.origColor = col;
|
||||
this.fillRGBFields(col);
|
||||
this.fillHSBFields(col);
|
||||
this.fillHexFields(col);
|
||||
this.setHue(col);
|
||||
this.setSelector(col);
|
||||
this.setCurrentColor(col);
|
||||
this.setNewColor(col);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$.extend($.ui.colorpicker, {
|
||||
defaults: {
|
||||
eventName: 'click',
|
||||
color: 'ff0000',
|
||||
flat: false
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user