From 62c51f3bd5c7d8266a8fa9a4f9e8cf2f2e762a6e Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 12 Dec 2013 22:10:06 -0500 Subject: [PATCH 1/7] Interactions: Make them work on Windows 8 touch devices. Fixes #9709 --- themes/base/jquery.ui.base.css | 2 ++ themes/base/jquery.ui.draggable.css | 12 ++++++++++++ themes/base/jquery.ui.resizable.css | 2 ++ themes/base/jquery.ui.selectable.css | 6 +++++- themes/base/jquery.ui.sortable.css | 12 ++++++++++++ 5 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 themes/base/jquery.ui.draggable.css create mode 100644 themes/base/jquery.ui.sortable.css diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index aefa81de414..8ff61a51189 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -15,11 +15,13 @@ @import url("jquery.ui.button.css"); @import url("jquery.ui.datepicker.css"); @import url("jquery.ui.dialog.css"); +@import url("jquery.ui.draggable.css"); @import url("jquery.ui.menu.css"); @import url("jquery.ui.progressbar.css"); @import url("jquery.ui.resizable.css"); @import url("jquery.ui.selectable.css"); @import url("jquery.ui.selectmenu.css"); +@import url("jquery.ui.sortable.css"); @import url("jquery.ui.slider.css"); @import url("jquery.ui.spinner.css"); @import url("jquery.ui.tabs.css"); diff --git a/themes/base/jquery.ui.draggable.css b/themes/base/jquery.ui.draggable.css new file mode 100644 index 00000000000..08a65d46c31 --- /dev/null +++ b/themes/base/jquery.ui.draggable.css @@ -0,0 +1,12 @@ +/*! + * jQuery UI Draggable @VERSION + * http://jqueryui.com + * + * Copyright 2013 jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */ +.ui-draggable { + -ms-touch-action: none; + touch-action: none; +} \ No newline at end of file diff --git a/themes/base/jquery.ui.resizable.css b/themes/base/jquery.ui.resizable.css index f0f8c474de0..23ec832ebf1 100644 --- a/themes/base/jquery.ui.resizable.css +++ b/themes/base/jquery.ui.resizable.css @@ -13,6 +13,8 @@ position: absolute; font-size: 0.1px; display: block; + -ms-touch-action: none; + touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { diff --git a/themes/base/jquery.ui.selectable.css b/themes/base/jquery.ui.selectable.css index d44ad46cf65..c51221afd2c 100644 --- a/themes/base/jquery.ui.selectable.css +++ b/themes/base/jquery.ui.selectable.css @@ -6,8 +6,12 @@ * Released under the MIT license. * http://jquery.org/license */ +.ui-selectable { + -ms-touch-action: none; + touch-action: none; +} .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; -} +} \ No newline at end of file diff --git a/themes/base/jquery.ui.sortable.css b/themes/base/jquery.ui.sortable.css new file mode 100644 index 00000000000..544c926dfd5 --- /dev/null +++ b/themes/base/jquery.ui.sortable.css @@ -0,0 +1,12 @@ +/*! + * jQuery UI Sortable @VERSION + * http://jqueryui.com + * + * Copyright 2013 jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */ +.ui-sortable-item { + -ms-touch-action: none; + touch-action: none; +} \ No newline at end of file From cce7cca467a0cdfbcb2d3154ab23ed78600647be Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 12 Dec 2013 22:10:15 -0500 Subject: [PATCH 2/7] Slider: Make it work on Windows 8 touch devices Fixes #9710 --- themes/base/jquery.ui.slider.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/themes/base/jquery.ui.slider.css b/themes/base/jquery.ui.slider.css index b6b68b8b0e8..91bc1a048fa 100644 --- a/themes/base/jquery.ui.slider.css +++ b/themes/base/jquery.ui.slider.css @@ -18,6 +18,8 @@ width: 1.2em; height: 1.2em; cursor: default; + -ms-touch-action: none; + touch-action: none; } .ui-slider .ui-slider-range { position: absolute; From 631fb81018d9ceda1e3249bbf962ca4546c4ab0b Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Sat, 14 Dec 2013 11:45:45 -0500 Subject: [PATCH 3/7] Draggable/Sortable: Apply class name to appropriate handle element --- tests/unit/draggable/draggable_core.js | 14 ++++++++++++++ tests/unit/sortable/sortable_core.js | 15 +++++++++++++++ themes/base/jquery.ui.draggable.css | 4 ++-- themes/base/jquery.ui.selectable.css | 2 +- themes/base/jquery.ui.sortable.css | 4 ++-- ui/jquery.ui.draggable.js | 20 ++++++++++++++++++++ ui/jquery.ui.sortable.js | 21 ++++++++++++++++++++- 7 files changed, 74 insertions(+), 6 deletions(-) diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js index b8ea1993055..f1ed0a96bd0 100644 --- a/tests/unit/draggable/draggable_core.js +++ b/tests/unit/draggable/draggable_core.js @@ -269,4 +269,18 @@ asyncTest( "#4261: active element should blur when mousing down on a draggable", }); }); +test( "ui-draggable-handle assigned to appropriate element", function() { + expect( 4 ); + + var element = $( "

