From 979e64bdd20afd4fd096c5fe089d3aa6e3c89880 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 10 Jul 2008 15:52:18 +0000 Subject: - moved all default css files into themes/default - added Colorpicker, heavily modified for UI (thanks Stefan!) --- tests/visual/colorpicker.html | 358 +++++++++++++++++ themes/default/images/colorpicker_background.png | Bin 0 -> 1897 bytes themes/default/images/colorpicker_hex.png | Bin 0 -> 532 bytes themes/default/images/colorpicker_hsb_b.png | Bin 0 -> 970 bytes themes/default/images/colorpicker_hsb_h.png | Bin 0 -> 1012 bytes themes/default/images/colorpicker_hsb_s.png | Bin 0 -> 1171 bytes themes/default/images/colorpicker_indic.gif | Bin 0 -> 86 bytes themes/default/images/colorpicker_overlay.png | Bin 0 -> 10355 bytes themes/default/images/colorpicker_rgb_b.png | Bin 0 -> 970 bytes themes/default/images/colorpicker_rgb_g.png | Bin 0 -> 1069 bytes themes/default/images/colorpicker_rgb_r.png | Bin 0 -> 1066 bytes themes/default/images/colorpicker_select.gif | Bin 0 -> 78 bytes themes/default/images/colorpicker_submit.png | Bin 0 -> 984 bytes themes/default/images/custom_background.png | Bin 0 -> 1916 bytes themes/default/images/custom_hex.png | Bin 0 -> 562 bytes themes/default/images/custom_hsb_b.png | Bin 0 -> 1097 bytes themes/default/images/custom_hsb_h.png | Bin 0 -> 970 bytes themes/default/images/custom_hsb_s.png | Bin 0 -> 1168 bytes themes/default/images/custom_indic.gif | Bin 0 -> 86 bytes themes/default/images/custom_rgb_b.png | Bin 0 -> 1008 bytes themes/default/images/custom_rgb_g.png | Bin 0 -> 1069 bytes themes/default/images/custom_rgb_r.png | Bin 0 -> 1018 bytes themes/default/images/custom_submit.png | Bin 0 -> 997 bytes themes/default/images/select.png | Bin 0 -> 506 bytes themes/default/images/select2.png | Bin 0 -> 518 bytes themes/default/ui.autocomplete.css | 48 +++ themes/default/ui.colorpicker.css | 161 ++++++++ themes/default/ui.datepicker.css | 207 ++++++++++ themes/jquery.autocomplete.css | 48 --- themes/ui.datepicker.css | 207 ---------- ui/ui.colorpicker.js | 472 +++++++++++++++++++++++ 31 files changed, 1246 insertions(+), 255 deletions(-) create mode 100644 tests/visual/colorpicker.html create mode 100644 themes/default/images/colorpicker_background.png create mode 100644 themes/default/images/colorpicker_hex.png create mode 100644 themes/default/images/colorpicker_hsb_b.png create mode 100644 themes/default/images/colorpicker_hsb_h.png create mode 100644 themes/default/images/colorpicker_hsb_s.png create mode 100644 themes/default/images/colorpicker_indic.gif create mode 100644 themes/default/images/colorpicker_overlay.png create mode 100644 themes/default/images/colorpicker_rgb_b.png create mode 100644 themes/default/images/colorpicker_rgb_g.png create mode 100644 themes/default/images/colorpicker_rgb_r.png create mode 100644 themes/default/images/colorpicker_select.gif create mode 100644 themes/default/images/colorpicker_submit.png create mode 100644 themes/default/images/custom_background.png create mode 100644 themes/default/images/custom_hex.png create mode 100644 themes/default/images/custom_hsb_b.png create mode 100644 themes/default/images/custom_hsb_h.png create mode 100644 themes/default/images/custom_hsb_s.png create mode 100644 themes/default/images/custom_indic.gif create mode 100644 themes/default/images/custom_rgb_b.png create mode 100644 themes/default/images/custom_rgb_g.png create mode 100644 themes/default/images/custom_rgb_r.png create mode 100644 themes/default/images/custom_submit.png create mode 100644 themes/default/images/select.png create mode 100644 themes/default/images/select2.png create mode 100644 themes/default/ui.autocomplete.css create mode 100644 themes/default/ui.colorpicker.css create mode 100644 themes/default/ui.datepicker.css delete mode 100644 themes/jquery.autocomplete.css delete mode 100644 themes/ui.datepicker.css create mode 100644 ui/ui.colorpicker.js 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 @@ + + + + + + ColorPicker + + + + + + + + + + + + + + +
+

