Skip to content

Commit 29f465e

Browse files
committed
Resizable: Implementing setOption for handles
1 parent 2775253 commit 29f465e

File tree

3 files changed

+118
-53
lines changed

3 files changed

+118
-53
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
dist
22
node_modules
3+
bower_components
34
.sizecache.json

tests/unit/resizable/options.js

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

413+
test( "setOption handles", function() {
414+
expect( 8 );
415+
416+
var target = $( "<div></div>" ).resizable(),
417+
handles = { "ui-resizable-e": false, "ui-resizable-s": false, "ui-resizable-se": false };
418+
419+
function checkHandles( handle, handles ) {
420+
var found = false,
421+
key,
422+
$handle = $( handle );
423+
for ( key in handles ) {
424+
if ( handles.hasOwnProperty( key ) ) {
425+
if ( $handle.hasClass( key ) ) {
426+
found = true;
427+
break;
428+
}
429+
}
430+
}
431+
ok ( found && !handles[ key ], "Checking whether " + key + " handle was rendered and was not rendered twice" );
432+
handles[ key ] = found;
433+
found = false;
434+
}
435+
436+
target.children( ".ui-resizable-handle" ).each( function( index, handle ) {
437+
checkHandles( handle, handles );
438+
} );
439+
440+
target.resizable( "option", "handles", "n, w, nw" );
441+
handles = { "ui-resizable-n": false, "ui-resizable-w": false, "ui-resizable-nw": false };
442+
target.children( ".ui-resizable-handle" ).each( function( index, handle ) {
443+
checkHandles( handle, handles );
444+
} );
445+
446+
target.resizable( "option", "handles", "s, w" );
447+
handles = { "ui-resizable-s": false, "ui-resizable-w": false };
448+
target.children( ".ui-resizable-handle" ).each( function( index, handle ) {
449+
checkHandles( handle, handles );
450+
} );
451+
} );
452+
413453
test( "alsoResize + containment", function() {
414454
expect( 4 );
415455
var other = $( "<div>" )

ui/widgets/resizable.js

Lines changed: 77 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,7 @@ $.widget( "ui.resizable", $.ui.mouse, {
9999

100100
_create: function() {
101101

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

@@ -159,6 +158,80 @@ $.widget( "ui.resizable", $.ui.mouse, {
159158
this._proportionallyResize();
160159
}
161160

161+
this._setupHandles();
162+
163+
if ( o.autoHide ) {
164+
$( this.element )
165+
.on( "mouseenter", function() {
166+
if ( o.disabled ) {
167+
return;
168+
}
169+
that._removeClass( "ui-resizable-autohide" );
170+
that._handles.show();
171+
} )
172+
.on( "mouseleave", function() {
173+
if ( o.disabled ) {
174+
return;
175+
}
176+
if ( !that.resizing ) {
177+
that._addClass( "ui-resizable-autohide" );
178+
that._handles.hide();
179+
}
180+
} );
181+
}
182+
183+
this._mouseInit();
184+
},
185+
186+
_destroy: function() {
187+
188+
this._mouseDestroy();
189+
190+
var wrapper,
191+
_destroy = function( exp ) {
192+
$( exp )
193+
.removeData( "resizable" )
194+
.removeData( "ui-resizable" )
195+
.off( ".resizable" )
196+
.find( ".ui-resizable-handle" )
197+
.remove();
198+
};
199+
200+
// TODO: Unwrap at same DOM position
201+
if ( this.elementIsWrapper ) {
202+
_destroy( this.element );
203+
wrapper = this.element;
204+
this.originalElement.css( {
205+
position: wrapper.css( "position" ),
206+
width: wrapper.outerWidth(),
207+
height: wrapper.outerHeight(),
208+
top: wrapper.css( "top" ),
209+
left: wrapper.css( "left" )
210+
} ).insertAfter( wrapper );
211+
wrapper.remove();
212+
}
213+
214+
this.originalElement.css( "resize", this.originalResizeStyle );
215+
_destroy( this.originalElement );
216+
217+
return this;
218+
},
219+
220+
_setOption: function( key, value ) {
221+
this._super( key, value );
222+
223+
switch ( key ) {
224+
case "handles":
225+
this._removeHandles();
226+
this._setupHandles();
227+
break;
228+
default:
229+
break;
230+
}
231+
},
232+
233+
_setupHandles: function() {
234+
var o = this.options, handle, i, n, hname, axis, that = this;
162235
this.handles = o.handles ||
163236
( !$( ".ui-resizable-handle", this.element ).length ?
164237
"e,s,se" : {
@@ -250,60 +323,11 @@ $.widget( "ui.resizable", $.ui.mouse, {
250323
if ( o.autoHide ) {
251324
this._handles.hide();
252325
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-
} );
270326
}
271-
272-
this._mouseInit();
273327
},
274328

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;
329+
_removeHandles: function() {
330+
this._handles.remove();
307331
},
308332

309333
_mouseCapture: function( event ) {

0 commit comments

Comments
 (0)