------------------------------------------------------------
Common Public License, Version 1.0
http://zipeditor.sourceforge.net/
+
+============================================================
+Notices for file(s):
+/org.tizen.common.ui/resources/scripts/colorpicker/*
+------------------------------------------------------------
+MIT
+https://github.com/Belelros/jQuery-ColorPicker/
+
+
</p>
<p>
-The home page is located at:
+A copy of the license is included in <a href="about_files/jquerycolorpicker-LICENSE.txt">about_files/jquerycolorpicker-LICENSE.txt</a>. The home page is located at:
<ul>
-<a href="http://www.eyecon.ro/colorpicker/">http://www.eyecon.ro/colorpicker</a>
+<a href="https://github.com/Belelros/jQuery-ColorPicker">https://github.com/Belelros/jQuery-ColorPicker</a>
</ul>
</p>
--- /dev/null
+Copyright 2013 Antonio Laguna
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
COLOR PICKER - JQUERY PLUGIN
- Library: colorpicker
-- Download Site: http://www.eyecon.ro/colorpicker/#download
-- Release: - colorpicker.zip
-- Release Date: -2009-05-23
+- Download Site: https://github.com/Belelros/jQuery-ColorPicker
+- Original Site: http://www.eyecon.ro/colorpicker/#download
+- Release: - jQuery-ColorPicker-master.zip
+- Release Date: -2013-09-17
- License: Dual licensed under the MIT and GPL licenses.
--- /dev/null
+#ColorPicker
+
+This is **yet another colorpicker** plugin for jQuery since most of them are not on GitHub nor being mantained at the moment.
+
+The plugin is a fork of the one developed by Stefan Petre who seems not to be interested in it anymore. I needed a powerfull colorpicker for one of my projects so I updated it and then thought it would be nice if it would were freely available.
+
+You can see the [demo][] now.
+
+##Features
+
+- Flat model - as element in page, attached to an input and custom widget.
+- Powerful controls for color selection
+- Easy to customize the look by changing some images
+- Fits into the viewport
+- Powerful callback system to totally control the way it works
+
+##License
+
+The plugin is currently dual licensed under the MIT and GPL licenses.
+
+##Implement
+
+Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.
+
+ <link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
+ <script src="js/colorpicker.js"></script>
+
+##How to use
+
+All you have to do, is to select the elements in a jQuery way and call the plugin over them.
+
+ $('input').ColorPicker(options);
+
+##Options
+An object containing parameters. Please, note that all parameters are optional.
+
+> **eventName** (*string*): This is the desired event to trigger the colorpicker. Default: 'click'
+
+> **color** (*string* or *object*): The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'
+
+> **flat** (*boolean*): Whether if the color picker is appended to the element or triggered by an event. Default false
+
+> **livePreview** (*boolean*): Whether if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true
+
+> **onShow** (*function*): Callback function triggered when the colorpicker is shown
+
+> **onBeforeShow** (*function*) Callback function triggered before the colorpicker is shown
+
+> **onHide** (*function*): Callback function triggered when the colorpicker is hidden
+
+> **onChange** (*function*): Callback function triggered when the color is changed
+
+> **onSubmit** (*function*): Callback function triggered when the color is chosen
+
+##Methods
+
+If you want to set a new color.
+
+ $('input').ColorPickerSetColor(color);
+
+The 'color' argument is the same format as the option color, string for hex color or object for RGB and HSB ({r:255, r:0, b:0}).
+
+##Examples
+
+###Flat mode
+
+ $('#colorpickerholder').ColorPicker({flat: true});
+
+Custom skin and using flat mode to display the color picker in a custom widget.
+
+ $('#colorpickerholder2').ColorPicker({
+ flat: true,
+ color: '#EFEFEF',
+ onSubmit: function(hsb, hex, rgb) {
+ $('#colorselector div').css('backgroundColor', '#' + hex);
+ }
+ });
+
+
+Attached to a 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.
+
+ $('#colorpickerfield').ColorPicker({
+ onSubmit: function(hsb, hex, rgb, el, parent) {
+ $(el).val(hex);
+ $(el).ColorPickerHide();
+ },
+ onBeforeShow: function () {
+ $(this).ColorPickerSetColor(this.value);
+ }
+ })
+ .bind('keyup', function(){
+ $(this).ColorPickerSetColor(this.value);
+ });
+
+Attached to DOM and using callbacks to live preview the color and adding animation.
+
+ $('#colorselector2').ColorPicker({
+ color: '#EFEFEF',
+ onShow: function (colpkr) {
+ $(colpkr).fadeIn(500);
+ return false;
+ },
+ onHide: function (colpkr) {
+ $(colpkr).fadeOut(500);
+ return false;
+ },
+ onChange: function (hsb, hex, rgb) {
+ $('#colorselector2 div').css('backgroundColor', '#' + hex);
+ }
+ });
+[demo]: http://belelros.github.com/jQuery-ColorPicker/ "View the demo now!"
+
+##Thanks
+
+I would like to thank to everybody that keeps mantaining this ColorPicker. By far, these people have been added/fixed something to this:
+
+- [Colin Viebrock](https://github.com/cviebrock)
+- [Fabian Mücke](https://github.com/fabianmuecke)
+- Ken Thomson (sorry, couldn't find it's profile)
+- [Daniel Macedo](https://github.com/dm)
\ No newline at end of file
<html>\r
<head>\r
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">\r
- <link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />\r
+ <link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.min.css" />\r
<script src="../jquery-1.9.1.js"></script>\r
- <script type="text/javascript" src="js/colorpicker.js"></script>\r
+ <script type="text/javascript" src="js/colorpicker.min.js"></script>\r
<style>\r
* {\r
- overflow-y: hidden; /* need to hide vertical bar of SWT Browser */\r
+ overflow: hidden; /* need to hide vertical bar of SWT Browser */\r
}\r
\r
body {\r
.colorpicker {\r
- width: 356px;\r
- height: 176px;\r
+ width: 350px;\r
+ height: 170px;\r
overflow: hidden;\r
position: absolute;\r
- background: url(../images/colorpicker_background.png);\r
font-family: Arial, Helvetica, sans-serif;\r
display: none;\r
+ z-index: 999;\r
+ border:3px solid #BABABA;\r
+ background-color:#121212;\r
+ -webkit-border-radius: 5px;\r
+ -moz-border-radius: 5px;\r
+ border-radius: 5px;\r
+}\r
+\r
+.colorpicker input {\r
+ line-height: normal;\r
+ width: auto;\r
}\r
+\r
.colorpicker_color {\r
width: 150px;\r
height: 150px;\r
- left: 14px;\r
- top: 13px;\r
+ left: 9px;\r
+ top: 8px;\r
position: absolute;\r
background: #f00;\r
overflow: hidden;\r
cursor: crosshair;\r
+ border: 2px solid #474848;\r
}\r
.colorpicker_color div {\r
position: absolute;\r
left: 0;\r
width: 150px;\r
height: 150px;\r
- background: url(../images/colorpicker_overlay.png);\r
+ background: url("../images/overlay.png");\r
}\r
.colorpicker_color div div {\r
position: absolute;\r
width: 11px;\r
height: 11px;\r
overflow: hidden;\r
- background: url(../images/colorpicker_select.gif);\r
+ background: url("../images/select.gif");\r
margin: -5px 0 0 -5px;\r
}\r
.colorpicker_hue {\r
position: absolute;\r
- top: 13px;\r
- left: 171px;\r
- width: 35px;\r
+ top: 8px;\r
+ left: 175px;\r
+ width: 17px;\r
height: 150px;\r
cursor: n-resize;\r
+ background: url("../images/select_hue.png");\r
+ border: 2px solid #474848;\r
}\r
.colorpicker_hue div {\r
position: absolute;\r
width: 35px;\r
height: 9px;\r
overflow: hidden;\r
- background: url(../images/colorpicker_indic.gif) left top;\r
+ background: url("../images/indic.gif") left top;\r
margin: -4px 0 0 0;\r
- left: 0px;\r
+ left: -9px;\r
}\r
.colorpicker_new_color {\r
position: absolute;\r
width: 60px;\r
height: 30px;\r
- left: 213px;\r
- top: 13px;\r
+ left: 208px;\r
+ top: 8px;\r
background: #f00;\r
+ border: 2px solid #474848;\r
}\r
.colorpicker_current_color {\r
position: absolute;\r
width: 60px;\r
height: 30px;\r
- left: 283px;\r
- top: 13px;\r
+ left: 278px;\r
+ top: 8px;\r
background: #f00;\r
+ border: 2px solid #474848;\r
}\r
.colorpicker input {\r
background-color: transparent;\r
font-size: 10px;\r
font-family: Arial, Helvetica, sans-serif;\r
color: #898989;\r
- top: 4px;\r
- right: 11px;\r
+ top: 2px;\r
+ right: 10px;\r
text-align: right;\r
margin: 0;\r
padding: 0;\r
- height: 11px;\r
+ height: 13px;\r
+ width: 30px;\r
+ border: 1px solid #2f2f2f;\r
+ background-color: #121212;\r
}\r
.colorpicker_hex {\r
position: absolute;\r
- width: 72px;\r
- height: 22px;\r
- background: url(../images/colorpicker_hex.png) top;\r
- left: 212px;\r
- top: 142px;\r
+ width: 70px;\r
+ height: 20px;\r
+ left: 209px;\r
+ top: 139px;\r
}\r
.colorpicker_hex input {\r
right: 6px;\r
-}\r
+ width: 47px;\r
+}\r
+\r
+\r
+.colorpicker_field, .colorpicker_hex {\r
+ background: url("../images/gradient_input.png") center repeat-x; // Fallback\r
+ background: -webkit-linear-gradient(top, #1A1A1A 0%, #303030 45%, #262525 47%, #2E2E2E 100%);\r
+ background: -moz-linear-gradient(top, #1A1A1A 0%, #303030 45%, #262525 47%, #2E2E2E 100%);\r
+ background: -ms-linear-gradient(top, #1A1A1A 0%, #303030 45%, #262525 47%, #2E2E2E 100%);\r
+ background: -o-linear-gradient(top, #1A1A1A 0%, #303030 45%, #262525 47%, #2E2E2E 100%);\r
+ background: linear-gradient(top, #1A1A1A 0%, #303030 45%, #262525 47%, #2E2E2E 100%);\r
+ border: 1px solid #2f2f2f;\r
+}\r
+\r
+\r
.colorpicker_field {\r
- height: 22px;\r
- width: 62px;\r
+ height: 20px;\r
+ width: 60px;\r
background-position: top;\r
position: absolute;\r
}\r
+\r
+.colorpicker_focus, .colorpicker_focus input {\r
+ border: 1px solid #4d4b4b;\r
+}\r
+\r
+.colorpicker_field label, .colorpicker_hex label {\r
+ color: #D8D8D8;\r
+ font-size: 11px;\r
+ text-shadow: none;\r
+ display: block;\r
+ margin-top: 2px;\r
+ margin-left: 5px;\r
+ -webkit-touch-callout: none;\r
+ -webkit-user-select: none;\r
+ -khtml-user-select: none;\r
+ -moz-user-select: -moz-none;\r
+ -ms-user-select: none;\r
+ -o-user-select: none;\r
+ user-select: none;\r
+}\r
.colorpicker_field span {\r
+ background-image: url("../images/grabber.png");\r
+ background-position: center;\r
position: absolute;\r
width: 12px;\r
- height: 22px;\r
+ height: 20px;\r
overflow: hidden;\r
top: 0;\r
right: 0;\r
cursor: n-resize;\r
-}\r
+ -webkit-touch-callout: none;\r
+ -webkit-user-select: none;\r
+ -khtml-user-select: none;\r
+ -moz-user-select: -moz-none;\r
+ -ms-user-select: none;\r
+ -o-user-select: none;\r
+ user-select: none;\r
+}\r
+\r
+.colorpicker_slider span { \r
+ background: url("../images/gradient_grabber.png") center; // Fallback\r
+ background: url("../images/grabber.png"), -webkit-linear-gradient(top, #909090 0%, #4d4c4c 100%);\r
+ background: url("../images/grabber.png"), -moz-linear-gradient(top, #909090 0%, #4d4c4c 100%);\r
+ background: url("../images/grabber.png"), -ms-linear-gradient(top, #909090 0%, #4d4c4c 100%);\r
+ background: url("../images/grabber.png"), -o-linear-gradient(top, #909090 0%, #4d4c4c 100%);\r
+ background: url("../images/grabber.png"), linear-gradient(top, #909090 0%, #4d4c4c 100%);\r
+}\r
+\r
.colorpicker_rgb_r {\r
- background-image: url(../images/colorpicker_rgb_r.png);\r
- top: 52px;\r
- left: 212px;\r
+ top: 49px;\r
+ left: 209px;\r
}\r
.colorpicker_rgb_g {\r
- background-image: url(../images/colorpicker_rgb_g.png);\r
- top: 82px;\r
- left: 212px;\r
+ top: 79px;\r
+ left: 209px;\r
}\r
.colorpicker_rgb_b {\r
- background-image: url(../images/colorpicker_rgb_b.png);\r
- top: 112px;\r
- left: 212px;\r
+ top: 109px;\r
+ left: 209px;\r
}\r
.colorpicker_hsb_h {\r
- background-image: url(../images/colorpicker_hsb_h.png);\r
- top: 52px;\r
- left: 282px;\r
+ top: 49px;\r
+ left: 279px;\r
}\r
.colorpicker_hsb_s {\r
- background-image: url(../images/colorpicker_hsb_s.png);\r
- top: 82px;\r
- left: 282px;\r
+ top: 79px;\r
+ left: 279px;\r
}\r
.colorpicker_hsb_b {\r
- background-image: url(../images/colorpicker_hsb_b.png);\r
- top: 112px;\r
- left: 282px;\r
+ top: 109px;\r
+ left: 279px;\r
}\r
.colorpicker_submit {\r
position: absolute;\r
width: 22px;\r
height: 22px;\r
- background: url(../images/colorpicker_submit.png) top;\r
- left: 322px;\r
- top: 142px;\r
+ background: url("../images/submit.png") top;\r
+ left: 319px;\r
+ top: 139px;\r
overflow: hidden;\r
}\r
-.colorpicker_focus {\r
- background-position: center;\r
-}\r
-.colorpicker_hex.colorpicker_focus {\r
- background-position: bottom;\r
-}\r
-.colorpicker_submit.colorpicker_focus {\r
- background-position: bottom;\r
-}\r
-.colorpicker_slider {\r
- background-position: bottom;\r
+\r
+.colorSelector {\r
+ position: relative;\r
+ width: 36px;\r
+ height: 36px;\r
+ left: 35%;\r
+ margin-top: 5px;\r
+ margin-bottom: 5px;\r
+ background: url("../select.png");\r
+}\r
+.colorSelector div {\r
+ position: absolute;\r
+ top: 3px;\r
+ left: 3px;\r
+ width: 30px;\r
+ height: 30px;\r
+ background: url("../select.png") center;\r
}\r
--- /dev/null
+.colorpicker{width:350px;height:170px;overflow:hidden;position:absolute;font-family:Arial,Helvetica,sans-serif;display:none;z-index:999;border:3px solid #bababa;background-color:#121212;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker input{line-height:normal;width:auto}.colorpicker_color{width:150px;height:150px;left:9px;top:8px;position:absolute;background:#f00;overflow:hidden;cursor:crosshair;border:2px solid #474848}.colorpicker_color div{position:absolute;top:0;left:0;width:150px;height:150px;background:url("../images/overlay.png")}.colorpicker_color div div{position:absolute;top:0;left:0;width:11px;height:11px;overflow:hidden;background:url("../images/select.gif");margin:-5px 0 0 -5px}.colorpicker_hue{position:absolute;top:8px;left:175px;width:17px;height:150px;cursor:n-resize;background:url("../images/select_hue.png");border:2px solid #474848}.colorpicker_hue div{position:absolute;width:35px;height:9px;overflow:hidden;background:url("../images/indic.gif") left top;margin:-4px 0 0 0;left:-9px}.colorpicker_new_color{position:absolute;width:60px;height:30px;left:208px;top:8px;background:#f00;border:2px solid #474848}.colorpicker_current_color{position:absolute;width:60px;height:30px;left:278px;top:8px;background:#f00;border:2px solid #474848}.colorpicker input{background-color:transparent;border:1px solid transparent;position:absolute;font-size:10px;font-family:Arial,Helvetica,sans-serif;color:#898989;top:2px;right:10px;text-align:right;margin:0;padding:0;height:13px;width:30px;border:1px solid #2f2f2f;background-color:#121212}.colorpicker_hex{position:absolute;width:70px;height:20px;left:209px;top:139px}.colorpicker_hex input{right:6px;width:47px}.colorpicker_field,.colorpicker_hex{background:url("../images/gradient_input.png") center repeat-x;// Fallback background:-webkit-linear-gradient(top,#1a1a1a 0,#303030 45%,#262525 47%,#2e2e2e 100%);background:-moz-linear-gradient(top,#1a1a1a 0,#303030 45%,#262525 47%,#2e2e2e 100%);background:-ms-linear-gradient(top,#1a1a1a 0,#303030 45%,#262525 47%,#2e2e2e 100%);background:-o-linear-gradient(top,#1a1a1a 0,#303030 45%,#262525 47%,#2e2e2e 100%);background:linear-gradient(top,#1a1a1a 0,#303030 45%,#262525 47%,#2e2e2e 100%);border:1px solid #2f2f2f}.colorpicker_field{height:20px;width:60px;background-position:top;position:absolute}.colorpicker_focus,.colorpicker_focus input{border:1px solid #4d4b4b}.colorpicker_field label,.colorpicker_hex label{color:#d8d8d8;font-size:11px;text-shadow:none;display:block;margin-top:2px;margin-left:5px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;-o-user-select:none;user-select:none}.colorpicker_field span{background-image:url("../images/grabber.png");background-position:center;position:absolute;width:12px;height:20px;overflow:hidden;top:0;right:0;cursor:n-resize;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;-o-user-select:none;user-select:none}.colorpicker_slider span{background:url("../images/gradient_grabber.png") center;// Fallback background:url("../images/grabber.png"),-webkit-linear-gradient(top,#909090 0,#4d4c4c 100%);background:url("../images/grabber.png"),-moz-linear-gradient(top,#909090 0,#4d4c4c 100%);background:url("../images/grabber.png"),-ms-linear-gradient(top,#909090 0,#4d4c4c 100%);background:url("../images/grabber.png"),-o-linear-gradient(top,#909090 0,#4d4c4c 100%);background:url("../images/grabber.png"),linear-gradient(top,#909090 0,#4d4c4c 100%)}.colorpicker_rgb_r{top:49px;left:209px}.colorpicker_rgb_g{top:79px;left:209px}.colorpicker_rgb_b{top:109px;left:209px}.colorpicker_hsb_h{top:49px;left:279px}.colorpicker_hsb_s{top:79px;left:279px}.colorpicker_hsb_b{top:109px;left:279px}.colorpicker_submit{position:absolute;width:22px;height:22px;background:url("../images/submit.png") top;left:319px;top:139px;overflow:hidden}.colorSelector{position:relative;width:36px;height:36px;left:35%;margin-top:5px;margin-bottom:5px;background:url("../select.png")}.colorSelector div{position:absolute;top:3px;left:3px;width:30px;height:30px;background:url("../select.png") center}
+++ /dev/null
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { \r
- margin:0;\r
- padding:0;\r
-}\r
-table {\r
- border-collapse:collapse;\r
- border-spacing:0;\r
-}\r
-fieldset,img { \r
- border:0;\r
-}\r
-address,caption,cite,code,dfn,em,strong,th,var {\r
- font-style:normal;\r
- font-weight:normal;\r
-}\r
-ol,ul {\r
- list-style:none;\r
-}\r
-caption,th {\r
- text-align:left;\r
-}\r
-h1,h2,h3,h4,h5,h6 {\r
- font-size:100%;\r
- font-weight:normal;\r
-}\r
-q:before,q:after {\r
- content:'';\r
-}\r
-abbr,acronym { border:0;\r
-}\r
-html, body {\r
- background-color: #fff;\r
- font-family: Arial, Helvetica, sans-serif;\r
- font-size: 12px;\r
- line-height: 18px;\r
- color: #52697E;\r
-}\r
-body {\r
- text-align: center;\r
- overflow: auto;\r
-}\r
-.wrapper {\r
- width: 700px;\r
- margin: 0 auto;\r
- text-align: left;\r
-}\r
-h1 {\r
- font-size: 21px;\r
- height: 47px;\r
- line-height: 47px;\r
- text-transform: uppercase;\r
-}\r
-.navigationTabs {\r
- height: 23px;\r
- line-height: 23px;\r
- border-bottom: 1px solid #ccc;\r
-}\r
-.navigationTabs li {\r
- float: left;\r
- height: 23px;\r
- line-height: 23px;\r
- padding-right: 3px;\r
-}\r
-.navigationTabs li a{\r
- float: left;\r
- dispaly: block;\r
- height: 23px;\r
- line-height: 23px;\r
- padding: 0 10px;\r
- overflow: hidden;\r
- color: #52697E;\r
- background-color: #eee;\r
- position: relative;\r
- text-decoration: none;\r
-}\r
-.navigationTabs li a:hover {\r
- background-color: #f0f0f0;\r
-}\r
-.navigationTabs li a.active {\r
- background-color: #fff;\r
- border: 1px solid #ccc;\r
- border-bottom: 0px solid;\r
-}\r
-.tabsContent {\r
- border: 1px solid #ccc;\r
- border-top: 0px solid;\r
- width: 698px;\r
- overflow: hidden;\r
-}\r
-.tab {\r
- padding: 16px;\r
- display: none;\r
-}\r
-.tab h2 {\r
- font-weight: bold;\r
- font-size: 16px;\r
-}\r
-.tab h3 {\r
- font-weight: bold;\r
- font-size: 14px;\r
- margin-top: 20px;\r
-}\r
-.tab p {\r
- margin-top: 16px;\r
- clear: both;\r
-}\r
-.tab ul {\r
- margin-top: 16px;\r
- list-style: disc;\r
-}\r
-.tab li {\r
- margin: 10px 0 0 35px;\r
-}\r
-.tab a {\r
- color: #8FB0CF;\r
-}\r
-.tab strong {\r
- font-weight: bold;\r
-}\r
-.tab pre {\r
- font-size: 11px;\r
- margin-top: 20px;\r
- width: 668px;\r
- overflow: auto;\r
- clear: both;\r
-}\r
-.tab table {\r
- width: 100%;\r
-}\r
-.tab table td {\r
- padding: 6px 10px 6px 0;\r
- vertical-align: top;\r
-}\r
-.tab dt {\r
- margin-top: 16px;\r
-}\r
-\r
-#colorSelector {\r
- position: relative;\r
- width: 36px;\r
- height: 36px;\r
- background: url(../images/select.png);\r
-}\r
-#colorSelector div {\r
- position: absolute;\r
- top: 3px;\r
- left: 3px;\r
- width: 30px;\r
- height: 30px;\r
- background: url(../images/select.png) center;\r
-}\r
-#colorSelector2 {\r
- position: absolute;\r
- top: 0;\r
- left: 0;\r
- width: 36px;\r
- height: 36px;\r
- background: url(../images/select2.png);\r
-}\r
-#colorSelector2 div {\r
- position: absolute;\r
- top: 4px;\r
- left: 4px;\r
- width: 28px;\r
- height: 28px;\r
- background: url(../images/select2.png) center;\r
-}\r
-#colorpickerHolder2 {\r
- top: 32px;\r
- left: 0;\r
- width: 356px;\r
- height: 0;\r
- overflow: hidden;\r
- position: absolute;\r
-}\r
-#colorpickerHolder2 .colorpicker {\r
- background-image: url(../images/custom_background.png);\r
- position: absolute;\r
- bottom: 0;\r
- left: 0;\r
-}\r
-#colorpickerHolder2 .colorpicker_hue div {\r
- background-image: url(../images/custom_indic.gif);\r
-}\r
-#colorpickerHolder2 .colorpicker_hex {\r
- background-image: url(../images/custom_hex.png);\r
-}\r
-#colorpickerHolder2 .colorpicker_rgb_r {\r
- background-image: url(../images/custom_rgb_r.png);\r
-}\r
-#colorpickerHolder2 .colorpicker_rgb_g {\r
- background-image: url(../images/custom_rgb_g.png);\r
-}\r
-#colorpickerHolder2 .colorpicker_rgb_b {\r
- background-image: url(../images/custom_rgb_b.png);\r
-}\r
-#colorpickerHolder2 .colorpicker_hsb_s {\r
- background-image: url(../images/custom_hsb_s.png);\r
- display: none;\r
-}\r
-#colorpickerHolder2 .colorpicker_hsb_h {\r
- background-image: url(../images/custom_hsb_h.png);\r
- display: none;\r
-}\r
-#colorpickerHolder2 .colorpicker_hsb_b {\r
- background-image: url(../images/custom_hsb_b.png);\r
- display: none;\r
-}\r
-#colorpickerHolder2 .colorpicker_submit {\r
- background-image: url(../images/custom_submit.png);\r
-}\r
-#colorpickerHolder2 .colorpicker input {\r
- color: #778398;\r
-}\r
-#customWidget {\r
- position: relative;\r
- height: 36px;\r
-}\r
--- /dev/null
+body {
+ margin: 0;
+ padding: 0;
+ background-image: url('../images/pattern.png');
+ font-family: Calibri, Verdana, Ariel, sans-serif;
+}
+#wrapper {
+ width: 900px;
+ margin: 0 auto;
+ padding: 20px 0;
+
+}
+#wrapper > h1 {
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 3em;
+ margin: 0px 0px 15px 0px;
+ padding: 0;
+ font-family: 'Lilita One', cursive;
+ color: #fff;
+ text-decoration: none;
+ font-weight: bold;
+ text-shadow:
+ 1px 1px 0 #dd0000,
+ 2px 2px 0 #dd0000,
+ 3px 3px 0 #dd0000,
+ 4px 4px 0 #fe6230,
+ 6px 5px 0 #fe6230,
+ 7px 7px 0 #fe6230,
+ 8px 8px 0 #fef600,
+ 9px 9px 0 #fef600,
+ 10px 10px 0 #fef600,
+ 11px 11px 0 #00bc00,
+ 12px 12px 0 #00bc00,
+ 13px 13px 0 #00bc00,
+ 14px 14px 0 #009bfe,
+ 15px 15px 0 #009bfe,
+ 16px 16px 0 #009bfe,
+ 17px 17px 0 #000083,
+ 18px 18px 0 #000083,
+ 19px 19px 0 #000083,
+ 20px 20px 0 #30009b,
+ 21px 21px 0 #30009b,
+ 22px 22px 0 #30009b;
+}
+#wrapper > article {
+ width: 700px;
+ background: #fbfbfb;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ padding: 2em 1.5em;
+ color: rgba(0,0,0, .8);
+ text-shadow: 0 1px 0 #fff;
+ line-height: 1.5;
+ margin: 60px auto;
+ -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
+ -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
+ box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
+}
+#colorselector {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 36px;
+ height: 36px;
+ background: url(../images/select2.png);
+}
+#colorselector 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 input {
+ color: #778398;
+}
+#customWidget {
+ position: relative;
+ height: 36px;
+}
+
+#colorselector2 {
+ position: relative;
+ width: 36px;
+ height: 36px;
+ background: url(../images/select.png);
+}
+#colorselector2 div {
+ position: absolute;
+ top: 3px;
+ left: 3px;
+ width: 30px;
+ height: 30px;
+ background: url(../images/select.png) center;
+}
\ No newline at end of file
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\r
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
-<head>\r
- <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />\r
- <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />\r
- <title>ColorPicker - jQuery plugin</title>\r
- <script type="text/javascript" src="js/jquery.js"></script>\r
- <script type="text/javascript" src="js/colorpicker.js"></script>\r
- <script type="text/javascript" src="js/eye.js"></script>\r
- <script type="text/javascript" src="js/utils.js"></script>\r
- <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>\r
-</head>\r
-<body>\r
- <div class="wrapper">\r
- <h1>Color Picker - jQuery plugin</h1>\r
- <ul class="navigationTabs">\r
- <li><a href="#about" rel="about">About</a></li>\r
- <li><a href="#download" rel="download">Download</a></li>\r
- <li><a href="#implement" rel="implement">Implement</a></li>\r
- </ul>\r
- <div class="tabsContent">\r
- <div class="tab">\r
- <h2>About</h2>\r
- <p>A simple component to select color in the same way you select color in Adobe Photoshop</p>\r
- <h3>Last update</h3>\r
- <p>23.05.2009 - Check Download tab</p>\r
- <h3>Features</h3>\r
- <ul>\r
- <li>Flat mode - as element in page</li>\r
- <li>Powerful controls for color selection</li>\r
- <li>Easy to customize the look by changing some images</li>\r
- <li>Fits into the viewport</li>\r
- </ul>\r
- <h3>License</h3>\r
- <p>Dual licensed under the MIT and GPL licenses.</p>\r
- <h3>Examples</h3>\r
- <p>Flat mode.</p>\r
- <p id="colorpickerHolder">\r
- </p>\r
- <pre>\r
-$('#colorpickerHolder').ColorPicker({flat: true});\r
- </pre>\r
- <p>Custom skin and using flat mode to display the color picker in a custom widget.</p>\r
- <div id="customWidget">\r
- <div id="colorSelector2"><div style="background-color: #00ff00"></div></div>\r
- <div id="colorpickerHolder2">\r
- </div>\r
- </div>\r
-\r
- <p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>\r
- <p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>\r
- <p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>\r
- <p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>\r
- <pre>$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({\r
- onSubmit: function(hsb, hex, rgb, el) {\r
- $(el).val(hex);\r
- $(el).ColorPickerHide();\r
- },\r
- onBeforeShow: function () {\r
- $(this).ColorPickerSetColor(this.value);\r
- }\r
-})\r
-.bind('keyup', function(){\r
- $(this).ColorPickerSetColor(this.value);\r
-});\r
-</pre>\r
- <p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>\r
- <p>\r
- <div id="colorSelector"><div style="background-color: #0000ff"></div></div>\r
- </p>\r
- <pre>\r
-$('#colorSelector').ColorPicker({\r
- color: '#0000ff',\r
- onShow: function (colpkr) {\r
- $(colpkr).fadeIn(500);\r
- return false;\r
- },\r
- onHide: function (colpkr) {\r
- $(colpkr).fadeOut(500);\r
- return false;\r
- },\r
- onChange: function (hsb, hex, rgb) {\r
- $('#colorSelector div').css('backgroundColor', '#' + hex);\r
- }\r
-});\r
-</pre>\r
- </div>\r
- <div class="tab">\r
- <h2>Download</h2>\r
- <p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>\r
- <h3>Changelog</h3>\r
- <dl>\r
- <dt>23.05.2009</dt>\r
- <dd>Added: close on color selection example</dd>\r
- <dd>Added: restore original color option</dd>\r
- <dd>Changed: color update on key up event</dd>\r
- <dd>Fixed: colorpicker hide and show methods</dd>\r
- <dd>Fixed: reference to options. Multiple fields with colorpickers is possible now.</dd>\r
- <dd>Fixed: RGB to HSB convertion</dd>\r
- <dt>22.08.2008</dt>\r
- <dd>Fixed bug: where some events were not canceled right on Safari</dd>\r
- <dd>Fixed bug: where teh view port was not detected right on Safari</dd>\r
- <dt>16-07-2008</dt>\r
- <dd>Fixed bug where the letter 'F' could not be typed in the Hex field</dd>\r
- <dd>Fixed bug where the changes on Hex field where not parsed</dd>\r
- <dd>Added new option 'livePreview'</dd>\r
- <dt>08-07-2008</dt>\r
- <dd>Fixed typo in the code, both JavaScript and CSS</dd>\r
- <dd>Changed the cursor for some elements</dd>\r
- <dd>Added new demo explaining how to implement custom skin</dd>\r
- <dt>07.07.2008</dt>\r
- <dd>The first release.</dd>\r
- </dl>\r
- </div>\r
- <div class="tab">\r
- <h2>Implement</h2>\r
- <p>Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.</p>\r
- <pre>\r
-<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />\r
-<script type="text/javascript" src="js/colorpicker.js"></script>\r
- </pre>\r
- <h3>Invocation code</h3>\r
- <p>All you have to do is to select the elements in a jQuery way and call the plugin.</p>\r
- <pre>\r
- $('input').ColorPicker(options);\r
- </pre>\r
- <h3>Options</h3>\r
- <p>A hash of parameters. All parameters are optional.</p>\r
- <table>\r
- <tr>\r
- <td><strong>eventName</strong></td>\r
- <td>string</td>\r
- <td>The desired event to trigger the colorpicker. Default: 'click'</td>\r
- </tr>\r
- <tr>\r
- <td><strong>color</strong></td>\r
- <td>string or hash</td>\r
- <td>The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</td>\r
- </tr>\r
- <tr>\r
- <td><strong>flat</strong></td>\r
- <td>boolean</td>\r
- <td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td>\r
- </tr>\r
- <tr>\r
- <td><strong>livePreview</strong></td>\r
- <td>boolean</td>\r
- <td>Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true</td>\r
- </tr>\r
- <tr>\r
- <td><strong>onShow</strong></td>\r
- <td>function</td>\r
- <td>Callback function triggered when the color picker is shown</td>\r
- </tr>\r
- <tr>\r
- <td><strong>onBeforeShow</strong></td>\r
- <td>function</td>\r
- <td>Callback function triggered before the color picker is shown</td>\r
- </tr>\r
- <tr>\r
- <td><strong>onHide</strong></td>\r
- <td>function</td>\r
- <td>Callback function triggered when the color picker is hidden</td>\r
- </tr>\r
- <tr>\r
- <td><strong>onChange</strong></td>\r
- <td>function</td>\r
- <td>Callback function triggered when the color is changed</td>\r
- </tr>\r
- <tr>\r
- <td><strong>onSubmit</strong></td>\r
- <td>function</td>\r
- <td>Callback function triggered when the color it is chosen</td>\r
- </tr>\r
- </table>\r
- <h3>Set color</h3>\r
- <p>If you want to set a new color.</p>\r
- <pre>$('input').ColorPickerSetColor(color);</pre>\r
- <p>The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).</p>\r
- </div>\r
- </div>\r
- </div>\r
-</body>\r
-</html>\r
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery ColorPicker - Yet another jQuery ColorPicker</title>
+ <meta charset="utf-8">
+ <link href='http://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
+ <link href="css/page.css" rel="stylesheet" type="text/css" media="all">
+ <link href="css/colorpicker.css" rel="stylesheet" type="text/css" media="all">
+</head>
+<body>
+ <a href="http://github.com/you">
+ <img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme.png" alt="Fork me on GitHub">
+ </a>
+ <div id="wrapper">
+ <h1>jQuery ColorPicker</h1>
+ <article>
+ <h1>ColorPicker</h1>
+
+ <p>This is <strong>yet another colorpicker</strong> plugin for jQuery since most of them are not on GitHub nor being mantained at the moment.</p>
+
+ <p>The plugin is a fork of the one developed by Stefan Petre who seems not to be interested in it anymore. I needed a powerfull colorpicker for one of my projects so I updated it and then thought it would be nice if it would were freely available.</p>
+
+ <h2>Features</h2>
+
+ <ul>
+ <li>Flat model - as element in page, attached to an input and custom widget.</li>
+ <li>Powerful controls for color selection </li>
+ <li>Easy to customize the look by changing some images </li>
+ <li>Fits into the viewport </li>
+ <li>Powerful callback system to totally control the way it works</li>
+ </ul>
+
+ <h2>License</h2>
+
+ <p>The plugin is currently dual licensed under the MIT and GPL licenses.</p>
+
+ <h2>Implement</h2>
+
+ <p>Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.</p>
+
+ <pre>
+ <link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
+ <script src="js/colorpicker.js"></script>
+ </pre>
+
+ <h2>How to use</h2>
+
+ <p>All you have to do, is to select the elements in a jQuery way and call the plugin over them.</p>
+
+ <pre> $('input').ColorPicker(options); </pre>
+
+ <h2>Options</h2>
+
+ <p>An object containing parameters. Please, note that all parameters are optional. </p>
+
+ <blockquote>
+ <p><strong>eventName</strong> (<em>string</em>): This is the desired event to trigger the colorpicker. Default: 'click' </p>
+
+ <p><strong>color</strong> (<em>string</em> or <em>object</em>): The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</p>
+
+ <p><strong>flat</strong> (<em>boolean</em>): Whether if the color picker is appended to the element or triggered by an event. Default false</p>
+
+ <p><strong>livePreview</strong> (<em>boolean</em>): Whether if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true</p>
+
+ <p><strong>onShow</strong> (<em>function</em>): Callback function triggered when the colorpicker is shown</p>
+
+ <p><strong>onBeforeShow</strong> (<em>function</em>) Callback function triggered before the colorpicker is shown</p>
+
+ <p><strong>onHide</strong> (<em>function</em>): Callback function triggered when the colorpicker is hidden</p>
+
+ <p><strong>onChange</strong> (<em>function</em>): Callback function triggered when the color is changed</p>
+
+ <p><strong>onSubmit</strong> (<em>function</em>): Callback function triggered when the color is chosen</p>
+ </blockquote>
+
+ <h2>Methods</h2>
+
+ <p>If you want to set a new color.</p>
+
+ <pre> $('input').ColorPickerSetColor(color);
+ </pre>
+
+ <p>The 'color' argument is the same format as the option color, string for hex color or object for RGB and HSB ({r:255, r:0, b:0}).
+ </p>
+ <h2>Examples</h2>
+
+ <h3>Flat mode</h3>
+
+ <pre> $('#colorpickerholder').ColorPicker({flat: true}); </pre>
+ <div id="colorpickerholder"></div>
+ <p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
+
+ <pre>
+ $('#colorpickerholder2').ColorPicker({
+ flat: true,
+ color: '#EFEFEF',
+ onSubmit: function(hsb, hex, rgb) {
+ $('#colorselector div').css('backgroundColor', '#' + hex);
+ }
+ });
+ </pre>
+ <div id="customWidget">
+ <div id="colorselector"><div style="background-color: #EFEFEF"></div></div>
+ <div id="colorpickerholder2">
+ </div>
+ </div>
+ <p>Attached to a text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
+
+ <pre>
+ $('#colorpickerfield').ColorPicker({
+ onSubmit: function(hsb, hex, rgb, el, parent) {
+ $(el).val(hex);
+ $(el).ColorPickerHide();
+ },
+ onBeforeShow: function () {
+ $(this).ColorPickerSetColor(this.value);
+ }
+ })
+ .on('keyup', function(){
+ $(this).ColorPickerSetColor(this.value);
+ });
+ </pre>
+ <p><input type="text" maxlength="6" size="6" id="colorpickerfield" value="EFEFEF" /></p>
+ <p>Attached to DOM and using callbacks to live preview the color and adding animation.</p>
+
+ <pre>
+ $('#colorselector2').ColorPicker({
+ color: '#EFEFEF',
+ onShow: function (colpkr) {
+ $(colpkr).fadeIn(500);
+ return false;
+ },
+ onHide: function (colpkr) {
+ $(colpkr).fadeOut(500);
+ return false;
+ },
+ onChange: function (hsb, hex, rgb) {
+ $('#colorSelector div').css('backgroundColor', '#' + hex);
+ }
+ });
+ </pre>
+ <div id="colorselector2"><div style="background-color: #EFEFEF"></div></div>
+ </article>
+ </div>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/colorpicker.js"></script>
+ <script>
+ $(function(){
+ var widt = false;
+ $('#colorpickerholder').ColorPicker({flat: true});
+ $('#colorpickerholder2').ColorPicker({
+ flat: true,
+ color: '#EFEFEF',
+ onSubmit: function(hsb, hex, rgb) {
+ $('#colorselector div').css('backgroundColor', '#' + hex);
+ }
+ });
+ $('#colorselector').on('click', function() {
+ $('#colorpickerholder2').stop().animate({height: widt ? 0 : 173}, 500);
+ widt = !widt;
+ });
+ $('#colorpickerfield').ColorPicker({
+ onSubmit: function(hsb, hex, rgb, el, parent) {
+ $(el).val(hex);
+ $(el).ColorPickerHide();
+ },
+ onBeforeShow: function () {
+ $(this).ColorPickerSetColor(this.value);
+ }
+ })
+ .on('keyup', function(){
+ $(this).ColorPickerSetColor(this.value);
+ });
+ $('#colorselector2').ColorPicker({
+ color: '#EFEFEF',
+ onShow: function (colpkr) {
+ $(colpkr).fadeIn(500);
+ return false;
+ },
+ onHide: function (colpkr) {
+ $(colpkr).fadeOut(500);
+ return false;
+ },
+ onChange: function (hsb, hex, rgb) {
+ $('#colorselector2 div').css('backgroundColor', '#' + hex);
+ }
+ });
+ });
+ </script>
+</body>
+</html>
-/**\r
- *\r
- * Color picker\r
- * Author: Stefan Petre www.eyecon.ro\r
- * \r
- * Dual licensed under the MIT and GPL licenses\r
- * \r
- */\r
(function ($) {\r
var ColorPicker = function () {\r
var\r
- ids = {},\r
- inAction,\r
charMin = 65,\r
- visible,\r
- 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>',\r
+ 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"><label for="hex">#</label><input type="text" maxlength="6" size="6" id="hex" /></div><div class="colorpicker_rgb_r colorpicker_field"><label for="rbg_r">R</label><input type="text" maxlength="3" size="3" id="rgb_r" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><label for="rbg_g">G</label><input type="text" maxlength="3" size="3" id="rgb_g" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><label for="rbg_b">B</label><input type="text" maxlength="3" size="3" id="rgb_b" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><label for="hsb_h">H</label><input type="text" maxlength="3" size="3" id="hsb_h" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><label for="hsb_s">S</label><input type="text" maxlength="3" size="3" id="hsb_s" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><label for="hsb_b">B</label><input type="text" maxlength="3" size="3" id="hsb_b" /><span></span></div><div class="colorpicker_submit"></div></div>',\r
defaults = {\r
eventName: 'click',\r
onShow: function () {},\r
},\r
keyDown = function (ev) {\r
var pressedKey = ev.charCode || ev.keyCode || -1;\r
- if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {\r
+ if ((pressedKey > charMin && pressedKey <= 90) || pressedKey === 32) {\r
return false;\r
}\r
var cal = $(this).parent().parent();\r
setSelector(col, cal.get(0));\r
setHue(col, cal.get(0));\r
setNewColor(col, cal.get(0));\r
- cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);\r
+ cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').parent ]);\r
},\r
blur = function (ev) {\r
var cal = $(this).parent().parent();\r
y: ev.pageY,\r
field: field,\r
val: parseInt(field.val(), 10),\r
- preview: $(this).parent().parent().data('colorpicker').livePreview \r
+ preview: $(this).parent().parent().data('colorpicker').livePreview\r
};\r
- $(document).bind('mouseup', current, upIncrement);\r
- $(document).bind('mousemove', current, moveIncrement);\r
+ $(document).on('mouseup', current, upIncrement);\r
+ $(document).on('mousemove', current, moveIncrement);\r
+ return stopHighlight(ev);\r
},\r
moveIncrement = function (ev) {\r
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));\r
upIncrement = function (ev) {\r
change.apply(ev.data.field.get(0), [true]);\r
ev.data.el.removeClass('colorpicker_slider').find('input').focus();\r
- $(document).unbind('mouseup', upIncrement);\r
- $(document).unbind('mousemove', moveIncrement);\r
+ $(document).off('mouseup', upIncrement);\r
+ $(document).off('mousemove', moveIncrement);\r
return false;\r
},\r
downHue = function (ev) {\r
y: $(this).offset().top\r
};\r
current.preview = current.cal.data('colorpicker').livePreview;\r
- $(document).bind('mouseup', current, upHue);\r
- $(document).bind('mousemove', current, moveHue);\r
+ $(document).on('mouseup', current, upHue);\r
+ $(document).on('mousemove', current, moveHue);\r
+ return stopHighlight(ev);\r
},\r
moveHue = function (ev) {\r
change.apply(\r
upHue = function (ev) {\r
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));\r
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));\r
- $(document).unbind('mouseup', upHue);\r
- $(document).unbind('mousemove', moveHue);\r
+ $(document).off('mouseup', upHue);\r
+ $(document).off('mousemove', moveHue);\r
return false;\r
},\r
+ changeHue = function(ev) {\r
+ y = $(this).offset().top;\r
+ preview = ev.data.cal.data('colorpicker').livePreview;\r
+ change.apply(\r
+ ev.data.cal.data('colorpicker')\r
+ .fields\r
+ .eq(4)\r
+ .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - y))))/150, 10))\r
+ .get(0),\r
+ [preview]\r
+ );\r
+ };\r
downSelector = function (ev) {\r
var current = {\r
cal: $(this).parent(),\r
pos: $(this).offset()\r
};\r
current.preview = current.cal.data('colorpicker').livePreview;\r
- $(document).bind('mouseup', current, upSelector);\r
- $(document).bind('mousemove', current, moveSelector);\r
+ $(document).on('mouseup', current, upSelector);\r
+ $(document).on('mousemove', current, moveSelector);\r
+ $(".colorpicker_color", current.cal).one('click', current, moveSelector);\r
+ ev.data = current;\r
+ moveSelector(ev);\r
+ return stopHighlight(ev);\r
},\r
moveSelector = function (ev) {\r
change.apply(\r
return false;\r
},\r
upSelector = function (ev) {\r
+ var current = {\r
+ cal: $(this).parent(),\r
+ pos: $(this).offset()\r
+ };\r
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));\r
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));\r
- $(document).unbind('mouseup', upSelector);\r
- $(document).unbind('mousemove', moveSelector);\r
+ $(document).off('mouseup', upSelector);\r
+ $(document).off('mousemove', moveSelector);\r
return false;\r
},\r
enterSubmit = function (ev) {\r
var col = cal.data('colorpicker').color;\r
cal.data('colorpicker').origColor = col;\r
setCurrentColor(col, cal.get(0));\r
- cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);\r
+ cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el, cal.data('colorpicker').parent);\r
},\r
show = function (ev) {\r
var cal = $('#' + $(this).data('colorpickerId'));\r
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {\r
cal.show();\r
}\r
- $(document).bind('mousedown', {cal: cal}, hide);\r
+ $(document).on('mousedown', {cal: cal}, hide);\r
return false;\r
},\r
hide = function (ev) {\r
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {\r
ev.data.cal.hide();\r
}\r
- $(document).unbind('mousedown', hide);\r
+ $(document).off('mousedown', hide);\r
}\r
},\r
isChildOf = function(parentEl, el, container) {\r
- if (parentEl == el) {\r
+ if (parentEl === el) {\r
return true;\r
}\r
if (parentEl.contains) {\r
return !!(parentEl.compareDocumentPosition(el) & 16);\r
}\r
var prEl = el.parentNode;\r
- while(prEl && prEl != container) {\r
- if (prEl == parentEl)\r
- return true;\r
+ while(prEl && prEl !== container) {\r
+ if (prEl === parentEl){\r
+ return true;\r
+ }\r
prEl = prEl.parentNode;\r
}\r
return false;\r
s: Math.min(100, Math.max(0, hsb.s)),\r
b: Math.min(100, Math.max(0, hsb.b))\r
};\r
- }, \r
+ },\r
fixRGB = function (rgb) {\r
return {\r
r: Math.min(255, Math.max(0, rgb.r)),\r
hex = o.join('');\r
}\r
return hex;\r
- }, \r
+ },\r
HexToRGB = function (hex) {\r
- var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);\r
+ hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);\r
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};\r
},\r
HexToHSB = function (hex) {\r
var max = Math.max(rgb.r, rgb.g, rgb.b);\r
var delta = max - min;\r
hsb.b = max;\r
- if (max != 0) {\r
- \r
- }\r
+\r
hsb.s = max != 0 ? 255 * delta / max : 0;\r
if (hsb.s != 0) {\r
- if (rgb.r == max) {\r
+ if (rgb.r === max) {\r
hsb.h = (rgb.g - rgb.b) / delta;\r
- } else if (rgb.g == max) {\r
+ } else if (rgb.g === max) {\r
hsb.h = 2 + (rgb.b - rgb.r) / delta;\r
} else {\r
hsb.h = 4 + (rgb.r - rgb.g) / delta;\r
var t1 = v;\r
var t2 = (255-s)*v/255;\r
var t3 = (t1-t2)*(h%60)/60;\r
- if(h==360) h = 0;\r
- if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}\r
- else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}\r
- else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}\r
- else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}\r
- else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}\r
- else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}\r
+ if(h===360) {h = 0;}\r
+ if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3;}\r
+ else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3;}\r
+ else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3;}\r
+ else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3;}\r
+ else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3;}\r
+ else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3;}\r
else {rgb.r=0; rgb.g=0; rgb.b=0}\r
}\r
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};\r
rgb.b.toString(16)\r
];\r
$.each(hex, function (nr, val) {\r
- if (val.length == 1) {\r
+ if (val.length === 1) {\r
hex[nr] = '0' + val;\r
}\r
});\r
return hex.join('');\r
},\r
+ RGBstringToHex = function(rgb)\r
+ {\r
+ if (!rgb) {\r
+ return '#FFFFFF';\r
+ }\r
+ var hex_rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);\r
+ function hex(x) {\r
+ return ("0" + parseInt(x,10).toString(16)).slice(-2);\r
+ }\r
+ if (hex_rgb) {\r
+ return "#" + hex(hex_rgb[1]) + hex(hex_rgb[2]) + hex(hex_rgb[3]);\r
+ } else {\r
+ return rgb; //ie8 returns background-color in hex\r
+ }\r
+ },\r
HSBToHex = function (hsb) {\r
return RGBToHex(HSBToRGB(hsb));\r
},\r
init: function (opt) {\r
opt = $.extend({}, defaults, opt||{});\r
if (typeof opt.color == 'string') {\r
- opt.color = HexToHSB(opt.color);\r
- } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {\r
+ if (opt.color.substring(0, 4) == "rgb(") {\r
+ opt.color = HexToHSB(RGBstringToHex(opt.color));\r
+ } else {\r
+ opt.color = HexToHSB(opt.color);\r
+ }\r
+ } else if (opt.color.r !== undefined && opt.color.g !== undefined && opt.color.b !== undefined) {\r
opt.color = RGBToHSB(opt.color);\r
- } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {\r
+ } else if (opt.color.h !== undefined && opt.color.s !== undefined && opt.color.b !== undefined) {\r
opt.color = fixHSB(opt.color);\r
} else {\r
return this;\r
if (!$(this).data('colorpickerId')) {\r
var options = $.extend({}, opt);\r
options.origColor = opt.color;\r
- var id = 'collorpicker_' + parseInt(Math.random() * 1000);\r
+ var idOk,\r
+ idCounter = 0;\r
+ idOk = $('#colorpicker_' + idCounter).length === 0;\r
+ while (!idOk){\r
+ idCounter = parseInt(Math.random() * 10000);\r
+ idOk = $('#colorpicker_' + idCounter).length === 0;\r
+ }\r
+ var id = 'colorpicker_' + idCounter;\r
$(this).data('colorpickerId', id);\r
- var cal = $(tpl).attr('id', id);\r
+ options.parent = $(this);\r
+ var cal = $(tpl);\r
+ cal.attr('id', id).attr('data-parent', $(this).attr('id'));\r
if (options.flat) {\r
cal.appendTo(this).show();\r
} else {\r
cal.appendTo(document.body);\r
}\r
options.fields = cal\r
- .find('input')\r
- .bind('keyup', keyDown)\r
- .bind('change', change)\r
- .bind('blur', blur)\r
- .bind('focus', focus);\r
+ .find('input')\r
+ .on('keyup', keyDown)\r
+ .on('change', change)\r
+ .on('blur', blur)\r
+ .on('focus', focus);\r
cal\r
- .find('span').bind('mousedown', downIncrement).end()\r
- .find('>div.colorpicker_current_color').bind('click', restoreOriginal);\r
- options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);\r
+ .find('span').on('mousedown', downIncrement).end()\r
+ .find('>div.colorpicker_current_color').on('click', restoreOriginal);\r
+ options.selector = cal.find('div.colorpicker_color').on('mousedown', downSelector);\r
options.selectorIndic = options.selector.find('div div');\r
options.el = this;\r
options.hue = cal.find('div.colorpicker_hue div');\r
- cal.find('div.colorpicker_hue').bind('mousedown', downHue);\r
+ cal.find('div.colorpicker_hue').on('mousedown', downHue);\r
+ cal.find('div.colorpicker_hue').on('mousedown', {cal: cal}, changeHue);\r
options.newColor = cal.find('div.colorpicker_new_color');\r
options.currentColor = cal.find('div.colorpicker_current_color');\r
cal.data('colorpicker', options);\r
cal.find('div.colorpicker_submit')\r
- .bind('mouseenter', enterSubmit)\r
- .bind('mouseleave', leaveSubmit)\r
- .bind('click', clickSubmit);\r
+ .on('mouseenter', enterSubmit)\r
+ .on('mouseleave', leaveSubmit)\r
+ .on('click', clickSubmit);\r
fillRGBFields(options.color, cal.get(0));\r
fillHSBFields(options.color, cal.get(0));\r
fillHexFields(options.color, cal.get(0));\r
display: 'block'\r
});\r
} else {\r
- $(this).bind(options.eventName, show);\r
+ $(this).on(options.eventName, show);\r
}\r
}\r
});\r
},\r
setColor: function(col) {\r
if (typeof col == 'string') {\r
- col = HexToHSB(col);\r
- } else if (col.r != undefined && col.g != undefined && col.b != undefined) {\r
+ if (col.substring(0, 4) == "rgb(") {\r
+ col = HexToHSB(RGBstringToHex(col));\r
+ } else {\r
+ col = HexToHSB(col);\r
+ }\r
+ } else if (col.r !== undefined && col.g !== undefined && col.b !== undefined) {\r
col = RGBToHSB(col);\r
- } else if (col.h != undefined && col.s != undefined && col.b != undefined) {\r
+ } else if (col.h !== undefined && col.s !== undefined && col.b !== undefined) {\r
col = fixHSB(col);\r
} else {\r
return this;\r
});\r
}\r
};\r
+ function stopHighlight(e) {\r
+ if (e.originalEvent.preventDefault)\r
+ e.originalEvent.preventDefault();\r
+ return false;\r
+ }\r
}();\r
$.fn.extend({\r
ColorPicker: ColorPicker.init,\r
ColorPickerShow: ColorPicker.showPicker,\r
ColorPickerSetColor: ColorPicker.setColor\r
});\r
-})(jQuery)
\ No newline at end of file
+})(jQuery);\r
--- /dev/null
+(function(e){var t=function(){function x(e){if(e.originalEvent.preventDefault)e.originalEvent.preventDefault();return false}var t=65,n='<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"><label for="hex">#</label><input type="text" maxlength="6" size="6" id="hex" /></div><div class="colorpicker_rgb_r colorpicker_field"><label for="rbg_r">R</label><input type="text" maxlength="3" size="3" id="rgb_r" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><label for="rbg_g">G</label><input type="text" maxlength="3" size="3" id="rgb_g" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><label for="rbg_b">B</label><input type="text" maxlength="3" size="3" id="rgb_b" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><label for="hsb_h">H</label><input type="text" maxlength="3" size="3" id="hsb_h" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><label for="hsb_s">S</label><input type="text" maxlength="3" size="3" id="hsb_s" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><label for="hsb_b">B</label><input type="text" maxlength="3" size="3" id="hsb_b" /><span></span></div><div class="colorpicker_submit"></div></div>',r={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:true,flat:false},i=function(t,n){var r=HSBToRGB(t);e(n).data("colorpicker").fields.eq(1).val(r.r).end().eq(2).val(r.g).end().eq(3).val(r.b).end()},s=function(t,n){e(n).data("colorpicker").fields.eq(4).val(t.h).end().eq(5).val(t.s).end().eq(6).val(t.b).end()},o=function(t,n){e(n).data("colorpicker").fields.eq(0).val(HSBToHex(t)).end()},u=function(t,n){e(n).data("colorpicker").selector.css("backgroundColor","#"+HSBToHex({h:t.h,s:100,b:100}));e(n).data("colorpicker").selectorIndic.css({left:parseInt(150*t.s/100,10),top:parseInt(150*(100-t.b)/100,10)})},a=function(t,n){e(n).data("colorpicker").hue.css("top",parseInt(150-150*t.h/360,10))},f=function(t,n){e(n).data("colorpicker").currentColor.css("backgroundColor","#"+HSBToHex(t))},l=function(t,n){e(n).data("colorpicker").newColor.css("backgroundColor","#"+HSBToHex(t))},c=function(n){var r=n.charCode||n.keyCode||-1;if(r>t&&r<=90||r===32){return false}var i=e(this).parent().parent();if(i.data("colorpicker").livePreview===true){h.apply(this)}},h=function(t){var n=e(this).parent().parent(),r;if(this.parentNode.className.indexOf("_hex")>0){n.data("colorpicker").color=r=HexToHSB(fixHex(this.value))}else if(this.parentNode.className.indexOf("_hsb")>0){n.data("colorpicker").color=r=fixHSB({h:parseInt(n.data("colorpicker").fields.eq(4).val(),10),s:parseInt(n.data("colorpicker").fields.eq(5).val(),10),b:parseInt(n.data("colorpicker").fields.eq(6).val(),10)})}else{n.data("colorpicker").color=r=RGBToHSB(fixRGB({r:parseInt(n.data("colorpicker").fields.eq(1).val(),10),g:parseInt(n.data("colorpicker").fields.eq(2).val(),10),b:parseInt(n.data("colorpicker").fields.eq(3).val(),10)}))}if(t){i(r,n.get(0));o(r,n.get(0));s(r,n.get(0))}u(r,n.get(0));a(r,n.get(0));l(r,n.get(0));n.data("colorpicker").onChange.apply(n,[r,HSBToHex(r),HSBToRGB(r)])},p=function(t){var n=e(this).parent().parent();n.data("colorpicker").fields.parent().removeClass("colorpicker_focus")},d=function(){t=this.parentNode.className.indexOf("_hex")>0?70:65;e(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");e(this).parent().addClass("colorpicker_focus")},v=function(t){var n=e(this).parent().find("input").focus();var r={el:e(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:t.pageY,field:n,val:parseInt(n.val(),10),preview:e(this).parent().parent().data("colorpicker").livePreview};e(document).on("mouseup",r,g);e(document).on("mousemove",r,m);return x(t)},m=function(e){e.data.field.val(Math.max(0,Math.min(e.data.max,parseInt(e.data.val+e.pageY-e.data.y,10))));if(e.data.preview){h.apply(e.data.field.get(0),[true])}return false},g=function(t){h.apply(t.data.field.get(0),[true]);t.data.el.removeClass("colorpicker_slider").find("input").focus();e(document).off("mouseup",g);e(document).off("mousemove",m);return false},b=function(t){var n={cal:e(this).parent(),y:e(this).offset().top};n.preview=n.cal.data("colorpicker").livePreview;e(document).on("mouseup",n,E);e(document).on("mousemove",n,w);return x(t)},w=function(e){h.apply(e.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,e.pageY-e.data.y)))/150,10)).get(0),[e.data.preview]);return false},E=function(t){i(t.data.cal.data("colorpicker").color,t.data.cal.get(0));o(t.data.cal.data("colorpicker").color,t.data.cal.get(0));e(document).off("mouseup",E);e(document).off("mousemove",w);return false},S=function(t){y=e(this).offset().top;preview=t.data.cal.data("colorpicker").livePreview;h.apply(t.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,t.pageY-y)))/150,10)).get(0),[preview])};downSelector=function(t){var n={cal:e(this).parent(),pos:e(this).offset()};n.preview=n.cal.data("colorpicker").livePreview;e(document).on("mouseup",n,upSelector);e(document).on("mousemove",n,moveSelector);e(".colorpicker_color", n.cal).one("click",n,moveSelector);t.data=n;moveSelector(t);return x(t)},moveSelector=function(e){h.apply(e.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,e.pageY-e.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*Math.max(0,Math.min(150,e.pageX-e.data.pos.left))/150,10)).get(0),[e.data.preview]);return false},upSelector=function(t){var n={cal:e(this).parent(),pos:e(this).offset()};i(t.data.cal.data("colorpicker").color,t.data.cal.get(0));o(t.data.cal.data("colorpicker").color,t.data.cal.get(0));e(document).off("mouseup",upSelector);e(document).off("mousemove",moveSelector);return false},enterSubmit=function(t){e(this).addClass("colorpicker_focus")},leaveSubmit=function(t){e(this).removeClass("colorpicker_focus")},clickSubmit=function(t){var n=e(this).parent();var r=n.data("colorpicker").color;n.data("colorpicker").origColor=r;f(r,n.get(0));n.data("colorpicker").onSubmit(r,HSBToHex(r),HSBToRGB(r),n.data("colorpicker").el,n.data("colorpicker").parent)},show=function(t){var n=e("#"+e(this).data("colorpickerId"));n.data("colorpicker").onBeforeShow.apply(this,[n.get(0)]);var r=e(this).offset();var i=getViewport();var s=r.top+this.offsetHeight;var o=r.left;if(s+176>i.t+i.h){s-=this.offsetHeight+176}if(o+356>i.l+i.w){o-=356}n.css({left:o+"px",top:s+"px"});if(n.data("colorpicker").onShow.apply(this,[n.get(0)])!=false){n.show()}e(document).on("mousedown",{cal:n},hide);return false},hide=function(t){if(!isChildOf(t.data.cal.get(0),t.target,t.data.cal.get(0))){if(t.data.cal.data("colorpicker").onHide.apply(this,[t.data.cal.get(0)])!=false){t.data.cal.hide()}e(document).off("mousedown",hide)}},isChildOf=function(e,t,n){if(e===t){return true}if(e.contains){return e.contains(t)}if(e.compareDocumentPosition){return!!(e.compareDocumentPosition(t)&16)}var r=t.parentNode;while(r&&r!==n){if(r===e){return true}r=r.parentNode}return false},getViewport=function(){var e=document.compatMode=="CSS1Compat";return{l:window.pageXOffset||(e?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(e?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(e?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(e?document.documentElement.clientHeight:document.body.clientHeight)}},fixHSB=function(e){return{h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}},fixRGB=function(e){return{r:Math.min(255,Math.max(0,e.r)),g:Math.min(255,Math.max(0,e.g)),b:Math.min(255,Math.max(0,e.b))}},fixHex=function(e){var t=6-e.length;if(t>0){var n=[];for(var r=0;r<t;r++){n.push("0")}n.push(e);e=n.join("")}return e},HexToRGB=function(e){e=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:e>>16,g:(e&65280)>>8,b:e&255}},HexToHSB=function(e){return RGBToHSB(HexToRGB(e))},RGBToHSB=function(e){var t={h:0,s:0,b:0};var n=Math.min(e.r,e.g,e.b);var r=Math.max(e.r,e.g,e.b);var i=r-n;t.b=r;t.s=r!=0?255*i/r:0;if(t.s!=0){if(e.r===r){t.h=(e.g-e.b)/i}else if(e.g===r){t.h=2+(e.b-e.r)/i}else{t.h=4+(e.r-e.g)/i}}else{t.h=-1}t.h*=60;if(t.h<0){t.h+=360}t.s*=100/255;t.b*=100/255;return t},HSBToRGB=function(e){var t={};var n=Math.round(e.h);var r=Math.round(e.s*255/100);var i=Math.round(e.b*255/100);if(r==0){t.r=t.g=t.b=i}else{var s=i;var o=(255-r)*i/255;var u=(s-o)*(n%60)/60;if(n===360){n=0}if(n<60){t.r=s;t.b=o;t.g=o+u}else if(n<120){t.g=s;t.b=o;t.r=s-u}else if(n<180){t.g=s;t.r=o;t.b=o+u}else if(n<240){t.b=s;t.r=o;t.g=s-u}else if(n<300){t.b=s;t.g=o;t.r=o+u}else if(n<360){t.r=s;t.g=o;t.b=s-u}else{t.r=0;t.g=0;t.b=0}}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},RGBToHex=function(t){var n=[t.r.toString(16),t.g.toString(16),t.b.toString(16)];e.each(n,function(e,t){if(t.length===1){n[e]="0"+t}});return n.join("")},RGBstringToHex=function(e){function n(e){return("0"+parseInt(e,10).toString(16)).slice(-2)}if(!e){return"#FFFFFF"}var t=e.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);if(t){return"#"+n(t[1])+n(t[2])+n(t[3])}else{return e}},HSBToHex=function(e){return RGBToHex(HSBToRGB(e))},restoreOriginal=function(){var t=e(this).parent();var n=t.data("colorpicker").origColor;t.data("colorpicker").color=n;i(n,t.get(0));o(n,t.get(0));s(n,t.get(0));u(n,t.get(0));a(n,t.get(0));l(n,t.get(0))};return{init:function(t){t=e.extend({},r,t||{});if(typeof t.color=="string"){if(t.color.substring(0,4)=="rgb("){t.color=HexToHSB(RGBstringToHex(t.color))}else{t.color=HexToHSB(t.color)}}else if(t.color.r!==undefined&&t.color.g!==undefined&&t.color.b!==undefined){t.color=RGBToHSB(t.color)}else if(t.color.h!==undefined&&t.color.s!==undefined&&t.color.b!==undefined){t.color=fixHSB(t.color)}else{return this}return this.each(function(){if(!e(this).data("colorpickerId")){var r=e.extend({},t);r.origColor=t.color;var m,g=0;m=e("#colorpicker_"+g).length===0;while(!m){g=parseInt(Math.random()*1e4);m=e("#colorpicker_"+g).length===0}var y="colorpicker_"+g;e(this).data("colorpickerId",y);r.parent=e(this);var w=e(n);w.attr("id",y).attr("data-parent",e(this).attr("id"));if(r.flat){w.appendTo(this).show()}else{w.appendTo(document.body)}r.fields=w.find("input").on("keyup",c).on("change",h).on("blur",p).on("focus",d);w.find("span").on("mousedown",v).end().find(">div.colorpicker_current_color").on("click",restoreOriginal);r.selector=w.find("div.colorpicker_color").on("mousedown",downSelector);r.selectorIndic=r.selector.find("div div");r.el=this;r.hue=w.find("div.colorpicker_hue div");w.find("div.colorpicker_hue").on("mousedown",b);w.find("div.colorpicker_hue").on("mousedown",{cal:w},S);r.newColor=w.find("div.colorpicker_new_color");r.currentColor=w.find("div.colorpicker_current_color");w.data("colorpicker",r);w.find("div.colorpicker_submit").on("mouseenter",enterSubmit).on("mouseleave",leaveSubmit).on("click",clickSubmit);i(r.color,w.get(0));s(r.color,w.get(0));o(r.color,w.get(0));a(r.color,w.get(0));u(r.color,w.get(0));f(r.color,w.get(0));l(r.color,w.get(0));if(r.flat){w.css({position:"relative",display:"block"})}else{e(this).on(r.eventName,show)}}})},showPicker:function(){return this.each(function(){if(e(this).data("colorpickerId")){show.apply(this)}})},hidePicker:function(){return this.each(function(){if(e(this).data("colorpickerId")){e("#"+e(this).data("colorpickerId")).hide()}})},setColor:function(t){if(typeof t=="string"){if(t.substring(0,4)=="rgb("){t=HexToHSB(RGBstringToHex(t))}else{t=HexToHSB(t)}}else if(t.r!==undefined&&t.g!==undefined&&t.b!==undefined){t=RGBToHSB(t)}else if(t.h!==undefined&&t.s!==undefined&&t.b!==undefined){t=fixHSB(t)}else{return this}return this.each(function(){if(e(this).data("colorpickerId")){var n=e("#"+e(this).data("colorpickerId"));n.data("colorpicker").color=t;n.data("colorpicker").origColor=t;i(t,n.get(0));s(t,n.get(0));o(t,n.get(0));a(t,n.get(0));u(t,n.get(0));f(t,n.get(0));l(t,n.get(0))}})}}}();e.fn.extend({ColorPicker:t.init,ColorPickerHide:t.hidePicker,ColorPickerShow:t.showPicker,ColorPickerSetColor:t.setColor})})(jQuery)
\ No newline at end of file
+++ /dev/null
-/**\r
- *\r
- * Zoomimage\r
- * Author: Stefan Petre www.eyecon.ro\r
- * \r
- */\r
-(function($){\r
- var EYE = window.EYE = function() {\r
- var _registered = {\r
- init: []\r
- };\r
- return {\r
- init: function() {\r
- $.each(_registered.init, function(nr, fn){\r
- fn.call();\r
- });\r
- },\r
- extend: function(prop) {\r
- for (var i in prop) {\r
- if (prop[i] != undefined) {\r
- this[i] = prop[i];\r
- }\r
- }\r
- },\r
- register: function(fn, type) {\r
- if (!_registered[type]) {\r
- _registered[type] = [];\r
- }\r
- _registered[type].push(fn);\r
- }\r
- };\r
- }();\r
- $(EYE.init);\r
-})(jQuery);\r
+++ /dev/null
-(function($){\r
- var initLayout = function() {\r
- var hash = window.location.hash.replace('#', '');\r
- var currentTab = $('ul.navigationTabs a')\r
- .bind('click', showTab)\r
- .filter('a[rel=' + hash + ']');\r
- if (currentTab.size() == 0) {\r
- currentTab = $('ul.navigationTabs a:first');\r
- }\r
- showTab.apply(currentTab.get(0));\r
- $('#colorpickerHolder').ColorPicker({flat: true});\r
- $('#colorpickerHolder2').ColorPicker({\r
- flat: true,\r
- color: '#00ff00',\r
- onSubmit: function(hsb, hex, rgb) {\r
- $('#colorSelector2 div').css('backgroundColor', '#' + hex);\r
- }\r
- });\r
- $('#colorpickerHolder2>div').css('position', 'absolute');\r
- var widt = false;\r
- $('#colorSelector2').bind('click', function() {\r
- $('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);\r
- widt = !widt;\r
- });\r
- $('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({\r
- onSubmit: function(hsb, hex, rgb, el) {\r
- $(el).val(hex);\r
- $(el).ColorPickerHide();\r
- },\r
- onBeforeShow: function () {\r
- $(this).ColorPickerSetColor(this.value);\r
- }\r
- })\r
- .bind('keyup', function(){\r
- $(this).ColorPickerSetColor(this.value);\r
- });\r
- $('#colorSelector').ColorPicker({\r
- color: '#0000ff',\r
- onShow: function (colpkr) {\r
- $(colpkr).fadeIn(500);\r
- return false;\r
- },\r
- onHide: function (colpkr) {\r
- $(colpkr).fadeOut(500);\r
- return false;\r
- },\r
- onChange: function (hsb, hex, rgb) {\r
- $('#colorSelector div').css('backgroundColor', '#' + hex);\r
- }\r
- });\r
- };\r
- \r
- var showTab = function(e) {\r
- var tabIndex = $('ul.navigationTabs a')\r
- .removeClass('active')\r
- .index(this);\r
- $(this)\r
- .addClass('active')\r
- .blur();\r
- $('div.tab')\r
- .hide()\r
- .eq(tabIndex)\r
- .show();\r
- };\r
- \r
- EYE.register(initLayout, 'init');\r
-})(jQuery)
\ No newline at end of file
+++ /dev/null
-/**\r
- *\r
- * Utilities\r
- * Author: Stefan Petre www.eyecon.ro\r
- * \r
- */\r
-(function($) {\r
-EYE.extend({\r
- getPosition : function(e, forceIt)\r
- {\r
- var x = 0;\r
- var y = 0;\r
- var es = e.style;\r
- var restoreStyles = false;\r
- if (forceIt && jQuery.curCSS(e,'display') == 'none') {\r
- var oldVisibility = es.visibility;\r
- var oldPosition = es.position;\r
- restoreStyles = true;\r
- es.visibility = 'hidden';\r
- es.display = 'block';\r
- es.position = 'absolute';\r
- }\r
- var el = e;\r
- if (el.getBoundingClientRect) { // IE\r
- var box = el.getBoundingClientRect();\r
- x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;\r
- y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;\r
- } else {\r
- x = el.offsetLeft;\r
- y = el.offsetTop;\r
- el = el.offsetParent;\r
- if (e != el) {\r
- while (el) {\r
- x += el.offsetLeft;\r
- y += el.offsetTop;\r
- el = el.offsetParent;\r
- }\r
- }\r
- if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {\r
- x -= document.body.offsetLeft;\r
- y -= document.body.offsetTop;\r
- }\r
- el = e.parentNode;\r
- while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML') \r
- {\r
- if (jQuery.curCSS(el, 'display') != 'inline') {\r
- x -= el.scrollLeft;\r
- y -= el.scrollTop;\r
- }\r
- el = el.parentNode;\r
- }\r
- }\r
- if (restoreStyles == true) {\r
- es.display = 'none';\r
- es.position = oldPosition;\r
- es.visibility = oldVisibility;\r
- }\r
- return {x:x, y:y};\r
- },\r
- getSize : function(e)\r
- {\r
- var w = parseInt(jQuery.curCSS(e,'width'), 10);\r
- var h = parseInt(jQuery.curCSS(e,'height'), 10);\r
- var wb = 0;\r
- var hb = 0;\r
- if (jQuery.curCSS(e, 'display') != 'none') {\r
- wb = e.offsetWidth;\r
- hb = e.offsetHeight;\r
- } else {\r
- var es = e.style;\r
- var oldVisibility = es.visibility;\r
- var oldPosition = es.position;\r
- es.visibility = 'hidden';\r
- es.display = 'block';\r
- es.position = 'absolute';\r
- wb = e.offsetWidth;\r
- hb = e.offsetHeight;\r
- es.display = 'none';\r
- es.position = oldPosition;\r
- es.visibility = oldVisibility;\r
- }\r
- return {w:w, h:h, wb:wb, hb:hb};\r
- },\r
- getClient : function(e)\r
- {\r
- var h, w;\r
- if (e) {\r
- w = e.clientWidth;\r
- h = e.clientHeight;\r
- } else {\r
- var de = document.documentElement;\r
- w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;\r
- h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;\r
- }\r
- return {w:w,h:h};\r
- },\r
- getScroll : function (e)\r
- {\r
- var t=0, l=0, w=0, h=0, iw=0, ih=0;\r
- if (e && e.nodeName.toLowerCase() != 'body') {\r
- t = e.scrollTop;\r
- l = e.scrollLeft;\r
- w = e.scrollWidth;\r
- h = e.scrollHeight;\r
- } else {\r
- if (document.documentElement) {\r
- t = document.documentElement.scrollTop;\r
- l = document.documentElement.scrollLeft;\r
- w = document.documentElement.scrollWidth;\r
- h = document.documentElement.scrollHeight;\r
- } else if (document.body) {\r
- t = document.body.scrollTop;\r
- l = document.body.scrollLeft;\r
- w = document.body.scrollWidth;\r
- h = document.body.scrollHeight;\r
- }\r
- if (typeof pageYOffset != 'undefined') {\r
- t = pageYOffset;\r
- l = pageXOffset;\r
- }\r
- iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;\r
- ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;\r
- }\r
- return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };\r
- },\r
- getMargins : function(e, toInteger)\r
- {\r
- var t = jQuery.curCSS(e,'marginTop') || '';\r
- var r = jQuery.curCSS(e,'marginRight') || '';\r
- var b = jQuery.curCSS(e,'marginBottom') || '';\r
- var l = jQuery.curCSS(e,'marginLeft') || '';\r
- if (toInteger)\r
- return {\r
- t: parseInt(t, 10)||0,\r
- r: parseInt(r, 10)||0,\r
- b: parseInt(b, 10)||0,\r
- l: parseInt(l, 10)\r
- };\r
- else\r
- return {t: t, r: r, b: b, l: l};\r
- },\r
- getPadding : function(e, toInteger)\r
- {\r
- var t = jQuery.curCSS(e,'paddingTop') || '';\r
- var r = jQuery.curCSS(e,'paddingRight') || '';\r
- var b = jQuery.curCSS(e,'paddingBottom') || '';\r
- var l = jQuery.curCSS(e,'paddingLeft') || '';\r
- if (toInteger)\r
- return {\r
- t: parseInt(t, 10)||0,\r
- r: parseInt(r, 10)||0,\r
- b: parseInt(b, 10)||0,\r
- l: parseInt(l, 10)\r
- };\r
- else\r
- return {t: t, r: r, b: b, l: l};\r
- },\r
- getBorder : function(e, toInteger)\r
- {\r
- var t = jQuery.curCSS(e,'borderTopWidth') || '';\r
- var r = jQuery.curCSS(e,'borderRightWidth') || '';\r
- var b = jQuery.curCSS(e,'borderBottomWidth') || '';\r
- var l = jQuery.curCSS(e,'borderLeftWidth') || '';\r
- if (toInteger)\r
- return {\r
- t: parseInt(t, 10)||0,\r
- r: parseInt(r, 10)||0,\r
- b: parseInt(b, 10)||0,\r
- l: parseInt(l, 10)||0\r
- };\r
- else\r
- return {t: t, r: r, b: b, l: l};\r
- },\r
- traverseDOM : function(nodeEl, func)\r
- {\r
- func(nodeEl);\r
- nodeEl = nodeEl.firstChild;\r
- while(nodeEl){\r
- EYE.traverseDOM(nodeEl, func);\r
- nodeEl = nodeEl.nextSibling;\r
- }\r
- },\r
- getInnerWidth : function(el, scroll) {\r
- var offsetW = el.offsetWidth;\r
- return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;\r
- },\r
- getInnerHeight : function(el, scroll) {\r
- var offsetH = el.offsetHeight;\r
- return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;\r
- },\r
- getExtraWidth : function(el) {\r
- if($.boxModel)\r
- return (parseInt($.curCSS(el, 'paddingLeft'))||0)\r
- + (parseInt($.curCSS(el, 'paddingRight'))||0)\r
- + (parseInt($.curCSS(el, 'borderLeftWidth'))||0)\r
- + (parseInt($.curCSS(el, 'borderRightWidth'))||0);\r
- return 0;\r
- },\r
- getExtraHeight : function(el) {\r
- if($.boxModel)\r
- return (parseInt($.curCSS(el, 'paddingTop'))||0)\r
- + (parseInt($.curCSS(el, 'paddingBottom'))||0)\r
- + (parseInt($.curCSS(el, 'borderTopWidth'))||0)\r
- + (parseInt($.curCSS(el, 'borderBottomWidth'))||0);\r
- return 0;\r
- },\r
- isChildOf: function(parentEl, el, container) {\r
- if (parentEl == el) {\r
- return true;\r
- }\r
- if (!el || !el.nodeType || el.nodeType != 1) {\r
- return false;\r
- }\r
- if (parentEl.contains && !$.browser.safari) {\r
- return parentEl.contains(el);\r
- }\r
- if ( parentEl.compareDocumentPosition ) {\r
- return !!(parentEl.compareDocumentPosition(el) & 16);\r
- }\r
- var prEl = el.parentNode;\r
- while(prEl && prEl != container) {\r
- if (prEl == parentEl)\r
- return true;\r
- prEl = prEl.parentNode;\r
- }\r
- return false;\r
- },\r
- centerEl : function(el, axis)\r
- {\r
- var clientScroll = EYE.getScroll();\r
- var size = EYE.getSize(el);\r
- if (!axis || axis == 'vertically')\r
- $(el).css(\r
- {\r
- top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'\r
- }\r
- );\r
- if (!axis || axis == 'horizontally')\r
- $(el).css(\r
- {\r
- left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'\r
- }\r
- );\r
- }\r
-});\r
-if (!$.easing.easeout) {\r
- $.easing.easeout = function(p, n, firstNum, delta, duration) {\r
- return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;\r
- };\r
-}\r
- \r
-})(jQuery);
\ No newline at end of file
projects / sdk / ide / common-eplugin.git / commitdiff
