| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js |
| — | — | @@ -544,14 +544,14 @@ |
| 545 | 545 | js_log('click:turn on'); |
| 546 | 546 | _this.enableCrop(); |
| 547 | 547 | } |
| 548 | | - }); |
| 549 | | - $j('.mv_rest_crop').click(function(){ |
| | 548 | + }); |
| | 549 | + $j('.mv_rest_crop').click(function(){ |
| 550 | 550 | $j('.mv_apply_crop,.mv_rest_crop').hide(); |
| 551 | 551 | $j('.mv_crop_msg').show(); |
| 552 | 552 | $j('#mv_crop_button').removeClass('mv_crop_button_selected').addClass('mv_crop_button_base').attr('title',gM('mv_crop')); |
| 553 | 553 | _this.rObj.crop=null; |
| 554 | 554 | $j('#' + _this.clip_disp_ct ).empty().html( |
| 555 | | - '<img src="' + _this.rObj.url + '" id="rsd_edit_img">' |
| | 555 | + '<img src="' + _this.rObj.edit_url + '" id="rsd_edit_img">' |
| 556 | 556 | ); |
| 557 | 557 | }); |
| 558 | 558 | }, |
| — | — | @@ -577,7 +577,8 @@ |
| 578 | 578 | $j('.mv_crop_msg').show(); |
| 579 | 579 | $j('#mv_crop_button').removeClass('mv_crop_button_selected').addClass('mv_crop_button_base').attr('title',gM('mv_crop')); |
| 580 | 580 | js_log( 'click:turn off' ); |
| 581 | | - if(_this.rObj.crop){ |
| | 581 | + var cat = _this.rObj; |
| | 582 | + if(_this.rObj.crop){ |
| 582 | 583 | //empty out and display croped: |
| 583 | 584 | $j('#'+_this.clip_disp_ct ).empty().html( |
| 584 | 585 | '<div id="mv_cropcotainer" style="overflow:hidden;position:absolute;'+ |
| — | — | @@ -586,10 +587,10 @@ |
| 587 | 588 | '<div id="mv_crop_img" style="position:absolute;'+ |
| 588 | 589 | 'top:-' + _this.rObj.crop.y +'px;'+ |
| 589 | 590 | 'left:-' + _this.rObj.crop.x + 'px;">'+ |
| 590 | | - '<img src="' + _this.rObj.src + '">'+ |
| | 591 | + '<img src="' + _this.rObj.edit_url + '">'+ |
| 591 | 592 | '</div>'+ |
| 592 | 593 | '</div>' |
| 593 | | - ); |
| | 594 | + ); |
| 594 | 595 | } |
| 595 | 596 | return true; |
| 596 | 597 | }, |
| — | — | @@ -600,20 +601,19 @@ |
| 601 | 602 | $j('.mv_crop_msg').hide(); |
| 602 | 603 | $j('.mv_crop_msg_load').show(); |
| 603 | 604 | var doEnableCrop = function(){ |
| 604 | | - $j('.mv_crop_msg_load').hide(); |
| 605 | | - $j('.mv_rest_crop,.mv_apply_crop').show(); |
| 606 | | - $j('#mv_crop_button').removeClass('mv_crop_button_base').addClass('mv_crop_button_selected').attr('title',gM('mv_crop_done')); |
| 607 | | - $j('#' + _this.clip_disp_ct + ' img').Jcrop({ |
| 608 | | - onSelect: function(c){ |
| 609 | | - js_log('on select:' + c.x +','+ c.y+','+ c.x2+','+ c.y2+','+ c.w+','+ c.h); |
| 610 | | - _this.rObj.crop = c; |
| 611 | | - }, |
| 612 | | - onChange: function(c){ |
| 613 | | - } |
| 614 | | - }); |
| | 605 | + $j('.mv_crop_msg_load').hide(); |
| | 606 | + $j('.mv_rest_crop,.mv_apply_crop').show(); |
| | 607 | + $j('#mv_crop_button').removeClass('mv_crop_button_base').addClass('mv_crop_button_selected').attr('title',gM('mv_crop_done')); |
| | 608 | + $j('#' + _this.clip_disp_ct + ' img').Jcrop({ |
| | 609 | + onSelect: function(c){ |
| | 610 | + js_log('on select:' + c.x +','+ c.y+','+ c.x2+','+ c.y2+','+ c.w+','+ c.h); |
| | 611 | + _this.rObj.crop = c; |
| | 612 | + }, |
| | 613 | + onChange: function(c){ |
| | 614 | + } |
| | 615 | + }); |
| 615 | 616 | } |
| 616 | | - if(typeof $j.Jcrop == 'undefined'){ |
| 617 | | - loadExternalCss( mv_embed_path + 'jquery/plugins/Jcrop/css/jquery.Jcrop.css'); |
| | 617 | + if(typeof $j.Jcrop == 'undefined'){ |
| 618 | 618 | //load the jcrop library if needed: |
| 619 | 619 | mvJsLoader.doLoad([ |
| 620 | 620 | '$j.Jcrop' |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/css/colorpicker.css |
| — | — | @@ -0,0 +1,177 @@ |
| | 2 | +.colorpicker {
|
| | 3 | + width: 356px;
|
| | 4 | + height: 176px;
|
| | 5 | + overflow: hidden;
|
| | 6 | + position: absolute;
|
| | 7 | + background: url(../images/colorpicker_background.png);
|
| | 8 | + font-family: Arial, Helvetica, sans-serif;
|
| | 9 | + display: none;
|
| | 10 | +}
|
| | 11 | +.colorpicker_color {
|
| | 12 | + width: 150px;
|
| | 13 | + height: 150px;
|
| | 14 | + left: 14px;
|
| | 15 | + top: 13px;
|
| | 16 | + position: absolute;
|
| | 17 | + background: #f00;
|
| | 18 | + overflow: hidden;
|
| | 19 | + cursor: crosshair;
|
| | 20 | +}
|
| | 21 | +.colorpicker_color div {
|
| | 22 | + position: absolute;
|
| | 23 | + top: 0;
|
| | 24 | + left: 0;
|
| | 25 | + width: 150px;
|
| | 26 | + height: 150px;
|
| | 27 | + background: url(../images/colorpicker_overlay.png);
|
| | 28 | +}
|
| | 29 | +.colorpicker_color div div {
|
| | 30 | + position: absolute;
|
| | 31 | + top: 0;
|
| | 32 | + left: 0;
|
| | 33 | + width: 11px;
|
| | 34 | + height: 11px;
|
| | 35 | + overflow: hidden;
|
| | 36 | + background: url(../images/colorpicker_select.gif);
|
| | 37 | + margin: -5px 0 0 -5px;
|
| | 38 | +}
|
| | 39 | +.colorpicker_hue {
|
| | 40 | + position: absolute;
|
| | 41 | + top: 13px;
|
| | 42 | + left: 171px;
|
| | 43 | + width: 35px;
|
| | 44 | + height: 150px;
|
| | 45 | + cursor: n-resize;
|
| | 46 | +}
|
| | 47 | +.colorpicker_hue div {
|
| | 48 | + position: absolute;
|
| | 49 | + width: 35px;
|
| | 50 | + height: 9px;
|
| | 51 | + overflow: hidden;
|
| | 52 | + background: url(../images/colorpicker_indic.gif) left top;
|
| | 53 | + margin: -4px 0 0 0;
|
| | 54 | + left: 0px;
|
| | 55 | +}
|
| | 56 | +.colorpicker_new_color {
|
| | 57 | + position: absolute;
|
| | 58 | + width: 60px;
|
| | 59 | + height: 30px;
|
| | 60 | + left: 213px;
|
| | 61 | + top: 13px;
|
| | 62 | + background: #f00;
|
| | 63 | +}
|
| | 64 | +.colorpicker_current_color {
|
| | 65 | + position: absolute;
|
| | 66 | + width: 60px;
|
| | 67 | + height: 30px;
|
| | 68 | + left: 283px;
|
| | 69 | + top: 13px;
|
| | 70 | + background: #f00;
|
| | 71 | +}
|
| | 72 | +.colorpicker input {
|
| | 73 | + background-color: transparent;
|
| | 74 | + border: 1px solid transparent;
|
| | 75 | + position: absolute;
|
| | 76 | + font-size: 10px;
|
| | 77 | + font-family: Arial, Helvetica, sans-serif;
|
| | 78 | + color: #898989;
|
| | 79 | + top: 4px;
|
| | 80 | + right: 11px;
|
| | 81 | + text-align: right;
|
| | 82 | + margin: 0;
|
| | 83 | + padding: 0;
|
| | 84 | + height: 11px;
|
| | 85 | +}
|
| | 86 | +.colorpicker_hex {
|
| | 87 | + position: absolute;
|
| | 88 | + width: 72px;
|
| | 89 | + height: 22px;
|
| | 90 | + background: url(../images/colorpicker_hex.png) top;
|
| | 91 | + left: 212px;
|
| | 92 | + top: 142px;
|
| | 93 | +}
|
| | 94 | +.colorpicker_hex input {
|
| | 95 | + right: 6px;
|
| | 96 | +}
|
| | 97 | +.colorpicker_field {
|
| | 98 | + height: 22px;
|
| | 99 | + width: 62px;
|
| | 100 | + background-position: top;
|
| | 101 | + position: absolute;
|
| | 102 | +}
|
| | 103 | +.colorpicker_field span {
|
| | 104 | + position: absolute;
|
| | 105 | + width: 12px;
|
| | 106 | + height: 22px;
|
| | 107 | + overflow: hidden;
|
| | 108 | + top: 0;
|
| | 109 | + right: 0;
|
| | 110 | + cursor: n-resize;
|
| | 111 | +}
|
| | 112 | +.colorpicker_rgb_r {
|
| | 113 | + background-image: url(../images/colorpicker_rgb_r.png);
|
| | 114 | + top: 52px;
|
| | 115 | + left: 212px;
|
| | 116 | +}
|
| | 117 | +.colorpicker_rgb_g {
|
| | 118 | + background-image: url(../images/colorpicker_rgb_g.png);
|
| | 119 | + top: 82px;
|
| | 120 | + left: 212px;
|
| | 121 | +}
|
| | 122 | +.colorpicker_rgb_b {
|
| | 123 | + background-image: url(../images/colorpicker_rgb_b.png);
|
| | 124 | + top: 112px;
|
| | 125 | + left: 212px;
|
| | 126 | +}
|
| | 127 | +.colorpicker_hsb_h {
|
| | 128 | + background-image: url(../images/colorpicker_hsb_h.png);
|
| | 129 | + top: 52px;
|
| | 130 | + left: 282px;
|
| | 131 | +}
|
| | 132 | +.colorpicker_hsb_s {
|
| | 133 | + background-image: url(../images/colorpicker_hsb_s.png);
|
| | 134 | + top: 82px;
|
| | 135 | + left: 282px;
|
| | 136 | +}
|
| | 137 | +.colorpicker_hsb_b {
|
| | 138 | + background-image: url(../images/colorpicker_hsb_b.png);
|
| | 139 | + top: 112px;
|
| | 140 | + left: 282px;
|
| | 141 | +}
|
| | 142 | +.colorpicker_submit {
|
| | 143 | + position: absolute;
|
| | 144 | + width: 22px;
|
| | 145 | + height: 22px;
|
| | 146 | + background: url(../images/colorpicker_submit.png) top;
|
| | 147 | + left: 322px;
|
| | 148 | + top: 142px;
|
| | 149 | + overflow: hidden;
|
| | 150 | +}
|
| | 151 | +.colorpicker_focus {
|
| | 152 | + background-position: center;
|
| | 153 | +}
|
| | 154 | +.colorpicker_hex.colorpicker_focus {
|
| | 155 | + background-position: bottom;
|
| | 156 | +}
|
| | 157 | +.colorpicker_submit.colorpicker_focus {
|
| | 158 | + background-position: bottom;
|
| | 159 | +}
|
| | 160 | +.colorpicker_slider {
|
| | 161 | + background-position: bottom;
|
| | 162 | +} |
| | 163 | + |
| | 164 | +/* chery picked from layout.css (should be more "jquery-ui" like when we get a chance */ |
| | 165 | +.colorSelector { |
| | 166 | + background:url("../images/select.png") repeat scroll 0 0 transparent; |
| | 167 | + height:36px; |
| | 168 | + position:relative; |
| | 169 | + width:36px; |
| | 170 | +} |
| | 171 | +.colorSelector div { |
| | 172 | + position: absolute; |
| | 173 | + top: 3px; |
| | 174 | + left: 3px; |
| | 175 | + width: 30px; |
| | 176 | + height: 30px; |
| | 177 | + background: url(../images/select.png) center; |
| | 178 | +}
|
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/css/layout.css |
| — | — | @@ -0,0 +1,218 @@ |
| | 2 | +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
|
| | 3 | + margin:0;
|
| | 4 | + padding:0;
|
| | 5 | +}
|
| | 6 | +table {
|
| | 7 | + border-collapse:collapse;
|
| | 8 | + border-spacing:0;
|
| | 9 | +}
|
| | 10 | +fieldset,img {
|
| | 11 | + border:0;
|
| | 12 | +}
|
| | 13 | +address,caption,cite,code,dfn,em,strong,th,var {
|
| | 14 | + font-style:normal;
|
| | 15 | + font-weight:normal;
|
| | 16 | +}
|
| | 17 | +ol,ul {
|
| | 18 | + list-style:none;
|
| | 19 | +}
|
| | 20 | +caption,th {
|
| | 21 | + text-align:left;
|
| | 22 | +}
|
| | 23 | +h1,h2,h3,h4,h5,h6 {
|
| | 24 | + font-size:100%;
|
| | 25 | + font-weight:normal;
|
| | 26 | +}
|
| | 27 | +q:before,q:after {
|
| | 28 | + content:'';
|
| | 29 | +}
|
| | 30 | +abbr,acronym { border:0;
|
| | 31 | +}
|
| | 32 | +html, body {
|
| | 33 | + background-color: #fff;
|
| | 34 | + font-family: Arial, Helvetica, sans-serif;
|
| | 35 | + font-size: 12px;
|
| | 36 | + line-height: 18px;
|
| | 37 | + color: #52697E;
|
| | 38 | +}
|
| | 39 | +body {
|
| | 40 | + text-align: center;
|
| | 41 | + overflow: auto;
|
| | 42 | +}
|
| | 43 | +.wrapper {
|
| | 44 | + width: 700px;
|
| | 45 | + margin: 0 auto;
|
| | 46 | + text-align: left;
|
| | 47 | +}
|
| | 48 | +h1 {
|
| | 49 | + font-size: 21px;
|
| | 50 | + height: 47px;
|
| | 51 | + line-height: 47px;
|
| | 52 | + text-transform: uppercase;
|
| | 53 | +}
|
| | 54 | +.navigationTabs {
|
| | 55 | + height: 23px;
|
| | 56 | + line-height: 23px;
|
| | 57 | + border-bottom: 1px solid #ccc;
|
| | 58 | +}
|
| | 59 | +.navigationTabs li {
|
| | 60 | + float: left;
|
| | 61 | + height: 23px;
|
| | 62 | + line-height: 23px;
|
| | 63 | + padding-right: 3px;
|
| | 64 | +}
|
| | 65 | +.navigationTabs li a{
|
| | 66 | + float: left;
|
| | 67 | + dispaly: block;
|
| | 68 | + height: 23px;
|
| | 69 | + line-height: 23px;
|
| | 70 | + padding: 0 10px;
|
| | 71 | + overflow: hidden;
|
| | 72 | + color: #52697E;
|
| | 73 | + background-color: #eee;
|
| | 74 | + position: relative;
|
| | 75 | + text-decoration: none;
|
| | 76 | +}
|
| | 77 | +.navigationTabs li a:hover {
|
| | 78 | + background-color: #f0f0f0;
|
| | 79 | +}
|
| | 80 | +.navigationTabs li a.active {
|
| | 81 | + background-color: #fff;
|
| | 82 | + border: 1px solid #ccc;
|
| | 83 | + border-bottom: 0px solid;
|
| | 84 | +}
|
| | 85 | +.tabsContent {
|
| | 86 | + border: 1px solid #ccc;
|
| | 87 | + border-top: 0px solid;
|
| | 88 | + width: 698px;
|
| | 89 | + overflow: hidden;
|
| | 90 | +}
|
| | 91 | +.tab {
|
| | 92 | + padding: 16px;
|
| | 93 | + display: none;
|
| | 94 | +}
|
| | 95 | +.tab h2 {
|
| | 96 | + font-weight: bold;
|
| | 97 | + font-size: 16px;
|
| | 98 | +}
|
| | 99 | +.tab h3 {
|
| | 100 | + font-weight: bold;
|
| | 101 | + font-size: 14px;
|
| | 102 | + margin-top: 20px;
|
| | 103 | +}
|
| | 104 | +.tab p {
|
| | 105 | + margin-top: 16px;
|
| | 106 | + clear: both;
|
| | 107 | +}
|
| | 108 | +.tab ul {
|
| | 109 | + margin-top: 16px;
|
| | 110 | + list-style: disc;
|
| | 111 | +}
|
| | 112 | +.tab li {
|
| | 113 | + margin: 10px 0 0 35px;
|
| | 114 | +}
|
| | 115 | +.tab a {
|
| | 116 | + color: #8FB0CF;
|
| | 117 | +}
|
| | 118 | +.tab strong {
|
| | 119 | + font-weight: bold;
|
| | 120 | +}
|
| | 121 | +.tab pre {
|
| | 122 | + font-size: 11px;
|
| | 123 | + margin-top: 20px;
|
| | 124 | + width: 668px;
|
| | 125 | + overflow: auto;
|
| | 126 | + clear: both;
|
| | 127 | +}
|
| | 128 | +.tab table {
|
| | 129 | + width: 100%;
|
| | 130 | +}
|
| | 131 | +.tab table td {
|
| | 132 | + padding: 6px 10px 6px 0;
|
| | 133 | + vertical-align: top;
|
| | 134 | +}
|
| | 135 | +.tab dt {
|
| | 136 | + margin-top: 16px;
|
| | 137 | +}
|
| | 138 | +
|
| | 139 | +#colorSelector {
|
| | 140 | + position: relative;
|
| | 141 | + width: 36px;
|
| | 142 | + height: 36px;
|
| | 143 | + background: url(../images/select.png);
|
| | 144 | +}
|
| | 145 | +#colorSelector div {
|
| | 146 | + position: absolute;
|
| | 147 | + top: 3px;
|
| | 148 | + left: 3px;
|
| | 149 | + width: 30px;
|
| | 150 | + height: 30px;
|
| | 151 | + background: url(../images/select.png) center;
|
| | 152 | +}
|
| | 153 | +#colorSelector2 {
|
| | 154 | + position: absolute;
|
| | 155 | + top: 0;
|
| | 156 | + left: 0;
|
| | 157 | + width: 36px;
|
| | 158 | + height: 36px;
|
| | 159 | + background: url(../images/select2.png);
|
| | 160 | +}
|
| | 161 | +#colorSelector2 div {
|
| | 162 | + position: absolute;
|
| | 163 | + top: 4px;
|
| | 164 | + left: 4px;
|
| | 165 | + width: 28px;
|
| | 166 | + height: 28px;
|
| | 167 | + background: url(../images/select2.png) center;
|
| | 168 | +}
|
| | 169 | +#colorpickerHolder2 {
|
| | 170 | + top: 32px;
|
| | 171 | + left: 0;
|
| | 172 | + width: 356px;
|
| | 173 | + height: 0;
|
| | 174 | + overflow: hidden;
|
| | 175 | + position: absolute;
|
| | 176 | +}
|
| | 177 | +#colorpickerHolder2 .colorpicker {
|
| | 178 | + background-image: url(../images/custom_background.png);
|
| | 179 | + position: absolute;
|
| | 180 | + bottom: 0;
|
| | 181 | + left: 0;
|
| | 182 | +}
|
| | 183 | +#colorpickerHolder2 .colorpicker_hue div {
|
| | 184 | + background-image: url(../images/custom_indic.gif);
|
| | 185 | +}
|
| | 186 | +#colorpickerHolder2 .colorpicker_hex {
|
| | 187 | + background-image: url(../images/custom_hex.png);
|
| | 188 | +}
|
| | 189 | +#colorpickerHolder2 .colorpicker_rgb_r {
|
| | 190 | + background-image: url(../images/custom_rgb_r.png);
|
| | 191 | +}
|
| | 192 | +#colorpickerHolder2 .colorpicker_rgb_g {
|
| | 193 | + background-image: url(../images/custom_rgb_g.png);
|
| | 194 | +}
|
| | 195 | +#colorpickerHolder2 .colorpicker_rgb_b {
|
| | 196 | + background-image: url(../images/custom_rgb_b.png);
|
| | 197 | +}
|
| | 198 | +#colorpickerHolder2 .colorpicker_hsb_s {
|
| | 199 | + background-image: url(../images/custom_hsb_s.png);
|
| | 200 | + display: none;
|
| | 201 | +}
|
| | 202 | +#colorpickerHolder2 .colorpicker_hsb_h {
|
| | 203 | + background-image: url(../images/custom_hsb_h.png);
|
| | 204 | + display: none;
|
| | 205 | +}
|
| | 206 | +#colorpickerHolder2 .colorpicker_hsb_b {
|
| | 207 | + background-image: url(../images/custom_hsb_b.png);
|
| | 208 | + display: none;
|
| | 209 | +}
|
| | 210 | +#colorpickerHolder2 .colorpicker_submit {
|
| | 211 | + background-image: url(../images/custom_submit.png);
|
| | 212 | +}
|
| | 213 | +#colorpickerHolder2 .colorpicker input {
|
| | 214 | + color: #778398;
|
| | 215 | +}
|
| | 216 | +#customWidget {
|
| | 217 | + position: relative;
|
| | 218 | + height: 36px;
|
| | 219 | +}
|
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/index.html |
| — | — | @@ -0,0 +1,184 @@ |
| | 2 | +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
| | 3 | +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
| | 4 | +<head>
|
| | 5 | + <link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
|
| | 6 | + <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
|
| | 7 | + <title>ColorPicker - jQuery plugin</title>
|
| | 8 | + <script type="text/javascript" src="js/jquery.js"></script>
|
| | 9 | + <script type="text/javascript" src="js/colorpicker.js"></script>
|
| | 10 | + <script type="text/javascript" src="js/eye.js"></script>
|
| | 11 | + <script type="text/javascript" src="js/utils.js"></script>
|
| | 12 | + <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
|
| | 13 | +</head>
|
| | 14 | +<body>
|
| | 15 | + <div class="wrapper">
|
| | 16 | + <h1>Color Picker - jQuery plugin</h1>
|
| | 17 | + <ul class="navigationTabs">
|
| | 18 | + <li><a href="#about" rel="about">About</a></li>
|
| | 19 | + <li><a href="#download" rel="download">Download</a></li>
|
| | 20 | + <li><a href="#implement" rel="implement">Implement</a></li>
|
| | 21 | + </ul>
|
| | 22 | + <div class="tabsContent">
|
| | 23 | + <div class="tab">
|
| | 24 | + <h2>About</h2>
|
| | 25 | + <p>A simple component to select color in the same way you select color in Adobe Photoshop</p>
|
| | 26 | + <h3>Last update</h3>
|
| | 27 | + <p>23.05.2009 - Check Download tab</p>
|
| | 28 | + <h3>Features</h3>
|
| | 29 | + <ul>
|
| | 30 | + <li>Flat mode - as element in page</li>
|
| | 31 | + <li>Powerful controls for color selection</li>
|
| | 32 | + <li>Easy to customize the look by changing some images</li>
|
| | 33 | + <li>Fits into the viewport</li>
|
| | 34 | + </ul>
|
| | 35 | + <h3>License</h3>
|
| | 36 | + <p>Dual licensed under the MIT and GPL licenses.</p>
|
| | 37 | + <h3>Examples</h3>
|
| | 38 | + <p>Flat mode.</p>
|
| | 39 | + <p id="colorpickerHolder">
|
| | 40 | + </p>
|
| | 41 | + <pre>
|
| | 42 | +$('#colorpickerHolder').ColorPicker({flat: true});
|
| | 43 | + </pre>
|
| | 44 | + <p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
|
| | 45 | + <div id="customWidget">
|
| | 46 | + <div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
|
| | 47 | + <div id="colorpickerHolder2">
|
| | 48 | + </div>
|
| | 49 | + </div>
|
| | 50 | +
|
| | 51 | + <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>
|
| | 52 | + <p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
|
| | 53 | + <p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
|
| | 54 | + <p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
|
| | 55 | + <pre>$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
|
| | 56 | + onSubmit: function(hsb, hex, rgb, el) {
|
| | 57 | + $(el).val(hex);
|
| | 58 | + $(el).ColorPickerHide();
|
| | 59 | + },
|
| | 60 | + onBeforeShow: function () {
|
| | 61 | + $(this).ColorPickerSetColor(this.value);
|
| | 62 | + }
|
| | 63 | +})
|
| | 64 | +.bind('keyup', function(){
|
| | 65 | + $(this).ColorPickerSetColor(this.value);
|
| | 66 | +});
|
| | 67 | +</pre>
|
| | 68 | + <p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
|
| | 69 | + <p>
|
| | 70 | + <div id="colorSelector"><div style="background-color: #0000ff"></div></div>
|
| | 71 | + </p>
|
| | 72 | + <pre>
|
| | 73 | +$('#colorSelector').ColorPicker({
|
| | 74 | + color: '#0000ff',
|
| | 75 | + onShow: function (colpkr) {
|
| | 76 | + $(colpkr).fadeIn(500);
|
| | 77 | + return false;
|
| | 78 | + },
|
| | 79 | + onHide: function (colpkr) {
|
| | 80 | + $(colpkr).fadeOut(500);
|
| | 81 | + return false;
|
| | 82 | + },
|
| | 83 | + onChange: function (hsb, hex, rgb) {
|
| | 84 | + $('#colorSelector div').css('backgroundColor', '#' + hex);
|
| | 85 | + }
|
| | 86 | +});
|
| | 87 | +</pre>
|
| | 88 | + </div>
|
| | 89 | + <div class="tab">
|
| | 90 | + <h2>Download</h2>
|
| | 91 | + <p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>
|
| | 92 | + <h3>Changelog</h3>
|
| | 93 | + <dl>
|
| | 94 | + <dt>23.05.2009</dt>
|
| | 95 | + <dd>Added: close on color selection example</dd>
|
| | 96 | + <dd>Added: restore original color option</dd>
|
| | 97 | + <dd>Changed: color update on key up event</dd>
|
| | 98 | + <dd>Fixed: colorpicker hide and show methods</dd>
|
| | 99 | + <dd>Fixed: reference to options. Multiple fields with colorpickers is possible now.</dd>
|
| | 100 | + <dd>Fixed: RGB to HSB convertion</dd>
|
| | 101 | + <dt>22.08.2008</dt>
|
| | 102 | + <dd>Fixed bug: where some events were not canceled right on Safari</dd>
|
| | 103 | + <dd>Fixed bug: where teh view port was not detected right on Safari</dd>
|
| | 104 | + <dt>16-07-2008</dt>
|
| | 105 | + <dd>Fixed bug where the letter 'F' could not be typed in the Hex field</dd>
|
| | 106 | + <dd>Fixed bug where the changes on Hex field where not parsed</dd>
|
| | 107 | + <dd>Added new option 'livePreview'</dd>
|
| | 108 | + <dt>08-07-2008</dt>
|
| | 109 | + <dd>Fixed typo in the code, both JavaScript and CSS</dd>
|
| | 110 | + <dd>Changed the cursor for some elements</dd>
|
| | 111 | + <dd>Added new demo explaining how to implement custom skin</dd>
|
| | 112 | + <dt>07.07.2008</dt>
|
| | 113 | + <dd>The first release.</dd>
|
| | 114 | + </dl>
|
| | 115 | + </div>
|
| | 116 | + <div class="tab">
|
| | 117 | + <h2>Implement</h2>
|
| | 118 | + <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>
|
| | 119 | + <pre>
|
| | 120 | +<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
|
| | 121 | +<script type="text/javascript" src="js/colorpicker.js"></script>
|
| | 122 | + </pre>
|
| | 123 | + <h3>Invocation code</h3>
|
| | 124 | + <p>All you have to do is to select the elements in a jQuery way and call the plugin.</p>
|
| | 125 | + <pre>
|
| | 126 | + $('input').ColorPicker(options);
|
| | 127 | + </pre>
|
| | 128 | + <h3>Options</h3>
|
| | 129 | + <p>A hash of parameters. All parameters are optional.</p>
|
| | 130 | + <table>
|
| | 131 | + <tr>
|
| | 132 | + <td><strong>eventName</strong></td>
|
| | 133 | + <td>string</td>
|
| | 134 | + <td>The desired event to trigger the colorpicker. Default: 'click'</td>
|
| | 135 | + </tr>
|
| | 136 | + <tr>
|
| | 137 | + <td><strong>color</strong></td>
|
| | 138 | + <td>string or hash</td>
|
| | 139 | + <td>The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</td>
|
| | 140 | + </tr>
|
| | 141 | + <tr>
|
| | 142 | + <td><strong>flat</strong></td>
|
| | 143 | + <td>boolean</td>
|
| | 144 | + <td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td>
|
| | 145 | + </tr>
|
| | 146 | + <tr>
|
| | 147 | + <td><strong>livePreview</strong></td>
|
| | 148 | + <td>boolean</td>
|
| | 149 | + <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>
|
| | 150 | + </tr>
|
| | 151 | + <tr>
|
| | 152 | + <td><strong>onShow</strong></td>
|
| | 153 | + <td>function</td>
|
| | 154 | + <td>Callback function triggered when the color picker is shown</td>
|
| | 155 | + </tr>
|
| | 156 | + <tr>
|
| | 157 | + <td><strong>onBeforeShow</strong></td>
|
| | 158 | + <td>function</td>
|
| | 159 | + <td>Callback function triggered before the color picker is shown</td>
|
| | 160 | + </tr>
|
| | 161 | + <tr>
|
| | 162 | + <td><strong>onHide</strong></td>
|
| | 163 | + <td>function</td>
|
| | 164 | + <td>Callback function triggered when the color picker is hidden</td>
|
| | 165 | + </tr>
|
| | 166 | + <tr>
|
| | 167 | + <td><strong>onChange</strong></td>
|
| | 168 | + <td>function</td>
|
| | 169 | + <td>Callback function triggered when the color is changed</td>
|
| | 170 | + </tr>
|
| | 171 | + <tr>
|
| | 172 | + <td><strong>onSubmit</strong></td>
|
| | 173 | + <td>function</td>
|
| | 174 | + <td>Callback function triggered when the color it is chosen</td>
|
| | 175 | + </tr>
|
| | 176 | + </table>
|
| | 177 | + <h3>Set color</h3>
|
| | 178 | + <p>If you want to set a new color.</p>
|
| | 179 | + <pre>$('input').ColorPickerSetColor(color);</pre>
|
| | 180 | + <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>
|
| | 181 | + </div>
|
| | 182 | + </div>
|
| | 183 | + </div>
|
| | 184 | +</body>
|
| | 185 | +</html>
|
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/js/utils.js |
| — | — | @@ -0,0 +1,252 @@ |
| | 2 | +/**
|
| | 3 | + *
|
| | 4 | + * Utilities
|
| | 5 | + * Author: Stefan Petre www.eyecon.ro
|
| | 6 | + *
|
| | 7 | + */
|
| | 8 | +(function($) {
|
| | 9 | +EYE.extend({
|
| | 10 | + getPosition : function(e, forceIt)
|
| | 11 | + {
|
| | 12 | + var x = 0;
|
| | 13 | + var y = 0;
|
| | 14 | + var es = e.style;
|
| | 15 | + var restoreStyles = false;
|
| | 16 | + if (forceIt && jQuery.curCSS(e,'display') == 'none') {
|
| | 17 | + var oldVisibility = es.visibility;
|
| | 18 | + var oldPosition = es.position;
|
| | 19 | + restoreStyles = true;
|
| | 20 | + es.visibility = 'hidden';
|
| | 21 | + es.display = 'block';
|
| | 22 | + es.position = 'absolute';
|
| | 23 | + }
|
| | 24 | + var el = e;
|
| | 25 | + if (el.getBoundingClientRect) { // IE
|
| | 26 | + var box = el.getBoundingClientRect();
|
| | 27 | + x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
|
| | 28 | + y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
|
| | 29 | + } else {
|
| | 30 | + x = el.offsetLeft;
|
| | 31 | + y = el.offsetTop;
|
| | 32 | + el = el.offsetParent;
|
| | 33 | + if (e != el) {
|
| | 34 | + while (el) {
|
| | 35 | + x += el.offsetLeft;
|
| | 36 | + y += el.offsetTop;
|
| | 37 | + el = el.offsetParent;
|
| | 38 | + }
|
| | 39 | + }
|
| | 40 | + if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
|
| | 41 | + x -= document.body.offsetLeft;
|
| | 42 | + y -= document.body.offsetTop;
|
| | 43 | + }
|
| | 44 | + el = e.parentNode;
|
| | 45 | + while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML')
|
| | 46 | + {
|
| | 47 | + if (jQuery.curCSS(el, 'display') != 'inline') {
|
| | 48 | + x -= el.scrollLeft;
|
| | 49 | + y -= el.scrollTop;
|
| | 50 | + }
|
| | 51 | + el = el.parentNode;
|
| | 52 | + }
|
| | 53 | + }
|
| | 54 | + if (restoreStyles == true) {
|
| | 55 | + es.display = 'none';
|
| | 56 | + es.position = oldPosition;
|
| | 57 | + es.visibility = oldVisibility;
|
| | 58 | + }
|
| | 59 | + return {x:x, y:y};
|
| | 60 | + },
|
| | 61 | + getSize : function(e)
|
| | 62 | + {
|
| | 63 | + var w = parseInt(jQuery.curCSS(e,'width'), 10);
|
| | 64 | + var h = parseInt(jQuery.curCSS(e,'height'), 10);
|
| | 65 | + var wb = 0;
|
| | 66 | + var hb = 0;
|
| | 67 | + if (jQuery.curCSS(e, 'display') != 'none') {
|
| | 68 | + wb = e.offsetWidth;
|
| | 69 | + hb = e.offsetHeight;
|
| | 70 | + } else {
|
| | 71 | + var es = e.style;
|
| | 72 | + var oldVisibility = es.visibility;
|
| | 73 | + var oldPosition = es.position;
|
| | 74 | + es.visibility = 'hidden';
|
| | 75 | + es.display = 'block';
|
| | 76 | + es.position = 'absolute';
|
| | 77 | + wb = e.offsetWidth;
|
| | 78 | + hb = e.offsetHeight;
|
| | 79 | + es.display = 'none';
|
| | 80 | + es.position = oldPosition;
|
| | 81 | + es.visibility = oldVisibility;
|
| | 82 | + }
|
| | 83 | + return {w:w, h:h, wb:wb, hb:hb};
|
| | 84 | + },
|
| | 85 | + getClient : function(e)
|
| | 86 | + {
|
| | 87 | + var h, w;
|
| | 88 | + if (e) {
|
| | 89 | + w = e.clientWidth;
|
| | 90 | + h = e.clientHeight;
|
| | 91 | + } else {
|
| | 92 | + var de = document.documentElement;
|
| | 93 | + w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
|
| | 94 | + h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
|
| | 95 | + }
|
| | 96 | + return {w:w,h:h};
|
| | 97 | + },
|
| | 98 | + getScroll : function (e)
|
| | 99 | + {
|
| | 100 | + var t=0, l=0, w=0, h=0, iw=0, ih=0;
|
| | 101 | + if (e && e.nodeName.toLowerCase() != 'body') {
|
| | 102 | + t = e.scrollTop;
|
| | 103 | + l = e.scrollLeft;
|
| | 104 | + w = e.scrollWidth;
|
| | 105 | + h = e.scrollHeight;
|
| | 106 | + } else {
|
| | 107 | + if (document.documentElement) {
|
| | 108 | + t = document.documentElement.scrollTop;
|
| | 109 | + l = document.documentElement.scrollLeft;
|
| | 110 | + w = document.documentElement.scrollWidth;
|
| | 111 | + h = document.documentElement.scrollHeight;
|
| | 112 | + } else if (document.body) {
|
| | 113 | + t = document.body.scrollTop;
|
| | 114 | + l = document.body.scrollLeft;
|
| | 115 | + w = document.body.scrollWidth;
|
| | 116 | + h = document.body.scrollHeight;
|
| | 117 | + }
|
| | 118 | + if (typeof pageYOffset != 'undefined') {
|
| | 119 | + t = pageYOffset;
|
| | 120 | + l = pageXOffset;
|
| | 121 | + }
|
| | 122 | + iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
|
| | 123 | + ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
|
| | 124 | + }
|
| | 125 | + return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
|
| | 126 | + },
|
| | 127 | + getMargins : function(e, toInteger)
|
| | 128 | + {
|
| | 129 | + var t = jQuery.curCSS(e,'marginTop') || '';
|
| | 130 | + var r = jQuery.curCSS(e,'marginRight') || '';
|
| | 131 | + var b = jQuery.curCSS(e,'marginBottom') || '';
|
| | 132 | + var l = jQuery.curCSS(e,'marginLeft') || '';
|
| | 133 | + if (toInteger)
|
| | 134 | + return {
|
| | 135 | + t: parseInt(t, 10)||0,
|
| | 136 | + r: parseInt(r, 10)||0,
|
| | 137 | + b: parseInt(b, 10)||0,
|
| | 138 | + l: parseInt(l, 10)
|
| | 139 | + };
|
| | 140 | + else
|
| | 141 | + return {t: t, r: r, b: b, l: l};
|
| | 142 | + },
|
| | 143 | + getPadding : function(e, toInteger)
|
| | 144 | + {
|
| | 145 | + var t = jQuery.curCSS(e,'paddingTop') || '';
|
| | 146 | + var r = jQuery.curCSS(e,'paddingRight') || '';
|
| | 147 | + var b = jQuery.curCSS(e,'paddingBottom') || '';
|
| | 148 | + var l = jQuery.curCSS(e,'paddingLeft') || '';
|
| | 149 | + if (toInteger)
|
| | 150 | + return {
|
| | 151 | + t: parseInt(t, 10)||0,
|
| | 152 | + r: parseInt(r, 10)||0,
|
| | 153 | + b: parseInt(b, 10)||0,
|
| | 154 | + l: parseInt(l, 10)
|
| | 155 | + };
|
| | 156 | + else
|
| | 157 | + return {t: t, r: r, b: b, l: l};
|
| | 158 | + },
|
| | 159 | + getBorder : function(e, toInteger)
|
| | 160 | + {
|
| | 161 | + var t = jQuery.curCSS(e,'borderTopWidth') || '';
|
| | 162 | + var r = jQuery.curCSS(e,'borderRightWidth') || '';
|
| | 163 | + var b = jQuery.curCSS(e,'borderBottomWidth') || '';
|
| | 164 | + var l = jQuery.curCSS(e,'borderLeftWidth') || '';
|
| | 165 | + if (toInteger)
|
| | 166 | + return {
|
| | 167 | + t: parseInt(t, 10)||0,
|
| | 168 | + r: parseInt(r, 10)||0,
|
| | 169 | + b: parseInt(b, 10)||0,
|
| | 170 | + l: parseInt(l, 10)||0
|
| | 171 | + };
|
| | 172 | + else
|
| | 173 | + return {t: t, r: r, b: b, l: l};
|
| | 174 | + },
|
| | 175 | + traverseDOM : function(nodeEl, func)
|
| | 176 | + {
|
| | 177 | + func(nodeEl);
|
| | 178 | + nodeEl = nodeEl.firstChild;
|
| | 179 | + while(nodeEl){
|
| | 180 | + EYE.traverseDOM(nodeEl, func);
|
| | 181 | + nodeEl = nodeEl.nextSibling;
|
| | 182 | + }
|
| | 183 | + },
|
| | 184 | + getInnerWidth : function(el, scroll) {
|
| | 185 | + var offsetW = el.offsetWidth;
|
| | 186 | + return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
|
| | 187 | + },
|
| | 188 | + getInnerHeight : function(el, scroll) {
|
| | 189 | + var offsetH = el.offsetHeight;
|
| | 190 | + return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
|
| | 191 | + },
|
| | 192 | + getExtraWidth : function(el) {
|
| | 193 | + if($.boxModel)
|
| | 194 | + return (parseInt($.curCSS(el, 'paddingLeft'))||0)
|
| | 195 | + + (parseInt($.curCSS(el, 'paddingRight'))||0)
|
| | 196 | + + (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
|
| | 197 | + + (parseInt($.curCSS(el, 'borderRightWidth'))||0);
|
| | 198 | + return 0;
|
| | 199 | + },
|
| | 200 | + getExtraHeight : function(el) {
|
| | 201 | + if($.boxModel)
|
| | 202 | + return (parseInt($.curCSS(el, 'paddingTop'))||0)
|
| | 203 | + + (parseInt($.curCSS(el, 'paddingBottom'))||0)
|
| | 204 | + + (parseInt($.curCSS(el, 'borderTopWidth'))||0)
|
| | 205 | + + (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
|
| | 206 | + return 0;
|
| | 207 | + },
|
| | 208 | + isChildOf: function(parentEl, el, container) {
|
| | 209 | + if (parentEl == el) {
|
| | 210 | + return true;
|
| | 211 | + }
|
| | 212 | + if (!el || !el.nodeType || el.nodeType != 1) {
|
| | 213 | + return false;
|
| | 214 | + }
|
| | 215 | + if (parentEl.contains && !$.browser.safari) {
|
| | 216 | + return parentEl.contains(el);
|
| | 217 | + }
|
| | 218 | + if ( parentEl.compareDocumentPosition ) {
|
| | 219 | + return !!(parentEl.compareDocumentPosition(el) & 16);
|
| | 220 | + }
|
| | 221 | + var prEl = el.parentNode;
|
| | 222 | + while(prEl && prEl != container) {
|
| | 223 | + if (prEl == parentEl)
|
| | 224 | + return true;
|
| | 225 | + prEl = prEl.parentNode;
|
| | 226 | + }
|
| | 227 | + return false;
|
| | 228 | + },
|
| | 229 | + centerEl : function(el, axis)
|
| | 230 | + {
|
| | 231 | + var clientScroll = EYE.getScroll();
|
| | 232 | + var size = EYE.getSize(el);
|
| | 233 | + if (!axis || axis == 'vertically')
|
| | 234 | + $(el).css(
|
| | 235 | + {
|
| | 236 | + top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
|
| | 237 | + }
|
| | 238 | + );
|
| | 239 | + if (!axis || axis == 'horizontally')
|
| | 240 | + $(el).css(
|
| | 241 | + {
|
| | 242 | + left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
|
| | 243 | + }
|
| | 244 | + );
|
| | 245 | + }
|
| | 246 | +});
|
| | 247 | +if (!$.easing.easeout) {
|
| | 248 | + $.easing.easeout = function(p, n, firstNum, delta, duration) {
|
| | 249 | + return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
|
| | 250 | + };
|
| | 251 | +}
|
| | 252 | +
|
| | 253 | +})(jQuery); |
| \ No newline at end of file |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/js/eye.js |
| — | — | @@ -0,0 +1,34 @@ |
| | 2 | +/**
|
| | 3 | + *
|
| | 4 | + * Zoomimage
|
| | 5 | + * Author: Stefan Petre www.eyecon.ro
|
| | 6 | + *
|
| | 7 | + */
|
| | 8 | +(function($){
|
| | 9 | + var EYE = window.EYE = function() {
|
| | 10 | + var _registered = {
|
| | 11 | + init: []
|
| | 12 | + };
|
| | 13 | + return {
|
| | 14 | + init: function() {
|
| | 15 | + $.each(_registered.init, function(nr, fn){
|
| | 16 | + fn.call();
|
| | 17 | + });
|
| | 18 | + },
|
| | 19 | + extend: function(prop) {
|
| | 20 | + for (var i in prop) {
|
| | 21 | + if (prop[i] != undefined) {
|
| | 22 | + this[i] = prop[i];
|
| | 23 | + }
|
| | 24 | + }
|
| | 25 | + },
|
| | 26 | + register: function(fn, type) {
|
| | 27 | + if (!_registered[type]) {
|
| | 28 | + _registered[type] = [];
|
| | 29 | + }
|
| | 30 | + _registered[type].push(fn);
|
| | 31 | + }
|
| | 32 | + };
|
| | 33 | + }();
|
| | 34 | + $(EYE.init);
|
| | 35 | +})(jQuery);
|
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/js/colorpicker.js |
| — | — | @@ -0,0 +1,484 @@ |
| | 2 | +/**
|
| | 3 | + *
|
| | 4 | + * Color picker
|
| | 5 | + * Author: Stefan Petre www.eyecon.ro
|
| | 6 | + *
|
| | 7 | + * Dual licensed under the MIT and GPL licenses
|
| | 8 | + *
|
| | 9 | + */
|
| | 10 | +(function ($) {
|
| | 11 | + var ColorPicker = function () {
|
| | 12 | + var
|
| | 13 | + ids = {},
|
| | 14 | + inAction,
|
| | 15 | + charMin = 65,
|
| | 16 | + visible,
|
| | 17 | + 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>',
|
| | 18 | + defaults = {
|
| | 19 | + eventName: 'click',
|
| | 20 | + onShow: function () {},
|
| | 21 | + onBeforeShow: function(){},
|
| | 22 | + onHide: function () {},
|
| | 23 | + onChange: function () {},
|
| | 24 | + onSubmit: function () {},
|
| | 25 | + color: 'ff0000',
|
| | 26 | + livePreview: true,
|
| | 27 | + flat: false
|
| | 28 | + },
|
| | 29 | + fillRGBFields = function (hsb, cal) {
|
| | 30 | + var rgb = HSBToRGB(hsb);
|
| | 31 | + $(cal).data('colorpicker').fields
|
| | 32 | + .eq(1).val(rgb.r).end()
|
| | 33 | + .eq(2).val(rgb.g).end()
|
| | 34 | + .eq(3).val(rgb.b).end();
|
| | 35 | + },
|
| | 36 | + fillHSBFields = function (hsb, cal) {
|
| | 37 | + $(cal).data('colorpicker').fields
|
| | 38 | + .eq(4).val(hsb.h).end()
|
| | 39 | + .eq(5).val(hsb.s).end()
|
| | 40 | + .eq(6).val(hsb.b).end();
|
| | 41 | + },
|
| | 42 | + fillHexFields = function (hsb, cal) {
|
| | 43 | + $(cal).data('colorpicker').fields
|
| | 44 | + .eq(0).val(HSBToHex(hsb)).end();
|
| | 45 | + },
|
| | 46 | + setSelector = function (hsb, cal) {
|
| | 47 | + $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
|
| | 48 | + $(cal).data('colorpicker').selectorIndic.css({
|
| | 49 | + left: parseInt(150 * hsb.s/100, 10),
|
| | 50 | + top: parseInt(150 * (100-hsb.b)/100, 10)
|
| | 51 | + });
|
| | 52 | + },
|
| | 53 | + setHue = function (hsb, cal) {
|
| | 54 | + $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
|
| | 55 | + },
|
| | 56 | + setCurrentColor = function (hsb, cal) {
|
| | 57 | + $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
| | 58 | + },
|
| | 59 | + setNewColor = function (hsb, cal) {
|
| | 60 | + $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
| | 61 | + },
|
| | 62 | + keyDown = function (ev) {
|
| | 63 | + var pressedKey = ev.charCode || ev.keyCode || -1;
|
| | 64 | + if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
|
| | 65 | + return false;
|
| | 66 | + }
|
| | 67 | + var cal = $(this).parent().parent();
|
| | 68 | + if (cal.data('colorpicker').livePreview === true) {
|
| | 69 | + change.apply(this);
|
| | 70 | + }
|
| | 71 | + },
|
| | 72 | + change = function (ev) {
|
| | 73 | + var cal = $(this).parent().parent(), col;
|
| | 74 | + if (this.parentNode.className.indexOf('_hex') > 0) {
|
| | 75 | + cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
|
| | 76 | + } else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
| | 77 | + cal.data('colorpicker').color = col = fixHSB({
|
| | 78 | + h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
|
| | 79 | + s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
|
| | 80 | + b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
|
| | 81 | + });
|
| | 82 | + } else {
|
| | 83 | + cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
|
| | 84 | + r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
|
| | 85 | + g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
|
| | 86 | + b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
|
| | 87 | + }));
|
| | 88 | + }
|
| | 89 | + if (ev) {
|
| | 90 | + fillRGBFields(col, cal.get(0));
|
| | 91 | + fillHexFields(col, cal.get(0));
|
| | 92 | + fillHSBFields(col, cal.get(0));
|
| | 93 | + }
|
| | 94 | + setSelector(col, cal.get(0));
|
| | 95 | + setHue(col, cal.get(0));
|
| | 96 | + setNewColor(col, cal.get(0));
|
| | 97 | + cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
|
| | 98 | + },
|
| | 99 | + blur = function (ev) {
|
| | 100 | + var cal = $(this).parent().parent();
|
| | 101 | + cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
| | 102 | + },
|
| | 103 | + focus = function () {
|
| | 104 | + charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
|
| | 105 | + $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
| | 106 | + $(this).parent().addClass('colorpicker_focus');
|
| | 107 | + },
|
| | 108 | + downIncrement = function (ev) {
|
| | 109 | + var field = $(this).parent().find('input').focus();
|
| | 110 | + var current = {
|
| | 111 | + el: $(this).parent().addClass('colorpicker_slider'),
|
| | 112 | + max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
| | 113 | + y: ev.pageY,
|
| | 114 | + field: field,
|
| | 115 | + val: parseInt(field.val(), 10),
|
| | 116 | + preview: $(this).parent().parent().data('colorpicker').livePreview
|
| | 117 | + };
|
| | 118 | + $(document).bind('mouseup', current, upIncrement);
|
| | 119 | + $(document).bind('mousemove', current, moveIncrement);
|
| | 120 | + },
|
| | 121 | + moveIncrement = function (ev) {
|
| | 122 | + ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
|
| | 123 | + if (ev.data.preview) {
|
| | 124 | + change.apply(ev.data.field.get(0), [true]);
|
| | 125 | + }
|
| | 126 | + return false;
|
| | 127 | + },
|
| | 128 | + upIncrement = function (ev) {
|
| | 129 | + change.apply(ev.data.field.get(0), [true]);
|
| | 130 | + ev.data.el.removeClass('colorpicker_slider').find('input').focus();
|
| | 131 | + $(document).unbind('mouseup', upIncrement);
|
| | 132 | + $(document).unbind('mousemove', moveIncrement);
|
| | 133 | + return false;
|
| | 134 | + },
|
| | 135 | + downHue = function (ev) {
|
| | 136 | + var current = {
|
| | 137 | + cal: $(this).parent(),
|
| | 138 | + y: $(this).offset().top
|
| | 139 | + };
|
| | 140 | + current.preview = current.cal.data('colorpicker').livePreview;
|
| | 141 | + $(document).bind('mouseup', current, upHue);
|
| | 142 | + $(document).bind('mousemove', current, moveHue);
|
| | 143 | + },
|
| | 144 | + moveHue = function (ev) {
|
| | 145 | + change.apply(
|
| | 146 | + ev.data.cal.data('colorpicker')
|
| | 147 | + .fields
|
| | 148 | + .eq(4)
|
| | 149 | + .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
|
| | 150 | + .get(0),
|
| | 151 | + [ev.data.preview]
|
| | 152 | + );
|
| | 153 | + return false;
|
| | 154 | + },
|
| | 155 | + upHue = function (ev) {
|
| | 156 | + fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
| | 157 | + fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
| | 158 | + $(document).unbind('mouseup', upHue);
|
| | 159 | + $(document).unbind('mousemove', moveHue);
|
| | 160 | + return false;
|
| | 161 | + },
|
| | 162 | + downSelector = function (ev) {
|
| | 163 | + var current = {
|
| | 164 | + cal: $(this).parent(),
|
| | 165 | + pos: $(this).offset()
|
| | 166 | + };
|
| | 167 | + current.preview = current.cal.data('colorpicker').livePreview;
|
| | 168 | + $(document).bind('mouseup', current, upSelector);
|
| | 169 | + $(document).bind('mousemove', current, moveSelector);
|
| | 170 | + },
|
| | 171 | + moveSelector = function (ev) {
|
| | 172 | + change.apply(
|
| | 173 | + ev.data.cal.data('colorpicker')
|
| | 174 | + .fields
|
| | 175 | + .eq(6)
|
| | 176 | + .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
|
| | 177 | + .end()
|
| | 178 | + .eq(5)
|
| | 179 | + .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
|
| | 180 | + .get(0),
|
| | 181 | + [ev.data.preview]
|
| | 182 | + );
|
| | 183 | + return false;
|
| | 184 | + },
|
| | 185 | + upSelector = function (ev) {
|
| | 186 | + fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
| | 187 | + fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
| | 188 | + $(document).unbind('mouseup', upSelector);
|
| | 189 | + $(document).unbind('mousemove', moveSelector);
|
| | 190 | + return false;
|
| | 191 | + },
|
| | 192 | + enterSubmit = function (ev) {
|
| | 193 | + $(this).addClass('colorpicker_focus');
|
| | 194 | + },
|
| | 195 | + leaveSubmit = function (ev) {
|
| | 196 | + $(this).removeClass('colorpicker_focus');
|
| | 197 | + },
|
| | 198 | + clickSubmit = function (ev) {
|
| | 199 | + var cal = $(this).parent();
|
| | 200 | + var col = cal.data('colorpicker').color;
|
| | 201 | + cal.data('colorpicker').origColor = col;
|
| | 202 | + setCurrentColor(col, cal.get(0));
|
| | 203 | + cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
|
| | 204 | + },
|
| | 205 | + show = function (ev) {
|
| | 206 | + var cal = $('#' + $(this).data('colorpickerId'));
|
| | 207 | + cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
|
| | 208 | + var pos = $(this).offset();
|
| | 209 | + var viewPort = getViewport();
|
| | 210 | + var top = pos.top + this.offsetHeight;
|
| | 211 | + var left = pos.left;
|
| | 212 | + if (top + 176 > viewPort.t + viewPort.h) {
|
| | 213 | + top -= this.offsetHeight + 176;
|
| | 214 | + }
|
| | 215 | + if (left + 356 > viewPort.l + viewPort.w) {
|
| | 216 | + left -= 356;
|
| | 217 | + }
|
| | 218 | + cal.css({left: left + 'px', top: top + 'px'});
|
| | 219 | + if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
|
| | 220 | + cal.show();
|
| | 221 | + }
|
| | 222 | + $(document).bind('mousedown', {cal: cal}, hide);
|
| | 223 | + return false;
|
| | 224 | + },
|
| | 225 | + hide = function (ev) {
|
| | 226 | + if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
|
| | 227 | + if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
| | 228 | + ev.data.cal.hide();
|
| | 229 | + }
|
| | 230 | + $(document).unbind('mousedown', hide);
|
| | 231 | + }
|
| | 232 | + },
|
| | 233 | + isChildOf = function(parentEl, el, container) {
|
| | 234 | + if (parentEl == el) {
|
| | 235 | + return true;
|
| | 236 | + }
|
| | 237 | + if (parentEl.contains) {
|
| | 238 | + return parentEl.contains(el);
|
| | 239 | + }
|
| | 240 | + if ( parentEl.compareDocumentPosition ) {
|
| | 241 | + return !!(parentEl.compareDocumentPosition(el) & 16);
|
| | 242 | + }
|
| | 243 | + var prEl = el.parentNode;
|
| | 244 | + while(prEl && prEl != container) {
|
| | 245 | + if (prEl == parentEl)
|
| | 246 | + return true;
|
| | 247 | + prEl = prEl.parentNode;
|
| | 248 | + }
|
| | 249 | + return false;
|
| | 250 | + },
|
| | 251 | + getViewport = function () {
|
| | 252 | + var m = document.compatMode == 'CSS1Compat';
|
| | 253 | + return {
|
| | 254 | + l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
| | 255 | + t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
|
| | 256 | + w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
|
| | 257 | + h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
|
| | 258 | + };
|
| | 259 | + },
|
| | 260 | + fixHSB = function (hsb) {
|
| | 261 | + return {
|
| | 262 | + h: Math.min(360, Math.max(0, hsb.h)),
|
| | 263 | + s: Math.min(100, Math.max(0, hsb.s)),
|
| | 264 | + b: Math.min(100, Math.max(0, hsb.b))
|
| | 265 | + };
|
| | 266 | + },
|
| | 267 | + fixRGB = function (rgb) {
|
| | 268 | + return {
|
| | 269 | + r: Math.min(255, Math.max(0, rgb.r)),
|
| | 270 | + g: Math.min(255, Math.max(0, rgb.g)),
|
| | 271 | + b: Math.min(255, Math.max(0, rgb.b))
|
| | 272 | + };
|
| | 273 | + },
|
| | 274 | + fixHex = function (hex) {
|
| | 275 | + var len = 6 - hex.length;
|
| | 276 | + if (len > 0) {
|
| | 277 | + var o = [];
|
| | 278 | + for (var i=0; i<len; i++) {
|
| | 279 | + o.push('0');
|
| | 280 | + }
|
| | 281 | + o.push(hex);
|
| | 282 | + hex = o.join('');
|
| | 283 | + }
|
| | 284 | + return hex;
|
| | 285 | + },
|
| | 286 | + HexToRGB = function (hex) {
|
| | 287 | + var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
| | 288 | + return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
| | 289 | + },
|
| | 290 | + HexToHSB = function (hex) {
|
| | 291 | + return RGBToHSB(HexToRGB(hex));
|
| | 292 | + },
|
| | 293 | + RGBToHSB = function (rgb) {
|
| | 294 | + var hsb = {
|
| | 295 | + h: 0,
|
| | 296 | + s: 0,
|
| | 297 | + b: 0
|
| | 298 | + };
|
| | 299 | + var min = Math.min(rgb.r, rgb.g, rgb.b);
|
| | 300 | + var max = Math.max(rgb.r, rgb.g, rgb.b);
|
| | 301 | + var delta = max - min;
|
| | 302 | + hsb.b = max;
|
| | 303 | + if (max != 0) {
|
| | 304 | +
|
| | 305 | + }
|
| | 306 | + hsb.s = max != 0 ? 255 * delta / max : 0;
|
| | 307 | + if (hsb.s != 0) {
|
| | 308 | + if (rgb.r == max) {
|
| | 309 | + hsb.h = (rgb.g - rgb.b) / delta;
|
| | 310 | + } else if (rgb.g == max) {
|
| | 311 | + hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
| | 312 | + } else {
|
| | 313 | + hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
| | 314 | + }
|
| | 315 | + } else {
|
| | 316 | + hsb.h = -1;
|
| | 317 | + }
|
| | 318 | + hsb.h *= 60;
|
| | 319 | + if (hsb.h < 0) {
|
| | 320 | + hsb.h += 360;
|
| | 321 | + }
|
| | 322 | + hsb.s *= 100/255;
|
| | 323 | + hsb.b *= 100/255;
|
| | 324 | + return hsb;
|
| | 325 | + },
|
| | 326 | + HSBToRGB = function (hsb) {
|
| | 327 | + var rgb = {};
|
| | 328 | + var h = Math.round(hsb.h);
|
| | 329 | + var s = Math.round(hsb.s*255/100);
|
| | 330 | + var v = Math.round(hsb.b*255/100);
|
| | 331 | + if(s == 0) {
|
| | 332 | + rgb.r = rgb.g = rgb.b = v;
|
| | 333 | + } else {
|
| | 334 | + var t1 = v;
|
| | 335 | + var t2 = (255-s)*v/255;
|
| | 336 | + var t3 = (t1-t2)*(h%60)/60;
|
| | 337 | + if(h==360) h = 0;
|
| | 338 | + if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
| | 339 | + else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
| | 340 | + else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
| | 341 | + else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
| | 342 | + else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
| | 343 | + else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
| | 344 | + else {rgb.r=0; rgb.g=0; rgb.b=0}
|
| | 345 | + }
|
| | 346 | + return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
| | 347 | + },
|
| | 348 | + RGBToHex = function (rgb) {
|
| | 349 | + var hex = [
|
| | 350 | + rgb.r.toString(16),
|
| | 351 | + rgb.g.toString(16),
|
| | 352 | + rgb.b.toString(16)
|
| | 353 | + ];
|
| | 354 | + $.each(hex, function (nr, val) {
|
| | 355 | + if (val.length == 1) {
|
| | 356 | + hex[nr] = '0' + val;
|
| | 357 | + }
|
| | 358 | + });
|
| | 359 | + return hex.join('');
|
| | 360 | + },
|
| | 361 | + HSBToHex = function (hsb) {
|
| | 362 | + return RGBToHex(HSBToRGB(hsb));
|
| | 363 | + },
|
| | 364 | + restoreOriginal = function () {
|
| | 365 | + var cal = $(this).parent();
|
| | 366 | + var col = cal.data('colorpicker').origColor;
|
| | 367 | + cal.data('colorpicker').color = col;
|
| | 368 | + fillRGBFields(col, cal.get(0));
|
| | 369 | + fillHexFields(col, cal.get(0));
|
| | 370 | + fillHSBFields(col, cal.get(0));
|
| | 371 | + setSelector(col, cal.get(0));
|
| | 372 | + setHue(col, cal.get(0));
|
| | 373 | + setNewColor(col, cal.get(0));
|
| | 374 | + };
|
| | 375 | + return {
|
| | 376 | + init: function (opt) {
|
| | 377 | + opt = $.extend({}, defaults, opt||{});
|
| | 378 | + if (typeof opt.color == 'string') {
|
| | 379 | + opt.color = HexToHSB(opt.color);
|
| | 380 | + } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
| | 381 | + opt.color = RGBToHSB(opt.color);
|
| | 382 | + } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
| | 383 | + opt.color = fixHSB(opt.color);
|
| | 384 | + } else {
|
| | 385 | + return this;
|
| | 386 | + }
|
| | 387 | + return this.each(function () {
|
| | 388 | + if (!$(this).data('colorpickerId')) {
|
| | 389 | + var options = $.extend({}, opt);
|
| | 390 | + options.origColor = opt.color;
|
| | 391 | + var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
| | 392 | + $(this).data('colorpickerId', id);
|
| | 393 | + var cal = $(tpl).attr('id', id);
|
| | 394 | + if (options.flat) {
|
| | 395 | + cal.appendTo(this).show();
|
| | 396 | + } else {
|
| | 397 | + cal.appendTo(document.body);
|
| | 398 | + }
|
| | 399 | + options.fields = cal
|
| | 400 | + .find('input')
|
| | 401 | + .bind('keyup', keyDown)
|
| | 402 | + .bind('change', change)
|
| | 403 | + .bind('blur', blur)
|
| | 404 | + .bind('focus', focus);
|
| | 405 | + cal
|
| | 406 | + .find('span').bind('mousedown', downIncrement).end()
|
| | 407 | + .find('>div.colorpicker_current_color').bind('click', restoreOriginal);
|
| | 408 | + options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
|
| | 409 | + options.selectorIndic = options.selector.find('div div');
|
| | 410 | + options.el = this;
|
| | 411 | + options.hue = cal.find('div.colorpicker_hue div');
|
| | 412 | + cal.find('div.colorpicker_hue').bind('mousedown', downHue);
|
| | 413 | + options.newColor = cal.find('div.colorpicker_new_color');
|
| | 414 | + options.currentColor = cal.find('div.colorpicker_current_color');
|
| | 415 | + cal.data('colorpicker', options);
|
| | 416 | + cal.find('div.colorpicker_submit')
|
| | 417 | + .bind('mouseenter', enterSubmit)
|
| | 418 | + .bind('mouseleave', leaveSubmit)
|
| | 419 | + .bind('click', clickSubmit);
|
| | 420 | + fillRGBFields(options.color, cal.get(0));
|
| | 421 | + fillHSBFields(options.color, cal.get(0));
|
| | 422 | + fillHexFields(options.color, cal.get(0));
|
| | 423 | + setHue(options.color, cal.get(0));
|
| | 424 | + setSelector(options.color, cal.get(0));
|
| | 425 | + setCurrentColor(options.color, cal.get(0));
|
| | 426 | + setNewColor(options.color, cal.get(0));
|
| | 427 | + if (options.flat) {
|
| | 428 | + cal.css({
|
| | 429 | + position: 'relative',
|
| | 430 | + display: 'block'
|
| | 431 | + });
|
| | 432 | + } else {
|
| | 433 | + $(this).bind(options.eventName, show);
|
| | 434 | + }
|
| | 435 | + }
|
| | 436 | + });
|
| | 437 | + },
|
| | 438 | + showPicker: function() {
|
| | 439 | + return this.each( function () {
|
| | 440 | + if ($(this).data('colorpickerId')) {
|
| | 441 | + show.apply(this);
|
| | 442 | + }
|
| | 443 | + });
|
| | 444 | + },
|
| | 445 | + hidePicker: function() {
|
| | 446 | + return this.each( function () {
|
| | 447 | + if ($(this).data('colorpickerId')) {
|
| | 448 | + $('#' + $(this).data('colorpickerId')).hide();
|
| | 449 | + }
|
| | 450 | + });
|
| | 451 | + },
|
| | 452 | + setColor: function(col) {
|
| | 453 | + if (typeof col == 'string') {
|
| | 454 | + col = HexToHSB(col);
|
| | 455 | + } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
| | 456 | + col = RGBToHSB(col);
|
| | 457 | + } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
| | 458 | + col = fixHSB(col);
|
| | 459 | + } else {
|
| | 460 | + return this;
|
| | 461 | + }
|
| | 462 | + return this.each(function(){
|
| | 463 | + if ($(this).data('colorpickerId')) {
|
| | 464 | + var cal = $('#' + $(this).data('colorpickerId'));
|
| | 465 | + cal.data('colorpicker').color = col;
|
| | 466 | + cal.data('colorpicker').origColor = col;
|
| | 467 | + fillRGBFields(col, cal.get(0));
|
| | 468 | + fillHSBFields(col, cal.get(0));
|
| | 469 | + fillHexFields(col, cal.get(0));
|
| | 470 | + setHue(col, cal.get(0));
|
| | 471 | + setSelector(col, cal.get(0));
|
| | 472 | + setCurrentColor(col, cal.get(0));
|
| | 473 | + setNewColor(col, cal.get(0));
|
| | 474 | + }
|
| | 475 | + });
|
| | 476 | + }
|
| | 477 | + };
|
| | 478 | + }();
|
| | 479 | + $.fn.extend({
|
| | 480 | + ColorPicker: ColorPicker.init,
|
| | 481 | + ColorPickerHide: ColorPicker.hidePicker,
|
| | 482 | + ColorPickerShow: ColorPicker.showPicker,
|
| | 483 | + ColorPickerSetColor: ColorPicker.setColor
|
| | 484 | + });
|
| | 485 | +})(jQuery) |
| \ No newline at end of file |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/js/layout.js |
| — | — | @@ -0,0 +1,67 @@ |
| | 2 | +(function($){
|
| | 3 | + var initLayout = function() {
|
| | 4 | + var hash = window.location.hash.replace('#', '');
|
| | 5 | + var currentTab = $('ul.navigationTabs a')
|
| | 6 | + .bind('click', showTab)
|
| | 7 | + .filter('a[rel=' + hash + ']');
|
| | 8 | + if (currentTab.size() == 0) {
|
| | 9 | + currentTab = $('ul.navigationTabs a:first');
|
| | 10 | + }
|
| | 11 | + showTab.apply(currentTab.get(0));
|
| | 12 | + $('#colorpickerHolder').ColorPicker({flat: true});
|
| | 13 | + $('#colorpickerHolder2').ColorPicker({
|
| | 14 | + flat: true,
|
| | 15 | + color: '#00ff00',
|
| | 16 | + onSubmit: function(hsb, hex, rgb) {
|
| | 17 | + $('#colorSelector2 div').css('backgroundColor', '#' + hex);
|
| | 18 | + }
|
| | 19 | + });
|
| | 20 | + $('#colorpickerHolder2>div').css('position', 'absolute');
|
| | 21 | + var widt = false;
|
| | 22 | + $('#colorSelector2').bind('click', function() {
|
| | 23 | + $('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
|
| | 24 | + widt = !widt;
|
| | 25 | + });
|
| | 26 | + $('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
|
| | 27 | + onSubmit: function(hsb, hex, rgb, el) {
|
| | 28 | + $(el).val(hex);
|
| | 29 | + $(el).ColorPickerHide();
|
| | 30 | + },
|
| | 31 | + onBeforeShow: function () {
|
| | 32 | + $(this).ColorPickerSetColor(this.value);
|
| | 33 | + }
|
| | 34 | + })
|
| | 35 | + .bind('keyup', function(){
|
| | 36 | + $(this).ColorPickerSetColor(this.value);
|
| | 37 | + });
|
| | 38 | + $('#colorSelector').ColorPicker({
|
| | 39 | + color: '#0000ff',
|
| | 40 | + onShow: function (colpkr) {
|
| | 41 | + $(colpkr).fadeIn(500);
|
| | 42 | + return false;
|
| | 43 | + },
|
| | 44 | + onHide: function (colpkr) {
|
| | 45 | + $(colpkr).fadeOut(500);
|
| | 46 | + return false;
|
| | 47 | + },
|
| | 48 | + onChange: function (hsb, hex, rgb) {
|
| | 49 | + $('#colorSelector div').css('backgroundColor', '#' + hex);
|
| | 50 | + }
|
| | 51 | + });
|
| | 52 | + };
|
| | 53 | +
|
| | 54 | + var showTab = function(e) {
|
| | 55 | + var tabIndex = $('ul.navigationTabs a')
|
| | 56 | + .removeClass('active')
|
| | 57 | + .index(this);
|
| | 58 | + $(this)
|
| | 59 | + .addClass('active')
|
| | 60 | + .blur();
|
| | 61 | + $('div.tab')
|
| | 62 | + .hide()
|
| | 63 | + .eq(tabIndex)
|
| | 64 | + .show();
|
| | 65 | + };
|
| | 66 | +
|
| | 67 | + EYE.register(initLayout, 'init');
|
| | 68 | +})(jQuery) |
| \ No newline at end of file |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/blank.gif |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/blank.gif |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1 | 69 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_hsb_b.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_hsb_b.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 2 | 70 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_background.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_background.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 3 | 71 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_rgb_g.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_rgb_g.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 4 | 72 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_background.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_background.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 5 | 73 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_rgb_g.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_rgb_g.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 6 | 74 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_hsb_h.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_hsb_h.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 7 | 75 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_overlay.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_overlay.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 8 | 76 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_hex.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_hex.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 9 | 77 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/select.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/select.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 10 | 78 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_hsb_h.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_hsb_h.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 11 | 79 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_hex.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_hex.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 12 | 80 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/slider.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/slider.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 13 | 81 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_rgb_r.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_rgb_r.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 14 | 82 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_rgb_r.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_rgb_r.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 15 | 83 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_hsb_s.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_hsb_s.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 16 | 84 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_hsb_s.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_hsb_s.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 17 | 85 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_select.gif |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_select.gif |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 18 | 86 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_submit.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_submit.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 19 | 87 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_submit.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_submit.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 20 | 88 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_indic.gif |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_indic.gif |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 21 | 89 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/select2.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/select2.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 22 | 90 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_indic.gif |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_indic.gif |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 23 | 91 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/Thumbs.db |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/Thumbs.db |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 24 | 92 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_rgb_b.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_rgb_b.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 25 | 93 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_rgb_b.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/colorpicker_rgb_b.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 26 | 94 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_hsb_b.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/colorpicker/images/custom_hsb_b.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 27 | 95 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/sago.jpg |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/sago.jpg |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 28 | 96 | + application/octet-stream |
| Added: svn:executable |
| 29 | 97 | + * |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/sagomod.jpg |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/sagomod.jpg |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 30 | 98 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/sagomod.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/sagomod.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 31 | 99 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/demos.css |
| — | — | @@ -0,0 +1,47 @@ |
| | 2 | +body |
| | 3 | +{ |
| | 4 | + margin: 0; |
| | 5 | + padding: 0; |
| | 6 | + background: #eee; |
| | 7 | +} |
| | 8 | + |
| | 9 | +.jcropper-holder { border: 1px black solid; } |
| | 10 | + |
| | 11 | +#outer { |
| | 12 | + text-align: center; |
| | 13 | +} |
| | 14 | + |
| | 15 | +.jcExample |
| | 16 | +{ |
| | 17 | + text-align: left; |
| | 18 | + background: white; |
| | 19 | + width: 700px; |
| | 20 | + font-size: 80%; |
| | 21 | + margin: 3.5em auto 2em auto; |
| | 22 | + *margin: 3.5em 10% 2em 10%; |
| | 23 | + border: 1px black solid; |
| | 24 | + padding: 1em 2em 2em; |
| | 25 | +} |
| | 26 | + |
| | 27 | +.jcExample .article |
| | 28 | +{ |
| | 29 | + width: 565px; |
| | 30 | +} |
| | 31 | + |
| | 32 | +form |
| | 33 | +{ |
| | 34 | + margin: 1.5em 0; |
| | 35 | +} |
| | 36 | + |
| | 37 | +form label |
| | 38 | +{ |
| | 39 | + margin-right: 1em; |
| | 40 | + font-weight: bold; |
| | 41 | + color: #990000; |
| | 42 | +} |
| | 43 | + |
| | 44 | +.jcExample p |
| | 45 | +{ |
| | 46 | + font-family: Verdana, Helvetica, Arial, sans-serif; |
| | 47 | + font-size: 90%; |
| | 48 | +} |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/flowers.jpg |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/demo_files/flowers.jpg |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1 | 49 | + application/octet-stream |
| Added: svn:executable |
| 2 | 50 | + * |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial1.html |
| — | — | @@ -0,0 +1,43 @@ |
| | 2 | +<html> |
| | 3 | + <head> |
| | 4 | + |
| | 5 | + <script src="../js/jquery.min.js"></script> |
| | 6 | + <script src="../js/jquery.Jcrop.js"></script> |
| | 7 | + <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> |
| | 8 | + <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> |
| | 9 | + |
| | 10 | + <script language="Javascript"> |
| | 11 | + |
| | 12 | + jQuery(function(){ |
| | 13 | + jQuery('#cropbox').Jcrop(); |
| | 14 | + }); |
| | 15 | + |
| | 16 | + </script> |
| | 17 | + |
| | 18 | + </head> |
| | 19 | + |
| | 20 | + <body> |
| | 21 | + <div id="outer"> |
| | 22 | + <div class="jcExample"> |
| | 23 | + <div class="article"> |
| | 24 | + |
| | 25 | + <h1>Jcrop - Hello World</h1> |
| | 26 | + <img src="demo_files/flowers.jpg" id="cropbox" /> |
| | 27 | + |
| | 28 | + <p> |
| | 29 | + <b>This example is provided as a demo of the default behavior of Jcrop.</b> |
| | 30 | + Since no event handlers have been attached it only performs |
| | 31 | + the cropping behavior. |
| | 32 | + </p> |
| | 33 | + |
| | 34 | + <div id="dl_links"> |
| | 35 | + <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | |
| | 36 | + <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a> |
| | 37 | + </div> |
| | 38 | + |
| | 39 | + </div> |
| | 40 | + </div> |
| | 41 | + </div> |
| | 42 | + </body> |
| | 43 | +</html> |
| | 44 | + |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial2.html |
| — | — | @@ -0,0 +1,81 @@ |
| | 2 | +<html> |
| | 3 | + <head> |
| | 4 | + |
| | 5 | + <script src="../js/jquery.min.js"></script> |
| | 6 | + <script src="../js/jquery.Jcrop.js"></script> |
| | 7 | + <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> |
| | 8 | + <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> |
| | 9 | + |
| | 10 | + <script language="Javascript"> |
| | 11 | + |
| | 12 | + // Remember to invoke within jQuery(window).load(...) |
| | 13 | + // If you don't, Jcrop may not initialize properly |
| | 14 | + jQuery(document).ready(function(){ |
| | 15 | + |
| | 16 | + jQuery('#cropbox').Jcrop({ |
| | 17 | + onChange: showCoords, |
| | 18 | + onSelect: showCoords |
| | 19 | + }); |
| | 20 | + |
| | 21 | + }); |
| | 22 | + |
| | 23 | + // Our simple event handler, called from onChange and onSelect |
| | 24 | + // event handlers, as per the Jcrop invocation above |
| | 25 | + function showCoords(c) |
| | 26 | + { |
| | 27 | + jQuery('#x').val(c.x); |
| | 28 | + jQuery('#y').val(c.y); |
| | 29 | + jQuery('#x2').val(c.x2); |
| | 30 | + jQuery('#y2').val(c.y2); |
| | 31 | + jQuery('#w').val(c.w); |
| | 32 | + jQuery('#h').val(c.h); |
| | 33 | + }; |
| | 34 | + |
| | 35 | + </script> |
| | 36 | + |
| | 37 | + </head> |
| | 38 | + |
| | 39 | + <body> |
| | 40 | + |
| | 41 | + <div id="outer"> |
| | 42 | + <div class="jcExample"> |
| | 43 | + <div class="article"> |
| | 44 | + |
| | 45 | + <h1>Jcrop - Event Handlers</h1> |
| | 46 | + |
| | 47 | + <!-- This is the image we're attaching Jcrop to --> |
| | 48 | + <img src="demo_files/flowers.jpg" id="cropbox" /> |
| | 49 | + |
| | 50 | + <!-- This is the form that our event handler fills --> |
| | 51 | + <form onsubmit="return false;"> |
| | 52 | + <label>X1 <input type="text" size="4" id="x" name="x" /></label> |
| | 53 | + <label>Y1 <input type="text" size="4" id="y" name="y" /></label> |
| | 54 | + <label>X2 <input type="text" size="4" id="x2" name="x2" /></label> |
| | 55 | + <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label> |
| | 56 | + <label>W <input type="text" size="4" id="w" name="w" /></label> |
| | 57 | + <label>H <input type="text" size="4" id="h" name="h" /></label> |
| | 58 | + </form> |
| | 59 | + |
| | 60 | + <p> |
| | 61 | + <b>An example with a basic event handler.</b> Here we've tied |
| | 62 | + several form values together with a simple event handler invocation. |
| | 63 | + The result is that the form values are updated in real-time as |
| | 64 | + the selection is changed, thanks to Jcrop's <em>onChange</em> event handler. |
| | 65 | + </p> |
| | 66 | + |
| | 67 | + <p> |
| | 68 | + That's how easily Jcrop can be integrated into a traditional web form! |
| | 69 | + </p> |
| | 70 | + |
| | 71 | + <div id="dl_links"> |
| | 72 | + <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | |
| | 73 | + <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a> |
| | 74 | + </div> |
| | 75 | + |
| | 76 | + |
| | 77 | + </div> |
| | 78 | + </div> |
| | 79 | + </div> |
| | 80 | + </body> |
| | 81 | + |
| | 82 | +</html> |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/crop.php |
| — | — | @@ -0,0 +1,106 @@ |
| | 2 | +<?php |
| | 3 | + |
| | 4 | +/** |
| | 5 | + * Jcrop image cropping plugin for jQuery |
| | 6 | + * Example cropping script |
| | 7 | + * @copyright 2008 Kelly Hallman |
| | 8 | + * More info: http://deepliquid.com/content/Jcrop_Implementation_Theory.html |
| | 9 | + */ |
| | 10 | + |
| | 11 | +if ($_SERVER['REQUEST_METHOD'] == 'POST') |
| | 12 | +{ |
| | 13 | + $targ_w = $targ_h = 150; |
| | 14 | + $jpeg_quality = 90; |
| | 15 | + |
| | 16 | + $src = 'demo_files/flowers.jpg'; |
| | 17 | + $img_r = imagecreatefromjpeg($src); |
| | 18 | + $dst_r = ImageCreateTrueColor( $targ_w, $targ_h ); |
| | 19 | + |
| | 20 | + imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'], |
| | 21 | + $targ_w,$targ_h,$_POST['w'],$_POST['h']); |
| | 22 | + |
| | 23 | + header('Content-type: image/jpeg'); |
| | 24 | + imagejpeg($dst_r,null,$jpeg_quality); |
| | 25 | + |
| | 26 | + exit; |
| | 27 | +} |
| | 28 | + |
| | 29 | +// If not a POST request, display page below: |
| | 30 | + |
| | 31 | +?><html> |
| | 32 | + <head> |
| | 33 | + |
| | 34 | + <script src="../js/jquery.pack.js"></script> |
| | 35 | + <script src="../js/jquery.Jcrop.pack.js"></script> |
| | 36 | + <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> |
| | 37 | + <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> |
| | 38 | + |
| | 39 | + <script language="Javascript"> |
| | 40 | + |
| | 41 | + $(function(){ |
| | 42 | + |
| | 43 | + $('#cropbox').Jcrop({ |
| | 44 | + aspectRatio: 1, |
| | 45 | + onSelect: updateCoords |
| | 46 | + }); |
| | 47 | + |
| | 48 | + }); |
| | 49 | + |
| | 50 | + function updateCoords(c) |
| | 51 | + { |
| | 52 | + $('#x').val(c.x); |
| | 53 | + $('#y').val(c.y); |
| | 54 | + $('#w').val(c.w); |
| | 55 | + $('#h').val(c.h); |
| | 56 | + }; |
| | 57 | + |
| | 58 | + function checkCoords() |
| | 59 | + { |
| | 60 | + if (parseInt($('#w').val())) return true; |
| | 61 | + alert('Please select a crop region then press submit.'); |
| | 62 | + return false; |
| | 63 | + }; |
| | 64 | + |
| | 65 | + </script> |
| | 66 | + |
| | 67 | + </head> |
| | 68 | + |
| | 69 | + <body> |
| | 70 | + |
| | 71 | + <div id="outer"> |
| | 72 | + <div class="jcExample"> |
| | 73 | + <div class="article"> |
| | 74 | + |
| | 75 | + <h1>Jcrop - Crop Behavior</h1> |
| | 76 | + |
| | 77 | + <!-- This is the image we're attaching Jcrop to --> |
| | 78 | + <img src="demo_files/flowers.jpg" id="cropbox" /> |
| | 79 | + |
| | 80 | + <!-- This is the form that our event handler fills --> |
| | 81 | + <form action="crop.php" method="post" onsubmit="return checkCoords();"> |
| | 82 | + <input type="hidden" id="x" name="x" /> |
| | 83 | + <input type="hidden" id="y" name="y" /> |
| | 84 | + <input type="hidden" id="w" name="w" /> |
| | 85 | + <input type="hidden" id="h" name="h" /> |
| | 86 | + <input type="submit" value="Crop Image" /> |
| | 87 | + </form> |
| | 88 | + |
| | 89 | + <p> |
| | 90 | + <b>An example server-side crop script.</b> Hidden form values |
| | 91 | + are set when a selection is made. If you press the <i>Crop Image</i> |
| | 92 | + button, the form will be submitted and a 150x150 thumbnail will be |
| | 93 | + dumped to the browser. Try it! |
| | 94 | + </p> |
| | 95 | + |
| | 96 | + <div id="dl_links"> |
| | 97 | + <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | |
| | 98 | + <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a> |
| | 99 | + </div> |
| | 100 | + |
| | 101 | + |
| | 102 | + </div> |
| | 103 | + </div> |
| | 104 | + </div> |
| | 105 | + </body> |
| | 106 | + |
| | 107 | +</html> |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial3.html |
| — | — | @@ -0,0 +1,88 @@ |
| | 2 | +<html> |
| | 3 | + <head> |
| | 4 | + |
| | 5 | + <script src="../js/jquery.min.js"></script> |
| | 6 | + <script src="../js/jquery.Jcrop.js"></script> |
| | 7 | + <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> |
| | 8 | + <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> |
| | 9 | + |
| | 10 | + <script language="Javascript"> |
| | 11 | + |
| | 12 | + // Remember to invoke within jQuery(window).load(...) |
| | 13 | + // If you don't, Jcrop may not initialize properly |
| | 14 | + jQuery(window).load(function(){ |
| | 15 | + |
| | 16 | + jQuery('#cropbox').Jcrop({ |
| | 17 | + onChange: showPreview, |
| | 18 | + onSelect: showPreview, |
| | 19 | + aspectRatio: 1 |
| | 20 | + }); |
| | 21 | + |
| | 22 | + }); |
| | 23 | + |
| | 24 | + // Our simple event handler, called from onChange and onSelect |
| | 25 | + // event handlers, as per the Jcrop invocation above |
| | 26 | + function showPreview(coords) |
| | 27 | + { |
| | 28 | + if (parseInt(coords.w) > 0) |
| | 29 | + { |
| | 30 | + var rx = 100 / coords.w; |
| | 31 | + var ry = 100 / coords.h; |
| | 32 | + |
| | 33 | + jQuery('#preview').css({ |
| | 34 | + width: Math.round(rx * 500) + 'px', |
| | 35 | + height: Math.round(ry * 370) + 'px', |
| | 36 | + marginLeft: '-' + Math.round(rx * coords.x) + 'px', |
| | 37 | + marginTop: '-' + Math.round(ry * coords.y) + 'px' |
| | 38 | + }); |
| | 39 | + } |
| | 40 | + } |
| | 41 | + |
| | 42 | + </script> |
| | 43 | + |
| | 44 | + </head> |
| | 45 | + |
| | 46 | + <body> |
| | 47 | + |
| | 48 | + <div id="outer"> |
| | 49 | + <div class="jcExample"> |
| | 50 | + <div class="article"> |
| | 51 | + |
| | 52 | + <h1>Jcrop - Aspect ratio lock w/ preview pane</h1> |
| | 53 | + |
| | 54 | + <!-- This is the image we're attaching Jcrop to --> |
| | 55 | + <table> |
| | 56 | + <tr> |
| | 57 | + <td> |
| | 58 | + <img src="demo_files/flowers.jpg" id="cropbox" /> |
| | 59 | + </td> |
| | 60 | + <td> |
| | 61 | + <div style="width:100px;height:100px;overflow:hidden;"> |
| | 62 | + <img src="demo_files/flowers.jpg" id="preview" /> |
| | 63 | + </div> |
| | 64 | + |
| | 65 | + </td> |
| | 66 | + </tr> |
| | 67 | + </table> |
| | 68 | + |
| | 69 | + <p> |
| | 70 | + <b>An example with aspect ratio locking and preview pane.</b> |
| | 71 | + Obviously the most visual demo, the preview pane is accomplished |
| | 72 | + entirely outside of Jcrop with a simple jQuery-flavored callback. |
| | 73 | + This type of interface could be useful for creating a thumbnail |
| | 74 | + or avatar. The onChange event handler is used to update the |
| | 75 | + view in the preview pane. |
| | 76 | + </p> |
| | 77 | + |
| | 78 | + <div id="dl_links"> |
| | 79 | + <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | |
| | 80 | + <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a> |
| | 81 | + </div> |
| | 82 | + |
| | 83 | + |
| | 84 | + </div> |
| | 85 | + </div> |
| | 86 | + </div> |
| | 87 | + </body> |
| | 88 | + |
| | 89 | +</html> |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial4.html |
| — | — | @@ -0,0 +1,94 @@ |
| | 2 | +<html> |
| | 3 | + <head> |
| | 4 | + |
| | 5 | + <script src="../js/jquery.min.js"></script> |
| | 6 | + <script src="../js/jquery.Jcrop.js"></script> |
| | 7 | + <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> |
| | 8 | + <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> |
| | 9 | + |
| | 10 | + <script language="Javascript"> |
| | 11 | + |
| | 12 | + $(window).load(function(){ |
| | 13 | + |
| | 14 | + var api = $.Jcrop('#cropbox',{ |
| | 15 | + setSelect: [ 100, 100, 200, 200 ] |
| | 16 | + }); |
| | 17 | + var i, ac; |
| | 18 | + |
| | 19 | + // A handler to kill the action |
| | 20 | + function nothing(e) |
| | 21 | + { |
| | 22 | + e.stopPropagation(); |
| | 23 | + e.preventDefault(); |
| | 24 | + return false; |
| | 25 | + }; |
| | 26 | + |
| | 27 | + // Returns event handler for animation callback |
| | 28 | + function anim_handler(ac) |
| | 29 | + { |
| | 30 | + return function(e) { |
| | 31 | + api.animateTo(ac); |
| | 32 | + return nothing(e); |
| | 33 | + }; |
| | 34 | + }; |
| | 35 | + |
| | 36 | + // Setup some coordinates for animation |
| | 37 | + var ac = |
| | 38 | + { |
| | 39 | + anim1: [50,50,450,320], |
| | 40 | + anim2: [74,81,218,228], |
| | 41 | + anim3: [8,8,32,360], |
| | 42 | + anim4: [316,150,470,230], |
| | 43 | + anim5: [80,160,500,190] |
| | 44 | + }; |
| | 45 | + |
| | 46 | + // Attach respective event handlers |
| | 47 | + for(i in ac) jQuery('#'+i).click(anim_handler(ac[i])); |
| | 48 | + |
| | 49 | + // Attach another one manually, to demonstrate "set" w/o animation |
| | 50 | + jQuery('#setsel').click(function(e) { |
| | 51 | + api.setSelect( [ 200, 200, 300, 300 ] ); |
| | 52 | + return nothing(e); |
| | 53 | + }); |
| | 54 | + |
| | 55 | + }); |
| | 56 | + |
| | 57 | + </script> |
| | 58 | + |
| | 59 | + </head> |
| | 60 | + |
| | 61 | + <body> |
| | 62 | + <div id="outer"> |
| | 63 | + <div class="jcExample"> |
| | 64 | + <div class="article"> |
| | 65 | + |
| | 66 | + <h1>Jcrop - API Demo</h1> |
| | 67 | + <img src="demo_files/flowers.jpg" id="cropbox" /> |
| | 68 | + |
| | 69 | + <div style="margin: 20px 0;"> |
| | 70 | + <button id="anim1">A1</button> |
| | 71 | + <button id="anim2">A2</button> |
| | 72 | + <button id="anim3">A3</button> |
| | 73 | + <button id="anim4">A4</button> |
| | 74 | + <button id="anim5">A5</button> |
| | 75 | + <button id="setsel">Set</button> |
| | 76 | + </div> |
| | 77 | + |
| | 78 | + <p> |
| | 79 | + <b>API feature demonstration.</b> |
| | 80 | + Press the buttons above to animate different selections. |
| | 81 | + This was the original API demo, before additional API functionality |
| | 82 | + was added (see Advanced API demo). |
| | 83 | + </p> |
| | 84 | + |
| | 85 | + <div id="dl_links"> |
| | 86 | + <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | |
| | 87 | + <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a> |
| | 88 | + </div> |
| | 89 | + |
| | 90 | + </div> |
| | 91 | + </div> |
| | 92 | + </div> |
| | 93 | + </body> |
| | 94 | +</html> |
| | 95 | + |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/demos/tutorial5.html |
| — | — | @@ -0,0 +1,206 @@ |
| | 2 | +<html> |
| | 3 | + <head> |
| | 4 | + |
| | 5 | + <script src="../js/jquery.min.js"></script> |
| | 6 | + <script src="../js/jquery.Jcrop.js"></script> |
| | 7 | + <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> |
| | 8 | + <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> |
| | 9 | + <style type="text/css"> |
| | 10 | + fieldset.optdual { width: 500px; } |
| | 11 | + .optdual { position: relative; } |
| | 12 | + .optdual .offset { position: absolute; left: 18em; } |
| | 13 | + .optlist label { width: 16em; display: block; } |
| | 14 | + #dl_links { margin-top: .5em; } |
| | 15 | + </style> |
| | 16 | + <script language="Javascript"> |
| | 17 | + |
| | 18 | + $(window).load(function(){ |
| | 19 | + |
| | 20 | + var jcrop_api; |
| | 21 | + var i, ac; |
| | 22 | + |
| | 23 | + initJcrop(); |
| | 24 | + |
| | 25 | + function initJcrop()//{{{ |
| | 26 | + { |
| | 27 | + |
| | 28 | + jcrop_api = $.Jcrop('#cropbox'); |
| | 29 | + |
| | 30 | + $('#can_click,#can_move,#can_size') |
| | 31 | + .attr('checked','checked'); |
| | 32 | + |
| | 33 | + $('#ar_lock,#size_lock,#bg_swap').attr('checked',false); |
| | 34 | + |
| | 35 | + }; |
| | 36 | + //}}} |
| | 37 | + |
| | 38 | + // A handler to kill the action |
| | 39 | + // Probably not necessary, but I like it |
| | 40 | + function nothing(e) |
| | 41 | + { |
| | 42 | + e.stopPropagation(); |
| | 43 | + e.preventDefault(); |
| | 44 | + return false; |
| | 45 | + }; |
| | 46 | + |
| | 47 | + // Use the API to find cropping dimensions |
| | 48 | + // Then generate a random selection |
| | 49 | + // This function is used by setSelect and animateTo buttons |
| | 50 | + // Mainly for demonstration purposes |
| | 51 | + function getRandom() { |
| | 52 | + var dim = jcrop_api.getBounds(); |
| | 53 | + return [ |
| | 54 | + Math.round(Math.random() * dim[0]), |
| | 55 | + Math.round(Math.random() * dim[1]), |
| | 56 | + Math.round(Math.random() * dim[0]), |
| | 57 | + Math.round(Math.random() * dim[1]) |
| | 58 | + ]; |
| | 59 | + }; |
| | 60 | + |
| | 61 | + // Attach interface buttons |
| | 62 | + // This may appear to be a lot of code but it's simple stuff |
| | 63 | + |
| | 64 | + $('#setSelect').click(function(e) { |
| | 65 | + // Sets a random selection |
| | 66 | + jcrop_api.setSelect(getRandom()); |
| | 67 | + }); |
| | 68 | + |
| | 69 | + $('#animateTo').click(function(e) { |
| | 70 | + // Animates to a random selection |
| | 71 | + jcrop_api.animateTo(getRandom()); |
| | 72 | + }); |
| | 73 | + |
| | 74 | + $('#release').click(function(e) { |
| | 75 | + // Release method clears the selection |
| | 76 | + jcrop_api.release(); |
| | 77 | + }); |
| | 78 | + |
| | 79 | + $('#disable').click(function(e) { |
| | 80 | + jcrop_api.disable(); |
| | 81 | + |
| | 82 | + $('#enable').show(); |
| | 83 | + $('.requiresjcrop').hide(); |
| | 84 | + }); |
| | 85 | + |
| | 86 | + $('#enable').click(function(e) { |
| | 87 | + jcrop_api.enable(); |
| | 88 | + |
| | 89 | + $('#enable').hide(); |
| | 90 | + $('.requiresjcrop').show(); |
| | 91 | + }); |
| | 92 | + |
| | 93 | + $('#rehook').click(function(e) { |
| | 94 | + initJcrop(); |
| | 95 | + $('#rehook,#enable').hide(); |
| | 96 | + $('#unhook,.requiresjcrop').show(); |
| | 97 | + return nothing(e); |
| | 98 | + }); |
| | 99 | + |
| | 100 | + $('#unhook').click(function(e) { |
| | 101 | + jcrop_api.destroy(); |
| | 102 | + |
| | 103 | + $('#unhook,#enable,.requiresjcrop').hide(); |
| | 104 | + $('#rehook').show(); |
| | 105 | + return nothing(e); |
| | 106 | + }); |
| | 107 | + |
| | 108 | + // The checkboxes simply set options based on it's checked value |
| | 109 | + // Options are changed by passing a new options object |
| | 110 | + |
| | 111 | + // Also, to prevent strange behavior, they are initially checked |
| | 112 | + // This matches the default initial state of Jcrop |
| | 113 | + |
| | 114 | + $('#can_click').change(function(e) { |
| | 115 | + jcrop_api.setOptions({ allowSelect: !!this.checked }); |
| | 116 | + jcrop_api.focus(); |
| | 117 | + }); |
| | 118 | + |
| | 119 | + $('#can_move').change(function(e) { |
| | 120 | + jcrop_api.setOptions({ allowMove: !!this.checked }); |
| | 121 | + jcrop_api.focus(); |
| | 122 | + }); |
| | 123 | + |
| | 124 | + $('#can_size').change(function(e) { |
| | 125 | + jcrop_api.setOptions({ allowResize: !!this.checked }); |
| | 126 | + jcrop_api.focus(); |
| | 127 | + }); |
| | 128 | + |
| | 129 | + $('#ar_lock').change(function(e) { |
| | 130 | + jcrop_api.setOptions(this.checked? { aspectRatio: 4/3 }: { aspectRatio: 0 }); |
| | 131 | + jcrop_api.focus(); |
| | 132 | + }); |
| | 133 | + $('#size_lock').change(function(e) { |
| | 134 | + jcrop_api.setOptions(this.checked? { |
| | 135 | + minSize: [ 80, 80 ], |
| | 136 | + maxSize: [ 350, 350 ] |
| | 137 | + }: { |
| | 138 | + minSize: [ 0, 0 ], |
| | 139 | + maxSize: [ 0, 0 ] |
| | 140 | + }); |
| | 141 | + jcrop_api.focus(); |
| | 142 | + }); |
| | 143 | + $('#bg_swap').change(function(e) { |
| | 144 | + jcrop_api.setOptions( this.checked? { |
| | 145 | + outerImage: 'demo_files/sagomod.png', |
| | 146 | + bgOpacity: 1 |
| | 147 | + }: { |
| | 148 | + outerImage: 'demo_files/sago.jpg', |
| | 149 | + bgOpacity: .6 |
| | 150 | + }); |
| | 151 | + jcrop_api.release(); |
| | 152 | + }); |
| | 153 | + |
| | 154 | + }); |
| | 155 | + |
| | 156 | + </script> |
| | 157 | + |
| | 158 | + </head> |
| | 159 | + |
| | 160 | + <body> |
| | 161 | + <div id="outer"> |
| | 162 | + <div class="jcExample"> |
| | 163 | + <div class="article"> |
| | 164 | + |
| | 165 | + <h1>Jcrop - API Demo</h1> |
| | 166 | + <img src="demo_files/sago.jpg" id="cropbox" /> |
| | 167 | + |
| | 168 | + <div style="margin: 20px 0;"> |
| | 169 | + |
| | 170 | + <span class="requiresjcrop"> |
| | 171 | + <button id="setSelect">setSelect</button> |
| | 172 | + <button id="animateTo">animateTo</button> |
| | 173 | + <button id="release">Release</button> |
| | 174 | + <button id="disable">Disable</button> |
| | 175 | + </span> |
| | 176 | + |
| | 177 | + <button id="enable" style="display:none;">Re-Enable</button> |
| | 178 | + <button id="unhook">Destroy!</button> |
| | 179 | + <button id="rehook" style="display:none;">Attach Jcrop</button> |
| | 180 | + |
| | 181 | + </div> |
| | 182 | + |
| | 183 | + <fieldset class="optdual requiresjcrop"> |
| | 184 | + <legend>Option Toggles</legend> |
| | 185 | + <div class="optlist offset"> |
| | 186 | + <label><input type="checkbox" id="ar_lock" />Aspect ratio</label> |
| | 187 | + <label><input type="checkbox" id="size_lock" />minSize/maxSize setting</label> |
| | 188 | + <label><input type="checkbox" id="bg_swap" />Change outerImage</label> |
| | 189 | + </div> |
| | 190 | + <div class="optlist"> |
| | 191 | + <label><input type="checkbox" id="can_click" />Allow new selections</label> |
| | 192 | + <label><input type="checkbox" id="can_move" />Selection can be moved</label> |
| | 193 | + <label><input type="checkbox" id="can_size" />Resizable selection</label> |
| | 194 | + </div> |
| | 195 | + </fieldset> |
| | 196 | + |
| | 197 | + <div id="dl_links"> |
| | 198 | + <a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> | |
| | 199 | + <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a> |
| | 200 | + </div> |
| | 201 | + |
| | 202 | + </div> |
| | 203 | + </div> |
| | 204 | + </div> |
| | 205 | + </body> |
| | 206 | +</html> |
| | 207 | + |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/css/Jcrop.gif |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/css/Jcrop.gif |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1 | 208 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/css/jquery.Jcrop.css |
| — | — | @@ -0,0 +1,35 @@ |
| | 2 | +/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */ |
| | 3 | +.jcrop-holder { text-align: left; } |
| | 4 | + |
| | 5 | +.jcrop-vline, .jcrop-hline |
| | 6 | +{ |
| | 7 | + font-size: 0; |
| | 8 | + position: absolute; |
| | 9 | + background: white url('Jcrop.gif') top left repeat; |
| | 10 | +} |
| | 11 | +.jcrop-vline { height: 100%; width: 1px !important; } |
| | 12 | +.jcrop-hline { width: 100%; height: 1px !important; } |
| | 13 | +.jcrop-handle { |
| | 14 | + font-size: 1px; |
| | 15 | + width: 7px !important; |
| | 16 | + height: 7px !important; |
| | 17 | + border: 1px #eee solid; |
| | 18 | + background-color: #333; |
| | 19 | + *width: 9px; |
| | 20 | + *height: 9px; |
| | 21 | +} |
| | 22 | + |
| | 23 | +.jcrop-tracker { width: 100%; height: 100%; } |
| | 24 | + |
| | 25 | +.custom .jcrop-vline, |
| | 26 | +.custom .jcrop-hline |
| | 27 | +{ |
| | 28 | + background: yellow; |
| | 29 | +} |
| | 30 | +.custom .jcrop-handle |
| | 31 | +{ |
| | 32 | + border-color: black; |
| | 33 | + background-color: #C7BB00; |
| | 34 | + -moz-border-radius: 3px; |
| | 35 | + -webkit-border-radius: 3px; |
| | 36 | +} |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/index.html |
| — | — | @@ -0,0 +1,65 @@ |
| | 2 | +<html> |
| | 3 | +<head> |
| | 4 | +<title>Jcrop: the jQuery Image Cropping Plugin</title> |
| | 5 | +</head> |
| | 6 | +<body> |
| | 7 | + |
| | 8 | +<div style="margin:0;padding:1em 5em;width:40em;"> |
| | 9 | +<h1>Jcrop Image Cropping Plugin</h1> |
| | 10 | + |
| | 11 | +<big> |
| | 12 | + <a href="http://deepliquid.com/content/Jcrop.html"><b>Jcrop</b></a> |
| | 13 | + is the image cropping plugin for |
| | 14 | + <a href="http://jquery.com/">jQuery</a>.<br> |
| | 15 | + You've successfully unpacked Jcrop. |
| | 16 | +</big> |
| | 17 | + |
| | 18 | +<h3>Static Demos</h3> |
| | 19 | + |
| | 20 | +<ul> |
| | 21 | + <li><a href="demos/tutorial1.html">Hello World</a> — default behavior</a></li> |
| | 22 | + <li><a href="demos/tutorial2.html">Basic Handler</a> — basic form integration</a></li> |
| | 23 | + <li><a href="demos/tutorial3.html">Aspect Ratio w/ Preview Pane</a> — nice visual example</a></li> |
| | 24 | + <li><a href="demos/tutorial4.html">Setting/Animating Selection</a> — animation demo</a></li> |
| | 25 | + <li><a href="demos/tutorial5.html">API Interface</a> — real-time API example</a></li> |
| | 26 | +</ul> |
| | 27 | + |
| | 28 | +<h3>Live Demo</h3> |
| | 29 | + |
| | 30 | +<ul> |
| | 31 | + <li><a href="demos/crop.php">PHP Cropping Demo</a> — requires PHP/gd support</a></li> |
| | 32 | +</ul> |
| | 33 | + |
| | 34 | +<h3>Jcrop Links</h3> |
| | 35 | + |
| | 36 | +<ul> |
| | 37 | + <li><a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a></li> |
| | 38 | + <li><a href="http://deepliquid.com/content/Jcrop_Manual.html">Jcrop Manual</a></li> |
| | 39 | +</ul> |
| | 40 | + |
| | 41 | +<hr noshade="noshade" size="1" style="margin-top:2em;" /> |
| | 42 | +<small> |
| | 43 | + <b>© 2008 Kelly Hallman and DeepLiquid.com</b><br> |
| | 44 | + Free software released under |
| | 45 | + <a href="http://deepliquid.com/content/Jcrop_License.html">MIT License</a> |
| | 46 | +</small> |
| | 47 | +</div> |
| | 48 | + |
| | 49 | + |
| | 50 | + |
| | 51 | + |
| | 52 | +<!-- Below here for internal analysis {{{ --> |
| | 53 | + |
| | 54 | +<script type="text/javascript"> |
| | 55 | +var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); |
| | 56 | +document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); |
| | 57 | +</script> |
| | 58 | +<script type="text/javascript"> |
| | 59 | +var pageTracker = _gat._getTracker("UA-5176876-1"); |
| | 60 | +pageTracker._trackPageview(); |
| | 61 | +</script> |
| | 62 | + |
| | 63 | +<!-- }}} --> |
| | 64 | + |
| | 65 | +</body> |
| | 66 | +</html> |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/js/jquery.Jcrop.js |
| — | — | @@ -0,0 +1,1197 @@ |
| | 2 | +/** |
| | 3 | + * jquery.Jcrop.js v0.9.8 |
| | 4 | + * jQuery Image Cropping Plugin |
| | 5 | + * @author Kelly Hallman <khallman@gmail.com> |
| | 6 | + * Copyright (c) 2008-2009 Kelly Hallman - released under MIT License {{{ |
| | 7 | + * |
| | 8 | + * Permission is hereby granted, free of charge, to any person |
| | 9 | + * obtaining a copy of this software and associated documentation |
| | 10 | + * files (the "Software"), to deal in the Software without |
| | 11 | + * restriction, including without limitation the rights to use, |
| | 12 | + * copy, modify, merge, publish, distribute, sublicense, and/or sell |
| | 13 | + * copies of the Software, and to permit persons to whom the |
| | 14 | + * Software is furnished to do so, subject to the following |
| | 15 | + * conditions: |
| | 16 | + |
| | 17 | + * The above copyright notice and this permission notice shall be |
| | 18 | + * included in all copies or substantial portions of the Software. |
| | 19 | + |
| | 20 | + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
| | 21 | + * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES |
| | 22 | + * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
| | 23 | + * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT |
| | 24 | + * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
| | 25 | + * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
| | 26 | + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
| | 27 | + * OTHER DEALINGS IN THE SOFTWARE. |
| | 28 | + |
| | 29 | + * }}} |
| | 30 | + */ |
| | 31 | + |
| | 32 | +(function($) { |
| | 33 | + |
| | 34 | +$.Jcrop = function(obj,opt) |
| | 35 | +{ |
| | 36 | + // Initialization {{{ |
| | 37 | + |
| | 38 | + // Sanitize some options {{{ |
| | 39 | + var obj = obj, opt = opt; |
| | 40 | + |
| | 41 | + if (typeof(obj) !== 'object') obj = $(obj)[0]; |
| | 42 | + if (typeof(opt) !== 'object') opt = { }; |
| | 43 | + |
| | 44 | + // Some on-the-fly fixes for MSIE...sigh |
| | 45 | + if (!('trackDocument' in opt)) |
| | 46 | + { |
| | 47 | + opt.trackDocument = $.browser.msie ? false : true; |
| | 48 | + if ($.browser.msie && $.browser.version.split('.')[0] == '8') |
| | 49 | + opt.trackDocument = true; |
| | 50 | + } |
| | 51 | + |
| | 52 | + if (!('keySupport' in opt)) |
| | 53 | + opt.keySupport = $.browser.msie ? false : true; |
| | 54 | + |
| | 55 | + // }}} |
| | 56 | + // Extend the default options {{{ |
| | 57 | + var defaults = { |
| | 58 | + |
| | 59 | + // Basic Settings |
| | 60 | + trackDocument: false, |
| | 61 | + baseClass: 'jcrop', |
| | 62 | + addClass: null, |
| | 63 | + |
| | 64 | + // Styling Options |
| | 65 | + bgColor: 'black', |
| | 66 | + bgOpacity: .6, |
| | 67 | + borderOpacity: .4, |
| | 68 | + handleOpacity: .5, |
| | 69 | + |
| | 70 | + handlePad: 5, |
| | 71 | + handleSize: 9, |
| | 72 | + handleOffset: 5, |
| | 73 | + edgeMargin: 14, |
| | 74 | + |
| | 75 | + aspectRatio: 0, |
| | 76 | + keySupport: true, |
| | 77 | + cornerHandles: true, |
| | 78 | + sideHandles: true, |
| | 79 | + drawBorders: true, |
| | 80 | + dragEdges: true, |
| | 81 | + |
| | 82 | + boxWidth: 0, |
| | 83 | + boxHeight: 0, |
| | 84 | + |
| | 85 | + boundary: 8, |
| | 86 | + animationDelay: 20, |
| | 87 | + swingSpeed: 3, |
| | 88 | + |
| | 89 | + allowSelect: true, |
| | 90 | + allowMove: true, |
| | 91 | + allowResize: true, |
| | 92 | + |
| | 93 | + minSelect: [ 0, 0 ], |
| | 94 | + maxSize: [ 0, 0 ], |
| | 95 | + minSize: [ 0, 0 ], |
| | 96 | + |
| | 97 | + // Callbacks / Event Handlers |
| | 98 | + onChange: function() { }, |
| | 99 | + onSelect: function() { } |
| | 100 | + |
| | 101 | + }; |
| | 102 | + var options = defaults; |
| | 103 | + setOptions(opt); |
| | 104 | + |
| | 105 | + // }}} |
| | 106 | + // Initialize some jQuery objects {{{ |
| | 107 | + |
| | 108 | + var $origimg = $(obj); |
| | 109 | + var $img = $origimg.clone().removeAttr('id').css({ position: 'absolute' }); |
| | 110 | + |
| | 111 | + $img.width($origimg.width()); |
| | 112 | + $img.height($origimg.height()); |
| | 113 | + $origimg.after($img).hide(); |
| | 114 | + |
| | 115 | + presize($img,options.boxWidth,options.boxHeight); |
| | 116 | + |
| | 117 | + var boundx = $img.width(), |
| | 118 | + boundy = $img.height(), |
| | 119 | + |
| | 120 | + $div = $('<div />') |
| | 121 | + .width(boundx).height(boundy) |
| | 122 | + .addClass(cssClass('holder')) |
| | 123 | + .css({ |
| | 124 | + position: 'relative', |
| | 125 | + backgroundColor: options.bgColor |
| | 126 | + }).insertAfter($origimg).append($img); |
| | 127 | + ; |
| | 128 | + |
| | 129 | + if (options.addClass) $div.addClass(options.addClass); |
| | 130 | + //$img.wrap($div); |
| | 131 | + |
| | 132 | + var $img2 = $('<img />')/*{{{*/ |
| | 133 | + .attr('src',$img.attr('src')) |
| | 134 | + .css('position','absolute') |
| | 135 | + .width(boundx).height(boundy) |
| | 136 | + ;/*}}}*/ |
| | 137 | + var $img_holder = $('<div />')/*{{{*/ |
| | 138 | + .width(pct(100)).height(pct(100)) |
| | 139 | + .css({ |
| | 140 | + zIndex: 310, |
| | 141 | + position: 'absolute', |
| | 142 | + overflow: 'hidden' |
| | 143 | + }) |
| | 144 | + .append($img2) |
| | 145 | + ;/*}}}*/ |
| | 146 | + var $hdl_holder = $('<div />')/*{{{*/ |
| | 147 | + .width(pct(100)).height(pct(100)) |
| | 148 | + .css('zIndex',320); |
| | 149 | + /*}}}*/ |
| | 150 | + var $sel = $('<div />')/*{{{*/ |
| | 151 | + .css({ |
| | 152 | + position: 'absolute', |
| | 153 | + zIndex: 300 |
| | 154 | + }) |
| | 155 | + .insertBefore($img) |
| | 156 | + .append($img_holder,$hdl_holder) |
| | 157 | + ;/*}}}*/ |
| | 158 | + |
| | 159 | + var bound = options.boundary; |
| | 160 | + var $trk = newTracker().width(boundx+(bound*2)).height(boundy+(bound*2)) |
| | 161 | + .css({ position: 'absolute', top: px(-bound), left: px(-bound), zIndex: 290 }) |
| | 162 | + .mousedown(newSelection); |
| | 163 | + |
| | 164 | + /* }}} */ |
| | 165 | + // Set more variables {{{ |
| | 166 | + |
| | 167 | + var xlimit, ylimit, xmin, ymin; |
| | 168 | + var xscale, yscale, enabled = true; |
| | 169 | + var docOffset = getPos($img), |
| | 170 | + // Internal states |
| | 171 | + btndown, lastcurs, dimmed, animating, |
| | 172 | + shift_down; |
| | 173 | + |
| | 174 | + // }}} |
| | 175 | + |
| | 176 | + |
| | 177 | + // }}} |
| | 178 | + // Internal Modules {{{ |
| | 179 | + |
| | 180 | + var Coords = function()/*{{{*/ |
| | 181 | + { |
| | 182 | + var x1 = 0, y1 = 0, x2 = 0, y2 = 0, ox, oy; |
| | 183 | + |
| | 184 | + function setPressed(pos)/*{{{*/ |
| | 185 | + { |
| | 186 | + var pos = rebound(pos); |
| | 187 | + x2 = x1 = pos[0]; |
| | 188 | + y2 = y1 = pos[1]; |
| | 189 | + }; |
| | 190 | + /*}}}*/ |
| | 191 | + function setCurrent(pos)/*{{{*/ |
| | 192 | + { |
| | 193 | + var pos = rebound(pos); |
| | 194 | + ox = pos[0] - x2; |
| | 195 | + oy = pos[1] - y2; |
| | 196 | + x2 = pos[0]; |
| | 197 | + y2 = pos[1]; |
| | 198 | + }; |
| | 199 | + /*}}}*/ |
| | 200 | + function getOffset()/*{{{*/ |
| | 201 | + { |
| | 202 | + return [ ox, oy ]; |
| | 203 | + }; |
| | 204 | + /*}}}*/ |
| | 205 | + function moveOffset(offset)/*{{{*/ |
| | 206 | + { |
| | 207 | + var ox = offset[0], oy = offset[1]; |
| | 208 | + |
| | 209 | + if (0 > x1 + ox) ox -= ox + x1; |
| | 210 | + if (0 > y1 + oy) oy -= oy + y1; |
| | 211 | + |
| | 212 | + if (boundy < y2 + oy) oy += boundy - (y2 + oy); |
| | 213 | + if (boundx < x2 + ox) ox += boundx - (x2 + ox); |
| | 214 | + |
| | 215 | + x1 += ox; |
| | 216 | + x2 += ox; |
| | 217 | + y1 += oy; |
| | 218 | + y2 += oy; |
| | 219 | + }; |
| | 220 | + /*}}}*/ |
| | 221 | + function getCorner(ord)/*{{{*/ |
| | 222 | + { |
| | 223 | + var c = getFixed(); |
| | 224 | + switch(ord) |
| | 225 | + { |
| | 226 | + case 'ne': return [ c.x2, c.y ]; |
| | 227 | + case 'nw': return [ c.x, c.y ]; |
| | 228 | + case 'se': return [ c.x2, c.y2 ]; |
| | 229 | + case 'sw': return [ c.x, c.y2 ]; |
| | 230 | + } |
| | 231 | + }; |
| | 232 | + /*}}}*/ |
| | 233 | + function getFixed()/*{{{*/ |
| | 234 | + { |
| | 235 | + if (!options.aspectRatio) return getRect(); |
| | 236 | + // This function could use some optimization I think... |
| | 237 | + var aspect = options.aspectRatio, |
| | 238 | + min_x = options.minSize[0]/xscale, |
| | 239 | + min_y = options.minSize[1]/yscale, |
| | 240 | + max_x = options.maxSize[0]/xscale, |
| | 241 | + max_y = options.maxSize[1]/yscale, |
| | 242 | + rw = x2 - x1, |
| | 243 | + rh = y2 - y1, |
| | 244 | + rwa = Math.abs(rw), |
| | 245 | + rha = Math.abs(rh), |
| | 246 | + real_ratio = rwa / rha, |
| | 247 | + xx, yy |
| | 248 | + ; |
| | 249 | + if (max_x == 0) { max_x = boundx * 10 } |
| | 250 | + if (max_y == 0) { max_y = boundy * 10 } |
| | 251 | + if (real_ratio < aspect) |
| | 252 | + { |
| | 253 | + yy = y2; |
| | 254 | + w = rha * aspect; |
| | 255 | + xx = rw < 0 ? x1 - w : w + x1; |
| | 256 | + |
| | 257 | + if (xx < 0) |
| | 258 | + { |
| | 259 | + xx = 0; |
| | 260 | + h = Math.abs((xx - x1) / aspect); |
| | 261 | + yy = rh < 0 ? y1 - h: h + y1; |
| | 262 | + } |
| | 263 | + else if (xx > boundx) |
| | 264 | + { |
| | 265 | + xx = boundx; |
| | 266 | + h = Math.abs((xx - x1) / aspect); |
| | 267 | + yy = rh < 0 ? y1 - h : h + y1; |
| | 268 | + } |
| | 269 | + } |
| | 270 | + else |
| | 271 | + { |
| | 272 | + xx = x2; |
| | 273 | + h = rwa / aspect; |
| | 274 | + yy = rh < 0 ? y1 - h : y1 + h; |
| | 275 | + if (yy < 0) |
| | 276 | + { |
| | 277 | + yy = 0; |
| | 278 | + w = Math.abs((yy - y1) * aspect); |
| | 279 | + xx = rw < 0 ? x1 - w : w + x1; |
| | 280 | + } |
| | 281 | + else if (yy > boundy) |
| | 282 | + { |
| | 283 | + yy = boundy; |
| | 284 | + w = Math.abs(yy - y1) * aspect; |
| | 285 | + xx = rw < 0 ? x1 - w : w + x1; |
| | 286 | + } |
| | 287 | + } |
| | 288 | + |
| | 289 | + // Magic %-) |
| | 290 | + if(xx > x1) { // right side |
| | 291 | + if(xx - x1 < min_x) { |
| | 292 | + xx = x1 + min_x; |
| | 293 | + } else if (xx - x1 > max_x) { |
| | 294 | + xx = x1 + max_x; |
| | 295 | + } |
| | 296 | + if(yy > y1) { |
| | 297 | + yy = y1 + (xx - x1)/aspect; |
| | 298 | + } else { |
| | 299 | + yy = y1 - (xx - x1)/aspect; |
| | 300 | + } |
| | 301 | + } else if (xx < x1) { // left side |
| | 302 | + if(x1 - xx < min_x) { |
| | 303 | + xx = x1 - min_x |
| | 304 | + } else if (x1 - xx > max_x) { |
| | 305 | + xx = x1 - max_x; |
| | 306 | + } |
| | 307 | + if(yy > y1) { |
| | 308 | + yy = y1 + (x1 - xx)/aspect; |
| | 309 | + } else { |
| | 310 | + yy = y1 - (x1 - xx)/aspect; |
| | 311 | + } |
| | 312 | + } |
| | 313 | + |
| | 314 | + if(xx < 0) { |
| | 315 | + x1 -= xx; |
| | 316 | + xx = 0; |
| | 317 | + } else if (xx > boundx) { |
| | 318 | + x1 -= xx - boundx; |
| | 319 | + xx = boundx; |
| | 320 | + } |
| | 321 | + |
| | 322 | + if(yy < 0) { |
| | 323 | + y1 -= yy; |
| | 324 | + yy = 0; |
| | 325 | + } else if (yy > boundy) { |
| | 326 | + y1 -= yy - boundy; |
| | 327 | + yy = boundy; |
| | 328 | + } |
| | 329 | + |
| | 330 | + return last = makeObj(flipCoords(x1,y1,xx,yy)); |
| | 331 | + }; |
| | 332 | + /*}}}*/ |
| | 333 | + function rebound(p)/*{{{*/ |
| | 334 | + { |
| | 335 | + if (p[0] < 0) p[0] = 0; |
| | 336 | + if (p[1] < 0) p[1] = 0; |
| | 337 | + |
| | 338 | + if (p[0] > boundx) p[0] = boundx; |
| | 339 | + if (p[1] > boundy) p[1] = boundy; |
| | 340 | + |
| | 341 | + return [ p[0], p[1] ]; |
| | 342 | + }; |
| | 343 | + /*}}}*/ |
| | 344 | + function flipCoords(x1,y1,x2,y2)/*{{{*/ |
| | 345 | + { |
| | 346 | + var xa = x1, xb = x2, ya = y1, yb = y2; |
| | 347 | + if (x2 < x1) |
| | 348 | + { |
| | 349 | + xa = x2; |
| | 350 | + xb = x1; |
| | 351 | + } |
| | 352 | + if (y2 < y1) |
| | 353 | + { |
| | 354 | + ya = y2; |
| | 355 | + yb = y1; |
| | 356 | + } |
| | 357 | + return [ Math.round(xa), Math.round(ya), Math.round(xb), Math.round(yb) ]; |
| | 358 | + }; |
| | 359 | + /*}}}*/ |
| | 360 | + function getRect()/*{{{*/ |
| | 361 | + { |
| | 362 | + var xsize = x2 - x1; |
| | 363 | + var ysize = y2 - y1; |
| | 364 | + |
| | 365 | + if (xlimit && (Math.abs(xsize) > xlimit)) |
| | 366 | + x2 = (xsize > 0) ? (x1 + xlimit) : (x1 - xlimit); |
| | 367 | + if (ylimit && (Math.abs(ysize) > ylimit)) |
| | 368 | + y2 = (ysize > 0) ? (y1 + ylimit) : (y1 - ylimit); |
| | 369 | + |
| | 370 | + if (ymin && (Math.abs(ysize) < ymin)) |
| | 371 | + y2 = (ysize > 0) ? (y1 + ymin) : (y1 - ymin); |
| | 372 | + if (xmin && (Math.abs(xsize) < xmin)) |
| | 373 | + x2 = (xsize > 0) ? (x1 + xmin) : (x1 - xmin); |
| | 374 | + |
| | 375 | + if (x1 < 0) { x2 -= x1; x1 -= x1; } |
| | 376 | + if (y1 < 0) { y2 -= y1; y1 -= y1; } |
| | 377 | + if (x2 < 0) { x1 -= x2; x2 -= x2; } |
| | 378 | + if (y2 < 0) { y1 -= y2; y2 -= y2; } |
| | 379 | + if (x2 > boundx) { var delta = x2 - boundx; x1 -= delta; x2 -= delta; } |
| | 380 | + if (y2 > boundy) { var delta = y2 - boundy; y1 -= delta; y2 -= delta; } |
| | 381 | + if (x1 > boundx) { var delta = x1 - boundy; y2 -= delta; y1 -= delta; } |
| | 382 | + if (y1 > boundy) { var delta = y1 - boundy; y2 -= delta; y1 -= delta; } |
| | 383 | + |
| | 384 | + return makeObj(flipCoords(x1,y1,x2,y2)); |
| | 385 | + }; |
| | 386 | + /*}}}*/ |
| | 387 | + function makeObj(a)/*{{{*/ |
| | 388 | + { |
| | 389 | + return { x: a[0], y: a[1], x2: a[2], y2: a[3], |
| | 390 | + w: a[2] - a[0], h: a[3] - a[1] }; |
| | 391 | + }; |
| | 392 | + /*}}}*/ |
| | 393 | + |
| | 394 | + return { |
| | 395 | + flipCoords: flipCoords, |
| | 396 | + setPressed: setPressed, |
| | 397 | + setCurrent: setCurrent, |
| | 398 | + getOffset: getOffset, |
| | 399 | + moveOffset: moveOffset, |
| | 400 | + getCorner: getCorner, |
| | 401 | + getFixed: getFixed |
| | 402 | + }; |
| | 403 | + }(); |
| | 404 | + |
| | 405 | + /*}}}*/ |
| | 406 | + var Selection = function()/*{{{*/ |
| | 407 | + { |
| | 408 | + var start, end, dragmode, awake, hdep = 370; |
| | 409 | + var borders = { }; |
| | 410 | + var handle = { }; |
| | 411 | + var seehandles = false; |
| | 412 | + var hhs = options.handleOffset; |
| | 413 | + |
| | 414 | + /* Insert draggable elements {{{*/ |
| | 415 | + |
| | 416 | + // Insert border divs for outline |
| | 417 | + if (options.drawBorders) { |
| | 418 | + borders = { |
| | 419 | + top: insertBorder('hline') |
| | 420 | + .css('top',$.browser.msie?px(-1):px(0)), |
| | 421 | + bottom: insertBorder('hline'), |
| | 422 | + left: insertBorder('vline'), |
| | 423 | + right: insertBorder('vline') |
| | 424 | + }; |
| | 425 | + } |
| | 426 | + |
| | 427 | + // Insert handles on edges |
| | 428 | + if (options.dragEdges) { |
| | 429 | + handle.t = insertDragbar('n'); |
| | 430 | + handle.b = insertDragbar('s'); |
| | 431 | + handle.r = insertDragbar('e'); |
| | 432 | + handle.l = insertDragbar('w'); |
| | 433 | + } |
| | 434 | + |
| | 435 | + // Insert side handles |
| | 436 | + options.sideHandles && |
| | 437 | + createHandles(['n','s','e','w']); |
| | 438 | + |
| | 439 | + // Insert corner handles |
| | 440 | + options.cornerHandles && |
| | 441 | + createHandles(['sw','nw','ne','se']); |
| | 442 | + |
| | 443 | + /*}}}*/ |
| | 444 | + // Private Methods |
| | 445 | + function insertBorder(type)/*{{{*/ |
| | 446 | + { |
| | 447 | + var jq = $('<div />') |
| | 448 | + .css({position: 'absolute', opacity: options.borderOpacity }) |
| | 449 | + .addClass(cssClass(type)); |
| | 450 | + $img_holder.append(jq); |
| | 451 | + return jq; |
| | 452 | + }; |
| | 453 | + /*}}}*/ |
| | 454 | + function dragDiv(ord,zi)/*{{{*/ |
| | 455 | + { |
| | 456 | + var jq = $('<div />') |
| | 457 | + .mousedown(createDragger(ord)) |
| | 458 | + .css({ |
| | 459 | + cursor: ord+'-resize', |
| | 460 | + position: 'absolute', |
| | 461 | + zIndex: zi |
| | 462 | + }) |
| | 463 | + ; |
| | 464 | + $hdl_holder.append(jq); |
| | 465 | + return jq; |
| | 466 | + }; |
| | 467 | + /*}}}*/ |
| | 468 | + function insertHandle(ord)/*{{{*/ |
| | 469 | + { |
| | 470 | + return dragDiv(ord,hdep++) |
| | 471 | + .css({ top: px(-hhs+1), left: px(-hhs+1), opacity: options.handleOpacity }) |
| | 472 | + .addClass(cssClass('handle')); |
| | 473 | + }; |
| | 474 | + /*}}}*/ |
| | 475 | + function insertDragbar(ord)/*{{{*/ |
| | 476 | + { |
| | 477 | + var s = options.handleSize, |
| | 478 | + o = hhs, |
| | 479 | + h = s, w = s, |
| | 480 | + t = o, l = o; |
| | 481 | + |
| | 482 | + switch(ord) |
| | 483 | + { |
| | 484 | + case 'n': case 's': w = pct(100); break; |
| | 485 | + case 'e': case 'w': h = pct(100); break; |
| | 486 | + } |
| | 487 | + |
| | 488 | + return dragDiv(ord,hdep++).width(w).height(h) |
| | 489 | + .css({ top: px(-t+1), left: px(-l+1)}); |
| | 490 | + }; |
| | 491 | + /*}}}*/ |
| | 492 | + function createHandles(li)/*{{{*/ |
| | 493 | + { |
| | 494 | + for(i in li) handle[li[i]] = insertHandle(li[i]); |
| | 495 | + }; |
| | 496 | + /*}}}*/ |
| | 497 | + function moveHandles(c)/*{{{*/ |
| | 498 | + { |
| | 499 | + var midvert = Math.round((c.h / 2) - hhs), |
| | 500 | + midhoriz = Math.round((c.w / 2) - hhs), |
| | 501 | + north = west = -hhs+1, |
| | 502 | + east = c.w - hhs, |
| | 503 | + south = c.h - hhs, |
| | 504 | + x, y; |
| | 505 | + |
| | 506 | + 'e' in handle && |
| | 507 | + handle.e.css({ top: px(midvert), left: px(east) }) && |
| | 508 | + handle.w.css({ top: px(midvert) }) && |
| | 509 | + handle.s.css({ top: px(south), left: px(midhoriz) }) && |
| | 510 | + handle.n.css({ left: px(midhoriz) }); |
| | 511 | + |
| | 512 | + 'ne' in handle && |
| | 513 | + handle.ne.css({ left: px(east) }) && |
| | 514 | + handle.se.css({ top: px(south), left: px(east) }) && |
| | 515 | + handle.sw.css({ top: px(south) }); |
| | 516 | + |
| | 517 | + 'b' in handle && |
| | 518 | + handle.b.css({ top: px(south) }) && |
| | 519 | + handle.r.css({ left: px(east) }); |
| | 520 | + }; |
| | 521 | + /*}}}*/ |
| | 522 | + function moveto(x,y)/*{{{*/ |
| | 523 | + { |
| | 524 | + $img2.css({ top: px(-y), left: px(-x) }); |
| | 525 | + $sel.css({ top: px(y), left: px(x) }); |
| | 526 | + }; |
| | 527 | + /*}}}*/ |
| | 528 | + function resize(w,h)/*{{{*/ |
| | 529 | + { |
| | 530 | + $sel.width(w).height(h); |
| | 531 | + }; |
| | 532 | + /*}}}*/ |
| | 533 | + function refresh()/*{{{*/ |
| | 534 | + { |
| | 535 | + var c = Coords.getFixed(); |
| | 536 | + |
| | 537 | + Coords.setPressed([c.x,c.y]); |
| | 538 | + Coords.setCurrent([c.x2,c.y2]); |
| | 539 | + |
| | 540 | + updateVisible(); |
| | 541 | + }; |
| | 542 | + /*}}}*/ |
| | 543 | + |
| | 544 | + // Internal Methods |
| | 545 | + function updateVisible()/*{{{*/ |
| | 546 | + { if (awake) return update(); }; |
| | 547 | + /*}}}*/ |
| | 548 | + function update()/*{{{*/ |
| | 549 | + { |
| | 550 | + var c = Coords.getFixed(); |
| | 551 | + |
| | 552 | + resize(c.w,c.h); |
| | 553 | + moveto(c.x,c.y); |
| | 554 | + |
| | 555 | + options.drawBorders && |
| | 556 | + borders['right'].css({ left: px(c.w-1) }) && |
| | 557 | + borders['bottom'].css({ top: px(c.h-1) }); |
| | 558 | + |
| | 559 | + seehandles && moveHandles(c); |
| | 560 | + awake || show(); |
| | 561 | + |
| | 562 | + options.onChange(unscale(c)); |
| | 563 | + }; |
| | 564 | + /*}}}*/ |
| | 565 | + function show()/*{{{*/ |
| | 566 | + { |
| | 567 | + $sel.show(); |
| | 568 | + $img.css('opacity',options.bgOpacity); |
| | 569 | + awake = true; |
| | 570 | + }; |
| | 571 | + /*}}}*/ |
| | 572 | + function release()/*{{{*/ |
| | 573 | + { |
| | 574 | + disableHandles(); |
| | 575 | + $sel.hide(); |
| | 576 | + $img.css('opacity',1); |
| | 577 | + awake = false; |
| | 578 | + }; |
| | 579 | + /*}}}*/ |
| | 580 | + function showHandles()//{{{ |
| | 581 | + { |
| | 582 | + if (seehandles) |
| | 583 | + { |
| | 584 | + moveHandles(Coords.getFixed()); |
| | 585 | + $hdl_holder.show(); |
| | 586 | + } |
| | 587 | + }; |
| | 588 | + //}}} |
| | 589 | + function enableHandles()/*{{{*/ |
| | 590 | + { |
| | 591 | + seehandles = true; |
| | 592 | + if (options.allowResize) |
| | 593 | + { |
| | 594 | + moveHandles(Coords.getFixed()); |
| | 595 | + $hdl_holder.show(); |
| | 596 | + return true; |
| | 597 | + } |
| | 598 | + }; |
| | 599 | + /*}}}*/ |
| | 600 | + function disableHandles()/*{{{*/ |
| | 601 | + { |
| | 602 | + seehandles = false; |
| | 603 | + $hdl_holder.hide(); |
| | 604 | + }; |
| | 605 | + /*}}}*/ |
| | 606 | + function animMode(v)/*{{{*/ |
| | 607 | + { |
| | 608 | + (animating = v) ? disableHandles(): enableHandles(); |
| | 609 | + }; |
| | 610 | + /*}}}*/ |
| | 611 | + function done()/*{{{*/ |
| | 612 | + { |
| | 613 | + animMode(false); |
| | 614 | + refresh(); |
| | 615 | + }; |
| | 616 | + /*}}}*/ |
| | 617 | + |
| | 618 | + var $track = newTracker().mousedown(createDragger('move')) |
| | 619 | + .css({ cursor: 'move', position: 'absolute', zIndex: 360 }) |
| | 620 | + |
| | 621 | + $img_holder.append($track); |
| | 622 | + disableHandles(); |
| | 623 | + |
| | 624 | + return { |
| | 625 | + updateVisible: updateVisible, |
| | 626 | + update: update, |
| | 627 | + release: release, |
| | 628 | + refresh: refresh, |
| | 629 | + setCursor: function (cursor) { $track.css('cursor',cursor); }, |
| | 630 | + enableHandles: enableHandles, |
| | 631 | + enableOnly: function() { seehandles = true; }, |
| | 632 | + showHandles: showHandles, |
| | 633 | + disableHandles: disableHandles, |
| | 634 | + animMode: animMode, |
| | 635 | + done: done |
| | 636 | + }; |
| | 637 | + }(); |
| | 638 | + /*}}}*/ |
| | 639 | + var Tracker = function()/*{{{*/ |
| | 640 | + { |
| | 641 | + var onMove = function() { }, |
| | 642 | + onDone = function() { }, |
| | 643 | + trackDoc = options.trackDocument; |
| | 644 | + |
| | 645 | + if (!trackDoc) |
| | 646 | + { |
| | 647 | + $trk |
| | 648 | + .mousemove(trackMove) |
| | 649 | + .mouseup(trackUp) |
| | 650 | + .mouseout(trackUp) |
| | 651 | + ; |
| | 652 | + } |
| | 653 | + |
| | 654 | + function toFront()/*{{{*/ |
| | 655 | + { |
| | 656 | + $trk.css({zIndex:450}); |
| | 657 | + if (trackDoc) |
| | 658 | + { |
| | 659 | + $(document) |
| | 660 | + .mousemove(trackMove) |
| | 661 | + .mouseup(trackUp) |
| | 662 | + ; |
| | 663 | + } |
| | 664 | + } |
| | 665 | + /*}}}*/ |
| | 666 | + function toBack()/*{{{*/ |
| | 667 | + { |
| | 668 | + $trk.css({zIndex:290}); |
| | 669 | + if (trackDoc) |
| | 670 | + { |
| | 671 | + $(document) |
| | 672 | + .unbind('mousemove',trackMove) |
| | 673 | + .unbind('mouseup',trackUp) |
| | 674 | + ; |
| | 675 | + } |
| | 676 | + } |
| | 677 | + /*}}}*/ |
| | 678 | + function trackMove(e)/*{{{*/ |
| | 679 | + { |
| | 680 | + onMove(mouseAbs(e)); |
| | 681 | + }; |
| | 682 | + /*}}}*/ |
| | 683 | + function trackUp(e)/*{{{*/ |
| | 684 | + { |
| | 685 | + e.preventDefault(); |
| | 686 | + e.stopPropagation(); |
| | 687 | + |
| | 688 | + if (btndown) |
| | 689 | + { |
| | 690 | + btndown = false; |
| | 691 | + |
| | 692 | + onDone(mouseAbs(e)); |
| | 693 | + options.onSelect(unscale(Coords.getFixed())); |
| | 694 | + toBack(); |
| | 695 | + onMove = function() { }; |
| | 696 | + onDone = function() { }; |
| | 697 | + } |
| | 698 | + |
| | 699 | + return false; |
| | 700 | + }; |
| | 701 | + /*}}}*/ |
| | 702 | + |
| | 703 | + function activateHandlers(move,done)/* {{{ */ |
| | 704 | + { |
| | 705 | + btndown = true; |
| | 706 | + onMove = move; |
| | 707 | + onDone = done; |
| | 708 | + toFront(); |
| | 709 | + return false; |
| | 710 | + }; |
| | 711 | + /* }}} */ |
| | 712 | + |
| | 713 | + function setCursor(t) { $trk.css('cursor',t); }; |
| | 714 | + |
| | 715 | + $img.before($trk); |
| | 716 | + return { |
| | 717 | + activateHandlers: activateHandlers, |
| | 718 | + setCursor: setCursor |
| | 719 | + }; |
| | 720 | + }(); |
| | 721 | + /*}}}*/ |
| | 722 | + var KeyManager = function()/*{{{*/ |
| | 723 | + { |
| | 724 | + var $keymgr = $('<input type="radio" />') |
| | 725 | + .css({ position: 'absolute', left: '-30px' }) |
| | 726 | + .keypress(parseKey) |
| | 727 | + .blur(onBlur), |
| | 728 | + |
| | 729 | + $keywrap = $('<div />') |
| | 730 | + .css({ |
| | 731 | + position: 'absolute', |
| | 732 | + overflow: 'hidden' |
| | 733 | + }) |
| | 734 | + .append($keymgr) |
| | 735 | + ; |
| | 736 | + |
| | 737 | + function watchKeys()/*{{{*/ |
| | 738 | + { |
| | 739 | + if (options.keySupport) |
| | 740 | + { |
| | 741 | + $keymgr.show(); |
| | 742 | + $keymgr.focus(); |
| | 743 | + } |
| | 744 | + }; |
| | 745 | + /*}}}*/ |
| | 746 | + function onBlur(e)/*{{{*/ |
| | 747 | + { |
| | 748 | + $keymgr.hide(); |
| | 749 | + }; |
| | 750 | + /*}}}*/ |
| | 751 | + function doNudge(e,x,y)/*{{{*/ |
| | 752 | + { |
| | 753 | + if (options.allowMove) { |
| | 754 | + Coords.moveOffset([x,y]); |
| | 755 | + Selection.updateVisible(); |
| | 756 | + }; |
| | 757 | + e.preventDefault(); |
| | 758 | + e.stopPropagation(); |
| | 759 | + }; |
| | 760 | + /*}}}*/ |
| | 761 | + function parseKey(e)/*{{{*/ |
| | 762 | + { |
| | 763 | + if (e.ctrlKey) return true; |
| | 764 | + shift_down = e.shiftKey ? true : false; |
| | 765 | + var nudge = shift_down ? 10 : 1; |
| | 766 | + switch(e.keyCode) |
| | 767 | + { |
| | 768 | + case 37: doNudge(e,-nudge,0); break; |
| | 769 | + case 39: doNudge(e,nudge,0); break; |
| | 770 | + case 38: doNudge(e,0,-nudge); break; |
| | 771 | + case 40: doNudge(e,0,nudge); break; |
| | 772 | + |
| | 773 | + case 27: Selection.release(); break; |
| | 774 | + |
| | 775 | + case 9: return true; |
| | 776 | + } |
| | 777 | + |
| | 778 | + return nothing(e); |
| | 779 | + }; |
| | 780 | + /*}}}*/ |
| | 781 | + |
| | 782 | + if (options.keySupport) $keywrap.insertBefore($img); |
| | 783 | + return { |
| | 784 | + watchKeys: watchKeys |
| | 785 | + }; |
| | 786 | + }(); |
| | 787 | + /*}}}*/ |
| | 788 | + |
| | 789 | + // }}} |
| | 790 | + // Internal Methods {{{ |
| | 791 | + |
| | 792 | + function px(n) { return '' + parseInt(n) + 'px'; }; |
| | 793 | + function pct(n) { return '' + parseInt(n) + '%'; }; |
| | 794 | + function cssClass(cl) { return options.baseClass + '-' + cl; }; |
| | 795 | + function getPos(obj)/*{{{*/ |
| | 796 | + { |
| | 797 | + // Updated in v0.9.4 to use built-in dimensions plugin |
| | 798 | + var pos = $(obj).offset(); |
| | 799 | + return [ pos.left, pos.top ]; |
| | 800 | + }; |
| | 801 | + /*}}}*/ |
| | 802 | + function mouseAbs(e)/*{{{*/ |
| | 803 | + { |
| | 804 | + return [ (e.pageX - docOffset[0]), (e.pageY - docOffset[1]) ]; |
| | 805 | + }; |
| | 806 | + /*}}}*/ |
| | 807 | + function myCursor(type)/*{{{*/ |
| | 808 | + { |
| | 809 | + if (type != lastcurs) |
| | 810 | + { |
| | 811 | + Tracker.setCursor(type); |
| | 812 | + //Handles.xsetCursor(type); |
| | 813 | + lastcurs = type; |
| | 814 | + } |
| | 815 | + }; |
| | 816 | + /*}}}*/ |
| | 817 | + function startDragMode(mode,pos)/*{{{*/ |
| | 818 | + { |
| | 819 | + docOffset = getPos($img); |
| | 820 | + Tracker.setCursor(mode=='move'?mode:mode+'-resize'); |
| | 821 | + |
| | 822 | + if (mode == 'move') |
| | 823 | + return Tracker.activateHandlers(createMover(pos), doneSelect); |
| | 824 | + |
| | 825 | + var fc = Coords.getFixed(); |
| | 826 | + var opp = oppLockCorner(mode); |
| | 827 | + var opc = Coords.getCorner(oppLockCorner(opp)); |
| | 828 | + |
| | 829 | + Coords.setPressed(Coords.getCorner(opp)); |
| | 830 | + Coords.setCurrent(opc); |
| | 831 | + |
| | 832 | + Tracker.activateHandlers(dragmodeHandler(mode,fc),doneSelect); |
| | 833 | + }; |
| | 834 | + /*}}}*/ |
| | 835 | + function dragmodeHandler(mode,f)/*{{{*/ |
| | 836 | + { |
| | 837 | + return function(pos) { |
| | 838 | + if (!options.aspectRatio) switch(mode) |
| | 839 | + { |
| | 840 | + case 'e': pos[1] = f.y2; break; |
| | 841 | + case 'w': pos[1] = f.y2; break; |
| | 842 | + case 'n': pos[0] = f.x2; break; |
| | 843 | + case 's': pos[0] = f.x2; break; |
| | 844 | + } |
| | 845 | + else switch(mode) |
| | 846 | + { |
| | 847 | + case 'e': pos[1] = f.y+1; break; |
| | 848 | + case 'w': pos[1] = f.y+1; break; |
| | 849 | + case 'n': pos[0] = f.x+1; break; |
| | 850 | + case 's': pos[0] = f.x+1; break; |
| | 851 | + } |
| | 852 | + Coords.setCurrent(pos); |
| | 853 | + Selection.update(); |
| | 854 | + }; |
| | 855 | + }; |
| | 856 | + /*}}}*/ |
| | 857 | + function createMover(pos)/*{{{*/ |
| | 858 | + { |
| | 859 | + var lloc = pos; |
| | 860 | + KeyManager.watchKeys(); |
| | 861 | + |
| | 862 | + return function(pos) |
| | 863 | + { |
| | 864 | + Coords.moveOffset([pos[0] - lloc[0], pos[1] - lloc[1]]); |
| | 865 | + lloc = pos; |
| | 866 | + |
| | 867 | + Selection.update(); |
| | 868 | + }; |
| | 869 | + }; |
| | 870 | + /*}}}*/ |
| | 871 | + function oppLockCorner(ord)/*{{{*/ |
| | 872 | + { |
| | 873 | + switch(ord) |
| | 874 | + { |
| | 875 | + case 'n': return 'sw'; |
| | 876 | + case 's': return 'nw'; |
| | 877 | + case 'e': return 'nw'; |
| | 878 | + case 'w': return 'ne'; |
| | 879 | + case 'ne': return 'sw'; |
| | 880 | + case 'nw': return 'se'; |
| | 881 | + case 'se': return 'nw'; |
| | 882 | + case 'sw': return 'ne'; |
| | 883 | + }; |
| | 884 | + }; |
| | 885 | + /*}}}*/ |
| | 886 | + function createDragger(ord)/*{{{*/ |
| | 887 | + { |
| | 888 | + return function(e) { |
| | 889 | + if (options.disabled) return false; |
| | 890 | + if ((ord == 'move') && !options.allowMove) return false; |
| | 891 | + btndown = true; |
| | 892 | + startDragMode(ord,mouseAbs(e)); |
| | 893 | + e.stopPropagation(); |
| | 894 | + e.preventDefault(); |
| | 895 | + return false; |
| | 896 | + }; |
| | 897 | + }; |
| | 898 | + /*}}}*/ |
| | 899 | + function presize($obj,w,h)/*{{{*/ |
| | 900 | + { |
| | 901 | + var nw = $obj.width(), nh = $obj.height(); |
| | 902 | + if ((nw > w) && w > 0) |
| | 903 | + { |
| | 904 | + nw = w; |
| | 905 | + nh = (w/$obj.width()) * $obj.height(); |
| | 906 | + } |
| | 907 | + if ((nh > h) && h > 0) |
| | 908 | + { |
| | 909 | + nh = h; |
| | 910 | + nw = (h/$obj.height()) * $obj.width(); |
| | 911 | + } |
| | 912 | + xscale = $obj.width() / nw; |
| | 913 | + yscale = $obj.height() / nh; |
| | 914 | + $obj.width(nw).height(nh); |
| | 915 | + }; |
| | 916 | + /*}}}*/ |
| | 917 | + function unscale(c)/*{{{*/ |
| | 918 | + { |
| | 919 | + return { |
| | 920 | + x: parseInt(c.x * xscale), y: parseInt(c.y * yscale), |
| | 921 | + x2: parseInt(c.x2 * xscale), y2: parseInt(c.y2 * yscale), |
| | 922 | + w: parseInt(c.w * xscale), h: parseInt(c.h * yscale) |
| | 923 | + }; |
| | 924 | + }; |
| | 925 | + /*}}}*/ |
| | 926 | + function doneSelect(pos)/*{{{*/ |
| | 927 | + { |
| | 928 | + var c = Coords.getFixed(); |
| | 929 | + if (c.w > options.minSelect[0] && c.h > options.minSelect[1]) |
| | 930 | + { |
| | 931 | + Selection.enableHandles(); |
| | 932 | + Selection.done(); |
| | 933 | + } |
| | 934 | + else |
| | 935 | + { |
| | 936 | + Selection.release(); |
| | 937 | + } |
| | 938 | + Tracker.setCursor( options.allowSelect?'crosshair':'default' ); |
| | 939 | + }; |
| | 940 | + /*}}}*/ |
| | 941 | + function newSelection(e)/*{{{*/ |
| | 942 | + { |
| | 943 | + if (options.disabled) return false; |
| | 944 | + if (!options.allowSelect) return false; |
| | 945 | + btndown = true; |
| | 946 | + docOffset = getPos($img); |
| | 947 | + Selection.disableHandles(); |
| | 948 | + myCursor('crosshair'); |
| | 949 | + var pos = mouseAbs(e); |
| | 950 | + Coords.setPressed(pos); |
| | 951 | + Tracker.activateHandlers(selectDrag,doneSelect); |
| | 952 | + KeyManager.watchKeys(); |
| | 953 | + Selection.update(); |
| | 954 | + |
| | 955 | + e.stopPropagation(); |
| | 956 | + e.preventDefault(); |
| | 957 | + return false; |
| | 958 | + }; |
| | 959 | + /*}}}*/ |
| | 960 | + function selectDrag(pos)/*{{{*/ |
| | 961 | + { |
| | 962 | + Coords.setCurrent(pos); |
| | 963 | + Selection.update(); |
| | 964 | + }; |
| | 965 | + /*}}}*/ |
| | 966 | + function newTracker() |
| | 967 | + { |
| | 968 | + var trk = $('<div></div>').addClass(cssClass('tracker')); |
| | 969 | + $.browser.msie && trk.css({ opacity: 0, backgroundColor: 'white' }); |
| | 970 | + return trk; |
| | 971 | + }; |
| | 972 | + |
| | 973 | + // }}} |
| | 974 | + // API methods {{{ |
| | 975 | + |
| | 976 | + function animateTo(a)/*{{{*/ |
| | 977 | + { |
| | 978 | + var x1 = a[0] / xscale, |
| | 979 | + y1 = a[1] / yscale, |
| | 980 | + x2 = a[2] / xscale, |
| | 981 | + y2 = a[3] / yscale; |
| | 982 | + |
| | 983 | + if (animating) return; |
| | 984 | + |
| | 985 | + var animto = Coords.flipCoords(x1,y1,x2,y2); |
| | 986 | + var c = Coords.getFixed(); |
| | 987 | + var animat = initcr = [ c.x, c.y, c.x2, c.y2 ]; |
| | 988 | + var interv = options.animationDelay; |
| | 989 | + |
| | 990 | + var x = animat[0]; |
| | 991 | + var y = animat[1]; |
| | 992 | + var x2 = animat[2]; |
| | 993 | + var y2 = animat[3]; |
| | 994 | + var ix1 = animto[0] - initcr[0]; |
| | 995 | + var iy1 = animto[1] - initcr[1]; |
| | 996 | + var ix2 = animto[2] - initcr[2]; |
| | 997 | + var iy2 = animto[3] - initcr[3]; |
| | 998 | + var pcent = 0; |
| | 999 | + var velocity = options.swingSpeed; |
| | 1000 | + |
| | 1001 | + Selection.animMode(true); |
| | 1002 | + |
| | 1003 | + var animator = function() |
| | 1004 | + { |
| | 1005 | + return function() |
| | 1006 | + { |
| | 1007 | + pcent += (100 - pcent) / velocity; |
| | 1008 | + |
| | 1009 | + animat[0] = x + ((pcent / 100) * ix1); |
| | 1010 | + animat[1] = y + ((pcent / 100) * iy1); |
| | 1011 | + animat[2] = x2 + ((pcent / 100) * ix2); |
| | 1012 | + animat[3] = y2 + ((pcent / 100) * iy2); |
| | 1013 | + |
| | 1014 | + if (pcent < 100) animateStart(); |
| | 1015 | + else Selection.done(); |
| | 1016 | + |
| | 1017 | + if (pcent >= 99.8) pcent = 100; |
| | 1018 | + |
| | 1019 | + setSelectRaw(animat); |
| | 1020 | + }; |
| | 1021 | + }(); |
| | 1022 | + |
| | 1023 | + function animateStart() |
| | 1024 | + { window.setTimeout(animator,interv); }; |
| | 1025 | + |
| | 1026 | + animateStart(); |
| | 1027 | + }; |
| | 1028 | + /*}}}*/ |
| | 1029 | + function setSelect(rect)//{{{ |
| | 1030 | + { |
| | 1031 | + setSelectRaw([rect[0]/xscale,rect[1]/yscale,rect[2]/xscale,rect[3]/yscale]); |
| | 1032 | + }; |
| | 1033 | + //}}} |
| | 1034 | + function setSelectRaw(l) /*{{{*/ |
| | 1035 | + { |
| | 1036 | + Coords.setPressed([l[0],l[1]]); |
| | 1037 | + Coords.setCurrent([l[2],l[3]]); |
| | 1038 | + Selection.update(); |
| | 1039 | + }; |
| | 1040 | + /*}}}*/ |
| | 1041 | + function setOptions(opt)/*{{{*/ |
| | 1042 | + { |
| | 1043 | + if (typeof(opt) != 'object') opt = { }; |
| | 1044 | + options = $.extend(options,opt); |
| | 1045 | + |
| | 1046 | + if (typeof(options.onChange)!=='function') |
| | 1047 | + options.onChange = function() { }; |
| | 1048 | + |
| | 1049 | + if (typeof(options.onSelect)!=='function') |
| | 1050 | + options.onSelect = function() { }; |
| | 1051 | + |
| | 1052 | + }; |
| | 1053 | + /*}}}*/ |
| | 1054 | + function tellSelect()/*{{{*/ |
| | 1055 | + { |
| | 1056 | + return unscale(Coords.getFixed()); |
| | 1057 | + }; |
| | 1058 | + /*}}}*/ |
| | 1059 | + function tellScaled()/*{{{*/ |
| | 1060 | + { |
| | 1061 | + return Coords.getFixed(); |
| | 1062 | + }; |
| | 1063 | + /*}}}*/ |
| | 1064 | + function setOptionsNew(opt)/*{{{*/ |
| | 1065 | + { |
| | 1066 | + setOptions(opt); |
| | 1067 | + interfaceUpdate(); |
| | 1068 | + }; |
| | 1069 | + /*}}}*/ |
| | 1070 | + function disableCrop()//{{{ |
| | 1071 | + { |
| | 1072 | + options.disabled = true; |
| | 1073 | + Selection.disableHandles(); |
| | 1074 | + Selection.setCursor('default'); |
| | 1075 | + Tracker.setCursor('default'); |
| | 1076 | + }; |
| | 1077 | + //}}} |
| | 1078 | + function enableCrop()//{{{ |
| | 1079 | + { |
| | 1080 | + options.disabled = false; |
| | 1081 | + interfaceUpdate(); |
| | 1082 | + }; |
| | 1083 | + //}}} |
| | 1084 | + function cancelCrop()//{{{ |
| | 1085 | + { |
| | 1086 | + Selection.done(); |
| | 1087 | + Tracker.activateHandlers(null,null); |
| | 1088 | + }; |
| | 1089 | + //}}} |
| | 1090 | + function destroy()//{{{ |
| | 1091 | + { |
| | 1092 | + $div.remove(); |
| | 1093 | + $origimg.show(); |
| | 1094 | + }; |
| | 1095 | + //}}} |
| | 1096 | + |
| | 1097 | + function interfaceUpdate(alt)//{{{ |
| | 1098 | + // This method tweaks the interface based on options object. |
| | 1099 | + // Called when options are changed and at end of initialization. |
| | 1100 | + { |
| | 1101 | + options.allowResize ? |
| | 1102 | + alt?Selection.enableOnly():Selection.enableHandles(): |
| | 1103 | + Selection.disableHandles(); |
| | 1104 | + |
| | 1105 | + Tracker.setCursor( options.allowSelect? 'crosshair': 'default' ); |
| | 1106 | + Selection.setCursor( options.allowMove? 'move': 'default' ); |
| | 1107 | + |
| | 1108 | + $div.css('backgroundColor',options.bgColor); |
| | 1109 | + |
| | 1110 | + if ('setSelect' in options) { |
| | 1111 | + setSelect(opt.setSelect); |
| | 1112 | + Selection.done(); |
| | 1113 | + delete(options.setSelect); |
| | 1114 | + } |
| | 1115 | + |
| | 1116 | + if ('trueSize' in options) { |
| | 1117 | + xscale = options.trueSize[0] / boundx; |
| | 1118 | + yscale = options.trueSize[1] / boundy; |
| | 1119 | + } |
| | 1120 | + |
| | 1121 | + xlimit = options.maxSize[0] || 0; |
| | 1122 | + ylimit = options.maxSize[1] || 0; |
| | 1123 | + xmin = options.minSize[0] || 0; |
| | 1124 | + ymin = options.minSize[1] || 0; |
| | 1125 | + |
| | 1126 | + if ('outerImage' in options) |
| | 1127 | + { |
| | 1128 | + $img.attr('src',options.outerImage); |
| | 1129 | + delete(options.outerImage); |
| | 1130 | + } |
| | 1131 | + |
| | 1132 | + Selection.refresh(); |
| | 1133 | + }; |
| | 1134 | + //}}} |
| | 1135 | + |
| | 1136 | + // }}} |
| | 1137 | + |
| | 1138 | + $hdl_holder.hide(); |
| | 1139 | + interfaceUpdate(true); |
| | 1140 | + |
| | 1141 | + var api = { |
| | 1142 | + animateTo: animateTo, |
| | 1143 | + setSelect: setSelect, |
| | 1144 | + setOptions: setOptionsNew, |
| | 1145 | + tellSelect: tellSelect, |
| | 1146 | + tellScaled: tellScaled, |
| | 1147 | + |
| | 1148 | + disable: disableCrop, |
| | 1149 | + enable: enableCrop, |
| | 1150 | + cancel: cancelCrop, |
| | 1151 | + |
| | 1152 | + focus: KeyManager.watchKeys, |
| | 1153 | + |
| | 1154 | + getBounds: function() { return [ boundx * xscale, boundy * yscale ]; }, |
| | 1155 | + getWidgetSize: function() { return [ boundx, boundy ]; }, |
| | 1156 | + |
| | 1157 | + release: Selection.release, |
| | 1158 | + destroy: destroy |
| | 1159 | + |
| | 1160 | + }; |
| | 1161 | + |
| | 1162 | + $origimg.data('Jcrop',api); |
| | 1163 | + return api; |
| | 1164 | +}; |
| | 1165 | + |
| | 1166 | +$.fn.Jcrop = function(options)/*{{{*/ |
| | 1167 | +{ |
| | 1168 | + function attachWhenDone(from)/*{{{*/ |
| | 1169 | + { |
| | 1170 | + var loadsrc = options.useImg || from.src; |
| | 1171 | + var img = new Image(); |
| | 1172 | + img.onload = function() { $.Jcrop(from,options); }; |
| | 1173 | + img.src = loadsrc; |
| | 1174 | + }; |
| | 1175 | + /*}}}*/ |
| | 1176 | + if (typeof(options) !== 'object') options = { }; |
| | 1177 | + |
| | 1178 | + // Iterate over each object, attach Jcrop |
| | 1179 | + this.each(function() |
| | 1180 | + { |
| | 1181 | + // If we've already attached to this object |
| | 1182 | + if ($(this).data('Jcrop')) |
| | 1183 | + { |
| | 1184 | + // The API can be requested this way (undocumented) |
| | 1185 | + if (options == 'api') return $(this).data('Jcrop'); |
| | 1186 | + // Otherwise, we just reset the options... |
| | 1187 | + else $(this).data('Jcrop').setOptions(options); |
| | 1188 | + } |
| | 1189 | + // If we haven't been attached, preload and attach |
| | 1190 | + else attachWhenDone(this); |
| | 1191 | + }); |
| | 1192 | + |
| | 1193 | + // Return "this" so we're chainable a la jQuery plugin-style! |
| | 1194 | + return this; |
| | 1195 | +}; |
| | 1196 | +/*}}}*/ |
| | 1197 | + |
| | 1198 | +})(jQuery); |
| Index: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/Jcrop/js/jquery.Jcrop.min.js |
| — | — | @@ -0,0 +1,163 @@ |
| | 2 | +/** |
| | 3 | + * Jcrop v.0.9.8 (minimized) |
| | 4 | + * (c) 2008 Kelly Hallman and DeepLiquid.com |
| | 5 | + * More information: http://deepliquid.com/content/Jcrop.html |
| | 6 | + * Released under MIT License - this header must remain with code |
| | 7 | + */ |
| | 8 | + |
| | 9 | + |
| | 10 | +(function($){$.Jcrop=function(obj,opt) |
| | 11 | +{var obj=obj,opt=opt;if(typeof(obj)!=='object')obj=$(obj)[0];if(typeof(opt)!=='object')opt={};if(!('trackDocument'in opt)) |
| | 12 | +{opt.trackDocument=$.browser.msie?false:true;if($.browser.msie&&$.browser.version.split('.')[0]=='8') |
| | 13 | +opt.trackDocument=true;} |
| | 14 | +if(!('keySupport'in opt)) |
| | 15 | +opt.keySupport=$.browser.msie?false:true;var defaults={trackDocument:false,baseClass:'jcrop',addClass:null,bgColor:'black',bgOpacity:.6,borderOpacity:.4,handleOpacity:.5,handlePad:5,handleSize:9,handleOffset:5,edgeMargin:14,aspectRatio:0,keySupport:true,cornerHandles:true,sideHandles:true,drawBorders:true,dragEdges:true,boxWidth:0,boxHeight:0,boundary:8,animationDelay:20,swingSpeed:3,allowSelect:true,allowMove:true,allowResize:true,minSelect:[0,0],maxSize:[0,0],minSize:[0,0],onChange:function(){},onSelect:function(){}};var options=defaults;setOptions(opt);var $origimg=$(obj);var $img=$origimg.clone().removeAttr('id').css({position:'absolute'});$img.width($origimg.width());$img.height($origimg.height());$origimg.after($img).hide();presize($img,options.boxWidth,options.boxHeight);var boundx=$img.width(),boundy=$img.height(),$div=$('<div />').width(boundx).height(boundy).addClass(cssClass('holder')).css({position:'relative',backgroundColor:options.bgColor}).insertAfter($origimg).append($img);;if(options.addClass)$div.addClass(options.addClass);var $img2=$('<img />').attr('src',$img.attr('src')).css('position','absolute').width(boundx).height(boundy);var $img_holder=$('<div />').width(pct(100)).height(pct(100)).css({zIndex:310,position:'absolute',overflow:'hidden'}).append($img2);var $hdl_holder=$('<div />').width(pct(100)).height(pct(100)).css('zIndex',320);var $sel=$('<div />').css({position:'absolute',zIndex:300}).insertBefore($img).append($img_holder,$hdl_holder);var bound=options.boundary;var $trk=newTracker().width(boundx+(bound*2)).height(boundy+(bound*2)).css({position:'absolute',top:px(-bound),left:px(-bound),zIndex:290}).mousedown(newSelection);var xlimit,ylimit,xmin,ymin;var xscale,yscale,enabled=true;var docOffset=getPos($img),btndown,lastcurs,dimmed,animating,shift_down;var Coords=function() |
| | 16 | +{var x1=0,y1=0,x2=0,y2=0,ox,oy;function setPressed(pos) |
| | 17 | +{var pos=rebound(pos);x2=x1=pos[0];y2=y1=pos[1];};function setCurrent(pos) |
| | 18 | +{var pos=rebound(pos);ox=pos[0]-x2;oy=pos[1]-y2;x2=pos[0];y2=pos[1];};function getOffset() |
| | 19 | +{return[ox,oy];};function moveOffset(offset) |
| | 20 | +{var ox=offset[0],oy=offset[1];if(0>x1+ox)ox-=ox+x1;if(0>y1+oy)oy-=oy+y1;if(boundy<y2+oy)oy+=boundy-(y2+oy);if(boundx<x2+ox)ox+=boundx-(x2+ox);x1+=ox;x2+=ox;y1+=oy;y2+=oy;};function getCorner(ord) |
| | 21 | +{var c=getFixed();switch(ord) |
| | 22 | +{case'ne':return[c.x2,c.y];case'nw':return[c.x,c.y];case'se':return[c.x2,c.y2];case'sw':return[c.x,c.y2];}};function getFixed() |
| | 23 | +{if(!options.aspectRatio)return getRect();var aspect=options.aspectRatio,min_x=options.minSize[0]/xscale,min_y=options.minSize[1]/yscale,max_x=options.maxSize[0]/xscale,max_y=options.maxSize[1]/yscale,rw=x2-x1,rh=y2-y1,rwa=Math.abs(rw),rha=Math.abs(rh),real_ratio=rwa/rha,xx,yy;if(max_x==0){max_x=boundx*10} |
| | 24 | +if(max_y==0){max_y=boundy*10} |
| | 25 | +if(real_ratio<aspect) |
| | 26 | +{yy=y2;w=rha*aspect;xx=rw<0?x1-w:w+x1;if(xx<0) |
| | 27 | +{xx=0;h=Math.abs((xx-x1)/aspect);yy=rh<0?y1-h:h+y1;} |
| | 28 | +else if(xx>boundx) |
| | 29 | +{xx=boundx;h=Math.abs((xx-x1)/aspect);yy=rh<0?y1-h:h+y1;}} |
| | 30 | +else |
| | 31 | +{xx=x2;h=rwa/aspect;yy=rh<0?y1-h:y1+h;if(yy<0) |
| | 32 | +{yy=0;w=Math.abs((yy-y1)*aspect);xx=rw<0?x1-w:w+x1;} |
| | 33 | +else if(yy>boundy) |
| | 34 | +{yy=boundy;w=Math.abs(yy-y1)*aspect;xx=rw<0?x1-w:w+x1;}} |
| | 35 | +if(xx>x1){if(xx-x1<min_x){xx=x1+min_x;}else if(xx-x1>max_x){xx=x1+max_x;} |
| | 36 | +if(yy>y1){yy=y1+(xx-x1)/aspect;}else{yy=y1-(xx-x1)/aspect;}}else if(xx<x1){if(x1-xx<min_x){xx=x1-min_x}else if(x1-xx>max_x){xx=x1-max_x;} |
| | 37 | +if(yy>y1){yy=y1+(x1-xx)/aspect;}else{yy=y1-(x1-xx)/aspect;}} |
| | 38 | +if(xx<0){x1-=xx;xx=0;}else if(xx>boundx){x1-=xx-boundx;xx=boundx;} |
| | 39 | +if(yy<0){y1-=yy;yy=0;}else if(yy>boundy){y1-=yy-boundy;yy=boundy;} |
| | 40 | +return last=makeObj(flipCoords(x1,y1,xx,yy));};function rebound(p) |
| | 41 | +{if(p[0]<0)p[0]=0;if(p[1]<0)p[1]=0;if(p[0]>boundx)p[0]=boundx;if(p[1]>boundy)p[1]=boundy;return[p[0],p[1]];};function flipCoords(x1,y1,x2,y2) |
| | 42 | +{var xa=x1,xb=x2,ya=y1,yb=y2;if(x2<x1) |
| | 43 | +{xa=x2;xb=x1;} |
| | 44 | +if(y2<y1) |
| | 45 | +{ya=y2;yb=y1;} |
| | 46 | +return[Math.round(xa),Math.round(ya),Math.round(xb),Math.round(yb)];};function getRect() |
| | 47 | +{var xsize=x2-x1;var ysize=y2-y1;if(xlimit&&(Math.abs(xsize)>xlimit)) |
| | 48 | +x2=(xsize>0)?(x1+xlimit):(x1-xlimit);if(ylimit&&(Math.abs(ysize)>ylimit)) |
| | 49 | +y2=(ysize>0)?(y1+ylimit):(y1-ylimit);if(ymin&&(Math.abs(ysize)<ymin)) |
| | 50 | +y2=(ysize>0)?(y1+ymin):(y1-ymin);if(xmin&&(Math.abs(xsize)<xmin)) |
| | 51 | +x2=(xsize>0)?(x1+xmin):(x1-xmin);if(x1<0){x2-=x1;x1-=x1;} |
| | 52 | +if(y1<0){y2-=y1;y1-=y1;} |
| | 53 | +if(x2<0){x1-=x2;x2-=x2;} |
| | 54 | +if(y2<0){y1-=y2;y2-=y2;} |
| | 55 | +if(x2>boundx){var delta=x2-boundx;x1-=delta;x2-=delta;} |
| | 56 | +if(y2>boundy){var delta=y2-boundy;y1-=delta;y2-=delta;} |
| | 57 | +if(x1>boundx){var delta=x1-boundy;y2-=delta;y1-=delta;} |
| | 58 | +if(y1>boundy){var delta=y1-boundy;y2-=delta;y1-=delta;} |
| | 59 | +return makeObj(flipCoords(x1,y1,x2,y2));};function makeObj(a) |
| | 60 | +{return{x:a[0],y:a[1],x2:a[2],y2:a[3],w:a[2]-a[0],h:a[3]-a[1]};};return{flipCoords:flipCoords,setPressed:setPressed,setCurrent:setCurrent,getOffset:getOffset,moveOffset:moveOffset,getCorner:getCorner,getFixed:getFixed};}();var Selection=function() |
| | 61 | +{var start,end,dragmode,awake,hdep=370;var borders={};var handle={};var seehandles=false;var hhs=options.handleOffset;if(options.drawBorders){borders={top:insertBorder('hline').css('top',$.browser.msie?px(-1):px(0)),bottom:insertBorder('hline'),left:insertBorder('vline'),right:insertBorder('vline')};} |
| | 62 | +if(options.dragEdges){handle.t=insertDragbar('n');handle.b=insertDragbar('s');handle.r=insertDragbar('e');handle.l=insertDragbar('w');} |
| | 63 | +options.sideHandles&&createHandles(['n','s','e','w']);options.cornerHandles&&createHandles(['sw','nw','ne','se']);function insertBorder(type) |
| | 64 | +{var jq=$('<div />').css({position:'absolute',opacity:options.borderOpacity}).addClass(cssClass(type));$img_holder.append(jq);return jq;};function dragDiv(ord,zi) |
| | 65 | +{var jq=$('<div />').mousedown(createDragger(ord)).css({cursor:ord+'-resize',position:'absolute',zIndex:zi});$hdl_holder.append(jq);return jq;};function insertHandle(ord) |
| | 66 | +{return dragDiv(ord,hdep++).css({top:px(-hhs+1),left:px(-hhs+1),opacity:options.handleOpacity}).addClass(cssClass('handle'));};function insertDragbar(ord) |
| | 67 | +{var s=options.handleSize,o=hhs,h=s,w=s,t=o,l=o;switch(ord) |
| | 68 | +{case'n':case's':w=pct(100);break;case'e':case'w':h=pct(100);break;} |
| | 69 | +return dragDiv(ord,hdep++).width(w).height(h).css({top:px(-t+1),left:px(-l+1)});};function createHandles(li) |
| | 70 | +{for(i in li)handle[li[i]]=insertHandle(li[i]);};function moveHandles(c) |
| | 71 | +{var midvert=Math.round((c.h/2)-hhs),midhoriz=Math.round((c.w/2)-hhs),north=west=-hhs+1,east=c.w-hhs,south=c.h-hhs,x,y;'e'in handle&&handle.e.css({top:px(midvert),left:px(east)})&&handle.w.css({top:px(midvert)})&&handle.s.css({top:px(south),left:px(midhoriz)})&&handle.n.css({left:px(midhoriz)});'ne'in handle&&handle.ne.css({left:px(east)})&&handle.se.css({top:px(south),left:px(east)})&&handle.sw.css({top:px(south)});'b'in handle&&handle.b.css({top:px(south)})&&handle.r.css({left:px(east)});};function moveto(x,y) |
| | 72 | +{$img2.css({top:px(-y),left:px(-x)});$sel.css({top:px(y),left:px(x)});};function resize(w,h) |
| | 73 | +{$sel.width(w).height(h);};function refresh() |
| | 74 | +{var c=Coords.getFixed();Coords.setPressed([c.x,c.y]);Coords.setCurrent([c.x2,c.y2]);updateVisible();};function updateVisible() |
| | 75 | +{if(awake)return update();};function update() |
| | 76 | +{var c=Coords.getFixed();resize(c.w,c.h);moveto(c.x,c.y);options.drawBorders&&borders['right'].css({left:px(c.w-1)})&&borders['bottom'].css({top:px(c.h-1)});seehandles&&moveHandles(c);awake||show();options.onChange(unscale(c));};function show() |
| | 77 | +{$sel.show();$img.css('opacity',options.bgOpacity);awake=true;};function release() |
| | 78 | +{disableHandles();$sel.hide();$img.css('opacity',1);awake=false;};function showHandles() |
| | 79 | +{if(seehandles) |
| | 80 | +{moveHandles(Coords.getFixed());$hdl_holder.show();}};function enableHandles() |
| | 81 | +{seehandles=true;if(options.allowResize) |
| | 82 | +{moveHandles(Coords.getFixed());$hdl_holder.show();return true;}};function disableHandles() |
| | 83 | +{seehandles=false;$hdl_holder.hide();};function animMode(v) |
| | 84 | +{(animating=v)?disableHandles():enableHandles();};function done() |
| | 85 | +{animMode(false);refresh();};var $track=newTracker().mousedown(createDragger('move')).css({cursor:'move',position:'absolute',zIndex:360}) |
| | 86 | +$img_holder.append($track);disableHandles();return{updateVisible:updateVisible,update:update,release:release,refresh:refresh,setCursor:function(cursor){$track.css('cursor',cursor);},enableHandles:enableHandles,enableOnly:function(){seehandles=true;},showHandles:showHandles,disableHandles:disableHandles,animMode:animMode,done:done};}();var Tracker=function() |
| | 87 | +{var onMove=function(){},onDone=function(){},trackDoc=options.trackDocument;if(!trackDoc) |
| | 88 | +{$trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);} |
| | 89 | +function toFront() |
| | 90 | +{$trk.css({zIndex:450});if(trackDoc) |
| | 91 | +{$(document).mousemove(trackMove).mouseup(trackUp);}} |
| | 92 | +function toBack() |
| | 93 | +{$trk.css({zIndex:290});if(trackDoc) |
| | 94 | +{$(document).unbind('mousemove',trackMove).unbind('mouseup',trackUp);}} |
| | 95 | +function trackMove(e) |
| | 96 | +{onMove(mouseAbs(e));};function trackUp(e) |
| | 97 | +{e.preventDefault();e.stopPropagation();if(btndown) |
| | 98 | +{btndown=false;onDone(mouseAbs(e));options.onSelect(unscale(Coords.getFixed()));toBack();onMove=function(){};onDone=function(){};} |
| | 99 | +return false;};function activateHandlers(move,done) |
| | 100 | +{btndown=true;onMove=move;onDone=done;toFront();return false;};function setCursor(t){$trk.css('cursor',t);};$img.before($trk);return{activateHandlers:activateHandlers,setCursor:setCursor};}();var KeyManager=function() |
| | 101 | +{var $keymgr=$('<input type="radio" />').css({position:'absolute',left:'-30px'}).keypress(parseKey).blur(onBlur),$keywrap=$('<div />').css({position:'absolute',overflow:'hidden'}).append($keymgr);function watchKeys() |
| | 102 | +{if(options.keySupport) |
| | 103 | +{$keymgr.show();$keymgr.focus();}};function onBlur(e) |
| | 104 | +{$keymgr.hide();};function doNudge(e,x,y) |
| | 105 | +{if(options.allowMove){Coords.moveOffset([x,y]);Selection.updateVisible();};e.preventDefault();e.stopPropagation();};function parseKey(e) |
| | 106 | +{if(e.ctrlKey)return true;shift_down=e.shiftKey?true:false;var nudge=shift_down?10:1;switch(e.keyCode) |
| | 107 | +{case 37:doNudge(e,-nudge,0);break;case 39:doNudge(e,nudge,0);break;case 38:doNudge(e,0,-nudge);break;case 40:doNudge(e,0,nudge);break;case 27:Selection.release();break;case 9:return true;} |
| | 108 | +return nothing(e);};if(options.keySupport)$keywrap.insertBefore($img);return{watchKeys:watchKeys};}();function px(n){return''+parseInt(n)+'px';};function pct(n){return''+parseInt(n)+'%';};function cssClass(cl){return options.baseClass+'-'+cl;};function getPos(obj) |
| | 109 | +{var pos=$(obj).offset();return[pos.left,pos.top];};function mouseAbs(e) |
| | 110 | +{return[(e.pageX-docOffset[0]),(e.pageY-docOffset[1])];};function myCursor(type) |
| | 111 | +{if(type!=lastcurs) |
| | 112 | +{Tracker.setCursor(type);lastcurs=type;}};function startDragMode(mode,pos) |
| | 113 | +{docOffset=getPos($img);Tracker.setCursor(mode=='move'?mode:mode+'-resize');if(mode=='move') |
| | 114 | +return Tracker.activateHandlers(createMover(pos),doneSelect);var fc=Coords.getFixed();var opp=oppLockCorner(mode);var opc=Coords.getCorner(oppLockCorner(opp));Coords.setPressed(Coords.getCorner(opp));Coords.setCurrent(opc);Tracker.activateHandlers(dragmodeHandler(mode,fc),doneSelect);};function dragmodeHandler(mode,f) |
| | 115 | +{return function(pos){if(!options.aspectRatio)switch(mode) |
| | 116 | +{case'e':pos[1]=f.y2;break;case'w':pos[1]=f.y2;break;case'n':pos[0]=f.x2;break;case's':pos[0]=f.x2;break;} |
| | 117 | +else switch(mode) |
| | 118 | +{case'e':pos[1]=f.y+1;break;case'w':pos[1]=f.y+1;break;case'n':pos[0]=f.x+1;break;case's':pos[0]=f.x+1;break;} |
| | 119 | +Coords.setCurrent(pos);Selection.update();};};function createMover(pos) |
| | 120 | +{var lloc=pos;KeyManager.watchKeys();return function(pos) |
| | 121 | +{Coords.moveOffset([pos[0]-lloc[0],pos[1]-lloc[1]]);lloc=pos;Selection.update();};};function oppLockCorner(ord) |
| | 122 | +{switch(ord) |
| | 123 | +{case'n':return'sw';case's':return'nw';case'e':return'nw';case'w':return'ne';case'ne':return'sw';case'nw':return'se';case'se':return'nw';case'sw':return'ne';};};function createDragger(ord) |
| | 124 | +{return function(e){if(options.disabled)return false;if((ord=='move')&&!options.allowMove)return false;btndown=true;startDragMode(ord,mouseAbs(e));e.stopPropagation();e.preventDefault();return false;};};function presize($obj,w,h) |
| | 125 | +{var nw=$obj.width(),nh=$obj.height();if((nw>w)&&w>0) |
| | 126 | +{nw=w;nh=(w/$obj.width())*$obj.height();} |
| | 127 | +if((nh>h)&&h>0) |
| | 128 | +{nh=h;nw=(h/$obj.height())*$obj.width();} |
| | 129 | +xscale=$obj.width()/nw;yscale=$obj.height()/nh;$obj.width(nw).height(nh);};function unscale(c) |
| | 130 | +{return{x:parseInt(c.x*xscale),y:parseInt(c.y*yscale),x2:parseInt(c.x2*xscale),y2:parseInt(c.y2*yscale),w:parseInt(c.w*xscale),h:parseInt(c.h*yscale)};};function doneSelect(pos) |
| | 131 | +{var c=Coords.getFixed();if(c.w>options.minSelect[0]&&c.h>options.minSelect[1]) |
| | 132 | +{Selection.enableHandles();Selection.done();} |
| | 133 | +else |
| | 134 | +{Selection.release();} |
| | 135 | +Tracker.setCursor(options.allowSelect?'crosshair':'default');};function newSelection(e) |
| | 136 | +{if(options.disabled)return false;if(!options.allowSelect)return false;btndown=true;docOffset=getPos($img);Selection.disableHandles();myCursor('crosshair');var pos=mouseAbs(e);Coords.setPressed(pos);Tracker.activateHandlers(selectDrag,doneSelect);KeyManager.watchKeys();Selection.update();e.stopPropagation();e.preventDefault();return false;};function selectDrag(pos) |
| | 137 | +{Coords.setCurrent(pos);Selection.update();};function newTracker() |
| | 138 | +{var trk=$('<div></div>').addClass(cssClass('tracker'));$.browser.msie&&trk.css({opacity:0,backgroundColor:'white'});return trk;};function animateTo(a) |
| | 139 | +{var x1=a[0]/xscale,y1=a[1]/yscale,x2=a[2]/xscale,y2=a[3]/yscale;if(animating)return;var animto=Coords.flipCoords(x1,y1,x2,y2);var c=Coords.getFixed();var animat=initcr=[c.x,c.y,c.x2,c.y2];var interv=options.animationDelay;var x=animat[0];var y=animat[1];var x2=animat[2];var y2=animat[3];var ix1=animto[0]-initcr[0];var iy1=animto[1]-initcr[1];var ix2=animto[2]-initcr[2];var iy2=animto[3]-initcr[3];var pcent=0;var velocity=options.swingSpeed;Selection.animMode(true);var animator=function() |
| | 140 | +{return function() |
| | 141 | +{pcent+=(100-pcent)/velocity;animat[0]=x+((pcent/100)*ix1);animat[1]=y+((pcent/100)*iy1);animat[2]=x2+((pcent/100)*ix2);animat[3]=y2+((pcent/100)*iy2);if(pcent<100)animateStart();else Selection.done();if(pcent>=99.8)pcent=100;setSelectRaw(animat);};}();function animateStart() |
| | 142 | +{window.setTimeout(animator,interv);};animateStart();};function setSelect(rect) |
| | 143 | +{setSelectRaw([rect[0]/xscale,rect[1]/yscale,rect[2]/xscale,rect[3]/yscale]);};function setSelectRaw(l) |
| | 144 | +{Coords.setPressed([l[0],l[1]]);Coords.setCurrent([l[2],l[3]]);Selection.update();};function setOptions(opt) |
| | 145 | +{if(typeof(opt)!='object')opt={};options=$.extend(options,opt);if(typeof(options.onChange)!=='function') |
| | 146 | +options.onChange=function(){};if(typeof(options.onSelect)!=='function') |
| | 147 | +options.onSelect=function(){};};function tellSelect() |
| | 148 | +{return unscale(Coords.getFixed());};function tellScaled() |
| | 149 | +{return Coords.getFixed();};function setOptionsNew(opt) |
| | 150 | +{setOptions(opt);interfaceUpdate();};function disableCrop() |
| | 151 | +{options.disabled=true;Selection.disableHandles();Selection.setCursor('default');Tracker.setCursor('default');};function enableCrop() |
| | 152 | +{options.disabled=false;interfaceUpdate();};function cancelCrop() |
| | 153 | +{Selection.done();Tracker.activateHandlers(null,null);};function destroy() |
| | 154 | +{$div.remove();$origimg.show();};function interfaceUpdate(alt) |
| | 155 | +{options.allowResize?alt?Selection.enableOnly():Selection.enableHandles():Selection.disableHandles();Tracker.setCursor(options.allowSelect?'crosshair':'default');Selection.setCursor(options.allowMove?'move':'default');$div.css('backgroundColor',options.bgColor);if('setSelect'in options){setSelect(opt.setSelect);Selection.done();delete(options.setSelect);} |
| | 156 | +if('trueSize'in options){xscale=options.trueSize[0]/boundx;yscale=options.trueSize[1]/boundy;} |
| | 157 | +xlimit=options.maxSize[0]||0;ylimit=options.maxSize[1]||0;xmin=options.minSize[0]||0;ymin=options.minSize[1]||0;if('outerImage'in options) |
| | 158 | +{$img.attr('src',options.outerImage);delete(options.outerImage);} |
| | 159 | +Selection.refresh();};$hdl_holder.hide();interfaceUpdate(true);var api={animateTo:animateTo,setSelect:setSelect,setOptions:setOptionsNew,tellSelect:tellSelect,tellScaled:tellScaled,disable:disableCrop,enable:enableCrop,cancel:cancelCrop,focus:KeyManager.watchKeys,getBounds:function(){return[boundx*xscale,boundy*yscale];},getWidgetSize:function(){return[boundx,boundy];},release:Selection.release,destroy:destroy};$origimg.data('Jcrop',api);return api;};$.fn.Jcrop=function(options) |
| | 160 | +{function attachWhenDone(from) |
| | 161 | +{var loadsrc=options.useImg||from.src;var img=new Image();img.onload=function(){$.Jcrop(from,options);};img.src=loadsrc;};if(typeof(options)!=='object')options={};this.each(function() |
| | 162 | +{if($(this).data('Jcrop')) |
| | 163 | +{if(options=='api')return $(this).data('Jcrop');else $(this).data('Jcrop').setOptions(options);} |
| | 164 | +else attachWhenDone(this);});return this;};})(jQuery); |
| \ No newline at end of file |
| Index: branches/new-upload/phase3/js2/mwEmbed/php/jsAutoloadLocalClasses.php |
| — | — | @@ -18,10 +18,15 @@ |
| 19 | 19 | |
| 20 | 20 | $wgJSAutoloadLocalClasses['j.fn.autocomplete'] = $wgMwEmbedDirectory . 'jquery/plugins/jquery.autocomplete.js'; |
| 21 | 21 | $wgJSAutoloadLocalClasses['j.fn.hoverIntent'] = $wgMwEmbedDirectory . 'jquery/plugins/jquery.hoverIntent.js'; |
| 22 | | - $wgJSAutoloadLocalClasses['j.Jcrop'] = $wgMwEmbedDirectory . 'jquery/plugins/Jcrop/js/jquery.Jcrop.js'; |
| 23 | 22 | $wgJSAutoloadLocalClasses['Date.fromString'] = $wgMwEmbedDirectory . 'jquery/plugins/date.js'; |
| 24 | 23 | $wgJSAutoloadLocalClasses['j.fn.datePicker'] = $wgMwEmbedDirectory . 'jquery/plugins/jquery.datePicker.js'; |
| 25 | 24 | |
| | 25 | + //jcrop |
| | 26 | + $wgJSAutoloadLocalClasses['j.Jcrop'] = $wgMwEmbedDirectory . 'libClipEdit/Jcrop/js/jquery.Jcrop.js'; |
| | 27 | + |
| | 28 | + //color picker |
| | 29 | + $wgJSAutoloadLocalClasses['j.fn.ColorPicker'] = $wgMwEmbedDirectory . 'libClipEdit/colorpicker/js/colorpicker.js'; |
| | 30 | + |
| 26 | 31 | //jquery.ui |
| 27 | 32 | $wgJSAutoloadLocalClasses['j.ui'] = $wgMwEmbedDirectory . 'jquery/jquery.ui-1.7.1/ui/ui.core.js'; |
| 28 | 33 | |
| Index: branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/images/Jcrop.gif |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/images/Jcrop.gif |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 29 | 34 | + application/octet-stream |
| Index: branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css |
| — | — | @@ -699,3 +699,53 @@ |
| 700 | 700 | .ui-dialog .ui-dialog-buttonpane button { float: left !important; } |
| 701 | 701 | |
| 702 | 702 | .ui-widget-content a { text-decoration: underline; } |
| | 703 | + |
| | 704 | + |
| | 705 | + |
| | 706 | + |
| | 707 | +/* jCROP css:*/ |
| | 708 | +.jcrop-holder |
| | 709 | +{ |
| | 710 | + text-align: left; |
| | 711 | +} |
| | 712 | + |
| | 713 | +.jcrop-vline, .jcrop-hline |
| | 714 | +{ |
| | 715 | + font-size: 0; |
| | 716 | + position: absolute; |
| | 717 | + background: white url('images/Jcrop.gif') top left repeat; |
| | 718 | + /* |
| | 719 | + opacity: .5; |
| | 720 | + *filter:alpha(opacity=50); |
| | 721 | + */ |
| | 722 | +} |
| | 723 | +.jcrop-vline { height: 100%; width: 1px !important; } |
| | 724 | +.jcrop-hline { width: 100%; height: 1px !important; } |
| | 725 | +.jcrop-handle { |
| | 726 | + font-size: 1px; |
| | 727 | + width: 7px !important; |
| | 728 | + height: 7px !important; |
| | 729 | + border: 1px #eee solid; |
| | 730 | + background-color: #333; |
| | 731 | + *width: 9px; |
| | 732 | + *height: 9px; |
| | 733 | +} |
| | 734 | + |
| | 735 | +.jcrop-tracker { |
| | 736 | + *background-color: gray; |
| | 737 | + width: 100%; height: 100%; |
| | 738 | +} |
| | 739 | + |
| | 740 | +.custom .jcrop-vline, |
| | 741 | +.custom .jcrop-hline |
| | 742 | +{ |
| | 743 | + background: yellow; |
| | 744 | +} |
| | 745 | +.custom .jcrop-handle |
| | 746 | +{ |
| | 747 | + border-color: black; |
| | 748 | + background-color: #C7BB00; |
| | 749 | + -moz-border-radius: 3px; |
| | 750 | + -webkit-border-radius: 3px; |
| | 751 | +} |
| | 752 | + |
| Index: branches/new-upload/phase3/js2/mwEmbed/mv_embed.js |
| — | — | @@ -123,8 +123,7 @@ |
| 124 | 124 | } |
| 125 | 125 | var cat = mvClassPaths; |
| 126 | 126 | } |
| 127 | | -function mvGetClassPath(k){ |
| 128 | | - var cat = mvClassPaths; |
| | 127 | +function mvGetClassPath(k){ |
| 129 | 128 | if( mvClassPaths[k] ){ |
| 130 | 129 | //js_log('got classpath:' + k + ' : '+ mvClassPaths[k]); |
| 131 | 130 | return mvClassPaths[k]; |
| — | — | @@ -132,6 +131,14 @@ |
| 133 | 132 | return js_error('could not find path for requested class ' + k ); |
| 134 | 133 | } |
| 135 | 134 | } |
| | 135 | +if(typeof mvCssPaths == 'undefined') |
| | 136 | + mvCssPaths = {}; |
| | 137 | + |
| | 138 | +function lcCssPath(cssSet){ |
| | 139 | + for(var i in cssSet){ |
| | 140 | + mvCssPaths[i]= mv_embed_path + cssSet[i]; |
| | 141 | + } |
| | 142 | +} |
| 136 | 143 | //core and (non-standard named files relative to class the init): |
| 137 | 144 | lcPaths('',{ |
| 138 | 145 | 'mv_embed' : 'mv_embed.js', |
| — | — | @@ -140,14 +147,15 @@ |
| 141 | 148 | '$j.fn.autocomplete': 'jquery/plugins/jquery.autocomplete.js', |
| 142 | 149 | '$j.fn.hoverIntent' : 'jquery/plugins/jquery.hoverIntent.js', |
| 143 | 150 | '$j.fn.datePicker' : 'jquery/plugins/jquery.datePicker.js', |
| 144 | | - '$j.ui' : 'jquery/jquery.ui-1.7.1/ui/ui.core.js' |
| | 151 | + '$j.ui' : 'jquery/jquery.ui-1.7.1/ui/ui.core.js', |
| | 152 | + '$j.fn.ColorPicker' : 'libClipEdit/colorpicker/js/colorpicker.js', |
| | 153 | + '$j.Jcrop' : 'libClipEdit/Jcrop/js/jquery.Jcrop.js' |
| 145 | 154 | }); |
| 146 | 155 | //query plugins |
| 147 | 156 | lcPaths( 'jquery/plugins/', [ |
| 148 | 157 | '$j.secureEvalJSON', |
| 149 | 158 | '$j.cookie', |
| 150 | | - '$j.contextMenu', |
| 151 | | - '$j.Jcrop' |
| | 159 | + '$j.contextMenu', |
| 152 | 160 | ]); |
| 153 | 161 | //jquery ui |
| 154 | 162 | lcPaths('jquery/jquery.ui-1.7.1/ui/', [ |
| — | — | @@ -219,6 +227,11 @@ |
| 220 | 228 | 'mvTextInterface' |
| 221 | 229 | ]); |
| 222 | 230 | |
| | 231 | +//depencency mapping for css files for self contained included plugins: |
| | 232 | +lcCssPath({ |
| | 233 | + '$j.Jcrop' : 'libClipEdit/jCrop/css/jquery.Jcrop.css', |
| | 234 | + '$j.fn.ColorPicker': 'libClipEdit/colorpicker/css/colorpicker.css' |
| | 235 | +}) |
| 223 | 236 | |
| 224 | 237 | /** |
| 225 | 238 | * Language Functions: |
| — | — | @@ -346,8 +359,9 @@ |
| 347 | 360 | cur_path: null, |
| 348 | 361 | missing_path : null, |
| 349 | 362 | doLoad:function(loadLibs, callback){ |
| 350 | | - this.ctime++; |
| 351 | | - if( loadLibs && loadLibs.length!=0 ){ //setup this.libs: |
| | 363 | + this.ctime++; |
| | 364 | + if( loadLibs && loadLibs.length!=0 ){ //setup this.libs: |
| | 365 | + |
| 352 | 366 | //first check if we already have this lib loaded |
| 353 | 367 | var all_libs_loaded=true; |
| 354 | 368 | for(var i=0; i< loadLibs.length; i++){ |
| — | — | @@ -360,7 +374,14 @@ |
| 361 | 375 | js_log('all libs already loaded skipping... load req'); |
| 362 | 376 | callback(); |
| 363 | 377 | return ; |
| 364 | | - } |
| | 378 | + } |
| | 379 | + //do a check for any css we may need and get it: |
| | 380 | + for(var i=0; i< loadLibs.length; i++){ |
| | 381 | + if( typeof mvCssPaths[ loadLibs[i] ] != 'undefined' ){ |
| | 382 | + loadExternalCss( mvCssPaths[ loadLibs[i] ]); |
| | 383 | + } |
| | 384 | + } |
| | 385 | + |
| 365 | 386 | //check if we should use the script loader to combine all the requests into one: |
| 366 | 387 | if( typeof mwSlScript != 'undefined' ){ |
| 367 | 388 | var class_set = ''; |
| — | — | @@ -456,7 +477,10 @@ |
| 457 | 478 | var i=null; |
| 458 | 479 | for(var i in this.libs){ //for in loop oky on object |
| 459 | 480 | if( ! this.checkObjPath( i ) ){ |
| 460 | | - if(!this.libreq[i]) loadExternalJs( this.libs[i] ); |
| | 481 | + if(!this.libreq[i]){ |
| | 482 | + loadExternalJs( this.libs[i] ); |
| | 483 | + } |
| | 484 | + |
| 461 | 485 | this.libreq[i]=1; |
| 462 | 486 | //js_log("has not yet loaded: " + i); |
| 463 | 487 | loading=1; |
| — | — | @@ -762,6 +786,7 @@ |
| 763 | 787 | 'mvPlayList', |
| 764 | 788 | '$j.ui', |
| 765 | 789 | '$j.contextMenu', |
| | 790 | + '$j.secureEvalJSON', |
| 766 | 791 | 'mvSequencer' |
| 767 | 792 | ], |
| 768 | 793 | [ |
| Index: branches/new-upload/phase3/js2/mwEmbed/jquery/plugins/jquery.Jcrop.js |
| — | — | @@ -1,1107 +0,0 @@ |
| 2 | | -/** |
| 3 | | - * jquery.Jcrop.js v0.9.5 |
| 4 | | - * jQuery Image Cropping Plugin |
| 5 | | - * @author Kelly Hallman <khallman@wrack.org> |
| 6 | | - * Copyright (c) 2008 Kelly Hallman - released under MIT License {{{ |
| 7 | | - * |
| 8 | | - * Permission is hereby granted, free of charge, to any person |
| 9 | | - * obtaining a copy of this software and associated documentation |
| 10 | | - * files (the "Software"), to deal in the Software without |
| 11 | | - * restriction, including without limitation the rights to use, |
| 12 | | - * copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 13 | | - * copies of the Software, and to permit persons to whom the |
| 14 | | - * Software is furnished to do so, subject to the following |
| 15 | | - * conditions: |
| 16 | | - |
| 17 | | - * The above copyright notice and this permission notice shall be |
| 18 | | - * included in all copies or substantial portions of the Software. |
| 19 | | - |
| 20 | | - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
| 21 | | - * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES |
| 22 | | - * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
| 23 | | - * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT |
| 24 | | - * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, |
| 25 | | - * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
| 26 | | - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR |
| 27 | | - * OTHER DEALINGS IN THE SOFTWARE. |
| 28 | | - |
| 29 | | - * }}} |
| 30 | | - */ |
| 31 | | -(function($){ |
| 32 | | - |
| 33 | | -$.Jcrop = function(obj,opt) |
| 34 | | -{ |
| 35 | | - // Initialization {{{ |
| 36 | | - |
| 37 | | - // Sanitize some options {{{ |
| 38 | | - var obj = obj, opt = opt; |
| 39 | | - |
| 40 | | - if (typeof(obj) !== 'object') obj = $(obj)[0]; |
| 41 | | - if (typeof(opt) !== 'object') opt = { }; |
| 42 | | - |
| 43 | | - if (!('trackDocument' in opt)) |
| 44 | | - opt.trackDocument = $.browser.msie ? false : true; |
| 45 | | - |
| 46 | | - if (!('keySupport' in opt)) |
| 47 | | - opt.keySupport = $.browser.msie ? false : true; |
| 48 | | - |
| 49 | | - // }}} |
| 50 | | - // Extend the default options {{{ |
| 51 | | - var defaults = { |
| 52 | | - |
| 53 | | - // Basic Settings |
| 54 | | - trackDocument: false, |
| 55 | | - baseClass: 'jcrop', |
| 56 | | - addClass: null, |
| 57 | | - |
| 58 | | - // Styling Options |
| 59 | | - bgColor: 'black', |
| 60 | | - bgOpacity: .6, |
| 61 | | - borderOpacity: .4, |
| 62 | | - handleOpacity: .5, |
| 63 | | - |
| 64 | | - handlePad: 5, |
| 65 | | - handleSize: 9, |
| 66 | | - handleOffset: 5, |
| 67 | | - edgeMargin: 14, |
| 68 | | - |
| 69 | | - aspectRatio: 0, |
| 70 | | - keySupport: true, |
| 71 | | - cornerHandles: true, |
| 72 | | - sideHandles: true, |
| 73 | | - drawBorders: true, |
| 74 | | - dragEdges: true, |
| 75 | | - |
| 76 | | - boxWidth: 0, |
| 77 | | - boxHeight: 0, |
| 78 | | - |
| 79 | | - boundary: 8, |
| 80 | | - animationDelay: 20, |
| 81 | | - swingSpeed: 3, |
| 82 | | - |
| 83 | | - watchShift: false, |
| 84 | | - minSelect: [ 0, 0 ], |
| 85 | | - maxSize: [ 0, 0 ], |
| 86 | | - minSize: [ 0, 0 ], |
| 87 | | - |
| 88 | | - // Callbacks / Event Handlers |
| 89 | | - onChange: function() { }, |
| 90 | | - onSelect: function() { } |
| 91 | | - |
| 92 | | - }; |
| 93 | | - var options = defaults; |
| 94 | | - setOptions(opt); |
| 95 | | - |
| 96 | | - |
| 97 | | - // }}} |
| 98 | | - // Initialize some jQuery objects {{{ |
| 99 | | - |
| 100 | | - var scrollParent = $(obj).parent(); |
| 101 | | - js_log('Initialize: current parent offset: ' + scrollParent.scrollTop() ); |
| 102 | | - |
| 103 | | - var $img = $(obj).css({ position: 'absolute' }); |
| 104 | | - |
| 105 | | - presize($img,options.boxWidth,options.boxHeight); |
| 106 | | - |
| 107 | | - var boundx = $img.width(), |
| 108 | | - boundy = $img.height(), |
| 109 | | - |
| 110 | | - $div = $('<div />') |
| 111 | | - .width(boundx).height(boundy) |
| 112 | | - .addClass(cssClass('holder')) |
| 113 | | - .css({ |
| 114 | | - position: 'relative', |
| 115 | | - //overflow: 'hidden', |
| 116 | | - backgroundColor: options.bgColor |
| 117 | | - }) |
| 118 | | - ; |
| 119 | | - |
| 120 | | - if (options.addClass) $div.addClass(options.addClass); |
| 121 | | - $img.wrap($div); |
| 122 | | - |
| 123 | | - var $img2 = $('<img />')/*{{{*/ |
| 124 | | - .attr('src',$img.attr('src')) |
| 125 | | - .css('position','absolute') |
| 126 | | - .width(boundx).height(boundy) |
| 127 | | - ;/*}}}*/ |
| 128 | | - var $img_holder = $('<div />')/*{{{*/ |
| 129 | | - .width(pct(100)).height(pct(100)) |
| 130 | | - .css({ |
| 131 | | - zIndex: 310, |
| 132 | | - position: 'absolute', |
| 133 | | - overflow: 'hidden' |
| 134 | | - }) |
| 135 | | - .append($img2) |
| 136 | | - ;/*}}}*/ |
| 137 | | - var $hdl_holder = $('<div />')/*{{{*/ |
| 138 | | - .width(pct(100)).height(pct(100)) |
| 139 | | - .css({ |
| 140 | | - zIndex: 320 |
| 141 | | - //position: 'absolute' |
| 142 | | - }) |
| 143 | | - ;/*}}}*/ |
| 144 | | - var $sel = $('<div />')/*{{{*/ |
| 145 | | - .css({ |
| 146 | | - position: 'absolute', |
| 147 | | - zIndex: 300 |
| 148 | | - }) |
| 149 | | - .insertBefore($img) |
| 150 | | - .append($img_holder,$hdl_holder) |
| 151 | | - ;/*}}}*/ |
| 152 | | - |
| 153 | | - js_log('pre Setup trk: current parent offset: ' + scrollParent.scrollTop() ); |
| 154 | | - var bound = options.boundary; |
| 155 | | - var $trk = $('<div />') |
| 156 | | - .addClass(cssClass('tracker')) |
| 157 | | - .width(boundx+(bound*2)) |
| 158 | | - .height(boundy+(bound*2)) |
| 159 | | - .css({ |
| 160 | | - position: 'absolute', |
| 161 | | - top: px(-bound), |
| 162 | | - left: px(-bound), |
| 163 | | - zIndex: 290, |
| 164 | | - opacity: 0 |
| 165 | | - }) |
| 166 | | - .mousedown(newSelection) |
| 167 | | - ; |
| 168 | | - |
| 169 | | - /* }}} */ |
| 170 | | - // Set more variables {{{ |
| 171 | | - |
| 172 | | - var xscale, yscale; |
| 173 | | - var docOffset = getPos(obj), |
| 174 | | - // Internal states |
| 175 | | - btndown, aspectLock, lastcurs, dimmed, animating, |
| 176 | | - shift_down; |
| 177 | | - |
| 178 | | - // }}} |
| 179 | | - if ('trueSize' in options)/*{{{*/ |
| 180 | | - { |
| 181 | | - xscale = options.trueSize[0] / boundx; |
| 182 | | - yscale = options.trueSize[1] / boundy; |
| 183 | | - } |
| 184 | | - /*}}}*/ |
| 185 | | - |
| 186 | | - // }}} |
| 187 | | - // Internal Modules {{{ |
| 188 | | - |
| 189 | | - var Coords = function()/*{{{*/ |
| 190 | | - { |
| 191 | | - var x1 = 0, y1 = 0, x2 = 0, y2 = 0, ox, oy; |
| 192 | | - |
| 193 | | - function setPressed(pos)/*{{{*/ |
| 194 | | - { |
| 195 | | - var pos = rebound(pos); |
| 196 | | - x2 = x1 = pos[0]; |
| 197 | | - y2 = y1 = pos[1]; |
| 198 | | - }; |
| 199 | | - /*}}}*/ |
| 200 | | - function setCurrent(pos)/*{{{*/ |
| 201 | | - { |
| 202 | | - var pos = rebound(pos); |
| 203 | | - ox = pos[0] - x2; |
| 204 | | - oy = pos[1] - y2; |
| 205 | | - x2 = pos[0]; |
| 206 | | - y2 = pos[1]; |
| 207 | | - }; |
| 208 | | - /*}}}*/ |
| 209 | | - function getOffset()/*{{{*/ |
| 210 | | - { |
| 211 | | - return [ ox, oy ]; |
| 212 | | - }; |
| 213 | | - /*}}}*/ |
| 214 | | - function moveOffset(offset)/*{{{*/ |
| 215 | | - { |
| 216 | | - var ox = offset[0], oy = offset[1]; |
| 217 | | - |
| 218 | | - if (0 > x1 + ox) ox -= ox + x1; |
| 219 | | - if (0 > y1 + oy) oy -= oy + y1; |
| 220 | | - |
| 221 | | - if (boundy < y2 + oy) oy += boundy - (y2 + oy); |
| 222 | | - if (boundx < x2 + ox) ox += boundx - (x2 + ox); |
| 223 | | - |
| 224 | | - x1 += ox; |
| 225 | | - x2 += ox; |
| 226 | | - y1 += oy; |
| 227 | | - y2 += oy; |
| 228 | | - }; |
| 229 | | - /*}}}*/ |
| 230 | | - function getCorner(ord)/*{{{*/ |
| 231 | | - { |
| 232 | | - var c = getFixed(); |
| 233 | | - switch(ord) |
| 234 | | - { |
| 235 | | - case 'ne': return [ c.x2, c.y ]; |
| 236 | | - case 'nw': return [ c.x, c.y ]; |
| 237 | | - case 'se': return [ c.x2, c.y2 ]; |
| 238 | | - case 'sw': return [ c.x, c.y2 ]; |
| 239 | | - } |
| 240 | | - }; |
| 241 | | - /*}}}*/ |
| 242 | | - function getFixed()/*{{{*/ |
| 243 | | - { |
| 244 | | - if (!options.aspectRatio && !aspectLock) return getRect(); |
| 245 | | - |
| 246 | | - // This function could use some optimization I think... |
| 247 | | - var aspect = options.aspectRatio ? options.aspectRatio : aspectLock, |
| 248 | | - min = options.minSize, |
| 249 | | - max = options.maxSize, |
| 250 | | - rw = x2 - x1, |
| 251 | | - rh = y2 - y1, |
| 252 | | - rwa = Math.abs(rw), |
| 253 | | - rha = Math.abs(rh), |
| 254 | | - real_ratio = rwa / rha, |
| 255 | | - xx, yy |
| 256 | | - ; |
| 257 | | - |
| 258 | | - if (real_ratio < aspect) |
| 259 | | - { |
| 260 | | - yy = y2; |
| 261 | | - w = rha * aspect; |
| 262 | | - xx = rw < 0 ? x1 - w : w + x1; |
| 263 | | - |
| 264 | | - if (xx < 0) |
| 265 | | - { |
| 266 | | - xx = 0; |
| 267 | | - h = Math.abs((xx - x1) / aspect); |
| 268 | | - yy = rh < 0 ? y1 - h: h + y1; |
| 269 | | - } |
| 270 | | - else if (xx > boundx) |
| 271 | | - { |
| 272 | | - xx = boundx; |
| 273 | | - h = Math.abs((xx - x1) / aspect); |
| 274 | | - yy = rh < 0 ? y1 - h : h + y1; |
| 275 | | - } |
| 276 | | - } |
| 277 | | - else |
| 278 | | - { |
| 279 | | - xx = x2; |
| 280 | | - h = rwa / aspect; |
| 281 | | - yy = rh < 0 ? y1 - h : y1 + h; |
| 282 | | - if (yy < 0) |
| 283 | | - { |
| 284 | | - yy = 0; |
| 285 | | - w = Math.abs((yy - y1) * aspect); |
| 286 | | - xx = rw < 0 ? x1 - w : w + x1; |
| 287 | | - } |
| 288 | | - else if (yy > boundy) |
| 289 | | - { |
| 290 | | - yy = boundy; |
| 291 | | - w = Math.abs(yy - y1) * aspect; |
| 292 | | - xx = rw < 0 ? x1 - w : w + x1; |
| 293 | | - } |
| 294 | | - } |
| 295 | | - return last = makeObj(flipCoords(x1,y1,xx,yy)); |
| 296 | | - }; |
| 297 | | - /*}}}*/ |
| 298 | | - function rebound(p)/*{{{*/ |
| 299 | | - { |
| 300 | | - if (p[0] < 0) p[0] = 0; |
| 301 | | - if (p[1] < 0) p[1] = 0; |
| 302 | | - |
| 303 | | - if (p[0] > boundx) p[0] = boundx; |
| 304 | | - if (p[1] > boundy) p[1] = boundy; |
| 305 | | - |
| 306 | | - return [ p[0], p[1] ]; |
| 307 | | - }; |
| 308 | | - /*}}}*/ |
| 309 | | - function flipCoords(x1,y1,x2,y2)/*{{{*/ |
| 310 | | - { |
| 311 | | - var xa = x1, xb = x2, ya = y1, yb = y2; |
| 312 | | - if (x2 < x1) |
| 313 | | - { |
| 314 | | - xa = x2; |
| 315 | | - xb = x1; |
| 316 | | - } |
| 317 | | - if (y2 < y1) |
| 318 | | - { |
| 319 | | - ya = y2; |
| 320 | | - yb = y1; |
| 321 | | - } |
| 322 | | - return [ Math.round(xa), Math.round(ya), Math.round(xb), Math.round(yb) ]; |
| 323 | | - }; |
| 324 | | - /*}}}*/ |
| 325 | | - function getRect()/*{{{*/ |
| 326 | | - { |
| 327 | | - var xsize = x2 - x1; |
| 328 | | - var ysize = y2 - y1; |
| 329 | | - |
| 330 | | - if (xlimit && (Math.abs(xsize) > xlimit)) |
| 331 | | - x2 = (xsize > 0) ? (x1 + xlimit) : (x1 - xlimit); |
| 332 | | - if (ylimit && (Math.abs(ysize) > ylimit)) |
| 333 | | - y2 = (ysize > 0) ? (y1 + ylimit) : (y1 - ylimit); |
| 334 | | - |
| 335 | | - if (ymin && (Math.abs(ysize) < ymin)) |
| 336 | | - y2 = (ysize > 0) ? (y1 + ymin) : (y1 - ymin); |
| 337 | | - if (xmin && (Math.abs(xsize) < xmin)) |
| 338 | | - x2 = (xsize > 0) ? (x1 + xmin) : (x1 - xmin); |
| 339 | | - |
| 340 | | - if (x1 < 0) { x2 -= x1; x1 -= x1; } |
| 341 | | - if (y1 < 0) { y2 -= y1; y1 -= y1; } |
| 342 | | - if (x2 < 0) { x1 -= x2; x2 -= x2; } |
| 343 | | - if (y2 < 0) { y1 -= y2; y2 -= y2; } |
| 344 | | - if (x2 > boundx) { var delta = x2 - boundx; x1 -= delta; x2 -= delta; } |
| 345 | | - if (y2 > boundy) { var delta = y2 - boundy; y1 -= delta; y2 -= delta; } |
| 346 | | - if (x1 > boundx) { var delta = x1 - boundy; y2 -= delta; y1 -= delta; } |
| 347 | | - if (y1 > boundy) { var delta = y1 - boundy; y2 -= delta; y1 -= delta; } |
| 348 | | - |
| 349 | | - return makeObj(flipCoords(x1,y1,x2,y2)); |
| 350 | | - }; |
| 351 | | - /*}}}*/ |
| 352 | | - function makeObj(a)/*{{{*/ |
| 353 | | - { |
| 354 | | - return { x: a[0], y: a[1], x2: a[2], y2: a[3], |
| 355 | | - w: a[2] - a[0], h: a[3] - a[1] }; |
| 356 | | - }; |
| 357 | | - /*}}}*/ |
| 358 | | - |
| 359 | | - return { |
| 360 | | - flipCoords: flipCoords, |
| 361 | | - setPressed: setPressed, |
| 362 | | - setCurrent: setCurrent, |
| 363 | | - getOffset: getOffset, |
| 364 | | - moveOffset: moveOffset, |
| 365 | | - getCorner: getCorner, |
| 366 | | - getFixed: getFixed |
| 367 | | - }; |
| 368 | | - }(); |
| 369 | | - |
| 370 | | - /*}}}*/ |
| 371 | | - var Selection = function()/*{{{*/ |
| 372 | | - { |
| 373 | | - var start, end, dragmode, awake, hdep = 370; |
| 374 | | - var borders = { }; |
| 375 | | - var handle = { }; |
| 376 | | - var seehandles = false; |
| 377 | | - var hhs = options.handleOffset; |
| 378 | | - |
| 379 | | - /* Insert draggable elements {{{*/ |
| 380 | | - |
| 381 | | - // Insert border divs for outline |
| 382 | | - if (options.drawBorders) { |
| 383 | | - borders = { |
| 384 | | - top: insertBorder('hline') |
| 385 | | - .css('top',$.browser.msie?px(-1):px(0)), |
| 386 | | - bottom: insertBorder('hline'), |
| 387 | | - left: insertBorder('vline'), |
| 388 | | - right: insertBorder('vline') |
| 389 | | - }; |
| 390 | | - } |
| 391 | | - |
| 392 | | - // Insert handles on edges |
| 393 | | - if (options.dragEdges) { |
| 394 | | - handle.t = insertDragbar('n'); |
| 395 | | - handle.b = insertDragbar('s'); |
| 396 | | - handle.r = insertDragbar('e'); |
| 397 | | - handle.l = insertDragbar('w'); |
| 398 | | - } |
| 399 | | - |
| 400 | | - // Insert side handles |
| 401 | | - options.sideHandles && |
| 402 | | - createHandles(['n','s','e','w']); |
| 403 | | - |
| 404 | | - // Insert corner handles |
| 405 | | - options.cornerHandles && |
| 406 | | - createHandles(['sw','nw','ne','se']); |
| 407 | | - |
| 408 | | - /*}}}*/ |
| 409 | | - // Private Methods |
| 410 | | - function insertBorder(type)/*{{{*/ |
| 411 | | - { |
| 412 | | - var jq = $('<div />') |
| 413 | | - .css({position: 'absolute', opacity: options.borderOpacity }) |
| 414 | | - .addClass(cssClass(type)); |
| 415 | | - $img_holder.append(jq); |
| 416 | | - return jq; |
| 417 | | - }; |
| 418 | | - /*}}}*/ |
| 419 | | - function dragDiv(ord,zi)/*{{{*/ |
| 420 | | - { |
| 421 | | - var jq = $('<div />') |
| 422 | | - .mousedown(createDragger(ord)) |
| 423 | | - .css({ |
| 424 | | - cursor: ord+'-resize', |
| 425 | | - position: 'absolute', |
| 426 | | - zIndex: zi |
| 427 | | - }) |
| 428 | | - ; |
| 429 | | - $hdl_holder.append(jq); |
| 430 | | - return jq; |
| 431 | | - }; |
| 432 | | - /*}}}*/ |
| 433 | | - function insertHandle(ord)/*{{{*/ |
| 434 | | - { |
| 435 | | - return dragDiv(ord,hdep++) |
| 436 | | - .css({ top: px(-hhs+1), left: px(-hhs+1), opacity: options.handleOpacity }) |
| 437 | | - .addClass(cssClass('handle')); |
| 438 | | - }; |
| 439 | | - /*}}}*/ |
| 440 | | - function insertDragbar(ord)/*{{{*/ |
| 441 | | - { |
| 442 | | - var s = options.handleSize, |
| 443 | | - o = hhs, |
| 444 | | - h = s, w = s, |
| 445 | | - t = o, l = o; |
| 446 | | - |
| 447 | | - switch(ord) |
| 448 | | - { |
| 449 | | - case 'n': case 's': w = pct(100); break; |
| 450 | | - case 'e': case 'w': h = pct(100); break; |
| 451 | | - } |
| 452 | | - |
| 453 | | - return dragDiv(ord,hdep++).width(w).height(h) |
| 454 | | - .css({ top: px(-t+1), left: px(-l+1)}); |
| 455 | | - }; |
| 456 | | - /*}}}*/ |
| 457 | | - function createHandles(li)/*{{{*/ |
| 458 | | - { |
| 459 | | - for(i in li) handle[li[i]] = insertHandle(li[i]); |
| 460 | | - }; |
| 461 | | - /*}}}*/ |
| 462 | | - function moveHandles(c)/*{{{*/ |
| 463 | | - { |
| 464 | | - var midvert = Math.round((c.h / 2) - hhs), |
| 465 | | - midhoriz = Math.round((c.w / 2) - hhs), |
| 466 | | - north = west = -hhs+1, |
| 467 | | - east = c.w - hhs, |
| 468 | | - south = c.h - hhs, |
| 469 | | - x, y; |
| 470 | | - |
| 471 | | - 'e' in handle && |
| 472 | | - handle.e.css({ top: px(midvert), left: px(east) }) && |
| 473 | | - handle.w.css({ top: px(midvert) }) && |
| 474 | | - handle.s.css({ top: px(south), left: px(midhoriz) }) && |
| 475 | | - handle.n.css({ left: px(midhoriz) }); |
| 476 | | - |
| 477 | | - 'ne' in handle && |
| 478 | | - handle.ne.css({ left: px(east) }) && |
| 479 | | - handle.se.css({ top: px(south), left: px(east) }) && |
| 480 | | - handle.sw.css({ top: px(south) }); |
| 481 | | - |
| 482 | | - 'b' in handle && |
| 483 | | - handle.b.css({ top: px(south) }) && |
| 484 | | - handle.r.css({ left: px(east) }); |
| 485 | | - }; |
| 486 | | - /*}}}*/ |
| 487 | | - function moveto(x,y)/*{{{*/ |
| 488 | | - { |
| 489 | | - $img2.css({ top: px(-y), left: px(-x) }); |
| 490 | | - $sel.css({ top: px(y), left: px(x) }); |
| 491 | | - }; |
| 492 | | - /*}}}*/ |
| 493 | | - function resize(w,h)/*{{{*/ |
| 494 | | - { |
| 495 | | - $sel.width(w).height(h); |
| 496 | | - }; |
| 497 | | - /*}}}*/ |
| 498 | | - function refresh()/*{{{*/ |
| 499 | | - { |
| 500 | | - var p = Coords.getFixed(); |
| 501 | | - Coords.setPressed([p.x,p.y]); |
| 502 | | - Coords.setCurrent([p.x2,p.y2]); |
| 503 | | - }; |
| 504 | | - /*}}}*/ |
| 505 | | - |
| 506 | | - // Internal Methods |
| 507 | | - function updateVisible()/*{{{*/ |
| 508 | | - { if (awake) return update(); }; |
| 509 | | - /*}}}*/ |
| 510 | | - function update()/*{{{*/ |
| 511 | | - { |
| 512 | | - var c = Coords.getFixed(); |
| 513 | | - |
| 514 | | - resize(c.w,c.h); |
| 515 | | - moveto(c.x,c.y); |
| 516 | | - |
| 517 | | - options.drawBorders && |
| 518 | | - borders['right'].css({ left: px(c.w-1) }) && |
| 519 | | - borders['bottom'].css({ top: px(c.h-1) }); |
| 520 | | - |
| 521 | | - seehandles && moveHandles(c); |
| 522 | | - awake || show(); |
| 523 | | - |
| 524 | | - options.onChange(unscale(c)); |
| 525 | | - }; |
| 526 | | - /*}}}*/ |
| 527 | | - function show()/*{{{*/ |
| 528 | | - { |
| 529 | | - $sel.show(); |
| 530 | | - $img.css('opacity',options.bgOpacity); |
| 531 | | - awake = true; |
| 532 | | - }; |
| 533 | | - /*}}}*/ |
| 534 | | - function release()/*{{{*/ |
| 535 | | - { |
| 536 | | - disableHandles(); |
| 537 | | - $sel.hide(); |
| 538 | | - $img.css('opacity',1); |
| 539 | | - awake = false; |
| 540 | | - }; |
| 541 | | - /*}}}*/ |
| 542 | | - function hide()/*{{{*/ |
| 543 | | - { |
| 544 | | - release(); |
| 545 | | - $img.css('opacity',1); |
| 546 | | - awake = false; |
| 547 | | - }; |
| 548 | | - /*}}}*/ |
| 549 | | - function enableHandles()/*{{{*/ |
| 550 | | - { |
| 551 | | - seehandles = true; |
| 552 | | - moveHandles(Coords.getFixed()); |
| 553 | | - $hdl_holder.show(); |
| 554 | | - }; |
| 555 | | - /*}}}*/ |
| 556 | | - function disableHandles()/*{{{*/ |
| 557 | | - { |
| 558 | | - seehandles = false; |
| 559 | | - $hdl_holder.hide(); |
| 560 | | - }; |
| 561 | | - /*}}}*/ |
| 562 | | - function animMode(v)/*{{{*/ |
| 563 | | - { |
| 564 | | - (animating = v) ? disableHandles(): enableHandles(); |
| 565 | | - }; |
| 566 | | - /*}}}*/ |
| 567 | | - function done()/*{{{*/ |
| 568 | | - { |
| 569 | | - var c = Coords.getFixed(); |
| 570 | | - animMode(false); |
| 571 | | - refresh(); |
| 572 | | - }; |
| 573 | | - /*}}}*/ |
| 574 | | - |
| 575 | | - disableHandles(); |
| 576 | | - |
| 577 | | - $img_holder.append |
| 578 | | - ( |
| 579 | | - $('<div />') |
| 580 | | - .addClass(cssClass('tracker')) |
| 581 | | - .mousedown(createDragger('move')) |
| 582 | | - .css({ cursor: 'move', position: 'absolute', zIndex: 360, opacity: 0 }) |
| 583 | | - ); |
| 584 | | - |
| 585 | | - return { |
| 586 | | - updateVisible: updateVisible, |
| 587 | | - update: update, |
| 588 | | - release: release, |
| 589 | | - show: show, |
| 590 | | - hide: hide, |
| 591 | | - enableHandles: enableHandles, |
| 592 | | - disableHandles: disableHandles, |
| 593 | | - animMode: animMode, |
| 594 | | - done: done |
| 595 | | - }; |
| 596 | | - }(); |
| 597 | | - /*}}}*/ |
| 598 | | - var Tracker = function()/*{{{*/ |
| 599 | | - { |
| 600 | | - var onMove = function() { }, |
| 601 | | - onDone = function() { }, |
| 602 | | - trackDoc = options.trackDocument; |
| 603 | | - |
| 604 | | - if (!trackDoc) |
| 605 | | - { |
| 606 | | - $trk |
| 607 | | - .mousemove(trackMove) |
| 608 | | - .mouseup(trackUp) |
| 609 | | - .mouseout(trackUp) |
| 610 | | - ; |
| 611 | | - } |
| 612 | | - |
| 613 | | - function toFront()/*{{{*/ |
| 614 | | - { |
| 615 | | - if (trackDoc) |
| 616 | | - { |
| 617 | | - $(document) |
| 618 | | - .mousemove(trackMove) |
| 619 | | - .mouseup(trackUp) |
| 620 | | - ; |
| 621 | | - } |
| 622 | | - $trk.css({zIndex:450}); |
| 623 | | - } |
| 624 | | - /*}}}*/ |
| 625 | | - function toBack()/*{{{*/ |
| 626 | | - { |
| 627 | | - if (trackDoc) |
| 628 | | - { |
| 629 | | - $(document) |
| 630 | | - .unbind('mousemove',trackMove) |
| 631 | | - .unbind('mouseup',trackUp) |
| 632 | | - ; |
| 633 | | - } |
| 634 | | - $trk.css({zIndex:290}); |
| 635 | | - } |
| 636 | | - /*}}}*/ |
| 637 | | - function trackMove(e)/*{{{*/ |
| 638 | | - { |
| 639 | | - onMove(mouseAbs(e)); |
| 640 | | - }; |
| 641 | | - /*}}}*/ |
| 642 | | - function trackUp(e)/*{{{*/ |
| 643 | | - { |
| 644 | | - e.preventDefault(); |
| 645 | | - e.stopPropagation(); |
| 646 | | - |
| 647 | | - if (btndown) |
| 648 | | - { |
| 649 | | - btndown = false; |
| 650 | | - |
| 651 | | - onDone(mouseAbs(e)); |
| 652 | | - options.onSelect(unscale(Coords.getFixed())); |
| 653 | | - toBack(); |
| 654 | | - onMove = function() { }; |
| 655 | | - onDone = function() { }; |
| 656 | | - } |
| 657 | | - |
| 658 | | - return false; |
| 659 | | - }; |
| 660 | | - /*}}}*/ |
| 661 | | - |
| 662 | | - function activateHandlers(move,done)/* {{{ */ |
| 663 | | - { |
| 664 | | - btndown = true; |
| 665 | | - onMove = move; |
| 666 | | - onDone = done; |
| 667 | | - toFront(); |
| 668 | | - return false; |
| 669 | | - }; |
| 670 | | - /* }}} */ |
| 671 | | - |
| 672 | | - function setCursor(t) { $trk.css('cursor',t); }; |
| 673 | | - |
| 674 | | - $img.before($trk); |
| 675 | | - return { |
| 676 | | - activateHandlers: activateHandlers, |
| 677 | | - setCursor: setCursor |
| 678 | | - }; |
| 679 | | - }(); |
| 680 | | - /*}}}*/ |
| 681 | | - var KeyManager = function()/*{{{*/ |
| 682 | | - { |
| 683 | | - var $keymgr = $('<input type="radio" />') |
| 684 | | - .css({ position: 'absolute', left: '-30px' }) |
| 685 | | - .keydown(parseKey) |
| 686 | | - .keyup(watchShift) |
| 687 | | - .blur(onBlur), |
| 688 | | - |
| 689 | | - $keywrap = $('<div />') |
| 690 | | - .css({ |
| 691 | | - position: 'absolute', |
| 692 | | - overflow: 'hidden' |
| 693 | | - }) |
| 694 | | - .append($keymgr) |
| 695 | | - ; |
| 696 | | - |
| 697 | | - function watchKeys()/*{{{*/ |
| 698 | | - { |
| 699 | | - if (options.keySupport) |
| 700 | | - { |
| 701 | | - $keymgr.show(); |
| 702 | | - $keymgr.focus(); |
| 703 | | - } |
| 704 | | - }; |
| 705 | | - /*}}}*/ |
| 706 | | - function onBlur(e)/*{{{*/ |
| 707 | | - { |
| 708 | | - $keymgr.hide(); |
| 709 | | - }; |
| 710 | | - /*}}}*/ |
| 711 | | - function watchShift(e)/*{{{*/ |
| 712 | | - { |
| 713 | | - if (!options.watchShift) return; |
| 714 | | - var init_shift = shift_down, fc; |
| 715 | | - shift_down = e.shiftKey ? true : false; |
| 716 | | - |
| 717 | | - if (init_shift != shift_down) { |
| 718 | | - if (shift_down && btndown) { |
| 719 | | - fc = Coords.getFixed(); |
| 720 | | - aspectLock = fc.w / fc.h; |
| 721 | | - } else aspectLock = 0; |
| 722 | | - Selection.update(); |
| 723 | | - } |
| 724 | | - e.stopPropagation(); |
| 725 | | - e.preventDefault(); |
| 726 | | - return false; |
| 727 | | - }; |
| 728 | | - /*}}}*/ |
| 729 | | - function doNudge(e,x,y)/*{{{*/ |
| 730 | | - { |
| 731 | | - Coords.moveOffset([x,y]); |
| 732 | | - Selection.updateVisible(); |
| 733 | | - e.preventDefault(); |
| 734 | | - e.stopPropagation(); |
| 735 | | - }; |
| 736 | | - /*}}}*/ |
| 737 | | - function parseKey(e)/*{{{*/ |
| 738 | | - { |
| 739 | | - if (e.ctrlKey) return true; |
| 740 | | - watchShift(e); |
| 741 | | - var nudge = shift_down ? 10 : 1; |
| 742 | | - switch(e.keyCode) |
| 743 | | - { |
| 744 | | - case 37: doNudge(e,-nudge,0); break; |
| 745 | | - case 39: doNudge(e,nudge,0); break; |
| 746 | | - case 38: doNudge(e,0,-nudge); break; |
| 747 | | - case 40: doNudge(e,0,nudge); break; |
| 748 | | - |
| 749 | | - case 27: Selection.release(); break; |
| 750 | | - |
| 751 | | - case 9: return true; |
| 752 | | - } |
| 753 | | - |
| 754 | | - return false; |
| 755 | | - }; |
| 756 | | - /*}}}*/ |
| 757 | | - |
| 758 | | - if (options.keySupport) $keywrap.insertBefore($img); |
| 759 | | - return { |
| 760 | | - watchKeys: watchKeys |
| 761 | | - }; |
| 762 | | - }(); |
| 763 | | - /*}}}*/ |
| 764 | | - |
| 765 | | - // }}} |
| 766 | | - // Internal Methods {{{ |
| 767 | | - |
| 768 | | - function px(n) { return '' + parseInt(n) + 'px'; }; |
| 769 | | - function pct(n) { return '' + parseInt(n) + '%'; }; |
| 770 | | - function cssClass(cl) { return options.baseClass + '-' + cl; }; |
| 771 | | - function getPos(obj)/*{{{*/ |
| 772 | | - { |
| 773 | | - // Updated in v0.9.4 to use built-in dimensions plugin |
| 774 | | - var pos = $(obj).offset(); |
| 775 | | - return [ pos.left, pos.top ]; |
| 776 | | - }; |
| 777 | | - /*}}}*/ |
| 778 | | - function mouseAbs(e)/*{{{*/ |
| 779 | | - { |
| 780 | | - return [ (e.pageX - docOffset[0]), (e.pageY - docOffset[1]) ]; |
| 781 | | - }; |
| 782 | | - /*}}}*/ |
| 783 | | - function myCursor(type)/*{{{*/ |
| 784 | | - { |
| 785 | | - if (type != lastcurs) |
| 786 | | - { |
| 787 | | - Tracker.setCursor(type); |
| 788 | | - //Handles.xsetCursor(type); |
| 789 | | - lastcurs = type; |
| 790 | | - } |
| 791 | | - }; |
| 792 | | - /*}}}*/ |
| 793 | | - function startDragMode(mode,pos)/*{{{*/ |
| 794 | | - { |
| 795 | | - docOffset = getPos(obj); |
| 796 | | - Tracker.setCursor(mode=='move'?mode:mode+'-resize'); |
| 797 | | - |
| 798 | | - if (mode == 'move') |
| 799 | | - return Tracker.activateHandlers(createMover(pos), doneSelect); |
| 800 | | - |
| 801 | | - var fc = Coords.getFixed(); |
| 802 | | - Coords.setPressed(Coords.getCorner(oppLockCorner(mode))); |
| 803 | | - Tracker.activateHandlers(dragmodeHandler(mode,fc),doneSelect); |
| 804 | | - }; |
| 805 | | - /*}}}*/ |
| 806 | | - function dragmodeHandler(mode,f)/*{{{*/ |
| 807 | | - { |
| 808 | | - return function(pos) { |
| 809 | | - if (!options.aspectRatio && !aspectLock) switch(mode) |
| 810 | | - { |
| 811 | | - case 'e': pos[1] = f.y2; break; |
| 812 | | - case 'w': pos[1] = f.y2; break; |
| 813 | | - case 'n': pos[0] = f.x2; break; |
| 814 | | - case 's': pos[0] = f.x2; break; |
| 815 | | - } |
| 816 | | - else switch(mode) |
| 817 | | - { |
| 818 | | - case 'e': pos[1] = f.y+1; break; |
| 819 | | - case 'w': pos[1] = f.y+1; break; |
| 820 | | - case 'n': pos[0] = f.x+1; break; |
| 821 | | - case 's': pos[0] = f.x+1; break; |
| 822 | | - } |
| 823 | | - Coords.setCurrent(pos); |
| 824 | | - Selection.update(); |
| 825 | | - }; |
| 826 | | - }; |
| 827 | | - /*}}}*/ |
| 828 | | - function createMover(pos)/*{{{*/ |
| 829 | | - { |
| 830 | | - var lloc = pos; |
| 831 | | - KeyManager.watchKeys(); |
| 832 | | - |
| 833 | | - return function(pos) |
| 834 | | - { |
| 835 | | - Coords.moveOffset([pos[0] - lloc[0], pos[1] - lloc[1]]); |
| 836 | | - lloc = pos; |
| 837 | | - |
| 838 | | - Selection.update(); |
| 839 | | - }; |
| 840 | | - }; |
| 841 | | - /*}}}*/ |
| 842 | | - function oppLockCorner(ord)/*{{{*/ |
| 843 | | - { |
| 844 | | - switch(ord) |
| 845 | | - { |
| 846 | | - case 'n': return 'sw'; |
| 847 | | - case 's': return 'nw'; |
| 848 | | - case 'e': return 'nw'; |
| 849 | | - case 'w': return 'ne'; |
| 850 | | - case 'ne': return 'sw'; |
| 851 | | - case 'nw': return 'se'; |
| 852 | | - case 'se': return 'nw'; |
| 853 | | - case 'sw': return 'ne'; |
| 854 | | - }; |
| 855 | | - }; |
| 856 | | - /*}}}*/ |
| 857 | | - function createDragger(ord)/*{{{*/ |
| 858 | | - { |
| 859 | | - return function(e) { |
| 860 | | - var spt = scrollParent.scrollTop(); |
| 861 | | - var spl = scrollParent.scrollLeft(); |
| 862 | | - |
| 863 | | - btndown = true; |
| 864 | | - startDragMode(ord,mouseAbs(e)); |
| 865 | | - e.stopPropagation(); |
| 866 | | - e.preventDefault(); |
| 867 | | - |
| 868 | | - scrollParent.scrollTop( spt ); |
| 869 | | - scrollParent.scrollLeft( spl ); |
| 870 | | - return false; |
| 871 | | - }; |
| 872 | | - }; |
| 873 | | - /*}}}*/ |
| 874 | | - function presize($obj,w,h)/*{{{*/ |
| 875 | | - { |
| 876 | | - var nw = $obj.width(), nh = $obj.height(); |
| 877 | | - if ((nw > w) && w > 0) |
| 878 | | - { |
| 879 | | - nw = w; |
| 880 | | - nh = (w/$obj.width()) * $obj.height(); |
| 881 | | - } |
| 882 | | - if ((nh > h) && h > 0) |
| 883 | | - { |
| 884 | | - nh = h; |
| 885 | | - nw = (h/$obj.height()) * $obj.width(); |
| 886 | | - } |
| 887 | | - xscale = $obj.width() / nw; |
| 888 | | - yscale = $obj.height() / nh; |
| 889 | | - $obj.width(nw).height(nh); |
| 890 | | - }; |
| 891 | | - /*}}}*/ |
| 892 | | - function unscale(c)/*{{{*/ |
| 893 | | - { |
| 894 | | - return { |
| 895 | | - x: parseInt(c.x * xscale), y: parseInt(c.y * yscale), |
| 896 | | - x2: parseInt(c.x2 * xscale), y2: parseInt(c.y2 * yscale), |
| 897 | | - w: parseInt(c.w * xscale), h: parseInt(c.h * yscale) |
| 898 | | - }; |
| 899 | | - }; |
| 900 | | - /*}}}*/ |
| 901 | | - function doneSelect(pos)/*{{{*/ |
| 902 | | - { |
| 903 | | - var c = Coords.getFixed(); |
| 904 | | - if (c.w > options.minSelect[0] && c.h > options.minSelect[1]) |
| 905 | | - { |
| 906 | | - Selection.enableHandles(); |
| 907 | | - Selection.done(); |
| 908 | | - } |
| 909 | | - else |
| 910 | | - { |
| 911 | | - Selection.release(); |
| 912 | | - } |
| 913 | | - Tracker.setCursor('crosshair'); |
| 914 | | - }; |
| 915 | | - /*}}}*/ |
| 916 | | - function newSelection(e)/*{{{*/ |
| 917 | | - { |
| 918 | | - var spt = scrollParent.scrollTop(); |
| 919 | | - var spl = scrollParent.scrollLeft(); |
| 920 | | - |
| 921 | | - |
| 922 | | - btndown = true; |
| 923 | | - docOffset = getPos(obj); |
| 924 | | - Selection.release(); |
| 925 | | - Selection.disableHandles(); |
| 926 | | - myCursor('crosshair'); |
| 927 | | - Coords.setPressed(mouseAbs(e)); |
| 928 | | - Tracker.activateHandlers(selectDrag,doneSelect); |
| 929 | | - KeyManager.watchKeys(); |
| 930 | | - |
| 931 | | - e.stopPropagation(); |
| 932 | | - e.preventDefault(); |
| 933 | | - |
| 934 | | - scrollParent.scrollTop( spt ); |
| 935 | | - scrollParent.scrollLeft( spl ); |
| 936 | | - |
| 937 | | - return false; |
| 938 | | - }; |
| 939 | | - /*}}}*/ |
| 940 | | - function selectDrag(pos)/*{{{*/ |
| 941 | | - { |
| 942 | | - Coords.setCurrent(pos); |
| 943 | | - Selection.update(); |
| 944 | | - |
| 945 | | - }; |
| 946 | | - /*}}}*/ |
| 947 | | - |
| 948 | | - // }}} |
| 949 | | - // Public API {{{ |
| 950 | | - |
| 951 | | - function animateTo(a)/*{{{*/ |
| 952 | | - { |
| 953 | | - var x1 = a[0], |
| 954 | | - y1 = a[1], |
| 955 | | - x2 = a[2], |
| 956 | | - y2 = a[3]; |
| 957 | | - |
| 958 | | - if (animating) return; |
| 959 | | - var animto = Coords.flipCoords(x1,y1,x2,y2); |
| 960 | | - var c = Coords.getFixed(); |
| 961 | | - var animat = initcr = [ c.x, c.y, c.x2, c.y2 ]; |
| 962 | | - var interv = options.animationDelay; |
| 963 | | - //var ix1 = (animto[0] - initcr[0]) / steps; |
| 964 | | - //var iy1 = (animto[1] - initcr[1]) / steps; |
| 965 | | - //var ix2 = (animto[2] - initcr[2]) / steps; |
| 966 | | - //var iy2 = (animto[3] - initcr[3]) / steps; |
| 967 | | - |
| 968 | | - var x = animat[0]; |
| 969 | | - var y = animat[1]; |
| 970 | | - var x2 = animat[2]; |
| 971 | | - var y2 = animat[3]; |
| 972 | | - var ix1 = animto[0] - initcr[0]; |
| 973 | | - var iy1 = animto[1] - initcr[1]; |
| 974 | | - var ix2 = animto[2] - initcr[2]; |
| 975 | | - var iy2 = animto[3] - initcr[3]; |
| 976 | | - var pcent = 0; |
| 977 | | - var velocity = options.swingSpeed; |
| 978 | | - |
| 979 | | - Selection.animMode(true); |
| 980 | | - |
| 981 | | - var animator = function() |
| 982 | | - { |
| 983 | | - return function() |
| 984 | | - { |
| 985 | | - pcent += (100 - pcent) / velocity; |
| 986 | | - |
| 987 | | - animat[0] = x + ((pcent / 100) * ix1); |
| 988 | | - animat[1] = y + ((pcent / 100) * iy1); |
| 989 | | - animat[2] = x2 + ((pcent / 100) * ix2); |
| 990 | | - animat[3] = y2 + ((pcent / 100) * iy2); |
| 991 | | - |
| 992 | | - if (pcent < 100) animateStart(); |
| 993 | | - else Selection.done(); |
| 994 | | - |
| 995 | | - if (pcent >= 99.8) pcent = 100; |
| 996 | | - |
| 997 | | - setSelect(animat); |
| 998 | | - }; |
| 999 | | - }(); |
| 1000 | | - |
| 1001 | | - function animateStart() |
| 1002 | | - { window.setTimeout(animator,interv); }; |
| 1003 | | - |
| 1004 | | - animateStart(); |
| 1005 | | - |
| 1006 | | - }; |
| 1007 | | - /*}}}*/ |
| 1008 | | - function setSelect(l) /*{{{*/ |
| 1009 | | - { |
| 1010 | | - Coords.setPressed([l[0],l[1]]); |
| 1011 | | - Coords.setCurrent([l[2],l[3]]); |
| 1012 | | - Selection.update(); |
| 1013 | | - }; |
| 1014 | | - /*}}}*/ |
| 1015 | | - function setOptions(opt)/*{{{*/ |
| 1016 | | - { |
| 1017 | | - if (typeof(opt) != 'object') opt = { }; |
| 1018 | | - options = $.extend(options,opt); |
| 1019 | | - |
| 1020 | | - if (typeof(options.onChange)!=='function') |
| 1021 | | - options.onChange = function() { }; |
| 1022 | | - |
| 1023 | | - if (typeof(options.onSelect)!=='function') |
| 1024 | | - options.onSelect = function() { }; |
| 1025 | | - }; |
| 1026 | | - /*}}}*/ |
| 1027 | | - function tellSelect()/*{{{*/ |
| 1028 | | - { |
| 1029 | | - return unscale(Coords.getFixed()); |
| 1030 | | - }; |
| 1031 | | - /*}}}*/ |
| 1032 | | - function tellScaled()/*{{{*/ |
| 1033 | | - { |
| 1034 | | - return Coords.getFixed(); |
| 1035 | | - }; |
| 1036 | | - /*}}}*/ |
| 1037 | | - function setOptionsNew(opt)/*{{{*/ |
| 1038 | | - { |
| 1039 | | - setOptions(opt); |
| 1040 | | - |
| 1041 | | - if ('setSelect' in opt) { |
| 1042 | | - setSelect(opt.setSelect); |
| 1043 | | - Selection.done(); |
| 1044 | | - } |
| 1045 | | - }; |
| 1046 | | - /*}}}*/ |
| 1047 | | - |
| 1048 | | - if (typeof(opt) != 'object') opt = { }; |
| 1049 | | - if ('setSelect' in opt) { setSelect(opt.setSelect); Selection.done(); } |
| 1050 | | - |
| 1051 | | - // }}} |
| 1052 | | - |
| 1053 | | - var xlimit = options.maxSize[0] || 0; |
| 1054 | | - var ylimit = options.maxSize[1] || 0; |
| 1055 | | - var xmin = options.minSize[0] || 0; |
| 1056 | | - var ymin = options.minSize[1] || 0; |
| 1057 | | - |
| 1058 | | - Tracker.setCursor('crosshair'); |
| 1059 | | - |
| 1060 | | - return { |
| 1061 | | - animateTo: animateTo, |
| 1062 | | - setSelect: setSelect, |
| 1063 | | - setOptions: setOptionsNew, |
| 1064 | | - tellSelect: tellSelect, |
| 1065 | | - tellScaled: tellScaled |
| 1066 | | - }; |
| 1067 | | -}; |
| 1068 | | - |
| 1069 | | - |
| 1070 | | -$.fn.Jcrop = function(options)/*{{{*/ |
| 1071 | | -{ |
| 1072 | | - function attachWhenDone(from)/*{{{*/ |
| 1073 | | - { |
| 1074 | | - var loadsrc = options.useImg || from.src; |
| 1075 | | - var img = new Image(); |
| 1076 | | - var from = from; |
| 1077 | | - img.onload = function() { |
| 1078 | | - $(from).hide().after(img); |
| 1079 | | - from.Jcrop = $.Jcrop(img,options); |
| 1080 | | - }; |
| 1081 | | - img.src = loadsrc; |
| 1082 | | - }; |
| 1083 | | - /*}}}*/ |
| 1084 | | - if (typeof(options) !== 'object') options = { }; |
| 1085 | | - |
| 1086 | | - // Iterate over each object, attach Jcrop |
| 1087 | | - this.each(function() |
| 1088 | | - { |
| 1089 | | - // If we've already attached to this object |
| 1090 | | - if ('Jcrop' in this) |
| 1091 | | - { |
| 1092 | | - // The API can be requested this way (undocumented) |
| 1093 | | - if (options == 'api') return this.Jcrop; |
| 1094 | | - // Otherwise, we just reset the options... |
| 1095 | | - else this.Jcrop.setOptions(options); |
| 1096 | | - } |
| 1097 | | - // If we haven't been attached, preload and attach |
| 1098 | | - else attachWhenDone(this); |
| 1099 | | - }); |
| 1100 | | - |
| 1101 | | - // Return "this" so we're chainable a la jQuery plugin-style! |
| 1102 | | - return this; |
| 1103 | | -}; |
| 1104 | | -/*}}}*/ |
| 1105 | | - |
| 1106 | | -})(jQuery); |
| 1107 | | - |
| 1108 | | - |
| Index: branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js |
| — | — | @@ -1089,10 +1089,6 @@ |
| 1090 | 1090 | |
| 1091 | 1091 | var clibs = ['mvClipEdit']; |
| 1092 | 1092 | if( mediaType == 'image'){ |
| 1093 | | - //load the crop library: |
| 1094 | | - //loadLibs['$j.Jcrop']='jquery/plugins/Jcrop/js/jquery.Jcrop.js'; |
| 1095 | | - //@@todo integrate css calls into mvJsLoader or move jcrop css |
| 1096 | | - //loadExternalCss( mv_embed_path + 'jquery/plugins/Jcrop/css/jquery.Jcrop.css'); |
| 1097 | 1093 | //display the mvClipEdit obj once we are done loading: |
| 1098 | 1094 | mvJsLoader.doLoad( clibs, function(){ |
| 1099 | 1095 | //run the image clip tools |
| Index: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvTimedEffectsEdit.js |
| — | — | @@ -7,9 +7,12 @@ |
| 8 | 8 | |
| 9 | 9 | //add our local msgs |
| 10 | 10 | loadGM({ |
| 11 | | - "transition_in" : "Transition In", |
| 12 | | - "transition_out" : "Transition Out", |
| 13 | | - "effects" : "Effects Stack" |
| | 11 | + "transition_in" : "Transition In", |
| | 12 | + "transition_out" : "Transition Out", |
| | 13 | + "effects" : "Effects Stack", |
| | 14 | + "remove_transition" : "Remove Transition", |
| | 15 | + "edit_transin" : "Edit Transition Into Clip", |
| | 16 | + "edit_transout" : "Edit Transition Out of Clip" |
| 14 | 17 | }); |
| 15 | 18 | |
| 16 | 19 | |
| — | — | @@ -53,15 +56,16 @@ |
| 54 | 57 | } |
| 55 | 58 | }, |
| 56 | 59 | init:function(iObj){ |
| 57 | | - //init object: |
| 58 | | - for(var i in default_timed_effect_values){ |
| | 60 | + //init object: |
| | 61 | + for(var i in default_timed_effect_values){ |
| 59 | 62 | if( iObj[i] ){ |
| 60 | 63 | this[i] = iObj[i]; |
| 61 | 64 | } |
| 62 | | - } |
| | 65 | + } |
| 63 | 66 | this.doEditMenu(); |
| 64 | 67 | }, |
| 65 | 68 | doEditMenu:function(){ |
| | 69 | + js_log('mvTimedEffects : doEditMenu::'); |
| 66 | 70 | var _this = this; |
| 67 | 71 | //add in subMenus if set |
| 68 | 72 | //check for submenu and add to item container |
| — | — | @@ -75,36 +79,40 @@ |
| 76 | 80 | |
| 77 | 81 | var o=''; |
| 78 | 82 | var tabc =''; |
| 79 | | - o+= '<div id="mv_submenu_timedeffect" style="width:90%">'; |
| | 83 | + o+= '<div id="mv_submenu_timedeffect">'; |
| 80 | 84 | o+='<ul>'; |
| 81 | 85 | var inx =0; |
| 82 | | - $j.each(this.menu_items, function(sInx, mItem){ |
| | 86 | + var selected_tab=0; |
| | 87 | + $j.each(this.menu_items, function(sInx, mItem){ |
| | 88 | + if( sInx == tTarget){ |
| | 89 | + selected_tab = inx; |
| | 90 | + } |
| 83 | 91 | //check if the given editType is valid for our given media type |
| 84 | 92 | o+= '<li>'+ |
| 85 | 93 | '<a id="mv_te_'+sInx+'" href="#te_' + sInx + '">' + mItem.title + '</a>'+ |
| 86 | 94 | '</li>'; |
| 87 | | - tabc += '<div id="te_' + sInx + '" style="overflow:auto;" ></div>'; |
| | 95 | + tabc += '<div id="te_' + sInx + '" style="overflow:auto;" ></div>'; |
| | 96 | + inx++; |
| 88 | 97 | }); |
| 89 | 98 | o+= '</ul>' + tabc; |
| 90 | 99 | o+= '</div>'; |
| 91 | 100 | //add sub menu container with menu html: |
| 92 | 101 | $j('#'+this.control_ct).html( o ) ; |
| 93 | | - js_log('should have set: #'+this.control_ct + ' to: ' + o); |
| 94 | | - |
| 95 | | - |
| | 102 | + js_log('should have set: #'+this.control_ct + ' to: ' + o); |
| 96 | 103 | //set up bindins: |
| 97 | 104 | $j('#mv_submenu_timedeffect').tabs({ |
| 98 | | - selected: 0, |
| | 105 | + selected: selected_tab, |
| 99 | 106 | select: function(event, ui) { |
| 100 | 107 | _this.doDisplayEdit( $j(ui.tab).attr('id').replace('mv_te_', '') ); |
| 101 | 108 | } |
| 102 | | - }).addClass('ui-tabs-vertical ui-helper-clearfix'); |
| 103 | | - js_log('setup tabs #' + this.control_ct); |
| 104 | | - |
| | 109 | + }).addClass('ui-tabs-vertical ui-helper-clearfix'); |
| 105 | 110 | //close left: |
| 106 | | - $j("#mv_submenu_clipedit li").removeClass('ui-corner-top').addClass('ui-corner-left'); |
| | 111 | + $j("#mv_submenu_clipedit li").removeClass('ui-corner-top').addClass('ui-corner-left'); |
| | 112 | + _this.doDisplayEdit(tTarget); |
| 107 | 113 | }, |
| 108 | | - doDisplayEdit:function( tab_id ){ |
| | 114 | + doDisplayEdit:function( tab_id ){ |
| | 115 | + //@@todo fix the double display of doDisplayEdit |
| | 116 | + js_log("doDisplayEdit::"); |
| 109 | 117 | if( !this.menu_items[ tab_id ] ){ |
| 110 | 118 | js_log('error: doDisplayEdit missing item:' + tab_id); |
| 111 | 119 | }else{ |
| — | — | @@ -113,41 +121,109 @@ |
| 114 | 122 | } |
| 115 | 123 | }, |
| 116 | 124 | doTransitionDisplayEdit:function(target_item){ |
| 117 | | - var apendTarget = 'te_' + target_item; |
| 118 | | - //check if we have a transition |
| | 125 | + var _this = this; |
| | 126 | + js_log("doTransitionDisplayEdit: "+ target_item); |
| | 127 | + var apendTarget = '#te_' + target_item; |
| | 128 | + //check if we have a transition of type clip_attr |
| 119 | 129 | if(!this.rObj[ this.menu_items[ target_item ].clip_attr ]){ |
| 120 | | - this.getTransitionList( apendTarget ); |
| | 130 | + //empty append the transition list: |
| | 131 | + this.getTransitionListControl( apendTarget ); |
| 121 | 132 | return ; |
| 122 | 133 | } |
| 123 | | - cTran = this.rObj[ this.menu_items[ target_item ].clip_attr ]; |
| 124 | | - var o='<h3>Edit Transition</h3>'; |
| | 134 | + var cTran = this.rObj[ this.menu_items[ target_item ].clip_attr ]; |
| | 135 | + var o='<h3>' + gM('edit_'+target_item ) + '</h3>'; |
| 125 | 136 | o+='Type: ' + |
| 126 | 137 | '<select class="te_select_type">'; |
| 127 | 138 | for(var typeKey in mvTransLib.type){ |
| 128 | 139 | var selAttr = (cTran.type == typeKey)?' selected':''; |
| 129 | 140 | o+='<option value="'+typeKey+'"'+ selAttr +'>'+typeKey+'</option>'; |
| 130 | | - } |
| 131 | | - o+='</select>'; |
| 132 | | - o+='<span class="te_select_subtype">Sub Type:'+ |
| 133 | | - '<select class="te_select_subtype">'; |
| 134 | | - for(var subTypeKey in mvTransLib.type[ cTran.type ]){ |
| 135 | | - var selAttr = (cTran.subtype == typeKey)?' selected':''; |
| 136 | | - o+='<option value="'+subTypeKey+'"'+ selAttr +'>'+typeKey+'</option>'; |
| 137 | 141 | } |
| 138 | | - o+='</select>'+ |
| 139 | | - '</span>'; |
| 140 | | - js_log("update: " + apendTarget); |
| 141 | | - //set up bidings: |
| 142 | | - $j(apendTarget).append(o).children('.te_select_type') |
| | 142 | + o+='</select><br>'; |
| | 143 | + o+='<span class="te_subtype_container"></span>'; |
| | 144 | + |
| | 145 | + //add html and select bindings |
| | 146 | + $j(apendTarget).html(o).children('.te_select_type') |
| 143 | 147 | .change(function(){ |
| 144 | | - //update subtype listing: |
| 145 | | - var o = ''; |
| 146 | | - $j(apendTarget + ' .te_select_subtype').html(); |
| | 148 | + var selectedType = $j(this).val(); |
| | 149 | + //update subtype listing: |
| | 150 | + _this.getSubTypeControl(target_item, selectedType, apendTarget + ' .te_subtype_container' ); |
| 147 | 151 | }); |
| 148 | | - $j('te_' + target_item).html(o); |
| | 152 | + //add subtype control |
| | 153 | + _this.getSubTypeControl( target_item, cTran.type, apendTarget + ' .te_subtype_container' ); |
| | 154 | + |
| | 155 | + //add remove transition button: |
| | 156 | + $j(apendTarget).append( '<br><br>' + $j.btnHtml(gM('remove_transition'), 'te_remove_transition', 'close' ) ) |
| | 157 | + .children('.te_remove_transition') |
| | 158 | + .click(function(){ |
| | 159 | + //remove the transtion from the playlist |
| | 160 | + _this.p_seqObj.plObj.transitions[cTran.id] = null; |
| | 161 | + //remove the transtion from the clip: |
| | 162 | + _this.rObj[ _this.menu_items[ target_item ].clip_attr ] = null; |
| | 163 | + //update the interface: |
| | 164 | + _this.doTransitionDisplayEdit( target_item ); |
| | 165 | + //update the sequence |
| | 166 | + }); |
| | 167 | + }, |
| | 168 | + getSubTypeControl:function(target_item, transition_type, htmlTarget){ |
| | 169 | + var _this = this; |
| | 170 | + var cTran = this.rObj[ this.menu_items[ target_item ].clip_attr ]; |
| | 171 | + var o='Sub Type:<select class="te_subtype_select">'; |
| | 172 | + for(var subTypeKey in mvTransLib.type[ transition_type ]){ |
| | 173 | + var selAttr = (cTran.subtype == subTypeKey) ? ' selected' : ''; |
| | 174 | + o+='<option value="'+subTypeKey+'"'+ selAttr +'>'+subTypeKey+'</option>'; |
| | 175 | + } |
| | 176 | + o+='</select><br>'; |
| | 177 | + $j(htmlTarget).html(o) |
| | 178 | + .children('.te_subtype_select') |
| | 179 | + .change(function(){ |
| | 180 | + //update the property |
| | 181 | + cTran.subtype = $j(this).val(); |
| | 182 | + //re-gen timeline / playlist |
| | 183 | + _this.p_seqObj.do_refresh_timeline(); |
| | 184 | + //(re-select self?) |
| | 185 | + _this.getSubTypeControl(target_item, transition_type, htmlTarget); |
| | 186 | + }); |
| | 187 | + var o=''; |
| | 188 | + //check for extra properties control: |
| | 189 | + for(var i=0; i < mvTransLib.type[ transition_type ][ cTran.subtype ].attr.length; i++){ |
| | 190 | + var tAttr =mvTransLib.type[ transition_type ][ cTran.subtype ].attr[i] |
| | 191 | + switch(tAttr){ |
| | 192 | + case 'fadeColor': |
| | 193 | + var cColor = (cTran['fadeColor'])?cTran['fadeColor']:''; |
| | 194 | + $j(htmlTarget).append('Select Color: <div class="colorSelector"><div class="colorIndicator" style="background-color: '+cColor+'"></div></div>'); |
| | 195 | + js_log('cs target: '+htmlTarget +' .colorSelector' ); |
| | 196 | + |
| | 197 | + |
| | 198 | + $j(htmlTarget + ' .colorSelector').ColorPicker({ |
| | 199 | + color: cColor, |
| | 200 | + onShow: function (colpkr) { |
| | 201 | + //make sure its ontop: |
| | 202 | + $j(colpkr).css("zIndex", "12"); |
| | 203 | + $j(colpkr).fadeIn(500); |
| | 204 | + return false; |
| | 205 | + }, |
| | 206 | + onHide: function (colpkr) { |
| | 207 | + $j(colpkr).fadeOut(500); |
| | 208 | + //for some strange reason ColorPicker loses context: |
| | 209 | + _this.p_seqObj.plObj.setCurrentTime(0, function(){ |
| | 210 | + js_log("render ready"); |
| | 211 | + }); |
| | 212 | + return false; |
| | 213 | + }, |
| | 214 | + onChange: function (hsb, hex, rgb) { |
| | 215 | + $j(htmlTarget + ' .colorIndicator').css('backgroundColor', '#' + hex); |
| | 216 | + //update the transition |
| | 217 | + cTran['fadeColor'] = '#' + hex; |
| | 218 | + } |
| | 219 | + }) |
| | 220 | + break; |
| | 221 | + } |
| | 222 | + } |
| | 223 | + //and finally add effect timeline scrubber (for timed effects this also stores keyframes) |
| | 224 | + |
| 149 | 225 | }, |
| 150 | | - getTransitionList:function(target_out){ |
| 151 | | - js_log("getTransitionList"); |
| | 226 | + getTransitionListControl:function(target_out){ |
| | 227 | + js_log("getTransitionListControl"); |
| 152 | 228 | var o= ''; |
| 153 | 229 | for(var type in mvTransLib['type']){ |
| 154 | 230 | js_log('on tran type: ' + i); |
| Index: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvSequencer.js |
| — | — | @@ -725,9 +725,10 @@ |
| 726 | 726 | this.doEditClip( cObj ); |
| 727 | 727 | }, |
| 728 | 728 | doEditTransitionSelectedClip:function(){ |
| | 729 | + var _this = this; |
| 729 | 730 | js_log("f:doEditTransitionSelectedClip:" + $j('.mv_selected_clip').length); |
| 730 | 731 | if( $j('.mv_selected_clip').length == 1){ |
| 731 | | - this.doEditTransition( this.getClipFromSeqID( $j('.mv_selected_clip').parent().attr('id') ) ); |
| | 732 | + _this.doEditTransition( _this.getClipFromSeqID( $j('.mv_selected_clip').parent().attr('id') ) ); |
| 732 | 733 | }else if( $j('.mv_selected_clip').length === 0){ |
| 733 | 734 | //no clip selected warning: |
| 734 | 735 | $j('#transition_ic').html( gM('no_selected_resource') ); |
| — | — | @@ -750,19 +751,19 @@ |
| 751 | 752 | } |
| 752 | 753 | }, |
| 753 | 754 | doEditTransition:function( cObj ){ |
| 754 | | - js_log("doEditTransition"); |
| | 755 | + js_log("sequence:doEditTransition"); |
| 755 | 756 | var _this = this; |
| 756 | 757 | mv_get_loading_img( '#transitions_ic' ); |
| 757 | 758 | mvJsLoader.doLoad([ |
| 758 | | - 'mvTimedEffectsEdit' |
| | 759 | + 'mvTimedEffectsEdit', |
| | 760 | + '$j.fn.ColorPicker' |
| 759 | 761 | ],function(){ |
| 760 | | - js_log("mvTimedEffectsEdit loaded d") |
| 761 | | - //if mvClipEditor not preset init |
| 762 | | - _this.myEffectEdit = {}; |
| | 762 | + //no idea why this works / is needed. |
| | 763 | + var localSeqRef = _this; |
| 763 | 764 | _this.myEffectEdit = new mvTimedEffectsEdit({ |
| 764 | 765 | 'rObj' : cObj, |
| 765 | 766 | 'control_ct' : 'transition_ic', |
| 766 | | - 'p_SeqObj' : _this, |
| | 767 | + 'p_seqObj' : localSeqRef |
| 767 | 768 | }); |
| 768 | 769 | }) |
| 769 | 770 | }, |
| — | — | @@ -852,7 +853,8 @@ |
| 853 | 854 | if(remove_clip_ary.length !=0 ) |
| 854 | 855 | this.removeClips(remove_clip_ary); |
| 855 | 856 | |
| 856 | | - //doEdit selected clips (updated selected resource) |
| | 857 | + //doEdit selected clips (updated selected resource) |
| | 858 | + //@@todo refresh menu of current |
| 857 | 859 | this.doEditSelectedClip(); |
| 858 | 860 | }, |
| 859 | 861 | addClip:function( clip, before_clip_pos, track_inx){ |
| Index: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvPlayList.js |
| — | — | @@ -802,10 +802,10 @@ |
| 803 | 803 | clipTime = pos - currentOffset; |
| 804 | 804 | if (plObj.cur_clip.id != clip.id) { |
| 805 | 805 | plObj.updateCurrentClip( clip ); |
| 806 | | - } |
| | 806 | + } |
| 807 | 807 | plObj.cur_clip.embed.setCurrentTime(clipTime, callback); |
| 808 | 808 | plObj.currentTime = pos; |
| 809 | | - plObj.doSmilActions(); |
| | 809 | + plObj.doSmilActions(); |
| 810 | 810 | return ''; |
| 811 | 811 | } |
| 812 | 812 | currentOffset += nextTime; |
| — | — | @@ -1607,7 +1607,8 @@ |
| 1608 | 1608 | type:{ |
| 1609 | 1609 | //types: |
| 1610 | 1610 | fade:{ |
| 1611 | | - fadeFromColor:{ |
| | 1611 | + fadeFromColor:{ |
| | 1612 | + 'attr':['fadeColor'], |
| 1612 | 1613 | 'init':function(tObj){ |
| 1613 | 1614 | //js_log('f:fadeFromColor: '+tObj.overlay_selector_id +' to color: '+ tObj.fadeColor); |
| 1614 | 1615 | if(!tObj.fadeColor) |
| — | — | @@ -1632,6 +1633,7 @@ |
| 1633 | 1634 | }, |
| 1634 | 1635 | //corssFade |
| 1635 | 1636 | crossfade:{ |
| | 1637 | + "attr":[], |
| 1636 | 1638 | "init":function(tObj){ |
| 1637 | 1639 | js_log('f:crossfade: '+tObj.overlay_selector_id); |
| 1638 | 1640 | if($j('#'+tObj.overlay_selector_id).length==0) |