From 7c2e65074760143f0ed3eb0d35d0ce3e6dbb9fff Mon Sep 17 00:00:00 2001 From: Patricia Juarez Date: Thu, 14 Nov 2013 13:40:57 +0100 Subject: [PATCH 1/3] Resizable: Modified to allow jquery objects as handles. Fixed #9658: Custom handlers did not work as jquery objects (outside the resizable element) --- tests/unit/resizable/resizable.html | 1 + tests/unit/resizable/resizable_options.js | 14 +++++++++++++ ui/resizable.js | 24 ++++++++++++++++++++--- 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 5668c909a22..a44346e7cba 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -69,6 +69,7 @@
I'm a resizable.
+
diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index c46801bc54d..50f6defe587 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -375,6 +375,20 @@ test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1 equal( target.height(), 100, "compare maxHeight" ); }); + +test("custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", function () { + expect(2); + + var handle = "#resizer1", target = $("#resizable1").resizable({ handles: { "s": $("#resizer1") }, containment: "parent" }); + + TestHelpers.resizable.drag(handle, 0, 70); + equal(target.height(), 170, "compare height"); + + TestHelpers.resizable.drag(handle, 0, -70); + equal(target.height(), 100, "compare height"); +}); + + test("zIndex, applied to all handles", function() { expect(8); diff --git a/ui/resizable.js b/ui/resizable.js index a02837a194f..2cd996563dd 100644 --- a/ui/resizable.js +++ b/ui/resizable.js @@ -226,9 +226,14 @@ $.widget("ui.resizable", $.ui.mouse, { // TODO: make renderAxis a prototype function this._renderAxis(this.element); - - this._handles = $(".ui-resizable-handle", this.element) - .disableSelection(); + + this._handles = $(".ui-resizable-handle", this.element); + + //Add the custom handles of jquery Objects outside this.element + for (i in this.handles) { + this._handles = this._handles.add(this.handles[i]); + } + this._handles.disableSelection(); this._handles.mouseover(function() { if (!that.resizing) { @@ -263,6 +268,19 @@ $.widget("ui.resizable", $.ui.mouse, { this._mouseInit(); + //Bind the mousedown event directly in the custom jquery elements + if (o.handles.constructor !== String) { + for (i in o.handles) { + handle = o.handles[i]; + if (handle instanceof $) { + handle.bind("mousedown." + this.widgetName, onMouseDownCustom); + } + } + } + + function onMouseDownCustom(event) { + return that._mouseDown(event); + } }, _destroy: function() { From d6746e959648a40e3c2557a41aef34efff041162 Mon Sep 17 00:00:00 2001 From: Patricia Juarez Date: Fri, 15 Nov 2013 12:27:05 +0100 Subject: [PATCH 2/3] Added some optimizations recommended by scottgonzalez --- ui/resizable.js | 39 +++++++++++++++------------------------ 1 file changed, 15 insertions(+), 24 deletions(-) diff --git a/ui/resizable.js b/ui/resizable.js index 2cd996563dd..4ffdbbeaaaf 100644 --- a/ui/resizable.js +++ b/ui/resizable.js @@ -160,7 +160,8 @@ $.widget("ui.resizable", $.ui.mouse, { nw: ".ui-resizable-nw" } ); - if (this.handles.constructor === String) { + this._handles = $(); + if(this.handles.constructor === String) { if ( this.handles === "all") { this.handles = "n,e,s,w,se,sw,ne,nw"; @@ -190,7 +191,11 @@ $.widget("ui.resizable", $.ui.mouse, { this._renderAxis = function(target) { - var i, axis, padPos, padWrapper; + var i, axis, padPos, padWrapper, mouseDownHandlers = { + mousedown: function (event) { + return that._mouseDown(event); + } + }; target = target || this.element; @@ -199,6 +204,9 @@ $.widget("ui.resizable", $.ui.mouse, { if (this.handles[i].constructor === String) { this.handles[i] = this.element.children( this.handles[ i ] ).first().show(); } + else if (this.handles[i] instanceof $) { + this._on(this.handles[i], mouseDownHandlers); + } if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/textarea|input|select|button/i)) { @@ -217,8 +225,10 @@ $.widget("ui.resizable", $.ui.mouse, { } - // TODO: What's that good for? There's not anything to be executed left - if (!$(this.handles[i]).length) { + this._handles = this._handles.add(this.handles[i]); + + //TODO: What's that good for? There's not anything to be executed left + if(!$(this.handles[i]).length) { continue; } } @@ -227,12 +237,7 @@ $.widget("ui.resizable", $.ui.mouse, { // TODO: make renderAxis a prototype function this._renderAxis(this.element); - this._handles = $(".ui-resizable-handle", this.element); - - //Add the custom handles of jquery Objects outside this.element - for (i in this.handles) { - this._handles = this._handles.add(this.handles[i]); - } + this._handles = this._handles.add($(".ui-resizable-handle", this.element)); this._handles.disableSelection(); this._handles.mouseover(function() { @@ -267,20 +272,6 @@ $.widget("ui.resizable", $.ui.mouse, { } this._mouseInit(); - - //Bind the mousedown event directly in the custom jquery elements - if (o.handles.constructor !== String) { - for (i in o.handles) { - handle = o.handles[i]; - if (handle instanceof $) { - handle.bind("mousedown." + this.widgetName, onMouseDownCustom); - } - } - } - - function onMouseDownCustom(event) { - return that._mouseDown(event); - } }, _destroy: function() { From 71d8a5f4c3883afa913cf4b67d282bd82f9433fc Mon Sep 17 00:00:00 2001 From: Patricia Juarez Date: Fri, 7 Nov 2014 13:17:14 +0100 Subject: [PATCH 3/3] Changed resizable to support also DOMElements --- tests/unit/resizable/resizable_options.js | 13 +++++++++++++ ui/resizable.js | 7 ++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index 50f6defe587..5643f13d87a 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -389,6 +389,19 @@ test("custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", }); +test("custom handles { handles: { 's': $('#resizer1')[0], containment: 'parent' }", function () { + expect(2); + + var handle = "#resizer1", target = $("#resizable1").resizable({ handles: { "s": $("#resizer1")[0] }, containment: "parent" }); + + TestHelpers.resizable.drag(handle, 0, 70); + equal(target.height(), 170, "compare height"); + + TestHelpers.resizable.drag(handle, 0, -70); + equal(target.height(), 100, "compare height"); +}); + + test("zIndex, applied to all handles", function() { expect(8); diff --git a/ui/resizable.js b/ui/resizable.js index 4ffdbbeaaaf..d446a9762b5 100644 --- a/ui/resizable.js +++ b/ui/resizable.js @@ -204,9 +204,10 @@ $.widget("ui.resizable", $.ui.mouse, { if (this.handles[i].constructor === String) { this.handles[i] = this.element.children( this.handles[ i ] ).first().show(); } - else if (this.handles[i] instanceof $) { - this._on(this.handles[i], mouseDownHandlers); - } + else if (this.handles[i] && (this.handles[i].jquery || this.handles[i].nodeType)) { + this.handles[i] = $(this.handles[i]); + this._on(this.handles[i], mouseDownHandlers); + } if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/textarea|input|select|button/i)) {