15 //>>css.structure: ../../themes/base/core.css |
15 //>>css.structure: ../../themes/base/core.css |
16 //>>css.structure: ../../themes/base/resizable.css |
16 //>>css.structure: ../../themes/base/resizable.css |
17 //>>css.theme: ../../themes/base/theme.css |
17 //>>css.theme: ../../themes/base/theme.css |
18 |
18 |
19 ( function( factory ) { |
19 ( function( factory ) { |
|
20 "use strict"; |
|
21 |
20 if ( typeof define === "function" && define.amd ) { |
22 if ( typeof define === "function" && define.amd ) { |
21 |
23 |
22 // AMD. Register as an anonymous module. |
24 // AMD. Register as an anonymous module. |
23 define( [ |
25 define( [ |
24 "jquery", |
26 "jquery", |
86 } |
89 } |
87 |
90 |
88 // TODO: determine which cases actually cause this to happen |
91 // TODO: determine which cases actually cause this to happen |
89 // if the element doesn't have the scroll set, see if it's possible to |
92 // if the element doesn't have the scroll set, see if it's possible to |
90 // set the scroll |
93 // set the scroll |
91 el[ scroll ] = 1; |
94 try { |
92 has = ( el[ scroll ] > 0 ); |
95 el[ scroll ] = 1; |
93 el[ scroll ] = 0; |
96 has = ( el[ scroll ] > 0 ); |
|
97 el[ scroll ] = 0; |
|
98 } catch ( e ) { |
|
99 |
|
100 // `el` might be a string, then setting `scroll` will throw |
|
101 // an error in strict mode; ignore it. |
|
102 } |
94 return has; |
103 return has; |
95 }, |
104 }, |
96 |
105 |
97 _create: function() { |
106 _create: function() { |
98 |
107 |
111 |
120 |
112 // Wrap the element if it cannot hold child nodes |
121 // Wrap the element if it cannot hold child nodes |
113 if ( this.element[ 0 ].nodeName.match( /^(canvas|textarea|input|select|button|img)$/i ) ) { |
122 if ( this.element[ 0 ].nodeName.match( /^(canvas|textarea|input|select|button|img)$/i ) ) { |
114 |
123 |
115 this.element.wrap( |
124 this.element.wrap( |
116 $( "<div class='ui-wrapper' style='overflow: hidden;'></div>" ).css( { |
125 $( "<div class='ui-wrapper'></div>" ).css( { |
|
126 overflow: "hidden", |
117 position: this.element.css( "position" ), |
127 position: this.element.css( "position" ), |
118 width: this.element.outerWidth(), |
128 width: this.element.outerWidth(), |
119 height: this.element.outerHeight(), |
129 height: this.element.outerHeight(), |
120 top: this.element.css( "top" ), |
130 top: this.element.css( "top" ), |
121 left: this.element.css( "left" ) |
131 left: this.element.css( "left" ) |
182 }, |
192 }, |
183 |
193 |
184 _destroy: function() { |
194 _destroy: function() { |
185 |
195 |
186 this._mouseDestroy(); |
196 this._mouseDestroy(); |
|
197 this._addedHandles.remove(); |
187 |
198 |
188 var wrapper, |
199 var wrapper, |
189 _destroy = function( exp ) { |
200 _destroy = function( exp ) { |
190 $( exp ) |
201 $( exp ) |
191 .removeData( "resizable" ) |
202 .removeData( "resizable" ) |
192 .removeData( "ui-resizable" ) |
203 .removeData( "ui-resizable" ) |
193 .off( ".resizable" ) |
204 .off( ".resizable" ); |
194 .find( ".ui-resizable-handle" ) |
|
195 .remove(); |
|
196 }; |
205 }; |
197 |
206 |
198 // TODO: Unwrap at same DOM position |
207 // TODO: Unwrap at same DOM position |
199 if ( this.elementIsWrapper ) { |
208 if ( this.elementIsWrapper ) { |
200 _destroy( this.element ); |
209 _destroy( this.element ); |
217 |
226 |
218 _setOption: function( key, value ) { |
227 _setOption: function( key, value ) { |
219 this._super( key, value ); |
228 this._super( key, value ); |
220 |
229 |
221 switch ( key ) { |
230 switch ( key ) { |
222 case "handles": |
231 case "handles": |
223 this._removeHandles(); |
232 this._removeHandles(); |
224 this._setupHandles(); |
233 this._setupHandles(); |
225 break; |
234 break; |
226 default: |
235 case "aspectRatio": |
227 break; |
236 this._aspectRatio = !!value; |
|
237 break; |
|
238 default: |
|
239 break; |
228 } |
240 } |
229 }, |
241 }, |
230 |
242 |
231 _setupHandles: function() { |
243 _setupHandles: function() { |
232 var o = this.options, handle, i, n, hname, axis, that = this; |
244 var o = this.options, handle, i, n, hname, axis, that = this; |
242 ne: ".ui-resizable-ne", |
254 ne: ".ui-resizable-ne", |
243 nw: ".ui-resizable-nw" |
255 nw: ".ui-resizable-nw" |
244 } ); |
256 } ); |
245 |
257 |
246 this._handles = $(); |
258 this._handles = $(); |
|
259 this._addedHandles = $(); |
247 if ( this.handles.constructor === String ) { |
260 if ( this.handles.constructor === String ) { |
248 |
261 |
249 if ( this.handles === "all" ) { |
262 if ( this.handles === "all" ) { |
250 this.handles = "n,e,s,w,se,sw,ne,nw"; |
263 this.handles = "n,e,s,w,se,sw,ne,nw"; |
251 } |
264 } |
253 n = this.handles.split( "," ); |
266 n = this.handles.split( "," ); |
254 this.handles = {}; |
267 this.handles = {}; |
255 |
268 |
256 for ( i = 0; i < n.length; i++ ) { |
269 for ( i = 0; i < n.length; i++ ) { |
257 |
270 |
258 handle = $.trim( n[ i ] ); |
271 handle = String.prototype.trim.call( n[ i ] ); |
259 hname = "ui-resizable-" + handle; |
272 hname = "ui-resizable-" + handle; |
260 axis = $( "<div>" ); |
273 axis = $( "<div>" ); |
261 this._addClass( axis, "ui-resizable-handle " + hname ); |
274 this._addClass( axis, "ui-resizable-handle " + hname ); |
262 |
275 |
263 axis.css( { zIndex: o.zIndex } ); |
276 axis.css( { zIndex: o.zIndex } ); |
264 |
277 |
265 this.handles[ handle ] = ".ui-resizable-" + handle; |
278 this.handles[ handle ] = ".ui-resizable-" + handle; |
266 this.element.append( axis ); |
279 if ( !this.element.children( this.handles[ handle ] ).length ) { |
|
280 this.element.append( axis ); |
|
281 this._addedHandles = this._addedHandles.add( axis ); |
|
282 } |
267 } |
283 } |
268 |
284 |
269 } |
285 } |
270 |
286 |
271 this._renderAxis = function( target ) { |
287 this._renderAxis = function( target ) { |
282 this.handles[ i ] = $( this.handles[ i ] ); |
298 this.handles[ i ] = $( this.handles[ i ] ); |
283 this._on( this.handles[ i ], { "mousedown": that._mouseDown } ); |
299 this._on( this.handles[ i ], { "mousedown": that._mouseDown } ); |
284 } |
300 } |
285 |
301 |
286 if ( this.elementIsWrapper && |
302 if ( this.elementIsWrapper && |
287 this.originalElement[ 0 ] |
303 this.originalElement[ 0 ] |
288 .nodeName |
304 .nodeName |
289 .match( /^(textarea|input|select|button)$/i ) ) { |
305 .match( /^(textarea|input|select|button)$/i ) ) { |
290 axis = $( this.handles[ i ], this.element ); |
306 axis = $( this.handles[ i ], this.element ); |
291 |
307 |
292 padWrapper = /sw|ne|nw|se|n|s/.test( i ) ? |
308 padWrapper = /sw|ne|nw|se|n|s/.test( i ) ? |
293 axis.outerHeight() : |
309 axis.outerHeight() : |
294 axis.outerWidth(); |
310 axis.outerWidth(); |
295 |
311 |
296 padPos = [ "padding", |
312 padPos = [ "padding", |
297 /ne|nw|n/.test( i ) ? "Top" : |
313 /ne|nw|n/.test( i ) ? "Top" : |
298 /se|sw|s/.test( i ) ? "Bottom" : |
314 /se|sw|s/.test( i ) ? "Bottom" : |
299 /^e$/.test( i ) ? "Right" : "Left" ].join( "" ); |
315 /^e$/.test( i ) ? "Right" : "Left" ].join( "" ); |
300 |
316 |
301 target.css( padPos, padWrapper ); |
317 target.css( padPos, padWrapper ); |
302 |
318 |
303 this._proportionallyResize(); |
319 this._proportionallyResize(); |
304 } |
320 } |
366 |
382 |
367 this.offset = this.helper.offset(); |
383 this.offset = this.helper.offset(); |
368 this.position = { left: curleft, top: curtop }; |
384 this.position = { left: curleft, top: curtop }; |
369 |
385 |
370 this.size = this._helper ? { |
386 this.size = this._helper ? { |
371 width: this.helper.width(), |
387 width: this.helper.width(), |
372 height: this.helper.height() |
388 height: this.helper.height() |
373 } : { |
389 } : { |
374 width: el.width(), |
390 width: el.width(), |
375 height: el.height() |
391 height: el.height() |
376 }; |
392 }; |
377 |
393 |
378 this.originalSize = this._helper ? { |
394 this.originalSize = this._helper ? { |
379 width: el.outerWidth(), |
395 width: el.outerWidth(), |
380 height: el.outerHeight() |
396 height: el.outerHeight() |
381 } : { |
397 } : { |
382 width: el.width(), |
398 width: el.width(), |
383 height: el.height() |
399 height: el.height() |
384 }; |
400 }; |
385 |
401 |
386 this.sizeDiff = { |
402 this.sizeDiff = { |
387 width: el.outerWidth() - el.width(), |
403 width: el.outerWidth() - el.width(), |
388 height: el.outerHeight() - el.height() |
404 height: el.outerHeight() - el.height() |
389 }; |
405 }; |
707 var el = this.element, o = this.options; |
723 var el = this.element, o = this.options; |
708 this.elementOffset = el.offset(); |
724 this.elementOffset = el.offset(); |
709 |
725 |
710 if ( this._helper ) { |
726 if ( this._helper ) { |
711 |
727 |
712 this.helper = this.helper || $( "<div style='overflow:hidden;'></div>" ); |
728 this.helper = this.helper || $( "<div></div>" ).css( { overflow: "hidden" } ); |
713 |
729 |
714 this._addClass( this.helper, this._helper ); |
730 this._addClass( this.helper, this._helper ); |
715 this.helper.css( { |
731 this.helper.css( { |
716 width: this.element.outerWidth(), |
732 width: this.element.outerWidth(), |
717 height: this.element.outerHeight(), |
733 height: this.element.outerHeight(), |
764 } |
780 } |
765 }, |
781 }, |
766 |
782 |
767 _propagate: function( n, event ) { |
783 _propagate: function( n, event ) { |
768 $.ui.plugin.call( this, n, [ event, this.ui() ] ); |
784 $.ui.plugin.call( this, n, [ event, this.ui() ] ); |
769 ( n !== "resize" && this._trigger( n, event, this.ui() ) ); |
785 if ( n !== "resize" ) { |
|
786 this._trigger( n, event, this.ui() ); |
|
787 } |
770 }, |
788 }, |
771 |
789 |
772 plugins: {}, |
790 plugins: {}, |
773 |
791 |
774 ui: function() { |
792 ui: function() { |
885 }; |
903 }; |
886 |
904 |
887 co = that.containerOffset; |
905 co = that.containerOffset; |
888 ch = that.containerSize.height; |
906 ch = that.containerSize.height; |
889 cw = that.containerSize.width; |
907 cw = that.containerSize.width; |
890 width = ( that._hasScroll ( ce, "left" ) ? ce.scrollWidth : cw ); |
908 width = ( that._hasScroll( ce, "left" ) ? ce.scrollWidth : cw ); |
891 height = ( that._hasScroll ( ce ) ? ce.scrollHeight : ch ) ; |
909 height = ( that._hasScroll( ce ) ? ce.scrollHeight : ch ); |
892 |
910 |
893 that.parentData = { |
911 that.parentData = { |
894 element: ce, |
912 element: ce, |
895 left: co.left, |
913 left: co.left, |
896 top: co.top, |
914 top: co.top, |
1043 width: ( that.size.width - os.width ) || 0, |
1061 width: ( that.size.width - os.width ) || 0, |
1044 top: ( that.position.top - op.top ) || 0, |
1062 top: ( that.position.top - op.top ) || 0, |
1045 left: ( that.position.left - op.left ) || 0 |
1063 left: ( that.position.left - op.left ) || 0 |
1046 }; |
1064 }; |
1047 |
1065 |
1048 $( o.alsoResize ).each( function() { |
1066 $( o.alsoResize ).each( function() { |
1049 var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {}, |
1067 var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {}, |
1050 css = el.parents( ui.originalElement[ 0 ] ).length ? |
1068 css = el.parents( ui.originalElement[ 0 ] ).length ? |
1051 [ "width", "height" ] : |
1069 [ "width", "height" ] : |
1052 [ "width", "height", "top", "left" ]; |
1070 [ "width", "height", "top", "left" ]; |
1053 |
1071 |
1054 $.each( css, function( i, prop ) { |
1072 $.each( css, function( i, prop ) { |
1055 var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 ); |
1073 var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 ); |
1056 if ( sum && sum >= 0 ) { |
1074 if ( sum && sum >= 0 ) { |
1057 style[ prop ] = sum || null; |
1075 style[ prop ] = sum || null; |
1058 } |
1076 } |
1059 } ); |
|
1060 |
|
1061 el.css( style ); |
|
1062 } ); |
1077 } ); |
|
1078 |
|
1079 el.css( style ); |
|
1080 } ); |
1063 }, |
1081 }, |
1064 |
1082 |
1065 stop: function() { |
1083 stop: function() { |
1066 $( this ).removeData( "ui-resizable-alsoresize" ); |
1084 $( this ).removeData( "ui-resizable-alsoresize" ); |
1067 } |
1085 } |