Skip to content
Permalink
Browse files

Resizable: Implement `setOption` for handles

Fixes #3423
Closes gh-1666
  • Loading branch information...
kdinev authored and scottgonzalez committed Jan 21, 2016
1 parent a1905e2 commit 623b64eefc36ac841fde1e33db15903066cef94c
Showing with 106 additions and 54 deletions.
  1. +27 −0 tests/unit/resizable/options.js
  2. +79 −54 ui/widgets/resizable.js
@@ -410,6 +410,33 @@ test( "zIndex, applied to all handles", function() {
} );
} );

test( "setOption handles", function() {
expect( 11 );

var target = $( "<div></div>" ).resizable();

function checkHandles( expectedHandles ) {
expectedHandles = expectedHandles.map( function( value ) {
return ".ui-resizable-" + value;
} );

var handles = target.find( ".ui-resizable-handle" );

equal( handles.length, expectedHandles.length, "Correct number of handles found" );
$.each( expectedHandles, function( index, handleClass ) {
equal( handles.filter( handleClass ).length, 1, "Found " + handleClass );
} );
}

checkHandles( [ "e", "s", "se" ] );

target.resizable( "option", "handles", "n, w, nw" );
checkHandles( [ "n", "w", "nw" ] );

target.resizable( "option", "handles", "s, w" );
checkHandles( [ "s", "w" ] );
} );

test( "alsoResize + containment", function() {
expect( 4 );
var other = $( "<div>" )
@@ -99,9 +99,9 @@ $.widget( "ui.resizable", $.ui.mouse, {

_create: function() {

var n, i, handle, axis, hname, margins,
that = this,
o = this.options;
var margins,
o = this.options,
that = this;
this._addClass( "ui-resizable" );

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

this._setupHandles();

if ( o.autoHide ) {
$( this.element )
.on( "mouseenter", function() {
if ( o.disabled ) {
return;
}
that._removeClass( "ui-resizable-autohide" );
that._handles.show();
} )
.on( "mouseleave", function() {
if ( o.disabled ) {
return;
}
if ( !that.resizing ) {
that._addClass( "ui-resizable-autohide" );
that._handles.hide();
}
} );
}

this._mouseInit();
},

_destroy: function() {

this._mouseDestroy();

var wrapper,
_destroy = function( exp ) {
$( exp )
.removeData( "resizable" )
.removeData( "ui-resizable" )
.off( ".resizable" )
.find( ".ui-resizable-handle" )
.remove();
};

// TODO: Unwrap at same DOM position
if ( this.elementIsWrapper ) {
_destroy( this.element );
wrapper = this.element;
this.originalElement.css( {
position: wrapper.css( "position" ),
width: wrapper.outerWidth(),
height: wrapper.outerHeight(),
top: wrapper.css( "top" ),
left: wrapper.css( "left" )
} ).insertAfter( wrapper );
wrapper.remove();
}

this.originalElement.css( "resize", this.originalResizeStyle );
_destroy( this.originalElement );

return this;
},

_setOption: function( key, value ) {
this._super( key, value );

switch ( key ) {
case "handles":
this._removeHandles();
this._setupHandles();
break;
default:
break;
}
},

_setupHandles: function() {
var o = this.options, handle, i, n, hname, axis, that = this;
this.handles = o.handles ||
( !$( ".ui-resizable-handle", this.element ).length ?
"e,s,se" : {
@@ -250,60 +324,11 @@ $.widget( "ui.resizable", $.ui.mouse, {
if ( o.autoHide ) {
this._handles.hide();
this._addClass( "ui-resizable-autohide" );
$( this.element )
.on( "mouseenter", function() {
if ( o.disabled ) {
return;
}
that._removeClass( "ui-resizable-autohide" );
that._handles.show();
} )
.on( "mouseleave", function() {
if ( o.disabled ) {
return;
}
if ( !that.resizing ) {
that._addClass( "ui-resizable-autohide" );
that._handles.hide();
}
} );
}

this._mouseInit();
},

_destroy: function() {

this._mouseDestroy();

var wrapper,
_destroy = function( exp ) {
$( exp )
.removeData( "resizable" )
.removeData( "ui-resizable" )
.off( ".resizable" )
.find( ".ui-resizable-handle" )
.remove();
};

// TODO: Unwrap at same DOM position
if ( this.elementIsWrapper ) {
_destroy( this.element );
wrapper = this.element;
this.originalElement.css( {
position: wrapper.css( "position" ),
width: wrapper.outerWidth(),
height: wrapper.outerHeight(),
top: wrapper.css( "top" ),
left: wrapper.css( "left" )
} ).insertAfter( wrapper );
wrapper.remove();
}

this.originalElement.css( "resize", this.originalResizeStyle );
_destroy( this.originalElement );

return this;
_removeHandles: function() {
this._handles.remove();
},

_mouseCapture: function( event ) {

0 comments on commit 623b64e

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.