diff options
| author | Stanislav Lechev [0xAF] <af@0xAF.org> | 2013-09-28 12:09:26 +0300 |
|---|---|---|
| committer | Stanislav Lechev [0xAF] <af@0xAF.org> | 2013-09-28 12:23:55 +0300 |
| commit | 24128a4e1f7074a50dc1f75585578830ea532b21 (patch) | |
| tree | 67dc27f7da2322857e61d57f3cfc7bac9d83c439 /library/colorpicker | |
| parent | 4b3c56517446aa4f04c78887794cb49bda20c086 (diff) | |
| download | volse-hubzilla-24128a4e1f7074a50dc1f75585578830ea532b21.tar.gz volse-hubzilla-24128a4e1f7074a50dc1f75585578830ea532b21.tar.bz2 volse-hubzilla-24128a4e1f7074a50dc1f75585578830ea532b21.zip | |
Add colorpicker jquery plugin for themes
Diffstat (limited to 'library/colorpicker')
33 files changed, 1400 insertions, 0 deletions
diff --git a/library/colorpicker/css/colorpicker.css b/library/colorpicker/css/colorpicker.css new file mode 100644 index 000000000..05b02b485 --- /dev/null +++ b/library/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/library/colorpicker/css/layout.css b/library/colorpicker/css/layout.css new file mode 100644 index 000000000..8b3f00ff3 --- /dev/null +++ b/library/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/library/colorpicker/images/blank.gif b/library/colorpicker/images/blank.gif Binary files differnew file mode 100644 index 000000000..75b945d25 --- /dev/null +++ b/library/colorpicker/images/blank.gif diff --git a/library/colorpicker/images/colorpicker_background.png b/library/colorpicker/images/colorpicker_background.png Binary files differnew file mode 100644 index 000000000..8401572f1 --- /dev/null +++ b/library/colorpicker/images/colorpicker_background.png diff --git a/library/colorpicker/images/colorpicker_hex.png b/library/colorpicker/images/colorpicker_hex.png Binary files differnew file mode 100644 index 000000000..4e532d7c6 --- /dev/null +++ b/library/colorpicker/images/colorpicker_hex.png diff --git a/library/colorpicker/images/colorpicker_hsb_b.png b/library/colorpicker/images/colorpicker_hsb_b.png Binary files differnew file mode 100644 index 000000000..dfac595d0 --- /dev/null +++ b/library/colorpicker/images/colorpicker_hsb_b.png diff --git a/library/colorpicker/images/colorpicker_hsb_h.png b/library/colorpicker/images/colorpicker_hsb_h.png Binary files differnew file mode 100644 index 000000000..3977ed9f2 --- /dev/null +++ b/library/colorpicker/images/colorpicker_hsb_h.png diff --git a/library/colorpicker/images/colorpicker_hsb_s.png b/library/colorpicker/images/colorpicker_hsb_s.png Binary files differnew file mode 100644 index 000000000..a2a699736 --- /dev/null +++ b/library/colorpicker/images/colorpicker_hsb_s.png diff --git a/library/colorpicker/images/colorpicker_indic.gif b/library/colorpicker/images/colorpicker_indic.gif Binary files differnew file mode 100644 index 000000000..f9fa95e28 --- /dev/null +++ b/library/colorpicker/images/colorpicker_indic.gif diff --git a/library/colorpicker/images/colorpicker_overlay.png b/library/colorpicker/images/colorpicker_overlay.png Binary files differnew file mode 100644 index 000000000..561cdd9c5 --- /dev/null +++ b/library/colorpicker/images/colorpicker_overlay.png diff --git a/library/colorpicker/images/colorpicker_rgb_b.png b/library/colorpicker/images/colorpicker_rgb_b.png Binary files differnew file mode 100644 index 000000000..dfac595d0 --- /dev/null +++ b/library/colorpicker/images/colorpicker_rgb_b.png diff --git a/library/colorpicker/images/colorpicker_rgb_g.png b/library/colorpicker/images/colorpicker_rgb_g.png Binary files differnew file mode 100644 index 000000000..72b32760a --- /dev/null +++ b/library/colorpicker/images/colorpicker_rgb_g.png diff --git a/library/colorpicker/images/colorpicker_rgb_r.png b/library/colorpicker/images/colorpicker_rgb_r.png Binary files differnew file mode 100644 index 000000000..4855fe03f --- /dev/null +++ b/library/colorpicker/images/colorpicker_rgb_r.png diff --git a/library/colorpicker/images/colorpicker_select.gif b/library/colorpicker/images/colorpicker_select.gif Binary files differnew file mode 100644 index 000000000..599f7f13a --- /dev/null +++ b/library/colorpicker/images/colorpicker_select.gif diff --git a/library/colorpicker/images/colorpicker_submit.png b/library/colorpicker/images/colorpicker_submit.png Binary files differnew file mode 100644 index 000000000..7f4c0825f --- /dev/null +++ b/library/colorpicker/images/colorpicker_submit.png diff --git a/library/colorpicker/images/custom_background.png b/library/colorpicker/images/custom_background.png Binary files differnew file mode 100644 index 000000000..cf55ffdd6 --- /dev/null +++ b/library/colorpicker/images/custom_background.png diff --git a/library/colorpicker/images/custom_hex.png b/library/colorpicker/images/custom_hex.png Binary files differnew file mode 100644 index 000000000..888f44449 --- /dev/null +++ b/library/colorpicker/images/custom_hex.png diff --git a/library/colorpicker/images/custom_hsb_b.png b/library/colorpicker/images/custom_hsb_b.png Binary files differnew file mode 100644 index 000000000..2f99dae8e --- /dev/null +++ b/library/colorpicker/images/custom_hsb_b.png diff --git a/library/colorpicker/images/custom_hsb_h.png b/library/colorpicker/images/custom_hsb_h.png Binary files differnew file mode 100644 index 000000000..a217e9218 --- /dev/null +++ b/library/colorpicker/images/custom_hsb_h.png diff --git a/library/colorpicker/images/custom_hsb_s.png b/library/colorpicker/images/custom_hsb_s.png Binary files differnew file mode 100644 index 000000000..7826b4150 --- /dev/null +++ b/library/colorpicker/images/custom_hsb_s.png diff --git a/library/colorpicker/images/custom_indic.gif b/library/colorpicker/images/custom_indic.gif Binary files differnew file mode 100644 index 000000000..222fb94cf --- /dev/null +++ b/library/colorpicker/images/custom_indic.gif diff --git a/library/colorpicker/images/custom_rgb_b.png b/library/colorpicker/images/custom_rgb_b.png Binary files differnew file mode 100644 index 000000000..80764e5d6 --- /dev/null +++ b/library/colorpicker/images/custom_rgb_b.png diff --git a/library/colorpicker/images/custom_rgb_g.png b/library/colorpicker/images/custom_rgb_g.png Binary files differnew file mode 100644 index 000000000..fc9778be1 --- /dev/null +++ b/library/colorpicker/images/custom_rgb_g.png diff --git a/library/colorpicker/images/custom_rgb_r.png b/library/colorpicker/images/custom_rgb_r.png Binary files differnew file mode 100644 index 000000000..91b0cd4c5 --- /dev/null +++ b/library/colorpicker/images/custom_rgb_r.png diff --git a/library/colorpicker/images/custom_submit.png b/library/colorpicker/images/custom_submit.png Binary files differnew file mode 100644 index 000000000..cd202cd93 --- /dev/null +++ b/library/colorpicker/images/custom_submit.png diff --git a/library/colorpicker/images/select.png b/library/colorpicker/images/select.png Binary files differnew file mode 100644 index 000000000..21213bfd5 --- /dev/null +++ b/library/colorpicker/images/select.png diff --git a/library/colorpicker/images/select2.png b/library/colorpicker/images/select2.png Binary files differnew file mode 100644 index 000000000..2cd2cabeb --- /dev/null +++ b/library/colorpicker/images/select2.png diff --git a/library/colorpicker/images/slider.png b/library/colorpicker/images/slider.png Binary files differnew file mode 100644 index 000000000..8b03da96e --- /dev/null +++ b/library/colorpicker/images/slider.png diff --git a/library/colorpicker/index.html b/library/colorpicker/index.html new file mode 100644 index 000000000..e1ad5782d --- /dev/null +++ b/library/colorpicker/index.html @@ -0,0 +1,184 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
+ <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
+ <title>ColorPicker - jQuery plugin</title>
+ <script type="text/javascript" src="js/jquery.js"></script>
+ <script type="text/javascript" src="js/colorpicker.js"></script>
+ <script type="text/javascript" src="js/eye.js"></script>
+ <script type="text/javascript" src="js/utils.js"></script>
+ <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
+</head>
+<body>
+ <div class="wrapper">
+ <h1>Color Picker - jQuery plugin</h1>
+ <ul class="navigationTabs">
+ <li><a href="#about" rel="about">About</a></li>
+ <li><a href="#download" rel="download">Download</a></li>
+ <li><a href="#implement" rel="implement">Implement</a></li>
+ </ul>
+ <div class="tabsContent">
+ <div class="tab">
+ <h2>About</h2>
+ <p>A simple component to select color in the same way you select color in Adobe Photoshop</p>
+ <h3>Last update</h3>
+ <p>23.05.2009 - Check Download tab</p>
+ <h3>Features</h3>
+ <ul>
+ <li>Flat mode - as element in page</li>
+ <li>Powerful controls for color selection</li>
+ <li>Easy to customize the look by changing some images</li>
+ <li>Fits into the viewport</li>
+ </ul>
+ <h3>License</h3>
+ <p>Dual licensed under the MIT and GPL licenses.</p>
+ <h3>Examples</h3>
+ <p>Flat mode.</p>
+ <p id="colorpickerHolder">
+ </p>
+ <pre>
+$('#colorpickerHolder').ColorPicker({flat: true});
+ </pre>
+ <p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
+ <div id="customWidget">
+ <div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
+ <div id="colorpickerHolder2">
+ </div>
+ </div>
+
+ <p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
+ <p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
+ <p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
+ <p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
+ <pre>$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
+ onSubmit: function(hsb, hex, rgb, el) {
+ $(el).val(hex);
+ $(el).ColorPickerHide();
+ },
+ onBeforeShow: function () {
+ $(this).ColorPickerSetColor(this.value);
+ }
+})
+.bind('keyup', function(){
+ $(this).ColorPickerSetColor(this.value);
+});
+</pre>
+ <p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
+ <p>
+ <div id="colorSelector"><div style="background-color: #0000ff"></div></div>
+ </p>
+ <pre>
+$('#colorSelector').ColorPicker({
+ color: '#0000ff',
+ onShow: function (colpkr) {
+ $(colpkr).fadeIn(500);
+ return false;
+ },
+ onHide: function (colpkr) {
+ $(colpkr).fadeOut(500);
+ return false;
+ },
+ onChange: function (hsb, hex, rgb) {
+ $('#colorSelector div').css('backgroundColor', '#' + hex);
+ }
+});
+</pre>
+ </div>
+ <div class="tab">
+ <h2>Download</h2>
+ <p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>
+ <h3>Changelog</h3>
+ <dl>
+ <dt>23.05.2009</dt>
+ <dd>Added: close on color selection example</dd>
+ <dd>Added: restore original color option</dd>
+ <dd>Changed: color update on key up event</dd>
+ <dd>Fixed: colorpicker hide and show methods</dd>
+ <dd>Fixed: reference to options. Multiple fields with colorpickers is possible now.</dd>
+ <dd>Fixed: RGB to HSB convertion</dd>
+ <dt>22.08.2008</dt>
+ <dd>Fixed bug: where some events were not canceled right on Safari</dd>
+ <dd>Fixed bug: where teh view port was not detected right on Safari</dd>
+ <dt>16-07-2008</dt>
+ <dd>Fixed bug where the letter 'F' could not be typed in the Hex field</dd>
+ <dd>Fixed bug where the changes on Hex field where not parsed</dd>
+ <dd>Added new option 'livePreview'</dd>
+ <dt>08-07-2008</dt>
+ <dd>Fixed typo in the code, both JavaScript and CSS</dd>
+ <dd>Changed the cursor for some elements</dd>
+ <dd>Added new demo explaining how to implement custom skin</dd>
+ <dt>07.07.2008</dt>
+ <dd>The first release.</dd>
+ </dl>
+ </div>
+ <div class="tab">
+ <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 type="text/javascript" src="js/colorpicker.js"></script>
+ </pre>
+ <h3>Invocation code</h3>
+ <p>All you have to do is to select the elements in a jQuery way and call the plugin.</p>
+ <pre>
+ $('input').ColorPicker(options);
+ </pre>
+ <h3>Options</h3>
+ <p>A hash of parameters. All parameters are optional.</p>
+ <table>
+ <tr>
+ <td><strong>eventName</strong></td>
+ <td>string</td>
+ <td>The desired event to trigger the colorpicker. Default: 'click'</td>
+ </tr>
+ <tr>
+ <td><strong>color</strong></td>
+ <td>string or hash</td>
+ <td>The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</td>
+ </tr>
+ <tr>
+ <td><strong>flat</strong></td>
+ <td>boolean</td>
+ <td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td>
+ </tr>
+ <tr>
+ <td><strong>livePreview</strong></td>
+ <td>boolean</td>
+ <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>
+ </tr>
+ <tr>
+ <td><strong>onShow</strong></td>
+ <td>function</td>
+ <td>Callback function triggered when the color picker is shown</td>
+ </tr>
+ <tr>
+ <td><strong>onBeforeShow</strong></td>
+ <td>function</td>
+ <td>Callback function triggered before the color picker is shown</td>
+ </tr>
+ <tr>
+ <td><strong>onHide</strong></td>
+ <td>function</td>
+ <td>Callback function triggered when the color picker is hidden</td>
+ </tr>
+ <tr>
+ <td><strong>onChange</strong></td>
+ <td>function</td>
+ <td>Callback function triggered when the color is changed</td>
+ </tr>
+ <tr>
+ <td><strong>onSubmit</strong></td>
+ <td>function</td>
+ <td>Callback function triggered when the color it is chosen</td>
+ </tr>
+ </table>
+ <h3>Set color</h3>
+ <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 hash for RGB and HSB ({r:255, r:0, b:0}).</p>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/library/colorpicker/js/colorpicker.js b/library/colorpicker/js/colorpicker.js new file mode 100644 index 000000000..10a2b2244 --- /dev/null +++ b/library/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/library/colorpicker/js/eye.js b/library/colorpicker/js/eye.js new file mode 100644 index 000000000..ea70e643f --- /dev/null +++ b/library/colorpicker/js/eye.js @@ -0,0 +1,34 @@ +/**
+ *
+ * Zoomimage
+ * Author: Stefan Petre www.eyecon.ro
+ *
+ */
+(function($){
+ var EYE = window.EYE = function() {
+ var _registered = {
+ init: []
+ };
+ return {
+ init: function() {
+ $.each(_registered.init, function(nr, fn){
+ fn.call();
+ });
+ },
+ extend: function(prop) {
+ for (var i in prop) {
+ if (prop[i] != undefined) {
+ this[i] = prop[i];
+ }
+ }
+ },
+ register: function(fn, type) {
+ if (!_registered[type]) {
+ _registered[type] = [];
+ }
+ _registered[type].push(fn);
+ }
+ };
+ }();
+ $(EYE.init);
+})(jQuery);
diff --git a/library/colorpicker/js/layout.js b/library/colorpicker/js/layout.js new file mode 100644 index 000000000..e0dfb8f33 --- /dev/null +++ b/library/colorpicker/js/layout.js @@ -0,0 +1,67 @@ +(function($){
+ var initLayout = function() {
+ var hash = window.location.hash.replace('#', '');
+ var currentTab = $('ul.navigationTabs a')
+ .bind('click', showTab)
+ .filter('a[rel=' + hash + ']');
+ if (currentTab.size() == 0) {
+ currentTab = $('ul.navigationTabs a:first');
+ }
+ showTab.apply(currentTab.get(0));
+ $('#colorpickerHolder').ColorPicker({flat: true});
+ $('#colorpickerHolder2').ColorPicker({
+ flat: true,
+ color: '#00ff00',
+ onSubmit: function(hsb, hex, rgb) {
+ $('#colorSelector2 div').css('backgroundColor', '#' + hex);
+ }
+ });
+ $('#colorpickerHolder2>div').css('position', 'absolute');
+ var widt = false;
+ $('#colorSelector2').bind('click', function() {
+ $('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
+ widt = !widt;
+ });
+ $('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
+ onSubmit: function(hsb, hex, rgb, el) {
+ $(el).val(hex);
+ $(el).ColorPickerHide();
+ },
+ onBeforeShow: function () {
+ $(this).ColorPickerSetColor(this.value);
+ }
+ })
+ .bind('keyup', function(){
+ $(this).ColorPickerSetColor(this.value);
+ });
+ $('#colorSelector').ColorPicker({
+ color: '#0000ff',
+ onShow: function (colpkr) {
+ $(colpkr).fadeIn(500);
+ return false;
+ },
+ onHide: function (colpkr) {
+ $(colpkr).fadeOut(500);
+ return false;
+ },
+ onChange: function (hsb, hex, rgb) {
+ $('#colorSelector div').css('backgroundColor', '#' + hex);
+ }
+ });
+ };
+
+ var showTab = function(e) {
+ var tabIndex = $('ul.navigationTabs a')
+ .removeClass('active')
+ .index(this);
+ $(this)
+ .addClass('active')
+ .blur();
+ $('div.tab')
+ .hide()
+ .eq(tabIndex)
+ .show();
+ };
+
+ EYE.register(initLayout, 'init');
+})(jQuery)
\ No newline at end of file diff --git a/library/colorpicker/js/utils.js b/library/colorpicker/js/utils.js new file mode 100644 index 000000000..cc7ce14ec --- /dev/null +++ b/library/colorpicker/js/utils.js @@ -0,0 +1,252 @@ +/**
+ *
+ * Utilities
+ * Author: Stefan Petre www.eyecon.ro
+ *
+ */
+(function($) {
+EYE.extend({
+ getPosition : function(e, forceIt)
+ {
+ var x = 0;
+ var y = 0;
+ var es = e.style;
+ var restoreStyles = false;
+ if (forceIt && jQuery.curCSS(e,'display') == 'none') {
+ var oldVisibility = es.visibility;
+ var oldPosition = es.position;
+ restoreStyles = true;
+ es.visibility = 'hidden';
+ es.display = 'block';
+ es.position = 'absolute';
+ }
+ var el = e;
+ if (el.getBoundingClientRect) { // IE
+ var box = el.getBoundingClientRect();
+ x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
+ y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
+ } else {
+ x = el.offsetLeft;
+ y = el.offsetTop;
+ el = el.offsetParent;
+ if (e != el) {
+ while (el) {
+ x += el.offsetLeft;
+ y += el.offsetTop;
+ el = el.offsetParent;
+ }
+ }
+ if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
+ x -= document.body.offsetLeft;
+ y -= document.body.offsetTop;
+ }
+ el = e.parentNode;
+ while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML')
+ {
+ if (jQuery.curCSS(el, 'display') != 'inline') {
+ x -= el.scrollLeft;
+ y -= el.scrollTop;
+ }
+ el = el.parentNode;
+ }
+ }
+ if (restoreStyles == true) {
+ es.display = 'none';
+ es.position = oldPosition;
+ es.visibility = oldVisibility;
+ }
+ return {x:x, y:y};
+ },
+ getSize : function(e)
+ {
+ var w = parseInt(jQuery.curCSS(e,'width'), 10);
+ var h = parseInt(jQuery.curCSS(e,'height'), 10);
+ var wb = 0;
+ var hb = 0;
+ if (jQuery.curCSS(e, 'display') != 'none') {
+ wb = e.offsetWidth;
+ hb = e.offsetHeight;
+ } else {
+ var es = e.style;
+ var oldVisibility = es.visibility;
+ var oldPosition = es.position;
+ es.visibility = 'hidden';
+ es.display = 'block';
+ es.position = 'absolute';
+ wb = e.offsetWidth;
+ hb = e.offsetHeight;
+ es.display = 'none';
+ es.position = oldPosition;
+ es.visibility = oldVisibility;
+ }
+ return {w:w, h:h, wb:wb, hb:hb};
+ },
+ getClient : function(e)
+ {
+ var h, w;
+ if (e) {
+ w = e.clientWidth;
+ h = e.clientHeight;
+ } else {
+ var de = document.documentElement;
+ w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
+ h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
+ }
+ return {w:w,h:h};
+ },
+ getScroll : function (e)
+ {
+ var t=0, l=0, w=0, h=0, iw=0, ih=0;
+ if (e && e.nodeName.toLowerCase() != 'body') {
+ t = e.scrollTop;
+ l = e.scrollLeft;
+ w = e.scrollWidth;
+ h = e.scrollHeight;
+ } else {
+ if (document.documentElement) {
+ t = document.documentElement.scrollTop;
+ l = document.documentElement.scrollLeft;
+ w = document.documentElement.scrollWidth;
+ h = document.documentElement.scrollHeight;
+ } else if (document.body) {
+ t = document.body.scrollTop;
+ l = document.body.scrollLeft;
+ w = document.body.scrollWidth;
+ h = document.body.scrollHeight;
+ }
+ if (typeof pageYOffset != 'undefined') {
+ t = pageYOffset;
+ l = pageXOffset;
+ }
+ iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
+ ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
+ }
+ return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
+ },
+ getMargins : function(e, toInteger)
+ {
+ var t = jQuery.curCSS(e,'marginTop') || '';
+ var r = jQuery.curCSS(e,'marginRight') || '';
+ var b = jQuery.curCSS(e,'marginBottom') || '';
+ var l = jQuery.curCSS(e,'marginLeft') || '';
+ if (toInteger)
+ return {
+ t: parseInt(t, 10)||0,
+ r: parseInt(r, 10)||0,
+ b: parseInt(b, 10)||0,
+ l: parseInt(l, 10)
+ };
+ else
+ return {t: t, r: r, b: b, l: l};
+ },
+ getPadding : function(e, toInteger)
+ {
+ var t = jQuery.curCSS(e,'paddingTop') || '';
+ var r = jQuery.curCSS(e,'paddingRight') || '';
+ var b = jQuery.curCSS(e,'paddingBottom') || '';
+ var l = jQuery.curCSS(e,'paddingLeft') || '';
+ if (toInteger)
+ return {
+ t: parseInt(t, 10)||0,
+ r: parseInt(r, 10)||0,
+ b: parseInt(b, 10)||0,
+ l: parseInt(l, 10)
+ };
+ else
+ return {t: t, r: r, b: b, l: l};
+ },
+ getBorder : function(e, toInteger)
+ {
+ var t = jQuery.curCSS(e,'borderTopWidth') || '';
+ var r = jQuery.curCSS(e,'borderRightWidth') || '';
+ var b = jQuery.curCSS(e,'borderBottomWidth') || '';
+ var l = jQuery.curCSS(e,'borderLeftWidth') || '';
+ if (toInteger)
+ return {
+ t: parseInt(t, 10)||0,
+ r: parseInt(r, 10)||0,
+ b: parseInt(b, 10)||0,
+ l: parseInt(l, 10)||0
+ };
+ else
+ return {t: t, r: r, b: b, l: l};
+ },
+ traverseDOM : function(nodeEl, func)
+ {
+ func(nodeEl);
+ nodeEl = nodeEl.firstChild;
+ while(nodeEl){
+ EYE.traverseDOM(nodeEl, func);
+ nodeEl = nodeEl.nextSibling;
+ }
+ },
+ getInnerWidth : function(el, scroll) {
+ var offsetW = el.offsetWidth;
+ return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
+ },
+ getInnerHeight : function(el, scroll) {
+ var offsetH = el.offsetHeight;
+ return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
+ },
+ getExtraWidth : function(el) {
+ if($.boxModel)
+ return (parseInt($.curCSS(el, 'paddingLeft'))||0)
+ + (parseInt($.curCSS(el, 'paddingRight'))||0)
+ + (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
+ + (parseInt($.curCSS(el, 'borderRightWidth'))||0);
+ return 0;
+ },
+ getExtraHeight : function(el) {
+ if($.boxModel)
+ return (parseInt($.curCSS(el, 'paddingTop'))||0)
+ + (parseInt($.curCSS(el, 'paddingBottom'))||0)
+ + (parseInt($.curCSS(el, 'borderTopWidth'))||0)
+ + (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
+ return 0;
+ },
+ isChildOf: function(parentEl, el, container) {
+ if (parentEl == el) {
+ return true;
+ }
+ if (!el || !el.nodeType || el.nodeType != 1) {
+ return false;
+ }
+ if (parentEl.contains && !$.browser.safari) {
+ return parentEl.contains(el);
+ }
+ if ( parentEl.compareDocumentPosition ) {
+ return !!(parentEl.compareDocumentPosition(el) & 16);
+ }
+ var prEl = el.parentNode;
+ while(prEl && prEl != container) {
+ if (prEl == parentEl)
+ return true;
+ prEl = prEl.parentNode;
+ }
+ return false;
+ },
+ centerEl : function(el, axis)
+ {
+ var clientScroll = EYE.getScroll();
+ var size = EYE.getSize(el);
+ if (!axis || axis == 'vertically')
+ $(el).css(
+ {
+ top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
+ }
+ );
+ if (!axis || axis == 'horizontally')
+ $(el).css(
+ {
+ left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
+ }
+ );
+ }
+});
+if (!$.easing.easeout) {
+ $.easing.easeout = function(p, n, firstNum, delta, duration) {
+ return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
+ };
+}
+
+})(jQuery);
\ No newline at end of file |
