From 56971056a6419b9165f5ffc10520a075a54c7787 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 12:19:58 +0100 Subject: [PATCH 01/14] Fized resizable bug "Custom handles do not work" I needed to use as handle a div outside the resizable element. So I tried to specify the jquery element as the documentation said but it did not work. handles: { "s": $("#customResizableHandle") }, The documentation said in handles option: Object: The following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly. Note: When generating your own handles, each handle must have the ui-resizable-handle class, as well as the appropriate ui-resizable-{direction} class, .e.g., ui-resizable-s. I also found the next ticket: Ticket: http://bugs.jqueryui.com/ticket/4310 (2009 bug, still in last version) My edition fix that bug (but I need to test it thoroughly). Now I can use a handle outside the element resizable. I hope this help. My solution is based in a previous solution from ylebre http://stackoverflow.com/questions/958419/custom-resizable-handles-in-jquery-ui I had to make some modifications and adaptions to the current version. --- ui/jquery.ui.resizable.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index 040f029f968..55cb7d400dc 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -201,9 +201,12 @@ $.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(); //Matching axis name this._handles.mouseover(function() { @@ -242,6 +245,15 @@ $.widget("ui.resizable", $.ui.mouse, { //Initialize the mouse interaction this._mouseInit(); + //Bind the mousedown event directly in the custom jquery elements + if(o.handles.constructor !== String) { + for (i in o.handles) { + if(o.handles[i].constructor !== String) + o.handles[i].bind('mousedown.'+this.widgetName, function(event) { + return that._mouseDown(event); + }); + } + } }, _destroy: function() { From bff6cc854c836d05a4178acd027dc6b967b075aa Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 13:32:03 +0100 Subject: [PATCH 02/14] Test to try custom element as handler outside the resizable element --- tests/unit/resizable/resizable.html | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 255c988879f..23d574a472c 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -57,6 +57,7 @@

I'm a resizable.
+
solid gray From f4b648decdae97aa7af43d8129ad712be84a6864 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 13:33:13 +0100 Subject: [PATCH 03/14] Update resizable.html --- tests/unit/resizable/resizable.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 23d574a472c..9ddba10ac27 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -57,7 +57,7 @@