" ).appendTo( "#qunit-fixture" ).draggable(); + ok( element.hasClass( "ui-draggable-handle" ), "handle is element by default" ); + + element.draggable( "option", "handle", "p" ); + ok( !element.hasClass( "ui-draggable-handle" ), "removed from element" ); + ok( element.find( "p" ).hasClass( "ui-draggable-handle" ), "added to handle" ); + + element.draggable( "destroy" ); + ok( !element.find( "p" ).hasClass( "ui-draggable-handle" ), "removed in destroy()" ); +}); + })( jQuery ); diff --git a/tests/unit/sortable/sortable_core.js b/tests/unit/sortable/sortable_core.js index 18e7dae0864..819605672fd 100644 --- a/tests/unit/sortable/sortable_core.js +++ b/tests/unit/sortable/sortable_core.js @@ -16,4 +16,19 @@ test( "#9314: Sortable: Items cannot be dragged directly into bottom position", TestHelpers.sortable.sort( $( "li", el[ 1 ] )[ 0 ], 0, -12, 5, "Dragging the sortable into connected sortable" ); }); +test( "ui-sortable-handle applied to appropriate element", function() { + expect( 4 ); + var el = $( "

" ) + .sortable().appendTo( "#qunit-fixture" ); + + ok( el.find( "li" ).hasClass( "ui-sortable-handle"), "defaults to item" ); + + el.sortable( "option", "handle", "p" ); + ok( !el.find( "li" ).hasClass( "ui-sortable-handle"), "removed on change" ); + ok( el.find( "p" ).hasClass( "ui-sortable-handle"), "applied to handle" ); + + el.sortable( "destroy"); + equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" ); +}); + })( jQuery ); diff --git a/themes/base/jquery.ui.draggable.css b/themes/base/jquery.ui.draggable.css index 08a65d46c31..707134e784a 100644 --- a/themes/base/jquery.ui.draggable.css +++ b/themes/base/jquery.ui.draggable.css @@ -6,7 +6,7 @@ * Released under the MIT license. * http://jquery.org/license */ -.ui-draggable { +.ui-draggable-handle { -ms-touch-action: none; touch-action: none; -} \ No newline at end of file +} diff --git a/themes/base/jquery.ui.selectable.css b/themes/base/jquery.ui.selectable.css index c51221afd2c..4fae8d149b9 100644 --- a/themes/base/jquery.ui.selectable.css +++ b/themes/base/jquery.ui.selectable.css @@ -14,4 +14,4 @@ position: absolute; z-index: 100; border: 1px dotted black; -} \ No newline at end of file +} diff --git a/themes/base/jquery.ui.sortable.css b/themes/base/jquery.ui.sortable.css index 544c926dfd5..139c705db8d 100644 --- a/themes/base/jquery.ui.sortable.css +++ b/themes/base/jquery.ui.sortable.css @@ -6,7 +6,7 @@ * Released under the MIT license. * http://jquery.org/license */ -.ui-sortable-item { +.ui-sortable-handle { -ms-touch-action: none; touch-action: none; -} \ No newline at end of file +} diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js index f18b383d39d..b7082785f24 100644 --- a/ui/jquery.ui.draggable.js +++ b/ui/jquery.ui.draggable.js @@ -60,9 +60,16 @@ $.widget("ui.draggable", $.ui.mouse, { if (this.options.disabled){ this.element.addClass("ui-draggable-disabled"); } + this._setHandleClassName(); this._mouseInit(); + }, + _setOption: function( key, value ) { + this._super( key, value ); + if ( key === "handle" ) { + this._setHandleClassName(); + } }, _destroy: function() { @@ -71,6 +78,7 @@ $.widget("ui.draggable", $.ui.mouse, { return; } this.element.removeClass( "ui-draggable ui-draggable-dragging ui-draggable-disabled" ); + this._removeHandleClassName(); this._mouseDestroy(); }, @@ -296,6 +304,18 @@ $.widget("ui.draggable", $.ui.mouse, { true; }, + _setHandleClassName: function() { + this._removeHandleClassName(); + $( this.options.handle ? this.options.handle : this.element ) + .addClass( "ui-draggable-handle" ); + }, + + _removeHandleClassName: function() { + this.element.find( ".ui-draggable-handle" ) + .andSelf() + .removeClass( "ui-draggable-handle" ); + }, + _createHelper: function(event) { var o = this.options, diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index 4ba2576c1bc..15d83df7b44 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -84,14 +84,33 @@ $.widget("ui.sortable", $.ui.mouse, { //Initialize mouse events for interaction this._mouseInit(); + this._setHandleClassName(); + //We're ready to go this.ready = true; }, + _setOption: function( key, value ) { + this._super( key, value ); + + if ( key === "handle" ) { + this.element.find( ".ui-sortable-handle" ).removeClass( "ui-sortable-handle" ); + this._setHandleClassName(); + } + }, + + _setHandleClassName: function() { + $.each( this.items, function() { + ( this.instance.options.handle ? this.item.find( this.instance.options.handle ) : this.item ) + .addClass( "ui-sortable-handle" ); + }); + }, + _destroy: function() { this.element - .removeClass("ui-sortable ui-sortable-disabled"); + .removeClass("ui-sortable ui-sortable-disabled") + .find( ".ui-sortable-handle" ).removeClass( "ui-sortable-handle" ); this._mouseDestroy(); for ( var i = this.items.length - 1; i >= 0; i-- ) { From e9a6140a0ae734cfa943496e7ebbc4b90b6094f0 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 9 Jan 2014 08:47:07 -0500 Subject: [PATCH 4/7] Draggable/Sortable: Changes per @scottgonzalez review. --- tests/unit/sortable/sortable_core.js | 17 ++++++++++------- ui/jquery.ui.draggable.js | 2 +- ui/jquery.ui.sortable.js | 8 +++++--- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/tests/unit/sortable/sortable_core.js b/tests/unit/sortable/sortable_core.js index 819605672fd..4b551522f97 100644 --- a/tests/unit/sortable/sortable_core.js +++ b/tests/unit/sortable/sortable_core.js @@ -17,17 +17,20 @@ test( "#9314: Sortable: Items cannot be dragged directly into bottom position", }); test( "ui-sortable-handle applied to appropriate element", function() { - expect( 4 ); - var el = $( "

