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>" )
View
@@ -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.