From 29f465ebf10d0f6821ddb199acec07883120f11e Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Thu, 21 Jan 2016 16:40:23 +0200 Subject: [PATCH 1/3] Resizable: Implementing setOption for handles --- .gitignore | 1 + tests/unit/resizable/options.js | 40 ++++++++++ ui/widgets/resizable.js | 130 +++++++++++++++++++------------- 3 files changed, 118 insertions(+), 53 deletions(-) diff --git a/.gitignore b/.gitignore index a8b8bc7ce37..e8f1916dc82 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ dist node_modules +bower_components .sizecache.json \ No newline at end of file diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js index 2d44eb8ee8a..9c338dfa807 100644 --- a/tests/unit/resizable/options.js +++ b/tests/unit/resizable/options.js @@ -410,6 +410,46 @@ test( "zIndex, applied to all handles", function() { } ); } ); +test( "setOption handles", function() { + expect( 8 ); + + var target = $( "
" ).resizable(), + handles = { "ui-resizable-e": false, "ui-resizable-s": false, "ui-resizable-se": false }; + + function checkHandles( handle, handles ) { + var found = false, + key, + $handle = $( handle ); + for ( key in handles ) { + if ( handles.hasOwnProperty( key ) ) { + if ( $handle.hasClass( key ) ) { + found = true; + break; + } + } + } + ok ( found && !handles[ key ], "Checking whether " + key + " handle was rendered and was not rendered twice" ); + handles[ key ] = found; + found = false; + } + + target.children( ".ui-resizable-handle" ).each( function( index, handle ) { + checkHandles( handle, handles ); + } ); + + target.resizable( "option", "handles", "n, w, nw" ); + handles = { "ui-resizable-n": false, "ui-resizable-w": false, "ui-resizable-nw": false }; + target.children( ".ui-resizable-handle" ).each( function( index, handle ) { + checkHandles( handle, handles ); + } ); + + target.resizable( "option", "handles", "s, w" ); + handles = { "ui-resizable-s": false, "ui-resizable-w": false }; + target.children( ".ui-resizable-handle" ).each( function( index, handle ) { + checkHandles( handle, handles ); + } ); +} ); + test( "alsoResize + containment", function() { expect( 4 ); var other = $( "
" ) diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js index 88ad4118064..436e6784d6d 100644 --- a/ui/widgets/resizable.js +++ b/ui/widgets/resizable.js @@ -99,8 +99,7 @@ $.widget( "ui.resizable", $.ui.mouse, { _create: function() { - var n, i, handle, axis, hname, margins, - that = this, + var margins, o = this.options; this._addClass( "ui-resizable" ); @@ -159,6 +158,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 +323,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 ) { From ac23525409781ee0e6ec1ca86d10364287637357 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Thu, 17 Mar 2016 13:41:37 +0200 Subject: [PATCH 2/3] Resizable: Implementing setOption for handles Removing the added bower_components to .gitignore --- .gitignore | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index e8f1916dc82..be8085de342 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ dist node_modules -bower_components -.sizecache.json \ No newline at end of file +.sizecache.json From 6e415d6a8e393c316147bca9834640fcc5d18bf6 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Thu, 17 Mar 2016 14:26:10 +0200 Subject: [PATCH 3/3] Update resizable.js --- ui/widgets/resizable.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js index 436e6784d6d..664c6bfa3a6 100644 --- a/ui/widgets/resizable.js +++ b/ui/widgets/resizable.js @@ -100,7 +100,8 @@ $.widget( "ui.resizable", $.ui.mouse, { _create: function() { var margins, - o = this.options; + o = this.options, + that = this; this._addClass( "ui-resizable" ); $.extend( this, {