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.