" ) - .sortable().appendTo( "#qunit-fixture" ); + expect( 5 ); + var item = "

    • ", + el = $( "
      " + item + item + "
    " ) + .sortable() + .appendTo( "#qunit-fixture" ); - ok( el.find( "li" ).hasClass( "ui-sortable-handle"), "defaults to item" ); + ok( el.find( "li:first" ).hasClass( "ui-sortable-handle" ), "defaults to item" ); + ok( el.find( "li:last" ).hasClass( "ui-sortable-handle" ), "both items received class name" ); el.sortable( "option", "handle", "p" ); - ok( !el.find( "li" ).hasClass( "ui-sortable-handle"), "removed on change" ); - ok( el.find( "p" ).hasClass( "ui-sortable-handle"), "applied to handle" ); + ok( !el.find( "li" ).hasClass( "ui-sortable-handle" ), "removed on change" ); + ok( el.find( "p" ).hasClass( "ui-sortable-handle" ), "applied to handle" ); - el.sortable( "destroy"); + el.sortable( "destroy" ); equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" ); }); diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js index b7082785f24..1ee0c43469a 100644 --- a/ui/jquery.ui.draggable.js +++ b/ui/jquery.ui.draggable.js @@ -312,7 +312,7 @@ $.widget("ui.draggable", $.ui.mouse, { _removeHandleClassName: function() { this.element.find( ".ui-draggable-handle" ) - .andSelf() + .addBack() .removeClass( "ui-draggable-handle" ); }, diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index 15d83df7b44..d561af4ae38 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -102,15 +102,17 @@ $.widget("ui.sortable", $.ui.mouse, { _setHandleClassName: function() { $.each( this.items, function() { - ( this.instance.options.handle ? this.item.find( this.instance.options.handle ) : this.item ) + ( this.instance.options.handle ? + this.item.find( this.instance.options.handle ) : this.item ) .addClass( "ui-sortable-handle" ); }); }, _destroy: function() { this.element - .removeClass("ui-sortable ui-sortable-disabled") - .find( ".ui-sortable-handle" ).removeClass( "ui-sortable-handle" ); + .removeClass( "ui-sortable ui-sortable-disabled" ) + .find( ".ui-sortable-handle" ) + .removeClass( "ui-sortable-handle" ); this._mouseDestroy(); for ( var i = this.items.length - 1; i >= 0; i-- ) { From b3f7a785ad69a53dc3035a54857c41797f6aa921 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Thu, 9 Jan 2014 08:54:43 -0500 Subject: [PATCH 5/7] Sortable: Apply handle class names to new items in refresh() --- tests/unit/sortable/sortable_core.js | 5 ++++- ui/jquery.ui.sortable.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/tests/unit/sortable/sortable_core.js b/tests/unit/sortable/sortable_core.js index 4b551522f97..54069a9bfbd 100644 --- a/tests/unit/sortable/sortable_core.js +++ b/tests/unit/sortable/sortable_core.js @@ -17,7 +17,7 @@ test( "#9314: Sortable: Items cannot be dragged directly into bottom position", }); test( "ui-sortable-handle applied to appropriate element", function() { - expect( 5 ); + expect( 6 ); var item = "

    • ", el = $( "
      " + item + item + "
    " ) .sortable() @@ -30,6 +30,9 @@ test( "ui-sortable-handle applied to appropriate element", function() { ok( !el.find( "li" ).hasClass( "ui-sortable-handle" ), "removed on change" ); ok( el.find( "p" ).hasClass( "ui-sortable-handle" ), "applied to handle" ); + el.append( item ).sortable( "refresh" ); + ok( el.find( "p:last" ).hasClass( "ui-sortable-handle" ), "class name applied on refresh" ); + el.sortable( "destroy" ); equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" ); }); diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index d561af4ae38..1c38f4ea2ba 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -95,12 +95,12 @@ $.widget("ui.sortable", $.ui.mouse, { this._super( key, value ); if ( key === "handle" ) { - this.element.find( ".ui-sortable-handle" ).removeClass( "ui-sortable-handle" ); this._setHandleClassName(); } }, _setHandleClassName: function() { + this.element.find( ".ui-sortable-handle" ).removeClass( "ui-sortable-handle" ); $.each( this.items, function() { ( this.instance.options.handle ? this.item.find( this.instance.options.handle ) : this.item ) @@ -620,6 +620,7 @@ $.widget("ui.sortable", $.ui.mouse, { refresh: function(event) { this._refreshItems(event); this.refreshPositions(); + this._setHandleClassName(); return this; }, From 771428f10ee030c8a64d6d3d622ea6042174c973 Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Fri, 10 Jan 2014 14:04:46 -0500 Subject: [PATCH 6/7] Sortable: Final few changes per review. --- ui/jquery.ui.sortable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index 1c38f4ea2ba..146a05fc2cc 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -112,7 +112,7 @@ $.widget("ui.sortable", $.ui.mouse, { this.element .removeClass( "ui-sortable ui-sortable-disabled" ) .find( ".ui-sortable-handle" ) - .removeClass( "ui-sortable-handle" ); + .removeClass( "ui-sortable-handle" ); this._mouseDestroy(); for ( var i = this.items.length - 1; i >= 0; i-- ) { @@ -619,8 +619,8 @@ $.widget("ui.sortable", $.ui.mouse, { refresh: function(event) { this._refreshItems(event); - this.refreshPositions(); this._setHandleClassName(); + this.refreshPositions(); return this; }, From 04fffd66ea5f6f72c3f6a4222a2f8b154089a24c Mon Sep 17 00:00:00 2001 From: TJ VanToll Date: Tue, 14 Jan 2014 09:31:12 -0500 Subject: [PATCH 7/7] (fix) Minor change based on review --- ui/jquery.ui.draggable.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js index 1ee0c43469a..5cbe92fced7 100644 --- a/ui/jquery.ui.draggable.js +++ b/ui/jquery.ui.draggable.js @@ -306,8 +306,7 @@ $.widget("ui.draggable", $.ui.mouse, { _setHandleClassName: function() { this._removeHandleClassName(); - $( this.options.handle ? this.options.handle : this.element ) - .addClass( "ui-draggable-handle" ); + $( this.options.handle || this.element ).addClass( "ui-draggable-handle" ); }, _removeHandleClassName: function() {