From 0cab9f0a2f1f91ae671d57dba5e5bdcde1f60622 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:59:32 -0400 Subject: [PATCH] Droppable: Style updates Ref #14246 --- tests/unit/droppable/common-deprecated.js | 2 +- tests/unit/droppable/common.js | 2 +- tests/unit/droppable/core.js | 22 +++---- tests/unit/droppable/events.js | 6 +- tests/unit/droppable/helper.js | 6 +- tests/unit/droppable/methods.js | 80 +++++++++++------------ tests/unit/droppable/options.js | 58 ++++++++-------- ui/widgets/droppable.js | 47 +++++++------ 8 files changed, 116 insertions(+), 107 deletions(-) diff --git a/tests/unit/droppable/common-deprecated.js b/tests/unit/droppable/common-deprecated.js index ecbc9b1a1..fc086757f 100644 --- a/tests/unit/droppable/common-deprecated.js +++ b/tests/unit/droppable/common-deprecated.js @@ -23,6 +23,6 @@ common.testWidget( "droppable", { out: null, over: null } -}); +} ); } ); diff --git a/tests/unit/droppable/common.js b/tests/unit/droppable/common.js index 5d0e55d6f..d4bdb9dc0 100644 --- a/tests/unit/droppable/common.js +++ b/tests/unit/droppable/common.js @@ -21,6 +21,6 @@ common.testWidget( "droppable", { out: null, over: null } -}); +} ); } ); diff --git a/tests/unit/droppable/core.js b/tests/unit/droppable/core.js index 75951c1bc..c4ce0378c 100644 --- a/tests/unit/droppable/core.js +++ b/tests/unit/droppable/core.js @@ -4,26 +4,26 @@ define( [ "ui/widgets/droppable" ], function( $, testHelper ) { -module("droppable: core"); +module( "droppable: core" ); -test("element types", function() { - var typeNames = ("p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" + +test( "element types", function() { + var typeNames = ( "p,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,div,form" + ",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr" + ",acronym,code,samp,kbd,var,img,hr" + - ",input,button,label,select,iframe").split(","); + ",input,button,label,select,iframe" ).split( "," ); expect( typeNames.length ); - $.each(typeNames, function(i) { - var typeName = typeNames[i], - el = $(document.createElement(typeName)).appendTo("body"); + $.each( typeNames, function( i ) { + var typeName = typeNames[ i ], + el = $( document.createElement( typeName ) ).appendTo( "body" ); - (typeName === "table" && el.append("content")); + ( typeName === "table" && el.append( "content" ) ); el.droppable(); testHelper.shouldDrop(); - el.droppable("destroy"); + el.droppable( "destroy" ); el.remove(); - }); -}); + } ); +} ); } ); diff --git a/tests/unit/droppable/events.js b/tests/unit/droppable/events.js index 9c84b099f..68df6e506 100644 --- a/tests/unit/droppable/events.js +++ b/tests/unit/droppable/events.js @@ -13,7 +13,7 @@ test( "droppable destruction/recreation on drop event", function( assert ) { drop: function() { var element = $( this ), newDroppable = $( "
" ) - .css({ width: 100, height: 100 }) + .css( { width: 100, height: 100 } ) .text( "Droppable" ); element.after( newDroppable ); element.remove(); @@ -33,10 +33,10 @@ test( "droppable destruction/recreation on drop event", function( assert ) { draggable.simulate( "drag", { dx: dx, dy: dy - }); + } ); assert.lacksClasses( droppable2, "active", "subsequent droppable no longer active" ); -}); +} ); // todo: comment the following in when ready to actually test /* diff --git a/tests/unit/droppable/helper.js b/tests/unit/droppable/helper.js index 460fa1aa6..b9bc5d6fb 100644 --- a/tests/unit/droppable/helper.js +++ b/tests/unit/droppable/helper.js @@ -5,13 +5,15 @@ define( [ return $.extend( helper, { shouldDrop: function() { + // todo: actually implement this - ok(true, "missing test - untested code is broken code"); + ok( true, "missing test - untested code is broken code" ); }, shouldNotDrop: function() { + // todo: actually implement this - ok(true, "missing test - untested code is broken code"); + ok( true, "missing test - untested code is broken code" ); } } ); diff --git a/tests/unit/droppable/methods.js b/tests/unit/droppable/methods.js index 10ac48499..c159be56f 100644 --- a/tests/unit/droppable/methods.js +++ b/tests/unit/droppable/methods.js @@ -4,78 +4,78 @@ define( [ "ui/widgets/droppable" ], function( $, testHelper ) { -module("droppable: methods"); +module( "droppable: methods" ); -test("init", function() { +test( "init", function() { expect( 5 ); - $("
").appendTo("body").droppable().remove(); - ok(true, ".droppable() called on element"); + $( "
" ).appendTo( "body" ).droppable().remove(); + ok( true, ".droppable() called on element" ); - $([]).droppable(); - ok(true, ".droppable() called on empty collection"); + $( [] ).droppable(); + ok( true, ".droppable() called on empty collection" ); - $("
").droppable(); - ok(true, ".droppable() called on disconnected DOMElement"); + $( "
" ).droppable(); + ok( true, ".droppable() called on disconnected DOMElement" ); - $("
").droppable().droppable("option", "foo"); - ok(true, "arbitrary option getter after init"); + $( "
" ).droppable().droppable( "option", "foo" ); + ok( true, "arbitrary option getter after init" ); - $("
").droppable().droppable("option", "foo", "bar"); - ok(true, "arbitrary option setter after init"); -}); + $( "
" ).droppable().droppable( "option", "foo", "bar" ); + ok( true, "arbitrary option setter after init" ); +} ); -test("destroy", function() { +test( "destroy", function() { expect( 4 ); - $("
").appendTo("body").droppable().droppable("destroy").remove(); - ok(true, ".droppable('destroy') called on element"); + $( "
" ).appendTo( "body" ).droppable().droppable( "destroy" ).remove(); + ok( true, ".droppable('destroy') called on element" ); - $([]).droppable().droppable("destroy"); - ok(true, ".droppable('destroy') called on empty collection"); + $( [] ).droppable().droppable( "destroy" ); + ok( true, ".droppable('destroy') called on empty collection" ); - $("
").droppable().droppable("destroy"); - ok(true, ".droppable('destroy') called on disconnected DOMElement"); + $( "
" ).droppable().droppable( "destroy" ); + ok( true, ".droppable('destroy') called on disconnected DOMElement" ); - var expected = $("
").droppable(), - actual = expected.droppable("destroy"); - equal(actual, expected, "destroy is chainable"); -}); + var expected = $( "
" ).droppable(), + actual = expected.droppable( "destroy" ); + equal( actual, expected, "destroy is chainable" ); +} ); -test("enable", function() { - expect(7); +test( "enable", function() { + expect( 7 ); var el, expected, actual; - el = $("#droppable1").droppable({ disabled: true }); + el = $( "#droppable1" ).droppable( { disabled: true } ); testHelper.shouldNotDrop(); - el.droppable("enable"); + el.droppable( "enable" ); testHelper.shouldDrop(); - equal(el.droppable("option", "disabled"), false, "disabled option getter"); - el.droppable("destroy"); - el.droppable({ disabled: true }); + equal( el.droppable( "option", "disabled" ), false, "disabled option getter" ); + el.droppable( "destroy" ); + el.droppable( { disabled: true } ); testHelper.shouldNotDrop(); - el.droppable("option", "disabled", false); - equal(el.droppable("option", "disabled"), false, "disabled option setter"); + el.droppable( "option", "disabled", false ); + equal( el.droppable( "option", "disabled" ), false, "disabled option setter" ); testHelper.shouldDrop(); - expected = $("
").droppable(), - actual = expected.droppable("enable"); - equal(actual, expected, "enable is chainable"); -}); + expected = $( "
" ).droppable(), + actual = expected.droppable( "enable" ); + equal( actual, expected, "enable is chainable" ); +} ); test( "disable", function( assert ) { expect( 10 ); var actual, expected, - element = $( "#droppable1" ).droppable({ disabled: false }); + element = $( "#droppable1" ).droppable( { disabled: false } ); testHelper.shouldDrop(); element.droppable( "disable" ); testHelper.shouldNotDrop(); equal( element.droppable( "option", "disabled" ), true, "disabled option getter" ); element.droppable( "destroy" ); - element.droppable({ disabled: false }); + element.droppable( { disabled: false } ); testHelper.shouldDrop(); element.droppable( "option", "disabled", true ); assert.lacksClasses( element.droppable( "widget" ), "ui-state-disabled" ); @@ -87,6 +87,6 @@ test( "disable", function( assert ) { expected = $( "
" ).droppable(); actual = expected.droppable( "disable" ); equal( actual, expected, "disable is chainable" ); -}); +} ); } ); diff --git a/tests/unit/droppable/options.js b/tests/unit/droppable/options.js index c2035ce8c..856c2d215 100644 --- a/tests/unit/droppable/options.js +++ b/tests/unit/droppable/options.js @@ -24,23 +24,23 @@ test( "activeClass", function() { */ test( "{ addClasses: true }, default", function( assert ) { expect( 1 ); - var el = $( "
" ).droppable({ addClasses: true }); + var el = $( "
" ).droppable( { addClasses: true } ); assert.hasClasses( el, "ui-droppable" ); el.droppable( "destroy" ); -}); +} ); test( "{ addClasses: false }", function( assert ) { expect( 1 ); - var el = $( "
" ).droppable({ addClasses: false }); + var el = $( "
" ).droppable( { addClasses: false } ); assert.lacksClasses( el, "ui-droppable" ); el.droppable( "destroy" ); -}); +} ); test( "scope", function() { expect( 4 ); var droppableOffset, draggableOffset, oldDraggableOffset, dx, dy, - draggable1 = $( "
" ).appendTo( "#qunit-fixture" ).draggable({ revert: "invalid" }), + draggable1 = $( "
" ).appendTo( "#qunit-fixture" ).draggable( { revert: "invalid" } ), draggable2 = $( "
" ).appendTo( "#qunit-fixture" ).droppable(), droppable = $( "
" ).appendTo( "#qunit-fixture" ).droppable(), newScope = "test"; @@ -57,7 +57,7 @@ test( "scope", function() { draggable1.simulate( "drag", { dx: dx, dy: dy - }); + } ); draggableOffset = draggable1.offset(); equal( draggableOffset.left, droppableOffset.left ); @@ -72,12 +72,12 @@ test( "scope", function() { draggable2.simulate( "drag", { dx: dx, dy: dy - }); + } ); draggableOffset = draggable2.offset(); equal( draggableOffset.left, oldDraggableOffset.left ); equal( draggableOffset.top, oldDraggableOffset.top ); -}); +} ); /* test( "greedy", function() { ok(false, 'missing test - untested code is broken code'); @@ -109,7 +109,7 @@ test( "tolerance, intersect", function() { draggable = $( "
" ) .appendTo( "#qunit-fixture" ) - .css({ + .css( { width: 10, height: 10, position: "absolute", @@ -118,32 +118,32 @@ test( "tolerance, intersect", function() { // Droppable: droppable region is offset by draggables margin marginTop: 3, marginLeft: 3 - }) + } ) .draggable(); droppable = $( "
" ) .appendTo( "#qunit-fixture" ) - .css({ width: 10, height: 10, position: "absolute", top: 13, left: 13 }) - .droppable({ tolerance: "intersect" }); + .css( { width: 10, height: 10, position: "absolute", top: 13, left: 13 } ) + .droppable( { tolerance: "intersect" } ); $.each( dataset, function() { var data = this; - draggable.css({ + draggable.css( { top: 0, left: 0 - }); + } ); droppable.off( "drop" ).on( "drop", function() { equal( true, data[ 2 ], data[ 3 ] ); - }); + } ); $( draggable ).simulate( "drag", { dx: data[ 0 ], dy: data[ 1 ] - }); - }); -}); + } ); + } ); +} ); test( "tolerance, pointer", function() { expect( 3 ); @@ -162,40 +162,40 @@ test( "tolerance, pointer", function() { draggable = $( "
" ) .appendTo( "#qunit-fixture" ) - .css({ width: 10, height: 10, position: "absolute" }) + .css( { width: 10, height: 10, position: "absolute" } ) .draggable(); droppable = $( "
" ) .appendTo( "#qunit-fixture" ) - .css({ width: 10, height: 10, position: "absolute", top: 5, left: 5 }) - .droppable({ tolerance: "pointer" }); + .css( { width: 10, height: 10, position: "absolute", top: 5, left: 5 } ) + .droppable( { tolerance: "pointer" } ); $.each( dataset, function() { var data = this; droppable.off( "drop" ).on( "drop", function() { equal( true, data[ 2 ], data[ 3 ] ); - }); + } ); $( draggable ).simulate( "drag", { dx: ( data[ 0 ] - $( draggable ).position().left ), dy: ( data[ 1 ] - $( draggable ).position().top ) - }); - }); + } ); + } ); // Http://bugs.jqueryui.com/ticket/4977 - tolerance, pointer - bug when pointer outside draggable - draggable.css({ top: 0, left: 0 }).draggable( "option", "axis", "x" ); - droppable.css({ top: 15, left: 15 }); + draggable.css( { top: 0, left: 0 } ).draggable( "option", "axis", "x" ); + droppable.css( { top: 15, left: 15 } ); droppable.off( "drop" ).on( "drop", function() { ok( true, "drop fires as long as pointer is within droppable" ); - }); + } ); $( draggable ).simulate( "drag", { dx: 10, dy: 10 - }); -}); + } ); +} ); /* test( "tolerance, touch", function() { diff --git a/ui/widgets/droppable.js b/ui/widgets/droppable.js index 6ba8d8c80..136a32b80 100644 --- a/ui/widgets/droppable.js +++ b/ui/widgets/droppable.js @@ -13,11 +13,11 @@ //>>docs: http://api.jqueryui.com/droppable/ //>>demos: http://jqueryui.com/droppable/ -(function( factory ) { +( function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. - define([ + define( [ "jquery", "./draggable", "./mouse", @@ -29,7 +29,7 @@ // Browser globals factory( jQuery ); } -}(function( $ ) { +}( function( $ ) { $.widget( "ui.droppable", { version: "@VERSION", @@ -63,9 +63,11 @@ $.widget( "ui.droppable", { this.proportions = function( /* valueToWrite */ ) { if ( arguments.length ) { + // Store the droppable's proportions proportions = arguments[ 0 ]; } else { + // Retrieve or derive the droppable's proportions return proportions ? proportions : @@ -83,6 +85,7 @@ $.widget( "ui.droppable", { }, _addToManager: function( scope ) { + // Add the reference and positions to the manager $.ui.ddmanager.droppables[ scope ] = $.ui.ddmanager.droppables[ scope ] || []; $.ui.ddmanager.droppables[ scope ].push( this ); @@ -123,7 +126,7 @@ $.widget( "ui.droppable", { var draggable = $.ui.ddmanager.current; this._addActiveClass(); - if ( draggable ){ + if ( draggable ) { this._trigger( "activate", event, this.ui( draggable ) ); } }, @@ -132,7 +135,7 @@ $.widget( "ui.droppable", { var draggable = $.ui.ddmanager.current; this._removeActiveClass(); - if ( draggable ){ + if ( draggable ) { this._trigger( "deactivate", event, this.ui( draggable ) ); } }, @@ -179,7 +182,7 @@ $.widget( "ui.droppable", { return false; } - this.element.find( ":data(ui-droppable)" ).not( ".ui-draggable-dragging" ).each(function() { + this.element.find( ":data(ui-droppable)" ).not( ".ui-draggable-dragging" ).each( function() { var inst = $( this ).droppable( "instance" ); if ( inst.options.greedy && @@ -188,7 +191,7 @@ $.widget( "ui.droppable", { inst.accept.call( inst.element[ 0 ], ( draggable.currentItem || draggable.element ) ) && intersect( draggable, $.extend( inst, { offset: inst.element.offset() } ), inst.options.tolerance, event ) ) { childrenIntersection = true; return false; } - }); + } ); if ( childrenIntersection ) { return false; } @@ -231,9 +234,9 @@ $.widget( "ui.droppable", { _removeActiveClass: function() { this._removeClass( "ui-droppable-active" ); } -}); +} ); -var intersect = (function() { +var intersect = ( function() { function isOverAxis( x, reference, size ) { return ( x >= reference ) && ( x < ( reference + size ) ); } @@ -277,7 +280,7 @@ var intersect = (function() { return false; } }; -})(); +} )(); /* This manager tracks offsets of draggables and droppables @@ -318,7 +321,7 @@ $.ui.ddmanager = { } m[ i ].offset = m[ i ].element.offset(); - m[ i ].proportions({ width: m[ i ].element[ 0 ].offsetWidth, height: m[ i ].element[ 0 ].offsetHeight }); + m[ i ].proportions( { width: m[ i ].element[ 0 ].offsetWidth, height: m[ i ].element[ 0 ].offsetHeight } ); } @@ -326,6 +329,7 @@ $.ui.ddmanager = { drop: function( draggable, event ) { var dropped = false; + // Create a copy of the droppables in case the list changes during the drop (#9116) $.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() { @@ -342,17 +346,18 @@ $.ui.ddmanager = { this._deactivate.call( this, event ); } - }); + } ); return dropped; }, dragStart: function( draggable, event ) { + // Listen for scrolling so that if the dragging causes scrolling the position of the droppables can be recalculated (see #5003) draggable.element.parentsUntil( "body" ).on( "scroll.droppable", function() { if ( !draggable.options.refreshPositions ) { $.ui.ddmanager.prepareOffsets( draggable, event ); } - }); + } ); }, drag: function( draggable, event ) { @@ -376,11 +381,12 @@ $.ui.ddmanager = { } if ( this.options.greedy ) { + // find droppable parents with same scope scope = this.options.scope; - parent = this.element.parents( ":data(ui-droppable)" ).filter(function() { + parent = this.element.parents( ":data(ui-droppable)" ).filter( function() { return $( this ).droppable( "instance" ).options.scope === scope; - }); + } ); if ( parent.length ) { parentInstance = $( parent[ 0 ] ).droppable( "instance" ); @@ -396,8 +402,8 @@ $.ui.ddmanager = { } this[ c ] = true; - this[c === "isout" ? "isover" : "isout"] = false; - this[c === "isover" ? "_over" : "_out"].call( this, event ); + this[ c === "isout" ? "isover" : "isout" ] = false; + this[ c === "isover" ? "_over" : "_out" ].call( this, event ); // We just moved out of a greedy child if ( parentInstance && c === "isout" ) { @@ -405,11 +411,12 @@ $.ui.ddmanager = { parentInstance.isover = true; parentInstance._over.call( parentInstance, event ); } - }); + } ); }, dragStop: function( draggable, event ) { draggable.element.parentsUntil( "body" ).off( "scroll.droppable" ); + // Call prepareOffsets one final time since IE does not fire return scroll events when overflow was caused by drag (see #5003) if ( !draggable.options.refreshPositions ) { $.ui.ddmanager.prepareOffsets( draggable, event ); @@ -451,9 +458,9 @@ if ( $.uiBackCompat !== false ) { this.element.removeClass( this.options.hoverClass ); } } - }); + } ); } return $.ui.droppable; -})); +} ) );