diff options
| author | Paul Bakaus <paul.bakaus@googlemail.com> | 2008-07-10 15:52:18 +0000 |
|---|---|---|
| committer | Paul Bakaus <paul.bakaus@googlemail.com> | 2008-07-10 15:52:18 +0000 |
| commit | 979e64bdd20afd4fd096c5fe089d3aa6e3c89880 (patch) | |
| tree | 152f6e6e732b564880774850e6cda0fd0295713b | |
| parent | 0cf0a105e677c363e09a40350933d584d804ed83 (diff) | |
| download | jquery-ui-979e64bdd20afd4fd096c5fe089d3aa6e3c89880.tar.gz jquery-ui-979e64bdd20afd4fd096c5fe089d3aa6e3c89880.zip | |
- moved all default css files into themes/default
- added Colorpicker, heavily modified for UI (thanks Stefan!)
29 files changed, 1198 insertions, 207 deletions
diff --git a/tests/visual/colorpicker.html b/tests/visual/colorpicker.html new file mode 100644 index 000000000..ef99f13fe --- /dev/null +++ b/tests/visual/colorpicker.html @@ -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>
diff --git a/themes/default/images/colorpicker_background.png b/themes/default/images/colorpicker_background.png Binary files differnew file mode 100644 index 000000000..8401572f1 --- /dev/null +++ b/themes/default/images/colorpicker_background.png diff --git a/themes/default/images/colorpicker_hex.png b/themes/default/images/colorpicker_hex.png Binary files differnew file mode 100644 index 000000000..4e532d7c6 --- /dev/null +++ b/themes/default/images/colorpicker_hex.png diff --git a/themes/default/images/colorpicker_hsb_b.png b/themes/default/images/colorpicker_hsb_b.png Binary files differnew file mode 100644 index 000000000..dfac595d0 --- /dev/null +++ b/themes/default/images/colorpicker_hsb_b.png diff --git a/themes/default/images/colorpicker_hsb_h.png b/themes/default/images/colorpicker_hsb_h.png Binary files differnew file mode 100644 index 000000000..3977ed9f2 --- /dev/null +++ b/themes/default/images/colorpicker_hsb_h.png diff --git a/themes/default/images/colorpicker_hsb_s.png b/themes/default/images/colorpicker_hsb_s.png Binary files differnew file mode 100644 index 000000000..a2a699736 --- /dev/null +++ b/themes/default/images/colorpicker_hsb_s.png diff --git a/themes/default/images/colorpicker_indic.gif b/themes/default/images/colorpicker_indic.gif Binary files differnew file mode 100644 index 000000000..f9fa95e28 --- /dev/null +++ b/themes/default/images/colorpicker_indic.gif diff --git a/themes/default/images/colorpicker_overlay.png b/themes/default/images/colorpicker_overlay.png Binary files differnew file mode 100644 index 000000000..561cdd9c5 --- /dev/null +++ b/themes/default/images/colorpicker_overlay.png diff --git a/themes/default/images/colorpicker_rgb_b.png b/themes/default/images/colorpicker_rgb_b.png Binary files differnew file mode 100644 index 000000000..dfac595d0 --- /dev/null +++ b/themes/default/images/colorpicker_rgb_b.png diff --git a/themes/default/images/colorpicker_rgb_g.png b/themes/default/images/colorpicker_rgb_g.png Binary files differnew file mode 100644 index 000000000..72b32760a --- /dev/null +++ b/themes/default/images/colorpicker_rgb_g.png diff --git a/themes/default/images/colorpicker_rgb_r.png b/themes/default/images/colorpicker_rgb_r.png Binary files differnew file mode 100644 index 000000000..4855fe03f --- /dev/null +++ b/themes/default/images/colorpicker_rgb_r.png diff --git a/themes/default/images/colorpicker_select.gif b/themes/default/images/colorpicker_select.gif Binary files differnew file mode 100644 index 000000000..599f7f13a --- /dev/null +++ b/themes/default/images/colorpicker_select.gif diff --git a/themes/default/images/colorpicker_submit.png b/themes/default/images/colorpicker_submit.png Binary files differnew file mode 100644 index 000000000..7f4c0825f --- /dev/null +++ b/themes/default/images/colorpicker_submit.png diff --git a/themes/default/images/custom_background.png b/themes/default/images/custom_background.png Binary files differnew file mode 100644 index 000000000..cf55ffdd6 --- /dev/null +++ b/themes/default/images/custom_background.png diff --git a/themes/default/images/custom_hex.png b/themes/default/images/custom_hex.png Binary files differnew file mode 100644 index 000000000..888f44449 --- /dev/null +++ b/themes/default/images/custom_hex.png diff --git a/themes/default/images/custom_hsb_b.png b/themes/default/images/custom_hsb_b.png Binary files differnew file mode 100644 index 000000000..2f99dae8e --- /dev/null +++ b/themes/default/images/custom_hsb_b.png diff --git a/themes/default/images/custom_hsb_h.png b/themes/default/images/custom_hsb_h.png Binary files differnew file mode 100644 index 000000000..a217e9218 --- /dev/null +++ b/themes/default/images/custom_hsb_h.png diff --git a/themes/default/images/custom_hsb_s.png b/themes/default/images/custom_hsb_s.png Binary files differnew file mode 100644 index 000000000..7826b4150 --- /dev/null +++ b/themes/default/images/custom_hsb_s.png diff --git a/themes/default/images/custom_indic.gif b/themes/default/images/custom_indic.gif Binary files differnew file mode 100644 index 000000000..222fb94cf --- /dev/null +++ b/themes/default/images/custom_indic.gif diff --git a/themes/default/images/custom_rgb_b.png b/themes/default/images/custom_rgb_b.png Binary files differnew file mode 100644 index 000000000..80764e5d6 --- /dev/null +++ b/themes/default/images/custom_rgb_b.png diff --git a/themes/default/images/custom_rgb_g.png b/themes/default/images/custom_rgb_g.png Binary files differnew file mode 100644 index 000000000..fc9778be1 --- /dev/null +++ b/themes/default/images/custom_rgb_g.png diff --git a/themes/default/images/custom_rgb_r.png b/themes/default/images/custom_rgb_r.png Binary files differnew file mode 100644 index 000000000..91b0cd4c5 --- /dev/null +++ b/themes/default/images/custom_rgb_r.png diff --git a/themes/default/images/custom_submit.png b/themes/default/images/custom_submit.png Binary files differnew file mode 100644 index 000000000..cd202cd93 --- /dev/null +++ b/themes/default/images/custom_submit.png diff --git a/themes/default/images/select.png b/themes/default/images/select.png Binary files differnew file mode 100644 index 000000000..21213bfd5 --- /dev/null +++ b/themes/default/images/select.png diff --git a/themes/default/images/select2.png b/themes/default/images/select2.png Binary files differnew file mode 100644 index 000000000..2cd2cabeb --- /dev/null +++ b/themes/default/images/select2.png diff --git a/themes/jquery.autocomplete.css b/themes/default/ui.autocomplete.css index 4e7eb2ca3..4e7eb2ca3 100644 --- a/themes/jquery.autocomplete.css +++ b/themes/default/ui.autocomplete.css diff --git a/themes/default/ui.colorpicker.css b/themes/default/ui.colorpicker.css new file mode 100644 index 000000000..b7b7c0715 --- /dev/null +++ b/themes/default/ui.colorpicker.css @@ -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;
+}
diff --git a/themes/ui.datepicker.css b/themes/default/ui.datepicker.css index da9d0eebf..6719b162c 100644 --- a/themes/ui.datepicker.css +++ b/themes/default/ui.datepicker.css @@ -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*/
+}
diff --git a/ui/ui.colorpicker.js b/ui/ui.colorpicker.js new file mode 100644 index 000000000..f19a3347a --- /dev/null +++ b/ui/ui.colorpicker.js @@ -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);
\ No newline at end of file |