I'm a resizable.
-
+
solid gray From c52de838d29ebb20274ca51e50b9234ef1db2f33 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 13:34:40 +0100 Subject: [PATCH 04/14] Added custom handles test to the suite It validates the resize works --- tests/unit/resizable/resizable_options.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index 89504e36366..582955e45b3 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -236,6 +236,19 @@ test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1 equal( target.height(), 100, "compare maxHeight" ); }); + +test("custom handles { handles: { 's': $('#resizer'), containment: 'parent' }", function () { + expect(2); + + var handle = "#resizer", target = $("#resizable1").resizable({ handles: { "s": $("#resizer") }, 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); From b8bfc8a36d56623610bb23d9b58f5b36cdd29e30 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 13:38:22 +0100 Subject: [PATCH 05/14] Some modifications of syntax to make test work --- ui/jquery.ui.resizable.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index 55cb7d400dc..c6a6120864c 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -204,8 +204,9 @@ $.widget("ui.resizable", $.ui.mouse, { this._handles = $(".ui-resizable-handle", this.element); //Add the custom handles of jquery Objects outside this.element - for (i in this.handles) + for (i in this.handles) { this._handles = this._handles.add(this.handles[i]); + } this._handles.disableSelection(); //Matching axis name @@ -246,14 +247,17 @@ $.widget("ui.resizable", $.ui.mouse, { this._mouseInit(); //Bind the mousedown event directly in the custom jquery elements - if(o.handles.constructor !== String) { + if (o.handles.constructor !== String) { for (i in o.handles) { - if(o.handles[i].constructor !== String) - o.handles[i].bind('mousedown.'+this.widgetName, function(event) { - return that._mouseDown(event); - }); + if (o.handles[i].constructor !== String) { + o.handles[i].bind("mousedown." + this.widgetName, onMouseDownCustom); + } } } + + function onMouseDownCustom(event) { + return that._mouseDown(event); + } }, _destroy: function() { From eda4ad6ec4c0f8a0ed2c9b7440be0975f7673381 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 14:24:40 +0100 Subject: [PATCH 06/14] Fix #4310 Before the description does not work. I was focused in jquery objects not selectors. Now all custom handlers work. http://bugs.jqueryui.com/ticket/4310 --- ui/jquery.ui.resizable.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index c6a6120864c..2beb6b24963 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -203,8 +203,12 @@ $.widget("ui.resizable", $.ui.mouse, { 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) { + if (!this.handles[i].length && this.handles[i].selector) { + this.handles[i] = this.handles[i].add($(this.handles[i].selector)); + } this._handles = this._handles.add(this.handles[i]); } this._handles.disableSelection(); @@ -249,8 +253,12 @@ $.widget("ui.resizable", $.ui.mouse, { //Bind the mousedown event directly in the custom jquery elements if (o.handles.constructor !== String) { for (i in o.handles) { - if (o.handles[i].constructor !== String) { - o.handles[i].bind("mousedown." + this.widgetName, onMouseDownCustom); + handle = o.handles[i]; + if (!handle.length && handle.selector) { + handle = handle.add($(handle.selector)); + } + if (handle instanceof $) { + handle.bind("mousedown." + this.widgetName, onMouseDownCustom); } } } From acab5840d4574d4cd5ae9bf328009849179346fc Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 14:29:26 +0100 Subject: [PATCH 07/14] added test for bug #4310 --- tests/unit/resizable/resizable_options.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index 582955e45b3..5c6060b9b65 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -249,6 +249,18 @@ test("custom handles { handles: { 's': $('#resizer'), containment: 'parent' }", equal(target.height(), 100, "compare height"); }); +test("custom handles { handles: { 's': '#resizer', containment: 'parent' }", function () { + expect(2); + + var handle = "#resizer", target = $("#resizable1").resizable({ handles: { "s": "#resizer" }, 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); From c02a7ad0d33952ca0ceb3c2bc63978ca75e58827 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 14:38:00 +0100 Subject: [PATCH 08/14] Modified test of selectors They must not be outside the element resizable as the documentation said, so I maid two resizable elements. If the element is outside the handler must be a jQuery object --- tests/unit/resizable/resizable_options.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index 5c6060b9b65..c3bc8e876a9 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -237,10 +237,10 @@ test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 1 }); -test("custom handles { handles: { 's': $('#resizer'), containment: 'parent' }", function () { +test("custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", function () { expect(2); - var handle = "#resizer", target = $("#resizable1").resizable({ handles: { "s": $("#resizer") }, containment: "parent" }); + var handle = "#resizer1", target = $("#resizable1").resizable({ handles: { "s": $("#resizer1") }, containment: "parent" }); TestHelpers.resizable.drag(handle, 0, 70); equal(target.height(), 170, "compare height"); @@ -249,10 +249,10 @@ test("custom handles { handles: { 's': $('#resizer'), containment: 'parent' }", equal(target.height(), 100, "compare height"); }); -test("custom handles { handles: { 's': '#resizer', containment: 'parent' }", function () { +test("custom handles { handles: { 's': '#resizer2', containment: 'parent' }", function () { expect(2); - var handle = "#resizer", target = $("#resizable1").resizable({ handles: { "s": "#resizer" }, containment: "parent" }); + var handle = "#resizer2", target = $("#resizable2").resizable({ handles: { "s": "#resizer2" }, containment: "parent" }); TestHelpers.resizable.drag(handle, 0, 70); equal(target.height(), 170, "compare height"); From 58540c4c6d495ba8e79c35a2fec5d9cf10cc7f08 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 14:39:32 +0100 Subject: [PATCH 09/14] Added the resizable element for the test 2 --- tests/unit/resizable/resizable.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 9ddba10ac27..18a93a417b1 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -58,6 +58,11 @@

I'm a resizable.
+ +
+ I'm a resizable. +
+
solid gray From 34a5101cd939a20dc9a037378fdab2c0a4d8aac3 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 14:40:58 +0100 Subject: [PATCH 10/14] Restricted the custom handlers as selectors be inside the resizable element --- ui/jquery.ui.resizable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index 2beb6b24963..e9eee3ed07f 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -207,7 +207,7 @@ $.widget("ui.resizable", $.ui.mouse, { //Add the custom handles of jquery Objects outside this.element for (i in this.handles) { if (!this.handles[i].length && this.handles[i].selector) { - this.handles[i] = this.handles[i].add($(this.handles[i].selector)); + this.handles[i] = this.handles[i].add($(this.handles[i].selector, this.element)); } this._handles = this._handles.add(this.handles[i]); } @@ -255,7 +255,7 @@ $.widget("ui.resizable", $.ui.mouse, { for (i in o.handles) { handle = o.handles[i]; if (!handle.length && handle.selector) { - handle = handle.add($(handle.selector)); + handle = handle.add($(handle.selector, this.element)); } if (handle instanceof $) { handle.bind("mousedown." + this.widgetName, onMouseDownCustom); From 136789e5b444ac7e47f32c4dff8508a2a10ff7a1 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 14:57:16 +0100 Subject: [PATCH 11/14] I tried again and the bug that I tried at the beginning was selector outside. Inside works in the current version. --- ui/jquery.ui.resizable.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index e9eee3ed07f..574efcce14a 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -206,9 +206,6 @@ $.widget("ui.resizable", $.ui.mouse, { //Add the custom handles of jquery Objects outside this.element for (i in this.handles) { - if (!this.handles[i].length && this.handles[i].selector) { - this.handles[i] = this.handles[i].add($(this.handles[i].selector, this.element)); - } this._handles = this._handles.add(this.handles[i]); } this._handles.disableSelection(); @@ -254,9 +251,6 @@ $.widget("ui.resizable", $.ui.mouse, { if (o.handles.constructor !== String) { for (i in o.handles) { handle = o.handles[i]; - if (!handle.length && handle.selector) { - handle = handle.add($(handle.selector, this.element)); - } if (handle instanceof $) { handle.bind("mousedown." + this.widgetName, onMouseDownCustom); } From 00a01e1a6ae4154b821b84cc48b59dd551c88754 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 14:58:07 +0100 Subject: [PATCH 12/14] Update resizable_options.js --- tests/unit/resizable/resizable_options.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index c3bc8e876a9..76fa7e40277 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -249,17 +249,6 @@ test("custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", equal(target.height(), 100, "compare height"); }); -test("custom handles { handles: { 's': '#resizer2', containment: 'parent' }", function () { - expect(2); - - var handle = "#resizer2", target = $("#resizable2").resizable({ handles: { "s": "#resizer2" }, 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); From fc6aadedd959a37692ce29d2db74aef1a8e43f5c Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 14:58:21 +0100 Subject: [PATCH 13/14] Update resizable.html --- tests/unit/resizable/resizable.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 18a93a417b1..9ddba10ac27 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -58,11 +58,6 @@

I'm a resizable.
- -
- I'm a resizable. -
-
solid gray From 275e0b59e990ee8f461c820190e92eefb3791b08 Mon Sep 17 00:00:00 2001 From: Patricia Date: Wed, 13 Nov 2013 15:02:38 +0100 Subject: [PATCH 14/14] Update resizable.html --- tests/unit/resizable/resizable.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 9ddba10ac27..5ac643bbf6b 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -57,7 +57,7 @@

I'm a resizable.
-
+
solid gray