The branch, gettext has been updated via d2a521f369de842a3130bfeafd3816a6d24614fa (commit) via b994ec6934cef1b02d944969b05ace1f991dbaa7 (commit) via 783892518ce82c32374a6a643396244eff4c0ad3 (commit) via 719d6dd9f0c634fe49c121b4775f77a6953a954b (commit) from 9608b0805e0c928904069277c3b7958d4c50c8d8 (commit) - Log ----------------------------------------------------------------- commit d2a521f369de842a3130bfeafd3816a6d24614fa Merge: 9608b0805e0c928904069277c3b7958d4c50c8d8 b994ec6934cef1b02d944969b05ace1f991dbaa7 Author: Michal Čihař <michal@cihar.com> Date: Fri Mar 26 08:28:21 2010 +0100 Merge branch 'master' into gettext ----------------------------------------------------------------------- Summary of changes: js/colorpicker/css/colorpicker.css | 161 ++++++ js/colorpicker/css/layout.css | 218 +++++++++ js/colorpicker/images/blank.gif | Bin 0 -> 49 bytes js/colorpicker/images/colorpicker_background.png | Bin 0 -> 1897 bytes js/colorpicker/images/colorpicker_hex.png | Bin 0 -> 532 bytes js/colorpicker/images/colorpicker_hsb_b.png | Bin 0 -> 970 bytes js/colorpicker/images/colorpicker_hsb_h.png | Bin 0 -> 1012 bytes js/colorpicker/images/colorpicker_hsb_s.png | Bin 0 -> 1171 bytes js/colorpicker/images/colorpicker_indic.gif | Bin 0 -> 86 bytes js/colorpicker/images/colorpicker_overlay.png | Bin 0 -> 10355 bytes js/colorpicker/images/colorpicker_rgb_b.png | Bin 0 -> 970 bytes js/colorpicker/images/colorpicker_rgb_g.png | Bin 0 -> 1069 bytes js/colorpicker/images/colorpicker_rgb_r.png | Bin 0 -> 1066 bytes js/colorpicker/images/colorpicker_select.gif | Bin 0 -> 78 bytes js/colorpicker/images/colorpicker_submit.png | Bin 0 -> 984 bytes js/colorpicker/images/custom_background.png | Bin 0 -> 1916 bytes js/colorpicker/images/custom_hex.png | Bin 0 -> 562 bytes js/colorpicker/images/custom_hsb_b.png | Bin 0 -> 1097 bytes js/colorpicker/images/custom_hsb_h.png | Bin 0 -> 970 bytes js/colorpicker/images/custom_hsb_s.png | Bin 0 -> 1168 bytes js/colorpicker/images/custom_indic.gif | Bin 0 -> 86 bytes js/colorpicker/images/custom_rgb_b.png | Bin 0 -> 1008 bytes js/colorpicker/images/custom_rgb_g.png | Bin 0 -> 1069 bytes js/colorpicker/images/custom_rgb_r.png | Bin 0 -> 1018 bytes js/colorpicker/images/custom_submit.png | Bin 0 -> 997 bytes js/colorpicker/images/select.png | Bin 0 -> 506 bytes js/colorpicker/images/select2.png | Bin 0 -> 518 bytes js/colorpicker/images/slider.png | Bin 0 -> 315 bytes js/colorpicker/js/colorpicker.js | 484 +++++++++++++++++++ js/mooRainbow/images/blank.gif | Bin 43 -> 0 bytes js/mooRainbow/images/moor_arrows.gif | Bin 94 -> 0 bytes js/mooRainbow/images/moor_boverlay.png | Bin 799 -> 0 bytes js/mooRainbow/images/moor_cursor.gif | Bin 80 -> 0 bytes js/mooRainbow/images/moor_slider.png | Bin 590 -> 0 bytes js/mooRainbow/images/moor_woverlay.png | Bin 768 -> 0 bytes js/mooRainbow/images/rainbow.png | Bin 794 -> 0 bytes js/mooRainbow/mooRainbow.css | 114 ----- js/mooRainbow/mooRainbow.js | 563 ---------------------- js/mootools-domready-rainbow.js | 16 - libraries/common.inc.php | 2 - libraries/header_meta_style.inc.php | 11 +- main.php | 39 ++- 42 files changed, 901 insertions(+), 707 deletions(-) create mode 100644 js/colorpicker/css/colorpicker.css create mode 100644 js/colorpicker/css/layout.css create mode 100644 js/colorpicker/images/blank.gif create mode 100644 js/colorpicker/images/colorpicker_background.png create mode 100644 js/colorpicker/images/colorpicker_hex.png create mode 100644 js/colorpicker/images/colorpicker_hsb_b.png create mode 100644 js/colorpicker/images/colorpicker_hsb_h.png create mode 100644 js/colorpicker/images/colorpicker_hsb_s.png create mode 100644 js/colorpicker/images/colorpicker_indic.gif create mode 100644 js/colorpicker/images/colorpicker_overlay.png create mode 100644 js/colorpicker/images/colorpicker_rgb_b.png create mode 100644 js/colorpicker/images/colorpicker_rgb_g.png create mode 100644 js/colorpicker/images/colorpicker_rgb_r.png create mode 100644 js/colorpicker/images/colorpicker_select.gif create mode 100644 js/colorpicker/images/colorpicker_submit.png create mode 100644 js/colorpicker/images/custom_background.png create mode 100644 js/colorpicker/images/custom_hex.png create mode 100644 js/colorpicker/images/custom_hsb_b.png create mode 100644 js/colorpicker/images/custom_hsb_h.png create mode 100644 js/colorpicker/images/custom_hsb_s.png create mode 100644 js/colorpicker/images/custom_indic.gif create mode 100644 js/colorpicker/images/custom_rgb_b.png create mode 100644 js/colorpicker/images/custom_rgb_g.png create mode 100644 js/colorpicker/images/custom_rgb_r.png create mode 100644 js/colorpicker/images/custom_submit.png create mode 100644 js/colorpicker/images/select.png create mode 100644 js/colorpicker/images/select2.png create mode 100644 js/colorpicker/images/slider.png create mode 100644 js/colorpicker/js/colorpicker.js delete mode 100644 js/mooRainbow/images/blank.gif delete mode 100644 js/mooRainbow/images/moor_arrows.gif delete mode 100644 js/mooRainbow/images/moor_boverlay.png delete mode 100644 js/mooRainbow/images/moor_cursor.gif delete mode 100644 js/mooRainbow/images/moor_slider.png delete mode 100644 js/mooRainbow/images/moor_woverlay.png delete mode 100644 js/mooRainbow/images/rainbow.png delete mode 100644 js/mooRainbow/mooRainbow.css delete mode 100644 js/mooRainbow/mooRainbow.js delete mode 100644 js/mootools-domready-rainbow.js diff --git a/js/colorpicker/css/colorpicker.css b/js/colorpicker/css/colorpicker.css new file mode 100644 index 0000000..05b02b4 --- /dev/null +++ b/js/colorpicker/css/colorpicker.css @@ -0,0 +1,161 @@ +.colorpicker { + width: 356px; + height: 176px; + overflow: hidden; + position: absolute; + background: url(../images/colorpicker_background.png); + font-family: Arial, Helvetica, sans-serif; + display: none; +} +.colorpicker_color { + width: 150px; + height: 150px; + left: 14px; + top: 13px; + position: absolute; + background: #f00; + overflow: hidden; + cursor: crosshair; +} +.colorpicker_color div { + position: absolute; + top: 0; + left: 0; + width: 150px; + height: 150px; + background: url(../images/colorpicker_overlay.png); +} +.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; +} +.colorpicker_hue { + position: absolute; + top: 13px; + left: 171px; + width: 35px; + height: 150px; + cursor: n-resize; +} +.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; +} +.colorpicker_new_color { + position: absolute; + width: 60px; + height: 30px; + left: 213px; + top: 13px; + background: #f00; +} +.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; +} +.colorpicker_hex { + position: absolute; + width: 72px; + height: 22px; + background: url(../images/colorpicker_hex.png) top; + left: 212px; + top: 142px; +} +.colorpicker_hex input { + right: 6px; +} +.colorpicker_field { + height: 22px; + width: 62px; + background-position: top; + position: absolute; +} +.colorpicker_field span { + position: absolute; + width: 12px; + height: 22px; + overflow: hidden; + top: 0; + right: 0; + cursor: n-resize; +} +.colorpicker_rgb_r { + background-image: url(../images/colorpicker_rgb_r.png); + top: 52px; + left: 212px; +} +.colorpicker_rgb_g { + background-image: url(../images/colorpicker_rgb_g.png); + top: 82px; + left: 212px; +} +.colorpicker_rgb_b { + background-image: url(../images/colorpicker_rgb_b.png); + top: 112px; + left: 212px; +} +.colorpicker_hsb_h { + background-image: url(../images/colorpicker_hsb_h.png); + top: 52px; + left: 282px; +} +.colorpicker_hsb_s { + background-image: url(../images/colorpicker_hsb_s.png); + top: 82px; + left: 282px; +} +.colorpicker_hsb_b { + background-image: url(../images/colorpicker_hsb_b.png); + top: 112px; + left: 282px; +} +.colorpicker_submit { + position: absolute; + width: 22px; + height: 22px; + background: url(../images/colorpicker_submit.png) top; + left: 322px; + top: 142px; + overflow: hidden; +} +.colorpicker_focus { + background-position: center; +} +.colorpicker_hex.colorpicker_focus { + background-position: bottom; +} +.colorpicker_submit.colorpicker_focus { + background-position: bottom; +} +.colorpicker_slider { + background-position: bottom; +} diff --git a/js/colorpicker/css/layout.css b/js/colorpicker/css/layout.css new file mode 100644 index 0000000..396e671 --- /dev/null +++ b/js/colorpicker/css/layout.css @@ -0,0 +1,218 @@ +/*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: none; +} +.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(../images/select.png); +} +#colorSelector div { + position: absolute; + top: 3px; + left: 3px; + width: 30px; + height: 30px; + background: url(../images/select.png) center; +} +#colorSelector2 { + position: absolute; + top: 0; + left: 0; + width: 36px; + height: 36px; + background: url(../images/select2.png); +} +#colorSelector2 div { + position: absolute; + top: 4px; + left: 4px; + width: 28px; + height: 28px; + background: url(../images/select2.png) center; +} +#colorpickerHolder2 { + top: 32px; + left: 0; + width: 356px; + height: 0; + overflow: hidden; + position: absolute; +} +#colorpickerHolder2 .colorpicker { + background-image: url(../images/custom_background.png); + position: absolute; + bottom: 0; + left: 0; +} +#colorpickerHolder2 .colorpicker_hue div { + background-image: url(../images/custom_indic.gif); +} +#colorpickerHolder2 .colorpicker_hex { + background-image: url(../images/custom_hex.png); +} +#colorpickerHolder2 .colorpicker_rgb_r { + background-image: url(../images/custom_rgb_r.png); +} +#colorpickerHolder2 .colorpicker_rgb_g { + background-image: url(../images/custom_rgb_g.png); +} +#colorpickerHolder2 .colorpicker_rgb_b { + background-image: url(../images/custom_rgb_b.png); +} +#colorpickerHolder2 .colorpicker_hsb_s { + background-image: url(../images/custom_hsb_s.png); + display: none; +} +#colorpickerHolder2 .colorpicker_hsb_h { + background-image: url(../images/custom_hsb_h.png); + display: none; +} +#colorpickerHolder2 .colorpicker_hsb_b { + background-image: url(../images/custom_hsb_b.png); + display: none; +} +#colorpickerHolder2 .colorpicker_submit { + background-image: url(../images/custom_submit.png); +} +#colorpickerHolder2 .colorpicker input { + color: #778398; +} +#customWidget { + position: relative; + height: 36px; +} diff --git a/js/colorpicker/images/blank.gif b/js/colorpicker/images/blank.gif new file mode 100644 index 0000000..75b945d Binary files /dev/null and b/js/colorpicker/images/blank.gif differ diff --git a/js/colorpicker/images/colorpicker_background.png b/js/colorpicker/images/colorpicker_background.png new file mode 100644 index 0000000..8401572 Binary files /dev/null and b/js/colorpicker/images/colorpicker_background.png differ diff --git a/js/colorpicker/images/colorpicker_hex.png b/js/colorpicker/images/colorpicker_hex.png new file mode 100644 index 0000000..4e532d7 Binary files /dev/null and b/js/colorpicker/images/colorpicker_hex.png differ diff --git a/js/colorpicker/images/colorpicker_hsb_b.png b/js/colorpicker/images/colorpicker_hsb_b.png new file mode 100644 index 0000000..dfac595 Binary files /dev/null and b/js/colorpicker/images/colorpicker_hsb_b.png differ diff --git a/js/colorpicker/images/colorpicker_hsb_h.png b/js/colorpicker/images/colorpicker_hsb_h.png new file mode 100644 index 0000000..3977ed9 Binary files /dev/null and b/js/colorpicker/images/colorpicker_hsb_h.png differ diff --git a/js/colorpicker/images/colorpicker_hsb_s.png b/js/colorpicker/images/colorpicker_hsb_s.png new file mode 100644 index 0000000..a2a6997 Binary files /dev/null and b/js/colorpicker/images/colorpicker_hsb_s.png differ diff --git a/js/colorpicker/images/colorpicker_indic.gif b/js/colorpicker/images/colorpicker_indic.gif new file mode 100644 index 0000000..f9fa95e Binary files /dev/null and b/js/colorpicker/images/colorpicker_indic.gif differ diff --git a/js/colorpicker/images/colorpicker_overlay.png b/js/colorpicker/images/colorpicker_overlay.png new file mode 100644 index 0000000..561cdd9 Binary files /dev/null and b/js/colorpicker/images/colorpicker_overlay.png differ diff --git a/js/colorpicker/images/colorpicker_rgb_b.png b/js/colorpicker/images/colorpicker_rgb_b.png new file mode 100644 index 0000000..dfac595 Binary files /dev/null and b/js/colorpicker/images/colorpicker_rgb_b.png differ diff --git a/js/colorpicker/images/colorpicker_rgb_g.png b/js/colorpicker/images/colorpicker_rgb_g.png new file mode 100644 index 0000000..72b3276 Binary files /dev/null and b/js/colorpicker/images/colorpicker_rgb_g.png differ diff --git a/js/colorpicker/images/colorpicker_rgb_r.png b/js/colorpicker/images/colorpicker_rgb_r.png new file mode 100644 index 0000000..4855fe0 Binary files /dev/null and b/js/colorpicker/images/colorpicker_rgb_r.png differ diff --git a/js/colorpicker/images/colorpicker_select.gif b/js/colorpicker/images/colorpicker_select.gif new file mode 100644 index 0000000..599f7f1 Binary files /dev/null and b/js/colorpicker/images/colorpicker_select.gif differ diff --git a/js/colorpicker/images/colorpicker_submit.png b/js/colorpicker/images/colorpicker_submit.png new file mode 100644 index 0000000..7f4c082 Binary files /dev/null and b/js/colorpicker/images/colorpicker_submit.png differ diff --git a/js/colorpicker/images/custom_background.png b/js/colorpicker/images/custom_background.png new file mode 100644 index 0000000..cf55ffd Binary files /dev/null and b/js/colorpicker/images/custom_background.png differ diff --git a/js/colorpicker/images/custom_hex.png b/js/colorpicker/images/custom_hex.png new file mode 100644 index 0000000..888f444 Binary files /dev/null and b/js/colorpicker/images/custom_hex.png differ diff --git a/js/colorpicker/images/custom_hsb_b.png b/js/colorpicker/images/custom_hsb_b.png new file mode 100644 index 0000000..2f99dae Binary files /dev/null and b/js/colorpicker/images/custom_hsb_b.png differ diff --git a/js/colorpicker/images/custom_hsb_h.png b/js/colorpicker/images/custom_hsb_h.png new file mode 100644 index 0000000..a217e92 Binary files /dev/null and b/js/colorpicker/images/custom_hsb_h.png differ diff --git a/js/colorpicker/images/custom_hsb_s.png b/js/colorpicker/images/custom_hsb_s.png new file mode 100644 index 0000000..7826b41 Binary files /dev/null and b/js/colorpicker/images/custom_hsb_s.png differ diff --git a/js/colorpicker/images/custom_indic.gif b/js/colorpicker/images/custom_indic.gif new file mode 100644 index 0000000..222fb94 Binary files /dev/null and b/js/colorpicker/images/custom_indic.gif differ diff --git a/js/colorpicker/images/custom_rgb_b.png b/js/colorpicker/images/custom_rgb_b.png new file mode 100644 index 0000000..80764e5 Binary files /dev/null and b/js/colorpicker/images/custom_rgb_b.png differ diff --git a/js/colorpicker/images/custom_rgb_g.png b/js/colorpicker/images/custom_rgb_g.png new file mode 100644 index 0000000..fc9778b Binary files /dev/null and b/js/colorpicker/images/custom_rgb_g.png differ diff --git a/js/colorpicker/images/custom_rgb_r.png b/js/colorpicker/images/custom_rgb_r.png new file mode 100644 index 0000000..91b0cd4 Binary files /dev/null and b/js/colorpicker/images/custom_rgb_r.png differ diff --git a/js/colorpicker/images/custom_submit.png b/js/colorpicker/images/custom_submit.png new file mode 100644 index 0000000..cd202cd Binary files /dev/null and b/js/colorpicker/images/custom_submit.png differ diff --git a/js/colorpicker/images/select.png b/js/colorpicker/images/select.png new file mode 100644 index 0000000..21213bf Binary files /dev/null and b/js/colorpicker/images/select.png differ diff --git a/js/colorpicker/images/select2.png b/js/colorpicker/images/select2.png new file mode 100644 index 0000000..2cd2cab Binary files /dev/null and b/js/colorpicker/images/select2.png differ diff --git a/js/colorpicker/images/slider.png b/js/colorpicker/images/slider.png new file mode 100644 index 0000000..8b03da9 Binary files /dev/null and b/js/colorpicker/images/slider.png differ diff --git a/js/colorpicker/js/colorpicker.js b/js/colorpicker/js/colorpicker.js new file mode 100644 index 0000000..10a2b22 --- /dev/null +++ b/js/colorpicker/js/colorpicker.js @@ -0,0 +1,484 @@ +/** + * + * Color picker + * Author: Stefan Petre www.eyecon.ro + * + * Dual licensed under the MIT and GPL licenses + * + */ +(function ($) { + var ColorPicker = function () { + var + ids = {}, + inAction, + charMin = 65, + visible, + tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>', + defaults = { + eventName: 'click', + onShow: function () {}, + onBeforeShow: function(){}, + onHide: function () {}, + onChange: function () {}, + onSubmit: function () {}, + color: 'ff0000', + livePreview: true, + flat: false + }, + fillRGBFields = function (hsb, cal) { + var rgb = HSBToRGB(hsb); + $(cal).data('colorpicker').fields + .eq(1).val(rgb.r).end() + .eq(2).val(rgb.g).end() + .eq(3).val(rgb.b).end(); + }, + fillHSBFields = function (hsb, cal) { + $(cal).data('colorpicker').fields + .eq(4).val(hsb.h).end() + .eq(5).val(hsb.s).end() + .eq(6).val(hsb.b).end(); + }, + fillHexFields = function (hsb, cal) { + $(cal).data('colorpicker').fields + .eq(0).val(HSBToHex(hsb)).end(); + }, + setSelector = function (hsb, cal) { + $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100})); + $(cal).data('colorpicker').selectorIndic.css({ + left: parseInt(150 * hsb.s/100, 10), + top: parseInt(150 * (100-hsb.b)/100, 10) + }); + }, + setHue = function (hsb, cal) { + $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10)); + }, + setCurrentColor = function (hsb, cal) { + $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb)); + }, + setNewColor = function (hsb, cal) { + $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb)); + }, + keyDown = function (ev) { + var pressedKey = ev.charCode || ev.keyCode || -1; + if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) { + return false; + } + var cal = $(this).parent().parent(); + if (cal.data('colorpicker').livePreview === true) { + change.apply(this); + } + }, + change = function (ev) { + var cal = $(this).parent().parent(), col; + if (this.parentNode.className.indexOf('_hex') > 0) { + cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value)); + } else if (this.parentNode.className.indexOf('_hsb') > 0) { + cal.data('colorpicker').color = col = fixHSB({ + h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10), + s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10), + b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10) + }); + } else { + cal.data('colorpicker').color = col = RGBToHSB(fixRGB({ + r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10), + g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10), + b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10) + })); + } + if (ev) { + fillRGBFields(col, cal.get(0)); + fillHexFields(col, cal.get(0)); + fillHSBFields(col, cal.get(0)); + } + setSelector(col, cal.get(0)); + setHue(col, cal.get(0)); + setNewColor(col, cal.get(0)); + cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]); + }, + blur = function (ev) { + var cal = $(this).parent().parent(); + cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus'); + }, + focus = function () { + charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65; + $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus'); + $(this).parent().addClass('colorpicker_focus'); + }, + downIncrement = function (ev) { + var field = $(this).parent().find('input').focus(); + var current = { + el: $(this).parent().addClass('colorpicker_slider'), + max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255), + y: ev.pageY, + field: field, + val: parseInt(field.val(), 10), + preview: $(this).parent().parent().data('colorpicker').livePreview + }; + $(document).bind('mouseup', current, upIncrement); + $(document).bind('mousemove', current, moveIncrement); + }, + moveIncrement = function (ev) { + ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10)))); + if (ev.data.preview) { + change.apply(ev.data.field.get(0), [true]); + } + return false; + }, + upIncrement = function (ev) { + change.apply(ev.data.field.get(0), [true]); + ev.data.el.removeClass('colorpicker_slider').find('input').focus(); + $(document).unbind('mouseup', upIncrement); + $(document).unbind('mousemove', moveIncrement); + return false; + }, + downHue = function (ev) { + var current = { + cal: $(this).parent(), + y: $(this).offset().top + }; + current.preview = current.cal.data('colorpicker').livePreview; + $(document).bind('mouseup', current, upHue); + $(document).bind('mousemove', current, moveHue); + }, + moveHue = function (ev) { + change.apply( + ev.data.cal.data('colorpicker') + .fields + .eq(4) + .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10)) + .get(0), + [ev.data.preview] + ); + return false; + }, + upHue = function (ev) { + fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); + fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); + $(document).unbind('mouseup', upHue); + $(document).unbind('mousemove', moveHue); + return false; + }, + downSelector = function (ev) { + var current = { + cal: $(this).parent(), + pos: $(this).offset() + }; + current.preview = current.cal.data('colorpicker').livePreview; + $(document).bind('mouseup', current, upSelector); + $(document).bind('mousemove', current, moveSelector); + }, + moveSelector = function (ev) { + change.apply( + ev.data.cal.data('colorpicker') + .fields + .eq(6) + .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10)) + .end() + .eq(5) + .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10)) + .get(0), + [ev.data.preview] + ); + return false; + }, + upSelector = function (ev) { + fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); + fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); + $(document).unbind('mouseup', upSelector); + $(document).unbind('mousemove', moveSelector); + return false; + }, + enterSubmit = function (ev) { + $(this).addClass('colorpicker_focus'); + }, + leaveSubmit = function (ev) { + $(this).removeClass('colorpicker_focus'); + }, + clickSubmit = function (ev) { + var cal = $(this).parent(); + var col = cal.data('colorpicker').color; + cal.data('colorpicker').origColor = col; + setCurrentColor(col, cal.get(0)); + cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el); + }, + show = function (ev) { + var cal = $('#' + $(this).data('colorpickerId')); + cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]); + var pos = $(this).offset(); + var viewPort = getViewport(); + var top = pos.top + this.offsetHeight; + var left = pos.left; + if (top + 176 > viewPort.t + viewPort.h) { + top -= this.offsetHeight + 176; + } + if (left + 356 > viewPort.l + viewPort.w) { + left -= 356; + } + cal.css({left: left + 'px', top: top + 'px'}); + if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) { + cal.show(); + } + $(document).bind('mousedown', {cal: cal}, hide); + return false; + }, + hide = function (ev) { + if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) { + if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) { + ev.data.cal.hide(); + } + $(document).unbind('mousedown', hide); + } + }, + isChildOf = function(parentEl, el, container) { + if (parentEl == el) { + return true; + } + if (parentEl.contains) { + 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; + }, + getViewport = function () { + var m = document.compatMode == 'CSS1Compat'; + return { + l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft), + t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop), + w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth), + h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight) + }; + }, + 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)) + }; + }, + fixHex = function (hex) { + var len = 6 - hex.length; + if (len > 0) { + var o = []; + for (var i=0; i<len; i++) { + o.push('0'); + } + o.push(hex); + hex = o.join(''); + } + return hex; + }, + 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 RGBToHSB(HexToRGB(hex)); + }, + RGBToHSB = function (rgb) { + var hsb = { + h: 0, + s: 0, + b: 0 + }; + var min = Math.min(rgb.r, rgb.g, rgb.b); + var max = Math.max(rgb.r, rgb.g, rgb.b); + var delta = max - min; + hsb.b = max; + if (max != 0) { + + } + hsb.s = max != 0 ? 255 * delta / max : 0; + if (hsb.s != 0) { + if (rgb.r == max) { + hsb.h = (rgb.g - rgb.b) / delta; + } else if (rgb.g == max) { + hsb.h = 2 + (rgb.b - rgb.r) / delta; + } else { + hsb.h = 4 + (rgb.r - rgb.g) / delta; + } + } else { + hsb.h = -1; + } + hsb.h *= 60; + if (hsb.h < 0) { + hsb.h += 360; + } + hsb.s *= 100/255; + hsb.b *= 100/255; + 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 RGBToHex(HSBToRGB(hsb)); + }, + restoreOriginal = function () { + var cal = $(this).parent(); + var col = cal.data('colorpicker').origColor; + cal.data('colorpicker').color = col; + fillRGBFields(col, cal.get(0)); + fillHexFields(col, cal.get(0)); + fillHSBFields(col, cal.get(0)); + setSelector(col, cal.get(0)); + setHue(col, cal.get(0)); + setNewColor(col, cal.get(0)); + }; + return { + init: function (opt) { + opt = $.extend({}, defaults, opt||{}); + if (typeof opt.color == 'string') { + opt.color = HexToHSB(opt.color); + } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) { + opt.color = RGBToHSB(opt.color); + } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) { + opt.color = fixHSB(opt.color); + } else { + return this; + } + return this.each(function () { + if (!$(this).data('colorpickerId')) { + var options = $.extend({}, opt); + options.origColor = opt.color; + var id = 'collorpicker_' + parseInt(Math.random() * 1000); + $(this).data('colorpickerId', id); + var cal = $(tpl).attr('id', id); + if (options.flat) { + cal.appendTo(this).show(); + } else { + cal.appendTo(document.body); + } + options.fields = cal + .find('input') + .bind('keyup', keyDown) + .bind('change', change) + .bind('blur', blur) + .bind('focus', focus); + cal + .find('span').bind('mousedown', downIncrement).end() + .find('>div.colorpicker_current_color').bind('click', restoreOriginal); + options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector); + options.selectorIndic = options.selector.find('div div'); + options.el = this; + options.hue = cal.find('div.colorpicker_hue div'); + cal.find('div.colorpicker_hue').bind('mousedown', downHue); + options.newColor = cal.find('div.colorpicker_new_color'); + options.currentColor = cal.find('div.colorpicker_current_color'); + cal.data('colorpicker', options); + cal.find('div.colorpicker_submit') + .bind('mouseenter', enterSubmit) + .bind('mouseleave', leaveSubmit) + .bind('click', clickSubmit); + fillRGBFields(options.color, cal.get(0)); + fillHSBFields(options.color, cal.get(0)); + fillHexFields(options.color, cal.get(0)); + setHue(options.color, cal.get(0)); + setSelector(options.color, cal.get(0)); + setCurrentColor(options.color, cal.get(0)); + setNewColor(options.color, cal.get(0)); + if (options.flat) { + cal.css({ + position: 'relative', + display: 'block' + }); + } else { + $(this).bind(options.eventName, show); + } + } + }); + }, + showPicker: function() { + return this.each( function () { + if ($(this).data('colorpickerId')) { + show.apply(this); + } + }); + }, + hidePicker: function() { + return this.each( function () { + if ($(this).data('colorpickerId')) { + $('#' + $(this).data('colorpickerId')).hide(); + } + }); + }, + setColor: function(col) { + if (typeof col == 'string') { + col = HexToHSB(col); + } else if (col.r != undefined && col.g != undefined && col.b != undefined) { + col = RGBToHSB(col); + } else if (col.h != undefined && col.s != undefined && col.b != undefined) { + col = fixHSB(col); + } else { + return this; + } + return this.each(function(){ + if ($(this).data('colorpickerId')) { + var cal = $('#' + $(this).data('colorpickerId')); + cal.data('colorpicker').color = col; + cal.data('colorpicker').origColor = col; + fillRGBFields(col, cal.get(0)); + fillHSBFields(col, cal.get(0)); + fillHexFields(col, cal.get(0)); + setHue(col, cal.get(0)); + setSelector(col, cal.get(0)); + setCurrentColor(col, cal.get(0)); + setNewColor(col, cal.get(0)); + } + }); + } + }; + }(); + $.fn.extend({ + ColorPicker: ColorPicker.init, + ColorPickerHide: ColorPicker.hidePicker, + ColorPickerShow: ColorPicker.showPicker, + ColorPickerSetColor: ColorPicker.setColor + }); +})(jQuery) \ No newline at end of file diff --git a/js/mooRainbow/images/blank.gif b/js/mooRainbow/images/blank.gif deleted file mode 100644 index c9c195f..0000000 Binary files a/js/mooRainbow/images/blank.gif and /dev/null differ diff --git a/js/mooRainbow/images/moor_arrows.gif b/js/mooRainbow/images/moor_arrows.gif deleted file mode 100644 index c57addc..0000000 Binary files a/js/mooRainbow/images/moor_arrows.gif and /dev/null differ diff --git a/js/mooRainbow/images/moor_boverlay.png b/js/mooRainbow/images/moor_boverlay.png deleted file mode 100644 index 7ac228b..0000000 Binary files a/js/mooRainbow/images/moor_boverlay.png and /dev/null differ diff --git a/js/mooRainbow/images/moor_cursor.gif b/js/mooRainbow/images/moor_cursor.gif deleted file mode 100644 index 9515a38..0000000 Binary files a/js/mooRainbow/images/moor_cursor.gif and /dev/null differ diff --git a/js/mooRainbow/images/moor_slider.png b/js/mooRainbow/images/moor_slider.png deleted file mode 100644 index 9f4c47b..0000000 Binary files a/js/mooRainbow/images/moor_slider.png and /dev/null differ diff --git a/js/mooRainbow/images/moor_woverlay.png b/js/mooRainbow/images/moor_woverlay.png deleted file mode 100644 index c3f3e96..0000000 Binary files a/js/mooRainbow/images/moor_woverlay.png and /dev/null differ diff --git a/js/mooRainbow/images/rainbow.png b/js/mooRainbow/images/rainbow.png deleted file mode 100644 index a62ec90..0000000 Binary files a/js/mooRainbow/images/rainbow.png and /dev/null differ diff --git a/js/mooRainbow/mooRainbow.css b/js/mooRainbow/mooRainbow.css deleted file mode 100644 index 764664e..0000000 --- a/js/mooRainbow/mooRainbow.css +++ /dev/null @@ -1,114 +0,0 @@ -/*** - * - mooRainbow: defaultCSS - * author: w00fz <w00fzIT@gmail.com> - */ - -#mooRainbow { font-size: 11px; color: #000; } - -.moor-box { - width: 390px; - height: 310px; - border: 1px solid #636163; - background-color: #f9f9f9; -} -.moor-overlayBox { - width: 256px; /* Width and Height of the overlay must be setted here: default 256x256 */ - height: 256px; - margin-top: 9px; - margin-left: 9px; - border: 1px solid #000; -} -.moor-slider { - border: 1px solid #000; - margin-top: 9px; - margin-left: 280px; - width: 19px; /* if you want a bigger or smaller slider... */ - height: 256px; -} -.moor-colorBox { - border: 1px solid #000; - width: 59px; - height: 68px; - margin-top: 20px; - margin-left: 315px; -} -.moor-currentColor { /* Bottom Box Color, the backup one */ - margin-top: 55px; - margin-left: 316px; - width: 59px; - height: 34px; -} -.moor-okButton { - font-family: Tahoma; - font-weight: bold; - font-size: 11px; - margin-top: 278px; - margin-left: 8px; - background: #e6e6e6; - height: 23px; - border: 1px solid #d6d6d6; - border-left-color: #f5f5f5; - border-top-color: #f5f5f5; -} -#mooRainbow label { - font-family: mono; -} -/* Following are just <label> */ -.moor-rLabel { - margin-top: 100px; - margin-left: 315px; -} -.moor-gLabel { - margin-top: 125px; - margin-left: 315px; -} -.moor-bLabel { - margin-top: 150px; - margin-left: 315px; -} -.moor-HueLabel { - margin-top: 190px; - margin-left: 315px; -} -span.moor-ballino { /* Style hue � (degree) !! */ - margin-top: 190px; - margin-left: 370px; -} -.moor-SatuLabel { - margin-top: 215px; - margin-left: 315px; -} -.moor-BrighLabel { - margin-top: 240px; - margin-left: 315px; -} -.moor-hexLabel { - margin-top: 275px; - margin-left: 280px; -} - -/* <input> */ -.moor-rInput, .moor-gInput, .moor-bInput, .moor-HueInput, .moor-SatuInput, .moor-BrighInput { - width: 30px; -} -.moor-hexInput { - width: 55px; -} -.moor-cursor { - background-image: url(images/moor_cursor.gif); - width: 12px; - height: 12px; -} -.moor-arrows { - background-image: url(images/moor_arrows.gif); - top: 9px; - left: 270px; - width: 41px; - height: 9px; -} -.moor-chooseColor { /* Top Box Color, the choosen one */ - margin-top: 21px; - margin-left: 316px; - width: 59px; - height: 34px; -} \ No newline at end of file diff --git a/js/mooRainbow/mooRainbow.js b/js/mooRainbow/mooRainbow.js deleted file mode 100644 index c355a73..0000000 --- a/js/mooRainbow/mooRainbow.js +++ /dev/null @@ -1,563 +0,0 @@ -/*** - * MooRainbow - * - * @version 1.2b1 - * @license MIT-style license - * @author Djamil Legato (w00fz) - < w00fzIT [at] gmail.com > - * @infos http://moorainbow.woolly-sheep.net - * @copyright Author - * - * includes a fix for mootools 1.2 by Piotr Przybylski - */ - -var MooRainbow = new Class({ - Implements: [Options, Events], - options: { - id: 'mooRainbow', - prefix: 'moor-', - imgPath: 'images/', - startColor: [255, 0, 0], - wheel: false, - onComplete: Class.empty, - onChange: Class.empty, - selectText: 'Select' - }, - - initialize: function(el, options) { - this.element = $(el); if (!this.element) return; - this.setOptions(options); - - this.sliderPos = 0; - this.pickerPos = {x: 0, y: 0}; - this.backupColor = this.options.startColor; - this.currentColor = this.options.startColor; - this.sets = { - rgb: [], - hsb: [], - hex: [] - }; - this.pickerClick = this.sliderClick = false; - if (!this.layout) this.doLayout(); - this.OverlayEvents(); - this.sliderEvents(); - this.backupEvent(); - if (this.options.wheel) this.wheelEvents(); - this.element.addEvent('click', function(e) { this.toggle(e); }.bind(this)); - - this.layout.overlay.setStyle('background-color', this.options.startColor.rgbToHex()); - this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex()); - - this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w; - this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h; - - this.manualSet(this.options.startColor); - - this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w; - this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h; - this.sliderPos = this.snippet('arrPos') - this.snippet('arrSize', 'int'); - - if (Browser.Engine.webkit) this.hide(); - }, - - toggle: function() { - this[this.visible ? 'hide' : 'show']() - }, - - show: function() { - this.rePosition(); - this.layout.setStyle('display', 'block'); - this.visible = true; - }, - - hide: function() { - this.layout.setStyles({'display': 'none'}); - this.visible = false; - }, - - manualSet: function(color, type) { - if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb'; - var rgb, hsb, hex; - - if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } - else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); } - else { hex = color; rgb = color.hexToRgb(true); hsb = rgb.rgbToHsb(); } - - this.setMooRainbow(rgb); - this.autoSet(hsb); - }, - - autoSet: function(hsb) { - var curH = this.snippet('curSize', 'int').h; - var curW = this.snippet('curSize', 'int').w; - var oveH = this.layout.overlay.height; - var oveW = this.layout.overlay.width; - var sliH = this.layout.slider.height; - var arwH = this.snippet('arrSize', 'int'); - var hue; - - var posx = Math.round(((oveW * hsb[1]) / 100) - curW); - var posy = Math.round(- ((oveH * hsb[2]) / 100) + oveH - curH); - - var c = Math.round(((sliH * hsb[0]) / 360)); c = (c == 360) ? 0 : c; - var position = sliH - c + this.snippet('slider') - arwH; - hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex(); - - this.layout.cursor.setStyles({'top': posy, 'left': posx}); - this.layout.arrows.setStyle('top', position); - this.layout.overlay.setStyle('background-color', hue); - this.sliderPos = this.snippet('arrPos') - arwH; - this.pickerPos.x = this.snippet('curPos').l + curW; - this.pickerPos.y = this.snippet('curPos').t + curH; - }, - - setMooRainbow: function(color, type) { - if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb'; - var rgb, hsb, hex; - - if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } - else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); } - else { hex = color; rgb = color.hexToRgb(); hsb = rgb.rgbToHsb(); } - - this.sets = { - rgb: rgb, - hsb: hsb, - hex: hex - }; - - if (!$chk(this.pickerPos.x)) - this.autoSet(hsb); - - this.RedInput.value = rgb[0]; - this.GreenInput.value = rgb[1]; - this.BlueInput.value = rgb[2]; - this.HueInput.value = hsb[0]; - this.SatuInput.value = hsb[1]; - this.BrighInput.value = hsb[2]; - this.hexInput.value = hex; - - this.currentColor = rgb; - - this.chooseColor.setStyle('background-color', rgb.rgbToHex()); - }, - - parseColors: function(x, y, z) { - var s = Math.round((x * 100) / this.layout.overlay.width); - var b = 100 - Math.round((y * 100) / this.layout.overlay.height); - var h = 360 - Math.round((z * 360) / this.layout.slider.height) + this.snippet('slider') - this.snippet('arrSize', 'int'); - h -= this.snippet('arrSize', 'int'); - h = (h >= 360) ? 0 : (h < 0) ? 0 : h; - s = (s > 100) ? 100 : (s < 0) ? 0 : s; - b = (b > 100) ? 100 : (b < 0) ? 0 : b; - - return [h, s, b]; - }, - - OverlayEvents: function() { - var lim, curH, curW, inputs; - curH = this.snippet('curSize', 'int').h; - curW = this.snippet('curSize', 'int').w; - inputs = $A(this.arrRGB).concat(this.arrHSB, this.hexInput); - - document.addEvent('click', function() { - if(this.visible) this.hide(this.layout); - }.bind(this)); - - inputs.each(function(el) { - if(el) { - el.addEvent('keydown', this.eventKeydown.bindWithEvent(this, el)); - el.addEvent('keyup', this.eventKeyup.bindWithEvent(this, el)); - } - }, this); - [this.element, this.layout].each(function(el) { - el.addEvents({ - 'click': function(e) { new Event(e).stop();}, - 'keyup': function(e) { - e = new Event(e); - if(e.key == 'esc' && this.visible) this.hide(this.layout); - }.bind(this) - }, this); - }, this); - - lim = { - x: [0 - curW, (this.layout.overlay.width - curW)], - y: [0 - curH, (this.layout.overlay.height - curH)] - }; - - this.layout.drag = new Drag(this.layout.cursor, { - limit: lim, - onStart: this.overlayDrag.bind(this), - onDrag: this.overlayDrag.bind(this), - snap: 0 - }); - - this.layout.overlay2.addEvent('mousedown', function(e){ - e = new Event(e); - this.layout.cursor.setStyles({ - 'top': e.page.y - this.layout.overlay.getPosition().y - curH, - 'left': e.page.x - this.layout.overlay.getPosition().x - curW - }); - this.overlayDrag(); - this.layout.drag.start(e); - }.bind(this)); - - this.okButton.addEvent('click', function() { - if(this.currentColor == this.options.startColor) { - this.hide(); - this.fireEvent('onComplete', [this.sets, this]); - } - else { - this.backupColor = this.currentColor; - this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex()); - this.hide(); - this.fireEvent('onComplete', [this.sets, this]); - } - }.bind(this)); - }, - - overlayDrag: function() { - var curH = this.snippet('curSize', 'int').h; - var curW = this.snippet('curSize', 'int').w; - this.pickerPos.x = this.snippet('curPos').l + curW; - this.pickerPos.y = this.snippet('curPos').t + curH; - - this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb'); - this.fireEvent('onChange', [this.sets, this]); - }, - - sliderEvents: function() { - var arwH = this.snippet('arrSize', 'int'), lim; - - lim = [0 + this.snippet('slider') - arwH, this.layout.slider.height - arwH + this.snippet('slider')]; - this.layout.sliderDrag = new Drag(this.layout.arrows, { - limit: {y: lim}, - modifiers: {x: false}, - onStart: this.sliderDrag.bind(this), - onDrag: this.sliderDrag.bind(this), - snap: 0 - }); - - this.layout.slider.addEvent('mousedown', function(e){ - e = new Event(e); - - this.layout.arrows.setStyle( - 'top', e.page.y - this.layout.slider.getPosition().y + this.snippet('slider') - arwH - ); - this.sliderDrag(); - this.layout.sliderDrag.start(e); - }.bind(this)); - }, - - sliderDrag: function() { - var arwH = this.snippet('arrSize', 'int'), hue; - - this.sliderPos = this.snippet('arrPos') - arwH; - this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb'); - hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex(); - this.layout.overlay.setStyle('background-color', hue); - this.fireEvent('onChange', [this.sets, this]); - }, - - backupEvent: function() { - this.layout.backup.addEvent('click', function() { - this.manualSet(this.backupColor); - this.fireEvent('onChange', [this.sets, this]); - }.bind(this)); - }, - - wheelEvents: function() { - var arrColors = $A(this.arrRGB).extend(this.arrHSB); - - arrColors.each(function(el) { - el.addEvents({ - 'mousewheel': this.eventKeys.bindWithEvent(this, el), - 'keydown': this.eventKeys.bindWithEvent(this, el) - }); - }, this); - - [this.layout.arrows, this.layout.slider].each(function(el) { - el.addEvents({ - 'mousewheel': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider']), - 'keydown': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider']) - }); - }, this); - }, - - eventKeys: function(e, el, id) { - var wheel, type; - id = (!id) ? el.id : this.arrHSB[0]; - - if (e.type == 'keydown') { - if (e.key == 'up') wheel = 1; - else if (e.key == 'down') wheel = -1; - else return; - } else if (e.type == Element.Events.mousewheel.base) wheel = (e.wheel > 0) ? 1 : -1; - - if (this.arrRGB.contains(el)) type = 'rgb'; - else if (this.arrHSB.contains(el)) type = 'hsb'; - else type = 'hsb'; - - if (type == 'rgb') { - var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass; - var value = (el.value.toInt() || 0) + wheel; - value = (value > 255) ? 255 : (value < 0) ? 0 : value; - - switch(el.className) { - case prefix + 'rInput': pass = [value, rgb[1], rgb[2]]; break; - case prefix + 'gInput': pass = [rgb[0], value, rgb[2]]; break; - case prefix + 'bInput': pass = [rgb[0], rgb[1], value]; break; - default : pass = rgb; - } - this.manualSet(pass); - this.fireEvent('onChange', [this.sets, this]); - } else { - var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass; - var value = (el.value.toInt() || 0) + wheel; - - if (el.className.test(/(HueInput)/)) value = (value > 359) ? 0 : (value < 0) ? 0 : value; - else value = (value > 100) ? 100 : (value < 0) ? 0 : value; - - switch(el.className) { - case prefix + 'HueInput': pass = [value, hsb[1], hsb[2]]; break; - case prefix + 'SatuInput': pass = [hsb[0], value, hsb[2]]; break; - case prefix + 'BrighInput': pass = [hsb[0], hsb[1], value]; break; - default : pass = hsb; - } - - this.manualSet(pass, 'hsb'); - this.fireEvent('onChange', [this.sets, this]); - } - e.stop(); - }, - - eventKeydown: function(e, el) { - var n = e.code, k = e.key; - - if ((!el.className.test(/hexInput/) && !(n >= 48 && n <= 57)) && - (k!='backspace' && k!='tab' && k !='delete' && k!='left' && k!='right')) - e.stop(); - }, - - eventKeyup: function(e, el) { - var n = e.code, k = e.key, pass, prefix, chr = el.value.charAt(0); - - if (!$chk(el.value)) return; - if (el.className.test(/hexInput/)) { - if (chr != "#" && el.value.length != 6) return; - if (chr == '#' && el.value.length != 7) return; - } else { - if (!(n >= 48 && n <= 57) && (!['backspace', 'tab', 'delete', 'left', 'right'].contains(k)) && el.value.length > 3) return; - } - - prefix = this.options.prefix; - - if (el.className.test(/(rInput|gInput|bInput)/)) { - if (el.value < 0 || el.value > 255) return; - switch(el.className){ - case prefix + 'rInput': pass = [el.value, this.sets.rgb[1], this.sets.rgb[2]]; break; - case prefix + 'gInput': pass = [this.sets.rgb[0], el.value, this.sets.rgb[2]]; break; - case prefix + 'bInput': pass = [this.sets.rgb[0], this.sets.rgb[1], el.value]; break; - default : pass = this.sets.rgb; - } - this.manualSet(pass); - this.fireEvent('onChange', [this.sets, this]); - } - else if (!el.className.test(/hexInput/)) { - if (el.className.test(/HueInput/) && el.value < 0 || el.value > 360) return; - else if (el.className.test(/HueInput/) && el.value == 360) el.value = 0; - else if (el.className.test(/(SatuInput|BrighInput)/) && el.value < 0 || el.value > 100) return; - switch(el.className){ - case prefix + 'HueInput': pass = [el.value, this.sets.hsb[1], this.sets.hsb[2]]; break; - case prefix + 'SatuInput': pass = [this.sets.hsb[0], el.value, this.sets.hsb[2]]; break; - case prefix + 'BrighInput': pass = [this.sets.hsb[0], this.sets.hsb[1], el.value]; break; - default : pass = this.sets.hsb; - } - this.manualSet(pass, 'hsb'); - this.fireEvent('onChange', [this.sets, this]); - } else { - pass = el.value.hexToRgb(true); - if (isNaN(pass[0])||isNaN(pass[1])||isNaN(pass[2])) return; - - if ($chk(pass)) { - this.manualSet(pass); - this.fireEvent('onChange', [this.sets, this]); - } - } - - }, - - doLayout: function() { - var id = this.options.id, prefix = this.options.prefix; - var idPrefix = id + ' .' + prefix; - - this.layout = new Element('div', { - 'styles': {'display': 'block', 'position': 'absolute'}, - 'id': id - }).inject(document.body); - - var box = new Element('div', { - 'styles': {'position': 'relative'}, - 'class': prefix + 'box' - }).inject(this.layout); - - var div = new Element('div', { - 'styles': {'position': 'absolute', 'overflow': 'hidden'}, - 'class': prefix + 'overlayBox' - }).inject(box); - - var ar = new Element('div', { - 'styles': {'position': 'absolute', 'zIndex': 1}, - 'class': prefix + 'arrows' - }).inject(box); - ar.width = ar.getStyle('width').toInt(); - ar.height = ar.getStyle('height').toInt(); - - var ov = new Element('img', { - 'styles': {'background-color': '#fff', 'position': 'relative', 'zIndex': 2}, - 'src': this.options.imgPath + 'moor_woverlay.png', - 'class': prefix + 'overlay' - }).inject(div); - - var ov2 = new Element('img', { - 'styles': {'position': 'absolute', 'top': 0, 'left': 0, 'zIndex': 2}, - 'src': this.options.imgPath + 'moor_boverlay.png', - 'class': prefix + 'overlay' - }).inject(div); - - if (Browser.Engine.trident4) { - div.setStyle('overflow', ''); - var src = ov.src; - ov.src = this.options.imgPath + 'blank.gif'; - ov.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"; - src = ov2.src; - ov2.src = this.options.imgPath + 'blank.gif'; - ov2.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"; - } - ov.width = ov2.width = div.getStyle('width').toInt(); - ov.height = ov2.height = div.getStyle('height').toInt(); - - var cr = new Element('div', { - 'styles': {'overflow': 'hidden', 'position': 'absolute', 'zIndex': 2}, - 'class': prefix + 'cursor' - }).inject(div); - cr.width = cr.getStyle('width').toInt(); - cr.height = cr.getStyle('height').toInt(); - - var sl = new Element('img', { - 'styles': {'position': 'absolute', 'z-index': 2}, - 'src': this.options.imgPath + 'moor_slider.png', - 'class': prefix + 'slider' - }).inject(box); - this.layout.slider = sl; - sl.width = sl.getStyle('width').toInt(); - sl.height = sl.getStyle('height').toInt(); - - new Element('div', { - 'styles': {'position': 'absolute'}, - 'class': prefix + 'colorBox' - }).inject(box); - - new Element('div', { - 'styles': {'zIndex': 2, 'position': 'absolute'}, - 'class': prefix + 'chooseColor' - }).inject(box); - - this.layout.backup = new Element('div', { - 'styles': {'zIndex': 2, 'position': 'absolute', 'cursor': 'pointer'}, - 'class': prefix + 'currentColor' - }).inject(box); - - var R = new Element('label').inject(box).setStyle('position', 'absolute'); - var G = R.clone().inject(box).addClass(prefix + 'gLabel').set('html', 'G: '); - var B = R.clone().inject(box).addClass(prefix + 'bLabel').set('html', 'B: '); - R.set('html', 'R: ').addClass(prefix + 'rLabel'); - - var inputR = new Element('input'); - var inputG = inputR.clone().inject(G).addClass(prefix + 'gInput'); - var inputB = inputR.clone().inject(B).addClass(prefix + 'bInput'); - inputR.inject(R).addClass(prefix + 'rInput'); - - var HU = new Element('label').inject(box).setStyle('position', 'absolute'); - var SA = HU.clone().inject(box).addClass(prefix + 'SatuLabel').set('html', 'S: '); - var BR = HU.clone().inject(box).addClass(prefix + 'BrighLabel').set('html', 'B: '); - HU.set('html', 'H: ').addClass(prefix + 'HueLabel'); - - var inputHU = new Element('input'); - var inputSA = inputHU.clone().inject(SA).addClass(prefix + 'SatuInput'); - var inputBR = inputHU.clone().inject(BR).addClass(prefix + 'BrighInput'); - inputHU.inject(HU).addClass(prefix + 'HueInput'); - SA.innerHTML += " %"; BR.innerHTML += " %"; - SP = new Element('span', {'styles': {'position': 'absolute'}, 'class': prefix + 'ballino'}) - SP.innerHTML = " °" - SP.inject(HU,'after'); - - var hex = new Element('label').inject(box).setStyle('position', 'absolute').addClass(prefix + 'hexLabel').set('html', '#hex: ').adopt(new Element('input').addClass(prefix + 'hexInput')); - - var ok = new Element('input', { - 'styles': {'position': 'absolute'}, - 'type': 'button', - 'value': this.options.selectText, - 'class': prefix + 'okButton' - }).inject(box); - - this.rePosition(); - - var overlays = $$('#' + id + ' .' + prefix + 'overlay'); - this.layout.overlay = overlays[0]; - this.layout.overlay2 = overlays[1]; - this.layout.cursor = cr; - this.layout.arrows = ar; - this.chooseColor = this.layout.getElement('.' + prefix + 'chooseColor'); - this.RedInput = inputR; - this.GreenInput = inputG; - this.BlueInput = inputB; - this.HueInput = inputHU; - this.SatuInput = this.layout.getElement('.' + prefix + 'SatuInput'); - this.BrighInput = this.layout.getElement('.' + prefix + 'BrighInput'); - this.hexInput = this.layout.getElement('.' + prefix + 'hexInput');; - - this.arrRGB = [this.RedInput, this.GreenInput, this.BlueInput]; - this.arrHSB = [this.HueInput, this.SatuInput, this.BrighInput]; - this.okButton = ok; - - if (!Browser.Engine.webkit419) this.hide(); - }, - rePosition: function() { - var coords = this.element.getCoordinates(); - this.layout.setStyles({ - 'left': coords.left, - 'top': coords.top + coords.height + 1 - }); - }, - - snippet: function(mode, type) { - var size; type = (type) ? type : 'none'; - - switch(mode) { - case 'arrPos': - var t = this.layout.arrows.getStyle('top').toInt(); - size = t; - break; - case 'arrSize': - var h = this.layout.arrows.height; - h = (type == 'int') ? (h/2).toInt() : h; - size = h; - break; - case 'curPos': - var l = this.layout.cursor.getStyle('left').toInt(); - var t = this.layout.cursor.getStyle('top').toInt(); - size = {'l': l, 't': t}; - break; - case 'slider': - var t = this.layout.slider.getStyle('marginTop').toInt(); - size = t; - break; - default : - var h = this.layout.cursor.height; - var w = this.layout.cursor.width; - h = (type == 'int') ? (h/2).toInt() : h; - w = (type == 'int') ? (w/2).toInt() : w; - size = {w: w, h: h}; - }; - return size; - } -}); diff --git a/js/mootools-domready-rainbow.js b/js/mootools-domready-rainbow.js deleted file mode 100644 index 40041df..0000000 --- a/js/mootools-domready-rainbow.js +++ /dev/null @@ -1,16 +0,0 @@ -window.addEvent('domready', function() { - var r = new MooRainbow('myRainbow', { - 'startColor': [58, 142, 246], - 'imgPath': 'js/mooRainbow/images/', - 'onChange': function(color) { - top.frame_navigation.document.getElementById('body_leftFrame').style.backgroundColor = color.hex; - top.frame_navigation.document.getElementById('pmalogo').style.backgroundColor = color.hex; - top.frame_content.document.body.style.backgroundColor = color.hex; - }, - 'onComplete': function(color) { - top.frame_content.document.getElementById('rainbowform').custom_color.value = color.hex; - top.frame_content.document.getElementById('rainbowform').custom_color_rgb.value = color.rgb; - top.frame_content.document.getElementById('rainbowform').submit(); - } - }); -}); diff --git a/libraries/common.inc.php b/libraries/common.inc.php index 11c5f8b..5a4afc4 100644 --- a/libraries/common.inc.php +++ b/libraries/common.inc.php @@ -666,10 +666,8 @@ unset($default_server); if (isset($_REQUEST['custom_color_reset'])) { unset($_SESSION['tmp_user_values']['custom_color']); - unset($_SESSION['tmp_user_values']['custom_color_rgb']); } elseif (isset($_REQUEST['custom_color'])) { $_SESSION['tmp_user_values']['custom_color'] = $_REQUEST['custom_color']; - $_SESSION['tmp_user_values']['custom_color_rgb'] = $_REQUEST['custom_color_rgb']; } /** * @global PMA_Theme_Manager $_SESSION['PMA_Theme_Manager'] diff --git a/libraries/header_meta_style.inc.php b/libraries/header_meta_style.inc.php index 5413be6..c6c6f96 100644 --- a/libraries/header_meta_style.inc.php +++ b/libraries/header_meta_style.inc.php @@ -46,11 +46,14 @@ if ($GLOBALS['text_dir'] == 'ltr') { echo 'phpMyAdmin'; } ?></title> - <link rel="stylesheet" type="text/css" href="<?php echo defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : ''; ?>phpmyadmin.css.php?<?php echo PMA_generate_common_url(); ?>&js_frame=<?php echo isset($print_view) ? 'print' : 'right'; ?>&nocache=<?php echo $GLOBALS['PMA_Config']->getThemeUniqueValue(); ?>" /> -<?php if (defined('PMA_MOORAINBOW')) { ?> - <link rel="stylesheet" type="text/css" href="js/mooRainbow/mooRainbow.css" /> +<?php +// goes before our themed CSS + if (defined('PMA_COLORPICKER')) { ?> + <link rel="stylesheet" type="text/css" href="js/colorpicker/css/colorpicker.css" /> + <link rel="stylesheet" media="screen" type="text/css" href="js/colorpicker/css/layout.css" /> <?php - } + } ?> + <link rel="stylesheet" type="text/css" href="<?php echo defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : ''; ?>phpmyadmin.css.php?<?php echo PMA_generate_common_url(); ?>&js_frame=<?php echo isset($print_view) ? 'print' : 'right'; ?>&nocache=<?php echo $GLOBALS['PMA_Config']->getThemeUniqueValue(); ?>" /> <link rel="stylesheet" type="text/css" href="<?php echo defined('PMA_PATH_TO_BASEDIR') ? PMA_PATH_TO_BASEDIR : ''; ?>print.css" media="print" /> <meta name="robots" content="noindex,nofollow" /> diff --git a/main.php b/main.php index ef9c6b5..36a8125 100644 --- a/main.php +++ b/main.php @@ -9,11 +9,11 @@ /** * Gets some core libraries and displays a top message if required */ -define('PMA_MOORAINBOW', true); +define('PMA_COLORPICKER', true); require_once './libraries/common.inc.php'; -$GLOBALS['js_include'][] = 'mootools-more.js'; -$GLOBALS['js_include'][] = 'mooRainbow/mooRainbow.js'; -$GLOBALS['js_include'][] = 'mootools-domready-rainbow.js'; + +$GLOBALS['js_include'][] = 'jquery/jquery-1.4.2-min.js'; +$GLOBALS['js_include'][] = 'colorpicker/js/colorpicker.js'; // Handles some variables that may have been sent by the calling script $GLOBALS['db'] = ''; @@ -159,14 +159,37 @@ if ($GLOBALS['cfg']['ThemeManager']) { //<![CDATA[ document.write('<li id="li_custom_color">'); document.write('<?php echo PMA_escapeJsString($strCustomColor) . ': '; ?>'); - document.write('<img id="myRainbow" src="js/mooRainbow/images/rainbow.png" alt="[r]" width="16" height="16" />'); - document.write('<form name="rainbowform" id="rainbowform" method="post" action="index.php" target="_parent">'); + document.write('<form name="colorform" id="colorform" method="post" action="index.php" target="_parent">'); document.write('<?php echo PMA_generate_common_hidden_inputs(); ?>'); - document.write('<input type="hidden" name="custom_color" />'); - document.write('<input type="hidden" name="custom_color_rgb" />'); + document.write('<input type="hidden" id="custom_color" name="custom_color" value="" />'); document.write('<input type="submit" name="custom_color_reset" value="<?php echo $strReset; ?>" />'); document.write('</form>'); + document.write('<div id="colorSelector">'); + document.write('</div>'); document.write('</li>'); + + $(document).ready(function() { + // Choosing another id does not work! + $('#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) { + top.frame_content.document.body.style.backgroundColor = '#' + hex; + top.frame_navigation.document.body.style.backgroundColor = '#' + hex; + }, + onSubmit: function(hsb, hex, rgb) { + $('#custom_color').val('#' + hex); + $('#colorform').submit(); + } + }); + }); //]]> </script> <?php hooks/post-receive -- phpMyAdmin