Skip to content

Commit 623b64e

Browse files
kdinevscottgonzalez
authored andcommitted
Resizable: Implement setOption for handles
Fixes #3423 Closes gh-1666
1 parent a1905e2 commit 623b64e

File tree

2 files changed

+106
-54
lines changed

2 files changed

+106
-54
lines changed

tests/unit/resizable/options.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -410,6 +410,33 @@ test( "zIndex, applied to all handles", function() {
410410
} );
411411
} );
412412

413+
test( "setOption handles", function() {
414+
expect( 11 );
415+
416+
var target = $( "<div></div>" ).resizable();
417+
418+
function checkHandles( expectedHandles ) {
419+
expectedHandles = expectedHandles.map( function( value ) {
420+
return ".ui-resizable-" + value;
421+
} );
422+
423+
var handles = target.find( ".ui-resizable-handle" );
424+
425+
equal( handles.length, expectedHandles.length, "Correct number of handles found" );
426+
$.each( expectedHandles, function( index, handleClass ) {
427+
equal( handles.filter( handleClass ).length, 1, "Found " + handleClass );
428+
} );
429+
}
430+
431+
checkHandles( [ "e", "s", "se" ] );
432+
433+
target.resizable( "option", "handles", "n, w, nw" );
434+
checkHandles( [ "n", "w", "nw" ] );
435+
436+
target.resizable( "option", "handles", "s, w" );
437+
checkHandles( [ "s", "w" ] );
438+
} );
439+
413440
test( "alsoResize + containment", function() {
414441
expect( 4 );
415442
var other = $( "<div>" )

ui/widgets/resizable.js

Lines changed: 79 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,9 @@ $.widget( "ui.resizable", $.ui.mouse, {
9999

100100
_create: function() {
101101

102-
var n, i, handle, axis, hname, margins,
103-
that = this,
104-
o = this.options;
102+
var margins,
103+
o = this.options,
104+
that = this;
105105
this._addClass( "ui-resizable" );
106106

107107
$.extend( this, {
@@ -159,6 +159,80 @@ $.widget( "ui.resizable", $.ui.mouse, {
159159
this._proportionallyResize();
160160
}
161161

162+
this._setupHandles();
163+
164+
if ( o.autoHide ) {
165+
$( this.element )
166+
.on( "mouseenter", function() {
167+
if ( o.disabled ) {
168+
return;
169+
}
170+
that._removeClass( "ui-resizable-autohide" );
171+
that._handles.show();
172+
} )
173+
.on( "mouseleave", function() {
174+
if ( o.disabled ) {
175+
return;
176+
}
177+
if ( !that.resizing ) {
178+
that._addClass( "ui-resizable-autohide" );
179+
that._handles.hide();
180+
}
181+
} );
182+
}
183+
184+
this._mouseInit();
185+
},
186+
187+
_destroy: function() {
188+
189+
this._mouseDestroy();
190+
191+
var wrapper,
192+
_destroy = function( exp ) {
193+
$( exp )
194+
.removeData( "resizable" )
195+
.removeData( "ui-resizable" )
196+
.off( ".resizable" )
197+
.find( ".ui-resizable-handle" )
198+
.remove();
199+
};
200+
201+
// TODO: Unwrap at same DOM position
202+
if ( this.elementIsWrapper ) {
203+
_destroy( this.element );
204+
wrapper = this.element;
205+
this.originalElement.css( {
206+
position: wrapper.css( "position" ),
207+
width: wrapper.outerWidth(),
208+
height: wrapper.outerHeight(),
209+
top: wrapper.css( "top" ),
210+
left: wrapper.css( "left" )
211+
} ).insertAfter( wrapper );
212+
wrapper.remove();
213+
}
214+
215+
this.originalElement.css( "resize", this.originalResizeStyle );
216+
_destroy( this.originalElement );
217+
218+
return this;
219+
},
220+
221+
_setOption: function( key, value ) {
222+
this._super( key, value );
223+
224+
switch ( key ) {
225+
case "handles":
226+
this._removeHandles();
227+
this._setupHandles();
228+
break;
229+
default:
230+
break;
231+
}
232+
},
233+
234+
_setupHandles: function() {
235+
var o = this.options, handle, i, n, hname, axis, that = this;
162236
this.handles = o.handles ||
163237
( !$( ".ui-resizable-handle", this.element ).length ?
164238
"e,s,se" : {
@@ -250,60 +324,11 @@ $.widget( "ui.resizable", $.ui.mouse, {
250324
if ( o.autoHide ) {
251325
this._handles.hide();
252326
this._addClass( "ui-resizable-autohide" );
253-
$( this.element )
254-
.on( "mouseenter", function() {
255-
if ( o.disabled ) {
256-
return;
257-
}
258-
that._removeClass( "ui-resizable-autohide" );
259-
that._handles.show();
260-
} )
261-
.on( "mouseleave", function() {
262-
if ( o.disabled ) {
263-
return;
264-
}
265-
if ( !that.resizing ) {
266-
that._addClass( "ui-resizable-autohide" );
267-
that._handles.hide();
268-
}
269-
} );
270327
}
271-
272-
this._mouseInit();
273328
},
274329

275-
_destroy: function() {
276-
277-
this._mouseDestroy();
278-
279-
var wrapper,
280-
_destroy = function( exp ) {
281-
$( exp )
282-
.removeData( "resizable" )
283-
.removeData( "ui-resizable" )
284-
.off( ".resizable" )
285-
.find( ".ui-resizable-handle" )
286-
.remove();
287-
};
288-
289-
// TODO: Unwrap at same DOM position
290-
if ( this.elementIsWrapper ) {
291-
_destroy( this.element );
292-
wrapper = this.element;
293-
this.originalElement.css( {
294-
position: wrapper.css( "position" ),
295-
width: wrapper.outerWidth(),
296-
height: wrapper.outerHeight(),
297-
top: wrapper.css( "top" ),
298-
left: wrapper.css( "left" )
299-
} ).insertAfter( wrapper );
300-
wrapper.remove();
301-
}
302-
303-
this.originalElement.css( "resize", this.originalResizeStyle );
304-
_destroy( this.originalElement );
305-
306-
return this;
330+
_removeHandles: function() {
331+
this._handles.remove();
307332
},
308333

309334
_mouseCapture: function( event ) {

0 commit comments

Comments
 (0)