Color Picker

+ +
+
+

About

+

A simple component to select color in the same way you select color in Adobe Photoshop

+

Features

+
    +
  • Flat mode - as element in page
    • +
  • Powerful controls for color selection
    • +
  • Easy to customize the look by changing some images
    • +
  • Fits into the viewport
    • +
+

Examples

+

Flat mode.

+

+

+ 
+$('#colorpickerHolder').ColorPicker({flat: true});
+
+

Custom skin and using flat mode to display the color picker in a custom widget.

+
+
+
+
+
+ +

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.

+

+ 
+$('#colorpickerField1').ColorPicker({
+	onSubmit: function(hsb, hex, rgb) {
+		$('#colorpickerField1').val(hex);
+	},
+	onBeforeShow: function () {
+		$(this).ColorPickerSetColor(this.value);
+	}
+})
+.bind('keyup', function(){
+	$(this).ColorPickerSetColor(this.value);
+});
+
+

Attached to DOMElement and using callbacks to live preview the color and adding animation.

+

+

+

+ 
+$('#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);
+	}
+});
+
+
+
+
+ + diff --git a/themes/default/images/colorpicker_background.png b/themes/default/images/colorpicker_background.png new file mode 100644 index 000000000..8401572f1 Binary files /dev/null and b/themes/default/images/colorpicker_background.png differ diff --git a/themes/default/images/colorpicker_hex.png b/themes/default/images/colorpicker_hex.png new file mode 100644 index 000000000..4e532d7c6 Binary files /dev/null and b/themes/default/images/colorpicker_hex.png differ diff --git a/themes/default/images/colorpicker_hsb_b.png b/themes/default/images/colorpicker_hsb_b.png new file mode 100644 index 000000000..dfac595d0 Binary files /dev/null and b/themes/default/images/colorpicker_hsb_b.png differ diff --git a/themes/default/images/colorpicker_hsb_h.png b/themes/default/images/colorpicker_hsb_h.png new file mode 100644 index 000000000..3977ed9f2 Binary files /dev/null and b/themes/default/images/colorpicker_hsb_h.png differ diff --git a/themes/default/images/colorpicker_hsb_s.png b/themes/default/images/colorpicker_hsb_s.png new file mode 100644 index 000000000..a2a699736 Binary files /dev/null and b/themes/default/images/colorpicker_hsb_s.png differ diff --git a/themes/default/images/colorpicker_indic.gif b/themes/default/images/colorpicker_indic.gif new file mode 100644 index 000000000..f9fa95e28 Binary files /dev/null and b/themes/default/images/colorpicker_indic.gif differ diff --git a/themes/default/images/colorpicker_overlay.png b/themes/default/images/colorpicker_overlay.png new file mode 100644 index 000000000..561cdd9c5 Binary files /dev/null and b/themes/default/images/colorpicker_overlay.png differ diff --git a/themes/default/images/colorpicker_rgb_b.png b/themes/default/images/colorpicker_rgb_b.png new file mode 100644 index 000000000..dfac595d0 Binary files /dev/null and b/themes/default/images/colorpicker_rgb_b.png differ diff --git a/themes/default/images/colorpicker_rgb_g.png b/themes/default/images/colorpicker_rgb_g.png new file mode 100644 index 000000000..72b32760a Binary files /dev/null and b/themes/default/images/colorpicker_rgb_g.png differ diff --git a/themes/default/images/colorpicker_rgb_r.png b/themes/default/images/colorpicker_rgb_r.png new file mode 100644 index 000000000..4855fe03f Binary files /dev/null and b/themes/default/images/colorpicker_rgb_r.png differ diff --git a/themes/default/images/colorpicker_select.gif b/themes/default/images/colorpicker_select.gif new file mode 100644 index 000000000..599f7f13a Binary files /dev/null and b/themes/default/images/colorpicker_select.gif differ diff --git a/themes/default/images/colorpicker_submit.png b/themes/default/images/colorpicker_submit.png new file mode 100644 index 000000000..7f4c0825f Binary files /dev/null and b/themes/default/images/colorpicker_submit.png differ diff --git a/themes/default/images/custom_background.png b/themes/default/images/custom_background.png new file mode 100644 index 000000000..cf55ffdd6 Binary files /dev/null and b/themes/default/images/custom_background.png differ diff --git a/themes/default/images/custom_hex.png b/themes/default/images/custom_hex.png new file mode 100644 index 000000000..888f44449 Binary files /dev/null and b/themes/default/images/custom_hex.png differ diff --git a/themes/default/images/custom_hsb_b.png b/themes/default/images/custom_hsb_b.png new file mode 100644 index 000000000..2f99dae8e Binary files /dev/null and b/themes/default/images/custom_hsb_b.png differ diff --git a/themes/default/images/custom_hsb_h.png b/themes/default/images/custom_hsb_h.png new file mode 100644 index 000000000..a217e9218 Binary files /dev/null and b/themes/default/images/custom_hsb_h.png differ diff --git a/themes/default/images/custom_hsb_s.png b/themes/default/images/custom_hsb_s.png new file mode 100644 index 000000000..7826b4150 Binary files /dev/null and b/themes/default/images/custom_hsb_s.png differ diff --git a/themes/default/images/custom_indic.gif b/themes/default/images/custom_indic.gif new file mode 100644 index 000000000..222fb94cf Binary files /dev/null and b/themes/default/images/custom_indic.gif differ diff --git a/themes/default/images/custom_rgb_b.png b/themes/default/images/custom_rgb_b.png new file mode 100644 index 000000000..80764e5d6 Binary files /dev/null and b/themes/default/images/custom_rgb_b.png differ diff --git a/themes/default/images/custom_rgb_g.png b/themes/default/images/custom_rgb_g.png new file mode 100644 index 000000000..fc9778be1 Binary files /dev/null and b/themes/default/images/custom_rgb_g.png differ diff --git a/themes/default/images/custom_rgb_r.png b/themes/default/images/custom_rgb_r.png new file mode 100644 index 000000000..91b0cd4c5 Binary files /dev/null and b/themes/default/images/custom_rgb_r.png differ diff --git a/themes/default/images/custom_submit.png b/themes/default/images/custom_submit.png new file mode 100644 index 000000000..cd202cd93 Binary files /dev/null and b/themes/default/images/custom_submit.png differ diff --git a/themes/default/images/select.png b/themes/default/images/select.png new file mode 100644 index 000000000..21213bfd5 Binary files /dev/null and b/themes/default/images/select.png differ diff --git a/themes/default/images/select2.png b/themes/default/images/select2.png new file mode 100644 index 000000000..2cd2cabeb Binary files /dev/null and b/themes/default/images/select2.png differ diff --git a/themes/default/ui.autocomplete.css b/themes/default/ui.autocomplete.css new file mode 100644 index 000000000..4e7eb2ca3 --- /dev/null +++ b/themes/default/ui.autocomplete.css @@ -0,0 +1,48 @@ +.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; +} 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/default/ui.datepicker.css b/themes/default/ui.datepicker.css new file mode 100644 index 000000000..6719b162c --- /dev/null +++ b/themes/default/ui.datepicker.css @@ -0,0 +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*/ +} diff --git a/themes/jquery.autocomplete.css b/themes/jquery.autocomplete.css deleted file mode 100644 index 4e7eb2ca3..000000000 --- a/themes/jquery.autocomplete.css +++ /dev/null @@ -1,48 +0,0 @@ -.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; -} diff --git a/themes/ui.datepicker.css b/themes/ui.datepicker.css deleted file mode 100644 index da9d0eebf..000000000 --- a/themes/ui.datepicker.css +++ /dev/null @@ -1,207 +0,0 @@ -/* 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 = '
'; + + 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 -- cgit v1.2.3