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