From a996cb31e88dc23f89a985f4f4f4bf3dc07357b3 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:50:24 -0400 Subject: [PATCH 01/27] Selectmenu: Style updates Ref #14246 --- tests/unit/selectmenu/common.js | 2 +- tests/unit/selectmenu/core.js | 74 ++++++++++++++++---------------- tests/unit/selectmenu/events.js | 46 ++++++++++---------- tests/unit/selectmenu/methods.js | 26 +++++------ tests/unit/selectmenu/options.js | 28 ++++++------ 5 files changed, 88 insertions(+), 88 deletions(-) diff --git a/tests/unit/selectmenu/common.js b/tests/unit/selectmenu/common.js index 8582247caf1..97a47f2a688 100644 --- a/tests/unit/selectmenu/common.js +++ b/tests/unit/selectmenu/common.js @@ -29,6 +29,6 @@ common.testWidget( "selectmenu", { open: null, select: null } -}); +} ); } ); diff --git a/tests/unit/selectmenu/core.js b/tests/unit/selectmenu/core.js index 96e83f69b10..5431d689d0a 100644 --- a/tests/unit/selectmenu/core.js +++ b/tests/unit/selectmenu/core.js @@ -18,15 +18,15 @@ test( "markup structure", function( assert ) { assert.lacksClasses( button, "ui-selectmenu-button-open" ); assert.hasClasses( menuWrap, "ui-selectmenu-menu" ); assert.lacksClasses( menuWrap, "ui-selectmenu-menu-open" ); -}); +} ); asyncTest( "accessibility", function() { var wrappers, button, menu, element = $( "#speed" ).attr( "title", "A demo title" ); - element.find( "option" ).each(function( index ) { + element.find( "option" ).each( function( index ) { $( this ).attr( "title", "A demo title #" + index ); - }); + } ); element.selectmenu(); button = element.selectmenu( "widget" ); @@ -37,7 +37,7 @@ asyncTest( "accessibility", function() { expect( 13 + wrappers.length * 3 ); - setTimeout(function() { + setTimeout( function() { equal( button.attr( "role" ), "combobox", "button role" ); equal( button.attr( "aria-haspopup" ), "true", "button aria-haspopup" ); equal( button.attr( "aria-expanded" ), "false", "button aria-expanded" ); @@ -62,13 +62,13 @@ asyncTest( "accessibility", function() { ); $.each( wrappers, function( index ) { var item = $( this ); - equal( item.attr( "role" ), "option", "menu item #" + index +" role" ); - equal( item.attr( "tabindex" ), -1, "menu item #" + index +" tabindex" ); + equal( item.attr( "role" ), "option", "menu item #" + index + " role" ); + equal( item.attr( "tabindex" ), -1, "menu item #" + index + " tabindex" ); equal( item.attr( "title" ), "A demo title #" + index, "menu item #" + index + " title" ); - }); + } ); start(); - }); -}); + } ); +} ); test( "_renderButtonItem()", function() { expect( 2 ); @@ -102,9 +102,9 @@ test( "_renderButtonItem()", function() { button.text(), "click: button item text" ); -}); +} ); -$.each([ +$.each( [ { type: "default", selector: "#speed" @@ -127,7 +127,7 @@ $.each([ selected = element.find( "option:selected" ).next(); button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); @@ -143,13 +143,13 @@ $.each([ ); equal( element.find( "option:selected" ).val(), - selected.val() , + selected.val(), "original select state" ); equal( button.text(), selected.text(), "button text" ); start(); - }); - }); + } ); + } ); asyncTest( "state synchronization - after click on item - " + settings.type, function() { expect( 4 ); @@ -161,7 +161,7 @@ $.each([ selected = element.find( "option" ).last(); button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.trigger( "click" ); @@ -184,7 +184,7 @@ $.each([ equal( button.text(), selected.text(), "button text" ); start(); }, 1 ); - }); + } ); asyncTest( "state synchronization - " + "after focus item and keydown on button - " + settings.type, function() { @@ -199,7 +199,7 @@ $.each([ // Init menu button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); // Open menu and click first item @@ -213,20 +213,20 @@ $.each([ // Close and use keyboard control on button button.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE } ); button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( menu.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ), "menu aria-activedescendant" ); equal( button.attr( "aria-activedescendant" ), wrappers.eq( 1 ).attr( "id" ), "button aria-activedescendant" ); - equal( element.find( "option:selected" ).val(), options.eq( 1 ).val() , + equal( element.find( "option:selected" ).val(), options.eq( 1 ).val(), "original select state" ); equal( button.text(), options.eq( 1 ).text(), "button text" ); start(); - }); - }); - }); + } ); + } ); + } ); asyncTest( "item looping - " + settings.type, function() { expect( 4 ); @@ -237,7 +237,7 @@ $.each([ menu = element.selectmenu( "menuWidget" ); button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.trigger( "click" ); @@ -252,8 +252,8 @@ $.each([ button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( element[ 0 ].selectedIndex, wrappers.length - 1, "No looping behind last item" ); start(); - }); - }); + } ); + } ); asyncTest( "item focus and active state - " + settings.type, function() { expect( 4 ); @@ -264,11 +264,11 @@ $.each([ menu = element.selectmenu( "menuWidget" ); button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { wrappers = menu.find( "li.ui-menu-item .ui-menu-item-wrapper" ); button.trigger( "click" ); - setTimeout(function() { + setTimeout( function() { checkItemClasses(); wrappers.eq( 3 ).simulate( "mouseover" ).trigger( "click" ); @@ -282,12 +282,12 @@ $.each([ $( document ).trigger( "click" ); button.trigger( "click" ); - setTimeout(function() { + setTimeout( function() { checkItemClasses(); start(); - }); - }); - }); + } ); + } ); + } ); function checkItemClasses() { focusedItem = menu.find( ".ui-menu-item-wrapper.ui-state-active" ); @@ -295,7 +295,7 @@ $.each([ equal( focusedItem.attr( "id" ), wrappers.eq( element[ 0 ].selectedIndex ).attr( "id" ), "selected item has ui-state-focus class" ); } - }); + } ); asyncTest( "empty option - " + settings.type, function( assert ) { expect( 7 ); @@ -309,7 +309,7 @@ $.each([ menu = element.selectmenu( "menuWidget" ); button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { wrappers = menu.find( "li:not(.ui-selectmenu-optgroup) .ui-menu-item-wrapper" ); wrapper = wrappers.first(); @@ -325,8 +325,8 @@ $.each([ equal( wrapper.attr( "role" ), "option", "empty item has role option" ); start(); - }); - }); -}); + } ); + } ); +} ); } ); diff --git a/tests/unit/selectmenu/events.js b/tests/unit/selectmenu/events.js index 2ab20c46ce8..2d4a3f7fc11 100644 --- a/tests/unit/selectmenu/events.js +++ b/tests/unit/selectmenu/events.js @@ -7,7 +7,7 @@ module( "selectmenu: events", { setup: function() { this.element = $( "#speed" ); } -}); +} ); asyncTest( "change", function() { expect( 3 ); @@ -15,15 +15,15 @@ asyncTest( "change", function() { var button, menu, options, optionIndex = 1; - this.element.selectmenu({ - change: function ( event, ui ) { + this.element.selectmenu( { + change: function( event, ui ) { equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" ); equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], "ui.item.element contains original option element" ); equal( ui.item.value, options.eq( optionIndex ).text(), "ui.item.value property updated correctly" ); } - }); + } ); button = this.element.selectmenu( "widget" ); menu = this.element.selectmenu( "menuWidget" ); @@ -31,23 +31,23 @@ asyncTest( "change", function() { button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { button.trigger( "click" ); menu.find( "li" ).eq( optionIndex ).simulate( "mouseover" ).trigger( "click" ); start(); - }); -}); + } ); +} ); test( "close", function() { expect( 2 ); var shouldFire; - this.element.selectmenu({ + this.element.selectmenu( { close: function() { ok( shouldFire, "close event fired on close" ); } - }); + } ); shouldFire = false; this.element.selectmenu( "open" ); @@ -57,7 +57,7 @@ test( "close", function() { this.element.selectmenu( "open" ); shouldFire = true; $( "body" ).trigger( "mousedown" ); -}); +} ); asyncTest( "focus", function() { expect( 9 ); @@ -67,20 +67,20 @@ asyncTest( "focus", function() { optionIndex = this.element[ 0 ].selectedIndex + 1, options = this.element.find( "option" ); - this.element.selectmenu({ + this.element.selectmenu( { focus: function( event, ui ) { ok( true, "focus event fired on element #" + optionIndex + " mouseover" ); equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" ); equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], "ui.item.element contains original option element" ); } - }); + } ); button = this.element.selectmenu( "widget" ); menu = this.element.selectmenu( "menuWidget" ); button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { button.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); button.trigger( "click" ); @@ -93,32 +93,32 @@ asyncTest( "focus", function() { // This tests for unwanted, additional focus event on close that.element.selectmenu( "close" ); start(); - }); -}); + } ); +} ); test( "open", function() { expect( 1 ); - this.element.selectmenu({ + this.element.selectmenu( { open: function() { ok( true, "open event fired on open" ); } - }); + } ); this.element.selectmenu( "open" ); -}); +} ); asyncTest( "select", function() { expect( 3 ); - this.element.selectmenu({ + this.element.selectmenu( { select: function( event, ui ) { ok( true, "select event fired on item select" ); equal( ui.item.index, optionIndex, "ui.item.index contains correct option index" ); equal( ui.item.element[ 0 ], options.eq( optionIndex )[ 0 ], "ui.item.element contains original option element" ); } - }); + } ); var button = this.element.selectmenu( "widget" ), menu = this.element.selectmenu( "menuWidget" ), @@ -126,11 +126,11 @@ asyncTest( "select", function() { optionIndex = 1; button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { button.trigger( "click" ); menu.find( "li" ).eq( optionIndex ).simulate( "mouseover" ).trigger( "click" ); start(); - }); -}); + } ); +} ); } ); diff --git a/tests/unit/selectmenu/methods.js b/tests/unit/selectmenu/methods.js index a386655ce9e..e49da50f5fb 100644 --- a/tests/unit/selectmenu/methods.js +++ b/tests/unit/selectmenu/methods.js @@ -9,8 +9,8 @@ test( "destroy", function( assert ) { expect( 1 ); assert.domEqual( "#speed", function() { $( "#speed" ).selectmenu().selectmenu( "destroy" ); - }); -}); + } ); +} ); test( "open / close", function() { expect( 5 ); @@ -27,7 +27,7 @@ test( "open / close", function() { element.selectmenu( "close" ); ok( menu.is( ":hidden" ), "close: menu hidden" ); equal( menu.attr( "aria-hidden" ), "true", "close: menu aria-disabled" ); -}); +} ); test( "enable / disable", function() { expect( 10 ); @@ -49,7 +49,7 @@ test( "enable / disable", function() { equal( button.attr( "aria-disabled" ), "false", "enable: button ARIA" ); equal( button.attr( "tabindex" ), 0, "enable: button tabindex" ); equal( menu.attr( "aria-disabled" ), "false", "enable: menu ARIA" ); -}); +} ); test( "refresh - structure", function() { expect( 3 ); @@ -73,7 +73,7 @@ test( "refresh - structure", function() { equal( options.length, menuItems.length, "menu item length" ); equal( "Added option", menuItems.last().text(), "added item" ); equal( "Changed value", menuItems.eq( 0 ).text(), "changed item" ); -}); +} ); asyncTest( "refresh - change selected option", function() { expect( 4 ); @@ -84,7 +84,7 @@ asyncTest( "refresh - change selected option", function() { equal( element.find( "option:selected" ).text(), button.text(), "button text after init" ); button.simulate( "focus" ); - setTimeout(function() { + setTimeout( function() { equal( element.find( "option:selected" ).text(), button.text(), "button text after focus" ); element[ 0 ].selectedIndex = 0; @@ -98,8 +98,8 @@ asyncTest( "refresh - change selected option", function() { equal( "Selected option", button.text(), "button text after adding selected option" ); start(); - }); -}); + } ); +} ); test( "refresh - disabled select", function() { expect( 4 ); @@ -115,7 +115,7 @@ test( "refresh - disabled select", function() { equal( button.attr( "aria-disabled" ), "true", "button ARIA" ); equal( button.attr( "tabindex" ), -1, "button tabindex" ); equal( menu.attr( "aria-disabled" ), "true", "menu ARIA" ); -}); +} ); test( "refresh - disabled option", function( assert ) { expect( 1 ); @@ -129,7 +129,7 @@ test( "refresh - disabled option", function( assert ) { disabledItem = menu.find( "li" ).not( ".ui-selectmenu-optgroup" ).eq( 2 ); assert.hasClasses( disabledItem, "ui-state-disabled" ); -}); +} ); test( "refresh - disabled optgroup", function( assert ) { var i, item, @@ -156,7 +156,7 @@ test( "refresh - disabled optgroup", function( assert ) { item = item.next( "li" ); assert.hasClasses( item, "ui-state-disabled" ); } -}); +} ); test( "refresh - remove all options", function() { expect( 2 ); @@ -170,7 +170,7 @@ test( "refresh - remove all options", function() { equal( button.find( ".ui-selectmenu-text" ).html(), $( " " ).html(), "Empty button text" ); equal( menu.children().length, 0, "Empty menu" ); -}); +} ); test( "widget and menuWidget", function( assert ) { expect( 4 ); @@ -184,6 +184,6 @@ test( "widget and menuWidget", function( assert ) { equal( menu.length, 1, "Menu Widget: one element" ); ok( menu.is( "ul.ui-menu" ), "Menu Widget: element and class" ); -}); +} ); } ); diff --git a/tests/unit/selectmenu/options.js b/tests/unit/selectmenu/options.js index be2565e3732..0ac13ed6dde 100644 --- a/tests/unit/selectmenu/options.js +++ b/tests/unit/selectmenu/options.js @@ -11,7 +11,7 @@ test( "appendTo: null", function() { var element = $( "#speed" ).selectmenu(); equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], document.body, "defaults to body" ); -}); +} ); test( "appendTo: explicit", function() { expect( 6 ); @@ -19,9 +19,9 @@ test( "appendTo: explicit", function() { var detached = $( "
" ), element = $( "#speed" ); - element.selectmenu({ + element.selectmenu( { appendTo: ".selectmenu-wrap" - }); + } ); equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], $( "#selectmenu-wrap1" )[ 0 ], "first found element" ); equal( $( "#selectmenu-wrap2 .ui-selectmenu" ).length, 0, "only appends to one element" ); @@ -32,16 +32,16 @@ test( "appendTo: explicit", function() { $( "#selectmenu-wrap1" )[ 0 ], "modified after init" ); element.selectmenu( "destroy" ); - element.selectmenu({ + element.selectmenu( { appendTo: detached - }); + } ); equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], "detached jQuery object" ); element.selectmenu( "destroy" ); - element.selectmenu({ + element.selectmenu( { appendTo: detached[ 0 ] - }); + } ); equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], "detached DOM element" ); element.selectmenu( "destroy" ); @@ -50,7 +50,7 @@ test( "appendTo: explicit", function() { equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], detached[ 0 ], "detached DOM element via option()" ); element.selectmenu( "destroy" ); -}); +} ); test( "appendTo: ui-front", function() { expect( 2 ); @@ -63,12 +63,12 @@ test( "appendTo: ui-front", function() { $( "#selectmenu-wrap2" )[ 0 ], "null, inside .ui-front" ); element.selectmenu( "destroy" ); - element.selectmenu({ + element.selectmenu( { appendTo: $() - }); + } ); equal( element.selectmenu( "menuWidget" ).parent().parent()[ 0 ], $( "#selectmenu-wrap2" )[ 0 ], "empty jQuery object, inside .ui-front" ); -}); +} ); test( "CSS styles", function( assert ) { expect( 5 ); @@ -84,7 +84,7 @@ test( "CSS styles", function( assert ) { assert.hasClasses( button.find( "span.ui-icon" ), "ui-icon-triangle-1-s" ); assert.hasClasses( menu, "ui-corner-bottom" ); assert.lacksClasses( button, "ui-corner-all" ); -}); +} ); test( "width", function() { expect( 6 ); @@ -120,9 +120,9 @@ test( "width", function() { element .selectmenu( "destroy" ) .css( "width", "100%" ) - .selectmenu({ width: null }); + .selectmenu( { width: null } ); button = element.selectmenu( "widget" ); equal( button.outerWidth(), 300, "button width fills container" ); -}); +} ); } ); From c8a50dbe7fbf3e8ee714880feac94d0389f401e1 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:50:46 -0400 Subject: [PATCH 02/27] Tooltip: Style updates Ref #14246 --- tests/unit/tooltip/common-deprecated.js | 2 +- tests/unit/tooltip/common.js | 2 +- tests/unit/tooltip/core.js | 62 +++++++-------- tests/unit/tooltip/deprecated.js | 6 +- tests/unit/tooltip/events.js | 24 +++--- tests/unit/tooltip/methods.js | 27 ++++--- tests/unit/tooltip/options.js | 100 ++++++++++++------------ ui/widgets/tooltip.js | 10 +++ 8 files changed, 124 insertions(+), 109 deletions(-) diff --git a/tests/unit/tooltip/common-deprecated.js b/tests/unit/tooltip/common-deprecated.js index 75a688f0a0c..2a543733579 100644 --- a/tests/unit/tooltip/common-deprecated.js +++ b/tests/unit/tooltip/common-deprecated.js @@ -26,6 +26,6 @@ common.testWidget( "tooltip", { create: null, open: null } -}); +} ); } ); diff --git a/tests/unit/tooltip/common.js b/tests/unit/tooltip/common.js index 15c9dfad833..73797fe497d 100644 --- a/tests/unit/tooltip/common.js +++ b/tests/unit/tooltip/common.js @@ -25,6 +25,6 @@ common.testWidget( "tooltip", { create: null, open: null } -}); +} ); } ); diff --git a/tests/unit/tooltip/core.js b/tests/unit/tooltip/core.js index e7e22b0e651..0dfdc582537 100644 --- a/tests/unit/tooltip/core.js +++ b/tests/unit/tooltip/core.js @@ -21,7 +21,7 @@ test( "markup structure", function( assert ) { equal( tooltip.length, 1, ".ui-tooltip exists" ); equal( tooltip.find( ".ui-tooltip-content" ).length, 1, ".ui-tooltip-content exists" ); -}); +} ); test( "accessibility", function() { expect( 15 ); @@ -61,7 +61,7 @@ test( "accessibility", function() { element.tooltip( "destroy" ); equal( liveRegion.parent().length, 0, "Tooltip liveregion element should be removed" ); -}); +} ); test( "delegated removal", function() { expect( 2 ); @@ -74,32 +74,32 @@ test( "delegated removal", function() { container.empty(); equal( $( ".ui-tooltip" ).length, 0 ); -}); +} ); test( "nested tooltips", function() { expect( 2 ); var child = $( "#contained-tooltipped" ), - parent = $( "#contains-tooltipped" ).tooltip({ + parent = $( "#contains-tooltipped" ).tooltip( { show: null, hide: null - }); + } ); parent.trigger( "mouseover" ); equal( $( ".ui-tooltip:visible" ).text(), "parent" ); child.trigger( "mouseover" ); equal( $( ".ui-tooltip" ).text(), "child" ); -}); +} ); // #8742 test( "form containing an input with name title", function() { expect( 4 ); - var form = $( "#tooltip-form" ).tooltip({ + var form = $( "#tooltip-form" ).tooltip( { show: null, hide: null - }), + } ), input = form.find( "[name=title]" ); equal( $( ".ui-tooltip" ).length, 0, "no tooltips on init" ); @@ -111,7 +111,7 @@ test( "form containing an input with name title", function() { form.trigger( "mouseover" ); equal( $( ".ui-tooltip" ).length, 0, "no tooltip for form" ); -}); +} ); test( "tooltip on .ui-state-disabled element", function() { expect( 2 ); @@ -124,18 +124,18 @@ test( "tooltip on .ui-state-disabled element", function() { container.empty(); equal( $( ".ui-tooltip" ).length, 0 ); -}); +} ); // http://bugs.jqueryui.com/ticket/8740 asyncTest( "programmatic focus with async content", function() { expect( 2 ); - var element = $( "#tooltipped1" ).tooltip({ + var element = $( "#tooltipped1" ).tooltip( { content: function( response ) { - setTimeout(function() { + setTimeout( function() { response( "test" ); - }); + } ); } - }); + } ); element.on( "tooltipopen", function( event ) { deepEqual( event.originalEvent.type, "focusin" ); @@ -143,35 +143,35 @@ asyncTest( "programmatic focus with async content", function() { element.on( "tooltipclose", function( event ) { deepEqual( event.originalEvent.type, "focusout" ); start(); - }); + } ); - setTimeout(function() { + setTimeout( function() { element.trigger( "blur" ); - }); - }); + } ); + } ); element.trigger( "focus" ); -}); +} ); asyncTest( "destroy during hide animation; only one close event", function() { expect( 1 ); - var element = $( "#tooltipped1" ).tooltip({ + var element = $( "#tooltipped1" ).tooltip( { show: false, hide: true - }); + } ); element.on( "tooltipclose", function() { ok( true, "tooltip closed" ); - }); + } ); element.tooltip( "open" ); element.tooltip( "close" ); - setTimeout(function() { + setTimeout( function() { element.tooltip( "destroy" ); start(); - }); -}); + } ); +} ); // http://bugs.jqueryui.com/ticket/10602 asyncTest( "multiple active delegated tooltips", function() { @@ -181,7 +181,7 @@ asyncTest( "multiple active delegated tooltips", function() { input = anchor.next(), actions = []; - $( document ).tooltip({ + $( document ).tooltip( { show: false, hide: false, open: function( event, ui ) { @@ -190,7 +190,7 @@ asyncTest( "multiple active delegated tooltips", function() { close: function( event, ui ) { actions.push( "close:" + ui.tooltip.text() ); } - }); + } ); function step1() { anchor.simulate( "mouseover" ); @@ -219,7 +219,7 @@ asyncTest( "multiple active delegated tooltips", function() { } step1(); -}); +} ); // http://bugs.jqueryui.com/ticket/11272 test( "remove conflicting attributes from live region", function() { @@ -234,7 +234,7 @@ test( "remove conflicting attributes from live region", function() { "
" ); $( "#tooltipped1" ) - .tooltip({ + .tooltip( { content: element, open: function() { equal( $( ".ui-helper-hidden-accessible [name]" ).length, 0, @@ -242,8 +242,8 @@ test( "remove conflicting attributes from live region", function() { equal( $( ".ui-helper-hidden-accessible [id]" ).length, 0, "no id attributes within live region" ); } - }) + } ) .tooltip( "open" ); -}); +} ); } ); diff --git a/tests/unit/tooltip/deprecated.js b/tests/unit/tooltip/deprecated.js index b1325057bfa..7fc7d91a483 100644 --- a/tests/unit/tooltip/deprecated.js +++ b/tests/unit/tooltip/deprecated.js @@ -7,10 +7,10 @@ module( "tooltip: (deprecated) options" ); test( "tooltipClass", function( assert ) { expect( 1 ); - var element = $( "#tooltipped1" ).tooltip({ + var element = $( "#tooltipped1" ).tooltip( { tooltipClass: "custom" - }).tooltip( "open" ); + } ).tooltip( "open" ); assert.hasClasses( $( "#" + element.data( "ui-tooltip-id" ) ), "custom" ); -}); +} ); } ); diff --git a/tests/unit/tooltip/events.js b/tests/unit/tooltip/events.js index 7ad36dc08ba..3cf65fc4ed1 100644 --- a/tests/unit/tooltip/events.js +++ b/tests/unit/tooltip/events.js @@ -13,17 +13,17 @@ test( "programmatic triggers", function() { element.one( "tooltipopen", function( event, ui ) { tooltip = ui.tooltip; ok( !( "originalEvent" in event ), "open" ); - strictEqual( ui.tooltip[0], - $( "#" + element.data( "ui-tooltip-id" ) )[0], "ui.tooltip" ); - }); + strictEqual( ui.tooltip[ 0 ], + $( "#" + element.data( "ui-tooltip-id" ) )[ 0 ], "ui.tooltip" ); + } ); element.tooltip( "open" ); element.one( "tooltipclose", function( event, ui ) { ok( !( "originalEvent" in event ), "close" ); - strictEqual( ui.tooltip[0], tooltip[0], "ui.tooltip" ); - }); + strictEqual( ui.tooltip[ 0 ], tooltip[ 0 ], "ui.tooltip" ); + } ); element.tooltip( "close" ); -}); +} ); test( "mouse events", function() { expect( 2 ); @@ -31,15 +31,15 @@ test( "mouse events", function() { element.on( "tooltipopen", function( event ) { deepEqual( event.originalEvent.type, "mouseover" ); - }); + } ); element.trigger( "mouseover" ); element.on( "tooltipclose", function( event ) { deepEqual( event.originalEvent.type, "mouseleave" ); - }); + } ); element.trigger( "focusout" ); element.trigger( "mouseleave" ); -}); +} ); test( "focus events", function() { expect( 2 ); @@ -47,14 +47,14 @@ test( "focus events", function() { element.on( "tooltipopen", function( event ) { deepEqual( event.originalEvent.type, "focusin" ); - }); + } ); element.trigger( "focusin" ); element.on( "tooltipclose", function( event ) { deepEqual( event.originalEvent.type, "focusout" ); - }); + } ); element.trigger( "mouseleave" ); element.trigger( "focusout" ); -}); +} ); } ); diff --git a/tests/unit/tooltip/methods.js b/tests/unit/tooltip/methods.js index d4c56e1f3d1..31fe86532d0 100644 --- a/tests/unit/tooltip/methods.js +++ b/tests/unit/tooltip/methods.js @@ -11,17 +11,17 @@ test( "destroy", function( assert ) { assert.domEqual( "#tooltipped1", function() { element.tooltip().tooltip( "destroy" ); - }); + } ); // Make sure that open tooltips are removed on destroy assert.domEqual( "#tooltipped1", function() { element .tooltip() - .tooltip( "open", $.Event( "mouseover", { target: element[0] }) ) + .tooltip( "open", $.Event( "mouseover", { target: element[ 0 ] } ) ) .tooltip( "destroy" ); - }); + } ); equal( $( ".ui-tooltip" ).length, 0 ); -}); +} ); test( "open/close", function() { expect( 3 ); @@ -37,14 +37,14 @@ test( "open/close", function() { element.tooltip( "close" ); ok( tooltip.is( ":hidden" ) ); $.fx.off = false; -}); +} ); // #8626 - Calling open() without an event test( "open/close with tracking", function() { expect( 3 ); $.fx.off = true; var tooltip, - element = $( "#tooltipped1" ).tooltip({ track: true }); + element = $( "#tooltipped1" ).tooltip( { track: true } ); equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); element.tooltip( "open" ); @@ -54,7 +54,7 @@ test( "open/close with tracking", function() { element.tooltip( "close" ); ok( tooltip.is( ":hidden" ) ); $.fx.off = false; -}); +} ); test( "enable/disable", function( assert ) { expect( 11 ); @@ -91,7 +91,7 @@ test( "enable/disable", function( assert ) { tooltip = $( "#" + element.data( "ui-tooltip-id" ) ); ok( tooltip.is( ":visible" ) ); $.fx.off = false; -}); +} ); test( "widget", function() { expect( 2 ); @@ -99,7 +99,7 @@ test( "widget", function() { widgetElement = element.tooltip( "widget" ); equal( widgetElement.length, 1, "one element" ); strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); -}); +} ); test( "preserve changes to title attributes on close and destroy", function() { expect( 6 ); @@ -110,14 +110,19 @@ test( "preserve changes to title attributes on close and destroy", function() { // 1. Changes to title attribute are preserved on close() tests[ 0 ] = { title: changed, expected: changed, method: "close" }; + // 2. Changes to title attribute are preserved on destroy() - tests[ 1 ] = { title: changed, expected: changed , method: "destroy" }; + tests[ 1 ] = { title: changed, expected: changed, method: "destroy" }; + // 3. Changes to title attribute are NOT preserved when set to empty string on close() tests[ 2 ] = { title: "", expected: original, method: "close" }; + // 4. Changes to title attribute are NOT preserved when set to empty string on destroy() tests[ 3 ] = { title: "", expected: original, method: "destroy" }; + // 5. Changes to title attribute NOT preserved when attribute has been removed on close() tests[ 4 ] = { expected: original, method: "close" }; + // 6. Changes to title attribute NOT preserved when attribute has been removed on destroy() tests[ 5 ] = { expected: original, method: "destroy" }; @@ -134,6 +139,6 @@ test( "preserve changes to title attributes on close and destroy", function() { equal( $( "#tooltipped1" ).attr( "title" ), test.expected ); } ); -}); +} ); } ); diff --git a/tests/unit/tooltip/options.js b/tests/unit/tooltip/options.js index 2833e68ddb6..a35d140fbd9 100644 --- a/tests/unit/tooltip/options.js +++ b/tests/unit/tooltip/options.js @@ -7,17 +7,17 @@ module( "tooltip: options" ); test( "disabled: true", function() { expect( 1 ); - $( "#tooltipped1" ).tooltip({ + $( "#tooltipped1" ).tooltip( { disabled: true - }).tooltip( "open" ); + } ).tooltip( "open" ); equal( $( ".ui-tooltip" ).length, 0 ); -}); +} ); test( "content: default", function() { expect( 1 ); var element = $( "#tooltipped1" ).tooltip().tooltip( "open" ); deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "anchortitle" ); -}); +} ); test( "content: default; HTML escaping", function() { expect( 2 ); @@ -31,130 +31,130 @@ test( "content: default; HTML escaping", function() { equal( $.ui.tooltip.hacked, false, "script did not execute" ); deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), scriptText, "correct tooltip text" ); -}); +} ); test( "content: return string", function() { expect( 1 ); - var element = $( "#tooltipped1" ).tooltip({ + var element = $( "#tooltipped1" ).tooltip( { content: function() { return "customstring"; } - }).tooltip( "open" ); + } ).tooltip( "open" ); deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" ); -}); +} ); test( "content: return jQuery", function() { expect( 2 ); - var element = $( "#tooltipped1" ).tooltip({ + var element = $( "#tooltipped1" ).tooltip( { content: function() { return $( "
" ).html( "customstring" ); } - }).tooltip( "open" ), + } ).tooltip( "open" ), liveRegion = element.tooltip( "instance" ).liveRegion; deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring" ); equal( liveRegion.children().last().html().toLowerCase(), "
customstring
", "The accessibility live region will strip the ids but keep the structure" ); -}); +} ); asyncTest( "content: sync + async callback", function() { expect( 2 ); - var element = $( "#tooltipped1" ).tooltip({ + var element = $( "#tooltipped1" ).tooltip( { content: function( response ) { - setTimeout(function() { - deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "loading..." ); + setTimeout( function() { + deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "loading..." ); response( "customstring2" ); - setTimeout(function() { - deepEqual( $( "#" + element.data("ui-tooltip-id") ).text(), "customstring2" ); + setTimeout( function() { + deepEqual( $( "#" + element.data( "ui-tooltip-id" ) ).text(), "customstring2" ); start(); }, 13 ); }, 13 ); return "loading..."; } - }).tooltip( "open" ); -}); + } ).tooltip( "open" ); +} ); // http://bugs.jqueryui.com/ticket/8740 asyncTest( "content: async callback loses focus before load", function() { expect( 1 ); - var element = $( "#tooltipped1" ).tooltip({ + var element = $( "#tooltipped1" ).tooltip( { content: function( response ) { - setTimeout(function() { + setTimeout( function() { element.trigger( "mouseleave" ); - setTimeout(function() { + setTimeout( function() { response( "sometext" ); - setTimeout(function() { + setTimeout( function() { ok( !$( "#" + element.data( "ui-tooltip-id" ) ).is( ":visible" ), "Tooltip should not display" ); start(); - }); - }); - }); + } ); + } ); + } ); } - }); + } ); element.trigger( "mouseover" ); -}); +} ); test( "content: change while open", function() { expect( 2 ) ; - var element = $( "#tooltipped1" ).tooltip({ + var element = $( "#tooltipped1" ).tooltip( { content: function() { return "old"; } - }); + } ); element.one( "tooltipopen", function( event, ui ) { equal( ui.tooltip.text(), "old", "original content" ); element.tooltip( "option", "content", function() { return "new"; - }); + } ); equal( ui.tooltip.text(), "new", "updated content" ); - }); + } ); element.tooltip( "open" ); -}); +} ); test( "content: string", function() { expect( 1 ); - $( "#tooltipped1" ).tooltip({ + $( "#tooltipped1" ).tooltip( { content: "just a string", open: function( event, ui ) { equal( ui.tooltip.text(), "just a string" ); } - }).tooltip( "open" ); -}); + } ).tooltip( "open" ); +} ); test( "content: element", function() { expect( 1 ); var content = "

this is a test of the emergency broadcast system.

", element = $( content )[ 0 ]; - $( "#tooltipped1" ).tooltip({ + $( "#tooltipped1" ).tooltip( { content: element, open: function( event, ui ) { equal( ui.tooltip.children().html().toLowerCase(), content ); } - }).tooltip( "open" ); -}); + } ).tooltip( "open" ); +} ); test( "content: jQuery", function() { expect( 1 ); var content = "

this is a test of the emergency broadcast system.

", element = $( content ); - $( "#tooltipped1" ).tooltip({ + $( "#tooltipped1" ).tooltip( { content: element, open: function( event, ui ) { equal( ui.tooltip.children().html().toLowerCase(), content ); } - }).tooltip( "open" ); -}); + } ).tooltip( "open" ); +} ); test( "items", function() { expect( 2 ); var event, - element = $( "#qunit-fixture" ).tooltip({ + element = $( "#qunit-fixture" ).tooltip( { items: "#fixture-span" - }); + } ); event = $.Event( "mouseenter" ); event.target = $( "#fixture-span" )[ 0 ]; @@ -167,7 +167,7 @@ test( "items", function() { deepEqual( $( "#tooltipped1" ).data( "ui-tooltip-id" ), undefined ); element.tooltip( "destroy" ); -}); +} ); test( "track + show delay", function() { expect( 2 ); @@ -175,7 +175,7 @@ test( "track + show delay", function() { leftVal = 314, topVal = 159, offsetVal = 26, - element = $( "#tooltipped1" ).tooltip({ + element = $( "#tooltipped1" ).tooltip( { track: true, show: { delay: 1 @@ -184,7 +184,7 @@ test( "track + show delay", function() { my: "left+" + offsetVal + " top+" + offsetVal, at: "right bottom" } - }); + } ); event = $.Event( "mouseover" ); event.target = $( "#tooltipped1" )[ 0 ]; @@ -202,14 +202,14 @@ test( "track + show delay", function() { equal( $( ".ui-tooltip" ).css( "left" ), leftVal + offsetVal + "px" ); equal( $( ".ui-tooltip" ).css( "top" ), topVal + offsetVal + "px" ); -}); +} ); test( "track and programmatic focus", function() { expect( 1 ); - $( "#qunit-fixture div input" ).tooltip({ + $( "#qunit-fixture div input" ).tooltip( { track: true - }).trigger( "focus" ); + } ).trigger( "focus" ); equal( "inputtitle", $( ".ui-tooltip" ).text() ); -}); +} ); } ); diff --git a/ui/widgets/tooltip.js b/ui/widgets/tooltip.js index 6c4493052d7..512224050f4 100644 --- a/ui/widgets/tooltip.js +++ b/ui/widgets/tooltip.js @@ -42,13 +42,16 @@ $.widget( "ui.tooltip", { "ui-tooltip": "ui-corner-all ui-widget-shadow" }, content: function() { + // support: IE<9, Opera in jQuery <1.7 // .text() can't accept undefined, so coerce to a string var title = $( this ).attr( "title" ) || ""; + // Escape title, since we're going from an attribute to raw HTML return $( "" ).text( title ).html(); }, hide: true, + // Disabled elements have inconsistent behavior across browsers (#8661) items: "[title]:not([disabled])", position: { @@ -123,6 +126,7 @@ $.widget( "ui.tooltip", { if ( key === "disabled" ) { this[ value ? "_disable" : "_enable" ](); this.options[ key ] = value; + // disable element style changes return; } @@ -158,6 +162,7 @@ $.widget( "ui.tooltip", { }, _enable: function() { + // restore title attributes this.element.find( this.options.items ).addBack().each( function() { var element = $( this ); @@ -170,6 +175,7 @@ $.widget( "ui.tooltip", { open: function( event ) { var that = this, target = $( event ? event.target : this.element ) + // we need closest here due to mouseover bubbling, // but always pointing at the same event target .closest( this.options.items ); @@ -304,6 +310,7 @@ $.widget( "ui.tooltip", { this._on( this.document, { mousemove: position } ); + // trigger once to override element-relative positioning position( event ); } else { @@ -315,6 +322,7 @@ $.widget( "ui.tooltip", { tooltip.hide(); this._show( tooltip, this.options.show ); + // Handle tracking tooltips that are shown with a delay (#8644). As soon // as the tooltip is visible, position the tooltip using the most recent // event. @@ -464,6 +472,7 @@ $.widget( "ui.tooltip", { // Close open tooltips $.each( this.tooltips, function( id, tooltipData ) { + // Delegate to close method to handle common cleanup var event = $.Event( "blur" ), element = tooltipData.element; @@ -476,6 +485,7 @@ $.widget( "ui.tooltip", { // Restore the title if ( element.data( "ui-tooltip-title" ) ) { + // If the title attribute has changed since open(), don't restore if ( !element.attr( "title" ) ) { element.attr( "title", element.data( "ui-tooltip-title" ) ); From 2c98903076679074f4ddbd390caa1cf5b1462e09 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:57:25 -0400 Subject: [PATCH 03/27] Tabs: Style updates Ref #14246 --- tests/unit/tabs/common.js | 2 +- tests/unit/tabs/core.js | 68 +++++++++++----------- tests/unit/tabs/events.js | 67 +++++++++++---------- tests/unit/tabs/helper.js | 17 +++--- tests/unit/tabs/methods.js | 74 +++++++++++++---------- tests/unit/tabs/options.js | 116 ++++++++++++++++++------------------- ui/widgets/tabs.js | 22 +++++++ 7 files changed, 202 insertions(+), 164 deletions(-) diff --git a/tests/unit/tabs/common.js b/tests/unit/tabs/common.js index 40c899847be..ae4adde5a54 100644 --- a/tests/unit/tabs/common.js +++ b/tests/unit/tabs/common.js @@ -26,6 +26,6 @@ common.testWidget( "tabs", { create: null, load: null } -}); +} ); } ); diff --git a/tests/unit/tabs/core.js b/tests/unit/tabs/core.js index 9c62817eba4..a2b41e24c8c 100644 --- a/tests/unit/tabs/core.js +++ b/tests/unit/tabs/core.js @@ -40,9 +40,9 @@ test( "markup structure", function( assert ) { assert.hasClasses( panels[ 1 ], "ui-tabs-panel ui-widget-content" ); assert.hasClasses( panels[ 2 ], "ui-tabs-panel ui-widget-content" ); equal( panels.length, 3, "There are exactly 3 tab panels" ); -}); +} ); -$.each({ +$.each( { "deep ul": "#tabs3", "multiple lists, ul first": "#tabs4", "multiple lists, ol first": "#tabs5", @@ -53,8 +53,8 @@ $.each({ var element = $( selector ).tabs(); assert.hasClasses( element, "ui-tabs" ); assert.hasClasses( $( selector + "-list" ), "ui-tabs-nav" ); - }); -}); + } ); +} ); // #5893 - Sublist in the tab list are considered as tab test( "nested list", function() { @@ -62,7 +62,7 @@ test( "nested list", function() { var element = $( "#tabs6" ).tabs(); equal( element.tabs( "instance" ).anchors.length, 2, "should contain 2 tab" ); -}); +} ); test( "disconnected from DOM", function() { expect( 2 ); @@ -70,7 +70,7 @@ test( "disconnected from DOM", function() { var element = $( "#tabs1" ).remove().tabs(); equal( element.find( ".ui-tabs-nav" ).length, 1, "should initialize nav" ); equal( element.find( ".ui-tabs-panel" ).length, 3, "should initialize panels" ); -}); +} ); test( "non-tab list items", function() { expect( 2 ); @@ -79,17 +79,17 @@ test( "non-tab list items", function() { equal( element.tabs( "option", "active" ), 0, "defaults to first tab" ); equal( element.find( ".ui-tabs-nav li.ui-state-active" ).index(), 1, "first actual tab is active" ); -}); +} ); test( "aria-controls", function() { expect( 7 ); var element = $( "#tabs1" ).tabs(), tabs = element.find( ".ui-tabs-nav li" ); - tabs.each(function() { + tabs.each( function() { var tab = $( this ), anchor = tab.find( ".ui-tabs-anchor" ); equal( anchor.prop( "hash" ).substring( 1 ), tab.attr( "aria-controls" ) ); - }); + } ); element = $( "#tabs2" ).tabs(); tabs = element.find( ".ui-tabs-nav li" ); @@ -97,20 +97,20 @@ test( "aria-controls", function() { equal( tabs.eq( 1 ).attr( "aria-controls" ), "inline-style" ); ok( /^ui-id-\d+$/.test( tabs.eq( 2 ).attr( "aria-controls" ) ), "generated id" ); equal( tabs.eq( 3 ).attr( "aria-controls" ), "custom-id" ); -}); +} ); test( "accessibility", function() { expect( 49 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { active: 1, disabled: [ 2 ] - }), + } ), tabs = element.find( ".ui-tabs-nav li" ), anchors = tabs.find( ".ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); equal( element.find( ".ui-tabs-nav" ).attr( "role" ), "tablist", "tablist role" ); - tabs.each(function( index ) { + tabs.each( function( index ) { var tab = tabs.eq( index ), anchor = anchors.eq( index ), anchorId = anchor.attr( "id" ), @@ -121,7 +121,7 @@ test( "accessibility", function() { equal( anchor.attr( "tabindex" ), -1, "anchor " + index + " tabindex" ); equal( panel.attr( "role" ), "tabpanel", "panel " + index + " role" ); equal( panel.attr( "aria-labelledby" ), anchorId, "panel " + index + " aria-labelledby" ); - }); + } ); equal( tabs.eq( 1 ).attr( "aria-selected" ), "true", "active tab has aria-selected=true" ); equal( tabs.eq( 1 ).attr( "tabindex" ), 0, "active tab has tabindex=0" ); @@ -155,7 +155,7 @@ test( "accessibility", function() { equal( tabs.eq( 2 ).attr( "aria-disabled" ), "true", "disabled tab has aria-disabled=true" ); equal( tabs.eq( 2 ).attr( "aria-expanded" ), "false", "inactive tab has aria-expanded=false" ); equal( panels.eq( 2 ).attr( "aria-hidden" ), "true", "inactive panel has aria-hidden=true" ); -}); +} ); asyncTest( "accessibility - ajax", function( assert ) { expect( 6 ); @@ -169,19 +169,19 @@ asyncTest( "accessibility - ajax", function( assert ) { assert.hasClasses( tab, "ui-tabs-loading" ); equal( panel.attr( "aria-busy" ), "true", "panel has aria-busy during load" ); element.one( "tabsload", function() { - setTimeout(function() { + setTimeout( function() { equal( panel.attr( "aria-busy" ), null, "panel does not have aria-busy after load" ); assert.lacksClasses( tab, "ui-tabs-loading" ); start(); }, 1 ); - }); -}); + } ); +} ); asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", function( assert ) { expect( 92 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { collapsible: true - }), + } ), tabs = element.find( ".ui-tabs-nav li" ), panels = element.find( ".ui-tabs-panel" ), keyCode = $.ui.keyCode; @@ -328,10 +328,10 @@ asyncTest( "keyboard support - LEFT, RIGHT, UP, DOWN, HOME, END, SPACE, ENTER", } setTimeout( step1 ); -}); +} ); // Navigation with CTRL and COMMAND (both behave the same) -$.each({ +$.each( { ctrl: "CTRL", meta: "COMMAND" }, function( modifier, label ) { @@ -547,8 +547,8 @@ $.each({ } setTimeout( step1 ); - }); -}); + } ); +} ); asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function( assert ) { expect( 50 ); @@ -640,34 +640,34 @@ asyncTest( "keyboard support - CTRL+UP, ALT+PAGE_DOWN, ALT+PAGE_UP", function( a } setTimeout( step1 ); -}); +} ); test( "#3627 - Ajax tab with url containing a fragment identifier fails to load", function() { expect( 1 ); - $( "#tabs2" ).tabs({ + $( "#tabs2" ).tabs( { active: 2, beforeLoad: function( event, ui ) { event.preventDefault(); ok( /test.html$/.test( ui.ajaxSettings.url ), "should ignore fragment identifier" ); } - }); -}); + } ); +} ); test( "#4033 - IE expands hash to full url and misinterprets tab as ajax", function() { expect( 2 ); - var element = $("
"); - element.appendTo("#qunit-fixture"); - element.tabs({ + var element = $( "
" ); + element.appendTo( "#qunit-fixture" ); + element.tabs( { beforeLoad: function() { event.preventDefault(); ok( false, "should not be an ajax tab" ); } - }); + } ); - equal( element.find(".ui-tabs-nav li").attr("aria-controls"), "tab", "aria-contorls attribute is correct" ); + equal( element.find( ".ui-tabs-nav li" ).attr( "aria-controls" ), "tab", "aria-contorls attribute is correct" ); state( element, 1 ); -}); +} ); } ); diff --git a/tests/unit/tabs/events.js b/tests/unit/tabs/events.js index 307e110fdbe..736fda503a7 100644 --- a/tests/unit/tabs/events.js +++ b/tests/unit/tabs/events.js @@ -15,17 +15,17 @@ test( "create", function() { tabs = element.find( "ul li" ), panels = element.children( "div" ); - element.tabs({ + element.tabs( { create: function( event, ui ) { equal( ui.tab.length, 1, "tab length" ); strictEqual( ui.tab[ 0 ], tabs[ 0 ], "tab" ); equal( ui.panel.length, 1, "panel length" ); strictEqual( ui.panel[ 0 ], panels[ 0 ], "panel" ); } - }); + } ); element.tabs( "destroy" ); - element.tabs({ + element.tabs( { active: 2, create: function( event, ui ) { equal( ui.tab.length, 1, "tab length" ); @@ -33,27 +33,27 @@ test( "create", function() { equal( ui.panel.length, 1, "panel length" ); strictEqual( ui.panel[ 0 ], panels[ 2 ], "panel" ); } - }); + } ); element.tabs( "destroy" ); - element.tabs({ + element.tabs( { active: false, collapsible: true, create: function( event, ui ) { equal( ui.tab.length, 0, "tab length" ); equal( ui.panel.length, 0, "panel length" ); } - }); + } ); element.tabs( "destroy" ); -}); +} ); test( "beforeActivate", function() { expect( 38 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { active: false, collapsible: true - }), + } ), tabs = element.find( ".ui-tabs-nav li" ), anchors = tabs.find( ".ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); @@ -68,7 +68,7 @@ test( "beforeActivate", function() { equal( ui.newPanel.length, 1, "newPanel length" ); strictEqual( ui.newPanel[ 0 ], panels[ 0 ], "newPanel" ); state( element, 0, 0, 0 ); - }); + } ); element.tabs( "option", "active", 0 ); state( element, 1, 0, 0 ); @@ -84,7 +84,7 @@ test( "beforeActivate", function() { equal( ui.newPanel.length, 1, "newPanel length" ); strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); state( element, 1, 0, 0 ); - }); + } ); anchors.eq( 1 ).trigger( "click" ); state( element, 0, 1, 0 ); @@ -98,7 +98,7 @@ test( "beforeActivate", function() { equal( ui.newTab.length, 0, "newTab length" ); equal( ui.newPanel.length, 0, "newPanel length" ); state( element, 0, 1, 0 ); - }); + } ); element.tabs( "option", "active", false ); state( element, 0, 0, 0 ); @@ -113,18 +113,18 @@ test( "beforeActivate", function() { strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); event.preventDefault(); state( element, 0, 0, 0 ); - }); + } ); element.tabs( "option", "active", 1 ); state( element, 0, 0, 0 ); -}); +} ); test( "activate", function() { expect( 30 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { active: false, collapsible: true - }), + } ), tabs = element.find( ".ui-tabs-nav li" ), anchors = element.find( ".ui-tabs-anchor" ), panels = element.find( ".ui-tabs-panel" ); @@ -139,7 +139,7 @@ test( "activate", function() { equal( ui.newPanel.length, 1, "newPanel length" ); strictEqual( ui.newPanel[ 0 ], panels[ 0 ], "newPanel" ); state( element, 1, 0, 0 ); - }); + } ); element.tabs( "option", "active", 0 ); state( element, 1, 0, 0 ); @@ -155,7 +155,7 @@ test( "activate", function() { equal( ui.newPanel.length, 1, "newPanel length" ); strictEqual( ui.newPanel[ 0 ], panels[ 1 ], "newPanel" ); state( element, 0, 1, 0 ); - }); + } ); anchors.eq( 1 ).trigger( "click" ); state( element, 0, 1, 0 ); @@ -169,7 +169,7 @@ test( "activate", function() { equal( ui.newTab.length, 0, "newTab length" ); equal( ui.newPanel.length, 0, "newPanel length" ); state( element, 0, 0, 0 ); - }); + } ); element.tabs( "option", "active", false ); state( element, 0, 0, 0 ); @@ -177,12 +177,12 @@ test( "activate", function() { element.one( "tabsbeforeactivate", function( event ) { ok( true, "tabsbeforeactivate" ); event.preventDefault(); - }); + } ); element.one( "tabsactivate", function() { ok( false, "tabsactivate" ); - }); + } ); element.tabs( "option", "active", 1 ); -}); +} ); test( "beforeLoad", function() { expect( 32 ); @@ -206,8 +206,8 @@ test( "beforeLoad", function() { equal( ui.panel.html(), "", "panel html" ); event.preventDefault(); state( element, 0, 0, 1, 0, 0 ); - }); - element.tabs({ active: 2 }); + } ); + element.tabs( { active: 2 } ); state( element, 0, 0, 1, 0, 0 ); equal( panel.html(), "", "panel html after" ); element.tabs( "destroy" ); @@ -228,7 +228,7 @@ test( "beforeLoad", function() { equal( ui.panel.html(), "", "panel html" ); event.preventDefault(); state( element, 1, 0, 0, 0, 0 ); - }); + } ); element.tabs(); element.tabs( "option", "active", 2 ); state( element, 0, 0, 1, 0, 0 ); @@ -250,12 +250,13 @@ test( "beforeLoad", function() { ui.panel.html( "

testing

" ); event.preventDefault(); state( element, 0, 0, 1, 0, 0 ); - }); + } ); element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 3 ).trigger( "click" ); state( element, 0, 0, 0, 1, 0 ); + // .toLowerCase() is needed to convert

to

in old IEs equal( panel.html().toLowerCase(), "

testing

", "panel html after" ); -}); +} ); asyncTest( "load", function() { expect( 21 ); @@ -277,10 +278,11 @@ asyncTest( "load", function() { equal( ui.panel.find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 1, 0, 0 ); tabsload1(); - }); - element.tabs({ active: 2 }); + } ); + element.tabs( { active: 2 } ); function tabsload1() { + // .option() element.one( "tabsload", function( event, ui ) { tab = element.find( ".ui-tabs-nav li" ).eq( 3 ); @@ -295,11 +297,12 @@ asyncTest( "load", function() { equal( ui.panel.find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 0, 1, 0 ); tabsload2(); - }); + } ); element.tabs( "option", "active", 3 ); } function tabsload2() { + // click, change panel content element.one( "tabsload", function( event, ui ) { tab = element.find( ".ui-tabs-nav li" ).eq( 4 ); @@ -314,9 +317,9 @@ asyncTest( "load", function() { equal( ui.panel.find( "p" ).length, 1, "panel html" ); state( element, 0, 0, 0, 0, 1 ); start(); - }); + } ); element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 4 ).trigger( "click" ); } -}); +} ); } ); diff --git a/tests/unit/tabs/helper.js b/tests/unit/tabs/helper.js index 132061753df..073895f5ff3 100644 --- a/tests/unit/tabs/helper.js +++ b/tests/unit/tabs/helper.js @@ -15,7 +15,7 @@ return $.extend( helper, { if ( internalState === true ) { internalState = $.map( new Array( tabs.find( ".ui-tabs-nav li" ).length ), function( _, index ) { return index; - }); + } ); } expected = $.map( new Array( tabs.find ( ".ui-tabs-nav li" ).length ), function( _, index ) { @@ -24,9 +24,9 @@ return $.extend( helper, { } else { return $.inArray( index, state ) !== -1 ? 1 : 0; } - }); + } ); - actual = tabs.find( ".ui-tabs-nav li" ).map(function( index ) { + actual = tabs.find( ".ui-tabs-nav li" ).map( function( index ) { var tab = $( this ), tabIsDisabled = tab.hasClass( "ui-state-disabled" ); @@ -36,23 +36,24 @@ return $.extend( helper, { if ( !tabIsDisabled && $.inArray( index, internalState ) === -1 ) { return 0; } + // mixed state - invalid return -1; - }).get(); + } ).get(); deepEqual( tabs.tabs( "option", "disabled" ), state ); deepEqual( actual, expected ); }, equalHeight: function( tabs, height ) { - tabs.find( ".ui-tabs-panel" ).each(function() { + tabs.find( ".ui-tabs-panel" ).each( function() { equal( $( this ).outerHeight(), height ); - }); + } ); }, state: function( tabs ) { var expected = $.makeArray( arguments ).slice( 1 ), - actual = tabs.find( ".ui-tabs-nav li" ).map(function() { + actual = tabs.find( ".ui-tabs-nav li" ).map( function() { var tab = $( this ), panel = $( $.ui.tabs.prototype._sanitizeSelector( "#" + tab.attr( "aria-controls" ) ) ), @@ -66,7 +67,7 @@ return $.extend( helper, { return 0; } return -1; // mixed state - invalid - }).get(); + } ).get(); deepEqual( actual, expected ); } } ); diff --git a/tests/unit/tabs/methods.js b/tests/unit/tabs/methods.js index d904ac53040..ef7c09ba78d 100644 --- a/tests/unit/tabs/methods.js +++ b/tests/unit/tabs/methods.js @@ -13,95 +13,103 @@ test( "destroy", function( assert ) { expect( 2 ); assert.domEqual( "#tabs1", function() { $( "#tabs1" ).tabs().tabs( "destroy" ); - }); + } ); assert.domEqual( "#tabs2", function() { $( "#tabs2" ).tabs().tabs( "destroy" ); - }); -}); + } ); +} ); asyncTest( "destroy - ajax", function( assert ) { expect( 1 ); assert.domEqual( "#tabs2", function( done ) { - var element = $( "#tabs2" ).tabs({ + var element = $( "#tabs2" ).tabs( { load: function() { - setTimeout(function() { + setTimeout( function() { element.tabs( "destroy" ); done(); start(); - }); + } ); } - }); + } ); element.tabs( "option", "active", 2 ); - }); -}); + } ); +} ); test( "enable", function() { expect( 8 ); - var element = $( "#tabs1" ).tabs({ disabled: true }); + var element = $( "#tabs1" ).tabs( { disabled: true } ); disabled( element, true ); element.tabs( "enable" ); disabled( element, false ); element.tabs( "destroy" ); - element.tabs({ disabled: [ 0, 1 ] }); + element.tabs( { disabled: [ 0, 1 ] } ); disabled( element, [ 0, 1 ] ); element.tabs( "enable" ); disabled( element, false ); -}); +} ); test( "enable( index )", function() { expect( 10 ); - var element = $( "#tabs1" ).tabs({ disabled: true }); + var element = $( "#tabs1" ).tabs( { disabled: true } ); disabled( element, true ); + // fully disabled -> partially disabled element.tabs( "enable", 1 ); disabled( element, [ 0, 2 ] ); + // partially disabled -> partially disabled element.tabs( "enable", 2 ); disabled( element, [ 0 ] ); + // already enabled tab, no change element.tabs( "enable", 2 ); disabled( element, [ 0 ] ); + // partially disabled -> fully enabled element.tabs( "enable", 0 ); disabled( element, false ); -}); +} ); test( "disable", function() { expect( 8 ); - var element = $( "#tabs1" ).tabs({ disabled: false }); + var element = $( "#tabs1" ).tabs( { disabled: false } ); disabled( element, false ); element.tabs( "disable" ); disabled( element, true ); element.tabs( "destroy" ); - element.tabs({ disabled: [ 0, 1 ] }); + element.tabs( { disabled: [ 0, 1 ] } ); disabled( element, [ 0, 1 ] ); element.tabs( "disable" ); disabled( element, true ); -}); +} ); test( "disable( index )", function() { expect( 10 ); - var element = $( "#tabs1" ).tabs({ disabled: false }); + var element = $( "#tabs1" ).tabs( { disabled: false } ); disabled( element, false ); + // fully enabled -> partially disabled element.tabs( "disable", 1 ); disabled( element, [ 1 ] ); + // partially disabled -> partially disabled element.tabs( "disable", 2 ); disabled( element, [ 1, 2 ] ); + // already disabled tab, no change element.tabs( "disable", 2 ); disabled( element, [ 1, 2 ] ); + // partially disabled -> fully disabled element.tabs( "disable", 0 ); disabled( element, true ); -}); +} ); test( "refresh", function() { expect( 27 ); @@ -170,15 +178,15 @@ test( "refresh", function() { element.tabs( "refresh" ); state( element, 1 ); disabled( element, false ); -}); +} ); test( "refresh - looping", function() { expect( 6 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { disabled: [ 0 ], active: 1 - }); + } ); state( element, 0, 1, 0 ); disabled( element, [ 0 ] ); @@ -190,7 +198,7 @@ test( "refresh - looping", function() { element.tabs( "refresh" ); state( element, 0, 1 ); disabled( element, [ 0 ] ); -}); +} ); asyncTest( "load", function() { expect( 30 ); @@ -210,8 +218,9 @@ asyncTest( "load", function() { equal( ui.panel.length, 1, "panel length" ); strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); state( element, 1, 0, 0, 0, 0 ); - }); + } ); element.one( "tabsload", function( event, ui ) { + // TODO: remove wrapping in 2.0 var uiTab = $( ui.tab ), uiPanel = $( ui.panel ), @@ -227,24 +236,26 @@ asyncTest( "load", function() { equal( uiPanel.find( "p" ).length, 1, "panel html" ); state( element, 1, 0, 0, 0, 0 ); setTimeout( tabsload1 ); - }); + } ); element.tabs( "load", 3 ); state( element, 1, 0, 0, 0, 0 ); function tabsload1() { + // no need to test details of event (tested in events tests) element.one( "tabsbeforeload", function() { ok( true, "tabsbeforeload invoked" ); - }); + } ); element.one( "tabsload", function() { ok( true, "tabsload invoked" ); setTimeout( tabsload2 ); - }); + } ); element.tabs( "option", "active", 3 ); state( element, 0, 0, 0, 1, 0 ); } function tabsload2() { + // reload content of active tab element.one( "tabsbeforeload", function( event, ui ) { var tab = element.find( ".ui-tabs-nav li" ).eq( 3 ), @@ -257,8 +268,9 @@ asyncTest( "load", function() { equal( ui.panel.length, 1, "panel length" ); strictEqual( ui.panel[ 0 ], panel[ 0 ], "panel" ); state( element, 0, 0, 0, 1, 0 ); - }); + } ); element.one( "tabsload", function( event, ui ) { + // TODO: remove wrapping in 2.0 var uiTab = $( ui.tab ), uiPanel = $( ui.panel ), @@ -273,11 +285,11 @@ asyncTest( "load", function() { strictEqual( uiPanel[ 0 ], panel[ 0 ], "panel" ); state( element, 0, 0, 0, 1, 0 ); start(); - }); + } ); element.tabs( "load", 3 ); state( element, 0, 0, 0, 1, 0 ); } -}); +} ); test( "widget", function() { expect( 2 ); @@ -285,6 +297,6 @@ test( "widget", function() { widgetElement = element.tabs( "widget" ); equal( widgetElement.length, 1, "one element" ); strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); -}); +} ); } ); diff --git a/tests/unit/tabs/options.js b/tests/unit/tabs/options.js index f615e165ee7..f9d9857b12a 100644 --- a/tests/unit/tabs/options.js +++ b/tests/unit/tabs/options.js @@ -30,15 +30,15 @@ test( "{ active: default }", function() { state( element, 0, 0, 0, 1, 0 ); element.tabs( "destroy" ); location.hash = "#"; -}); +} ); test( "{ active: false }", function() { expect( 7 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { active: false, collapsible: true - }); + } ); state( element, 0, 0, 0 ); equal( element.find( ".ui-tabs-nav .ui-state-active" ).length, 0, "no tabs selected" ); strictEqual( element.tabs( "option", "active" ), false ); @@ -48,19 +48,19 @@ test( "{ active: false }", function() { equal( element.tabs( "option", "active" ), 0 ); element.tabs( "destroy" ); - element.tabs({ + element.tabs( { active: false - }); + } ); state( element, 1, 0, 0 ); strictEqual( element.tabs( "option", "active" ), 0 ); -}); +} ); test( "{ active: Number }", function() { expect( 8 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { active: 2 - }); + } ); equal( element.tabs( "option", "active" ), 2 ); state( element, 0, 0, 1 ); @@ -75,14 +75,14 @@ test( "{ active: Number }", function() { element.tabs( "option", "active", 10 ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); +} ); test( "{ active: -Number }", function() { expect( 8 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { active: -1 - }); + } ); equal( element.tabs( "option", "active" ), 2 ); state( element, 0, 0, 1 ); @@ -97,7 +97,7 @@ test( "{ active: -Number }", function() { element.tabs( "option", "active", -3 ); equal( element.tabs( "option", "active" ), 0 ); state( element, 1, 0, 0 ); -}); +} ); test( "active - mismatched tab/panel order", function() { expect( 3 ); @@ -109,15 +109,15 @@ test( "active - mismatched tab/panel order", function() { element.tabs( "option", "active", 0 ); state( element, 1, 0 ); location.hash = "#"; -}); +} ); test( "collapsible", function( assert ) { expect( 13 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { active: 1, collapsible: true - }); + } ); assert.hasClasses( element, "ui-tabs-collapsible" ); element.tabs( "option", "active", false ); equal( element.tabs( "option", "active" ), false ); @@ -138,10 +138,10 @@ test( "collapsible", function( assert ) { assert.hasClasses( element, "ui-tabs-collapsible" ); - element.tabs({ + element.tabs( { active: 1, collapsible: false - }); + } ); element.tabs( "option", "active", false ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); @@ -150,7 +150,7 @@ test( "collapsible", function( assert ) { equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); +} ); test( "disabled", function( assert ) { expect( 23 ); @@ -195,14 +195,14 @@ test( "disabled", function( assert ) { // Enable all tabs element.tabs( "option", "disabled", [] ); disabled( element, false ); -}); +} ); test( "{ event: null }", function() { expect( 5 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { event: null - }); + } ); state( element, 1, 0, 0 ); element.tabs( "option", "active", 1 ); @@ -213,14 +213,14 @@ test( "{ event: null }", function() { element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 2 ).trigger( "click" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); +} ); test( "{ event: custom }", function() { expect( 11 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { event: "custom1 custom2" - }); + } ); state( element, 1, 0, 0 ); element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom1" ); @@ -246,88 +246,88 @@ test( "{ event: custom }", function() { element.find( ".ui-tabs-nav .ui-tabs-anchor" ).eq( 1 ).trigger( "custom3" ); equal( element.tabs( "option", "active" ), 1 ); state( element, 0, 1, 0 ); -}); +} ); test( "{ heightStyle: 'auto' }", function() { expect( 2 ); - var element = $( "#tabs8" ).tabs({ heightStyle: "auto" }); + var element = $( "#tabs8" ).tabs( { heightStyle: "auto" } ); equalHeight( element, 45 ); -}); +} ); test( "{ heightStyle: 'content' }", function() { expect( 2 ); - var element = $( "#tabs8" ).tabs({ heightStyle: "content" }), - sizes = element.find( ".ui-tabs-panel" ).map(function() { + var element = $( "#tabs8" ).tabs( { heightStyle: "content" } ), + sizes = element.find( ".ui-tabs-panel" ).map( function() { return $( this ).height(); - }).get(); + } ).get(); equal( sizes[ 0 ], 45 ); equal( sizes[ 1 ], 15 ); -}); +} ); test( "{ heightStyle: 'fill' }", function() { expect( 4 ); $( "#tabs8Wrapper" ).height( 500 ); - var element = $( "#tabs8" ).tabs({ heightStyle: "fill" }); + var element = $( "#tabs8" ).tabs( { heightStyle: "fill" } ); equalHeight( element, 485 ); element.tabs( "destroy" ); - element = $( "#tabs8" ).css({ + element = $( "#tabs8" ).css( { "border": "1px solid black", "padding": "1px 0" - }); - element.tabs({ heightStyle: "fill" }); + } ); + element.tabs( { heightStyle: "fill" } ); equalHeight( element, 481 ); -}); +} ); test( "{ heightStyle: 'fill' } with sibling", function() { expect( 2 ); $( "#tabs8Wrapper" ).height( 500 ); $( "

Lorem Ipsum

" ) - .css({ + .css( { height: 50, marginTop: 20, marginBottom: 30 - }) + } ) .prependTo( "#tabs8Wrapper" ); - var element = $( "#tabs8" ).tabs({ heightStyle: "fill" }); + var element = $( "#tabs8" ).tabs( { heightStyle: "fill" } ); equalHeight( element, 385 ); -}); +} ); test( "{ heightStyle: 'fill' } with multiple siblings", function() { expect( 2 ); $( "#tabs8Wrapper" ).height( 500 ); $( "

Lorem Ipsum

" ) - .css({ + .css( { height: 50, marginTop: 20, marginBottom: 30 - }) + } ) .prependTo( "#tabs8Wrapper" ); $( "

Lorem Ipsum

" ) - .css({ + .css( { height: 50, marginTop: 20, marginBottom: 30, position: "absolute" - }) + } ) .prependTo( "#tabs8Wrapper" ); $( "

Lorem Ipsum

" ) - .css({ + .css( { height: 25, marginTop: 10, marginBottom: 15 - }) + } ) .prependTo( "#tabs8Wrapper" ); - var element = $( "#tabs8" ).tabs({ heightStyle: "fill" }); + var element = $( "#tabs8" ).tabs( { heightStyle: "fill" } ); equalHeight( element, 335 ); -}); +} ); test( "hide and show: false", function() { expect( 3 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { show: false, hide: false - }), + } ), widget = element.tabs( "instance" ), panels = element.find( ".ui-tabs-panel" ); widget._show = function() { @@ -341,34 +341,34 @@ test( "hide and show: false", function() { element.tabs( "option", "active", 1 ); ok( panels.eq( 0 ).is( ":hidden" ), "first panel hidden" ); ok( panels.eq( 1 ).is( ":visible" ), "second panel visible" ); -}); +} ); asyncTest( "hide and show - animation", function() { expect( 5 ); - var element = $( "#tabs1" ).tabs({ + var element = $( "#tabs1" ).tabs( { show: "drop", hide: 2000 - }), + } ), widget = element.tabs( "instance" ), panels = element.find( ".ui-tabs-panel" ); widget._show = function( element, options, callback ) { strictEqual( element[ 0 ], panels[ 1 ], "correct element in _show()" ); equal( options, "drop", "correct options in _show()" ); - setTimeout(function() { + setTimeout( function() { callback(); - }); + } ); }; widget._hide = function( element, options, callback ) { strictEqual( element[ 0 ], panels[ 0 ], "correct element in _hide()" ); equal( options, 2000, "correct options in _hide()" ); - setTimeout(function() { + setTimeout( function() { callback(); start(); - }); + } ); }; ok( panels.eq( 0 ).is( ":visible" ), "first panel visible" ); element.tabs( "option", "active", 1 ); -}); +} ); } ); diff --git a/ui/widgets/tabs.js b/ui/widgets/tabs.js index 034dcc3aa16..ff3a64ec8c0 100644 --- a/ui/widgets/tabs.js +++ b/ui/widgets/tabs.js @@ -123,6 +123,7 @@ $.widget( "ui.tabs", { locationHash = location.hash.substring( 1 ); if ( active === null ) { + // check the fragment identifier in the URL if ( locationHash ) { this.tabs.each( function( i, tab ) { @@ -193,15 +194,18 @@ $.widget( "ui.tabs", { selectedIndex = 0; break; case $.ui.keyCode.SPACE: + // Activate only, no collapsing event.preventDefault(); clearTimeout( this.activating ); this._activate( selectedIndex ); return; case $.ui.keyCode.ENTER: + // Toggle (cancel delayed activation, allow collapsing) event.preventDefault(); clearTimeout( this.activating ); + // Determine if we should collapse or activate this._activate( selectedIndex === this.options.active ? false : selectedIndex ); return; @@ -281,12 +285,14 @@ $.widget( "ui.tabs", { _setOption: function( key, value ) { if ( key === "active" ) { + // _activate() will handle invalid values and update this.options this._activate( value ); return; } if ( key === "disabled" ) { + // don't use the widget factory's disabled handling this._setupDisabled( value ); return; @@ -332,18 +338,23 @@ $.widget( "ui.tabs", { if ( options.active === false || !this.anchors.length ) { options.active = false; this.active = $(); + // was active, but active tab is gone } else if ( this.active.length && !$.contains( this.tablist[ 0 ], this.active[ 0 ] ) ) { + // all remaining tabs are disabled if ( this.tabs.length === options.disabled.length ) { options.active = false; this.active = $(); + // activate previous tab } else { this._activate( this._findNextTab( Math.max( 0, options.active - 1 ), false ) ); } + // was active, active tab still exists } else { + // make sure active index is correct options.active = this.tabs.index( this.active ); } @@ -445,8 +456,10 @@ $.widget( "ui.tabs", { selector = anchor.hash; panelId = selector.substring( 1 ); panel = that.element.find( that._sanitizeSelector( selector ) ); + // remote tab } else { + // If the tab doesn't already have aria-controls, // generate an id by using a throw-away element panelId = tab.attr( "aria-controls" ) || $( {} ).uniqueId()[ 0 ].id; @@ -529,6 +542,7 @@ $.widget( "ui.tabs", { } this._off( this.anchors.add( this.tabs ).add( this.panels ) ); + // Always prevent the default action, even when disabled this._on( true, this.anchors, { click: function( event ) { @@ -597,12 +611,16 @@ $.widget( "ui.tabs", { event.preventDefault(); if ( tab.hasClass( "ui-state-disabled" ) || + // tab is already loading tab.hasClass( "ui-tabs-loading" ) || + // can't switch durning an animation this.running || + // click on active header, but not collapsible ( clickedIsActive && !options.collapsible ) || + // allow canceling activation ( this._trigger( "beforeActivate", event, eventData ) === false ) ) { return; @@ -668,6 +686,7 @@ $.widget( "ui.tabs", { "aria-selected": "false", "aria-expanded": "false" } ); + // If we're switching tabs, remove the old tab from the tab order. // If we're opening from collapsed state, remove the previous tab from the tab order. // If we're collapsing, then keep the collapsing tab in the tab order. @@ -715,6 +734,7 @@ $.widget( "ui.tabs", { }, _getIndex: function( index ) { + // meta-function to give users option to provide a href string instead of a numerical index. if ( typeof index === "string" ) { index = this.anchors.index( this.anchors.filter( "[href$='" + $.ui.escapeSelector( index ) + "']" ) ); @@ -848,6 +868,7 @@ $.widget( "ui.tabs", { this.xhr .done( function( response, status, jqXHR ) { + // support: jQuery <1.8 // http://bugs.jquery.com/ticket/11778 setTimeout( function() { @@ -858,6 +879,7 @@ $.widget( "ui.tabs", { }, 1 ); } ) .fail( function( jqXHR, status ) { + // support: jQuery <1.8 // http://bugs.jquery.com/ticket/11778 setTimeout( function() { From 801875f8cc418ccf23cfd1d5132ecc8fe728a0bb Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:57:40 -0400 Subject: [PATCH 04/27] Spinner: Style updates Ref #14246 --- tests/unit/spinner/common-deprecated.js | 2 +- tests/unit/spinner/common.js | 2 +- tests/unit/spinner/core.js | 72 +++++++++--------- tests/unit/spinner/events.js | 42 +++++------ tests/unit/spinner/methods.js | 52 ++++++------- tests/unit/spinner/options.js | 98 ++++++++++++------------- ui/widgets/spinner.js | 8 ++ 7 files changed, 142 insertions(+), 134 deletions(-) diff --git a/tests/unit/spinner/common-deprecated.js b/tests/unit/spinner/common-deprecated.js index ece9adeace8..9ffc473af2c 100644 --- a/tests/unit/spinner/common-deprecated.js +++ b/tests/unit/spinner/common-deprecated.js @@ -30,6 +30,6 @@ common.testWidget( "spinner", { start: null, stop: null } -}); +} ); } ); diff --git a/tests/unit/spinner/common.js b/tests/unit/spinner/common.js index ece9adeace8..9ffc473af2c 100644 --- a/tests/unit/spinner/common.js +++ b/tests/unit/spinner/common.js @@ -30,6 +30,6 @@ common.testWidget( "spinner", { start: null, stop: null } -}); +} ); } ); diff --git a/tests/unit/spinner/core.js b/tests/unit/spinner/core.js index 64824e1282c..23df35da475 100644 --- a/tests/unit/spinner/core.js +++ b/tests/unit/spinner/core.js @@ -21,14 +21,14 @@ test( "markup structure", function( assert ) { equal( up.length, 1, "Spinner contains exactly one up button" ); assert.hasClasses( down, "ui-spinner-button ui-spinner-down ui-widget" ); equal( down.length, 1, "Spinner contains exactly one down button" ); -}); +} ); test( "keydown UP on input, increases value not greater than max", function() { expect( 5 ); - var element = $( "#spin" ).val( 70 ).spinner({ + var element = $( "#spin" ).val( 70 ).spinner( { max: 100, step: 10 - }); + } ); simulateKeyDownUp( element, $.ui.keyCode.UP ); equal( element.val(), 80 ); @@ -40,14 +40,14 @@ test( "keydown UP on input, increases value not greater than max", function() { equal( element.val(), 100 ); simulateKeyDownUp( element, $.ui.keyCode.UP ); equal( element.val(), 100 ); -}); +} ); test( "keydown DOWN on input, decreases value not less than min", function() { expect( 5 ); - var element = $( "#spin" ).val( 50 ).spinner({ + var element = $( "#spin" ).val( 50 ).spinner( { min: 20, step: 10 - }); + } ); simulateKeyDownUp( element, $.ui.keyCode.DOWN ); equal( element.val(), 40 ); @@ -59,14 +59,14 @@ test( "keydown DOWN on input, decreases value not less than min", function() { equal( element.val(), 20 ); simulateKeyDownUp( element, $.ui.keyCode.DOWN ); equal( element.val(), 20 ); -}); +} ); test( "keydown PAGE_UP on input, increases value not greater than max", function() { expect( 5 ); - var element = $( "#spin" ).val( 70 ).spinner({ + var element = $( "#spin" ).val( 70 ).spinner( { max: 100, page: 10 - }); + } ); simulateKeyDownUp( element, $.ui.keyCode.PAGE_UP ); equal( element.val(), 80 ); @@ -78,14 +78,14 @@ test( "keydown PAGE_UP on input, increases value not greater than max", function equal( element.val(), 100 ); simulateKeyDownUp( element, $.ui.keyCode.PAGE_UP ); equal( element.val(), 100 ); -}); +} ); test( "keydown PAGE_DOWN on input, decreases value not less than min", function() { expect( 5 ); - var element = $( "#spin" ).val( 50 ).spinner({ + var element = $( "#spin" ).val( 50 ).spinner( { min: 20, page: 10 - }); + } ); simulateKeyDownUp( element, $.ui.keyCode.PAGE_DOWN ); equal( element.val(), 40 ); @@ -97,7 +97,7 @@ test( "keydown PAGE_DOWN on input, decreases value not less than min", function( equal( element.val(), 20 ); simulateKeyDownUp( element, $.ui.keyCode.PAGE_DOWN ); equal( element.val(), 20 ); -}); +} ); asyncTest( "blur input while spinning with UP", function() { expect( 3 ); @@ -117,7 +117,7 @@ asyncTest( "blur input while spinning with UP", function() { element.on( "blur", function() { value = element.val(); setTimeout( step3, 750 ); - })[ 0 ].blur(); + } )[ 0 ].blur(); } function step3() { @@ -127,13 +127,13 @@ asyncTest( "blur input while spinning with UP", function() { element[ 0 ].focus(); setTimeout( step1 ); -}); +} ); test( "mouse click on up button, increases value not greater than max", function() { expect( 3 ); - var element = $( "#spin" ).val( 18 ).spinner({ + var element = $( "#spin" ).val( 18 ).spinner( { max: 20 - }), + } ), button = element.spinner( "widget" ).find( ".ui-spinner-up" ); button.trigger( "mousedown" ).trigger( "mouseup" ); @@ -142,13 +142,13 @@ test( "mouse click on up button, increases value not greater than max", function equal( element.val(), 20 ); button.trigger( "mousedown" ).trigger( "mouseup" ); equal( element.val(), 20 ); -}); +} ); test( "mouse click on up button, increases value not greater than max", function() { expect( 3 ); - var element = $( "#spin" ).val( 2 ).spinner({ + var element = $( "#spin" ).val( 2 ).spinner( { min: 0 - }), + } ), button = element.spinner( "widget" ).find( ".ui-spinner-down" ); button.trigger( "mousedown" ).trigger( "mouseup" ); @@ -157,14 +157,14 @@ test( "mouse click on up button, increases value not greater than max", function equal( element.val(), 0 ); button.trigger( "mousedown" ).trigger( "mouseup" ); equal( element.val(), 0 ); -}); +} ); test( "mousewheel on input", function() { expect( 4 ); - var element = $( "#spin" ).val( 0 ).spinner({ + var element = $( "#spin" ).val( 0 ).spinner( { step: 2 - }); + } ); element.trigger( "mousewheel" ); equal( element.val(), 0, "mousewheel event without delta does not change value" ); @@ -176,8 +176,8 @@ test( "mousewheel on input", function() { equal( element.val(), 0 ); element.trigger( "mousewheel", -15 ); - equal(element.val(), -2 ); -}); + equal( element.val(), -2 ); +} ); test( "reading HTML5 attributes", function() { expect( 6 ); @@ -187,19 +187,19 @@ test( "reading HTML5 attributes", function() { equal( element.spinner( "option", "max" ), 100, "max from markup" ); equal( element.spinner( "option", "step" ), 2, "step from markup" ); - element = $( markup ).spinner({ + element = $( markup ).spinner( { min: -200, max: 200, step: 5 - }); + } ); equal( element.spinner( "option", "min" ), -200, "min from options" ); equal( element.spinner( "option", "max" ), 200, "max from options" ); equal( element.spinner( "option", "step" ), 5, "stop from options" ); -}); +} ); test( "ARIA attributes", function() { expect( 9 ); - var element = $( "#spin" ).val( 2 ).spinner({ min: -5, max: 5 }); + var element = $( "#spin" ).val( 2 ).spinner( { min: -5, max: 5 } ); equal( element.attr( "role" ), "spinbutton", "role" ); equal( element.attr( "aria-valuemin" ), "-5", "aria-valuemin" ); @@ -220,7 +220,7 @@ test( "ARIA attributes", function() { element.spinner( "option", "max", null ); equal( element.attr( "aria-valuemax" ), undefined, "aria-valuemax not set when no max" ); -}); +} ); test( "focus text field when pressing button", function() { expect( 2 ); @@ -229,29 +229,29 @@ test( "focus text field when pressing button", function() { ok( element[ 0 ] !== document.activeElement, "not focused before" ); element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ); ok( element[ 0 ] === document.activeElement, "focused after" ); -}); +} ); test( "don't clear invalid value on blur", function() { expect( 1 ); var element = $( "#spin" ).spinner(); element.trigger( "focus" ).val( "a" ).trigger( "blur" ); equal( element.val(), "a" ); -}); +} ); test( "precision", function() { expect( 2 ); - var element = $( "#spin" ).val( 0.05 ).spinner({ + var element = $( "#spin" ).val( 0.05 ).spinner( { step: 0.0001 - }); + } ); element.spinner( "stepUp" ); equal( element.val(), "0.0501", "precision from step" ); element.val( 1.05 ).spinner( "option", { step: 1, min: -9.95 - }); + } ); element.spinner( "stepDown" ); equal( element.val(), "0.05", "precision from min" ); -}); +} ); } ); diff --git a/tests/unit/spinner/events.js b/tests/unit/spinner/events.js index 8fa409b991b..7f88d063a21 100644 --- a/tests/unit/spinner/events.js +++ b/tests/unit/spinner/events.js @@ -15,7 +15,7 @@ test( "start", function() { function shouldStart( expectation, msg ) { element.spinner( "option", "start", function() { ok( expectation, msg ); - }); + } ); } shouldStart( true, "key UP" ); @@ -45,7 +45,7 @@ test( "start", function() { shouldStart( false, "value" ); element.spinner( "value", 999 ); -}); +} ); test( "spin", function() { expect( 10 ); @@ -54,7 +54,7 @@ test( "spin", function() { function shouldSpin( expectation, msg ) { element.spinner( "option", "spin", function() { ok( expectation, msg ); - }); + } ); } shouldSpin( true, "key UP" ); @@ -84,7 +84,7 @@ test( "spin", function() { shouldSpin( false, "value" ); element.spinner( "value", 999 ); -}); +} ); test( "stop", function() { expect( 10 ); @@ -93,7 +93,7 @@ test( "stop", function() { function shouldStop( expectation, msg ) { element.spinner( "option", "stop", function() { ok( expectation, msg ); - }); + } ); } shouldStop( true, "key UP" ); @@ -123,7 +123,7 @@ test( "stop", function() { shouldStop( false, "value" ); element.spinner( "value", 999 ); -}); +} ); asyncTest( "change", function() { expect( 12 ); @@ -132,22 +132,22 @@ asyncTest( "change", function() { function shouldChange( expectation, msg ) { element.spinner( "option", "change", function() { ok( expectation, msg ); - }); + } ); } function focusWrap( fn, next ) { - element[0].focus(); + element[ 0 ].focus(); setTimeout( function() { fn(); - setTimeout(function() { - element[0].blur(); + setTimeout( function() { + element[ 0 ].blur(); setTimeout( next ); - }); - }); + } ); + } ); } function step1() { - focusWrap(function() { + focusWrap( function() { shouldChange( false, "key UP, before blur" ); simulateKeyDownUp( element, $.ui.keyCode.UP ); shouldChange( true, "blur after key UP" ); @@ -155,7 +155,7 @@ asyncTest( "change", function() { } function step2() { - focusWrap(function() { + focusWrap( function() { shouldChange( false, "key DOWN, before blur" ); simulateKeyDownUp( element, $.ui.keyCode.DOWN ); shouldChange( true, "blur after key DOWN" ); @@ -163,7 +163,7 @@ asyncTest( "change", function() { } function step3() { - focusWrap(function() { + focusWrap( function() { shouldChange( false, "key PAGE_UP, before blur" ); simulateKeyDownUp( element, $.ui.keyCode.PAGE_UP ); shouldChange( true, "blur after key PAGE_UP" ); @@ -171,7 +171,7 @@ asyncTest( "change", function() { } function step4() { - focusWrap(function() { + focusWrap( function() { shouldChange( false, "key PAGE_DOWN, before blur" ); simulateKeyDownUp( element, $.ui.keyCode.PAGE_DOWN ); shouldChange( true, "blur after key PAGE_DOWN" ); @@ -179,7 +179,7 @@ asyncTest( "change", function() { } function step5() { - focusWrap(function() { + focusWrap( function() { shouldChange( false, "many keys, before blur" ); simulateKeyDownUp( element, $.ui.keyCode.PAGE_DOWN ); simulateKeyDownUp( element, $.ui.keyCode.UP ); @@ -191,7 +191,7 @@ asyncTest( "change", function() { } function step6() { - focusWrap(function() { + focusWrap( function() { shouldChange( false, "many keys, same final value, before blur" ); simulateKeyDownUp( element, $.ui.keyCode.UP ); simulateKeyDownUp( element, $.ui.keyCode.UP ); @@ -206,7 +206,7 @@ asyncTest( "change", function() { } function step7() { - focusWrap(function() { + focusWrap( function() { shouldChange( false, "button down, before blur" ); element.spinner( "widget" ).find( ".ui-spinner-down" ).trigger( "mousedown" ).trigger( "mouseup" ); shouldChange( true, "blur after button down" ); @@ -214,7 +214,7 @@ asyncTest( "change", function() { } function step8() { - focusWrap(function() { + focusWrap( function() { shouldChange( false, "many buttons, same final value, before blur" ); element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ).trigger( "mouseup" ); element.spinner( "widget" ).find( ".ui-spinner-up" ).trigger( "mousedown" ).trigger( "mouseup" ); @@ -258,6 +258,6 @@ asyncTest( "change", function() { } setTimeout( step1 ); -}); +} ); } ); diff --git a/tests/unit/spinner/methods.js b/tests/unit/spinner/methods.js index 6f165b93657..3b039ff3945 100644 --- a/tests/unit/spinner/methods.js +++ b/tests/unit/spinner/methods.js @@ -12,8 +12,8 @@ test( "destroy", function( assert ) { expect( 1 ); assert.domEqual( "#spin", function() { $( "#spin" ).spinner().spinner( "destroy" ); - }); -}); + } ); +} ); test( "disable", function( assert ) { expect( 15 ); @@ -26,7 +26,7 @@ test( "disable", function( assert ) { element.spinner( "disable" ); assert.hasClasses( wrapper, "ui-state-disabled ui-spinner-disabled" ); ok( !wrapper.attr( "aria-disabled" ), "after: wrapper does not have aria-disabled attr" ); - ok( element.is( ":disabled"), "after: input has disabled attribute" ); + ok( element.is( ":disabled" ), "after: input has disabled attribute" ); simulateKeyDownUp( element, $.ui.keyCode.UP ); equal( 2, element.val(), "keyboard - value does not change on key UP" ); @@ -47,7 +47,7 @@ test( "disable", function( assert ) { equal( 2, element.val(), "mouse - value does not change on clicking down button" ); element.spinner( "stepUp", 6 ); - equal( 8, element.val(), "script - stepUp 6 steps changes value"); + equal( 8, element.val(), "script - stepUp 6 steps changes value" ); element.spinner( "stepDown" ); equal( 7, element.val(), "script - stepDown 1 step changes value" ); @@ -57,11 +57,11 @@ test( "disable", function( assert ) { element.spinner( "pageDown" ); equal( 7, element.val(), "script - pageDown 1 page changes value" ); -}); +} ); test( "enable", function( assert ) { expect( 5 ); - var element = $( "#spin" ).val( 1 ).spinner({ disabled: true }), + var element = $( "#spin" ).val( 1 ).spinner( { disabled: true } ), wrapper = element.spinner( "widget" ); assert.hasClasses( wrapper, "ui-spinner-disabled" ); @@ -74,15 +74,15 @@ test( "enable", function( assert ) { simulateKeyDownUp( element, $.ui.keyCode.UP ); equal( 2, element.val(), "keyboard - value changes on key UP" ); -}); +} ); test( "isValid", function() { expect( 8 ); - var element = $( "#spin" ).spinner({ + var element = $( "#spin" ).spinner( { min: 0, max: 10, step: 2 - }), + } ), spinner = element.spinner( "instance" ); ok( !spinner.isValid(), "initial state is invalid" ); @@ -106,14 +106,14 @@ test( "isValid", function() { element.val( "1" ); ok( !spinner.isValid(), "step mismatch is invalid" ); -}); +} ); test( "pageDown", function() { expect( 4 ); - var element = $( "#spin" ).val( -12 ).spinner({ + var element = $( "#spin" ).val( -12 ).spinner( { page: 20, min: -100 - }); + } ); element.spinner( "pageDown" ); equal( element.val(), -32, "pageDown 1 page" ); @@ -126,14 +126,14 @@ test( "pageDown", function() { element.spinner( "pageDown", 10 ); equal( element.val(), -100, "value at min and pageDown 10 pages" ); -}); +} ); test( "pageUp", function() { expect( 4 ); - var element = $( "#spin" ).val( 12 ).spinner({ + var element = $( "#spin" ).val( 12 ).spinner( { page: 20, max: 100 - }); + } ); element.spinner( "pageUp" ); equal( element.val(), 32, "pageUp 1 page" ); @@ -146,14 +146,14 @@ test( "pageUp", function() { element.spinner( "pageUp", 10 ); equal( element.val(), 100, "value at max and pageUp 10 pages" ); -}); +} ); test( "stepDown", function() { expect( 4 ); - var element = $( "#spin" ).val( 0 ).spinner({ + var element = $( "#spin" ).val( 0 ).spinner( { step: 2, min: -15 - }); + } ); element.spinner( "stepDown" ); equal( element.val(), "-1", "stepDown 1 step" ); @@ -166,14 +166,14 @@ test( "stepDown", function() { element.spinner( "stepDown" ); equal( element.val(), "-15", "at min and stepDown 1 step" ); -}); +} ); test( "stepUp", function() { expect( 4 ); - var element = $( "#spin" ).val( 0 ).spinner({ + var element = $( "#spin" ).val( 0 ).spinner( { step: 2, max: 16 - }); + } ); element.spinner( "stepUp" ); equal( element.val(), 2, "stepUp 1 step" ); @@ -186,19 +186,19 @@ test( "stepUp", function() { element.spinner( "stepUp" ); equal( element.val(), 16, "at max and stepUp 1 step" ); -}); +} ); test( "value", function() { expect( 2 ); - var element = $( "#spin" ).val( 0 ).spinner({ + var element = $( "#spin" ).val( 0 ).spinner( { step: 3 - }); + } ); element.spinner( "value", 10 ); equal( element.val(), 9, "change value via value method" ); equal( element.spinner( "value" ), 9, "get value via value method" ); -}); +} ); test( "widget", function() { expect( 2 ); @@ -206,6 +206,6 @@ test( "widget", function() { widgetElement = element.spinner( "widget" ); equal( widgetElement.length, 1, "one element" ); strictEqual( widgetElement[ 0 ], element.parent()[ 0 ], "parent element" ); -}); +} ); } ); diff --git a/tests/unit/spinner/options.js b/tests/unit/spinner/options.js index c3a9f74a288..8ad5caeaaa1 100644 --- a/tests/unit/spinner/options.js +++ b/tests/unit/spinner/options.js @@ -20,43 +20,43 @@ test( "icons: default ", function( assert ) { element.spinner( "option", "icons", { up: "ui-icon-caret-1-n", down: "ui-icon-caret-1-s" - }); + } ); assert.hasClasses( element.spinner( "widget" ).find( ".ui-icon:first" ), "ui-icon ui-icon-caret-1-n" ); assert.hasClasses( element.spinner( "widget" ).find( ".ui-icon:last" ), "ui-icon ui-icon-caret-1-s" ); -}); +} ); test( "icons: custom ", function( assert ) { expect( 2 ); - var element = $( "#spin" ).val( 0 ).spinner({ + var element = $( "#spin" ).val( 0 ).spinner( { icons: { down: "custom-down", up: "custom-up" } - }).spinner( "widget" ); + } ).spinner( "widget" ); assert.hasClasses( element.find( ".ui-icon:first" ), "ui-icon custom-up" ); assert.hasClasses( element.find( ".ui-icon:last" ), "ui-icon custom-down" ); -}); +} ); test( "incremental, false", function() { expect( 100 ); var i, prev = 0, - element = $( "#spin" ).val( prev ).spinner({ + element = $( "#spin" ).val( prev ).spinner( { incremental: false, spin: function( event, ui ) { equal( ui.value - prev, 1 ); prev = ui.value; } - }); + } ); for ( i = 0; i < 100; i++ ) { element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); } element.simulate( "keyup", { keyCode: $.ui.keyCode.UP } ); -}); +} ); test( "incremental, true", function() { expect( 100 ); @@ -64,7 +64,7 @@ test( "incremental, true", function() { function fill( num, val ) { return $.map( new Array( num ), function() { return val; - }); + } ); } var i, @@ -72,26 +72,26 @@ test( "incremental, true", function() { expected = [].concat( fill( 18, 1 ), fill( 37, 2 ), fill( 14, 3 ), fill( 9, 4 ), fill( 6, 5 ), fill( 5, 6 ), fill ( 5, 7 ), fill( 4, 8 ), fill( 2, 9 ) ), - element = $( "#spin" ).val( prev ).spinner({ + element = $( "#spin" ).val( prev ).spinner( { incremental: true, spin: function( event, ui ) { equal( ui.value - prev, expected[ i ] ); prev = ui.value; } - }); + } ); for ( i = 0; i < 100; i++ ) { element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); } element.simulate( "keyup", { keyCode: $.ui.keyCode.UP } ); -}); +} ); test( "incremental, function", function() { expect( 100 ); var i, prev = 0, - element = $( "#spin" ).val( prev ).spinner({ + element = $( "#spin" ).val( prev ).spinner( { incremental: function( i ) { return i; }, @@ -99,83 +99,83 @@ test( "incremental, function", function() { equal( ui.value - prev, i + 1 ); prev = ui.value; } - }); + } ); for ( i = 0; i < 100; i++ ) { element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); } element.simulate( "keyup", { keyCode: $.ui.keyCode.UP } ); -}); +} ); test( "numberFormat, number", function() { expect( 2 ); - var element = $( "#spin" ).val( 0 ).spinner({ numberFormat: "n" }); + var element = $( "#spin" ).val( 0 ).spinner( { numberFormat: "n" } ); equal( element.val(), "0.00", "formatted on init" ); element.spinner( "stepUp" ); equal( element.val(), "1.00", "formatted after step" ); -}); +} ); test( "numberFormat, number, simple", function() { expect( 2 ); - var element = $( "#spin" ).val( 0 ).spinner({ numberFormat: "n0" }); + var element = $( "#spin" ).val( 0 ).spinner( { numberFormat: "n0" } ); equal( element.val(), "0", "formatted on init" ); element.spinner( "stepUp" ); equal( element.val(), "1", "formatted after step" ); -}); +} ); test( "numberFormat, currency", function() { expect( 2 ); - var element = $( "#spin" ).val( 0 ).spinner({ numberFormat: "C" }); + var element = $( "#spin" ).val( 0 ).spinner( { numberFormat: "C" } ); equal( element.val(), "$0.00", "formatted on init" ); element.spinner( "stepUp" ); equal( element.val(), "$1.00", "formatted after step" ); -}); +} ); test( "numberFormat, change", function() { expect( 2 ); - var element = $( "#spin" ).val( 5 ).spinner({ numberFormat: "n1" }); + var element = $( "#spin" ).val( 5 ).spinner( { numberFormat: "n1" } ); equal( element.val(), "5.0", "formatted on init" ); element.spinner( "option", "numberFormat", "c" ); equal( element.val(), "$5.00", "formatted after change" ); -}); +} ); test( "culture, null", function() { expect( 2 ); Globalize.culture( "ja-JP" ); - var element = $( "#spin" ).val( 0 ).spinner({ numberFormat: "C" }); + var element = $( "#spin" ).val( 0 ).spinner( { numberFormat: "C" } ); equal( element.val(), "¥0", "formatted on init" ); element.spinner( "stepUp" ); equal( element.val(), "¥1", "formatted after step" ); // Reset culture Globalize.culture( "default" ); -}); +} ); test( "currency, ja-JP", function() { expect( 2 ); - var element = $( "#spin" ).val( 0 ).spinner({ + var element = $( "#spin" ).val( 0 ).spinner( { numberFormat: "C", culture: "ja-JP" - }); + } ); equal( element.val(), "¥0", "formatted on init" ); element.spinner( "stepUp" ); equal( element.val(), "¥1", "formatted after step" ); -}); +} ); test( "currency, change", function() { expect( 2 ); - var element = $( "#spin" ).val( 5 ).spinner({ + var element = $( "#spin" ).val( 5 ).spinner( { numberFormat: "C", culture: "ja-JP" - }); + } ); equal( element.val(), "¥5", "formatted on init" ); element.spinner( "option", "culture", "en" ); equal( element.val(), "$5.00", "formatted after change" ); -}); +} ); test( "max", function() { expect( 3 ); - var element = $( "#spin" ).val( 1000 ).spinner({ max: 100 }); + var element = $( "#spin" ).val( 1000 ).spinner( { max: 100 } ); equal( element.val(), 1000, "value not constrained on init" ); element.spinner( "value", 1000 ); @@ -183,27 +183,27 @@ test( "max", function() { element.val( 1000 ).trigger( "blur" ); equal( element.val(), 1000, "max not constrained if manual entry" ); -}); +} ); test( "max, string", function() { expect( 3 ); var element = $( "#spin" ) .val( 1000 ) - .spinner({ + .spinner( { max: "$100.00", numberFormat: "C", culture: "en" - }); + } ); equal( element.val(), "$1,000.00", "value not constrained on init" ); equal( element.spinner( "option", "max" ), 100, "option converted to number" ); element.spinner( "value", 1000 ); equal( element.val(), "$100.00", "max constrained in value method" ); -}); +} ); test( "min", function() { expect( 3 ); - var element = $( "#spin" ).val( -1000 ).spinner({ min: -100 }); + var element = $( "#spin" ).val( -1000 ).spinner( { min: -100 } ); equal( element.val(), -1000, "value not constrained on init" ); element.spinner( "value", -1000 ); @@ -211,27 +211,27 @@ test( "min", function() { element.val( -1000 ).trigger( "blur" ); equal( element.val(), -1000, "min not constrained if manual entry" ); -}); +} ); test( "min, string", function() { expect( 3 ); var element = $( "#spin" ) .val( -1000 ) - .spinner({ + .spinner( { min: "-$100.00", numberFormat: "C", culture: "en" - }); + } ); equal( element.val(), "($1,000.00)", "value not constrained on init" ); equal( element.spinner( "option", "min" ), -100, "option converted to number" ); element.spinner( "value", -1000 ); equal( element.val(), "($100.00)", "min constrained in value method" ); -}); +} ); test( "step, 2", function() { expect( 3 ); - var element = $( "#spin" ).val( 0 ).spinner({ step: 2 }); + var element = $( "#spin" ).val( 0 ).spinner( { step: 2 } ); element.spinner( "stepUp" ); equal( element.val(), "2", "stepUp" ); @@ -242,30 +242,30 @@ test( "step, 2", function() { element.val( "4.5" ); element.spinner( "stepUp" ); equal( element.val(), "6", "stepUp" ); -}); +} ); test( "step, 0.7", function() { expect( 1 ); - var element = $("#spin").val( 0 ).spinner({ + var element = $( "#spin" ).val( 0 ).spinner( { step: 0.7 - }); + } ); element.spinner( "stepUp" ); equal( element.val(), "0.7", "stepUp" ); -}); +} ); test( "step, string", function() { expect( 2 ); - var element = $("#spin").val( 0 ).spinner({ + var element = $( "#spin" ).val( 0 ).spinner( { step: "$0.70", numberFormat: "C", culture: "en" - }); + } ); equal( element.spinner( "option", "step" ), 0.7, "option converted to number" ); element.spinner( "stepUp" ); equal( element.val(), "$0.70", "stepUp" ); -}); +} ); } ); diff --git a/ui/widgets/spinner.js b/ui/widgets/spinner.js index 712d99bad8c..a64d46c76bf 100644 --- a/ui/widgets/spinner.js +++ b/ui/widgets/spinner.js @@ -75,6 +75,7 @@ $.widget( "ui.spinner", { }, _create: function() { + // handle string values that need to be parsed this._setOption( "max", this.options.max ); this._setOption( "min", this.options.min ); @@ -83,6 +84,7 @@ $.widget( "ui.spinner", { // Only format if there is a value, prevents the field from being marked // as invalid in Firefox, see #9573. if ( this.value() !== "" ) { + // Format the value, but don't constrain. this._value( this.element.val(), true ); } @@ -169,6 +171,7 @@ $.widget( "ui.spinner", { if ( !isActive ) { this.element.trigger( "focus" ); this.previous = previous; + // support: IE // IE sets focus asynchronously, so we need to check if focus // moved off of the input because the user clicked on the button. @@ -200,6 +203,7 @@ $.widget( "ui.spinner", { }, "mouseup .ui-spinner-button": "_stop", "mouseenter .ui-spinner-button": function( event ) { + // button will add ui-state-active if mouse was down while mouseleave and kept down if ( !$( event.currentTarget ).hasClass( "ui-state-active" ) ) { return; @@ -210,6 +214,7 @@ $.widget( "ui.spinner", { } this._repeat( null, $( event.currentTarget ).hasClass( "ui-spinner-up" ) ? 1 : -1, event ); }, + // TODO: do we really want to consider this a stop? // shouldn't we just stop the repeater and wait until mouseup before // we trigger the stop event? @@ -364,8 +369,10 @@ $.widget( "ui.spinner", { // - find out where we are relative to the base (min or 0) base = options.min !== null ? options.min : 0; aboveMin = value - base; + // - round to the nearest step aboveMin = Math.round( aboveMin / options.step ) * options.step; + // - rounding is based on 0, so adjust back to our base value = base + aboveMin; @@ -453,6 +460,7 @@ $.widget( "ui.spinner", { this.element.attr( { "aria-valuemin": this.options.min, "aria-valuemax": this.options.max, + // TODO: what should we do with values that can't be parsed? "aria-valuenow": this._parse( this.element.val() ) } ); From a718275e0d49573e4a400ecbda98e384a9a307c5 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:57:53 -0400 Subject: [PATCH 05/27] Sortable: Style updates Ref #14246 --- tests/unit/sortable/common.js | 2 +- tests/unit/sortable/core.js | 8 +- tests/unit/sortable/events.js | 279 ++++++------- tests/unit/sortable/helper.js | 2 +- tests/unit/sortable/methods.js | 108 ++--- tests/unit/sortable/options.js | 110 ++--- ui/widgets/sortable.js | 733 ++++++++++++++++----------------- 7 files changed, 621 insertions(+), 621 deletions(-) diff --git a/tests/unit/sortable/common.js b/tests/unit/sortable/common.js index a28c2511aa3..dd22c04331f 100644 --- a/tests/unit/sortable/common.js +++ b/tests/unit/sortable/common.js @@ -48,6 +48,6 @@ common.testWidget( "sortable", { stop: null, update: null } -}); +} ); } ); diff --git a/tests/unit/sortable/core.js b/tests/unit/sortable/core.js index 68f2756040b..d12416f0903 100644 --- a/tests/unit/sortable/core.js +++ b/tests/unit/sortable/core.js @@ -9,12 +9,12 @@ module( "sortable: core" ); test( "#9314: Sortable: Items cannot be dragged directly into bottom position", function() { expect( 1 ); - var el = $( ".connectWith" ).sortable({ + var el = $( ".connectWith" ).sortable( { connectWith: ".connectWith" - }); + } ); testHelper.sort( $( "li", el[ 1 ] )[ 0 ], 0, -12, 5, "Dragging the sortable into connected sortable" ); -}); +} ); test( "ui-sortable-handle applied to appropriate element", function( assert ) { expect( 8 ); @@ -37,6 +37,6 @@ test( "ui-sortable-handle applied to appropriate element", function( assert ) { el.sortable( "destroy" ); equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" ); -}); +} ); } ); diff --git a/tests/unit/sortable/events.js b/tests/unit/sortable/events.js index 74f10dfebca..d2416fbc4ca 100644 --- a/tests/unit/sortable/events.js +++ b/tests/unit/sortable/events.js @@ -5,223 +5,223 @@ define( [ "ui/widgets/draggable" ], function( $, testHelper ) { -module("sortable: events"); +module( "sortable: events" ); -test("start", function() { +test( "start", function() { expect( 7 ); var hash; - $("#sortable").sortable({ + $( "#sortable" ).sortable( { start: function( e, ui ) { hash = ui; } - }).find("li:eq(0)").simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dy: 10 - }); + } ); - ok(hash, "start event triggered"); - ok(hash.helper, "UI hash includes: helper"); - ok(hash.placeholder, "UI hash includes: placeholder"); - ok(hash.item, "UI hash includes: item"); - ok(!hash.sender, "UI hash does not include: sender"); + ok( hash, "start event triggered" ); + ok( hash.helper, "UI hash includes: helper" ); + ok( hash.placeholder, "UI hash includes: placeholder" ); + ok( hash.item, "UI hash includes: item" ); + ok( !hash.sender, "UI hash does not include: sender" ); // Todo: see if these events should actually have sane values in them - ok("position" in hash, "UI hash includes: position"); - ok("offset" in hash, "UI hash includes: offset"); -}); + ok( "position" in hash, "UI hash includes: position" ); + ok( "offset" in hash, "UI hash includes: offset" ); +} ); -test("sort", function() { +test( "sort", function() { expect( 7 ); var hash; - $("#sortable").sortable({ + $( "#sortable" ).sortable( { sort: function( e, ui ) { hash = ui; } - }).find("li:eq(0)").simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dy: 10 - }); + } ); - ok(hash, "sort event triggered"); - ok(hash.helper, "UI hash includes: helper"); - ok(hash.placeholder, "UI hash includes: placeholder"); - ok(hash.position && ("top" in hash.position && "left" in hash.position), "UI hash includes: position"); - ok(hash.offset && (hash.offset.top && hash.offset.left), "UI hash includes: offset"); - ok(hash.item, "UI hash includes: item"); - ok(!hash.sender, "UI hash does not include: sender"); + ok( hash, "sort event triggered" ); + ok( hash.helper, "UI hash includes: helper" ); + ok( hash.placeholder, "UI hash includes: placeholder" ); + ok( hash.position && ( "top" in hash.position && "left" in hash.position ), "UI hash includes: position" ); + ok( hash.offset && ( hash.offset.top && hash.offset.left ), "UI hash includes: offset" ); + ok( hash.item, "UI hash includes: item" ); + ok( !hash.sender, "UI hash does not include: sender" ); -}); +} ); -test("change", function() { +test( "change", function() { expect( 8 ); var hash; - $("#sortable").sortable({ + $( "#sortable" ).sortable( { change: function( e, ui ) { hash = ui; } - }).find("li:eq(0)").simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dx: 1, dy: 1 - }); + } ); - ok(!hash, "1px drag, change event should not be triggered"); + ok( !hash, "1px drag, change event should not be triggered" ); - $("#sortable").sortable({ + $( "#sortable" ).sortable( { change: function( e, ui ) { hash = ui; } - }).find("li:eq(0)").simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dy: 22 - }); + } ); - ok(hash, "change event triggered"); - ok(hash.helper, "UI hash includes: helper"); - ok(hash.placeholder, "UI hash includes: placeholder"); - ok(hash.position && ("top" in hash.position && "left" in hash.position), "UI hash includes: position"); - ok(hash.offset && (hash.offset.top && hash.offset.left), "UI hash includes: offset"); - ok(hash.item, "UI hash includes: item"); - ok(!hash.sender, "UI hash does not include: sender"); + ok( hash, "change event triggered" ); + ok( hash.helper, "UI hash includes: helper" ); + ok( hash.placeholder, "UI hash includes: placeholder" ); + ok( hash.position && ( "top" in hash.position && "left" in hash.position ), "UI hash includes: position" ); + ok( hash.offset && ( hash.offset.top && hash.offset.left ), "UI hash includes: offset" ); + ok( hash.item, "UI hash includes: item" ); + ok( !hash.sender, "UI hash does not include: sender" ); -}); +} ); -test("beforeStop", function() { +test( "beforeStop", function() { expect( 7 ); var hash; - $("#sortable").sortable({ + $( "#sortable" ).sortable( { beforeStop: function( e, ui ) { hash = ui; } - }).find("li:eq(0)").simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dy: 20 - }); + } ); - ok(hash, "beforeStop event triggered"); - ok(hash.helper, "UI hash includes: helper"); - ok(hash.placeholder, "UI hash includes: placeholder"); - ok(hash.position && ("top" in hash.position && "left" in hash.position), "UI hash includes: position"); - ok(hash.offset && (hash.offset.top && hash.offset.left), "UI hash includes: offset"); - ok(hash.item, "UI hash includes: item"); - ok(!hash.sender, "UI hash does not include: sender"); + ok( hash, "beforeStop event triggered" ); + ok( hash.helper, "UI hash includes: helper" ); + ok( hash.placeholder, "UI hash includes: placeholder" ); + ok( hash.position && ( "top" in hash.position && "left" in hash.position ), "UI hash includes: position" ); + ok( hash.offset && ( hash.offset.top && hash.offset.left ), "UI hash includes: offset" ); + ok( hash.item, "UI hash includes: item" ); + ok( !hash.sender, "UI hash does not include: sender" ); -}); +} ); -test("stop", function() { +test( "stop", function() { expect( 7 ); var hash; - $("#sortable").sortable({ + $( "#sortable" ).sortable( { stop: function( e, ui ) { hash = ui; } - }).find("li:eq(0)").simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dy: 20 - }); + } ); - ok(hash, "stop event triggered"); - ok(!hash.helper, "UI should not include: helper"); - ok(hash.placeholder, "UI hash includes: placeholder"); - ok(hash.position && ("top" in hash.position && "left" in hash.position), "UI hash includes: position"); - ok(hash.offset && (hash.offset.top && hash.offset.left), "UI hash includes: offset"); - ok(hash.item, "UI hash includes: item"); - ok(!hash.sender, "UI hash does not include: sender"); + ok( hash, "stop event triggered" ); + ok( !hash.helper, "UI should not include: helper" ); + ok( hash.placeholder, "UI hash includes: placeholder" ); + ok( hash.position && ( "top" in hash.position && "left" in hash.position ), "UI hash includes: position" ); + ok( hash.offset && ( hash.offset.top && hash.offset.left ), "UI hash includes: offset" ); + ok( hash.item, "UI hash includes: item" ); + ok( !hash.sender, "UI hash does not include: sender" ); -}); +} ); -test("update", function() { +test( "update", function() { expect( 8 ); var hash; - $("#sortable").sortable({ + $( "#sortable" ).sortable( { update: function( e, ui ) { hash = ui; } - }).find("li:eq(0)").simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dx: 1, dy: 1 - }); + } ); - ok(!hash, "1px drag, update event should not be triggered"); + ok( !hash, "1px drag, update event should not be triggered" ); - $("#sortable").sortable({ + $( "#sortable" ).sortable( { update: function( e, ui ) { hash = ui; } - }).find("li:eq(0)").simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dy: 22 - }); + } ); - ok(hash, "update event triggered"); - ok(!hash.helper, "UI hash should not include: helper"); - ok(hash.placeholder, "UI hash includes: placeholder"); - ok(hash.position && ("top" in hash.position && "left" in hash.position), "UI hash includes: position"); - ok(hash.offset && (hash.offset.top && hash.offset.left), "UI hash includes: offset"); - ok(hash.item, "UI hash includes: item"); - ok(!hash.sender, "UI hash does not include: sender"); + ok( hash, "update event triggered" ); + ok( !hash.helper, "UI hash should not include: helper" ); + ok( hash.placeholder, "UI hash includes: placeholder" ); + ok( hash.position && ( "top" in hash.position && "left" in hash.position ), "UI hash includes: position" ); + ok( hash.offset && ( hash.offset.top && hash.offset.left ), "UI hash includes: offset" ); + ok( hash.item, "UI hash includes: item" ); + ok( !hash.sender, "UI hash does not include: sender" ); -}); +} ); -test("#3019: Stop fires too early", function() { - expect(2); +test( "#3019: Stop fires too early", function() { + expect( 2 ); var helper = null, - el = $("#sortable").sortable({ - stop: function(event, ui) { + el = $( "#sortable" ).sortable( { + stop: function( event, ui ) { helper = ui.helper; } - }); + } ); - testHelper.sort($("li", el)[0], 0, 44, 2, "Dragging the sortable"); - equal(helper, null, "helper should be false"); + testHelper.sort( $( "li", el )[ 0 ], 0, 44, 2, "Dragging the sortable" ); + equal( helper, null, "helper should be false" ); -}); +} ); -test("#4752: link event firing on sortable with connect list", function () { +test( "#4752: link event firing on sortable with connect list", function() { expect( 10 ); var fired = {}, - hasFired = function (type) { return (type in fired) && (true === fired[type]); }; + hasFired = function( type ) { return ( type in fired ) && ( true === fired[ type ] ); }; - $("#sortable").clone().attr("id", "sortable2").insertAfter("#sortable"); + $( "#sortable" ).clone().attr( "id", "sortable2" ).insertAfter( "#sortable" ); - $("#qunit-fixture ul").sortable({ + $( "#qunit-fixture ul" ).sortable( { connectWith: "#qunit-fixture ul", - change: function () { + change: function() { fired.change = true; }, - receive: function () { + receive: function() { fired.receive = true; }, - remove: function () { + remove: function() { fired.remove = true; } - }); + } ); - $("#qunit-fixture ul").on("click.ui-sortable-test", function () { + $( "#qunit-fixture ul" ).on( "click.ui-sortable-test", function() { fired.click = true; - }); + } ); - $("#sortable li:eq(0)").simulate("click"); - ok(!hasFired("change"), "Click only, change event should not have fired"); - ok(hasFired("click"), "Click event should have fired"); + $( "#sortable li:eq(0)" ).simulate( "click" ); + ok( !hasFired( "change" ), "Click only, change event should not have fired" ); + ok( hasFired( "click" ), "Click event should have fired" ); // Drag an item within the first list fired = {}; - $("#sortable li:eq(0)").simulate("drag", { dx: 0, dy: 40 }); - ok(hasFired("change"), "40px drag, change event should have fired"); - ok(!hasFired("receive"), "Receive event should not have fired"); - ok(!hasFired("remove"), "Remove event should not have fired"); - ok(!hasFired("click"), "Click event should not have fired"); + $( "#sortable li:eq(0)" ).simulate( "drag", { dx: 0, dy: 40 } ); + ok( hasFired( "change" ), "40px drag, change event should have fired" ); + ok( !hasFired( "receive" ), "Receive event should not have fired" ); + ok( !hasFired( "remove" ), "Remove event should not have fired" ); + ok( !hasFired( "click" ), "Click event should not have fired" ); // Drag an item from the first list to the second, connected list fired = {}; - $("#sortable li:eq(0)").simulate("drag", { dx: 0, dy: 150 }); - ok(hasFired("change"), "150px drag, change event should have fired"); - ok(hasFired("receive"), "Receive event should have fired"); - ok(hasFired("remove"), "Remove event should have fired"); - ok(!hasFired("click"), "Click event should not have fired"); -}); + $( "#sortable li:eq(0)" ).simulate( "drag", { dx: 0, dy: 150 } ); + ok( hasFired( "change" ), "150px drag, change event should have fired" ); + ok( hasFired( "receive" ), "Receive event should have fired" ); + ok( hasFired( "remove" ), "Remove event should have fired" ); + ok( !hasFired( "click" ), "Click event should not have fired" ); +} ); /* test("receive", function() { @@ -239,14 +239,14 @@ test( "over", function() { var hash, overCount = 0; - $( "#sortable" ).sortable({ + $( "#sortable" ).sortable( { over: function( e, ui ) { hash = ui; overCount++; } - }).find( "li:eq(0)" ).simulate( "drag", { + } ).find( "li:eq(0)" ).simulate( "drag", { dy: 20 - }); + } ); ok( hash, "over event triggered" ); ok( hash.helper, "UI includes: helper" ); @@ -256,7 +256,7 @@ test( "over", function() { ok( hash.item, "UI hash includes: item" ); ok( hash.sender, "UI hash includes: sender" ); equal( overCount, 1, "over fires only once" ); -}); +} ); // http://bugs.jqueryui.com/ticket/9335 // Sortable: over & out events does not consistently fire @@ -267,25 +267,25 @@ test( "over, fires with draggable connected to sortable", function() { overCount = 0, item = $( "
" ).text( "6" ).insertAfter( "#sortable" ); - item.draggable({ + item.draggable( { connectToSortable: "#sortable" - }); - $( ".connectWith" ).sortable({ + } ); + $( ".connectWith" ).sortable( { connectWith: ".connectWith", over: function( event, ui ) { hash = ui; overCount++; } - }); + } ); item.simulate( "drag", { dy: -20 - }); + } ); ok( hash, "over event triggered" ); ok( !hash.sender, "UI should not include: sender" ); equal( overCount, 1, "over fires only once" ); -}); +} ); test( "over, with connected sortable", function() { expect( 3 ); @@ -293,21 +293,21 @@ test( "over, with connected sortable", function() { var hash, overCount = 0; - $( ".connectWith" ).sortable({ + $( ".connectWith" ).sortable( { connectWith: ".connectWith" - }); + } ); $( "#sortable2" ).on( "sortover", function( event, ui ) { hash = ui; overCount++; - }); + } ); $( "#sortable" ).find( "li:eq(0)" ).simulate( "drag", { dy: 102 - }); + } ); ok( hash, "over event triggered" ); - equal( hash.sender[ 0 ], $(" #sortable" )[ 0 ], "UI includes: sender" ); + equal( hash.sender[ 0 ], $( " #sortable" )[ 0 ], "UI includes: sender" ); equal( overCount, 1, "over fires only once" ); -}); +} ); /* test("out", function() { @@ -321,20 +321,20 @@ test( "out, with connected sortable", function() { var hash, outCount = 0; - $( ".connectWith" ).sortable({ + $( ".connectWith" ).sortable( { connectWith: ".connectWith" - }); + } ); $( "#sortable" ).on( "sortout", function( event, ui ) { hash = ui; outCount++; - }); + } ); $( "#sortable" ).find( "li:last" ).simulate( "drag", { dy: 40 - }); + } ); ok( hash, "out event triggered" ); equal( outCount, 1, "out fires only once" ); -}); +} ); test( "repeated out & over between connected sortables", function() { expect( 2 ); @@ -342,28 +342,29 @@ test( "repeated out & over between connected sortables", function() { var outCount = 0, overCount = 0; - $( ".connectWith" ).sortable({ + $( ".connectWith" ).sortable( { connectWith: ".connectWith", over: function() { overCount++; }, out: function( event, ui ) { + // Ignore events that trigger when an item has dropped // checking for the presence of the helper. if ( !ui.helper ) { outCount++; } } - }); + } ); $( "#sortable" ).find( "li:last" ).simulate( "drag", { dy: 40 - }).simulate( "drag", { + } ).simulate( "drag", { dy: -40 - }); + } ); equal( outCount, 2, "out fires twice" ); equal( overCount, 4, "over fires four times" ); -}); +} ); /* test("activate", function() { diff --git a/tests/unit/sortable/helper.js b/tests/unit/sortable/helper.js index 76545022ee2..c1c0b6e74f8 100644 --- a/tests/unit/sortable/helper.js +++ b/tests/unit/sortable/helper.js @@ -8,7 +8,7 @@ return $.extend( helper, { $( handle ).simulate( "drag", { dx: dx, dy: dy - }); + } ); equal( $( handle ).parent().children().index( handle ), index, msg ); } } ); diff --git a/tests/unit/sortable/methods.js b/tests/unit/sortable/methods.js index f58ac052d0d..1d2fda8ff35 100644 --- a/tests/unit/sortable/methods.js +++ b/tests/unit/sortable/methods.js @@ -4,72 +4,72 @@ define( [ "ui/widgets/sortable" ], function( $, testHelper ) { -module("sortable: methods"); +module( "sortable: methods" ); -test("init", function() { - expect(5); +test( "init", function() { + expect( 5 ); - $("
").appendTo("body").sortable().remove(); - ok(true, ".sortable() called on element"); + $( "
" ).appendTo( "body" ).sortable().remove(); + ok( true, ".sortable() called on element" ); - $([]).sortable(); - ok(true, ".sortable() called on empty collection"); + $( [] ).sortable(); + ok( true, ".sortable() called on empty collection" ); - $("
").sortable(); - ok(true, ".sortable() called on disconnected DOMElement"); + $( "
" ).sortable(); + ok( true, ".sortable() called on disconnected DOMElement" ); - $("
").sortable().sortable("option", "foo"); - ok(true, "arbitrary option getter after init"); + $( "
" ).sortable().sortable( "option", "foo" ); + ok( true, "arbitrary option getter after init" ); - $("
").sortable().sortable("option", "foo", "bar"); - ok(true, "arbitrary option setter after init"); -}); + $( "
" ).sortable().sortable( "option", "foo", "bar" ); + ok( true, "arbitrary option setter after init" ); +} ); -test("destroy", function() { - expect(4); - $("
").appendTo("body").sortable().sortable("destroy").remove(); - ok(true, ".sortable('destroy') called on element"); +test( "destroy", function() { + expect( 4 ); + $( "
" ).appendTo( "body" ).sortable().sortable( "destroy" ).remove(); + ok( true, ".sortable('destroy') called on element" ); - $([]).sortable().sortable("destroy"); - ok(true, ".sortable('destroy') called on empty collection"); + $( [] ).sortable().sortable( "destroy" ); + ok( true, ".sortable('destroy') called on empty collection" ); - $("
").sortable().sortable("destroy"); - ok(true, ".sortable('destroy') called on disconnected DOMElement"); + $( "
" ).sortable().sortable( "destroy" ); + ok( true, ".sortable('destroy') called on disconnected DOMElement" ); - var expected = $("
").sortable(), - actual = expected.sortable("destroy"); - equal(actual, expected, "destroy is chainable"); -}); + var expected = $( "
" ).sortable(), + actual = expected.sortable( "destroy" ); + equal( actual, expected, "destroy is chainable" ); +} ); -test("enable", function() { - expect(5); +test( "enable", function() { + expect( 5 ); var el, actual, expected; - el = $("#sortable").sortable({ disabled: true }); + el = $( "#sortable" ).sortable( { disabled: true } ); - testHelper.sort($("li", el)[0], 0, 44, 0, ".sortable({ disabled: true })"); + testHelper.sort( $( "li", el )[ 0 ], 0, 44, 0, ".sortable({ disabled: true })" ); - el.sortable("enable"); - equal(el.sortable("option", "disabled"), false, "disabled option getter"); + el.sortable( "enable" ); + equal( el.sortable( "option", "disabled" ), false, "disabled option getter" ); - el.sortable("destroy"); - el.sortable({ disabled: true }); - el.sortable("option", "disabled", false); - equal(el.sortable("option", "disabled"), false, "disabled option setter"); + el.sortable( "destroy" ); + el.sortable( { disabled: true } ); + el.sortable( "option", "disabled", false ); + equal( el.sortable( "option", "disabled" ), false, "disabled option setter" ); - testHelper.sort($("li", el)[0], 0, 44, 2, ".sortable('option', 'disabled', false)"); + testHelper.sort( $( "li", el )[ 0 ], 0, 44, 2, ".sortable('option', 'disabled', false)" ); - expected = $("
").sortable(), - actual = expected.sortable("enable"); - equal(actual, expected, "enable is chainable"); -}); + expected = $( "
" ).sortable(), + actual = expected.sortable( "enable" ); + equal( actual, expected, "enable is chainable" ); +} ); test( "disable", function( assert ) { expect( 9 ); var chainable, - element = $( "#sortable" ).sortable({ disabled: false }); + element = $( "#sortable" ).sortable( { disabled: false } ); testHelper.sort( $( "li", element )[ 0 ], 0, 44, 2, ".sortable({ disabled: false })" ); @@ -78,18 +78,18 @@ test( "disable", function( assert ) { element.sortable( "destroy" ); - element.sortable({ disabled: false }); + element.sortable( { disabled: false } ); testHelper.sort( $( "li", element )[ 0 ], 0, 44, 2, ".sortable({ disabled: false })" ); - element.sortable( "option", "disabled", true); + element.sortable( "option", "disabled", true ); equal( element.sortable( "option", "disabled" ), true, "disabled option setter" ); assert.lacksClasses( element.sortable( "widget" ), "ui-state-disabled" ); ok( !element.sortable( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" ); assert.hasClasses( element.sortable( "widget" ), "ui-sortable-disabled" ); - testHelper.sort($( "li", element )[ 0 ], 0, 44, 0, ".sortable('option', 'disabled', true)" ); + testHelper.sort( $( "li", element )[ 0 ], 0, 44, 0, ".sortable('option', 'disabled', true)" ); equal( chainable, element, "disable is chainable" ); -}); +} ); test( "refresh() should update the positions of initially empty lists (see #7498)", function() { expect( 1 ); @@ -98,22 +98,22 @@ test( "refresh() should update the positions of initially empty lists (see #7498 element = $( "#qunit-fixture" ).html( "
    " ).find( "ul" ); element - .css({ + .css( { "float": "left", width: "100px" - }) - .sortable({ + } ) + .sortable( { change: function() { changeCount++; } - }) + } ) .append( "
  • a
  • a
  • " ) .find( "li" ) - .css({ + .css( { "float": "left", width: "50px", height: "50px" - }); + } ); element.sortable( "refresh" ); @@ -121,9 +121,9 @@ test( "refresh() should update the positions of initially empty lists (see #7498 element.find( "li" ).eq( 0 ).simulate( "drag", { dx: 55, moves: 15 - }); + } ); equal( changeCount, 1 ); -}); +} ); } ); diff --git a/tests/unit/sortable/options.js b/tests/unit/sortable/options.js index 5d24a3606f1..cdb932af3b4 100644 --- a/tests/unit/sortable/options.js +++ b/tests/unit/sortable/options.js @@ -3,7 +3,7 @@ define( [ "ui/widgets/sortable" ], function( $ ) { -module("sortable: options"); +module( "sortable: options" ); /* test("{ appendTo: 'parent' }, default", function() { @@ -19,14 +19,14 @@ test( "{ axis: false }, default", function() { expect( 2 ); var offsetAfter, - element = $( "#sortable" ).sortable({ + element = $( "#sortable" ).sortable( { axis: false, change: function() { offsetAfter = item.offset(); notEqual( offsetAfter.left, offsetBefore.left, "x axis not constrained when axis: false" ); notEqual( offsetAfter.top, offsetBefore.top, "y axis not constrained when axis: false" ); } - }), + } ), item = element.find( "li" ).eq( 0 ), offsetBefore = item.offset(); @@ -34,21 +34,21 @@ test( "{ axis: false }, default", function() { dx: 50, dy: 25, moves: 1 - }); -}); + } ); +} ); test( "{ axis: 'x' }", function() { expect( 2 ); var offsetAfter, - element = $( "#sortable" ).sortable({ + element = $( "#sortable" ).sortable( { axis: "x", change: function() { offsetAfter = item.offset(); notEqual( offsetAfter.left, offsetBefore.left, "x axis not constrained when axis: x" ); equal( offsetAfter.top, offsetBefore.top, "y axis constrained when axis: x" ); } - }), + } ), item = element.find( "li" ).eq( 0 ), offsetBefore = item.offset(); @@ -56,21 +56,21 @@ test( "{ axis: 'x' }", function() { dx: 50, dy: 25, moves: 1 - }); -}); + } ); +} ); test( "{ axis: 'y' }", function() { expect( 2 ); var offsetAfter, - element = $( "#sortable" ).sortable({ + element = $( "#sortable" ).sortable( { axis: "y", change: function() { offsetAfter = item.offset(); equal( offsetAfter.left, offsetBefore.left, "x axis constrained when axis: y" ); notEqual( offsetAfter.top, offsetBefore.top, "y axis not constrained when axis: y" ); } - }), + } ), item = element.find( "li" ).eq( 0 ), offsetBefore = item.offset(); @@ -78,33 +78,33 @@ test( "{ axis: 'y' }", function() { dx: 50, dy: 25, moves: 1 - }); -}); + } ); +} ); asyncTest( "#7415: Incorrect revert animation with axis: 'y'", function() { expect( 2 ); var expectedLeft, - element = $( "#sortable" ).sortable({ + element = $( "#sortable" ).sortable( { axis: "y", revert: true, stop: start, sort: function() { expectedLeft = item.css( "left" ); } - }), + } ), item = element.find( "li" ).eq( 0 ); item.simulate( "drag", { dy: 300, dx: 50 - }); + } ); - setTimeout(function() { + setTimeout( function() { var top = parseFloat( item.css( "top" ) ); equal( item.css( "left" ), expectedLeft, "left not animated" ); ok( top > 0 && top < 300, "top is animated" ); }, 100 ); -}); +} ); /* test("{ cancel: 'input,textarea,button,select,option' }, default", function() { @@ -124,15 +124,15 @@ test( "#8792: issues with floated items in connected lists", function() { $( "#qunit-fixture" ) .html( "
    • a
    • a
    • a
    • a
    " ) - .find( "ul" ).css({ "float": "left", width: "100px" }).end() - .find( "li" ).css({ "float": "left", width: "50px", height: "50px" }); + .find( "ul" ).css( { "float": "left", width: "100px" } ).end() + .find( "li" ).css( { "float": "left", width: "50px", height: "50px" } ); - $( "#qunit-fixture .c" ).sortable({ + $( "#qunit-fixture .c" ).sortable( { connectWith: "#qunit-fixture .c", change: function() { changeCount++; } - }); + } ); element = $( "#qunit-fixture li:eq(0)" ); @@ -140,7 +140,7 @@ test( "#8792: issues with floated items in connected lists", function() { element.simulate( "drag", { dx: 55, moves: 15 - }); + } ); equal( changeCount, 1, "change fired only once (no jitters) when dragging a floated sortable in it's own container" ); @@ -149,37 +149,37 @@ test( "#8792: issues with floated items in connected lists", function() { element.simulate( "drag", { dx: 100, moves: 15 - }); + } ); equal( changeCount, 3, "change fired once for each expected change when dragging a floated sortable to a connected container" ); -}); +} ); test( "#8301: single axis with connected list", function() { expect( 1 ); - var element = $( "#sortable" ).sortable({ + var element = $( "#sortable" ).sortable( { axis: "y", tolerance: "pointer", connectWith: ".connected" - }); + } ); $( "
    • Item 7
    • Item 8
    " ) - .sortable({ + .sortable( { axis: "y", tolerance: "pointer", connectWith: "#sortable", receive: function() { ok( true, "connected list received item" ); } - }) + } ) .insertAfter( element ); element.find( "li" ).eq( 0 ).simulate( "drag", { handle: "corner", dy: 120, moves: 1 - }); -}); + } ); +} ); /* test("{ connectWith: false }, default", function() { @@ -330,44 +330,44 @@ test("{ placeholder: false }, default", function() { test( "{ placeholder: false } img", function() { expect( 3 ); - var element = $( "#sortable-images" ).sortable({ + var element = $( "#sortable-images" ).sortable( { start: function( event, ui ) { ok( ui.placeholder.attr( "src" ).indexOf( "images/jqueryui_32x32.png" ) > 0, "placeholder img has correct src" ); equal( ui.placeholder.height(), 32, "placeholder has correct height" ); equal( ui.placeholder.width(), 32, "placeholder has correct width" ); } - }); + } ); element.find( "img" ).eq( 0 ).simulate( "drag", { dy: 1 - }); -}); + } ); +} ); test( "{ placeholder: String }", function( assert ) { expect( 1 ); - var element = $( "#sortable" ).sortable({ + var element = $( "#sortable" ).sortable( { placeholder: "test", start: function( event, ui ) { assert.hasClasses( ui.placeholder, "test" ); } - }); + } ); element.find( "li" ).eq( 0 ).simulate( "drag", { dy: 1 - }); -}); + } ); +} ); test( "{ placholder: String } tr", function( assert ) { expect( 4 ); var originalWidths, - element = $( "#sortable-table tbody" ).sortable({ + element = $( "#sortable-table tbody" ).sortable( { placeholder: "test", start: function( event, ui ) { - var currentWidths = otherRow.children().map(function() { + var currentWidths = otherRow.children().map( function() { return $( this ).width(); - }).get(); + } ).get(); assert.hasClasses( ui.placeholder, "test" ); deepEqual( currentWidths, originalWidths, "table cells maintian size" ); equal( ui.placeholder.children().length, dragRow.children().length, @@ -375,29 +375,29 @@ test( "{ placholder: String } tr", function( assert ) { equal( ui.placeholder.children().html(), $( " " ).html(), "placeholder td has content for forced dimensions" ); } - }), + } ), rows = element.children( "tr" ), dragRow = rows.eq( 0 ), otherRow = rows.eq( 1 ); - originalWidths = otherRow.children().map(function() { + originalWidths = otherRow.children().map( function() { return $( this ).width(); - }).get(); + } ).get(); dragRow.simulate( "drag", { dy: 1 - }); -}); + } ); +} ); test( "{ placholder: String } tbody", function() { expect( 6 ); var originalWidths, - element = $( "#sortable-table" ).sortable({ + element = $( "#sortable-table" ).sortable( { placeholder: "test", start: function( event, ui ) { - var currentWidths = otherBody.children().map(function() { + var currentWidths = otherBody.children().map( function() { return $( this ).width(); - }).get(); + } ).get(); ok( ui.placeholder.hasClass( "test" ), "placeholder has class" ); deepEqual( currentWidths, originalWidths, "table cells maintain size" ); equal( ui.placeholder.children().length, 1, @@ -411,18 +411,18 @@ test( "{ placholder: String } tbody", function() { $( " " ).html(), "placeholder td has content for forced dimensions" ); } - }), + } ), bodies = element.children( "tbody" ), dragBody = bodies.eq( 0 ), otherBody = bodies.eq( 1 ); - originalWidths = otherBody.children().map(function() { + originalWidths = otherBody.children().map( function() { return $( this ).width(); - }).get(); + } ).get(); dragBody.simulate( "drag", { dy: 1 - }); -}); + } ); +} ); /* test("{ revert: false }, default", function() { diff --git a/ui/widgets/sortable.js b/ui/widgets/sortable.js index bea58defd86..423bb81f8e8 100644 --- a/ui/widgets/sortable.js +++ b/ui/widgets/sortable.js @@ -14,11 +14,11 @@ //>>demos: http://jqueryui.com/sortable/ //>>css.structure: ../themes/base/sortable.css -(function( factory ) { +( function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. - define([ + define( [ "jquery", "./mouse", "../data", @@ -32,9 +32,9 @@ // Browser globals factory( jQuery ); } -}(function( $ ) { +}( function( $ ) { -return $.widget("ui.sortable", $.ui.mouse, { +return $.widget( "ui.sortable", $.ui.mouse, { version: "@VERSION", widgetEventPrefix: "sort", ready: false, @@ -82,7 +82,7 @@ return $.widget("ui.sortable", $.ui.mouse, { }, _isFloating: function( item ) { - return (/left|right/).test(item.css("float")) || (/inline|table-cell/).test(item.css("display")); + return ( /left|right/ ).test( item.css( "float" ) ) || ( /inline|table-cell/ ).test( item.css( "display" ) ); }, _create: function() { @@ -123,56 +123,56 @@ return $.widget("ui.sortable", $.ui.mouse, { this.item, "ui-sortable-handle" ); - }); + } ); }, _destroy: function() { this._mouseDestroy(); for ( var i = this.items.length - 1; i >= 0; i-- ) { - this.items[i].item.removeData(this.widgetName + "-item"); + this.items[ i ].item.removeData( this.widgetName + "-item" ); } return this; }, - _mouseCapture: function(event, overrideHandle) { + _mouseCapture: function( event, overrideHandle ) { var currentItem = null, validHandle = false, that = this; - if (this.reverting) { + if ( this.reverting ) { return false; } - if(this.options.disabled || this.options.type === "static") { + if ( this.options.disabled || this.options.type === "static" ) { return false; } //We have to refresh the items data once first - this._refreshItems(event); + this._refreshItems( event ); //Find out if the clicked node (or one of its parents) is a actual item in this.items - $(event.target).parents().each(function() { - if($.data(this, that.widgetName + "-item") === that) { - currentItem = $(this); + $( event.target ).parents().each( function() { + if ( $.data( this, that.widgetName + "-item" ) === that ) { + currentItem = $( this ); return false; } - }); - if($.data(event.target, that.widgetName + "-item") === that) { - currentItem = $(event.target); + } ); + if ( $.data( event.target, that.widgetName + "-item" ) === that ) { + currentItem = $( event.target ); } - if(!currentItem) { + if ( !currentItem ) { return false; } - if(this.options.handle && !overrideHandle) { - $(this.options.handle, currentItem).find("*").addBack().each(function() { - if(this === event.target) { + if ( this.options.handle && !overrideHandle ) { + $( this.options.handle, currentItem ).find( "*" ).addBack().each( function() { + if ( this === event.target ) { validHandle = true; } - }); - if(!validHandle) { + } ); + if ( !validHandle ) { return false; } } @@ -183,7 +183,7 @@ return $.widget("ui.sortable", $.ui.mouse, { }, - _mouseStart: function(event, overrideHandle, noActivation) { + _mouseStart: function( event, overrideHandle, noActivation ) { var i, body, o = this.options; @@ -194,7 +194,7 @@ return $.widget("ui.sortable", $.ui.mouse, { this.refreshPositions(); //Create and append the visible helper - this.helper = this._createHelper(event); + this.helper = this._createHelper( event ); //Cache the helper size this._cacheHelperProportions(); @@ -217,33 +217,33 @@ return $.widget("ui.sortable", $.ui.mouse, { left: this.offset.left - this.margins.left }; - $.extend(this.offset, { + $.extend( this.offset, { click: { //Where the click happened, relative to the element left: event.pageX - this.offset.left, top: event.pageY - this.offset.top }, parent: this._getParentOffset(), relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper - }); + } ); // Only after we got the offset, we can change the helper's position to absolute // TODO: Still need to figure out a way to make relative sorting possible - this.helper.css("position", "absolute"); - this.cssPosition = this.helper.css("position"); + this.helper.css( "position", "absolute" ); + this.cssPosition = this.helper.css( "position" ); //Generate the original position - this.originalPosition = this._generatePosition(event); + this.originalPosition = this._generatePosition( event ); this.originalPageX = event.pageX; this.originalPageY = event.pageY; //Adjust the mouse offset relative to the helper if "cursorAt" is supplied - (o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt)); + ( o.cursorAt && this._adjustOffsetFromHelper( o.cursorAt ) ); //Cache the former DOM position - this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] }; + this.domPosition = { prev: this.currentItem.prev()[ 0 ], parent: this.currentItem.parent()[ 0 ] }; //If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way - if(this.helper[0] !== this.currentItem[0]) { + if ( this.helper[ 0 ] !== this.currentItem[ 0 ] ) { this.currentItem.hide(); } @@ -251,141 +251,140 @@ return $.widget("ui.sortable", $.ui.mouse, { this._createPlaceholder(); //Set a containment if given in the options - if(o.containment) { + if ( o.containment ) { this._setContainment(); } - if( o.cursor && o.cursor !== "auto" ) { // cursor option + if ( o.cursor && o.cursor !== "auto" ) { // cursor option body = this.document.find( "body" ); // Support: IE this.storedCursor = body.css( "cursor" ); body.css( "cursor", o.cursor ); - this.storedStylesheet = $( "" ).appendTo( body ); + this.storedStylesheet = $( "" ).appendTo( body ); } - if(o.opacity) { // opacity option - if (this.helper.css("opacity")) { - this._storedOpacity = this.helper.css("opacity"); + if ( o.opacity ) { // opacity option + if ( this.helper.css( "opacity" ) ) { + this._storedOpacity = this.helper.css( "opacity" ); } - this.helper.css("opacity", o.opacity); + this.helper.css( "opacity", o.opacity ); } - if(o.zIndex) { // zIndex option - if (this.helper.css("zIndex")) { - this._storedZIndex = this.helper.css("zIndex"); + if ( o.zIndex ) { // zIndex option + if ( this.helper.css( "zIndex" ) ) { + this._storedZIndex = this.helper.css( "zIndex" ); } - this.helper.css("zIndex", o.zIndex); + this.helper.css( "zIndex", o.zIndex ); } //Prepare scrolling - if(this.scrollParent[0] !== this.document[0] && this.scrollParent[0].tagName !== "HTML") { + if ( this.scrollParent[ 0 ] !== this.document[ 0 ] && this.scrollParent[ 0 ].tagName !== "HTML" ) { this.overflowOffset = this.scrollParent.offset(); } //Call callbacks - this._trigger("start", event, this._uiHash()); + this._trigger( "start", event, this._uiHash() ); //Recache the helper size - if(!this._preserveHelperProportions) { + if ( !this._preserveHelperProportions ) { this._cacheHelperProportions(); } - //Post "activate" events to possible containers - if( !noActivation ) { + if ( !noActivation ) { for ( i = this.containers.length - 1; i >= 0; i-- ) { this.containers[ i ]._trigger( "activate", event, this._uiHash( this ) ); } } //Prepare possible droppables - if($.ui.ddmanager) { + if ( $.ui.ddmanager ) { $.ui.ddmanager.current = this; } - if ($.ui.ddmanager && !o.dropBehaviour) { - $.ui.ddmanager.prepareOffsets(this, event); + if ( $.ui.ddmanager && !o.dropBehaviour ) { + $.ui.ddmanager.prepareOffsets( this, event ); } this.dragging = true; this._addClass( this.helper, "ui-sortable-helper" ); - this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position + this._mouseDrag( event ); //Execute the drag once - this causes the helper not to be visible before getting its correct position return true; }, - _mouseDrag: function(event) { + _mouseDrag: function( event ) { var i, item, itemElement, intersection, o = this.options, scrolled = false; //Compute the helpers position - this.position = this._generatePosition(event); - this.positionAbs = this._convertPositionTo("absolute"); + this.position = this._generatePosition( event ); + this.positionAbs = this._convertPositionTo( "absolute" ); - if (!this.lastPositionAbs) { + if ( !this.lastPositionAbs ) { this.lastPositionAbs = this.positionAbs; } //Do scrolling - if(this.options.scroll) { - if(this.scrollParent[0] !== this.document[0] && this.scrollParent[0].tagName !== "HTML") { + if ( this.options.scroll ) { + if ( this.scrollParent[ 0 ] !== this.document[ 0 ] && this.scrollParent[ 0 ].tagName !== "HTML" ) { - if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) { - this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed; - } else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) { - this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed; + if ( ( this.overflowOffset.top + this.scrollParent[ 0 ].offsetHeight ) - event.pageY < o.scrollSensitivity ) { + this.scrollParent[ 0 ].scrollTop = scrolled = this.scrollParent[ 0 ].scrollTop + o.scrollSpeed; + } else if ( event.pageY - this.overflowOffset.top < o.scrollSensitivity ) { + this.scrollParent[ 0 ].scrollTop = scrolled = this.scrollParent[ 0 ].scrollTop - o.scrollSpeed; } - if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) { - this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed; - } else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) { - this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed; + if ( ( this.overflowOffset.left + this.scrollParent[ 0 ].offsetWidth ) - event.pageX < o.scrollSensitivity ) { + this.scrollParent[ 0 ].scrollLeft = scrolled = this.scrollParent[ 0 ].scrollLeft + o.scrollSpeed; + } else if ( event.pageX - this.overflowOffset.left < o.scrollSensitivity ) { + this.scrollParent[ 0 ].scrollLeft = scrolled = this.scrollParent[ 0 ].scrollLeft - o.scrollSpeed; } } else { - if(event.pageY - this.document.scrollTop() < o.scrollSensitivity) { - scrolled = this.document.scrollTop(this.document.scrollTop() - o.scrollSpeed); - } else if(this.window.height() - (event.pageY - this.document.scrollTop()) < o.scrollSensitivity) { - scrolled = this.document.scrollTop(this.document.scrollTop() + o.scrollSpeed); + if ( event.pageY - this.document.scrollTop() < o.scrollSensitivity ) { + scrolled = this.document.scrollTop( this.document.scrollTop() - o.scrollSpeed ); + } else if ( this.window.height() - ( event.pageY - this.document.scrollTop() ) < o.scrollSensitivity ) { + scrolled = this.document.scrollTop( this.document.scrollTop() + o.scrollSpeed ); } - if(event.pageX - this.document.scrollLeft() < o.scrollSensitivity) { - scrolled = this.document.scrollLeft(this.document.scrollLeft() - o.scrollSpeed); - } else if(this.window.width() - (event.pageX - this.document.scrollLeft()) < o.scrollSensitivity) { - scrolled = this.document.scrollLeft(this.document.scrollLeft() + o.scrollSpeed); + if ( event.pageX - this.document.scrollLeft() < o.scrollSensitivity ) { + scrolled = this.document.scrollLeft( this.document.scrollLeft() - o.scrollSpeed ); + } else if ( this.window.width() - ( event.pageX - this.document.scrollLeft() ) < o.scrollSensitivity ) { + scrolled = this.document.scrollLeft( this.document.scrollLeft() + o.scrollSpeed ); } } - if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) { - $.ui.ddmanager.prepareOffsets(this, event); + if ( scrolled !== false && $.ui.ddmanager && !o.dropBehaviour ) { + $.ui.ddmanager.prepareOffsets( this, event ); } } //Regenerate the absolute position used for position checks - this.positionAbs = this._convertPositionTo("absolute"); + this.positionAbs = this._convertPositionTo( "absolute" ); //Set the helper position - if(!this.options.axis || this.options.axis !== "y") { - this.helper[0].style.left = this.position.left+"px"; + if ( !this.options.axis || this.options.axis !== "y" ) { + this.helper[ 0 ].style.left = this.position.left + "px"; } - if(!this.options.axis || this.options.axis !== "x") { - this.helper[0].style.top = this.position.top+"px"; + if ( !this.options.axis || this.options.axis !== "x" ) { + this.helper[ 0 ].style.top = this.position.top + "px"; } //Rearrange - for (i = this.items.length - 1; i >= 0; i--) { + for ( i = this.items.length - 1; i >= 0; i-- ) { //Cache variables and intersection, continue if no intersection - item = this.items[i]; - itemElement = item.item[0]; - intersection = this._intersectsWithPointer(item); - if (!intersection) { + item = this.items[ i ]; + itemElement = item.item[ 0 ]; + intersection = this._intersectsWithPointer( item ); + if ( !intersection ) { continue; } @@ -396,77 +395,77 @@ return $.widget("ui.sortable", $.ui.mouse, { // // Without this, moving items in "sub-sortables" can cause // the placeholder to jitter between the outer and inner container. - if (item.instance !== this.currentContainer) { + if ( item.instance !== this.currentContainer ) { continue; } // Cannot intersect with itself // no useless actions that have been done before // no action if the item moved is the parent of the item checked - if (itemElement !== this.currentItem[0] && - this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement && - !$.contains(this.placeholder[0], itemElement) && - (this.options.type === "semi-dynamic" ? !$.contains(this.element[0], itemElement) : true) + if ( itemElement !== this.currentItem[ 0 ] && + this.placeholder[ intersection === 1 ? "next" : "prev" ]()[ 0 ] !== itemElement && + !$.contains( this.placeholder[ 0 ], itemElement ) && + ( this.options.type === "semi-dynamic" ? !$.contains( this.element[ 0 ], itemElement ) : true ) ) { this.direction = intersection === 1 ? "down" : "up"; - if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) { - this._rearrange(event, item); + if ( this.options.tolerance === "pointer" || this._intersectsWithSides( item ) ) { + this._rearrange( event, item ); } else { break; } - this._trigger("change", event, this._uiHash()); + this._trigger( "change", event, this._uiHash() ); break; } } //Post events to containers - this._contactContainers(event); + this._contactContainers( event ); //Interconnect with droppables - if($.ui.ddmanager) { - $.ui.ddmanager.drag(this, event); + if ( $.ui.ddmanager ) { + $.ui.ddmanager.drag( this, event ); } //Call callbacks - this._trigger("sort", event, this._uiHash()); + this._trigger( "sort", event, this._uiHash() ); this.lastPositionAbs = this.positionAbs; return false; }, - _mouseStop: function(event, noPropagation) { + _mouseStop: function( event, noPropagation ) { - if(!event) { + if ( !event ) { return; } //If we are using droppables, inform the manager about the drop - if ($.ui.ddmanager && !this.options.dropBehaviour) { - $.ui.ddmanager.drop(this, event); + if ( $.ui.ddmanager && !this.options.dropBehaviour ) { + $.ui.ddmanager.drop( this, event ); } - if(this.options.revert) { + if ( this.options.revert ) { var that = this, cur = this.placeholder.offset(), axis = this.options.axis, animation = {}; if ( !axis || axis === "x" ) { - animation.left = cur.left - this.offset.parent.left - this.margins.left + (this.offsetParent[0] === this.document[0].body ? 0 : this.offsetParent[0].scrollLeft); + animation.left = cur.left - this.offset.parent.left - this.margins.left + ( this.offsetParent[ 0 ] === this.document[ 0 ].body ? 0 : this.offsetParent[ 0 ].scrollLeft ); } if ( !axis || axis === "y" ) { - animation.top = cur.top - this.offset.parent.top - this.margins.top + (this.offsetParent[0] === this.document[0].body ? 0 : this.offsetParent[0].scrollTop); + animation.top = cur.top - this.offset.parent.top - this.margins.top + ( this.offsetParent[ 0 ] === this.document[ 0 ].body ? 0 : this.offsetParent[ 0 ].scrollTop ); } this.reverting = true; - $(this.helper).animate( animation, parseInt(this.options.revert, 10) || 500, function() { - that._clear(event); - }); + $( this.helper ).animate( animation, parseInt( this.options.revert, 10 ) || 500, function() { + that._clear( event ); + } ); } else { - this._clear(event, noPropagation); + this._clear( event, noPropagation ); } return false; @@ -475,11 +474,11 @@ return $.widget("ui.sortable", $.ui.mouse, { cancel: function() { - if(this.dragging) { + if ( this.dragging ) { - this._mouseUp({ target: null }); + this._mouseUp( { target: null } ); - if(this.options.helper === "original") { + if ( this.options.helper === "original" ) { this.currentItem.css( this._storedCSS ); this._removeClass( this.currentItem, "ui-sortable-helper" ); } else { @@ -487,36 +486,37 @@ return $.widget("ui.sortable", $.ui.mouse, { } //Post deactivating events to containers - for (var i = this.containers.length - 1; i >= 0; i--){ - this.containers[i]._trigger("deactivate", null, this._uiHash(this)); - if(this.containers[i].containerCache.over) { - this.containers[i]._trigger("out", null, this._uiHash(this)); - this.containers[i].containerCache.over = 0; + for ( var i = this.containers.length - 1; i >= 0; i-- ) { + this.containers[ i ]._trigger( "deactivate", null, this._uiHash( this ) ); + if ( this.containers[ i ].containerCache.over ) { + this.containers[ i ]._trigger( "out", null, this._uiHash( this ) ); + this.containers[ i ].containerCache.over = 0; } } } - if (this.placeholder) { + if ( this.placeholder ) { + //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node! - if(this.placeholder[0].parentNode) { - this.placeholder[0].parentNode.removeChild(this.placeholder[0]); + if ( this.placeholder[ 0 ].parentNode ) { + this.placeholder[ 0 ].parentNode.removeChild( this.placeholder[ 0 ] ); } - if(this.options.helper !== "original" && this.helper && this.helper[0].parentNode) { + if ( this.options.helper !== "original" && this.helper && this.helper[ 0 ].parentNode ) { this.helper.remove(); } - $.extend(this, { + $.extend( this, { helper: null, dragging: false, reverting: false, _noFinalSort: null - }); + } ); - if(this.domPosition.prev) { - $(this.domPosition.prev).after(this.currentItem); + if ( this.domPosition.prev ) { + $( this.domPosition.prev ).after( this.currentItem ); } else { - $(this.domPosition.parent).prepend(this.currentItem); + $( this.domPosition.parent ).prepend( this.currentItem ); } } @@ -524,41 +524,41 @@ return $.widget("ui.sortable", $.ui.mouse, { }, - serialize: function(o) { + serialize: function( o ) { - var items = this._getItemsAsjQuery(o && o.connected), + var items = this._getItemsAsjQuery( o && o.connected ), str = []; o = o || {}; - $(items).each(function() { - var res = ($(o.item || this).attr(o.attribute || "id") || "").match(o.expression || (/(.+)[\-=_](.+)/)); - if (res) { - str.push((o.key || res[1]+"[]")+"="+(o.key && o.expression ? res[1] : res[2])); + $( items ).each( function() { + var res = ( $( o.item || this ).attr( o.attribute || "id" ) || "" ).match( o.expression || ( /(.+)[\-=_](.+)/ ) ); + if ( res ) { + str.push( ( o.key || res[ 1 ] + "[]" ) + "=" + ( o.key && o.expression ? res[ 1 ] : res[ 2 ] ) ); } - }); + } ); - if(!str.length && o.key) { - str.push(o.key + "="); + if ( !str.length && o.key ) { + str.push( o.key + "=" ); } - return str.join("&"); + return str.join( "&" ); }, - toArray: function(o) { + toArray: function( o ) { - var items = this._getItemsAsjQuery(o && o.connected), + var items = this._getItemsAsjQuery( o && o.connected ), ret = []; o = o || {}; - items.each(function() { ret.push($(o.item || this).attr(o.attribute || "id") || ""); }); + items.each( function() { ret.push( $( o.item || this ).attr( o.attribute || "id" ) || "" ); } ); return ret; }, /* Be careful with the following core functions */ - _intersectsWith: function(item) { + _intersectsWith: function( item ) { var x1 = this.positionAbs.left, x2 = x1 + this.helperProportions.width, @@ -576,27 +576,27 @@ return $.widget("ui.sortable", $.ui.mouse, { if ( this.options.tolerance === "pointer" || this.options.forcePointerForContainers || - (this.options.tolerance !== "pointer" && this.helperProportions[this.floating ? "width" : "height"] > item[this.floating ? "width" : "height"]) + ( this.options.tolerance !== "pointer" && this.helperProportions[ this.floating ? "width" : "height" ] > item[ this.floating ? "width" : "height" ] ) ) { return isOverElement; } else { - return (l < x1 + (this.helperProportions.width / 2) && // Right Half - x2 - (this.helperProportions.width / 2) < r && // Left Half - t < y1 + (this.helperProportions.height / 2) && // Bottom Half - y2 - (this.helperProportions.height / 2) < b ); // Top Half + return ( l < x1 + ( this.helperProportions.width / 2 ) && // Right Half + x2 - ( this.helperProportions.width / 2 ) < r && // Left Half + t < y1 + ( this.helperProportions.height / 2 ) && // Bottom Half + y2 - ( this.helperProportions.height / 2 ) < b ); // Top Half } }, - _intersectsWithPointer: function(item) { + _intersectsWithPointer: function( item ) { var verticalDirection, horizontalDirection, - isOverElementHeight = (this.options.axis === "x") || this._isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height), - isOverElementWidth = (this.options.axis === "y") || this._isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width), + isOverElementHeight = ( this.options.axis === "x" ) || this._isOverAxis( this.positionAbs.top + this.offset.click.top, item.top, item.height ), + isOverElementWidth = ( this.options.axis === "y" ) || this._isOverAxis( this.positionAbs.left + this.offset.click.left, item.left, item.width ), isOverElement = isOverElementHeight && isOverElementWidth; - if (!isOverElement) { + if ( !isOverElement ) { return false; } @@ -604,38 +604,38 @@ return $.widget("ui.sortable", $.ui.mouse, { horizontalDirection = this._getDragHorizontalDirection(); return this.floating ? - ( (horizontalDirection === "right" || verticalDirection === "down") ? 2 : 1 ) - : ( verticalDirection && (verticalDirection === "down" ? 2 : 1) ); + ( ( horizontalDirection === "right" || verticalDirection === "down" ) ? 2 : 1 ) + : ( verticalDirection && ( verticalDirection === "down" ? 2 : 1 ) ); }, - _intersectsWithSides: function(item) { + _intersectsWithSides: function( item ) { - var isOverBottomHalf = this._isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height), - isOverRightHalf = this._isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width), + var isOverBottomHalf = this._isOverAxis( this.positionAbs.top + this.offset.click.top, item.top + ( item.height / 2 ), item.height ), + isOverRightHalf = this._isOverAxis( this.positionAbs.left + this.offset.click.left, item.left + ( item.width / 2 ), item.width ), verticalDirection = this._getDragVerticalDirection(), horizontalDirection = this._getDragHorizontalDirection(); - if (this.floating && horizontalDirection) { - return ((horizontalDirection === "right" && isOverRightHalf) || (horizontalDirection === "left" && !isOverRightHalf)); + if ( this.floating && horizontalDirection ) { + return ( ( horizontalDirection === "right" && isOverRightHalf ) || ( horizontalDirection === "left" && !isOverRightHalf ) ); } else { - return verticalDirection && ((verticalDirection === "down" && isOverBottomHalf) || (verticalDirection === "up" && !isOverBottomHalf)); + return verticalDirection && ( ( verticalDirection === "down" && isOverBottomHalf ) || ( verticalDirection === "up" && !isOverBottomHalf ) ); } }, _getDragVerticalDirection: function() { var delta = this.positionAbs.top - this.lastPositionAbs.top; - return delta !== 0 && (delta > 0 ? "down" : "up"); + return delta !== 0 && ( delta > 0 ? "down" : "up" ); }, _getDragHorizontalDirection: function() { var delta = this.positionAbs.left - this.lastPositionAbs.left; - return delta !== 0 && (delta > 0 ? "right" : "left"); + return delta !== 0 && ( delta > 0 ? "right" : "left" ); }, - refresh: function(event) { - this._refreshItems(event); + refresh: function( event ) { + this._refreshItems( event ); this._setHandleClassName(); this.refreshPositions(); return this; @@ -643,100 +643,100 @@ return $.widget("ui.sortable", $.ui.mouse, { _connectWith: function() { var options = this.options; - return options.connectWith.constructor === String ? [options.connectWith] : options.connectWith; + return options.connectWith.constructor === String ? [ options.connectWith ] : options.connectWith; }, - _getItemsAsjQuery: function(connected) { + _getItemsAsjQuery: function( connected ) { var i, j, cur, inst, items = [], queries = [], connectWith = this._connectWith(); - if(connectWith && connected) { - for (i = connectWith.length - 1; i >= 0; i--){ - cur = $(connectWith[i], this.document[0]); - for ( j = cur.length - 1; j >= 0; j--){ - inst = $.data(cur[j], this.widgetFullName); - if(inst && inst !== this && !inst.options.disabled) { - queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), inst]); + if ( connectWith && connected ) { + for ( i = connectWith.length - 1; i >= 0; i-- ) { + cur = $( connectWith[ i ], this.document[ 0 ] ); + for ( j = cur.length - 1; j >= 0; j-- ) { + inst = $.data( cur[ j ], this.widgetFullName ); + if ( inst && inst !== this && !inst.options.disabled ) { + queries.push( [ $.isFunction( inst.options.items ) ? inst.options.items.call( inst.element ) : $( inst.options.items, inst.element ).not( ".ui-sortable-helper" ).not( ".ui-sortable-placeholder" ), inst ] ); } } } } - queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), this]); + queries.push( [ $.isFunction( this.options.items ) ? this.options.items.call( this.element, null, { options: this.options, item: this.currentItem } ) : $( this.options.items, this.element ).not( ".ui-sortable-helper" ).not( ".ui-sortable-placeholder" ), this ] ); function addItems() { items.push( this ); } - for (i = queries.length - 1; i >= 0; i--){ - queries[i][0].each( addItems ); + for ( i = queries.length - 1; i >= 0; i-- ) { + queries[ i ][ 0 ].each( addItems ); } - return $(items); + return $( items ); }, _removeCurrentsFromItems: function() { - var list = this.currentItem.find(":data(" + this.widgetName + "-item)"); + var list = this.currentItem.find( ":data(" + this.widgetName + "-item)" ); - this.items = $.grep(this.items, function (item) { - for (var j=0; j < list.length; j++) { - if(list[j] === item.item[0]) { + this.items = $.grep( this.items, function( item ) { + for ( var j = 0; j < list.length; j++ ) { + if ( list[ j ] === item.item[ 0 ] ) { return false; } } return true; - }); + } ); }, - _refreshItems: function(event) { + _refreshItems: function( event ) { this.items = []; - this.containers = [this]; + this.containers = [ this ]; var i, j, cur, inst, targetData, _queries, item, queriesLength, items = this.items, - queries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]], + queries = [ [ $.isFunction( this.options.items ) ? this.options.items.call( this.element[ 0 ], event, { item: this.currentItem } ) : $( this.options.items, this.element ), this ] ], connectWith = this._connectWith(); - if(connectWith && this.ready) { //Shouldn't be run the first time through due to massive slow-down - for (i = connectWith.length - 1; i >= 0; i--){ - cur = $(connectWith[i], this.document[0]); - for (j = cur.length - 1; j >= 0; j--){ - inst = $.data(cur[j], this.widgetFullName); - if(inst && inst !== this && !inst.options.disabled) { - queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]); - this.containers.push(inst); + if ( connectWith && this.ready ) { //Shouldn't be run the first time through due to massive slow-down + for ( i = connectWith.length - 1; i >= 0; i-- ) { + cur = $( connectWith[ i ], this.document[ 0 ] ); + for ( j = cur.length - 1; j >= 0; j-- ) { + inst = $.data( cur[ j ], this.widgetFullName ); + if ( inst && inst !== this && !inst.options.disabled ) { + queries.push( [ $.isFunction( inst.options.items ) ? inst.options.items.call( inst.element[ 0 ], event, { item: this.currentItem } ) : $( inst.options.items, inst.element ), inst ] ); + this.containers.push( inst ); } } } } - for (i = queries.length - 1; i >= 0; i--) { - targetData = queries[i][1]; - _queries = queries[i][0]; + for ( i = queries.length - 1; i >= 0; i-- ) { + targetData = queries[ i ][ 1 ]; + _queries = queries[ i ][ 0 ]; - for (j=0, queriesLength = _queries.length; j < queriesLength; j++) { - item = $(_queries[j]); + for ( j = 0, queriesLength = _queries.length; j < queriesLength; j++ ) { + item = $( _queries[ j ] ); - item.data(this.widgetName + "-item", targetData); // Data for target checking (mouse manager) + item.data( this.widgetName + "-item", targetData ); // Data for target checking (mouse manager) - items.push({ + items.push( { item: item, instance: targetData, width: 0, height: 0, left: 0, top: 0 - }); + } ); } } }, - refreshPositions: function(fast) { + refreshPositions: function( fast ) { // Determine whether items are being displayed horizontally this.floating = this.items.length ? @@ -744,23 +744,23 @@ return $.widget("ui.sortable", $.ui.mouse, { false; //This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change - if(this.offsetParent && this.helper) { + if ( this.offsetParent && this.helper ) { this.offset.parent = this._getParentOffset(); } var i, item, t, p; - for (i = this.items.length - 1; i >= 0; i--){ - item = this.items[i]; + for ( i = this.items.length - 1; i >= 0; i-- ) { + item = this.items[ i ]; //We ignore calculating positions of all connected containers when we're not over them - if(item.instance !== this.currentContainer && this.currentContainer && item.item[0] !== this.currentItem[0]) { + if ( item.instance !== this.currentContainer && this.currentContainer && item.item[ 0 ] !== this.currentItem[ 0 ] ) { continue; } - t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item; + t = this.options.toleranceElement ? $( this.options.toleranceElement, item.item ) : item.item; - if (!fast) { + if ( !fast ) { item.width = t.outerWidth(); item.height = t.outerHeight(); } @@ -770,33 +770,33 @@ return $.widget("ui.sortable", $.ui.mouse, { item.top = p.top; } - if(this.options.custom && this.options.custom.refreshContainers) { - this.options.custom.refreshContainers.call(this); + if ( this.options.custom && this.options.custom.refreshContainers ) { + this.options.custom.refreshContainers.call( this ); } else { - for (i = this.containers.length - 1; i >= 0; i--){ - p = this.containers[i].element.offset(); - this.containers[i].containerCache.left = p.left; - this.containers[i].containerCache.top = p.top; - this.containers[i].containerCache.width = this.containers[i].element.outerWidth(); - this.containers[i].containerCache.height = this.containers[i].element.outerHeight(); + for ( i = this.containers.length - 1; i >= 0; i-- ) { + p = this.containers[ i ].element.offset(); + this.containers[ i ].containerCache.left = p.left; + this.containers[ i ].containerCache.top = p.top; + this.containers[ i ].containerCache.width = this.containers[ i ].element.outerWidth(); + this.containers[ i ].containerCache.height = this.containers[ i ].element.outerHeight(); } } return this; }, - _createPlaceholder: function(that) { + _createPlaceholder: function( that ) { that = that || this; var className, o = that.options; - if(!o.placeholder || o.placeholder.constructor === String) { + if ( !o.placeholder || o.placeholder.constructor === String ) { className = o.placeholder; o.placeholder = { element: function() { - var nodeName = that.currentItem[0].nodeName.toLowerCase(), - element = $( "<" + nodeName + ">", that.document[0] ); + var nodeName = that.currentItem[ 0 ].nodeName.toLowerCase(), + element = $( "<" + nodeName + ">", that.document[ 0 ] ); that._addClass( element, "ui-sortable-placeholder", className || that.currentItem[ 0 ].className ) @@ -819,105 +819,106 @@ return $.widget("ui.sortable", $.ui.mouse, { return element; }, - update: function(container, p) { + update: function( container, p ) { // 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that // 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified - if(className && !o.forcePlaceholderSize) { + if ( className && !o.forcePlaceholderSize ) { return; } //If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item - if(!p.height()) { p.height(that.currentItem.innerHeight() - parseInt(that.currentItem.css("paddingTop")||0, 10) - parseInt(that.currentItem.css("paddingBottom")||0, 10)); } - if(!p.width()) { p.width(that.currentItem.innerWidth() - parseInt(that.currentItem.css("paddingLeft")||0, 10) - parseInt(that.currentItem.css("paddingRight")||0, 10)); } + if ( !p.height() ) { p.height( that.currentItem.innerHeight() - parseInt( that.currentItem.css( "paddingTop" ) || 0, 10 ) - parseInt( that.currentItem.css( "paddingBottom" ) || 0, 10 ) ); } + if ( !p.width() ) { p.width( that.currentItem.innerWidth() - parseInt( that.currentItem.css( "paddingLeft" ) || 0, 10 ) - parseInt( that.currentItem.css( "paddingRight" ) || 0, 10 ) ); } } }; } //Create the placeholder - that.placeholder = $(o.placeholder.element.call(that.element, that.currentItem)); + that.placeholder = $( o.placeholder.element.call( that.element, that.currentItem ) ); //Append it after the actual current item - that.currentItem.after(that.placeholder); + that.currentItem.after( that.placeholder ); //Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317) - o.placeholder.update(that, that.placeholder); + o.placeholder.update( that, that.placeholder ); }, _createTrPlaceholder: function( sourceTr, targetTr ) { var that = this; - sourceTr.children().each(function() { + sourceTr.children().each( function() { $( " ", that.document[ 0 ] ) .attr( "colspan", $( this ).attr( "colspan" ) || 1 ) .appendTo( targetTr ); - }); + } ); }, - _contactContainers: function(event) { + _contactContainers: function( event ) { var i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, cur, nearBottom, floating, axis, innermostContainer = null, innermostIndex = null; // Get innermost container that intersects with item - for (i = this.containers.length - 1; i >= 0; i--) { + for ( i = this.containers.length - 1; i >= 0; i-- ) { // Never consider a container that's located within the item itself - if($.contains(this.currentItem[0], this.containers[i].element[0])) { + if ( $.contains( this.currentItem[ 0 ], this.containers[ i ].element[ 0 ] ) ) { continue; } - if(this._intersectsWith(this.containers[i].containerCache)) { + if ( this._intersectsWith( this.containers[ i ].containerCache ) ) { // If we've already found a container and it's more "inner" than this, then continue - if(innermostContainer && $.contains(this.containers[i].element[0], innermostContainer.element[0])) { + if ( innermostContainer && $.contains( this.containers[ i ].element[ 0 ], innermostContainer.element[ 0 ] ) ) { continue; } - innermostContainer = this.containers[i]; + innermostContainer = this.containers[ i ]; innermostIndex = i; } else { + // container doesn't intersect. trigger "out" event if necessary - if(this.containers[i].containerCache.over) { - this.containers[i]._trigger("out", event, this._uiHash(this)); - this.containers[i].containerCache.over = 0; + if ( this.containers[ i ].containerCache.over ) { + this.containers[ i ]._trigger( "out", event, this._uiHash( this ) ); + this.containers[ i ].containerCache.over = 0; } } } // If no intersecting containers found, return - if(!innermostContainer) { + if ( !innermostContainer ) { return; } // Move the item into the container if it's not there already - if(this.containers.length === 1) { - if (!this.containers[innermostIndex].containerCache.over) { - this.containers[innermostIndex]._trigger("over", event, this._uiHash(this)); - this.containers[innermostIndex].containerCache.over = 1; + if ( this.containers.length === 1 ) { + if ( !this.containers[ innermostIndex ].containerCache.over ) { + this.containers[ innermostIndex ]._trigger( "over", event, this._uiHash( this ) ); + this.containers[ innermostIndex ].containerCache.over = 1; } } else { //When entering a new container, we will find the item with the least distance and append our item near it dist = 10000; itemWithLeastDistance = null; - floating = innermostContainer.floating || this._isFloating(this.currentItem); + floating = innermostContainer.floating || this._isFloating( this.currentItem ); posProperty = floating ? "left" : "top"; sizeProperty = floating ? "width" : "height"; axis = floating ? "clientX" : "clientY"; - for (j = this.items.length - 1; j >= 0; j--) { - if(!$.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) { + for ( j = this.items.length - 1; j >= 0; j-- ) { + if ( !$.contains( this.containers[ innermostIndex ].element[ 0 ], this.items[ j ].item[ 0 ] ) ) { continue; } - if(this.items[j].item[0] === this.currentItem[0]) { + if ( this.items[ j ].item[ 0 ] === this.currentItem[ 0 ] ) { continue; } - cur = this.items[j].item.offset()[posProperty]; + cur = this.items[ j ].item.offset()[ posProperty ]; nearBottom = false; if ( event[ axis ] - cur > this.items[ j ][ sizeProperty ] / 2 ) { nearBottom = true; @@ -926,16 +927,16 @@ return $.widget("ui.sortable", $.ui.mouse, { if ( Math.abs( event[ axis ] - cur ) < dist ) { dist = Math.abs( event[ axis ] - cur ); itemWithLeastDistance = this.items[ j ]; - this.direction = nearBottom ? "up": "down"; + this.direction = nearBottom ? "up" : "down"; } } //Check if dropOnEmpty is enabled - if(!itemWithLeastDistance && !this.options.dropOnEmpty) { + if ( !itemWithLeastDistance && !this.options.dropOnEmpty ) { return; } - if(this.currentContainer === this.containers[innermostIndex]) { + if ( this.currentContainer === this.containers[ innermostIndex ] ) { if ( !this.currentContainer.containerCache.over ) { this.containers[ innermostIndex ]._trigger( "over", event, this._uiHash() ); this.currentContainer.containerCache.over = 1; @@ -943,70 +944,68 @@ return $.widget("ui.sortable", $.ui.mouse, { return; } - itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[innermostIndex].element, true); - this._trigger("change", event, this._uiHash()); - this.containers[innermostIndex]._trigger("change", event, this._uiHash(this)); - this.currentContainer = this.containers[innermostIndex]; + itemWithLeastDistance ? this._rearrange( event, itemWithLeastDistance, null, true ) : this._rearrange( event, null, this.containers[ innermostIndex ].element, true ); + this._trigger( "change", event, this._uiHash() ); + this.containers[ innermostIndex ]._trigger( "change", event, this._uiHash( this ) ); + this.currentContainer = this.containers[ innermostIndex ]; //Update the placeholder - this.options.placeholder.update(this.currentContainer, this.placeholder); + this.options.placeholder.update( this.currentContainer, this.placeholder ); - this.containers[innermostIndex]._trigger("over", event, this._uiHash(this)); - this.containers[innermostIndex].containerCache.over = 1; + this.containers[ innermostIndex ]._trigger( "over", event, this._uiHash( this ) ); + this.containers[ innermostIndex ].containerCache.over = 1; } - }, - _createHelper: function(event) { + _createHelper: function( event ) { var o = this.options, - helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper === "clone" ? this.currentItem.clone() : this.currentItem); + helper = $.isFunction( o.helper ) ? $( o.helper.apply( this.element[ 0 ], [ event, this.currentItem ] ) ) : ( o.helper === "clone" ? this.currentItem.clone() : this.currentItem ); //Add the helper to the DOM if that didn't happen already - if(!helper.parents("body").length) { - $(o.appendTo !== "parent" ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]); + if ( !helper.parents( "body" ).length ) { + $( o.appendTo !== "parent" ? o.appendTo : this.currentItem[ 0 ].parentNode )[ 0 ].appendChild( helper[ 0 ] ); } - if(helper[0] === this.currentItem[0]) { - this._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css("position"), top: this.currentItem.css("top"), left: this.currentItem.css("left") }; + if ( helper[ 0 ] === this.currentItem[ 0 ] ) { + this._storedCSS = { width: this.currentItem[ 0 ].style.width, height: this.currentItem[ 0 ].style.height, position: this.currentItem.css( "position" ), top: this.currentItem.css( "top" ), left: this.currentItem.css( "left" ) }; } - if(!helper[0].style.width || o.forceHelperSize) { - helper.width(this.currentItem.width()); + if ( !helper[ 0 ].style.width || o.forceHelperSize ) { + helper.width( this.currentItem.width() ); } - if(!helper[0].style.height || o.forceHelperSize) { - helper.height(this.currentItem.height()); + if ( !helper[ 0 ].style.height || o.forceHelperSize ) { + helper.height( this.currentItem.height() ); } return helper; }, - _adjustOffsetFromHelper: function(obj) { - if (typeof obj === "string") { - obj = obj.split(" "); + _adjustOffsetFromHelper: function( obj ) { + if ( typeof obj === "string" ) { + obj = obj.split( " " ); } - if ($.isArray(obj)) { - obj = {left: +obj[0], top: +obj[1] || 0}; + if ( $.isArray( obj ) ) { + obj = { left: +obj[ 0 ], top: +obj[ 1 ] || 0 }; } - if ("left" in obj) { + if ( "left" in obj ) { this.offset.click.left = obj.left + this.margins.left; } - if ("right" in obj) { + if ( "right" in obj ) { this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left; } - if ("top" in obj) { + if ( "top" in obj ) { this.offset.click.top = obj.top + this.margins.top; } - if ("bottom" in obj) { + if ( "bottom" in obj ) { this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top; } }, _getParentOffset: function() { - //Get the offsetParent and cache its position this.offsetParent = this.helper.offsetParent(); var po = this.offsetParent.offset(); @@ -1015,31 +1014,31 @@ return $.widget("ui.sortable", $.ui.mouse, { // 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that // the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag - if(this.cssPosition === "absolute" && this.scrollParent[0] !== this.document[0] && $.contains(this.scrollParent[0], this.offsetParent[0])) { + if ( this.cssPosition === "absolute" && this.scrollParent[ 0 ] !== this.document[ 0 ] && $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) { po.left += this.scrollParent.scrollLeft(); po.top += this.scrollParent.scrollTop(); } // This needs to be actually done for all browsers, since pageX/pageY includes this information // with an ugly IE fix - if( this.offsetParent[0] === this.document[0].body || (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() === "html" && $.ui.ie)) { + if ( this.offsetParent[ 0 ] === this.document[ 0 ].body || ( this.offsetParent[ 0 ].tagName && this.offsetParent[ 0 ].tagName.toLowerCase() === "html" && $.ui.ie ) ) { po = { top: 0, left: 0 }; } return { - top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0), - left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0) + top: po.top + ( parseInt( this.offsetParent.css( "borderTopWidth" ), 10 ) || 0 ), + left: po.left + ( parseInt( this.offsetParent.css( "borderLeftWidth" ), 10 ) || 0 ) }; }, _getRelativeOffset: function() { - if(this.cssPosition === "relative") { + if ( this.cssPosition === "relative" ) { var p = this.currentItem.position(); return { - top: p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(), - left: p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft() + top: p.top - ( parseInt( this.helper.css( "top" ), 10 ) || 0 ) + this.scrollParent.scrollTop(), + left: p.left - ( parseInt( this.helper.css( "left" ), 10 ) || 0 ) + this.scrollParent.scrollLeft() }; } else { return { top: 0, left: 0 }; @@ -1049,8 +1048,8 @@ return $.widget("ui.sortable", $.ui.mouse, { _cacheMargins: function() { this.margins = { - left: (parseInt(this.currentItem.css("marginLeft"),10) || 0), - top: (parseInt(this.currentItem.css("marginTop"),10) || 0) + left: ( parseInt( this.currentItem.css( "marginLeft" ), 10 ) || 0 ), + top: ( parseInt( this.currentItem.css( "marginTop" ), 10 ) || 0 ) }; }, @@ -1065,72 +1064,72 @@ return $.widget("ui.sortable", $.ui.mouse, { var ce, co, over, o = this.options; - if(o.containment === "parent") { - o.containment = this.helper[0].parentNode; + if ( o.containment === "parent" ) { + o.containment = this.helper[ 0 ].parentNode; } - if(o.containment === "document" || o.containment === "window") { + if ( o.containment === "document" || o.containment === "window" ) { this.containment = [ 0 - this.offset.relative.left - this.offset.parent.left, 0 - this.offset.relative.top - this.offset.parent.top, o.containment === "document" ? this.document.width() : this.window.width() - this.helperProportions.width - this.margins.left, - (o.containment === "document" ? this.document.width() : this.window.height() || this.document[0].body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top + ( o.containment === "document" ? this.document.width() : this.window.height() || this.document[ 0 ].body.parentNode.scrollHeight ) - this.helperProportions.height - this.margins.top ]; } - if(!(/^(document|window|parent)$/).test(o.containment)) { - ce = $(o.containment)[0]; - co = $(o.containment).offset(); - over = ($(ce).css("overflow") !== "hidden"); + if ( !( /^(document|window|parent)$/ ).test( o.containment ) ) { + ce = $( o.containment )[ 0 ]; + co = $( o.containment ).offset(); + over = ( $( ce ).css( "overflow" ) !== "hidden" ); this.containment = [ - co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left, - co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top, - co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left, - co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top + co.left + ( parseInt( $( ce ).css( "borderLeftWidth" ), 10 ) || 0 ) + ( parseInt( $( ce ).css( "paddingLeft" ), 10 ) || 0 ) - this.margins.left, + co.top + ( parseInt( $( ce ).css( "borderTopWidth" ), 10 ) || 0 ) + ( parseInt( $( ce ).css( "paddingTop" ), 10 ) || 0 ) - this.margins.top, + co.left + ( over ? Math.max( ce.scrollWidth, ce.offsetWidth ) : ce.offsetWidth ) - ( parseInt( $( ce ).css( "borderLeftWidth" ), 10 ) || 0 ) - ( parseInt( $( ce ).css( "paddingRight" ), 10 ) || 0 ) - this.helperProportions.width - this.margins.left, + co.top + ( over ? Math.max( ce.scrollHeight, ce.offsetHeight ) : ce.offsetHeight ) - ( parseInt( $( ce ).css( "borderTopWidth" ), 10 ) || 0 ) - ( parseInt( $( ce ).css( "paddingBottom" ), 10 ) || 0 ) - this.helperProportions.height - this.margins.top ]; } }, - _convertPositionTo: function(d, pos) { + _convertPositionTo: function( d, pos ) { - if(!pos) { + if ( !pos ) { pos = this.position; } var mod = d === "absolute" ? 1 : -1, - scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== this.document[0] && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, - scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); + scroll = this.cssPosition === "absolute" && !( this.scrollParent[ 0 ] !== this.document[ 0 ] && $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) ? this.offsetParent : this.scrollParent, + scrollIsRootNode = ( /(html|body)/i ).test( scroll[ 0 ].tagName ); return { top: ( pos.top + // The absolute mouse position this.offset.relative.top * mod + // Only for relative positioned nodes: Relative offset from element to offset parent this.offset.parent.top * mod - // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod) + ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod ) ), left: ( pos.left + // The absolute mouse position this.offset.relative.left * mod + // Only for relative positioned nodes: Relative offset from element to offset parent this.offset.parent.left * mod - // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod) + ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod ) ) }; }, - _generatePosition: function(event) { + _generatePosition: function( event ) { var top, left, o = this.options, pageX = event.pageX, pageY = event.pageY, - scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== this.document[0] && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); + scroll = this.cssPosition === "absolute" && !( this.scrollParent[ 0 ] !== this.document[ 0 ] && $.contains( this.scrollParent[ 0 ], this.offsetParent[ 0 ] ) ) ? this.offsetParent : this.scrollParent, scrollIsRootNode = ( /(html|body)/i ).test( scroll[ 0 ].tagName ); // This is another very weird special case that only happens for relative elements: // 1. If the css position is relative // 2. and the scroll parent is the document or similar to the offset parent // we have to refresh the relative offset during the scroll so there are no jumps - if(this.cssPosition === "relative" && !(this.scrollParent[0] !== this.document[0] && this.scrollParent[0] !== this.offsetParent[0])) { + if ( this.cssPosition === "relative" && !( this.scrollParent[ 0 ] !== this.document[ 0 ] && this.scrollParent[ 0 ] !== this.offsetParent[ 0 ] ) ) { this.offset.relative = this._getRelativeOffset(); } @@ -1139,29 +1138,29 @@ return $.widget("ui.sortable", $.ui.mouse, { * Constrain the position to a mix of grid, containment. */ - if(this.originalPosition) { //If we are not dragging yet, we won't check for options + if ( this.originalPosition ) { //If we are not dragging yet, we won't check for options - if(this.containment) { - if(event.pageX - this.offset.click.left < this.containment[0]) { - pageX = this.containment[0] + this.offset.click.left; + if ( this.containment ) { + if ( event.pageX - this.offset.click.left < this.containment[ 0 ] ) { + pageX = this.containment[ 0 ] + this.offset.click.left; } - if(event.pageY - this.offset.click.top < this.containment[1]) { - pageY = this.containment[1] + this.offset.click.top; + if ( event.pageY - this.offset.click.top < this.containment[ 1 ] ) { + pageY = this.containment[ 1 ] + this.offset.click.top; } - if(event.pageX - this.offset.click.left > this.containment[2]) { - pageX = this.containment[2] + this.offset.click.left; + if ( event.pageX - this.offset.click.left > this.containment[ 2 ] ) { + pageX = this.containment[ 2 ] + this.offset.click.left; } - if(event.pageY - this.offset.click.top > this.containment[3]) { - pageY = this.containment[3] + this.offset.click.top; + if ( event.pageY - this.offset.click.top > this.containment[ 3 ] ) { + pageY = this.containment[ 3 ] + this.offset.click.top; } } - if(o.grid) { - top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1]; - pageY = this.containment ? ( (top - this.offset.click.top >= this.containment[1] && top - this.offset.click.top <= this.containment[3]) ? top : ((top - this.offset.click.top >= this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top; + if ( o.grid ) { + top = this.originalPageY + Math.round( ( pageY - this.originalPageY ) / o.grid[ 1 ] ) * o.grid[ 1 ]; + pageY = this.containment ? ( ( top - this.offset.click.top >= this.containment[ 1 ] && top - this.offset.click.top <= this.containment[ 3 ] ) ? top : ( ( top - this.offset.click.top >= this.containment[ 1 ] ) ? top - o.grid[ 1 ] : top + o.grid[ 1 ] ) ) : top; - left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0]; - pageX = this.containment ? ( (left - this.offset.click.left >= this.containment[0] && left - this.offset.click.left <= this.containment[2]) ? left : ((left - this.offset.click.left >= this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left; + left = this.originalPageX + Math.round( ( pageX - this.originalPageX ) / o.grid[ 0 ] ) * o.grid[ 0 ]; + pageX = this.containment ? ( ( left - this.offset.click.left >= this.containment[ 0 ] && left - this.offset.click.left <= this.containment[ 2 ] ) ? left : ( ( left - this.offset.click.left >= this.containment[ 0 ] ) ? left - o.grid[ 0 ] : left + o.grid[ 0 ] ) ) : left; } } @@ -1172,22 +1171,22 @@ return $.widget("ui.sortable", $.ui.mouse, { this.offset.click.top - // Click offset (relative to the element) this.offset.relative.top - // Only for relative positioned nodes: Relative offset from element to offset parent this.offset.parent.top + // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) )) + ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) ) ), left: ( pageX - // The absolute mouse position this.offset.click.left - // Click offset (relative to the element) this.offset.relative.left - // Only for relative positioned nodes: Relative offset from element to offset parent this.offset.parent.left + // The offsetParent's offset without borders (offset + border) - ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() )) + ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) ) ) }; }, - _rearrange: function(event, i, a, hardRefresh) { + _rearrange: function( event, i, a, hardRefresh ) { - a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling)); + a ? a[ 0 ].appendChild( this.placeholder[ 0 ] ) : i.item[ 0 ].parentNode.insertBefore( this.placeholder[ 0 ], ( this.direction === "down" ? i.item[ 0 ] : i.item[ 0 ].nextSibling ) ); //Various things done here to improve the performance: // 1. we create a setTimeout, that calls refreshPositions @@ -1197,17 +1196,18 @@ return $.widget("ui.sortable", $.ui.mouse, { this.counter = this.counter ? ++this.counter : 1; var counter = this.counter; - this._delay(function() { - if(counter === this.counter) { - this.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove + this._delay( function() { + if ( counter === this.counter ) { + this.refreshPositions( !hardRefresh ); //Precompute after each DOM insertion, NOT on mousemove } - }); + } ); }, - _clear: function(event, noPropagation) { + _clear: function( event, noPropagation ) { this.reverting = false; + // We delay all events that have to be triggered to after the point where the placeholder has been removed and // everything else normalized again var i, @@ -1215,15 +1215,15 @@ return $.widget("ui.sortable", $.ui.mouse, { // We first have to update the dom position of the actual currentItem // Note: don't do it if the current item is already removed (by a user), or it gets reappended (see #4088) - if(!this._noFinalSort && this.currentItem.parent().length) { - this.placeholder.before(this.currentItem); + if ( !this._noFinalSort && this.currentItem.parent().length ) { + this.placeholder.before( this.currentItem ); } this._noFinalSort = null; - if(this.helper[0] === this.currentItem[0]) { - for(i in this._storedCSS) { - if(this._storedCSS[i] === "auto" || this._storedCSS[i] === "static") { - this._storedCSS[i] = ""; + if ( this.helper[ 0 ] === this.currentItem[ 0 ] ) { + for ( i in this._storedCSS ) { + if ( this._storedCSS[ i ] === "auto" || this._storedCSS[ i ] === "static" ) { + this._storedCSS[ i ] = ""; } } this.currentItem.css( this._storedCSS ); @@ -1232,37 +1232,36 @@ return $.widget("ui.sortable", $.ui.mouse, { this.currentItem.show(); } - if(this.fromOutside && !noPropagation) { - delayedTriggers.push(function(event) { this._trigger("receive", event, this._uiHash(this.fromOutside)); }); + if ( this.fromOutside && !noPropagation ) { + delayedTriggers.push( function( event ) { this._trigger( "receive", event, this._uiHash( this.fromOutside ) ); } ); } - if((this.fromOutside || this.domPosition.prev !== this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent !== this.currentItem.parent()[0]) && !noPropagation) { - delayedTriggers.push(function(event) { this._trigger("update", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed + if ( ( this.fromOutside || this.domPosition.prev !== this.currentItem.prev().not( ".ui-sortable-helper" )[ 0 ] || this.domPosition.parent !== this.currentItem.parent()[ 0 ] ) && !noPropagation ) { + delayedTriggers.push( function( event ) { this._trigger( "update", event, this._uiHash() ); } ); //Trigger update callback if the DOM position has changed } // Check if the items Container has Changed and trigger appropriate // events. - if (this !== this.currentContainer) { - if(!noPropagation) { - delayedTriggers.push(function(event) { this._trigger("remove", event, this._uiHash()); }); - delayedTriggers.push((function(c) { return function(event) { c._trigger("receive", event, this._uiHash(this)); }; }).call(this, this.currentContainer)); - delayedTriggers.push((function(c) { return function(event) { c._trigger("update", event, this._uiHash(this)); }; }).call(this, this.currentContainer)); + if ( this !== this.currentContainer ) { + if ( !noPropagation ) { + delayedTriggers.push( function( event ) { this._trigger( "remove", event, this._uiHash() ); } ); + delayedTriggers.push( ( function( c ) { return function( event ) { c._trigger( "receive", event, this._uiHash( this ) ); }; } ).call( this, this.currentContainer ) ); + delayedTriggers.push( ( function( c ) { return function( event ) { c._trigger( "update", event, this._uiHash( this ) ); }; } ).call( this, this.currentContainer ) ); } } - //Post events to containers function delayEvent( type, instance, container ) { return function( event ) { container._trigger( type, event, instance._uiHash( instance ) ); }; } - for (i = this.containers.length - 1; i >= 0; i--){ - if (!noPropagation) { + for ( i = this.containers.length - 1; i >= 0; i-- ) { + if ( !noPropagation ) { delayedTriggers.push( delayEvent( "deactivate", this, this.containers[ i ] ) ); } - if(this.containers[i].containerCache.over) { + if ( this.containers[ i ].containerCache.over ) { delayedTriggers.push( delayEvent( "out", this, this.containers[ i ] ) ); - this.containers[i].containerCache.over = 0; + this.containers[ i ].containerCache.over = 0; } } @@ -1271,21 +1270,21 @@ return $.widget("ui.sortable", $.ui.mouse, { this.document.find( "body" ).css( "cursor", this.storedCursor ); this.storedStylesheet.remove(); } - if(this._storedOpacity) { - this.helper.css("opacity", this._storedOpacity); + if ( this._storedOpacity ) { + this.helper.css( "opacity", this._storedOpacity ); } - if(this._storedZIndex) { - this.helper.css("zIndex", this._storedZIndex === "auto" ? "" : this._storedZIndex); + if ( this._storedZIndex ) { + this.helper.css( "zIndex", this._storedZIndex === "auto" ? "" : this._storedZIndex ); } this.dragging = false; - if(!noPropagation) { - this._trigger("beforeStop", event, this._uiHash()); + if ( !noPropagation ) { + this._trigger( "beforeStop", event, this._uiHash() ); } //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node! - this.placeholder[0].parentNode.removeChild(this.placeholder[0]); + this.placeholder[ 0 ].parentNode.removeChild( this.placeholder[ 0 ] ); if ( !this.cancelHelperRemoval ) { if ( this.helper[ 0 ] !== this.currentItem[ 0 ] ) { @@ -1294,11 +1293,11 @@ return $.widget("ui.sortable", $.ui.mouse, { this.helper = null; } - if(!noPropagation) { - for (i=0; i < delayedTriggers.length; i++) { - delayedTriggers[i].call(this, event); + if ( !noPropagation ) { + for ( i = 0; i < delayedTriggers.length; i++ ) { + delayedTriggers[ i ].call( this, event ); } //Trigger all delayed events - this._trigger("stop", event, this._uiHash()); + this._trigger( "stop", event, this._uiHash() ); } this.fromOutside = false; @@ -1307,16 +1306,16 @@ return $.widget("ui.sortable", $.ui.mouse, { }, _trigger: function() { - if ($.Widget.prototype._trigger.apply(this, arguments) === false) { + if ( $.Widget.prototype._trigger.apply( this, arguments ) === false ) { this.cancel(); } }, - _uiHash: function(_inst) { + _uiHash: function( _inst ) { var inst = _inst || this; return { helper: inst.helper, - placeholder: inst.placeholder || $([]), + placeholder: inst.placeholder || $( [] ), position: inst.position, originalPosition: inst.originalPosition, offset: inst.positionAbs, @@ -1325,6 +1324,6 @@ return $.widget("ui.sortable", $.ui.mouse, { }; } -}); +} ); -})); +} ) ); From 369effd8cce14dcc43f4672706805e90f596b8cc Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:58:09 -0400 Subject: [PATCH 06/27] Slider: Style updates Ref #14246 --- tests/unit/slider/common.js | 2 +- tests/unit/slider/core.js | 82 ++++++++++++++-------------- tests/unit/slider/events.js | 78 +++++++++++++-------------- tests/unit/slider/methods.js | 46 ++++++++-------- tests/unit/slider/options.js | 100 +++++++++++++++++------------------ ui/widgets/slider.js | 58 ++++++++++---------- 6 files changed, 185 insertions(+), 181 deletions(-) diff --git a/tests/unit/slider/common.js b/tests/unit/slider/common.js index 5cc3e66c596..df53cda4ff3 100644 --- a/tests/unit/slider/common.js +++ b/tests/unit/slider/common.js @@ -30,6 +30,6 @@ common.testWidget( "slider", { start: null, stop: null } -}); +} ); } ); diff --git a/tests/unit/slider/core.js b/tests/unit/slider/core.js index 7fdb8c68c93..109c9e01ad2 100644 --- a/tests/unit/slider/core.js +++ b/tests/unit/slider/core.js @@ -14,7 +14,7 @@ module( "slider: core" ); test( "markup structure", function( assert ) { expect( 4 ); - var element = $( "
    " ).slider({ range: true }), + var element = $( "
    " ).slider( { range: true } ), handle = element.find( "span" ), range = element.find( "div" ); @@ -22,7 +22,7 @@ test( "markup structure", function( assert ) { assert.hasClasses( range, "ui-slider-range ui-widget-header" ); assert.hasClasses( handle[ 0 ], "ui-slider-handle" ); assert.hasClasses( handle[ 1 ], "ui-slider-handle" ); -}); +} ); test( "keydown HOME on handle sets value to min", function() { expect( 2 ); @@ -38,7 +38,7 @@ test( "keydown HOME on handle sets value to min", function() { element.slider( "value", 0 ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); - equal(element.slider( "value" ), options.min ); + equal( element.slider( "value" ), options.min ); element.slider( "destroy" ); @@ -54,10 +54,10 @@ test( "keydown HOME on handle sets value to min", function() { element.slider( "value", 0 ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.HOME } ); - equal(element.slider( "value" ), options.min) ; + equal( element.slider( "value" ), options.min ) ; element.slider( "destroy" ); -}); +} ); test( "keydown END on handle sets value to max", function() { expect( 2 ); @@ -73,7 +73,7 @@ test( "keydown END on handle sets value to max", function() { element.slider( "value", 0 ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.END } ); - equal(element.slider( "value" ), options.max) ; + equal( element.slider( "value" ), options.max ) ; element.slider( "destroy" ); @@ -89,10 +89,10 @@ test( "keydown END on handle sets value to max", function() { element.slider( "value", 0 ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.END } ); - equal(element.slider( "value" ), options.max ); + equal( element.slider( "value" ), options.max ); element.slider( "destroy" ); -}); +} ); test( "keydown PAGE_UP on handle increases value by 1/5 range, not greater than max", function() { expect( 4 ); @@ -106,17 +106,17 @@ test( "keydown PAGE_UP on handle increases value by 1/5 range, not greater than }; element.slider( options ); - element.slider( "value", 70); + element.slider( "value", 70 ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal(element.slider( "value" ), 90); + equal( element.slider( "value" ), 90 ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_UP } ); - equal(element.slider( "value" ), 100); + equal( element.slider( "value" ), 100 ); element.slider( "destroy" ); - }); -}); + } ); +} ); test( "keydown PAGE_DOWN on handle decreases value by 1/5 range, not less than min", function() { expect( 4 ); @@ -130,17 +130,17 @@ test( "keydown PAGE_DOWN on handle decreases value by 1/5 range, not less than m }; element.slider( options ); - element.slider( "value", 30); + element.slider( "value", 30 ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal(element.slider( "value" ), 10); + equal( element.slider( "value" ), 10 ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.PAGE_DOWN } ); - equal(element.slider( "value" ), 0 ); + equal( element.slider( "value" ), 0 ); element.slider( "destroy" ); - }); -}); + } ); +} ); test( "keydown UP on handle increases value by step, not greater than max", function() { expect( 4 ); @@ -151,15 +151,15 @@ test( "keydown UP on handle increases value by step, not greater than max", func orientation: "horizontal", step: 1 }; - element.slider(options); + element.slider( options ); element.slider( "value", options.max - options.step ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - equal(element.slider( "value" ), options.max ); + equal( element.slider( "value" ), options.max ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - equal(element.slider( "value" ), options.max ); + equal( element.slider( "value" ), options.max ); element.slider( "destroy" ); @@ -175,13 +175,13 @@ test( "keydown UP on handle increases value by step, not greater than max", func element.slider( "value", options.max - options.step ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - equal(element.slider( "value" ), options.max ); + equal( element.slider( "value" ), options.max ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); - equal(element.slider( "value" ), options.max ); + equal( element.slider( "value" ), options.max ); element.slider( "destroy" ); -}); +} ); test( "keydown RIGHT on handle increases value by step, not greater than max", function() { expect( 4 ); @@ -192,15 +192,15 @@ test( "keydown RIGHT on handle increases value by step, not greater than max", f orientation: "horizontal", step: 1 }; - element.slider(options); + element.slider( options ); element.slider( "value", options.max - options.step ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - equal(element.slider( "value" ), options.max); + equal( element.slider( "value" ), options.max ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - equal(element.slider( "value" ), options.max ); + equal( element.slider( "value" ), options.max ); element.slider( "destroy" ); @@ -216,13 +216,13 @@ test( "keydown RIGHT on handle increases value by step, not greater than max", f element.slider( "value", options.max - options.step ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - equal(element.slider( "value" ), options.max ); + equal( element.slider( "value" ), options.max ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - equal(element.slider( "value" ), options.max ); + equal( element.slider( "value" ), options.max ); element.slider( "destroy" ); -}); +} ); test( "keydown DOWN on handle decreases value by step, not less than min", function() { expect( 4 ); @@ -238,10 +238,10 @@ test( "keydown DOWN on handle decreases value by step, not less than min", funct element.slider( "value", options.min + options.step ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal(element.slider( "value" ), options.min); + equal( element.slider( "value" ), options.min ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal(element.slider( "value" ), options.min ); + equal( element.slider( "value" ), options.min ); element.slider( "destroy" ); @@ -257,13 +257,13 @@ test( "keydown DOWN on handle decreases value by step, not less than min", funct element.slider( "value", options.min + options.step ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal(element.slider( "value" ), options.min); + equal( element.slider( "value" ), options.min ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal(element.slider( "value" ), options.min ); + equal( element.slider( "value" ), options.min ); element.slider( "destroy" ); -}); +} ); test( "keydown LEFT on handle decreases value by step, not less than min", function() { expect( 4 ); @@ -274,15 +274,15 @@ test( "keydown LEFT on handle decreases value by step, not less than min", funct orientation: "horizontal", step: 1 }; - element.slider(options); + element.slider( options ); element.slider( "value", options.min + options.step ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal(element.slider( "value" ), options.min ); + equal( element.slider( "value" ), options.min ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal(element.slider( "value" ), options.min ); + equal( element.slider( "value" ), options.min ); element.slider( "destroy" ); @@ -298,12 +298,12 @@ test( "keydown LEFT on handle decreases value by step, not less than min", funct element.slider( "value", options.min + options.step ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal(element.slider( "value" ), options.min ); + equal( element.slider( "value" ), options.min ); handle().simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ); - equal(element.slider( "value" ), options.min ); + equal( element.slider( "value" ), options.min ); element.slider( "destroy" ); -}); +} ); } ); diff --git a/tests/unit/slider/events.js b/tests/unit/slider/events.js index 0256a209369..2cf67b5fe17 100644 --- a/tests/unit/slider/events.js +++ b/tests/unit/slider/events.js @@ -13,11 +13,11 @@ test( "mouse based interaction", function() { expect( 4 ); var element = $( "#slider1" ) - .slider({ + .slider( { start: function( event ) { equal( event.originalEvent.type, "mousedown", "start triggered by mousedown" ); }, - slide: function( event) { + slide: function( event ) { equal( event.originalEvent.type, "mousemove", "slider triggered by mousemove" ); }, stop: function( event ) { @@ -26,18 +26,18 @@ test( "mouse based interaction", function() { change: function( event ) { equal( event.originalEvent.type, "mouseup", "change triggered by mouseup" ); } - }); + } ); element.find( ".ui-slider-handle" ).eq( 0 ) .simulate( "drag", { dx: 10, dy: 10 } ); -}); +} ); test( "keyboard based interaction", function() { expect( 3 ); // Test keyup at end of handle slide (keyboard) var element = $( "#slider1" ) - .slider({ + .slider( { start: function( event ) { equal( event.originalEvent.type, "keydown", "start triggered by keydown" ); }, @@ -50,113 +50,113 @@ test( "keyboard based interaction", function() { change: function( event ) { equal( event.originalEvent.type, "keyup", "change triggered by keyup" ); } - }); + } ); element.find( ".ui-slider-handle" ).eq( 0 ) .simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } ) .simulate( "keypress", { keyCode: $.ui.keyCode.LEFT } ) .simulate( "keyup", { keyCode: $.ui.keyCode.LEFT } ); -}); +} ); test( "programmatic event triggers", function() { expect( 6 ); // Test value method var element = $( "
    " ) - .slider({ + .slider( { change: function() { ok( true, "change triggered by value method" ); } - }) + } ) .slider( "value", 0 ); // Test values method element = $( "
    " ) - .slider({ + .slider( { values: [ 10, 20 ], change: function() { ok( true, "change triggered by values method" ); } - }) + } ) .slider( "values", [ 80, 90 ] ); // Test value option element = $( "
    " ) - .slider({ + .slider( { change: function() { ok( true, "change triggered by value option" ); } - }) + } ) .slider( "option", "value", 0 ); // Test values option element = $( "
    " ) - .slider({ + .slider( { values: [ 10, 20 ], change: function() { ok( true, "change triggered by values option" ); } - }) + } ) .slider( "option", "values", [ 80, 90 ] ); -}); +} ); test( "mouse based interaction part two: when handles overlap", function() { expect( 6 ); var element = $( "#slider1" ) - .slider({ + .slider( { values: [ 0, 0, 0 ], start: function( event, ui ) { equal( handles.index( ui.handle ), 2, "rightmost handle activated when overlapping at minimum (#3736)" ); } - }), + } ), handles = element.find( ".ui-slider-handle" ); handles.eq( 0 ).simulate( "drag", { dx: 10 } ); element.slider( "destroy" ); element = $( "#slider1" ) - .slider({ + .slider( { values: [ 10, 10, 10 ], max: 10, start: function( event, ui ) { equal( handles.index( ui.handle ), 0, "leftmost handle activated when overlapping at maximum" ); } - }), + } ), handles = element.find( ".ui-slider-handle" ); handles.eq( 0 ).simulate( "drag", { dx: -10 } ); element.slider( "destroy" ); element = $( "#slider1" ) - .slider({ + .slider( { values: [ 19, 20 ] - }), + } ), handles = element.find( ".ui-slider-handle" ); handles.eq( 0 ).simulate( "drag", { dx: 10 } ); element.one( "slidestart", function( event, ui ) { equal( handles.index( ui.handle ), 0, "left handle activated if left was moved last" ); - }); + } ); handles.eq( 0 ).simulate( "drag", { dx: 10 } ); element.slider( "destroy" ); element = $( "#slider1" ) - .slider({ + .slider( { values: [ 19, 20 ] - }), + } ), handles = element.find( ".ui-slider-handle" ); handles.eq( 1 ).simulate( "drag", { dx: -10 } ); element.one( "slidestart", function( event, ui ) { equal( handles.index( ui.handle ), 1, "right handle activated if right was moved last (#3467)" ); - }); + } ); handles.eq( 0 ).simulate( "drag", { dx: 10 } ); element = $( "#slider1" ) - .slider({ + .slider( { range: true, min: 0, max: 100, values: [ 0, 50 ] - }), + } ), handles = element.find( ".ui-slider-handle" ); element.slider( "option", { values: [ 100, 100 ] } ); @@ -166,7 +166,7 @@ test( "mouse based interaction part two: when handles overlap", function() { element.slider( "option", { values: [ 0, 0 ] } ); handles.eq( 1 ).simulate( "drag", { dx: 10 } ); equal( element.slider( "values" )[ 1 ], 1, "setting both values of range slider to the minimum doesn't lock slider" ); -}); +} ); test( "event data", function() { expect( 6 ); @@ -175,7 +175,7 @@ test( "event data", function() { values = [ 8, 9, 7, 4 ], newValues = [ 8, 9, 7, 5 ], element = $( "#slider1" ) - .slider({ + .slider( { values: values, start: function( event, ui ) { deepEqual( ui, expectedUiHash, "passing ui to start event" ); @@ -189,7 +189,7 @@ test( "event data", function() { change: function( event, ui ) { deepEqual( ui, expectedChangedUiHash, "passing ui to change event" ); } - }), + } ), handles = element.find( ".ui-slider-handle" ), expectedUiHash = { handle: handles.eq( slideHandleIndex )[ 0 ], @@ -200,33 +200,33 @@ test( "event data", function() { expectedChangedUiHash = $.extend( {}, expectedUiHash, { values: newValues, value: newValues[ slideHandleIndex ] - }); + } ); handles.eq( slideHandleIndex ).simulate( "drag", { dx: 10 } ); element.slider( "destroy" ); - element = $( "#slider1" ).slider({ + element = $( "#slider1" ).slider( { min: 0, max: 100, value: 1, - slide: function ( event, ui ) { + slide: function( event, ui ) { equal( ui.value, 0, "should pass 0 value if slider reaches it" ); } - }); + } ); handles = element.find( ".ui-slider-handle" ); handles.eq( 0 ).simulate( "drag", { dx: -10 } ); element.slider( "destroy" ); - element = $( "#slider1" ).slider({ + element = $( "#slider1" ).slider( { min: 0, max: 100, values: [ 1, 2 ], - slide: function ( event, ui ) { + slide: function( event, ui ) { equal( ui.value, 0, "should pass 0 value if one of handles reaches it" ); } - }); + } ); handles = element.find( ".ui-slider-handle" ); handles.eq( 0 ).simulate( "drag", { dx: -10 } ); -}); +} ); } ); diff --git a/tests/unit/slider/methods.js b/tests/unit/slider/methods.js index a4187bd7ffb..15b2e8726f9 100644 --- a/tests/unit/slider/methods.js +++ b/tests/unit/slider/methods.js @@ -6,7 +6,7 @@ define( [ module( "slider: methods" ); test( "init", function() { - expect(5); + expect( 5 ); $( "
    " ).appendTo( "body" ).slider().remove(); ok( true, ".slider() called on element" ); @@ -24,65 +24,67 @@ test( "init", function() { $( "
    " ).slider().slider( "option", "foo", "bar" ).remove(); ok( true, "arbitrary option setter after init" ); -}); +} ); test( "destroy", function( assert ) { expect( 1 ); assert.domEqual( "#slider1", function() { $( "#slider1" ).slider().slider( "destroy" ); - }); -}); + } ); +} ); test( "enable", function( assert ) { expect( 3 ); var element, expected = $( "
    " ).slider(), actual = expected.slider( "enable" ); - equal(actual, expected, "enable is chainable" ); + equal( actual, expected, "enable is chainable" ); - element = $( "
    " ).slider({ disabled: true }); + element = $( "
    " ).slider( { disabled: true } ); assert.hasClasses( element, "ui-state-disabled ui-slider-disabled" ); element.slider( "enable" ); assert.lacksClasses( element, "ui-state-disabled ui-slider-disabled" ); -}); +} ); test( "disable", function( assert ) { expect( 4 ); var element, expected = $( "
    " ).slider(), actual = expected.slider( "disable" ); - equal(actual, expected, "disable is chainable" ); + equal( actual, expected, "disable is chainable" ); - element = $( "
    " ).slider({ disabled: false }); + element = $( "
    " ).slider( { disabled: false } ); assert.lacksClasses( element, "ui-state-disabled ui-slider-disabled" ); element.slider( "disable" ); assert.hasClasses( element, "ui-state-disabled ui-slider-disabled" ); ok( !element.attr( "aria-disabled" ), "slider does not have aria-disabled attr after disable method call" ); -}); +} ); test( "value", function() { expect( 19 ); - $( [ false, "min", "max" ] ).each(function() { - var element = $( "
    " ).slider({ + $( [ false, "min", "max" ] ).each( function() { + var element = $( "
    " ).slider( { range: this, value: 5 - }); + } ); equal( element.slider( "value" ), 5, "range: " + this + " slider method get" ); - equal( element.slider( "value", 10), element, "value method is chainable" ); + equal( element.slider( "value", 10 ), element, "value method is chainable" ); equal( element.slider( "value" ), 10, "range: " + this + " slider method set" ); element.remove(); - }); - var element = $( "
    " ).slider({ + } ); + var element = $( "
    " ).slider( { min: -1, value: 0, max: 1 - }); + } ); + // min with value option vs value method element.slider( "option", "value", -2 ); equal( element.slider( "option", "value" ), -2, "value option does not respect min" ); equal( element.slider( "value" ), -1, "value method get respects min" ); equal( element.slider( "value", -2 ), element, "value method is chainable" ); equal( element.slider( "option", "value" ), -1, "value method set respects min" ); + // max with value option vs value method - element.slider( "option", "value", 2); + element.slider( "option", "value", 2 ); equal( element.slider( "option", "value" ), 2, "value option does not respect max" ); equal( element.slider( "value" ), 1, "value method get respects max" ); equal( element.slider( "value", 2 ), element, "value method is chainable" ); @@ -94,20 +96,20 @@ test( "value", function() { value: 2, max: 2.4, step: 0.01 - }); + } ); element.slider( "option", "value", 2.4 ); equal( element.slider( "value" ), 2.4, "value is set to max with 0.01 step" ); - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { value: 100, min: 10, max: 500, step: 50 - }); + } ); element.slider( "option", "value", 510 ); equal( element.slider( "value" ), 460, "value is restricted to maximum valid step" ); -}); +} ); //test( "values", function() { // ok(false, "missing test - untested code is broken code." ); diff --git a/tests/unit/slider/options.js b/tests/unit/slider/options.js index f6b61a2b362..031031cdc81 100644 --- a/tests/unit/slider/options.js +++ b/tests/unit/slider/options.js @@ -11,18 +11,18 @@ function handle() { module( "slider: options" ); -test( "disabled", function( assert ){ +test( "disabled", function( assert ) { expect( 8 ); var count = 0; element = $( "#slider1" ).slider(); element.on( "slidestart", function() { count++; - }); + } ); // Enabled assert.lacksClasses( element, "ui-slider-disabled" ); - equal( element.slider( "option", "disabled" ), false , "is not disabled" ); + equal( element.slider( "option", "disabled" ), false, "is not disabled" ); handle().simulate( "drag", { dx: 10 } ); equal( count, 1, "slider moved" ); @@ -40,7 +40,7 @@ test( "disabled", function( assert ){ handle().simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); equal( count, 2, "slider did not move" ); -}); +} ); test( "max", function() { expect( 5 ); @@ -87,7 +87,7 @@ test( "max", function() { ok( element.slider( "value" ) === options.max, "value method will max, step is changed and step is float" ); element.slider( "destroy" ); -}); +} ); test( "min", function() { expect( 2 ); @@ -106,7 +106,7 @@ test( "min", function() { ok( element.slider( "value" ) === options.min, "value method is contained by min" ); element.slider( "destroy" ); -}); +} ); test( "orientation", function( assert ) { expect( 14 ); @@ -126,7 +126,7 @@ test( "orientation", function( assert ) { assert.hasClasses( element, "ui-slider-horizontal" ); assert.lacksClasses( element, "ui-slider-vertical" ); equal( element.find( ".ui-slider-handle" )[ 0 ].style.bottom, "", "CSS bottom reset" ); - equal( handle()[0].style.left, percentVal + "%", "horizontal slider handle is positioned with left: %" ); + equal( handle()[ 0 ].style.left, percentVal + "%", "horizontal slider handle is positioned with left: %" ); element.slider( "destroy" ) ; @@ -143,17 +143,17 @@ test( "orientation", function( assert ) { assert.hasClasses( element, "ui-slider-vertical" ); assert.lacksClasses( element, "ui-slider-horizontal" ); equal( element.find( ".ui-slider-handle" )[ 0 ].style.left, "", "CSS left reset" ); - equal( handle()[0].style.bottom, percentVal + "%", "vertical slider handle is positioned with bottom: %" ); + equal( handle()[ 0 ].style.bottom, percentVal + "%", "vertical slider handle is positioned with bottom: %" ); element.slider( "destroy" ); newValue = 7; - rangeSize = 500 - (500 * newValue / 10); - element = $( "#slider2" ).slider({ + rangeSize = 500 - ( 500 * newValue / 10 ); + element = $( "#slider2" ).slider( { range: "max", min: 0, max: 10 - }); + } ); element.slider( "option", "value", newValue ); element.slider( "option", "orientation", "vertical" ); @@ -170,11 +170,11 @@ test( "orientation", function( assert ) { element.slider( "destroy" ); - element = $( "#slider2" ).slider({ + element = $( "#slider2" ).slider( { range: true, min: 0, max: 100 - }); + } ); element.slider( "option", { values: [ 60, 70 ] } ); notEqual( element.find( ".ui-slider-range " ).position().left, 0, "range should not pull over to the track's border" ); @@ -183,19 +183,19 @@ test( "orientation", function( assert ) { "range should pull over to the track's border" ); element.slider( "destroy" ); -}); +} ); //spec: http://wiki.jqueryui.com/Slider#specs // value option/method: the value option is not restricted by min/max/step. // What is returned by the value method is restricted by min (>=), max (<=), and step (even multiple) test( "step", function() { expect( 9 ); - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { min: 0, value: 0, step: 10, max: 100 - }); + } ); equal( element.slider( "value" ), 0 ); element.slider( "value", 1 ); @@ -210,12 +210,12 @@ test( "step", function() { element.slider( "value", 19 ); equal( element.slider( "value" ), 20 ); - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { min: 0, value: 0, step: 20, max: 100 - }); + } ); element.slider( "value", 0 ); element.slider( "option", "value", 1 ); @@ -231,7 +231,7 @@ test( "step", function() { equal( element.slider( "value" ), 20 ); element.slider( "destroy" ); -}); +} ); //test( "value", function() { // ok(false, "missing test - untested code is broken code." ); @@ -243,13 +243,13 @@ test( "values", function() { // Testing multiple ranges on the same page, the object reference to the values // property is preserved via multiple range elements, so updating options.values // of 1 slider updates options.values of all the others - var ranges = $([ + var ranges = $( [ document.createElement( "div" ), document.createElement( "div" ) - ]).slider({ + ] ).slider( { range: true, values: [ 25, 75 ] - }); + } ); notStrictEqual( ranges.eq( 0 ).slider( "instance" ).options.values, @@ -264,43 +264,43 @@ test( "values", function() { ranges.eq( 1 ).slider( "values", 0 ), "the values for multiple sliders should be different" ); -}); +} ); test( "range", function( assert ) { expect( 32 ); var range; // Min - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { range: "min", min: 1, max: 10, step: 1 - }); + } ); equal( element.find( ".ui-slider-handle" ).length, 1, "range min, one handle" ); equal( element.find( ".ui-slider-range-min" ).length, 1, "range min" ); element.slider( "destroy" ); // Max - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { range: "max", min: 1, max: 10, step: 1 - }); + } ); equal( element.find( ".ui-slider-handle" ).length, 1, "range max, one handle" ); equal( element.find( ".ui-slider-range-max" ).length, 1, "range max" ); element.slider( "destroy" ); // True - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { range: true, min: 1, max: 10, step: 1 - }); + } ); range = element.find( ".ui-slider-range" ); equal( element.find( ".ui-slider-handle" ).length, 2, "range true, two handles" ); @@ -308,12 +308,12 @@ test( "range", function( assert ) { element.slider( "destroy" ); // Change range from min to max - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { range: "min", min: 1, max: 10, step: 1 - }).slider( "option", "range", "max" ); + } ).slider( "option", "range", "max" ); equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from min to max, one handle" ); equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from min to max" ); @@ -321,12 +321,12 @@ test( "range", function( assert ) { element.slider( "destroy" ); // Change range from max to min - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { range: "max", min: 1, max: 10, step: 1 - }).slider( "option", "range", "min" ); + } ).slider( "option", "range", "min" ); equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from max to min, one handle" ); equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to min" ); @@ -334,53 +334,53 @@ test( "range", function( assert ) { element.slider( "destroy" ); // Change range from max to true - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { range: "max", min: 1, max: 10, step: 1 - }).slider( "option", "range", true ); + } ).slider( "option", "range", true ); equal( element.find( ".ui-slider-handle" ).length, 2, "range switch from max to true, two handles" ); equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from max to true" ); equal( element.find( ".ui-slider-range-min" ).length, 0, "range switch from max to true" ); - equal( element.slider( "option", "value" ), 0 , "option value" ); - equal( element.slider( "value" ), 1 , "value" ); - deepEqual( element.slider( "option", "values" ), [1, 1], "option values" ); - deepEqual( element.slider( "values" ), [1, 1], "values" ); + equal( element.slider( "option", "value" ), 0, "option value" ); + equal( element.slider( "value" ), 1, "value" ); + deepEqual( element.slider( "option", "values" ), [ 1, 1 ], "option values" ); + deepEqual( element.slider( "values" ), [ 1, 1 ], "values" ); element.slider( "destroy" ); // Change range from true to min - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { range: true, min: 1, max: 10, step: 1 - }).slider( "option", "range", "min" ); + } ).slider( "option", "range", "min" ); equal( element.find( ".ui-slider-handle" ).length, 1, "range switch from true to min, one handle" ); equal( element.find( ".ui-slider-range-max" ).length, 0, "range switch from true to min" ); equal( element.find( ".ui-slider-range-min" ).length, 1, "range switch from true to min" ); equal( element.slider( "option", "value" ), 1, "value" ); - equal( element.slider( "value" ), 1 , "value" ); + equal( element.slider( "value" ), 1, "value" ); equal( element.slider( "option", "values" ), null, "values" ); - deepEqual( element.slider( "values" ), [] , "values" ); + deepEqual( element.slider( "values" ), [], "values" ); element.slider( "destroy" ); // Change range from true to false - element = $( "
    " ).slider({ + element = $( "
    " ).slider( { range: true, min: 1, max: 10, step: 1 - }).slider( "option", "range", false ); + } ).slider( "option", "range", false ); equal( element.find( ".ui-slider-handle" ).length, 2, "range switch from true to false, both handles remain" ); equal( element.find( ".ui-slider-range" ).length, 0, "range switch from true to false" ); - equal( element.slider( "option", "value" ), 0 , "option value" ); - equal( element.slider( "value" ), 1 , "value" ); - deepEqual( element.slider( "option", "values" ), [1, 1], "option values" ); - deepEqual( element.slider( "values" ), [1, 1], "values" ); + equal( element.slider( "option", "value" ), 0, "option value" ); + equal( element.slider( "value" ), 1, "value" ); + deepEqual( element.slider( "option", "values" ), [ 1, 1 ], "option values" ); + deepEqual( element.slider( "values" ), [ 1, 1 ], "values" ); element.slider( "destroy" ); -}); +} ); } ); diff --git a/ui/widgets/slider.js b/ui/widgets/slider.js index 792fa4da2da..5c4f252d596 100644 --- a/ui/widgets/slider.js +++ b/ui/widgets/slider.js @@ -16,11 +16,11 @@ //>>css.structure: ../themes/base/slider.css //>>css.theme: ../themes/base/theme.css -(function( factory ) { +( function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. - define([ + define( [ "jquery", "./mouse", "../keycode", @@ -32,7 +32,7 @@ // Browser globals factory( jQuery ); } -}(function( $ ) { +}( function( $ ) { return $.widget( "ui.slider", $.ui.mouse, { version: "@VERSION", @@ -117,9 +117,9 @@ return $.widget( "ui.slider", $.ui.mouse, { this.handle = this.handles.eq( 0 ); - this.handles.each(function( i ) { + this.handles.each( function( i ) { $( this ).data( "ui-slider-handle-index", i ); - }); + } ); }, _createRange: function() { @@ -130,9 +130,9 @@ return $.widget( "ui.slider", $.ui.mouse, { if ( !options.values ) { options.values = [ this._valueMin(), this._valueMin() ]; } else if ( options.values.length && options.values.length !== 2 ) { - options.values = [ options.values[0], options.values[0] ]; + options.values = [ options.values[ 0 ], options.values[ 0 ] ]; } else if ( $.isArray( options.values ) ) { - options.values = options.values.slice(0); + options.values = options.values.slice( 0 ); } } @@ -145,10 +145,10 @@ return $.widget( "ui.slider", $.ui.mouse, { this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" ); // Handle range switching from true to min/max - this.range.css({ + this.range.css( { "left": "", "bottom": "" - }); + } ); } if ( options.range === "min" || options.range === "max" ) { this._addClass( this.range, "ui-slider-range-" + options.range ); @@ -195,16 +195,16 @@ return $.widget( "ui.slider", $.ui.mouse, { position = { x: event.pageX, y: event.pageY }; normValue = this._normValueFromMouse( position ); distance = this._valueMax() - this._valueMin() + 1; - this.handles.each(function( i ) { - var thisDistance = Math.abs( normValue - that.values(i) ); - if (( distance > thisDistance ) || + this.handles.each( function( i ) { + var thisDistance = Math.abs( normValue - that.values( i ) ); + if ( ( distance > thisDistance ) || ( distance === thisDistance && - (i === that._lastChangedValue || that.values(i) === o.min ))) { + ( i === that._lastChangedValue || that.values( i ) === o.min ) ) ) { distance = thisDistance; closestHandle = $( this ); index = i; } - }); + } ); allowed = this._start( event, index ); if ( allowed === false ) { @@ -223,9 +223,9 @@ return $.widget( "ui.slider", $.ui.mouse, { left: event.pageX - offset.left - ( closestHandle.width() / 2 ), top: event.pageY - offset.top - ( closestHandle.height() / 2 ) - - ( parseInt( closestHandle.css("borderTopWidth"), 10 ) || 0 ) - - ( parseInt( closestHandle.css("borderBottomWidth"), 10 ) || 0) + - ( parseInt( closestHandle.css("marginTop"), 10 ) || 0) + ( parseInt( closestHandle.css( "borderTopWidth" ), 10 ) || 0 ) - + ( parseInt( closestHandle.css( "borderBottomWidth" ), 10 ) || 0 ) + + ( parseInt( closestHandle.css( "marginTop" ), 10 ) || 0 ) }; if ( !this.handles.hasClass( "ui-state-hover" ) ) { @@ -361,6 +361,7 @@ return $.widget( "ui.slider", $.ui.mouse, { _change: function( event, index ) { if ( !this._keySliding && !this._mouseSliding ) { + //store the last changed value index for reference when handles overlap this._lastChangedValue = index; this._trigger( "change", event, this._uiHash( index ) ); @@ -503,10 +504,11 @@ return $.widget( "ui.slider", $.ui.mouse, { return val; } else if ( this._hasMultipleValues() ) { + // .slice() creates a copy of the array // this copy gets trimmed by min and max and then returned vals = this.options.values.slice(); - for ( i = 0; i < vals.length; i += 1) { + for ( i = 0; i < vals.length; i += 1 ) { vals[ i ] = this._trimAlignValue( vals[ i ] ); } @@ -525,16 +527,16 @@ return $.widget( "ui.slider", $.ui.mouse, { return this._valueMax(); } var step = ( this.options.step > 0 ) ? this.options.step : 1, - valModStep = (val - this._valueMin()) % step, + valModStep = ( val - this._valueMin() ) % step, alignValue = val - valModStep; - if ( Math.abs(valModStep) * 2 >= step ) { + if ( Math.abs( valModStep ) * 2 >= step ) { alignValue += ( valModStep > 0 ) ? step : ( -step ); } // Since JavaScript has problems with large floats, round // the final value to 5 digits after the decimal point (see #4124) - return parseFloat( alignValue.toFixed(5) ); + return parseFloat( alignValue.toFixed( 5 ) ); }, _calculateNewMax: function() { @@ -568,7 +570,7 @@ return $.widget( "ui.slider", $.ui.mouse, { return this.max; }, - _refreshRange: function ( orientation ) { + _refreshRange: function( orientation ) { if ( orientation === "vertical" ) { this.range.css( { "width": "", "left": "" } ); } @@ -586,8 +588,8 @@ return $.widget( "ui.slider", $.ui.mouse, { _set = {}; if ( this._hasMultipleValues() ) { - this.handles.each(function( i ) { - valPercent = ( that.values(i) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100; + this.handles.each( function( i ) { + valPercent = ( that.values( i ) - that._valueMin() ) / ( that._valueMax() - that._valueMin() ) * 100; _set[ that.orientation === "horizontal" ? "left" : "bottom" ] = valPercent + "%"; $( this ).stop( 1, 1 )[ animate ? "animate" : "css" ]( _set, o.animate ); if ( that.options.range === true ) { @@ -608,7 +610,7 @@ return $.widget( "ui.slider", $.ui.mouse, { } } lastValPercent = valPercent; - }); + } ); } else { value = this.value(); valueMin = this._valueMin(); @@ -681,7 +683,7 @@ return $.widget( "ui.slider", $.ui.mouse, { break; case $.ui.keyCode.PAGE_DOWN: newVal = this._trimAlignValue( - curVal - ( (this._valueMax() - this._valueMin()) / this.numPages ) ); + curVal - ( ( this._valueMax() - this._valueMin() ) / this.numPages ) ); break; case $.ui.keyCode.UP: case $.ui.keyCode.RIGHT: @@ -712,6 +714,6 @@ return $.widget( "ui.slider", $.ui.mouse, { } } } -}); +} ); -})); +} ) ); From 03717b3a315fc774c751afb594f28a2f478dda6b Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:58:20 -0400 Subject: [PATCH 07/27] Selectable: Style updates Ref #14246 --- tests/unit/selectable/common.js | 2 +- tests/unit/selectable/events.js | 30 +++--- tests/unit/selectable/methods.js | 90 ++++++++-------- tests/unit/selectable/options.js | 54 +++++----- ui/widgets/selectable.js | 174 ++++++++++++++++--------------- 5 files changed, 179 insertions(+), 171 deletions(-) diff --git a/tests/unit/selectable/common.js b/tests/unit/selectable/common.js index 460ea0602a0..70b94bbb99e 100644 --- a/tests/unit/selectable/common.js +++ b/tests/unit/selectable/common.js @@ -24,6 +24,6 @@ common.testWidget( "selectable", { unselected: null, unselecting: null } -}); +} ); } ); diff --git a/tests/unit/selectable/events.js b/tests/unit/selectable/events.js index 5d4e48996f1..0e2e1384d1b 100644 --- a/tests/unit/selectable/events.js +++ b/tests/unit/selectable/events.js @@ -4,37 +4,37 @@ define( [ "ui/widgets/selectable" ], function( $, testHelpers ) { -module("selectable: events"); +module( "selectable: events" ); test( "start", function() { expect( 2 ); - var el = $("#selectable1"); - el.selectable({ + var el = $( "#selectable1" ); + el.selectable( { start: function() { ok( true, "drag fired start callback" ); - equal( this, el[0], "context of callback" ); + equal( this, el[ 0 ], "context of callback" ); } - }); + } ); el.simulate( "drag", { dx: 20, dy: 20 - }); -}); + } ); +} ); test( "stop", function() { expect( 2 ); - var el = $("#selectable1"); - el.selectable({ + var el = $( "#selectable1" ); + el.selectable( { start: function() { ok( true, "drag fired stop callback" ); - equal( this, el[0], "context of callback" ); + equal( this, el[ 0 ], "context of callback" ); } - }); + } ); el.simulate( "drag", { dx: 20, dy: 20 - }); -}); + } ); +} ); test( "mousedown: initial position of helper", function() { expect( 2 ); @@ -48,7 +48,7 @@ test( "mousedown: initial position of helper", function() { element.simulate( "mousedown", { clientX: 10, clientY: 10 - }); + } ); helperOffset = $( ".ui-selectable-helper" ).offset(); ok( helperOffset.top, 110, "Scroll top should be accounted for." ); @@ -58,6 +58,6 @@ test( "mousedown: initial position of helper", function() { element.simulate( "mouseup" ); contentToForceScroll.remove(); $( window ).scrollTop( 0 ).scrollLeft( 0 ); -}); +} ); } ); diff --git a/tests/unit/selectable/methods.js b/tests/unit/selectable/methods.js index ee60e4ebfb0..30160e975e6 100644 --- a/tests/unit/selectable/methods.js +++ b/tests/unit/selectable/methods.js @@ -3,73 +3,73 @@ define( [ "ui/widgets/selectable" ], function( $ ) { -module("selectable: methods"); +module( "selectable: methods" ); -test("init", function() { +test( "init", function() { expect( 5 ); - $("
    ").appendTo("body").selectable().remove(); - ok(true, ".selectable() called on element"); + $( "
    " ).appendTo( "body" ).selectable().remove(); + ok( true, ".selectable() called on element" ); - $([]).selectable().remove(); - ok(true, ".selectable() called on empty collection"); + $( [] ).selectable().remove(); + ok( true, ".selectable() called on empty collection" ); - $("
    ").selectable().remove(); - ok(true, ".selectable() called on disconnected DOMElement"); + $( "
    " ).selectable().remove(); + ok( true, ".selectable() called on disconnected DOMElement" ); - var el = $("
    ").selectable(); - el.selectable("option", "foo"); + var el = $( "
    " ).selectable(); + el.selectable( "option", "foo" ); el.remove(); - ok(true, "arbitrary option getter after init"); + ok( true, "arbitrary option getter after init" ); - $("
    ").selectable().selectable("option", "foo", "bar").remove(); - ok(true, "arbitrary option setter after init"); -}); + $( "
    " ).selectable().selectable( "option", "foo", "bar" ).remove(); + ok( true, "arbitrary option setter after init" ); +} ); -test("destroy", function() { +test( "destroy", function() { expect( 4 ); - $("
    ").appendTo("body").selectable().selectable("destroy").remove(); - ok(true, ".selectable('destroy') called on element"); + $( "
    " ).appendTo( "body" ).selectable().selectable( "destroy" ).remove(); + ok( true, ".selectable('destroy') called on element" ); - $([]).selectable().selectable("destroy").remove(); - ok(true, ".selectable('destroy') called on empty collection"); + $( [] ).selectable().selectable( "destroy" ).remove(); + ok( true, ".selectable('destroy') called on empty collection" ); - $("
    ").selectable().selectable("destroy").remove(); - ok(true, ".selectable('destroy') called on disconnected DOMElement"); + $( "
    " ).selectable().selectable( "destroy" ).remove(); + ok( true, ".selectable('destroy') called on disconnected DOMElement" ); - var expected = $("
    ").selectable(), - actual = expected.selectable("destroy"); - equal(actual, expected, "destroy is chainable"); -}); + var expected = $( "
    " ).selectable(), + actual = expected.selectable( "destroy" ); + equal( actual, expected, "destroy is chainable" ); +} ); -test("enable", function() { - expect(3); +test( "enable", function() { + expect( 3 ); var expected, actual, fired = false, - el = $("#selectable1"); + el = $( "#selectable1" ); - el.selectable({ + el.selectable( { disabled: true, start: function() { fired = true; } - }); + } ); el.simulate( "drag", { dx: 20, dy: 20 - }); - equal(fired, false, "start fired"); - el.selectable("enable"); + } ); + equal( fired, false, "start fired" ); + el.selectable( "enable" ); el.simulate( "drag", { dx: 20, dy: 20 - }); - equal(fired, true, "start fired"); - el.selectable("destroy"); + } ); + equal( fired, true, "start fired" ); + el.selectable( "destroy" ); - expected = $("
    ").selectable(); - actual = expected.selectable("enable"); - equal(actual, expected, "enable is chainable"); -}); + expected = $( "
    " ).selectable(); + actual = expected.selectable( "enable" ); + equal( actual, expected, "enable is chainable" ); +} ); test( "disable", function( assert ) { expect( 6 ); @@ -77,16 +77,16 @@ test( "disable", function( assert ) { fired = false, element = $( "#selectable1" ); - element.selectable({ + element.selectable( { disabled: false, start: function() { fired = true; } - }); + } ); element.simulate( "drag", { dx: 20, dy: 20 - }); + } ); equal( fired, true, "start fired" ); chainable = element.selectable( "disable" ); @@ -95,7 +95,7 @@ test( "disable", function( assert ) { element.simulate( "drag", { dx: 20, dy: 20 - }); + } ); equal( fired, false, "start fired" ); assert.lacksClasses( element.selectable( "widget" ), "ui-state-disabled" ); @@ -106,6 +106,6 @@ test( "disable", function( assert ) { element.selectable( "destroy" ); equal( chainable, element, "disable is chainable" ); -}); +} ); } ); diff --git a/tests/unit/selectable/options.js b/tests/unit/selectable/options.js index 6bb898d261e..df2f54f3e83 100644 --- a/tests/unit/selectable/options.js +++ b/tests/unit/selectable/options.js @@ -3,62 +3,62 @@ define( [ "ui/widgets/selectable" ], function( $ ) { -module("selectable: options"); +module( "selectable: options" ); -test("autoRefresh", function() { - expect(3); +test( "autoRefresh", function() { + expect( 3 ); var actual = 0, - el = $("#selectable1"), - sel = $("*", el), + el = $( "#selectable1" ), + sel = $( "*", el ), selected = function() { actual += 1; }; - el = $("#selectable1").selectable({ autoRefresh: false, selected: selected }); + el = $( "#selectable1" ).selectable( { autoRefresh: false, selected: selected } ); sel.hide(); el.simulate( "drag", { dx: 1000, dy: 1000 - }); - equal(actual, sel.length); - el.selectable("destroy"); + } ); + equal( actual, sel.length ); + el.selectable( "destroy" ); actual = 0; sel.show(); - el = $("#selectable1").selectable({ autoRefresh: true, selected: selected }); + el = $( "#selectable1" ).selectable( { autoRefresh: true, selected: selected } ); sel.hide(); el.simulate( "drag", { dx: 1000, dy: 1000 - }); - equal(actual, 0); + } ); + equal( actual, 0 ); sel.show(); $( sel[ 0 ] ).simulate( "drag", { dx: 1000, dy: 1000 - }); - equal(actual, sel.length); + } ); + equal( actual, sel.length ); - el.selectable("destroy"); + el.selectable( "destroy" ); sel.show(); -}); +} ); -test("filter", function() { - expect(2); +test( "filter", function() { + expect( 2 ); - var actual =0, - el = $("#selectable1"), - sel = $("*", el), + var actual = 0, + el = $( "#selectable1" ), + sel = $( "*", el ), selected = function() { actual += 1; }; - el = $("#selectable1").selectable({ filter: ".special", selected: selected }); + el = $( "#selectable1" ).selectable( { filter: ".special", selected: selected } ); el.simulate( "drag", { dx: 1000, dy: 1000 - }); - ok(sel.length !== 1, "this test assumes more than 1 selectee"); - equal(actual, 1); - el.selectable("destroy"); -}); + } ); + ok( sel.length !== 1, "this test assumes more than 1 selectee" ); + equal( actual, 1 ); + el.selectable( "destroy" ); +} ); } ); diff --git a/ui/widgets/selectable.js b/ui/widgets/selectable.js index 0dadac9627d..152729d7cf9 100644 --- a/ui/widgets/selectable.js +++ b/ui/widgets/selectable.js @@ -14,11 +14,11 @@ //>>demos: http://jqueryui.com/selectable/ //>>css.structure: ../themes/base/selectable.css -(function( factory ) { +( function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. - define([ + define( [ "jquery", "./mouse", "../version", @@ -29,9 +29,9 @@ // Browser globals factory( jQuery ); } -}(function( $ ) { +}( function( $ ) { -return $.widget("ui.selectable", $.ui.mouse, { +return $.widget( "ui.selectable", $.ui.mouse, { version: "@VERSION", options: { appendTo: "body", @@ -57,12 +57,12 @@ return $.widget("ui.selectable", $.ui.mouse, { // Cache selectee children based on filter this.refresh = function() { - that.selectees = $(that.options.filter, that.element[0]); + that.selectees = $( that.options.filter, that.element[ 0 ] ); that._addClass( that.selectees, "ui-selectee" ); - that.selectees.each(function() { - var $this = $(this), + that.selectees.each( function() { + var $this = $( this ), pos = $this.offset(); - $.data(this, "selectable-item", { + $.data( this, "selectable-item", { element: this, $element: $this, left: pos.left, @@ -70,150 +70,156 @@ return $.widget("ui.selectable", $.ui.mouse, { right: pos.left + $this.outerWidth(), bottom: pos.top + $this.outerHeight(), startselected: false, - selected: $this.hasClass("ui-selected"), - selecting: $this.hasClass("ui-selecting"), - unselecting: $this.hasClass("ui-unselecting") - }); - }); + selected: $this.hasClass( "ui-selected" ), + selecting: $this.hasClass( "ui-selecting" ), + unselecting: $this.hasClass( "ui-unselecting" ) + } ); + } ); }; this.refresh(); this._mouseInit(); - this.helper = $("
    "); + this.helper = $( "
    " ); this._addClass( this.helper, "ui-selectable-helper" ); }, _destroy: function() { - this.selectees.removeData("selectable-item"); + this.selectees.removeData( "selectable-item" ); this._mouseDestroy(); }, - _mouseStart: function(event) { + _mouseStart: function( event ) { var that = this, options = this.options; this.opos = [ event.pageX, event.pageY ]; - if (this.options.disabled) { + if ( this.options.disabled ) { return; } - this.selectees = $(options.filter, this.element[0]); + this.selectees = $( options.filter, this.element[ 0 ] ); - this._trigger("start", event); + this._trigger( "start", event ); + + $( options.appendTo ).append( this.helper ); - $(options.appendTo).append(this.helper); // position helper (lasso) - this.helper.css({ + this.helper.css( { "left": event.pageX, "top": event.pageY, "width": 0, "height": 0 - }); + } ); - if (options.autoRefresh) { + if ( options.autoRefresh ) { this.refresh(); } - this.selectees.filter(".ui-selected").each(function() { - var selectee = $.data(this, "selectable-item"); + this.selectees.filter( ".ui-selected" ).each( function() { + var selectee = $.data( this, "selectable-item" ); selectee.startselected = true; - if (!event.metaKey && !event.ctrlKey) { + if ( !event.metaKey && !event.ctrlKey ) { that._removeClass( selectee.$element, "ui-selected" ); selectee.selected = false; that._addClass( selectee.$element, "ui-unselecting" ); selectee.unselecting = true; + // selectable UNSELECTING callback - that._trigger("unselecting", event, { + that._trigger( "unselecting", event, { unselecting: selectee.element - }); + } ); } - }); + } ); - $(event.target).parents().addBack().each(function() { + $( event.target ).parents().addBack().each( function() { var doSelect, - selectee = $.data(this, "selectable-item"); - if (selectee) { - doSelect = (!event.metaKey && !event.ctrlKey) || !selectee.$element.hasClass("ui-selected"); + selectee = $.data( this, "selectable-item" ); + if ( selectee ) { + doSelect = ( !event.metaKey && !event.ctrlKey ) || !selectee.$element.hasClass( "ui-selected" ); that._removeClass( selectee.$element, doSelect ? "ui-unselecting" : "ui-selected" ) ._addClass( selectee.$element, doSelect ? "ui-selecting" : "ui-unselecting" ); selectee.unselecting = !doSelect; selectee.selecting = doSelect; selectee.selected = doSelect; + // selectable (UN)SELECTING callback - if (doSelect) { - that._trigger("selecting", event, { + if ( doSelect ) { + that._trigger( "selecting", event, { selecting: selectee.element - }); + } ); } else { - that._trigger("unselecting", event, { + that._trigger( "unselecting", event, { unselecting: selectee.element - }); + } ); } return false; } - }); + } ); }, - _mouseDrag: function(event) { + _mouseDrag: function( event ) { this.dragged = true; - if (this.options.disabled) { + if ( this.options.disabled ) { return; } var tmp, that = this, options = this.options, - x1 = this.opos[0], - y1 = this.opos[1], + x1 = this.opos[ 0 ], + y1 = this.opos[ 1 ], x2 = event.pageX, y2 = event.pageY; - if (x1 > x2) { tmp = x2; x2 = x1; x1 = tmp; } - if (y1 > y2) { tmp = y2; y2 = y1; y1 = tmp; } - this.helper.css({ left: x1, top: y1, width: x2 - x1, height: y2 - y1 }); + if ( x1 > x2 ) { tmp = x2; x2 = x1; x1 = tmp; } + if ( y1 > y2 ) { tmp = y2; y2 = y1; y1 = tmp; } + this.helper.css( { left: x1, top: y1, width: x2 - x1, height: y2 - y1 } ); - this.selectees.each(function() { - var selectee = $.data(this, "selectable-item"), + this.selectees.each( function() { + var selectee = $.data( this, "selectable-item" ), hit = false; //prevent helper from being selected if appendTo: selectable - if (!selectee || selectee.element === that.element[0]) { + if ( !selectee || selectee.element === that.element[ 0 ] ) { return; } - if (options.tolerance === "touch") { - hit = ( !(selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1) ); - } else if (options.tolerance === "fit") { - hit = (selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2); + if ( options.tolerance === "touch" ) { + hit = ( !( selectee.left > x2 || selectee.right < x1 || selectee.top > y2 || selectee.bottom < y1 ) ); + } else if ( options.tolerance === "fit" ) { + hit = ( selectee.left > x1 && selectee.right < x2 && selectee.top > y1 && selectee.bottom < y2 ); } - if (hit) { + if ( hit ) { + // SELECT - if (selectee.selected) { + if ( selectee.selected ) { that._removeClass( selectee.$element, "ui-selected" ); selectee.selected = false; } - if (selectee.unselecting) { + if ( selectee.unselecting ) { that._removeClass( selectee.$element, "ui-unselecting" ); selectee.unselecting = false; } - if (!selectee.selecting) { + if ( !selectee.selecting ) { that._addClass( selectee.$element, "ui-selecting" ); selectee.selecting = true; + // selectable SELECTING callback - that._trigger("selecting", event, { + that._trigger( "selecting", event, { selecting: selectee.element - }); + } ); } } else { + // UNSELECT - if (selectee.selecting) { - if ((event.metaKey || event.ctrlKey) && selectee.startselected) { + if ( selectee.selecting ) { + if ( ( event.metaKey || event.ctrlKey ) && selectee.startselected ) { that._removeClass( selectee.$element, "ui-selecting" ); selectee.selecting = false; that._addClass( selectee.$element, "ui-selected" ); @@ -221,67 +227,69 @@ return $.widget("ui.selectable", $.ui.mouse, { } else { that._removeClass( selectee.$element, "ui-selecting" ); selectee.selecting = false; - if (selectee.startselected) { + if ( selectee.startselected ) { that._addClass( selectee.$element, "ui-unselecting" ); selectee.unselecting = true; } + // selectable UNSELECTING callback - that._trigger("unselecting", event, { + that._trigger( "unselecting", event, { unselecting: selectee.element - }); + } ); } } - if (selectee.selected) { - if (!event.metaKey && !event.ctrlKey && !selectee.startselected) { + if ( selectee.selected ) { + if ( !event.metaKey && !event.ctrlKey && !selectee.startselected ) { that._removeClass( selectee.$element, "ui-selected" ); selectee.selected = false; that._addClass( selectee.$element, "ui-unselecting" ); selectee.unselecting = true; + // selectable UNSELECTING callback - that._trigger("unselecting", event, { + that._trigger( "unselecting", event, { unselecting: selectee.element - }); + } ); } } } - }); + } ); return false; }, - _mouseStop: function(event) { + _mouseStop: function( event ) { var that = this; this.dragged = false; - $(".ui-unselecting", this.element[0]).each(function() { - var selectee = $.data(this, "selectable-item"); + $( ".ui-unselecting", this.element[ 0 ] ).each( function() { + var selectee = $.data( this, "selectable-item" ); that._removeClass( selectee.$element, "ui-unselecting" ); selectee.unselecting = false; selectee.startselected = false; - that._trigger("unselected", event, { + that._trigger( "unselected", event, { unselected: selectee.element - }); - }); - $(".ui-selecting", this.element[0]).each(function() { - var selectee = $.data(this, "selectable-item"); + } ); + } ); + $( ".ui-selecting", this.element[ 0 ] ).each( function() { + var selectee = $.data( this, "selectable-item" ); that._removeClass( selectee.$element, "ui-selecting" ) ._addClass( selectee.$element, "ui-selected" ); selectee.selecting = false; selectee.selected = true; selectee.startselected = true; - that._trigger("selected", event, { + that._trigger( "selected", event, { selected: selectee.element - }); - }); - this._trigger("stop", event); + } ); + } ); + this._trigger( "stop", event ); this.helper.remove(); return false; } -}); +} ); -})); +} ) ); From dfdcafdbbe13831711eb504b8cf30deaf7e9e107 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:58:35 -0400 Subject: [PATCH 08/27] Resizable: Style updates Ref #14246 --- tests/unit/resizable/common.js | 2 +- tests/unit/resizable/core.js | 188 +++++------ tests/unit/resizable/events.js | 94 +++--- tests/unit/resizable/helper.js | 5 +- tests/unit/resizable/methods.js | 4 +- tests/unit/resizable/options.js | 365 ++++++++++---------- ui/widgets/resizable.js | 568 ++++++++++++++++---------------- 7 files changed, 613 insertions(+), 613 deletions(-) diff --git a/tests/unit/resizable/common.js b/tests/unit/resizable/common.js index 3f1f82bced9..8d98096a442 100644 --- a/tests/unit/resizable/common.js +++ b/tests/unit/resizable/common.js @@ -35,6 +35,6 @@ common.testWidget( "resizable", { start: null, stop: null } -}); +} ); } ); diff --git a/tests/unit/resizable/core.js b/tests/unit/resizable/core.js index 450fd6ef8ee..8c942e62ff5 100644 --- a/tests/unit/resizable/core.js +++ b/tests/unit/resizable/core.js @@ -4,7 +4,7 @@ define( [ "ui/widgets/resizable" ], function( $, testHelper ) { -module("resizable: core"); +module( "resizable: core" ); /* test("element types", function() { @@ -25,188 +25,188 @@ test("element types", function() { }); */ -test("n", function() { - expect(4); +test( "n", function() { + expect( 4 ); - var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ handles: "all" }); + var handle = ".ui-resizable-n", target = $( "#resizable1" ).resizable( { handles: "all" } ); - testHelper.drag(handle, 0, -50); + testHelper.drag( handle, 0, -50 ); equal( target.height(), 150, "compare height" ); - testHelper.drag(handle, 0, 50); + testHelper.drag( handle, 0, 50 ); equal( target.height(), 100, "compare height" ); - equal( target[0].style.left, "", "left should not be modified" ); - equal( target[0].style.width, "", "width should not be modified" ); -}); + equal( target[ 0 ].style.left, "", "left should not be modified" ); + equal( target[ 0 ].style.width, "", "width should not be modified" ); +} ); -test("s", function() { - expect(5); +test( "s", function() { + expect( 5 ); - var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ handles: "all" }); + var handle = ".ui-resizable-s", target = $( "#resizable1" ).resizable( { handles: "all" } ); - testHelper.drag(handle, 0, 50); + testHelper.drag( handle, 0, 50 ); equal( target.height(), 150, "compare height" ); - testHelper.drag(handle, 0, -50); + testHelper.drag( handle, 0, -50 ); equal( target.height(), 100, "compare height" ); - equal( target[0].style.top, "", "top should not be modified" ); - equal( target[0].style.left, "", "left should not be modified" ); - equal( target[0].style.width, "", "width should not be modified" ); -}); + equal( target[ 0 ].style.top, "", "top should not be modified" ); + equal( target[ 0 ].style.left, "", "left should not be modified" ); + equal( target[ 0 ].style.width, "", "width should not be modified" ); +} ); -test("e", function() { - expect(5); +test( "e", function() { + expect( 5 ); - var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ handles: "all" }); + var handle = ".ui-resizable-e", target = $( "#resizable1" ).resizable( { handles: "all" } ); - testHelper.drag(handle, 50); - equal( target.width(), 150, "compare width"); + testHelper.drag( handle, 50 ); + equal( target.width(), 150, "compare width" ); - testHelper.drag(handle, -50); + testHelper.drag( handle, -50 ); equal( target.width(), 100, "compare width" ); - equal( target[0].style.height, "", "height should not be modified" ); - equal( target[0].style.top, "", "top should not be modified" ); - equal( target[0].style.left, "", "left should not be modified" ); -}); + equal( target[ 0 ].style.height, "", "height should not be modified" ); + equal( target[ 0 ].style.top, "", "top should not be modified" ); + equal( target[ 0 ].style.left, "", "left should not be modified" ); +} ); -test("w", function() { - expect(4); +test( "w", function() { + expect( 4 ); - var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ handles: "all" }); + var handle = ".ui-resizable-w", target = $( "#resizable1" ).resizable( { handles: "all" } ); - testHelper.drag(handle, -50); + testHelper.drag( handle, -50 ); equal( target.width(), 150, "compare width" ); - testHelper.drag(handle, 50); + testHelper.drag( handle, 50 ); equal( target.width(), 100, "compare width" ); - equal( target[0].style.height, "", "height should not be modified" ); - equal( target[0].style.top, "", "top should not be modified" ); -}); + equal( target[ 0 ].style.height, "", "height should not be modified" ); + equal( target[ 0 ].style.top, "", "top should not be modified" ); +} ); -test("ne", function() { - expect(5); +test( "ne", function() { + expect( 5 ); - var handle = ".ui-resizable-ne", target = $("#resizable1").css({ overflow: "hidden" }).resizable({ handles: "all" }); + var handle = ".ui-resizable-ne", target = $( "#resizable1" ).css( { overflow: "hidden" } ).resizable( { handles: "all" } ); - testHelper.drag(handle, -50, -50); + testHelper.drag( handle, -50, -50 ); equal( target.width(), 50, "compare width" ); equal( target.height(), 150, "compare height" ); - testHelper.drag(handle, 50, 50); + testHelper.drag( handle, 50, 50 ); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); - equal( target[0].style.left, "", "left should not be modified" ); -}); + equal( target[ 0 ].style.left, "", "left should not be modified" ); +} ); -test("se", function() { - expect(6); +test( "se", function() { + expect( 6 ); - var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all" }); + var handle = ".ui-resizable-se", target = $( "#resizable1" ).resizable( { handles: "all" } ); - testHelper.drag(handle, 50, 50); + testHelper.drag( handle, 50, 50 ); equal( target.width(), 150, "compare width" ); equal( target.height(), 150, "compare height" ); - testHelper.drag(handle, -50, -50); + testHelper.drag( handle, -50, -50 ); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); - equal( target[0].style.top, "", "top should not be modified" ); - equal( target[0].style.left, "", "left should not be modified" ); -}); + equal( target[ 0 ].style.top, "", "top should not be modified" ); + equal( target[ 0 ].style.left, "", "left should not be modified" ); +} ); -test("sw", function() { - expect(5); +test( "sw", function() { + expect( 5 ); - var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all" }); + var handle = ".ui-resizable-sw", target = $( "#resizable1" ).resizable( { handles: "all" } ); - testHelper.drag(handle, -50, -50); + testHelper.drag( handle, -50, -50 ); equal( target.width(), 150, "compare width" ); equal( target.height(), 50, "compare height" ); - testHelper.drag(handle, 50, 50); + testHelper.drag( handle, 50, 50 ); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); - equal( target[0].style.top, "", "top should not be modified" ); -}); + equal( target[ 0 ].style.top, "", "top should not be modified" ); +} ); -test("nw", function() { - expect(4); +test( "nw", function() { + expect( 4 ); - var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all" }); + var handle = ".ui-resizable-nw", target = $( "#resizable1" ).resizable( { handles: "all" } ); - testHelper.drag(handle, -50, -50); + testHelper.drag( handle, -50, -50 ); equal( target.width(), 150, "compare width" ); equal( target.height(), 150, "compare height" ); - testHelper.drag(handle, 50, 50); + testHelper.drag( handle, 50, 50 ); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); -}); +} ); -test("handle with complex markup (#8756)", function() { - expect(2); +test( "handle with complex markup (#8756)", function() { + expect( 2 ); - $("#resizable1") + $( "#resizable1" ) .append( - $("
    ") - .addClass("ui-resizable-handle") - .addClass("ui-resizable-w") - .append($("
    ")) + $( "
    " ) + .addClass( "ui-resizable-handle" ) + .addClass( "ui-resizable-w" ) + .append( $( "
    " ) ) ); - var handle = ".ui-resizable-w div", target = $("#resizable1").resizable({ handles: "all" }); + var handle = ".ui-resizable-w div", target = $( "#resizable1" ).resizable( { handles: "all" } ); - testHelper.drag(handle, -50); + testHelper.drag( handle, -50 ); equal( target.width(), 150, "compare width" ); - testHelper.drag(handle, 50); + testHelper.drag( handle, 50 ); equal( target.width(), 100, "compare width" ); -}); +} ); -test("resizable accounts for scroll position correctly (#3815)", function() { +test( "resizable accounts for scroll position correctly (#3815)", function() { expect( 4 ); var position, top, left, - container = $("
    ").appendTo("#qunit-fixture"), - overflowed = $("
    ").appendTo( container ), - el = $("
    ").appendTo( overflowed ).resizable({ handles: "all" }), + container = $( "
    " ).appendTo( "#qunit-fixture" ), + overflowed = $( "
    " ).appendTo( container ), + el = $( "
    " ).appendTo( overflowed ).resizable( { handles: "all" } ), handle = ".ui-resizable-e", - handlePosition = $(handle).position().left; + handlePosition = $( handle ).position().left; container.scrollLeft( 100 ).scrollTop( 100 ); position = el.position(); - left = el.css("left"); - top = el.css("top"); + left = el.css( "left" ); + top = el.css( "top" ); - testHelper.drag(handle, 50, 50); + testHelper.drag( handle, 50, 50 ); deepEqual( el.position(), position, "position stays the same when resized" ); - equal( el.css("left"), left, "css('left') stays the same when resized" ); - equal( el.css("top"), top, "css('top') stays the same when resized" ); - equal( $(handle).position().left, handlePosition + 50, "handle also moved" ); -}); + equal( el.css( "left" ), left, "css('left') stays the same when resized" ); + equal( el.css( "top" ), top, "css('top') stays the same when resized" ); + equal( $( handle ).position().left, handlePosition + 50, "handle also moved" ); +} ); test( "resizable stores correct size when using helper and grid (#9547)", function() { expect( 2 ); var handle = ".ui-resizable-se", - target = $( "#resizable1" ).resizable({ + target = $( "#resizable1" ).resizable( { handles: "all", helper: "ui-resizable-helper", grid: [ 10, 10 ] - }); + } ); testHelper.drag( handle, 1, 1 ); equal( target.width(), 100, "compare width" ); equal( target.height(), 100, "compare height" ); -}); +} ); test( "nested resizable", function() { expect( 4 ); @@ -220,9 +220,9 @@ test( "nested resizable", function() { outer.appendTo( target ); inner.appendTo( outer ); - inner.resizable( { handles : "e" } ); - outer.resizable( { handles : "e" } ); - target.resizable( { handles : "e" } ); + inner.resizable( { handles: "e" } ); + outer.resizable( { handles: "e" } ); + target.resizable( { handles: "e" } ); innerHandle = $( "#inner > .ui-resizable-e" ); outerHandle = $( "#outer > .ui-resizable-e" ); @@ -239,6 +239,6 @@ test( "nested resizable", function() { inner.remove(); outer.remove(); -}); +} ); } ); diff --git a/tests/unit/resizable/events.js b/tests/unit/resizable/events.js index b77130741f4..b12cfa8d5ee 100644 --- a/tests/unit/resizable/events.js +++ b/tests/unit/resizable/events.js @@ -4,31 +4,31 @@ define( [ "ui/widgets/resizable" ], function( $, testHelper ) { -module("resizable: events"); +module( "resizable: events" ); -test("start", function() { +test( "start", function() { - expect(5); + expect( 5 ); var count = 0, handle = ".ui-resizable-se"; - $("#resizable1").resizable({ + $( "#resizable1" ).resizable( { handles: "all", - start: function(event, ui) { + start: function( event, ui ) { equal( ui.size.width, 100, "compare width" ); equal( ui.size.height, 100, "compare height" ); equal( ui.originalSize.width, 100, "compare original width" ); equal( ui.originalSize.height, 100, "compare original height" ); count++; } - }); + } ); - testHelper.drag(handle, 50, 50); + testHelper.drag( handle, 50, 50 ); - equal(count, 1, "start callback should happen exactly once"); + equal( count, 1, "start callback should happen exactly once" ); -}); +} ); test( "resize", function() { @@ -37,7 +37,7 @@ test( "resize", function() { var count = 0, handle = ".ui-resizable-se"; - $("#resizable1").resizable({ + $( "#resizable1" ).resizable( { handles: "all", resize: function( event, ui ) { if ( count === 0 ) { @@ -53,13 +53,13 @@ test( "resize", function() { } count++; } - }); + } ); testHelper.drag( handle, 50, 50 ); equal( count, 2, "resize callback should happen exactly once per size adjustment" ); -}); +} ); test( "resize (min/max dimensions)", function() { @@ -68,7 +68,7 @@ test( "resize (min/max dimensions)", function() { var count = 0, handle = ".ui-resizable-se"; - $("#resizable1").resizable({ + $( "#resizable1" ).resizable( { handles: "all", minWidth: 60, minHeight: 60, @@ -81,13 +81,13 @@ test( "resize (min/max dimensions)", function() { equal( ui.originalSize.height, 100, "compare original height" ); count++; } - }); + } ); testHelper.drag( handle, -200, -200 ); equal( count, 1, "resize callback should happen exactly once per size adjustment" ); -}); +} ); test( "resize (containment)", function() { @@ -95,12 +95,12 @@ test( "resize (containment)", function() { var count = 0, handle = ".ui-resizable-se", - container = $("#resizable1").wrap("
    ").parent().css({ + container = $( "#resizable1" ).wrap( "
    " ).parent().css( { height: "100px", width: "100px" - }); + } ); - $("#resizable1").resizable({ + $( "#resizable1" ).resizable( { handles: "all", containment: container, resize: function( event, ui ) { @@ -110,7 +110,7 @@ test( "resize (containment)", function() { equal( ui.originalSize.height, 100, "compare original height" ); count++; } - }); + } ); // Prove you can't resize outside containment by dragging southeast corner southeast testHelper.drag( handle, 100, 100 ); @@ -120,45 +120,45 @@ test( "resize (containment)", function() { equal( count, 1, "resize callback should happen exactly once per size adjustment" ); -}); +} ); -test("resize (grid)", function() { +test( "resize (grid)", function() { - expect(5); + expect( 5 ); var count = 0, handle = ".ui-resizable-se"; - $("#resizable1").resizable({ + $( "#resizable1" ).resizable( { handles: "all", grid: 50, - resize: function(event, ui) { + resize: function( event, ui ) { equal( ui.size.width, 150, "compare width" ); equal( ui.size.height, 150, "compare height" ); equal( ui.originalSize.width, 100, "compare original width" ); equal( ui.originalSize.height, 100, "compare original height" ); count++; } - }); + } ); - testHelper.drag(handle, 50, 50); + testHelper.drag( handle, 50, 50 ); - equal(count, 1, "resize callback should happen exactly once per grid-unit size adjustment"); + equal( count, 1, "resize callback should happen exactly once per grid-unit size adjustment" ); -}); +} ); test( "resize, custom adjustment", function() { expect( 4 ); var handle = ".ui-resizable-se", - element = $( "#resizable1" ).resizable({ + element = $( "#resizable1" ).resizable( { resize: function( event, ui ) { ui.size.width = 100; ui.size.height = 200; ui.position.left = 300; ui.position.top = 400; } - }); + } ); testHelper.drag( handle, 50, 50 ); @@ -166,31 +166,31 @@ test( "resize, custom adjustment", function() { equal( element.height(), 200, "resize event can control height" ); equal( element.position().left, 300, "resize event can control left" ); equal( element.position().top, 400, "resize event can control top" ); -}); +} ); -test("stop", function() { +test( "stop", function() { - expect(5); + expect( 5 ); var count = 0, handle = ".ui-resizable-se"; - $("#resizable1").resizable({ + $( "#resizable1" ).resizable( { handles: "all", - stop: function(event, ui) { + stop: function( event, ui ) { equal( ui.size.width, 150, "compare width" ); equal( ui.size.height, 150, "compare height" ); equal( ui.originalSize.width, 100, "compare original width" ); equal( ui.originalSize.height, 100, "compare original height" ); count++; } - }); + } ); - testHelper.drag(handle, 50, 50); + testHelper.drag( handle, 50, 50 ); - equal(count, 1, "stop callback should happen exactly once"); + equal( count, 1, "stop callback should happen exactly once" ); -}); +} ); test( "resize (containment) works with parent with negative offset", function() { @@ -204,30 +204,30 @@ test( "resize (containment) works with parent with negative offset", function() increaseWidthBy = 50; // Position fixed container in window top left - fixedContainer.css({ + fixedContainer.css( { width: 400, height: 100, position: "fixed", top: 0, left: 0 - }); + } ); // Position absolute container within fixed on slightly outside window - absoluteContainer.css({ + absoluteContainer.css( { width: 400, height: 100, position: "absolute", top: 0, left: -50 - }); + } ); // Set up resizable to be contained within absolute container - target.resizable({ + target.resizable( { handles: "all", containment: "parent" - }).css({ + } ).css( { width: 300 - }); + } ); widthBefore = target.width(); @@ -237,6 +237,6 @@ test( "resize (containment) works with parent with negative offset", function() equal( widthAfter, ( widthBefore + increaseWidthBy ), "resizable width should be increased by the value dragged" ); -}); +} ); } ); diff --git a/tests/unit/resizable/helper.js b/tests/unit/resizable/helper.js index 494c1a07385..f541d69c7a2 100644 --- a/tests/unit/resizable/helper.js +++ b/tests/unit/resizable/helper.js @@ -5,13 +5,14 @@ define( [ return $.extend( helper, { drag: function( el, dx, dy ) { + // this mouseover is to work around a limitation in resizable // TODO: fix resizable so handle doesn't require mouseover in order to be used - $( el ).simulate("mouseover").simulate( "drag", { + $( el ).simulate( "mouseover" ).simulate( "drag", { moves: 2, dx: dx, dy: dy - }); + } ); } } ); diff --git a/tests/unit/resizable/methods.js b/tests/unit/resizable/methods.js index ed79ef6212c..eea42a682e9 100644 --- a/tests/unit/resizable/methods.js +++ b/tests/unit/resizable/methods.js @@ -8,7 +8,7 @@ module( "resizable: methods" ); test( "disable", function( assert ) { expect( 5 ); - var element = $( "#resizable1" ).resizable({ disabled: false }), + var element = $( "#resizable1" ).resizable( { disabled: false } ), chainable = element.resizable( "disable" ); assert.lacksClasses( element.resizable( "widget" ), "ui-state-disabled" ); @@ -16,6 +16,6 @@ test( "disable", function( assert ) { assert.hasClasses( element.resizable( "widget" ), "ui-resizable-disabled" ); equal( element.resizable( "option", "disabled" ), true, "disabled option setter" ); equal( chainable, element, "disable is chainable" ); -}); +} ); } ); diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js index 23434830979..2d44eb8ee8a 100644 --- a/tests/unit/resizable/options.js +++ b/tests/unit/resizable/options.js @@ -4,124 +4,124 @@ define( [ "ui/widgets/resizable" ], function( $, testHelper ) { -module("resizable: options"); +module( "resizable: options" ); test( "alsoResize", function() { expect( 2 ); var other = $( "
    " ) - .css({ + .css( { width: 50, height: 50 - }) + } ) .appendTo( "body" ), - element = $( "#resizable1" ).resizable({ + element = $( "#resizable1" ).resizable( { alsoResize: other - }), + } ), handle = ".ui-resizable-e"; testHelper.drag( handle, 80 ); equal( element.width(), 180, "resizable width" ); equal( other.width(), 130, "alsoResize width" ); -}); +} ); -test("aspectRatio: 'preserve' (e)", function() { - expect(4); +test( "aspectRatio: 'preserve' (e)", function() { + expect( 4 ); - var handle = ".ui-resizable-e", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + var handle = ".ui-resizable-e", target = $( "#resizable1" ).resizable( { aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 } ); - testHelper.drag(handle, 80); - equal( target.width(), 130, "compare maxWidth"); - equal( target.height(), 130, "compare maxHeight"); + testHelper.drag( handle, 80 ); + equal( target.width(), 130, "compare maxWidth" ); + equal( target.height(), 130, "compare maxHeight" ); - testHelper.drag(handle, -130); - equal( target.width(), 70, "compare minWidth"); - equal( target.height(), 70, "compare minHeight"); -}); + testHelper.drag( handle, -130 ); + equal( target.width(), 70, "compare minWidth" ); + equal( target.height(), 70, "compare minHeight" ); +} ); -test("aspectRatio: 'preserve' (w)", function() { - expect(4); +test( "aspectRatio: 'preserve' (w)", function() { + expect( 4 ); - var handle = ".ui-resizable-w", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + var handle = ".ui-resizable-w", target = $( "#resizable1" ).resizable( { aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 } ); - testHelper.drag(handle, -80); - equal( target.width(), 130, "compare maxWidth"); - equal( target.height(), 130, "compare maxHeight"); + testHelper.drag( handle, -80 ); + equal( target.width(), 130, "compare maxWidth" ); + equal( target.height(), 130, "compare maxHeight" ); - testHelper.drag(handle, 130); - equal( target.width(), 70, "compare minWidth"); - equal( target.height(), 70, "compare minHeight"); -}); + testHelper.drag( handle, 130 ); + equal( target.width(), 70, "compare minWidth" ); + equal( target.height(), 70, "compare minHeight" ); +} ); -test("aspectRatio: 'preserve' (n)", function() { - expect(4); +test( "aspectRatio: 'preserve' (n)", function() { + expect( 4 ); - var handle = ".ui-resizable-n", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + var handle = ".ui-resizable-n", target = $( "#resizable1" ).resizable( { aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 } ); - testHelper.drag(handle, 0, -80); - equal( target.width(), 130, "compare maxWidth"); - equal( target.height(), 130, "compare maxHeight"); + testHelper.drag( handle, 0, -80 ); + equal( target.width(), 130, "compare maxWidth" ); + equal( target.height(), 130, "compare maxHeight" ); - testHelper.drag(handle, 0, 80); - equal( target.width(), 70, "compare minWidth"); - equal( target.height(), 70, "compare minHeight"); -}); + testHelper.drag( handle, 0, 80 ); + equal( target.width(), 70, "compare minWidth" ); + equal( target.height(), 70, "compare minHeight" ); +} ); -test("aspectRatio: 'preserve' (s)", function() { - expect(4); +test( "aspectRatio: 'preserve' (s)", function() { + expect( 4 ); - var handle = ".ui-resizable-s", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + var handle = ".ui-resizable-s", target = $( "#resizable1" ).resizable( { aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 } ); - testHelper.drag(handle, 0, 80); - equal( target.width(), 130, "compare maxWidth"); - equal( target.height(), 130, "compare maxHeight"); + testHelper.drag( handle, 0, 80 ); + equal( target.width(), 130, "compare maxWidth" ); + equal( target.height(), 130, "compare maxHeight" ); - testHelper.drag(handle, 0, -80); - equal( target.width(), 70, "compare minWidth"); - equal( target.height(), 70, "compare minHeight"); -}); + testHelper.drag( handle, 0, -80 ); + equal( target.width(), 70, "compare minWidth" ); + equal( target.height(), 70, "compare minHeight" ); +} ); -test("aspectRatio: 'preserve' (se)", function() { - expect(4); +test( "aspectRatio: 'preserve' (se)", function() { + expect( 4 ); - var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + var handle = ".ui-resizable-se", target = $( "#resizable1" ).resizable( { aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 } ); - testHelper.drag(handle, 80, 80); - equal( target.width(), 130, "compare maxWidth"); - equal( target.height(), 130, "compare maxHeight"); + testHelper.drag( handle, 80, 80 ); + equal( target.width(), 130, "compare maxWidth" ); + equal( target.height(), 130, "compare maxHeight" ); - testHelper.drag(handle, -80, -80); - equal( target.width(), 70, "compare minWidth"); - equal( target.height(), 70, "compare minHeight"); -}); + testHelper.drag( handle, -80, -80 ); + equal( target.width(), 70, "compare minWidth" ); + equal( target.height(), 70, "compare minHeight" ); +} ); -test("aspectRatio: 'preserve' (sw)", function() { - expect(4); +test( "aspectRatio: 'preserve' (sw)", function() { + expect( 4 ); - var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + var handle = ".ui-resizable-sw", target = $( "#resizable1" ).resizable( { aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 } ); - testHelper.drag(handle, -80, 80); - equal( target.width(), 130, "compare maxWidth"); - equal( target.height(), 130, "compare maxHeight"); + testHelper.drag( handle, -80, 80 ); + equal( target.width(), 130, "compare maxWidth" ); + equal( target.height(), 130, "compare maxHeight" ); - testHelper.drag(handle, 80, -80); - equal( target.width(), 70, "compare minWidth"); - equal( target.height(), 70, "compare minHeight"); -}); + testHelper.drag( handle, 80, -80 ); + equal( target.width(), 70, "compare minWidth" ); + equal( target.height(), 70, "compare minHeight" ); +} ); -test("aspectRatio: 'preserve' (ne)", function() { - expect(4); +test( "aspectRatio: 'preserve' (ne)", function() { + expect( 4 ); - var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 }); + var handle = ".ui-resizable-ne", target = $( "#resizable1" ).resizable( { aspectRatio: "preserve", handles: "all", minWidth: 70, minHeight: 50, maxWidth: 150, maxHeight: 130 } ); - testHelper.drag(handle, 80, -80); - equal( target.width(), 130, "compare maxWidth"); - equal( target.height(), 130, "compare maxHeight"); + testHelper.drag( handle, 80, -80 ); + equal( target.width(), 130, "compare maxWidth" ); + equal( target.height(), 130, "compare maxHeight" ); - testHelper.drag(handle, -80, 80); - equal( target.width(), 70, "compare minWidth"); - equal( target.height(), 70, "compare minHeight"); -}); + testHelper.drag( handle, -80, 80 ); + equal( target.width(), 70, "compare minWidth" ); + equal( target.height(), 70, "compare minHeight" ); +} ); test( "aspectRatio: Resizing can move objects", function() { expect( 7 ); @@ -129,14 +129,14 @@ test( "aspectRatio: Resizing can move objects", function() { // Http://bugs.jqueryui.com/ticket/7018 - Resizing can move objects var handleW = ".ui-resizable-w", handleNW = ".ui-resizable-nw", - target = $( "#resizable1" ).resizable({ + target = $( "#resizable1" ).resizable( { aspectRatio: true, handles: "all", containment: "parent" - }); + } ); - $( "#container" ).css({ width: 200, height: 300 }); - $( "#resizable1" ).css({ width: 100, height: 100, left: 75, top: 200 }); + $( "#container" ).css( { width: 200, height: 300 } ); + $( "#resizable1" ).css( { width: 100, height: 100, left: 75, top: 200 } ); testHelper.drag( handleW, -20 ); equal( target.width(), 100, "compare width - no size change" ); @@ -144,22 +144,22 @@ test( "aspectRatio: Resizing can move objects", function() { equal( target.position().left, 75, "compare left - no movement" ); // Http://bugs.jqueryui.com/ticket/9107 - aspectRatio and containment not handled correctly - $( "#container" ).css({ width: 200, height: 300, position: "absolute", left: 100, top: 100 }); - $( "#resizable1" ).css({ width: 100, height: 100, left: 0, top: 0 }); + $( "#container" ).css( { width: 200, height: 300, position: "absolute", left: 100, top: 100 } ); + $( "#resizable1" ).css( { width: 100, height: 100, left: 0, top: 0 } ); testHelper.drag( handleNW, -20, -20 ); equal( target.width(), 100, "compare width - no size change" ); equal( target.height(), 100, "compare height - no size change" ); equal( target.position().left, 0, "compare left - no movement" ); equal( target.position().top, 0, "compare top - no movement" ); -}); +} ); test( "containment", function() { expect( 4 ); - var element = $( "#resizable1" ).resizable({ + var element = $( "#resizable1" ).resizable( { containment: "#container" - }); + } ); testHelper.drag( ".ui-resizable-se", 20, 30 ); equal( element.width(), 120, "unconstrained width within container" ); @@ -168,17 +168,17 @@ test( "containment", function() { testHelper.drag( ".ui-resizable-se", 400, 400 ); equal( element.width(), 300, "constrained width at containment edge" ); equal( element.height(), 200, "constrained height at containment edge" ); -}); +} ); test( "containment - not immediate parent", function() { expect( 4 ); // Http://bugs.jqueryui.com/ticket/7485 - Resizable: Containment calculation is wrong // when containment element is not the immediate parent - var element = $( "#child" ).resizable({ + var element = $( "#child" ).resizable( { containment: "#container2", handles: "all" - }); + } ); testHelper.drag( ".ui-resizable-e", 300, 0 ); equal( element.width(), 400, "Relative, contained within container width" ); @@ -190,27 +190,27 @@ test( "containment - not immediate parent", function() { $( "#parent" ).css( { left: 50, top: 50 } ); $( "#container2" ).css( { left: 50, top: 50 } ); - element = $( "#child" ).resizable({ + element = $( "#child" ).resizable( { containment: "#container2", handles: "all" - }); + } ); testHelper.drag( ".ui-resizable-e", 400, 0 ); equal( element.width(), 300, "Relative with Left, contained within container width" ); testHelper.drag( ".ui-resizable-s", 0, 400 ); equal( element.height(), 300, "Relative with Top, contained within container height" ); -}); +} ); test( "containment - immediate parent", function() { expect( 4 ); // Http://bugs.jqueryui.com/ticket/10140 - Resizable: Width calculation is wrong when containment element is "position: relative" // when containment element is immediate parent - var element = $( "#child" ).resizable({ + var element = $( "#child" ).resizable( { containment: "parent", handles: "all" - }); + } ); testHelper.drag( ".ui-resizable-e", 400, 0 ); equal( element.width(), 300, "Relative, contained within container width" ); @@ -222,69 +222,69 @@ test( "containment - immediate parent", function() { $( "#parent" ).css( { left: 50, top: 50 } ); $( "#container2" ).css( { left: 50, top: 50 } ); - element = $( "#child" ).resizable({ + element = $( "#child" ).resizable( { containment: "parent", handles: "all" - }); + } ); testHelper.drag( ".ui-resizable-e", 400, 0 ); equal( element.width(), 250, "Relative with Left, contained within container width" ); testHelper.drag( ".ui-resizable-s", 0, 400 ); equal( element.height(), 250, "Relative with Top, contained within container height" ); -}); +} ); -test("grid", function() { - expect(4); +test( "grid", function() { + expect( 4 ); - var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: [ 0, 20 ] }); + var handle = ".ui-resizable-se", target = $( "#resizable1" ).resizable( { handles: "all", grid: [ 0, 20 ] } ); - testHelper.drag(handle, 3, 9); - equal( target.width(), 103, "compare width"); - equal( target.height(), 100, "compare height"); + testHelper.drag( handle, 3, 9 ); + equal( target.width(), 103, "compare width" ); + equal( target.height(), 100, "compare height" ); - testHelper.drag(handle, 15, 11); - equal( target.width(), 118, "compare width"); - equal( target.height(), 120, "compare height"); -}); + testHelper.drag( handle, 15, 11 ); + equal( target.width(), 118, "compare width" ); + equal( target.height(), 120, "compare height" ); +} ); -test("grid (min/max dimensions)", function() { - expect(4); +test( "grid (min/max dimensions)", function() { + expect( 4 ); - var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", grid: 20, minWidth: 65, minHeight: 65, maxWidth: 135, maxHeight: 135 }); + var handle = ".ui-resizable-se", target = $( "#resizable1" ).resizable( { handles: "all", grid: 20, minWidth: 65, minHeight: 65, maxWidth: 135, maxHeight: 135 } ); - testHelper.drag(handle, 50, 50); - equal( target.width(), 120, "grid should respect maxWidth"); - equal( target.height(), 120, "grid should respect maxHeight"); + testHelper.drag( handle, 50, 50 ); + equal( target.width(), 120, "grid should respect maxWidth" ); + equal( target.height(), 120, "grid should respect maxHeight" ); - testHelper.drag(handle, -100, -100); - equal( target.width(), 80, "grid should respect minWidth"); - equal( target.height(), 80, "grid should respect minHeight"); -}); + testHelper.drag( handle, -100, -100 ); + equal( target.width(), 80, "grid should respect minWidth" ); + equal( target.height(), 80, "grid should respect minHeight" ); +} ); -test("grid (wrapped)", function() { - expect(4); +test( "grid (wrapped)", function() { + expect( 4 ); - var handle = ".ui-resizable-se", target = $("#resizable2").resizable({ handles: "all", grid: [ 0, 20 ] }); + var handle = ".ui-resizable-se", target = $( "#resizable2" ).resizable( { handles: "all", grid: [ 0, 20 ] } ); - testHelper.drag(handle, 3, 9); - equal( target.width(), 103, "compare width"); - equal( target.height(), 100, "compare height"); + testHelper.drag( handle, 3, 9 ); + equal( target.width(), 103, "compare width" ); + equal( target.height(), 100, "compare height" ); - testHelper.drag(handle, 15, 11); - equal( target.width(), 118, "compare width"); - equal( target.height(), 120, "compare height"); -}); + testHelper.drag( handle, 15, 11 ); + equal( target.width(), 118, "compare width" ); + equal( target.height(), 120, "compare height" ); +} ); test( "grid - Resizable: can be moved when grid option is set (#9611)", function() { expect( 6 ); var oldPosition, handle = ".ui-resizable-nw", - target = $( "#resizable1" ).resizable({ + target = $( "#resizable1" ).resizable( { handles: "all", grid: 50 - }); + } ); testHelper.drag( handle, 50, 50 ); equal( target.width(), 50, "compare width" ); @@ -297,162 +297,159 @@ test( "grid - Resizable: can be moved when grid option is set (#9611)", function equal( target.height(), 50, "compare height" ); equal( target.position().top, oldPosition.top, "compare top" ); equal( target.position().left, oldPosition.left, "compare left" ); -}); +} ); test( "grid - maintains grid with padding and border when approaching no dimensions", function() { expect( 2 ); // Http://bugs.jqueryui.com/ticket/10437 - Resizable: border with grid option working wrong var handle = ".ui-resizable-nw", - target = $( "#resizable1" ).css({ + target = $( "#resizable1" ).css( { padding: 5, border: "5px solid black", width: 80, height: 80 - }).resizable({ + } ).resizable( { handles: "all", grid: [ 50, 12 ] - }); + } ); testHelper.drag( handle, 50, 50 ); equal( target.outerWidth(), 50, "compare width" ); equal( target.outerHeight(), 52, "compare height" ); -}); +} ); -test("ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { - expect(4); +test( "ui-resizable-se { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + expect( 4 ); - var handle = ".ui-resizable-se", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + var handle = ".ui-resizable-se", target = $( "#resizable1" ).resizable( { handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 } ); - testHelper.drag(handle, -50, -50); + testHelper.drag( handle, -50, -50 ); equal( target.width(), 60, "compare minWidth" ); equal( target.height(), 60, "compare minHeight" ); - testHelper.drag(handle, 70, 70); + testHelper.drag( handle, 70, 70 ); equal( target.width(), 100, "compare maxWidth" ); equal( target.height(), 100, "compare maxHeight" ); -}); +} ); -test("ui-resizable-sw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { - expect(4); +test( "ui-resizable-sw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + expect( 4 ); - var handle = ".ui-resizable-sw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + var handle = ".ui-resizable-sw", target = $( "#resizable1" ).resizable( { handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 } ); - testHelper.drag(handle, 50, -50); + testHelper.drag( handle, 50, -50 ); equal( target.width(), 60, "compare minWidth" ); equal( target.height(), 60, "compare minHeight" ); - testHelper.drag(handle, -70, 70); + testHelper.drag( handle, -70, 70 ); equal( target.width(), 100, "compare maxWidth" ); equal( target.height(), 100, "compare maxHeight" ); -}); +} ); -test("ui-resizable-ne { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { - expect(4); +test( "ui-resizable-ne { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + expect( 4 ); - var handle = ".ui-resizable-ne", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + var handle = ".ui-resizable-ne", target = $( "#resizable1" ).resizable( { handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 } ); - testHelper.drag(handle, -50, 50); + testHelper.drag( handle, -50, 50 ); equal( target.width(), 60, "compare minWidth" ); equal( target.height(), 60, "compare minHeight" ); - testHelper.drag(handle, 70, -70); + testHelper.drag( handle, 70, -70 ); equal( target.width(), 100, "compare maxWidth" ); equal( target.height(), 100, "compare maxHeight" ); -}); +} ); -test("ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { - expect(4); +test( "ui-resizable-nw { handles: 'all', minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }", function() { + expect( 4 ); - var handle = ".ui-resizable-nw", target = $("#resizable1").resizable({ handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 }); + var handle = ".ui-resizable-nw", target = $( "#resizable1" ).resizable( { handles: "all", minWidth: 60, minHeight: 60, maxWidth: 100, maxHeight: 100 } ); - testHelper.drag(handle, 70, 70); + testHelper.drag( handle, 70, 70 ); equal( target.width(), 60, "compare minWidth" ); equal( target.height(), 60, "compare minHeight" ); - testHelper.drag(handle, -70, -70); + testHelper.drag( handle, -70, -70 ); equal( target.width(), 100, "compare maxWidth" ); equal( target.height(), 100, "compare maxHeight" ); -}); - +} ); -test( "custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", function () { +test( "custom handles { handles: { 's': $('#resizer1'), containment: 'parent' }", function() { expect( 2 ); var handle = "#resizer1", - target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" ) }, containment: "parent" }); + target = $( "#resizable1" ).resizable( { handles: { "s": $( "#resizer1" ) }, containment: "parent" } ); testHelper.drag( handle, 0, 70 ); equal( target.height(), 170, "compare height" ); testHelper.drag( handle, 0, -70 ); equal( target.height(), 100, "compare height" ); -}); - +} ); -test( "custom handles { handles: { 's': $('#resizer1')[0], containment: 'parent' }", function () { +test( "custom handles { handles: { 's': $('#resizer1')[0], containment: 'parent' }", function() { expect( 2 ); var handle = "#resizer1", - target = $( "#resizable1" ).resizable({ handles: { "s": $( "#resizer1" )[ 0 ] }, containment: "parent" }); + target = $( "#resizable1" ).resizable( { handles: { "s": $( "#resizer1" )[ 0 ] }, containment: "parent" } ); testHelper.drag( handle, 0, 70 ); equal( target.height(), 170, "compare height" ); testHelper.drag( handle, 0, -70 ); equal( target.height(), 100, "compare height" ); -}); - +} ); -test("zIndex, applied to all handles", function() { - expect(8); +test( "zIndex, applied to all handles", function() { + expect( 8 ); - var target = $("
    ").resizable({ handles: "all", zIndex: 100 }); + var target = $( "
    " ).resizable( { handles: "all", zIndex: 100 } ); target.children( ".ui-resizable-handle" ).each( function( index, handle ) { equal( $( handle ).css( "zIndex" ), 100, "compare zIndex" ); - }); -}); + } ); +} ); test( "alsoResize + containment", function() { expect( 4 ); var other = $( "
    " ) - .css({ + .css( { width: 50, height: 50 - }) + } ) .appendTo( "body" ), - element = $( "#resizable1" ).resizable({ + element = $( "#resizable1" ).resizable( { alsoResize: other, containment: "#container" - }); + } ); testHelper.drag( ".ui-resizable-se", 400, 400 ); equal( element.width(), 300, "resizable constrained width at containment edge" ); equal( element.height(), 200, "resizable constrained height at containment edge" ); equal( other.width(), 250, "alsoResize constrained width at containment edge" ); equal( other.height(), 150, "alsoResize constrained height at containment edge" ); -}); +} ); test( "alsoResize + multiple selection", function() { expect( 6 ); var other1 = $( "
    " ) .addClass( "other" ) - .css({ + .css( { width: 50, height: 50 - }) + } ) .appendTo( "body" ), other2 = $( "
    " ) .addClass( "other" ) - .css({ + .css( { width: 50, height: 50 - }) - .appendTo( "body"), - element = $( "#resizable1" ).resizable({ + } ) + .appendTo( "body" ), + element = $( "#resizable1" ).resizable( { alsoResize: other1.add( other2 ), containment: "#container" - }); + } ); testHelper.drag( ".ui-resizable-se", 400, 400 ); equal( element.width(), 300, "resizable constrained width at containment edge" ); @@ -461,6 +458,6 @@ test( "alsoResize + multiple selection", function() { equal( other1.height(), 150, "alsoResize o1 constrained height at containment edge" ); equal( other2.width(), 250, "alsoResize o2 constrained width at containment edge" ); equal( other2.height(), 150, "alsoResize o2 constrained height at containment edge" ); -}); +} ); } ); diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js index cc6f9f186de..ac45bcde0f9 100644 --- a/ui/widgets/resizable.js +++ b/ui/widgets/resizable.js @@ -16,11 +16,11 @@ //>>css.structure: ../themes/base/resizable.css //>>css.theme: ../themes/base/theme.css -(function( factory ) { +( function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. - define([ + define( [ "jquery", "./mouse", "../disable-selection", @@ -33,9 +33,9 @@ // Browser globals factory( jQuery ); } -}(function( $ ) { +}( function( $ ) { -$.widget("ui.resizable", $.ui.mouse, { +$.widget( "ui.resizable", $.ui.mouse, { version: "@VERSION", widgetEventPrefix: "resize", options: { @@ -57,6 +57,7 @@ $.widget("ui.resizable", $.ui.mouse, { maxWidth: null, minHeight: 10, minWidth: 10, + // See #7960 zIndex: 90, @@ -76,7 +77,7 @@ $.widget("ui.resizable", $.ui.mouse, { _hasScroll: function( el, a ) { - if ( $( el ).css( "overflow" ) === "hidden") { + if ( $( el ).css( "overflow" ) === "hidden" ) { return false; } @@ -103,25 +104,25 @@ $.widget("ui.resizable", $.ui.mouse, { o = this.options; this._addClass( "ui-resizable" ); - $.extend(this, { - _aspectRatio: !!(o.aspectRatio), + $.extend( this, { + _aspectRatio: !!( o.aspectRatio ), aspectRatio: o.aspectRatio, originalElement: this.element, _proportionallyResizeElements: [], _helper: o.helper || o.ghost || o.animate ? o.helper || "ui-resizable-helper" : null - }); + } ); // Wrap the element if it cannot hold child nodes - if (this.element[0].nodeName.match(/^(canvas|textarea|input|select|button|img)$/i)) { + if ( this.element[ 0 ].nodeName.match( /^(canvas|textarea|input|select|button|img)$/i ) ) { this.element.wrap( - $("
    ").css({ - position: this.element.css("position"), + $( "
    " ).css( { + position: this.element.css( "position" ), width: this.element.outerWidth(), height: this.element.outerHeight(), - top: this.element.css("top"), - left: this.element.css("left") - }) + top: this.element.css( "top" ), + left: this.element.css( "left" ) + } ) ); this.element = this.element.parent().data( @@ -130,38 +131,39 @@ $.widget("ui.resizable", $.ui.mouse, { this.elementIsWrapper = true; - this.element.css({ - marginLeft: this.originalElement.css("marginLeft"), - marginTop: this.originalElement.css("marginTop"), - marginRight: this.originalElement.css("marginRight"), - marginBottom: this.originalElement.css("marginBottom") - }); - this.originalElement.css({ + this.element.css( { + marginLeft: this.originalElement.css( "marginLeft" ), + marginTop: this.originalElement.css( "marginTop" ), + marginRight: this.originalElement.css( "marginRight" ), + marginBottom: this.originalElement.css( "marginBottom" ) + } ); + this.originalElement.css( { marginLeft: 0, marginTop: 0, marginRight: 0, marginBottom: 0 - }); + } ); + // support: Safari // Prevent Safari textarea resize - this.originalResizeStyle = this.originalElement.css("resize"); - this.originalElement.css("resize", "none"); + this.originalResizeStyle = this.originalElement.css( "resize" ); + this.originalElement.css( "resize", "none" ); - this._proportionallyResizeElements.push( this.originalElement.css({ + this._proportionallyResizeElements.push( this.originalElement.css( { position: "static", zoom: 1, display: "block" - }) ); + } ) ); // Support: IE9 // avoid IE jump (hard set the margin) - this.originalElement.css({ margin: this.originalElement.css("margin") }); + this.originalElement.css( { margin: this.originalElement.css( "margin" ) } ); this._proportionallyResize(); } this.handles = o.handles || - ( !$(".ui-resizable-handle", this.element).length ? + ( !$( ".ui-resizable-handle", this.element ).length ? "e,s,se" : { n: ".ui-resizable-n", e: ".ui-resizable-e", @@ -176,55 +178,55 @@ $.widget("ui.resizable", $.ui.mouse, { this._handles = $(); if ( this.handles.constructor === String ) { - if ( this.handles === "all") { + if ( this.handles === "all" ) { this.handles = "n,e,s,w,se,sw,ne,nw"; } - n = this.handles.split(","); + n = this.handles.split( "," ); this.handles = {}; - for (i = 0; i < n.length; i++) { + for ( i = 0; i < n.length; i++ ) { - handle = $.trim(n[i]); + handle = $.trim( n[ i ] ); hname = "ui-resizable-" + handle; - axis = $("
    "); + axis = $( "
    " ); this._addClass( axis, "ui-resizable-handle " + hname ); - axis.css({ zIndex: o.zIndex }); + axis.css( { zIndex: o.zIndex } ); - this.handles[handle] = ".ui-resizable-" + handle; - this.element.append(axis); + this.handles[ handle ] = ".ui-resizable-" + handle; + this.element.append( axis ); } } - this._renderAxis = function(target) { + this._renderAxis = function( target ) { var i, axis, padPos, padWrapper; target = target || this.element; - for (i in this.handles) { + for ( i in this.handles ) { - if (this.handles[i].constructor === String) { - this.handles[i] = this.element.children( this.handles[ i ] ).first().show(); + if ( this.handles[ i ].constructor === String ) { + this.handles[ i ] = this.element.children( this.handles[ i ] ).first().show(); } else if ( this.handles[ i ].jquery || this.handles[ i ].nodeType ) { this.handles[ i ] = $( this.handles[ i ] ); - this._on( this.handles[ i ], { "mousedown": that._mouseDown }); + this._on( this.handles[ i ], { "mousedown": that._mouseDown } ); } - if (this.elementIsWrapper && this.originalElement[0].nodeName.match(/^(textarea|input|select|button)$/i)) { + if ( this.elementIsWrapper && this.originalElement[ 0 ].nodeName.match( /^(textarea|input|select|button)$/i ) ) { - axis = $(this.handles[i], this.element); + axis = $( this.handles[ i ], this.element ); - padWrapper = /sw|ne|nw|se|n|s/.test(i) ? axis.outerHeight() : axis.outerWidth(); + padWrapper = /sw|ne|nw|se|n|s/.test( i ) ? axis.outerHeight() : axis.outerWidth(); padPos = [ "padding", - /ne|nw|n/.test(i) ? "Top" : - /se|sw|s/.test(i) ? "Bottom" : - /^e$/.test(i) ? "Right" : "Left" ].join(""); + /ne|nw|n/.test( i ) ? "Top" : + /se|sw|s/.test( i ) ? "Bottom" : + /^e$/.test( i ) ? "Right" : "Left" ].join( "" ); - target.css(padPos, padWrapper); + target.css( padPos, padWrapper ); this._proportionallyResize(); } @@ -234,40 +236,40 @@ $.widget("ui.resizable", $.ui.mouse, { }; // TODO: make renderAxis a prototype function - this._renderAxis(this.element); + this._renderAxis( this.element ); this._handles = this._handles.add( this.element.find( ".ui-resizable-handle" ) ); this._handles.disableSelection(); this._handles.on( "mouseover", function() { - if (!that.resizing) { - if (this.className) { - axis = this.className.match(/ui-resizable-(se|sw|ne|nw|n|e|s|w)/i); + if ( !that.resizing ) { + if ( this.className ) { + axis = this.className.match( /ui-resizable-(se|sw|ne|nw|n|e|s|w)/i ); } - that.axis = axis && axis[1] ? axis[1] : "se"; + that.axis = axis && axis[ 1 ] ? axis[ 1 ] : "se"; } - }); + } ); - if (o.autoHide) { + if ( o.autoHide ) { this._handles.hide(); this._addClass( "ui-resizable-autohide" ); - $(this.element) + $( this.element ) .on( "mouseenter", function() { - if (o.disabled) { + if ( o.disabled ) { return; } that._removeClass( "ui-resizable-autohide" ); that._handles.show(); - }) + } ) .on( "mouseleave", function() { - if (o.disabled) { + if ( o.disabled ) { return; } - if (!that.resizing) { + if ( !that.resizing ) { that._addClass( "ui-resizable-autohide" ); that._handles.hide(); } - }); + } ); } this._mouseInit(); @@ -278,42 +280,42 @@ $.widget("ui.resizable", $.ui.mouse, { this._mouseDestroy(); var wrapper, - _destroy = function(exp) { - $(exp) - .removeData("resizable") - .removeData("ui-resizable") - .off(".resizable") - .find(".ui-resizable-handle") + _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); + if ( this.elementIsWrapper ) { + _destroy( this.element ); wrapper = this.element; - this.originalElement.css({ - position: wrapper.css("position"), + this.originalElement.css( { + position: wrapper.css( "position" ), width: wrapper.outerWidth(), height: wrapper.outerHeight(), - top: wrapper.css("top"), - left: wrapper.css("left") - }).insertAfter( wrapper ); + top: wrapper.css( "top" ), + left: wrapper.css( "left" ) + } ).insertAfter( wrapper ); wrapper.remove(); } - this.originalElement.css("resize", this.originalResizeStyle); - _destroy(this.originalElement); + this.originalElement.css( "resize", this.originalResizeStyle ); + _destroy( this.originalElement ); return this; }, - _mouseCapture: function(event) { + _mouseCapture: function( event ) { var i, handle, capture = false; - for (i in this.handles) { - handle = $(this.handles[i])[0]; - if (handle === event.target || $.contains(handle, event.target)) { + for ( i in this.handles ) { + handle = $( this.handles[ i ] )[ 0 ]; + if ( handle === event.target || $.contains( handle, event.target ) ) { capture = true; } } @@ -321,7 +323,7 @@ $.widget("ui.resizable", $.ui.mouse, { return !this.options.disabled && capture; }, - _mouseStart: function(event) { + _mouseStart: function( event ) { var curleft, curtop, cursor, o = this.options, @@ -331,12 +333,12 @@ $.widget("ui.resizable", $.ui.mouse, { this._renderProxy(); - curleft = this._num(this.helper.css("left")); - curtop = this._num(this.helper.css("top")); + curleft = this._num( this.helper.css( "left" ) ); + curtop = this._num( this.helper.css( "top" ) ); - if (o.containment) { - curleft += $(o.containment).scrollLeft() || 0; - curtop += $(o.containment).scrollTop() || 0; + if ( o.containment ) { + curleft += $( o.containment ).scrollLeft() || 0; + curtop += $( o.containment ).scrollTop() || 0; } this.offset = this.helper.offset(); @@ -366,45 +368,45 @@ $.widget("ui.resizable", $.ui.mouse, { this.originalPosition = { left: curleft, top: curtop }; this.originalMousePosition = { left: event.pageX, top: event.pageY }; - this.aspectRatio = (typeof o.aspectRatio === "number") ? + this.aspectRatio = ( typeof o.aspectRatio === "number" ) ? o.aspectRatio : - ((this.originalSize.width / this.originalSize.height) || 1); + ( ( this.originalSize.width / this.originalSize.height ) || 1 ); - cursor = $(".ui-resizable-" + this.axis).css("cursor"); - $("body").css("cursor", cursor === "auto" ? this.axis + "-resize" : cursor); + cursor = $( ".ui-resizable-" + this.axis ).css( "cursor" ); + $( "body" ).css( "cursor", cursor === "auto" ? this.axis + "-resize" : cursor ); this._addClass( "ui-resizable-resizing" ); - this._propagate("start", event); + this._propagate( "start", event ); return true; }, - _mouseDrag: function(event) { + _mouseDrag: function( event ) { var data, props, smp = this.originalMousePosition, a = this.axis, - dx = (event.pageX - smp.left) || 0, - dy = (event.pageY - smp.top) || 0, - trigger = this._change[a]; + dx = ( event.pageX - smp.left ) || 0, + dy = ( event.pageY - smp.top ) || 0, + trigger = this._change[ a ]; this._updatePrevProperties(); - if (!trigger) { + if ( !trigger ) { return false; } - data = trigger.apply(this, [ event, dx, dy ]); + data = trigger.apply( this, [ event, dx, dy ] ); - this._updateVirtualBoundaries(event.shiftKey); - if (this._aspectRatio || event.shiftKey) { - data = this._updateRatio(data, event); + this._updateVirtualBoundaries( event.shiftKey ); + if ( this._aspectRatio || event.shiftKey ) { + data = this._updateRatio( data, event ); } - data = this._respectSize(data, event); + data = this._respectSize( data, event ); - this._updateCache(data); + this._updateCache( data ); - this._propagate("resize", event); + this._propagate( "resize", event ); props = this._applyChanges(); @@ -421,47 +423,47 @@ $.widget("ui.resizable", $.ui.mouse, { return false; }, - _mouseStop: function(event) { + _mouseStop: function( event ) { this.resizing = false; var pr, ista, soffseth, soffsetw, s, left, top, o = this.options, that = this; - if (this._helper) { + if ( this._helper ) { pr = this._proportionallyResizeElements; - ista = pr.length && (/textarea/i).test(pr[0].nodeName); - soffseth = ista && this._hasScroll(pr[0], "left") ? 0 : that.sizeDiff.height; + ista = pr.length && ( /textarea/i ).test( pr[ 0 ].nodeName ); + soffseth = ista && this._hasScroll( pr[ 0 ], "left" ) ? 0 : that.sizeDiff.height; soffsetw = ista ? 0 : that.sizeDiff.width; s = { - width: (that.helper.width() - soffsetw), - height: (that.helper.height() - soffseth) + width: ( that.helper.width() - soffsetw ), + height: ( that.helper.height() - soffseth ) }; - left = (parseInt(that.element.css("left"), 10) + - (that.position.left - that.originalPosition.left)) || null; - top = (parseInt(that.element.css("top"), 10) + - (that.position.top - that.originalPosition.top)) || null; + left = ( parseInt( that.element.css( "left" ), 10 ) + + ( that.position.left - that.originalPosition.left ) ) || null; + top = ( parseInt( that.element.css( "top" ), 10 ) + + ( that.position.top - that.originalPosition.top ) ) || null; - if (!o.animate) { - this.element.css($.extend(s, { top: top, left: left })); + if ( !o.animate ) { + this.element.css( $.extend( s, { top: top, left: left } ) ); } - that.helper.height(that.size.height); - that.helper.width(that.size.width); + that.helper.height( that.size.height ); + that.helper.width( that.size.width ); - if (this._helper && !o.animate) { + if ( this._helper && !o.animate ) { this._proportionallyResize(); } } - $("body").css("cursor", "auto"); + $( "body" ).css( "cursor", "auto" ); this._removeClass( "ui-resizable-resizing" ); - this._propagate("stop", event); + this._propagate( "stop", event ); - if (this._helper) { + if ( this._helper ) { this.helper.remove(); } @@ -501,51 +503,51 @@ $.widget("ui.resizable", $.ui.mouse, { return props; }, - _updateVirtualBoundaries: function(forceAspectRatio) { + _updateVirtualBoundaries: function( forceAspectRatio ) { var pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b, o = this.options; b = { - minWidth: this._isNumber(o.minWidth) ? o.minWidth : 0, - maxWidth: this._isNumber(o.maxWidth) ? o.maxWidth : Infinity, - minHeight: this._isNumber(o.minHeight) ? o.minHeight : 0, - maxHeight: this._isNumber(o.maxHeight) ? o.maxHeight : Infinity + minWidth: this._isNumber( o.minWidth ) ? o.minWidth : 0, + maxWidth: this._isNumber( o.maxWidth ) ? o.maxWidth : Infinity, + minHeight: this._isNumber( o.minHeight ) ? o.minHeight : 0, + maxHeight: this._isNumber( o.maxHeight ) ? o.maxHeight : Infinity }; - if (this._aspectRatio || forceAspectRatio) { + if ( this._aspectRatio || forceAspectRatio ) { pMinWidth = b.minHeight * this.aspectRatio; pMinHeight = b.minWidth / this.aspectRatio; pMaxWidth = b.maxHeight * this.aspectRatio; pMaxHeight = b.maxWidth / this.aspectRatio; - if (pMinWidth > b.minWidth) { + if ( pMinWidth > b.minWidth ) { b.minWidth = pMinWidth; } - if (pMinHeight > b.minHeight) { + if ( pMinHeight > b.minHeight ) { b.minHeight = pMinHeight; } - if (pMaxWidth < b.maxWidth) { + if ( pMaxWidth < b.maxWidth ) { b.maxWidth = pMaxWidth; } - if (pMaxHeight < b.maxHeight) { + if ( pMaxHeight < b.maxHeight ) { b.maxHeight = pMaxHeight; } } this._vBoundaries = b; }, - _updateCache: function(data) { + _updateCache: function( data ) { this.offset = this.helper.offset(); - if (this._isNumber(data.left)) { + if ( this._isNumber( data.left ) ) { this.position.left = data.left; } - if (this._isNumber(data.top)) { + if ( this._isNumber( data.top ) ) { this.position.top = data.top; } - if (this._isNumber(data.height)) { + if ( this._isNumber( data.height ) ) { this.size.height = data.height; } - if (this._isNumber(data.width)) { + if ( this._isNumber( data.width ) ) { this.size.width = data.width; } }, @@ -556,19 +558,19 @@ $.widget("ui.resizable", $.ui.mouse, { csize = this.size, a = this.axis; - if (this._isNumber(data.height)) { - data.width = (data.height * this.aspectRatio); - } else if (this._isNumber(data.width)) { - data.height = (data.width / this.aspectRatio); + if ( this._isNumber( data.height ) ) { + data.width = ( data.height * this.aspectRatio ); + } else if ( this._isNumber( data.width ) ) { + data.height = ( data.width / this.aspectRatio ); } - if (a === "sw") { - data.left = cpos.left + (csize.width - data.width); + if ( a === "sw" ) { + data.left = cpos.left + ( csize.width - data.width ); data.top = null; } - if (a === "nw") { - data.top = cpos.top + (csize.height - data.height); - data.left = cpos.left + (csize.width - data.width); + if ( a === "nw" ) { + data.top = cpos.top + ( csize.height - data.height ); + data.left = cpos.left + ( csize.width - data.width ); } return data; @@ -578,43 +580,43 @@ $.widget("ui.resizable", $.ui.mouse, { var o = this._vBoundaries, a = this.axis, - ismaxw = this._isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), - ismaxh = this._isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height), - isminw = this._isNumber(data.width) && o.minWidth && (o.minWidth > data.width), - isminh = this._isNumber(data.height) && o.minHeight && (o.minHeight > data.height), + ismaxw = this._isNumber( data.width ) && o.maxWidth && ( o.maxWidth < data.width ), + ismaxh = this._isNumber( data.height ) && o.maxHeight && ( o.maxHeight < data.height ), + isminw = this._isNumber( data.width ) && o.minWidth && ( o.minWidth > data.width ), + isminh = this._isNumber( data.height ) && o.minHeight && ( o.minHeight > data.height ), dw = this.originalPosition.left + this.originalSize.width, dh = this.position.top + this.size.height, - cw = /sw|nw|w/.test(a), ch = /nw|ne|n/.test(a); - if (isminw) { + cw = /sw|nw|w/.test( a ), ch = /nw|ne|n/.test( a ); + if ( isminw ) { data.width = o.minWidth; } - if (isminh) { + if ( isminh ) { data.height = o.minHeight; } - if (ismaxw) { + if ( ismaxw ) { data.width = o.maxWidth; } - if (ismaxh) { + if ( ismaxh ) { data.height = o.maxHeight; } - if (isminw && cw) { + if ( isminw && cw ) { data.left = dw - o.minWidth; } - if (ismaxw && cw) { + if ( ismaxw && cw ) { data.left = dw - o.maxWidth; } - if (isminh && ch) { + if ( isminh && ch ) { data.top = dh - o.minHeight; } - if (ismaxh && ch) { + if ( ismaxh && ch ) { data.top = dh - o.maxHeight; } // Fixing jump error on top/left - bug #2330 - if (!data.width && !data.height && !data.left && data.top) { + if ( !data.width && !data.height && !data.left && data.top ) { data.top = null; - } else if (!data.width && !data.height && !data.top && data.left) { + } else if ( !data.width && !data.height && !data.top && data.left ) { data.left = null; } @@ -650,7 +652,7 @@ $.widget("ui.resizable", $.ui.mouse, { _proportionallyResize: function() { - if (!this._proportionallyResizeElements.length) { + if ( !this._proportionallyResizeElements.length ) { return; } @@ -658,20 +660,20 @@ $.widget("ui.resizable", $.ui.mouse, { i = 0, element = this.helper || this.element; - for ( ; i < this._proportionallyResizeElements.length; i++) { + for ( ; i < this._proportionallyResizeElements.length; i++ ) { - prel = this._proportionallyResizeElements[i]; + prel = this._proportionallyResizeElements[ i ]; // TODO: Seems like a bug to cache this.outerDimensions // considering that we are in a loop. - if (!this.outerDimensions) { + if ( !this.outerDimensions ) { this.outerDimensions = this._getPaddingPlusBorderDimensions( prel ); } - prel.css({ - height: (element.height() - this.outerDimensions.height) || 0, - width: (element.width() - this.outerDimensions.width) || 0 - }); + prel.css( { + height: ( element.height() - this.outerDimensions.height ) || 0, + width: ( element.width() - this.outerDimensions.width ) || 0 + } ); } @@ -682,22 +684,22 @@ $.widget("ui.resizable", $.ui.mouse, { var el = this.element, o = this.options; this.elementOffset = el.offset(); - if (this._helper) { + if ( this._helper ) { - this.helper = this.helper || $("
    "); + this.helper = this.helper || $( "
    " ); this._addClass( this.helper, this._helper ); - this.helper.css({ + this.helper.css( { width: this.element.outerWidth() - 1, height: this.element.outerHeight() - 1, position: "absolute", left: this.elementOffset.left + "px", top: this.elementOffset.top + "px", zIndex: ++o.zIndex //TODO: Don't modify option - }); + } ); this.helper - .appendTo("body") + .appendTo( "body" ) .disableSelection(); } else { @@ -707,41 +709,41 @@ $.widget("ui.resizable", $.ui.mouse, { }, _change: { - e: function(event, dx) { + e: function( event, dx ) { return { width: this.originalSize.width + dx }; }, - w: function(event, dx) { + w: function( event, dx ) { var cs = this.originalSize, sp = this.originalPosition; return { left: sp.left + dx, width: cs.width - dx }; }, - n: function(event, dx, dy) { + n: function( event, dx, dy ) { var cs = this.originalSize, sp = this.originalPosition; return { top: sp.top + dy, height: cs.height - dy }; }, - s: function(event, dx, dy) { + s: function( event, dx, dy ) { return { height: this.originalSize.height + dy }; }, - se: function(event, dx, dy) { - return $.extend(this._change.s.apply(this, arguments), - this._change.e.apply(this, [ event, dx, dy ])); + se: function( event, dx, dy ) { + return $.extend( this._change.s.apply( this, arguments ), + this._change.e.apply( this, [ event, dx, dy ] ) ); }, - sw: function(event, dx, dy) { - return $.extend(this._change.s.apply(this, arguments), - this._change.w.apply(this, [ event, dx, dy ])); + sw: function( event, dx, dy ) { + return $.extend( this._change.s.apply( this, arguments ), + this._change.w.apply( this, [ event, dx, dy ] ) ); }, - ne: function(event, dx, dy) { - return $.extend(this._change.n.apply(this, arguments), - this._change.e.apply(this, [ event, dx, dy ])); + ne: function( event, dx, dy ) { + return $.extend( this._change.n.apply( this, arguments ), + this._change.e.apply( this, [ event, dx, dy ] ) ); }, - nw: function(event, dx, dy) { - return $.extend(this._change.n.apply(this, arguments), - this._change.w.apply(this, [ event, dx, dy ])); + nw: function( event, dx, dy ) { + return $.extend( this._change.n.apply( this, arguments ), + this._change.w.apply( this, [ event, dx, dy ] ) ); } }, - _propagate: function(n, event) { - $.ui.plugin.call(this, n, [ event, this.ui() ]); - (n !== "resize" && this._trigger(n, event, this.ui())); + _propagate: function( n, event ) { + $.ui.plugin.call( this, n, [ event, this.ui() ] ); + ( n !== "resize" && this._trigger( n, event, this.ui() ) ); }, plugins: {}, @@ -758,54 +760,54 @@ $.widget("ui.resizable", $.ui.mouse, { }; } -}); +} ); /* * Resizable Extensions */ -$.ui.plugin.add("resizable", "animate", { +$.ui.plugin.add( "resizable", "animate", { stop: function( event ) { - var that = $(this).resizable( "instance" ), + var that = $( this ).resizable( "instance" ), o = that.options, pr = that._proportionallyResizeElements, - ista = pr.length && (/textarea/i).test(pr[0].nodeName), - soffseth = ista && that._hasScroll(pr[0], "left") ? 0 : that.sizeDiff.height, + ista = pr.length && ( /textarea/i ).test( pr[ 0 ].nodeName ), + soffseth = ista && that._hasScroll( pr[ 0 ], "left" ) ? 0 : that.sizeDiff.height, soffsetw = ista ? 0 : that.sizeDiff.width, - style = { width: (that.size.width - soffsetw), height: (that.size.height - soffseth) }, - left = (parseInt(that.element.css("left"), 10) + - (that.position.left - that.originalPosition.left)) || null, - top = (parseInt(that.element.css("top"), 10) + - (that.position.top - that.originalPosition.top)) || null; + style = { width: ( that.size.width - soffsetw ), height: ( that.size.height - soffseth ) }, + left = ( parseInt( that.element.css( "left" ), 10 ) + + ( that.position.left - that.originalPosition.left ) ) || null, + top = ( parseInt( that.element.css( "top" ), 10 ) + + ( that.position.top - that.originalPosition.top ) ) || null; that.element.animate( - $.extend(style, top && left ? { top: top, left: left } : {}), { + $.extend( style, top && left ? { top: top, left: left } : {} ), { duration: o.animateDuration, easing: o.animateEasing, step: function() { var data = { - width: parseInt(that.element.css("width"), 10), - height: parseInt(that.element.css("height"), 10), - top: parseInt(that.element.css("top"), 10), - left: parseInt(that.element.css("left"), 10) + width: parseInt( that.element.css( "width" ), 10 ), + height: parseInt( that.element.css( "height" ), 10 ), + top: parseInt( that.element.css( "top" ), 10 ), + left: parseInt( that.element.css( "left" ), 10 ) }; - if (pr && pr.length) { - $(pr[0]).css({ width: data.width, height: data.height }); + if ( pr && pr.length ) { + $( pr[ 0 ] ).css( { width: data.width, height: data.height } ); } // Propagating resize, and updating values for each animation step - that._updateCache(data); - that._propagate("resize", event); + that._updateCache( data ); + that._propagate( "resize", event ); } } ); } -}); +} ); $.ui.plugin.add( "resizable", "containment", { @@ -843,9 +845,9 @@ $.ui.plugin.add( "resizable", "containment", { } else { element = $( ce ); p = []; - $([ "Top", "Right", "Left", "Bottom" ]).each(function( i, name ) { + $( [ "Top", "Right", "Left", "Bottom" ] ).each( function( i, name ) { p[ i ] = that._num( element.css( "padding" + name ) ); - }); + } ); that.containerOffset = element.offset(); that.containerPosition = element.position(); @@ -926,14 +928,14 @@ $.ui.plugin.add( "resizable", "containment", { } woset = Math.abs( that.sizeDiff.width + - (that._helper ? + ( that._helper ? that.offset.left - cop.left : - (that.offset.left - co.left)) ); + ( that.offset.left - co.left ) ) ); hoset = Math.abs( that.sizeDiff.height + - (that._helper ? + ( that._helper ? that.offset.top - cop.top : - (that.offset.top - co.top)) ); + ( that.offset.top - co.top ) ) ); if ( woset + that.size.width >= that.parentData.width ) { that.size.width = that.parentData.width - woset; @@ -971,80 +973,80 @@ $.ui.plugin.add( "resizable", "containment", { h = helper.outerHeight() - that.sizeDiff.height; if ( that._helper && !o.animate && ( /relative/ ).test( ce.css( "position" ) ) ) { - $( this ).css({ + $( this ).css( { left: ho.left - cop.left - co.left, width: w, height: h - }); + } ); } if ( that._helper && !o.animate && ( /static/ ).test( ce.css( "position" ) ) ) { - $( this ).css({ + $( this ).css( { left: ho.left - cop.left - co.left, width: w, height: h - }); + } ); } } -}); +} ); -$.ui.plugin.add("resizable", "alsoResize", { +$.ui.plugin.add( "resizable", "alsoResize", { start: function() { - var that = $(this).resizable( "instance" ), + var that = $( this ).resizable( "instance" ), o = that.options; - $(o.alsoResize).each(function() { - var el = $(this); - el.data("ui-resizable-alsoresize", { - width: parseInt(el.width(), 10), height: parseInt(el.height(), 10), - left: parseInt(el.css("left"), 10), top: parseInt(el.css("top"), 10) - }); - }); + $( o.alsoResize ).each( function() { + var el = $( this ); + el.data( "ui-resizable-alsoresize", { + width: parseInt( el.width(), 10 ), height: parseInt( el.height(), 10 ), + left: parseInt( el.css( "left" ), 10 ), top: parseInt( el.css( "top" ), 10 ) + } ); + } ); }, - resize: function(event, ui) { - var that = $(this).resizable( "instance" ), + resize: function( event, ui ) { + var that = $( this ).resizable( "instance" ), o = that.options, os = that.originalSize, op = that.originalPosition, delta = { - height: (that.size.height - os.height) || 0, - width: (that.size.width - os.width) || 0, - top: (that.position.top - op.top) || 0, - left: (that.position.left - op.left) || 0 + height: ( that.size.height - os.height ) || 0, + width: ( that.size.width - os.width ) || 0, + top: ( that.position.top - op.top ) || 0, + left: ( that.position.left - op.left ) || 0 }; - $(o.alsoResize).each(function() { - var el = $(this), start = $(this).data("ui-resizable-alsoresize"), style = {}, - css = el.parents(ui.originalElement[0]).length ? + $( o.alsoResize ).each( function() { + var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {}, + css = el.parents( ui.originalElement[ 0 ] ).length ? [ "width", "height" ] : [ "width", "height", "top", "left" ]; - $.each(css, function(i, prop) { - var sum = (start[prop] || 0) + (delta[prop] || 0); - if (sum && sum >= 0) { - style[prop] = sum || null; + $.each( css, function( i, prop ) { + var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 ); + if ( sum && sum >= 0 ) { + style[ prop ] = sum || null; } - }); + } ); - el.css(style); - }); + el.css( style ); + } ); }, stop: function() { - $(this).removeData("resizable-alsoresize"); + $( this ).removeData( "resizable-alsoresize" ); } -}); +} ); -$.ui.plugin.add("resizable", "ghost", { +$.ui.plugin.add( "resizable", "ghost", { start: function() { - var that = $(this).resizable( "instance" ), cs = that.size; + var that = $( this ).resizable( "instance" ), cs = that.size; that.ghost = that.originalElement.clone(); - that.ghost.css({ + that.ghost.css( { opacity: 0.25, display: "block", position: "relative", @@ -1053,7 +1055,7 @@ $.ui.plugin.add("resizable", "ghost", { margin: 0, left: 0, top: 0 - }); + } ); that._addClass( that.ghost, "ui-resizable-ghost" ); @@ -1065,80 +1067,80 @@ $.ui.plugin.add("resizable", "ghost", { that.ghost.addClass( this.options.ghost ); } - that.ghost.appendTo(that.helper); + that.ghost.appendTo( that.helper ); }, resize: function() { - var that = $(this).resizable( "instance" ); - if (that.ghost) { - that.ghost.css({ + var that = $( this ).resizable( "instance" ); + if ( that.ghost ) { + that.ghost.css( { position: "relative", height: that.size.height, width: that.size.width - }); + } ); } }, stop: function() { - var that = $(this).resizable( "instance" ); - if (that.ghost && that.helper) { - that.helper.get(0).removeChild(that.ghost.get(0)); + var that = $( this ).resizable( "instance" ); + if ( that.ghost && that.helper ) { + that.helper.get( 0 ).removeChild( that.ghost.get( 0 ) ); } } -}); +} ); -$.ui.plugin.add("resizable", "grid", { +$.ui.plugin.add( "resizable", "grid", { resize: function() { var outerDimensions, - that = $(this).resizable( "instance" ), + that = $( this ).resizable( "instance" ), o = that.options, cs = that.size, os = that.originalSize, op = that.originalPosition, a = that.axis, grid = typeof o.grid === "number" ? [ o.grid, o.grid ] : o.grid, - gridX = (grid[0] || 1), - gridY = (grid[1] || 1), - ox = Math.round((cs.width - os.width) / gridX) * gridX, - oy = Math.round((cs.height - os.height) / gridY) * gridY, + gridX = ( grid[ 0 ] || 1 ), + gridY = ( grid[ 1 ] || 1 ), + ox = Math.round( ( cs.width - os.width ) / gridX ) * gridX, + oy = Math.round( ( cs.height - os.height ) / gridY ) * gridY, newWidth = os.width + ox, newHeight = os.height + oy, - isMaxWidth = o.maxWidth && (o.maxWidth < newWidth), - isMaxHeight = o.maxHeight && (o.maxHeight < newHeight), - isMinWidth = o.minWidth && (o.minWidth > newWidth), - isMinHeight = o.minHeight && (o.minHeight > newHeight); + isMaxWidth = o.maxWidth && ( o.maxWidth < newWidth ), + isMaxHeight = o.maxHeight && ( o.maxHeight < newHeight ), + isMinWidth = o.minWidth && ( o.minWidth > newWidth ), + isMinHeight = o.minHeight && ( o.minHeight > newHeight ); o.grid = grid; - if (isMinWidth) { + if ( isMinWidth ) { newWidth += gridX; } - if (isMinHeight) { + if ( isMinHeight ) { newHeight += gridY; } - if (isMaxWidth) { + if ( isMaxWidth ) { newWidth -= gridX; } - if (isMaxHeight) { + if ( isMaxHeight ) { newHeight -= gridY; } - if (/^(se|s|e)$/.test(a)) { + if ( /^(se|s|e)$/.test( a ) ) { that.size.width = newWidth; that.size.height = newHeight; - } else if (/^(ne)$/.test(a)) { + } else if ( /^(ne)$/.test( a ) ) { that.size.width = newWidth; that.size.height = newHeight; that.position.top = op.top - oy; - } else if (/^(sw)$/.test(a)) { + } else if ( /^(sw)$/.test( a ) ) { that.size.width = newWidth; that.size.height = newHeight; that.position.left = op.left - ox; } else { - if ( newHeight - gridY <= 0 || newWidth - gridX <= 0) { + if ( newHeight - gridY <= 0 || newWidth - gridX <= 0 ) { outerDimensions = that._getPaddingPlusBorderDimensions( this ); } @@ -1161,8 +1163,8 @@ $.ui.plugin.add("resizable", "grid", { } } -}); +} ); return $.ui.resizable; -})); +} ) ); From 9bf3b5f98b3fbadcbb35084c6d2b7afe234bb509 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:58:48 -0400 Subject: [PATCH 09/27] Progressbar: Style updates Ref #14246 --- tests/unit/progressbar/common.js | 2 +- tests/unit/progressbar/core.js | 8 +++---- tests/unit/progressbar/events.js | 18 +++++++-------- tests/unit/progressbar/methods.js | 12 +++++----- tests/unit/progressbar/options.js | 38 +++++++++++++++---------------- ui/widgets/progressbar.js | 2 ++ 6 files changed, 41 insertions(+), 39 deletions(-) diff --git a/tests/unit/progressbar/common.js b/tests/unit/progressbar/common.js index baadb6d5319..566b96465d2 100644 --- a/tests/unit/progressbar/common.js +++ b/tests/unit/progressbar/common.js @@ -19,6 +19,6 @@ common.testWidget( "progressbar", { complete: null, create: null } -}); +} ); } ); diff --git a/tests/unit/progressbar/core.js b/tests/unit/progressbar/core.js index 8c09f67ae2a..3c5ad9e686a 100644 --- a/tests/unit/progressbar/core.js +++ b/tests/unit/progressbar/core.js @@ -19,11 +19,11 @@ test( "markup structure", function( assert ) { element.progressbar( "option", "value", 100 ); assert.hasClasses( value, "ui-progressbar-complete ui-widget-header ui-progressbar-value" ); equal( element.children().children().length, 0, "no overlay div" ); -}); +} ); test( "markup structure - indeterminate", function( assert ) { expect( 5 ); - var element = $( "#progressbar" ).progressbar({ value: false }), + var element = $( "#progressbar" ).progressbar( { value: false } ), children = element.children(); assert.hasClasses( element, "ui-progressbar ui-progressbar-indeterminate ui-widget ui-widget-content" ); @@ -32,7 +32,7 @@ test( "markup structure - indeterminate", function( assert ) { assert.hasClasses( children[ 0 ], "ui-progressbar-value" ); equal( children.children( ".ui-progressbar-overlay" ).length, 1, "Value has class ui-progressbar-overlay" ); -}); +} ); test( "accessibility", function() { expect( 11 ); @@ -59,6 +59,6 @@ test( "accessibility", function() { equal( element.attr( "aria-valuemin" ), 0, "aria-valuemin" ); equal( element.attr( "aria-valuemax" ), 150, "aria-valuemax" ); equal( element.attr( "aria-valuenow" ), null, "aria-valuenow" ); -}); +} ); } ); diff --git a/tests/unit/progressbar/events.js b/tests/unit/progressbar/events.js index 7f4926466f4..b767e1395f1 100644 --- a/tests/unit/progressbar/events.js +++ b/tests/unit/progressbar/events.js @@ -7,7 +7,7 @@ module( "progressbar: events" ); test( "create", function() { expect( 1 ); - $( "#progressbar" ).progressbar({ + $( "#progressbar" ).progressbar( { value: 5, create: function() { equal( $( this ).progressbar( "value" ), 5, "Correct value at create" ); @@ -15,8 +15,8 @@ test( "create", function() { change: function() { ok( false, "create has triggered change()" ); } - }); -}); + } ); +} ); test( "change", function() { expect( 2 ); @@ -24,19 +24,19 @@ test( "change", function() { element.one( "progressbarchange", function() { equal( element.progressbar( "value" ), 5, "change triggered for middle value" ); - }); + } ); element.progressbar( "value", 5 ); element.one( "progressbarchange", function() { equal( element.progressbar( "value" ), 100, "change triggered for final value" ); - }); + } ); element.progressbar( "value", 100 ); -}); +} ); test( "complete", function() { expect( 5 ); var value, changes = 0, - element = $( "#progressbar" ).progressbar({ + element = $( "#progressbar" ).progressbar( { change: function() { changes++; equal( element.progressbar( "value" ), value, "change at " + value ); @@ -45,7 +45,7 @@ test( "complete", function() { equal( changes, 3, "complete triggered after change and not on indeterminate" ); equal( element.progressbar( "value" ), 100, "value is 100" ); } - }); + } ); value = 5; element.progressbar( "value", value ); @@ -53,6 +53,6 @@ test( "complete", function() { element.progressbar( "value", value ); value = 100; element.progressbar( "value", value ); -}); +} ); } ); diff --git a/tests/unit/progressbar/methods.js b/tests/unit/progressbar/methods.js index 00de2f46e84..4bc4fa65ea5 100644 --- a/tests/unit/progressbar/methods.js +++ b/tests/unit/progressbar/methods.js @@ -9,8 +9,8 @@ test( "destroy", function( assert ) { expect( 1 ); assert.domEqual( "#progressbar", function() { $( "#progressbar" ).progressbar().progressbar( "destroy" ); - }); -}); + } ); +} ); test( "disable", function( assert ) { expect( 3 ); @@ -20,16 +20,16 @@ test( "disable", function( assert ) { assert.hasClasses( element.progressbar( "widget" ), "ui-state-disabled" ); ok( element.progressbar( "widget" ).attr( "aria-disabled" ), "element gets aria-disabled" ); assert.hasClasses( element.progressbar( "widget" ), "ui-progressbar-disabled" ); -}); +} ); test( "value", function() { expect( 3 ); - var element = $( "
    " ).progressbar({ value: 20 }); + var element = $( "
    " ).progressbar( { value: 20 } ); equal( element.progressbar( "value" ), 20, "correct value as getter" ); strictEqual( element.progressbar( "value", 30 ), element, "chainable as setter" ); equal( element.progressbar( "option", "value" ), 30, "correct value after setter" ); -}); +} ); test( "widget", function() { expect( 2 ); @@ -37,6 +37,6 @@ test( "widget", function() { widgetElement = element.progressbar( "widget" ); equal( widgetElement.length, 1, "one element" ); strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); -}); +} ); } ); diff --git a/tests/unit/progressbar/options.js b/tests/unit/progressbar/options.js index 533c1535136..fb6faac9a36 100644 --- a/tests/unit/progressbar/options.js +++ b/tests/unit/progressbar/options.js @@ -9,14 +9,14 @@ test( "{ value: 0 }, default", function() { expect( 1 ); $( "#progressbar" ).progressbar(); equal( $( "#progressbar" ).progressbar( "value" ), 0 ); -}); +} ); // Ticket #7231 - valueDiv should be hidden when value is at 0% test( "value: visibility of valueDiv", function() { expect( 4 ); - var element = $( "#progressbar" ).progressbar({ + var element = $( "#progressbar" ).progressbar( { value: 0 - }); + } ); ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ), "valueDiv hidden when value is initialized at 0" ); element.progressbar( "value", 1 ); @@ -28,52 +28,52 @@ test( "value: visibility of valueDiv", function() { element.progressbar( "value", 0 ); ok( element.children( ".ui-progressbar-value" ).is( ":hidden" ), "valueDiv hidden when value is set to 0" ); -}); +} ); test( "{ value: 5 }", function() { expect( 1 ); - $( "#progressbar" ).progressbar({ + $( "#progressbar" ).progressbar( { value: 5 - }); + } ); equal( $( "#progressbar" ).progressbar( "value" ), 5 ); -}); +} ); test( "{ value: -5 }", function() { expect( 1 ); - $( "#progressbar" ).progressbar({ + $( "#progressbar" ).progressbar( { value: -5 - }); + } ); equal( $( "#progressbar" ).progressbar( "value" ), 0, "value constrained at min" ); -}); +} ); test( "{ value: 105 }", function() { expect( 1 ); - $( "#progressbar" ).progressbar({ + $( "#progressbar" ).progressbar( { value: 105 - }); + } ); equal( $( "#progressbar" ).progressbar( "value" ), 100, "value constrained at max" ); -}); +} ); test( "{ value: 10, max: 5 }", function() { expect( 1 ); - $("#progressbar").progressbar({ + $( "#progressbar" ).progressbar( { max: 5, value: 10 - }); + } ); equal( $( "#progressbar" ).progressbar( "value" ), 5, "value constrained at max" ); -}); +} ); test( "change max below value", function() { expect( 1 ); - $("#progressbar").progressbar({ + $( "#progressbar" ).progressbar( { max: 10, value: 10 - }).progressbar( "option", "max", 5 ); + } ).progressbar( "option", "max", 5 ); equal( $( "#progressbar" ).progressbar( "value" ), 5, "value constrained at max" ); -}); +} ); } ); diff --git a/ui/widgets/progressbar.js b/ui/widgets/progressbar.js index 07ffaa97f8d..b2c7259ba03 100644 --- a/ui/widgets/progressbar.js +++ b/ui/widgets/progressbar.js @@ -100,6 +100,7 @@ return $.widget( "ui.progressbar", { }, _setOptions: function( options ) { + // Ensure "value" option is set after other values (like max) var value = options.value; delete options.value; @@ -112,6 +113,7 @@ return $.widget( "ui.progressbar", { _setOption: function( key, value ) { if ( key === "max" ) { + // Don't allow a max less than min value = Math.max( this.min, value ); } From 27a0e3854be5669c6a8f49ffd9437ee2bfaad626 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:59:04 -0400 Subject: [PATCH 10/27] Mouse: Style updates Ref #14246 --- ui/widgets/mouse.js | 116 +++++++++++++++++++++++--------------------- 1 file changed, 60 insertions(+), 56 deletions(-) diff --git a/ui/widgets/mouse.js b/ui/widgets/mouse.js index 2114f187000..4ead891a3e1 100644 --- a/ui/widgets/mouse.js +++ b/ui/widgets/mouse.js @@ -12,11 +12,11 @@ //>>description: Abstracts mouse-based interactions to assist in creating certain widgets. //>>docs: http://api.jqueryui.com/mouse/ -(function( factory ) { +( function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. - define([ + define( [ "jquery", "../ie", "../version", @@ -27,14 +27,14 @@ // Browser globals factory( jQuery ); } -}(function( $ ) { +}( function( $ ) { var mouseHandled = false; $( document ).on( "mouseup", function() { mouseHandled = false; -}); +} ); -return $.widget("ui.mouse", { +return $.widget( "ui.mouse", { version: "@VERSION", options: { cancel: "input, textarea, button, select, option", @@ -45,16 +45,16 @@ return $.widget("ui.mouse", { var that = this; this.element - .on("mousedown." + this.widgetName, function(event) { - return that._mouseDown(event); - }) - .on("click." + this.widgetName, function(event) { - if (true === $.data(event.target, that.widgetName + ".preventClickEvent")) { - $.removeData(event.target, that.widgetName + ".preventClickEvent"); + .on( "mousedown." + this.widgetName, function( event ) { + return that._mouseDown( event ); + } ) + .on( "click." + this.widgetName, function( event ) { + if ( true === $.data( event.target, that.widgetName + ".preventClickEvent" ) ) { + $.removeData( event.target, that.widgetName + ".preventClickEvent" ); event.stopImmediatePropagation(); return false; } - }); + } ); this.started = false; }, @@ -62,15 +62,16 @@ return $.widget("ui.mouse", { // TODO: make sure destroying one instance of mouse doesn't mess with // other instances of mouse _mouseDestroy: function() { - this.element.off("." + this.widgetName); + this.element.off( "." + this.widgetName ); if ( this._mouseMoveDelegate ) { this.document - .off("mousemove." + this.widgetName, this._mouseMoveDelegate) - .off("mouseup." + this.widgetName, this._mouseUpDelegate); + .off( "mousemove." + this.widgetName, this._mouseMoveDelegate ) + .off( "mouseup." + this.widgetName, this._mouseUpDelegate ); } }, - _mouseDown: function(event) { + _mouseDown: function( event ) { + // don't let more than one widget handle mouseStart if ( mouseHandled ) { return; @@ -79,45 +80,46 @@ return $.widget("ui.mouse", { this._mouseMoved = false; // We may have missed mouseup (out of window) - (this._mouseStarted && this._mouseUp(event)); + ( this._mouseStarted && this._mouseUp( event ) ); this._mouseDownEvent = event; var that = this, - btnIsLeft = (event.which === 1), + btnIsLeft = ( event.which === 1 ), + // event.target.nodeName works around a bug in IE 8 with // disabled inputs (#7620) - elIsCancel = (typeof this.options.cancel === "string" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false); - if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) { + elIsCancel = ( typeof this.options.cancel === "string" && event.target.nodeName ? $( event.target ).closest( this.options.cancel ).length : false ); + if ( !btnIsLeft || elIsCancel || !this._mouseCapture( event ) ) { return true; } this.mouseDelayMet = !this.options.delay; - if (!this.mouseDelayMet) { - this._mouseDelayTimer = setTimeout(function() { + if ( !this.mouseDelayMet ) { + this._mouseDelayTimer = setTimeout( function() { that.mouseDelayMet = true; - }, this.options.delay); + }, this.options.delay ); } - if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) { - this._mouseStarted = (this._mouseStart(event) !== false); - if (!this._mouseStarted) { + if ( this._mouseDistanceMet( event ) && this._mouseDelayMet( event ) ) { + this._mouseStarted = ( this._mouseStart( event ) !== false ); + if ( !this._mouseStarted ) { event.preventDefault(); return true; } } // Click event may never have fired (Gecko & Opera) - if (true === $.data(event.target, this.widgetName + ".preventClickEvent")) { - $.removeData(event.target, this.widgetName + ".preventClickEvent"); + if ( true === $.data( event.target, this.widgetName + ".preventClickEvent" ) ) { + $.removeData( event.target, this.widgetName + ".preventClickEvent" ); } // These delegates are required to keep context - this._mouseMoveDelegate = function(event) { - return that._mouseMove(event); + this._mouseMoveDelegate = function( event ) { + return that._mouseMove( event ); }; - this._mouseUpDelegate = function(event) { - return that._mouseUp(event); + this._mouseUpDelegate = function( event ) { + return that._mouseUp( event ); }; this.document @@ -130,15 +132,17 @@ return $.widget("ui.mouse", { return true; }, - _mouseMove: function(event) { + _mouseMove: function( event ) { + // Only check for mouseups outside the document if you've moved inside the document // at least once. This prevents the firing of mouseup in the case of IE<9, which will // fire a mousemove event if content is placed under the cursor. See #7778 // Support: IE <9 if ( this._mouseMoved ) { + // IE mouseup check - mouseup happened when mouse was out of window - if ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) { - return this._mouseUp(event); + if ( $.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button ) { + return this._mouseUp( event ); // Iframe mouseup check - mouseup occurred in another document } else if ( !event.which ) { @@ -150,56 +154,56 @@ return $.widget("ui.mouse", { this._mouseMoved = true; } - if (this._mouseStarted) { - this._mouseDrag(event); + if ( this._mouseStarted ) { + this._mouseDrag( event ); return event.preventDefault(); } - if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) { + if ( this._mouseDistanceMet( event ) && this._mouseDelayMet( event ) ) { this._mouseStarted = - (this._mouseStart(this._mouseDownEvent, event) !== false); - (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event)); + ( this._mouseStart( this._mouseDownEvent, event ) !== false ); + ( this._mouseStarted ? this._mouseDrag( event ) : this._mouseUp( event ) ); } return !this._mouseStarted; }, - _mouseUp: function(event) { + _mouseUp: function( event ) { this.document .off( "mousemove." + this.widgetName, this._mouseMoveDelegate ) .off( "mouseup." + this.widgetName, this._mouseUpDelegate ); - if (this._mouseStarted) { + if ( this._mouseStarted ) { this._mouseStarted = false; - if (event.target === this._mouseDownEvent.target) { - $.data(event.target, this.widgetName + ".preventClickEvent", true); + if ( event.target === this._mouseDownEvent.target ) { + $.data( event.target, this.widgetName + ".preventClickEvent", true ); } - this._mouseStop(event); + this._mouseStop( event ); } mouseHandled = false; return false; }, - _mouseDistanceMet: function(event) { - return (Math.max( - Math.abs(this._mouseDownEvent.pageX - event.pageX), - Math.abs(this._mouseDownEvent.pageY - event.pageY) + _mouseDistanceMet: function( event ) { + return ( Math.max( + Math.abs( this._mouseDownEvent.pageX - event.pageX ), + Math.abs( this._mouseDownEvent.pageY - event.pageY ) ) >= this.options.distance ); }, - _mouseDelayMet: function(/* event */) { + _mouseDelayMet: function( /* event */ ) { return this.mouseDelayMet; }, // These are placeholder methods, to be overriden by extending plugin - _mouseStart: function(/* event */) {}, - _mouseDrag: function(/* event */) {}, - _mouseStop: function(/* event */) {}, - _mouseCapture: function(/* event */) { return true; } -}); + _mouseStart: function( /* event */ ) {}, + _mouseDrag: function( /* event */ ) {}, + _mouseStop: function( /* event */ ) {}, + _mouseCapture: function( /* event */ ) { return true; } +} ); -})); +} ) ); From 1b0d1485224a5481679666ea12910fc7e4d80786 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:59:13 -0400 Subject: [PATCH 11/27] Menu: Style updates Ref #14246 --- tests/unit/menu/common.js | 2 +- tests/unit/menu/core.js | 16 ++-- tests/unit/menu/events.js | 162 +++++++++++++++++++------------------ tests/unit/menu/methods.js | 24 +++--- tests/unit/menu/options.js | 66 +++++++-------- ui/widgets/menu.js | 3 + 6 files changed, 139 insertions(+), 134 deletions(-) diff --git a/tests/unit/menu/common.js b/tests/unit/menu/common.js index adb74cf0a9a..96815c6b27f 100644 --- a/tests/unit/menu/common.js +++ b/tests/unit/menu/common.js @@ -24,6 +24,6 @@ common.testWidget( "menu", { focus: null, select: null } -}); +} ); } ); diff --git a/tests/unit/menu/core.js b/tests/unit/menu/core.js index 68f613ee1da..a8e0ece00a3 100644 --- a/tests/unit/menu/core.js +++ b/tests/unit/menu/core.js @@ -23,9 +23,9 @@ test( "markup structure", function( assert ) { equal( items.eq( 1 ).children().length, 1, "Item has exactly 1 child when it does not have a sub menu" ); assert.hasClasses( items[ 2 ], "ui-menu-item" ); equal( items.eq( 2 ).children().length, 1, "Item has exactly 1 child when it does not have a sub menu" ); -}); +} ); -test( "accessibility", function () { +test( "accessibility", function() { expect( 4 ); var element = $( "#menu1" ).menu(); @@ -39,7 +39,7 @@ test( "accessibility", function () { ok( /^ui-id-\d+$/.test( element.attr( "aria-activedescendant" ) ), "aria-activedescendant from generated id" ); // Item roles are tested in the role option tests -}); +} ); asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", function() { expect( 1 ); @@ -49,15 +49,15 @@ asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", functio $( "#testID1" ).on( "click", function() { $( "#test9044" ).trigger( "focus" ); - }); + } ); testHelper.click( element, "3" ); setTimeout( function() { equal( document.activeElement.id, "test9044", "Focus was swallowed by menu" ); $( "#test9044" ).remove(); start(); - }); -}); + } ); +} ); asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected item for Selectmenu", function( assert ) { expect( 1 ); @@ -70,7 +70,7 @@ asyncTest( "#9532: Need a way in Menu to keep ui-state-active class on selected setTimeout( function() { assert.hasClasses( wrapper, "ui-state-active" ); start(); - }); -}); + } ); +} ); } ); diff --git a/tests/unit/menu/events.js b/tests/unit/menu/events.js index 790e5912c23..1500c3478b0 100644 --- a/tests/unit/menu/events.js +++ b/tests/unit/menu/events.js @@ -12,15 +12,15 @@ module( "menu: events", { setup: function() { testHelper.clearLog(); } -}); +} ); test( "handle click on menu", function() { expect( 1 ); - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { select: function() { log(); } - }); + } ); log( "click", true ); click( element, "1" ); log( "afterclick" ); @@ -28,16 +28,16 @@ test( "handle click on menu", function() { click( element, "3" ); click( element, "1" ); equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." ); -}); +} ); test( "handle click on custom item menu", function() { expect( 1 ); - var element = $( "#menu5" ).menu({ + var element = $( "#menu5" ).menu( { select: function() { log(); }, menus: ".menu" - }); + } ); log( "click", true ); click( element, "1" ); log( "afterclick" ); @@ -45,75 +45,77 @@ test( "handle click on custom item menu", function() { click( element, "3" ); click( element, "1" ); equal( logOutput(), "click,1,afterclick,2,3,1", "Click order not valid." ); -}); +} ); asyncTest( "handle blur", function() { expect( 1 ); var blurHandled = false, - element = $( "#menu1" ).menu({ + element = $( "#menu1" ).menu( { blur: function( event ) { + // Ignore duplicate blur event fired by IE if ( !blurHandled ) { blurHandled = true; equal( event.type, "menublur", "blur event.type is 'menublur'" ); } } - }); + } ); click( element, "1" ); - setTimeout(function() { + setTimeout( function() { element.trigger( "blur" ); - setTimeout(function() { + setTimeout( function() { start(); }, 350 ); - }); -}); + } ); +} ); asyncTest( "handle blur via click outside", function() { expect( 1 ); var blurHandled = false, - element = $( "#menu1" ).menu({ + element = $( "#menu1" ).menu( { blur: function( event ) { + // Ignore duplicate blur event fired by IE if ( !blurHandled ) { blurHandled = true; equal( event.type, "menublur", "blur event.type is 'menublur'" ); } } - }); + } ); click( element, "1" ); - setTimeout(function() { - $( "", { id: "remove"} ).appendTo( "body" ).trigger( "click" ); - setTimeout(function() { + setTimeout( function() { + $( "", { id: "remove" } ).appendTo( "body" ).trigger( "click" ); + setTimeout( function() { start(); }, 350 ); - }); -}); + } ); +} ); asyncTest( "handle focus of menu with active item", function() { expect( 1 ); - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { focus: function( event ) { log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); } - }); + } ); log( "focus", true ); element[ 0 ].focus(); - setTimeout(function() { + setTimeout( function() { element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element[ 0 ].blur(); - setTimeout(function() { + setTimeout( function() { element[ 0 ].focus(); - setTimeout(function() { + setTimeout( function() { equal( logOutput(), "focus,0,1,2,2", "current active item remains active" ); start(); - }); - }); - }); -}); + } ); + } ); + } ); +} ); test( "handle mouseenter on nested menu item", function( assert ) { assert.expect( 8 ); @@ -186,12 +188,12 @@ asyncTest( "handle submenu auto collapse: mouseleave, default markup", function( element.find( "li:nth-child(7)" ).trigger( "mouseenter" ); setTimeout( menumouseleave1, 25 ); -}); +} ); asyncTest( "handle submenu auto collapse: mouseleave, custom markup", function() { expect( 4 ); $.ui.menu.prototype.delay = 1; - var element = $( "#menu5" ).menu({ menus: ".menu" }), + var element = $( "#menu5" ).menu( { menus: ".menu" } ), event = $.Event( "mouseenter" ); function menumouseleave1() { @@ -217,22 +219,22 @@ asyncTest( "handle submenu auto collapse: mouseleave, custom markup", function() element.find( ":nth-child(7)" ).trigger( "mouseenter" ); setTimeout( menumouseleave1, 25 ); -}); +} ); asyncTest( "handle keyboard navigation on menu without scroll and without submenus", function() { expect( 12 ); - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { select: function( event, ui ) { log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); } - }); + } ); log( "keydown", true ); element[ 0 ].focus(); - setTimeout(function() { + setTimeout( function() { element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" ); @@ -282,19 +284,19 @@ asyncTest( "handle keyboard navigation on menu without scroll and without submen equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" ); start(); - }); -}); + } ); +} ); asyncTest( "handle keyboard navigation on menu without scroll and with submenus", function() { expect( 16 ); - var element = $( "#menu2" ).menu({ + var element = $( "#menu2" ).menu( { select: function( event, ui ) { - log( $( ui.item[0] ).text() ); + log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() ); } - }); + } ); log( "keydown", true ); element.one( "menufocus", function() { @@ -302,7 +304,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( logOutput(), "keydown,1,2", "Keydown DOWN" ); setTimeout( menukeyboard1 ); - }); + } ); element.trigger( "focus" ); function menukeyboard1() { @@ -322,7 +324,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } ); - setTimeout(function() { + setTimeout( function() { equal( logOutput(), "keydown,1,2,3,4,0", "Keydown RIGHT (open submenu)" ); setTimeout( menukeyboard2 ); } ); @@ -403,22 +405,22 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" equal( logOutput(), "keydown,Ada", "Keydown ENTER (open submenu)" ); start(); } -}); +} ); asyncTest( "handle keyboard navigation on menu with scroll and without submenus", function() { expect( 14 ); - var element = $( "#menu3" ).menu({ + var element = $( "#menu3" ).menu( { select: function( event, ui ) { log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() ); } - }); + } ); log( "keydown", true ); element[ 0 ].focus(); - setTimeout(function() { + setTimeout( function() { element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( logOutput(), "keydown,0,1,2", "Keydown DOWN" ); @@ -477,19 +479,19 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus" equal( logOutput(), "keydown,Aberdeen", "Keydown ENTER" ); start(); - }); -}); + } ); +} ); asyncTest( "handle keyboard navigation on menu with scroll and with submenus", function() { expect( 14 ); - var element = $( "#menu4" ).menu({ + var element = $( "#menu4" ).menu( { select: function( event, ui ) { log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index()); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active:last" ).parent().index() ); } - }); + } ); log( "keydown", true ); element.one( "menufocus", function() { @@ -497,7 +499,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); equal( logOutput(), "keydown,1,2", "Keydown DOWN" ); setTimeout( menukeyboard1 ); - }); + } ); element.trigger( "focus" ); function menukeyboard1() { @@ -573,18 +575,18 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f start(); } -}); +} ); asyncTest( "handle keyboard navigation and mouse click on menu with disabled items", function() { expect( 6 ); - var element = $( "#menu6" ).menu({ + var element = $( "#menu6" ).menu( { select: function( event, ui ) { - log( $( ui.item[0] ).text() ); + log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index()); + log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); } - }); + } ); log( "keydown", true ); element.one( "menufocus", function() { @@ -592,7 +594,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); equal( logOutput(), "keydown,1", "Keydown focus but not select disabled item" ); setTimeout( menukeyboard1, 50 ); - }); + } ); element.trigger( "focus" ); function menukeyboard1() { @@ -624,19 +626,19 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite }, 50 ); }, 50 ); } -}); +} ); asyncTest( "handle keyboard navigation and mouse click on menu with dividers and group labels", function() { expect( 2 ); - var element = $( "#menu7" ).menu({ + var element = $( "#menu7" ).menu( { items: "> :not('.ui-menu-group')", select: function( event, ui ) { - log( $( ui.item[0] ).text() ); + log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); } - }); + } ); log( "keydown", true ); element.one( "menufocus", function() { @@ -644,7 +646,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" ); setTimeout( menukeyboard1, 50 ); - }); + } ); element.trigger( "focus" ); function menukeyboard1() { @@ -655,15 +657,15 @@ asyncTest( "handle keyboard navigation and mouse click on menu with dividers and equal( logOutput(), "keydown,3,4,7", "Keydown focus skips divider and group label" ); start(); } -}); +} ); asyncTest( "handle keyboard navigation with spelling of menu items", function() { expect( 3 ); - var element = $( "#menu2" ).menu({ + var element = $( "#menu2" ).menu( { focus: function( event ) { log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); } - }); + } ); log( "keydown", true ); element.one( "menufocus", function() { @@ -676,17 +678,17 @@ asyncTest( "handle keyboard navigation with spelling of menu items", function() element.simulate( "keydown", { keyCode: 83 } ); equal( logOutput(), "keydown,0,1,3,4,5", "Keydown focus Saarland ignoring leading space" ); start(); - }); + } ); element[ 0 ].focus(); -}); +} ); asyncTest( "Keep focus on selected item (see #10644)", function() { expect( 1 ); - var element = $( "#menu2" ).menu({ + var element = $( "#menu2" ).menu( { focus: function( event ) { log( $( event.target ).find( ".ui-menu-item-wrapper.ui-state-active" ).parent().index() ); } - }); + } ); log( "keydown", true ); element.one( "menufocus", function() { @@ -698,40 +700,40 @@ asyncTest( "Keep focus on selected item (see #10644)", function() { equal( logOutput(), "keydown,0,1,3,3,3", "Focus stays on 'Addyston', even after other options are eliminated" ); start(); - }); + } ); element[ 0 ].focus(); -}); +} ); test( "#9469: Stopping propagation in a select event should not suppress subsequent select events.", function() { expect( 1 ); - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { select: function( event ) { log(); event.stopPropagation(); } - }); + } ); click( element, "1" ); click( element, "2" ); equal( logOutput(), "1,2", "Both select events were not triggered." ); -}); +} ); asyncTest( "#10571: When typing in a menu, only menu-items should be focused", function( assert ) { expect( 3 ); - var element = $( "#menu8" ).menu({ + var element = $( "#menu8" ).menu( { focus: function( event, ui ) { equal( ui.item.length, 1, "There should only be one match when filtering" ); assert.hasClasses( ui.item, "ui-menu-item" ); equal( ui.item.text(), "-Saarland", "element has correct text" ); } - }); + } ); - setTimeout(function() { + setTimeout( function() { element.menu( "widget" ).simulate( "keydown", { keyCode: "-".charCodeAt( 0 ) } ); start(); - }); -}); + } ); +} ); } ); diff --git a/tests/unit/menu/methods.js b/tests/unit/menu/methods.js index 28482d65db6..dc857cc42d3 100644 --- a/tests/unit/menu/methods.js +++ b/tests/unit/menu/methods.js @@ -12,25 +12,25 @@ module( "menu: methods", { setup: function() { testHelper.clearLog(); } -}); +} ); test( "destroy", function( assert ) { expect( 2 ); assert.domEqual( "#menu2", function() { $( "#menu2" ).menu().menu( "destroy" ); - }); + } ); assert.domEqual( "#menu5", function() { - $( "#menu5").menu().menu( "destroy" ); - }); -}); + $( "#menu5" ).menu().menu( "destroy" ); + } ); +} ); test( "enable/disable", function( assert ) { expect( 3 ); - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { select: function() { log(); } - }); + } ); element.menu( "disable" ); assert.hasClasses( element, "ui-state-disabled" ); log( "click", true ); @@ -42,7 +42,7 @@ test( "enable/disable", function( assert ) { click( element, "1" ); log( "afterclick" ); equal( logOutput(), "click,afterclick,click,1,afterclick", "Click order not valid." ); -}); +} ); test( "refresh", function() { expect( 5 ); @@ -56,7 +56,7 @@ test( "refresh", function() { equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); element.children( ":last" ).remove().end().menu( "refresh" ); equal( element.find( ".ui-menu-item" ).length, 5, "Incorrect number of menu items" ); -}); +} ); test( "refresh submenu", function() { expect( 2 ); @@ -65,7 +65,7 @@ test( "refresh submenu", function() { element.find( "ul" ).addBack().append( "
  • New Item
  • " ); element.menu( "refresh" ); equal( element.find( "ul:first .ui-menu-item" ).length, 4 ); -}); +} ); test( "refresh icons (see #9377)", function( assert ) { expect( 3 ); @@ -79,7 +79,7 @@ test( "refresh icons (see #9377)", function( assert ) { element.find( "li:first .ui-menu-item-wrapper" ).html( "Save" ); element.menu( "refresh" ); assert.lacksClasses( element, "ui-menu-icons" ); -}); +} ); test( "widget", function() { expect( 2 ); @@ -87,7 +87,7 @@ test( "widget", function() { widgetElement = element.menu( "widget" ); equal( widgetElement.length, 1, "one element" ); strictEqual( widgetElement[ 0 ], element[ 0 ], "same element" ); -}); +} ); // TODO: test focus method diff --git a/tests/unit/menu/options.js b/tests/unit/menu/options.js index e22adccf68a..dd27ec5c209 100644 --- a/tests/unit/menu/options.js +++ b/tests/unit/menu/options.js @@ -12,62 +12,62 @@ module( "menu: options", { setup: function() { testHelper.clearLog(); } -}); +} ); test( "{ disabled: true }", function( assert ) { expect( 2 ); - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { disabled: true, select: function() { log(); } - }); + } ); assert.hasClasses( element, "ui-state-disabled" ); log( "click", true ); click( element, "1" ); log( "afterclick" ); equal( logOutput(), "click,afterclick", "Click order not valid." ); -}); +} ); test( "{ disabled: false }", function( assert ) { expect( 2 ); - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { disabled: false, select: function() { log(); } - }); + } ); assert.lacksClasses( element, "ui-state-disabled" ); log( "click", true ); click( element, "1" ); log( "afterclick" ); equal( logOutput(), "click,1,afterclick", "Click order not valid." ); -}); +} ); test( "{ icons: default }", function( assert ) { expect( 8 ); var element = $( "#menu2" ).menu(); element.find( ".ui-menu-icon" ).each( function() { assert.hasClasses( this, "ui-menu-icon ui-icon ui-icon-caret-1-e" ); - }); + } ); element.menu( "option", "icons.submenu", "ui-icon-triangle-1-e" ); element.find( ".ui-menu-icon" ).each( function() { assert.hasClasses( this, "ui-menu-icon ui-icon ui-icon-triangle-1-e" ); - }); -}); + } ); +} ); test( "{ icons: { submenu: 'custom' } }", function( assert ) { expect( 4 ); - var element = $( "#menu2" ).menu({ + var element = $( "#menu2" ).menu( { icons: { submenu: "custom-class" } - }); + } ); element.find( ".ui-menu-icon" ).each( function() { assert.hasClasses( this, "ui-menu-icon ui-icon custom-class" ); - }); -}); + } ); +} ); // TODO: test menus option @@ -79,47 +79,47 @@ test( "{ role: 'menu' } ", function( assert ) { expect( 2 + 3 * items.length ); equal( element.attr( "role" ), "menu" ); ok( items.length > 0, "number of menu items" ); - items.each(function( item ) { + items.each( function( item ) { assert.hasClasses( $( this ), "ui-menu-item" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), - "menuitem", "menu item ("+ item + ") role" ); + "menuitem", "menu item (" + item + ") role" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", - "tabindex for menu item ("+ item + ")" ); - }); -}); + "tabindex for menu item (" + item + ")" ); + } ); +} ); test( "{ role: 'listbox' } ", function( assert ) { - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { role: "listbox" - }), + } ), items = element.find( "li" ); expect( 2 + 3 * items.length ); equal( element.attr( "role" ), "listbox" ); ok( items.length > 0, "number of menu items" ); - items.each(function( item ) { + items.each( function( item ) { assert.hasClasses( $( this ), "ui-menu-item" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), "option", - "menu item ("+ item + ") role" ); + "menu item (" + item + ") role" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", - "tabindex for menu item ("+ item + ")" ); - }); -}); + "tabindex for menu item (" + item + ")" ); + } ); +} ); test( "{ role: null }", function( assert ) { - var element = $( "#menu1" ).menu({ + var element = $( "#menu1" ).menu( { role: null - }), + } ), items = element.find( "li" ); expect( 2 + 3 * items.length ); equal( element.attr( "role" ), null ); ok( items.length > 0, "number of menu items" ); - items.each(function( item ) { + items.each( function( item ) { assert.hasClasses( $( this ), "ui-menu-item" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "role" ), null, - "menu item ("+ item + ") role" ); + "menu item (" + item + ") role" ); equal( $( this ).find( ".ui-menu-item-wrapper" ).attr( "tabindex" ), "-1", - "tabindex for menu item ("+ item + ")" ); - }); -}); + "tabindex for menu item (" + item + ")" ); + } ); +} ); } ); diff --git a/ui/widgets/menu.js b/ui/widgets/menu.js index 48258e85e95..f7fa2b65193 100644 --- a/ui/widgets/menu.js +++ b/ui/widgets/menu.js @@ -136,6 +136,7 @@ return $.widget( "ui.menu", { mouseleave: "collapseAll", "mouseleave .ui-menu": "collapseAll", focus: function( event, keepActiveItem ) { + // If there's already an active item, keep it active // If not, activate the first item var item = this.active || this.element.find( this.options.items ).eq( 0 ); @@ -475,6 +476,7 @@ return $.widget( "ui.menu", { collapseAll: function( event, all ) { clearTimeout( this.timer ); this.timer = this._delay( function() { + // If we were passed an event, look for the submenu that contains the event var currentMenu = all ? this.element : $( event && event.target ).closest( this.element.find( ".ui-menu" ) ); @@ -633,6 +635,7 @@ return $.widget( "ui.menu", { }, select: function( event ) { + // TODO: It should never be possible to not have an active item at this // point, but the tests don't trigger mouseenter before click. this.active = this.active || $( event.target ).closest( ".ui-menu-item" ); From e62e6c2610c5ae439e716d61ff9f58a763f7df03 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:59:32 -0400 Subject: [PATCH 12/27] 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 ecbc9b1a1b7..fc086757f35 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 5d0e55d6f7a..d4bdb9dc02c 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 75951c1bc32..c4ce0378c5d 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 9c84b099f14..68df6e506fb 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 460fa1aa6c0..b9bc5d6fb28 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 10ac484996f..c159be56f5b 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 c2035ce8cc4..856c2d21517 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 6ba8d8c8090..136a32b800e 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; -})); +} ) ); From ec215f8c984c81b8914120c54dcafbdd35e62318 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Mon, 24 Aug 2015 08:59:44 -0400 Subject: [PATCH 13/27] Draggable: Style updates Ref #14246 --- tests/unit/draggable/common.js | 2 +- tests/unit/draggable/core.js | 114 +++---- tests/unit/draggable/events.js | 46 +-- tests/unit/draggable/helper.js | 32 +- tests/unit/draggable/methods.js | 40 +-- tests/unit/draggable/options.js | 511 ++++++++++++++++---------------- ui/widgets/draggable.js | 394 ++++++++++++------------ 7 files changed, 579 insertions(+), 560 deletions(-) diff --git a/tests/unit/draggable/common.js b/tests/unit/draggable/common.js index c9a687ce3c7..228bba5dc1b 100644 --- a/tests/unit/draggable/common.js +++ b/tests/unit/draggable/common.js @@ -43,6 +43,6 @@ common.testWidget( "draggable", { start: null, stop: null } -}); +} ); } ); diff --git a/tests/unit/draggable/core.js b/tests/unit/draggable/core.js index d6eaeb2aaba..8bc751e0ebe 100644 --- a/tests/unit/draggable/core.js +++ b/tests/unit/draggable/core.js @@ -14,84 +14,84 @@ test( "element types", function( assert ) { ",table,fieldset,address,ins,del,em,strong,q,cite,dfn,abbr" + ",acronym,code,samp,kbd,var,img,hr" + ",input,button,label,select,iframe" - ).split(","); + ).split( "," ); expect( typeNames.length * 2 ); $.each( typeNames, function( i ) { var offsetBefore, offsetAfter, typeName = typeNames[ i ], - el = $( document.createElement( typeName ) ).appendTo("#qunit-fixture"); + el = $( document.createElement( typeName ) ).appendTo( "#qunit-fixture" ); if ( typeName === "table" ) { - el.append("content"); + el.append( "content" ); } - el.draggable({ cancel: "" }); + el.draggable( { cancel: "" } ); offsetBefore = el.offset(); el.simulate( "drag", { dx: 50, dy: 50 - }); + } ); offsetAfter = el.offset(); // Support: FF, Chrome, and IE9, // there are some rounding errors in so we can't say equal, we have to settle for close enough assert.close( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + "> left" ); assert.close( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + "> top" ); - el.draggable("destroy"); + el.draggable( "destroy" ); el.remove(); - }); -}); + } ); +} ); test( "No options, relative", function() { expect( 2 ); testHelper.shouldMove( $( "#draggable1" ).draggable(), "no options, relative" ); -}); +} ); test( "No options, absolute", function() { expect( 2 ); testHelper.shouldMove( $( "#draggable2" ).draggable(), "no options, absolute" ); -}); +} ); test( "resizable handle with complex markup (#8756 / #8757)", function() { expect( 2 ); $( "#draggable1" ) .append( - $("
    ") - .addClass("ui-resizable-handle ui-resizable-w") - .append( $("
    ") ) + $( "
    " ) + .addClass( "ui-resizable-handle ui-resizable-w" ) + .append( $( "
    " ) ) ); - var handle = $(".ui-resizable-w div"), - target = $( "#draggable1" ).draggable().resizable({ handles: "all" }); + var handle = $( ".ui-resizable-w div" ), + target = $( "#draggable1" ).draggable().resizable( { handles: "all" } ); // Todo: fix resizable so it doesn't require a mouseover - handle.simulate("mouseover").simulate( "drag", { dx: -50 } ); + handle.simulate( "mouseover" ).simulate( "drag", { dx: -50 } ); equal( target.width(), 250, "compare width" ); // Todo: fix resizable so it doesn't require a mouseover - handle.simulate("mouseover").simulate( "drag", { dx: 50 } ); + handle.simulate( "mouseover" ).simulate( "drag", { dx: 50 } ); equal( target.width(), 200, "compare width" ); -}); +} ); test( "#8269: Removing draggable element on drop", function() { expect( 2 ); - var element = $( "#draggable1" ).wrap( "
    " ).draggable({ + var element = $( "#draggable1" ).wrap( "
    " ).draggable( { stop: function() { ok( true, "stop still called despite element being removed from DOM on drop" ); } - }), + } ), dropOffset = $( "#droppable" ).offset(); - $( "#droppable" ).droppable({ + $( "#droppable" ).droppable( { drop: function() { $( "#wrapper" ).remove(); ok( true, "element removed from DOM on drop" ); } - }); + } ); // Support: Opera 12.10, Safari 5.1, jQuery <1.8 if ( testHelper.unreliableContains ) { @@ -102,31 +102,31 @@ test( "#8269: Removing draggable element on drop", function() { handle: "corner", x: dropOffset.left, y: dropOffset.top - }); + } ); } -}); +} ); // http://bugs.jqueryui.com/ticket/7778 // drag element breaks in IE8 when its content is replaced onmousedown test( "Stray mousemove after mousedown still drags", function() { expect( 2 ); - var element = $( "#draggable1" ).draggable({ scroll: false }); + var element = $( "#draggable1" ).draggable( { scroll: false } ); // In IE8, when content is placed under the mouse (e.g. when draggable content is replaced // on mousedown), mousemove is triggered on those elements even though the mouse hasn't moved. // Support: IE <9 element.on( "mousedown", function() { - $( document ).simulate( "mousemove", { button: -1 }); - }); + $( document ).simulate( "mousemove", { button: -1 } ); + } ); testHelper.shouldMove( element, "element is draggable" ); -}); +} ); test( "#6258: not following mouse when scrolled and using overflow-y: scroll", function() { expect( 2 ); - var element = $( "#draggable1" ).draggable({ + var element = $( "#draggable1" ).draggable( { stop: function( event, ui ) { equal( ui.position.left, 1, "left position is correct despite overflow on HTML" ); equal( ui.position.top, 1, "top position is correct despite overflow on HTML" ); @@ -136,7 +136,7 @@ test( "#6258: not following mouse when scrolled and using overflow-y: scroll", f .scrollTop( 0 ) .scrollLeft( 0 ); } - }), + } ), oldOverflowY = $( "html" ).css( "overflow-y" ), oldOverflowX = $( "html" ).css( "overflow-x" ); @@ -152,19 +152,19 @@ test( "#6258: not following mouse when scrolled and using overflow-y: scroll", f dx: 1, dy: 1, moves: 1 - }); -}); + } ); +} ); test( "#9315: jumps down with offset of scrollbar", function() { expect( 2 ); - var element = $( "#draggable2" ).draggable({ + var element = $( "#draggable2" ).draggable( { stop: function( event, ui ) { equal( ui.position.left, 11, "left position is correct when position is absolute" ); equal( ui.position.top, 11, "top position is correct when position is absolute" ); $( "html" ).scrollTop( 0 ).scrollLeft( 0 ); } - }); + } ); testHelper.forceScrollableWindow(); @@ -174,21 +174,23 @@ test( "#9315: jumps down with offset of scrollbar", function() { dx: 1, dy: 1, moves: 1 - }); -}); + } ); +} ); test( "scroll offset with fixed ancestors", function() { expect( 2 ); var startValue = 300, element = $( "#draggable1" ) + // http://bugs.jqueryui.com/ticket/5009 // scroll not working with parent's position fixed .wrap( "
    " ) + // http://bugs.jqueryui.com/ticket/9612 // abspos elements inside of fixed elements moving away from the mouse when scrolling .wrap( "
    " ) - .draggable({ + .draggable( { drag: function() { startValue += 100; $( document ).scrollTop( startValue ).scrollLeft( startValue ); @@ -198,7 +200,7 @@ test( "scroll offset with fixed ancestors", function() { equal( ui.position.top, 10, "top position is correct when parent position is fixed" ); $( document ).scrollTop( 0 ).scrollLeft( 0 ); } - }); + } ); testHelper.forceScrollableWindow(); @@ -209,10 +211,10 @@ test( "scroll offset with fixed ancestors", function() { dx: 10, dy: 10, moves: 3 - }); -}); + } ); +} ); -$( [ "hidden", "auto", "scroll" ] ).each(function() { +$( [ "hidden", "auto", "scroll" ] ).each( function() { var overflow = this; // Http://bugs.jqueryui.com/ticket/9379 - position bug in scrollable div @@ -221,9 +223,9 @@ $( [ "hidden", "auto", "scroll" ] ).each(function() { expect( 2 ); $( "#qunit-fixture" ).html( "
    a
    " ); - $( "#inner" ).css({ position: "absolute", width: "500px", height: "500px" }); - $( "#outer" ).css({ position: "absolute", width: "300px", height: "300px" }); - $( "#dragged" ).css({ width: "10px", height: "10px" }); + $( "#inner" ).css( { position: "absolute", width: "500px", height: "500px" } ); + $( "#outer" ).css( { position: "absolute", width: "300px", height: "300px" } ); + $( "#dragged" ).css( { width: "10px", height: "10px" } ); var moves = 3, startValue = 0, @@ -232,7 +234,7 @@ $( [ "hidden", "auto", "scroll" ] ).each(function() { // We scroll after each drag event, so subtract 1 from number of moves for expected expected = delta + ( ( moves - 1 ) * dragDelta ), - element = $( "#dragged" ).draggable({ + element = $( "#dragged" ).draggable( { drag: function() { startValue += dragDelta; $( "#outer" ).scrollTop( startValue ).scrollLeft( startValue ); @@ -241,7 +243,7 @@ $( [ "hidden", "auto", "scroll" ] ).each(function() { equal( ui.position.left, expected, "left position is correct when grandparent is scrolled" ); equal( ui.position.top, expected, "top position is correct when grandparent is scrolled" ); } - }); + } ); $( "#outer" ).css( "overflow", overflow ); @@ -249,9 +251,9 @@ $( [ "hidden", "auto", "scroll" ] ).each(function() { dy: delta, dx: delta, moves: moves - }); - }); -}); + } ); + } ); +} ); test( "#5727: draggable from iframe", function() { expect( 1 ); @@ -273,7 +275,7 @@ test( "#5727: draggable from iframe", function() { // TODO: fix draggable within an IFRAME to fire events on the element properly // and these testHelper.shouldMove relies on events for testing //testHelper.shouldMove( draggable1, "draggable from an iframe" ); -}); +} ); test( "#8399: A draggable should become the active element after you are finished interacting with it, but not before.", function() { expect( 2 ); @@ -282,12 +284,12 @@ test( "#8399: A draggable should become the active element after you are finishe $( document ).one( "mousemove", function() { notStrictEqual( document.activeElement, element.get( 0 ), "moving a draggable anchor did not make it the active element" ); - }); + } ); testHelper.move( element, 50, 50 ); strictEqual( document.activeElement, element.get( 0 ), "finishing moving a draggable anchor made it the active element" ); -}); +} ); asyncTest( "blur behavior", function() { expect( 3 ); @@ -310,8 +312,8 @@ asyncTest( "blur behavior", function() { // active element should blur when mousing down on a draggable notStrictEqual( document.activeElement, focusElement.get( 0 ), "test element is no longer focused after mousing down on a draggable" ); start(); - }); -}); + } ); +} ); test( "ui-draggable-handle assigned to appropriate element", function( assert ) { expect( 5 ); @@ -328,7 +330,7 @@ test( "ui-draggable-handle assigned to appropriate element", function( assert ) element.draggable( "destroy" ); assert.lacksClasses( element.find( "p" ), "ui-draggable-handle" ); -}); +} ); test( "ui-draggable-handle managed correctly in nested draggables", function( assert ) { expect( 4 ); @@ -341,6 +343,6 @@ test( "ui-draggable-handle managed correctly in nested draggables", function( as parent.draggable( "destroy" ); assert.lacksClasses( parent, "ui-draggable-handle", "parent loses class name on destroy" ); assert.hasClasses( child, "ui-draggable-handle", "child retains class name on destroy" ); -}); +} ); } ); diff --git a/tests/unit/draggable/events.js b/tests/unit/draggable/events.js index 7e276092bb9..36a5a870543 100644 --- a/tests/unit/draggable/events.js +++ b/tests/unit/draggable/events.js @@ -7,12 +7,12 @@ var element; module( "draggable: events", { setup: function() { - element = $("
    ").appendTo("#qunit-fixture"); + element = $( "
    " ).appendTo( "#qunit-fixture" ); }, teardown: function() { - element.draggable("destroy"); + element.draggable( "destroy" ); } -}); +} ); test( "callbacks occurrence count", function() { expect( 3 ); @@ -21,7 +21,7 @@ test( "callbacks occurrence count", function() { stop = 0, dragc = 0; - element.draggable({ + element.draggable( { start: function() { start++; }, @@ -31,17 +31,17 @@ test( "callbacks occurrence count", function() { stop: function() { stop++; } - }); + } ); element.simulate( "drag", { dx: 10, dy: 10 - }); + } ); equal( start, 1, "start callback should happen exactly once" ); equal( dragc, 3, "drag callback should happen exactly once per mousemove" ); equal( stop, 1, "stop callback should happen exactly once" ); -}); +} ); test( "stopping the start callback", function() { expect( 3 ); @@ -50,7 +50,7 @@ test( "stopping the start callback", function() { stop = 0, dragc = 0; - element.draggable({ + element.draggable( { start: function() { start++; return false; @@ -61,17 +61,17 @@ test( "stopping the start callback", function() { stop: function() { stop++; } - }); + } ); element.simulate( "drag", { dx: 10, dy: 10 - }); + } ); equal( start, 1, "start callback should happen exactly once" ); equal( dragc, 0, "drag callback should not happen at all" ); equal( stop, 0, "stop callback should not happen if there wasnt even a start" ); -}); +} ); test( "stopping the drag callback", function() { expect( 2 ); @@ -80,7 +80,7 @@ test( "stopping the drag callback", function() { stop = 0, dragc = 0; - element.draggable({ + element.draggable( { start: function() { start++; }, @@ -91,34 +91,34 @@ test( "stopping the drag callback", function() { stop: function() { stop++; } - }); + } ); element.simulate( "drag", { dx: 10, dy: 10 - }); + } ); equal( start, 1, "start callback should happen exactly once" ); equal( stop, 1, "stop callback should happen, as we need to actively stop the drag" ); -}); +} ); test( "stopping the stop callback", function() { expect( 1 ); - element.draggable({ + element.draggable( { helper: "clone", stop: function() { return false; } - }); + } ); element.simulate( "drag", { dx: 10, dy: 10 - }); + } ); ok( element.draggable( "instance" ).helper, "the clone should not be deleted if the stop callback is stopped" ); -}); +} ); // http://bugs.jqueryui.com/ticket/6884 // Draggable: ui.offset.left differs between the "start" and "drag" hooks @@ -129,7 +129,7 @@ test( "position and offset in hash is consistent between start, drag, and stop", element = $( "
    " ).appendTo( "#qunit-fixture" ); - element.draggable({ + element.draggable( { start: function( event, ui ) { startPos = ui.position; startOffset = ui.offset; @@ -142,13 +142,13 @@ test( "position and offset in hash is consistent between start, drag, and stop", stopPos = ui.position; stopOffset = ui.offset; } - }); + } ); element.simulate( "drag", { dx: 10, dy: 10, moves: 1 - }); + } ); startPos.left += 10; startPos.top += 10; @@ -159,6 +159,6 @@ test( "position and offset in hash is consistent between start, drag, and stop", deepEqual( dragPos, stopPos, "drag position equals stop position" ); deepEqual( startOffset, dragOffset, "start offset equals drag offset plus distance" ); deepEqual( dragOffset, stopOffset, "drag offset equals stop offset" ); -}); +} ); } ); diff --git a/tests/unit/draggable/helper.js b/tests/unit/draggable/helper.js index 7aabe2a00f7..02a6ddaf535 100644 --- a/tests/unit/draggable/helper.js +++ b/tests/unit/draggable/helper.js @@ -8,12 +8,13 @@ return $.extend( helper, { // TODO: remove the unreliable offset hacks unreliableOffset: $.ui.ie && ( !document.documentMode || document.documentMode < 8 ) ? 2 : 0, + // Support: Opera 12.10, Safari 5.1, jQuery <1.8 - unreliableContains: (function() { + unreliableContains: ( function() { var element = $( "
    " ); return $.contains( element[ 0 ].ownerDocument, element[ 0 ] ); - })(), + } )(), testDragPosition: function( el, dx, dy, expectedDX, expectedDY, msg ) { msg = msg ? msg + "." : ""; @@ -21,7 +22,7 @@ return $.extend( helper, { $( el ).one( "dragstop", function( event, ui ) { var positionExpected = { left: ui.originalPosition.left + expectedDX, top: ui.originalPosition.top + expectedDY }; deepEqual( ui.position, positionExpected, "position dragged[" + dx + ", " + dy + "] " + msg ); - }); + } ); }, testDragOffset: function( el, dx, dy, expectedDX, expectedDY, msg ) { @@ -32,7 +33,7 @@ return $.extend( helper, { $( el ).one( "dragstop", function( event, ui ) { deepEqual( ui.offset, offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg ); - }); + } ); }, testDragHelperOffset: function( el, dx, dy, expectedDX, expectedDY, msg ) { @@ -43,7 +44,7 @@ return $.extend( helper, { $( el ).one( "dragstop", function( event, ui ) { deepEqual( ui.helper.offset(), offsetExpected, "offset dragged[" + dx + ", " + dy + "] " + msg ); - }); + } ); }, testDrag: function( el, handle, dx, dy, expectedDX, expectedDY, msg ) { @@ -53,7 +54,7 @@ return $.extend( helper, { $( handle ).simulate( "drag", { dx: dx, dy: dy - }); + } ); }, shouldMovePositionButNotOffset: function( el, msg, handle ) { @@ -64,7 +65,7 @@ return $.extend( helper, { $( handle ).simulate( "drag", { dx: 100, dy: 100 - }); + } ); }, shouldMove: function( el, msg, handle ) { @@ -86,12 +87,12 @@ return $.extend( helper, { element.on( "dragstop", function() { ok( false, "should not drag " + msg ); - }); + } ); $( handle ).simulate( "drag", { dx: 100, dy: 100 - }); + } ); newOffset = element.offset(); @@ -105,12 +106,12 @@ return $.extend( helper, { setScrollable: function( what, isScrollable ) { var overflow = isScrollable ? "scroll" : "hidden"; - $( what ).css({ overflow: overflow, overflowX: overflow, overflowY: overflow }); + $( what ).css( { overflow: overflow, overflowX: overflow, overflowY: overflow } ); }, testScroll: function( el, position ) { var oldPosition = $( "#main" ).css( "position" ); - $( "#main" ).css({ position: position, top: "0px", left: "0px" }); + $( "#main" ).css( { position: position, top: "0px", left: "0px" } ); this.shouldMove( el, position + " parent" ); $( "#main" ).css( "position", oldPosition ); }, @@ -135,23 +136,24 @@ return $.extend( helper, { $( el ).simulate( "drag", { dx: x, dy: y - }); + } ); }, trackMouseCss: function( el ) { el.on( "drag", function() { el.data( "last_dragged_cursor", $( "body" ).css( "cursor" ) ); - }); + } ); }, trackAppendedParent: function( el ) { + // TODO: appendTo is currently ignored if helper is original (see #7044) el.draggable( "option", "helper", "clone" ); // Get what parent is at time of drag - el.on( "drag", function(e, ui) { + el.on( "drag", function( e, ui ) { el.data( "last_dragged_parent", ui.helper.parent()[ 0 ] ); - }); + } ); } } ); diff --git a/tests/unit/draggable/methods.js b/tests/unit/draggable/methods.js index 10a17efdbb4..77ba2434f90 100644 --- a/tests/unit/draggable/methods.js +++ b/tests/unit/draggable/methods.js @@ -8,12 +8,12 @@ var element; module( "draggable: methods", { setup: function() { - element = $("
    Absolute
    ").appendTo("#qunit-fixture"); + element = $( "
    Absolute
    " ).appendTo( "#qunit-fixture" ); }, teardown: function() { element.remove(); } -}); +} ); test( "init", function() { expect( 5 ); @@ -21,10 +21,10 @@ test( "init", function() { element.draggable(); ok( true, ".draggable() called on element" ); - $([]).draggable(); + $( [] ).draggable(); ok( true, ".draggable() called on empty collection" ); - $("
    ").draggable(); + $( "
    " ).draggable(); ok( true, ".draggable() called on disconnected DOMElement" ); element.draggable( "option", "foo" ); @@ -32,52 +32,52 @@ test( "init", function() { element.draggable( "option", "foo", "bar" ); ok( true, "arbitrary option setter after init" ); -}); +} ); test( "destroy", function() { expect( 4 ); - element.draggable().draggable("destroy"); + element.draggable().draggable( "destroy" ); ok( true, ".draggable('destroy') called on element" ); - $([]).draggable().draggable("destroy"); + $( [] ).draggable().draggable( "destroy" ); ok( true, ".draggable('destroy') called on empty collection" ); - element.draggable().draggable("destroy"); + element.draggable().draggable( "destroy" ); ok( true, ".draggable('destroy') called on disconnected DOMElement" ); var expected = element.draggable(), - actual = expected.draggable("destroy"); + actual = expected.draggable( "destroy" ); equal( actual, expected, "destroy is chainable" ); -}); +} ); test( "enable", function() { expect( 11 ); - element.draggable({ disabled: true }); + element.draggable( { disabled: true } ); testHelper.shouldNotDrag( element, ".draggable({ disabled: true })" ); - element.draggable("enable"); + element.draggable( "enable" ); testHelper.shouldMove( element, ".draggable('enable')" ); equal( element.draggable( "option", "disabled" ), false, "disabled option getter" ); - element.draggable("destroy"); - element.draggable({ disabled: true }); + element.draggable( "destroy" ); + element.draggable( { disabled: true } ); testHelper.shouldNotDrag( element, ".draggable({ disabled: true })" ); element.draggable( "option", "disabled", false ); - equal(element.draggable( "option", "disabled" ), false, "disabled option setter" ); + equal( element.draggable( "option", "disabled" ), false, "disabled option setter" ); testHelper.shouldMove( element, ".draggable('option', 'disabled', false)" ); var expected = element.draggable(), - actual = expected.draggable("enable"); + actual = expected.draggable( "enable" ); equal( actual, expected, "enable is chainable" ); -}); +} ); test( "disable", function( assert ) { expect( 14 ); - element = $( "#draggable2" ).draggable({ disabled: false }); + element = $( "#draggable2" ).draggable( { disabled: false } ); testHelper.shouldMove( element, ".draggable({ disabled: false })" ); element.draggable( "disable" ); @@ -85,7 +85,7 @@ test( "disable", function( assert ) { equal( element.draggable( "option", "disabled" ), true, "disabled option getter" ); element.draggable( "destroy" ); - element.draggable({ disabled: false }); + element.draggable( { disabled: false } ); testHelper.shouldMove( element, ".draggable({ disabled: false })" ); element.draggable( "option", "disabled", true ); @@ -99,6 +99,6 @@ test( "disable", function( assert ) { var expected = element.draggable(), actual = expected.draggable( "disable" ); equal( actual, expected, "disable is chainable" ); -}); +} ); } ); diff --git a/tests/unit/draggable/options.js b/tests/unit/draggable/options.js index bc7370e8b5c..2c8de5a0ac2 100644 --- a/tests/unit/draggable/options.js +++ b/tests/unit/draggable/options.js @@ -9,33 +9,33 @@ define( [ // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: 'parent' }, default, no clone", function() { expect( 4 ); - var element = $( "#draggable2" ).draggable({ appendTo: "parent" }); + var element = $( "#draggable2" ).draggable( { appendTo: "parent" } ); testHelper.shouldMove( element, "absolute appendTo: parent" ); - element = $( "#draggable1" ).draggable({ appendTo: "parent" }); + element = $( "#draggable1" ).draggable( { appendTo: "parent" } ); testHelper.shouldMove( element, "relative appendTo: parent" ); -}); +} ); // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: Element }, no clone", function() { expect( 4 ); - var element = $( "#draggable2" ).draggable({ appendTo: $( "#draggable2" ).parent()[ 0 ] }); + var element = $( "#draggable2" ).draggable( { appendTo: $( "#draggable2" ).parent()[ 0 ] } ); testHelper.shouldMove( element, "absolute appendTo: Element" ); - element = $( "#draggable1" ).draggable({ appendTo: $( "#draggable2" ).parent()[ 0 ] }); + element = $( "#draggable1" ).draggable( { appendTo: $( "#draggable2" ).parent()[ 0 ] } ); testHelper.shouldMove( element, "relative appendTo: Element" ); -}); +} ); // TODO: This doesn't actually test whether append happened, possibly remove test( "{ appendTo: Selector }, no clone", function() { expect( 4 ); - var element = $( "#draggable2" ).draggable({ appendTo: "#main" }); + var element = $( "#draggable2" ).draggable( { appendTo: "#main" } ); testHelper.shouldMove( element, "absolute appendTo: Selector" ); - element = $( "#draggable1" ).draggable({ appendTo: "#main" }); + element = $( "#draggable1" ).draggable( { appendTo: "#main" } ); testHelper.shouldMove( element, "relative appendTo: Selector" ); -}); +} ); test( "{ appendTo: 'parent' }, default", function() { expect( 2 ); @@ -48,48 +48,48 @@ test( "{ appendTo: 'parent' }, default", function() { testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_parent" ), $( "#main" )[ 0 ] ); -}); +} ); test( "{ appendTo: Element }", function() { expect( 1 ); var appendTo = $( "#draggable2" ).parent()[ 0 ], - element = $( "#draggable1" ).draggable({ appendTo: appendTo }); + element = $( "#draggable1" ).draggable( { appendTo: appendTo } ); testHelper.trackAppendedParent( element ); testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_parent" ), appendTo ); -}); +} ); test( "{ appendTo: jQuery }", function() { expect( 1 ); var appendTo = $( "#draggable2" ).parent(), - element = $( "#draggable1" ).draggable({ appendTo: appendTo }); + element = $( "#draggable1" ).draggable( { appendTo: appendTo } ); testHelper.trackAppendedParent( element ); testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_parent" ), appendTo[ 0 ] ); -}); +} ); test( "{ appendTo: Selector }", function() { expect( 1 ); var appendTo = "#main", - element = $( "#draggable1" ).draggable({ appendTo: appendTo }); + element = $( "#draggable1" ).draggable( { appendTo: appendTo } ); testHelper.trackAppendedParent( element ); testHelper.move( element, 1, 1 ); - equal( element.data( "last_dragged_parent" ), $(appendTo)[ 0 ] ); -}); + equal( element.data( "last_dragged_parent" ), $( appendTo )[ 0 ] ); +} ); test( "appendTo, default, switching after initialization", function() { expect( 2 ); - var element = $( "#draggable1" ).draggable({ helper: "clone" }); + var element = $( "#draggable1" ).draggable( { helper: "clone" } ); testHelper.trackAppendedParent( element ); @@ -101,25 +101,25 @@ test( "appendTo, default, switching after initialization", function() { element.draggable( "option", "appendTo", $( "#qunit-fixture" ) ); testHelper.move( element, 2, 2 ); equal( element.data( "last_dragged_parent" ), $( "#qunit-fixture" )[ 0 ] ); -}); +} ); test( "{ axis: false }, default", function() { expect( 2 ); - var element = $( "#draggable2" ).draggable({ axis: false }); + var element = $( "#draggable2" ).draggable( { axis: false } ); testHelper.shouldMove( element, "axis: false" ); -}); +} ); test( "{ axis: 'x' }", function() { expect( 2 ); - var element = $( "#draggable2" ).draggable({ axis: "x" }); + var element = $( "#draggable2" ).draggable( { axis: "x" } ); testHelper.testDrag( element, element, 50, 50, 50, 0, "axis: x" ); -}); +} ); test( "{ axis: 'y' }", function() { expect( 2 ); - var element = $( "#draggable2" ).draggable({ axis: "y" }); + var element = $( "#draggable2" ).draggable( { axis: "y" } ); testHelper.testDrag( element, element, 50, 50, 0, 50, "axis: y" ); -}); +} ); test( "{ axis: ? }, unexpected", function() { var element, @@ -134,17 +134,17 @@ test( "{ axis: ? }, unexpected", function() { expect( 12 ); - $.each(unexpected, function(key, val) { - element = $( "#draggable2" ).draggable({ axis: val }); + $.each( unexpected, function( key, val ) { + element = $( "#draggable2" ).draggable( { axis: val } ); testHelper.shouldMove( element, "axis: " + key ); element.draggable( "destroy" ); - }); -}); + } ); +} ); test( "axis, default, switching after initialization", function() { expect( 6 ); - var element = $( "#draggable1" ).draggable({ axis: false }); + var element = $( "#draggable1" ).draggable( { axis: false } ); // Any Direction testHelper.shouldMove( element, "axis: default" ); @@ -157,22 +157,22 @@ test( "axis, default, switching after initialization", function() { element.draggable( "option", "axis", "y" ); testHelper.testDrag( element, element, 50, 50, 0, 50, "axis: y as option" ); -}); +} ); test( "{ cancel: 'input,textarea,button,select,option' }, default", function() { expect( 4 ); $( "
    " ).appendTo( "#qunit-fixture" ); - var element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" }); + var element = $( "#draggable-option-cancel-default" ).draggable( { cancel: "input,textarea,button,select,option" } ); testHelper.shouldMove( element, "cancel: default, element dragged" ); element.draggable( "destroy" ); - element = $( "#draggable-option-cancel-default" ).draggable({ cancel: "input,textarea,button,select,option" }); + element = $( "#draggable-option-cancel-default" ).draggable( { cancel: "input,textarea,button,select,option" } ); testHelper.shouldNotDrag( element, "cancel: default, input dragged", "#draggable-option-cancel-default input" ); element.draggable( "destroy" ); -}); +} ); test( "{ cancel: 'span' }", function() { expect( 4 ); @@ -182,9 +182,9 @@ test( "{ cancel: 'span' }", function() { element.draggable( "destroy" ); - element = $( "#draggable2" ).draggable({ cancel: "span" }); + element = $( "#draggable2" ).draggable( { cancel: "span" } ); testHelper.shouldNotDrag( element, "cancel: span, span dragged", "#draggable2 span" ); -}); +} ); test( "{ cancel: ? }, unexpected", function() { expect( 12 ); @@ -200,11 +200,11 @@ test( "{ cancel: ? }, unexpected", function() { }; $.each( unexpected, function( key, val ) { - element = $( "#draggable2" ).draggable({ cancel: val }); + element = $( "#draggable2" ).draggable( { cancel: val } ); testHelper.shouldMove( element, "cancel: " + key ); element.draggable( "destroy" ); - }); -}); + } ); +} ); /* test( "{ cancel: Selectors }, matching parent selector", function() { @@ -246,17 +246,17 @@ test( "cancelement, default, switching after initialization", function() { element.draggable( "option", "cancel", "input" ); testHelper.shouldNotDrag( element, "cancel: input, input dragged", input ); -}); +} ); test( "connectToSortable, dragging out of a sortable", function() { expect( 4 ); var sortItem, dragHelper, - element = $( "#draggableSortable" ).draggable({ + element = $( "#draggableSortable" ).draggable( { scroll: false, connectToSortable: "#sortable" - }), - sortable = $( "#sortable" ).sortable({ revert: 100 }), + } ), + sortable = $( "#sortable" ).sortable( { revert: 100 } ), dx = 50, dy = 50, offsetBefore = element.offset(), @@ -267,13 +267,14 @@ test( "connectToSortable, dragging out of a sortable", function() { $( sortable ).one( "sortstart", function( event, ui ) { sortItem = ui.item; - }); + } ); $( element ).one( "drag", function( event, ui ) { dragHelper = ui.helper; - }); + } ); $( element ).one( "dragstop", function( event, ui ) { + // http://bugs.jqueryui.com/ticket/8809 // Position issue when connected to sortable deepEqual( ui.helper.offset(), offsetExpected, "draggable offset is correct" ); @@ -286,61 +287,63 @@ test( "connectToSortable, dragging out of a sortable", function() { // Http://bugs.jqueryui.com/ticket/9481 // connectToSortable causes sortable revert to fail on second attempt equal( sortable.sortable( "option", "revert" ), 100, "sortable revert behavior is preserved" ); - }); + } ); element.simulate( "drag", { dx: dx, dy: dy - }); -}); + } ); +} ); asyncTest( "connectToSortable, dragging clone into sortable", function() { expect( 3 ); var offsetPlaceholder, - element = $( "#draggableSortableClone" ).draggable({ + element = $( "#draggableSortableClone" ).draggable( { scroll: false, connectToSortable: "#sortable", helper: "clone" - }), - sortable = $( "#sortable" ).sortable({ revert: 100 }), + } ), + sortable = $( "#sortable" ).sortable( { revert: 100 } ), offsetSortable = sortable.offset(); $( sortable ).one( "sort", function( event, ui ) { offsetPlaceholder = ui.placeholder.offset(); + // http://bugs.jqueryui.com/ticket/8809 // Position issue when connected to sortable deepEqual( ui.helper.offset(), offsetSortable, "sortable offset is correct" ); notDeepEqual( ui.helper.offset(), offsetPlaceholder, "offset not equal to placeholder" ); - }); + } ); $( sortable ).one( "sortstop", function( event, ui ) { + // http://bugs.jqueryui.com/ticket/9675 // Animation issue with revert and connectToSortable deepEqual( ui.item.offset(), offsetPlaceholder, "offset eventually equals placeholder" ); start(); - }); + } ); element.simulate( "drag", { x: offsetSortable.left + 1, y: offsetSortable.top + 1, moves: 1 - }); -}); + } ); +} ); test( "connectToSortable, dragging multiple elements in and out of sortable", function() { expect( 1 ); - var element = $( "#draggableSortableClone" ).draggable({ + var element = $( "#draggableSortableClone" ).draggable( { scroll: false, connectToSortable: "#sortable", helper: "clone" - }), - element2 = $( "#draggableSortable" ).draggable({ + } ), + element2 = $( "#draggableSortable" ).draggable( { scroll: false, connectToSortable: "#sortable" - }), - sortable = $( "#sortable" ).sortable({ revert: false }), + } ), + sortable = $( "#sortable" ).sortable( { revert: false } ), sortableOffset = sortable.offset(); // Move element into sortable @@ -348,40 +351,40 @@ test( "connectToSortable, dragging multiple elements in and out of sortable", fu x: sortableOffset.left + 1, y: sortableOffset.top + 1, moves: 10 - }); + } ); // Move element in sortable out element2.simulate( "drag", { dx: 200, dy: 200, moves: 10 - }); + } ); // Http://bugs.jqueryui.com/ticket/9675 // Animation issue with revert and connectToSortable sortable.one( "sortstop", function( event, ui ) { ok( !$.contains( document, ui.placeholder[ 0 ] ), "placeholder was removed" ); - }); + } ); // Move the clone of the first element back out $( "#sortable .sortable2Item" ).simulate( "drag", { dx: 200, dy: 200, moves: 10 - }); -}); + } ); +} ); test( "connectToSortable, dragging through one sortable to a second", function() { expect( 2 ); var overCount = 0, - element = $( "#draggableSortable" ).draggable({ + element = $( "#draggableSortable" ).draggable( { scroll: false, connectToSortable: ".sortable" - }), + } ), delta = 200, - sortable = $( "#sortable" ).sortable({ revert: false }), - sortable2 = $( "#sortable2" ).sortable({ revert: false }), + sortable = $( "#sortable" ).sortable( { revert: false } ), + sortable2 = $( "#sortable2" ).sortable( { revert: false } ), sortable2Offset = sortable2.offset(), dragParams = { x: sortable2Offset.left + 25, @@ -392,30 +395,30 @@ test( "connectToSortable, dragging through one sortable to a second", function() $( sortable ).one( "sortover", function() { overCount++; sortable2.css( "top", "+=" + delta ); - }); + } ); $( sortable2 ).on( "sortupdate", function() { ok( true, "second sortable is updated" ); - }); + } ); $( sortable2 ).one( "sortover", function() { overCount++; - }); + } ); $( sortable2 ).one( "sortstop", function() { equal( overCount, 2, "went over both sortables" ); - }); + } ); element.simulate( "drag", dragParams ); -}); +} ); test( "connectToSortable, dragging through a sortable", function() { expect( 1 ); - var draggable = $( "#draggableSortable" ).draggable({ + var draggable = $( "#draggableSortable" ).draggable( { scroll: false, connectToSortable: "#sortable2" - }), + } ), sortable = $( "#sortable2" ).sortable(), sortableOffset = sortable.offset(); @@ -423,20 +426,20 @@ test( "connectToSortable, dragging through a sortable", function() { // Draggable: Position issue with connectToSortable draggable.one( "dragstop", function() { equal( draggable.parent().attr( "id" ), "sortable", "restored draggable to original parent" ); - }); + } ); draggable.simulate( "drag", { x: sortableOffset.left + 25, y: sortableOffset.top + sortable.outerHeight() + 400, moves: 20 - }); -}); + } ); +} ); test( "{ containment: Element }", function() { expect( 1 ); var offsetAfter, - element = $( "#draggable1" ).draggable({ containment: $( "#draggable1" ).parent()[ 0 ] }), + element = $( "#draggable1" ).draggable( { containment: $( "#draggable1" ).parent()[ 0 ] } ), p = element.parent(), po = p.offset(), expected = { @@ -447,16 +450,16 @@ test( "{ containment: Element }", function() { element.simulate( "drag", { dx: -100, dy: -100 - }); + } ); offsetAfter = element.offset(); deepEqual( offsetAfter, expected, "compare offset to parent" ); -}); +} ); test( "{ containment: Selector }", function() { expect( 1 ); var offsetAfter, - element = $( "#draggable1" ).draggable({ containment: $( "#qunit-fixture" ) }), + element = $( "#draggable1" ).draggable( { containment: $( "#qunit-fixture" ) } ), p = element.parent(), po = p.offset(), expected = { @@ -467,10 +470,10 @@ test( "{ containment: Selector }", function() { element.simulate( "drag", { dx: -100, dy: -100 - }); + } ); offsetAfter = element.offset(); deepEqual( offsetAfter, expected, "compare offset to parent" ); -}); +} ); test( "{ containment: [x1, y1, x2, y2] }", function() { expect( 2 ); @@ -481,13 +484,13 @@ test( "{ containment: [x1, y1, x2, y2] }", function() { element.draggable( "option", "containment", [ eo.left, eo.top, eo.left + element.width() + 5, eo.top + element.height() + 5 ] ); testHelper.testDrag( element, element, -100, -100, 0, 0, "containment: [x1, y1, x2, y2]" ); -}); +} ); test( "{ containment: 'parent' }, relative", function() { expect( 1 ); var offsetAfter, - element = $( "#draggable1" ).draggable({ containment: "parent" }), + element = $( "#draggable1" ).draggable( { containment: "parent" } ), p = element.parent(), po = p.offset(), expected = { @@ -498,16 +501,16 @@ test( "{ containment: 'parent' }, relative", function() { element.simulate( "drag", { dx: -100, dy: -100 - }); + } ); offsetAfter = element.offset(); deepEqual( offsetAfter, expected, "compare offset to parent" ); -}); +} ); test( "{ containment: 'parent' }, absolute", function() { expect( 1 ); var offsetAfter, - element = $( "#draggable2" ).draggable({ containment: "parent" }), + element = $( "#draggable2" ).draggable( { containment: "parent" } ), p = element.parent(), po = p.offset(), expected = { @@ -518,41 +521,41 @@ test( "{ containment: 'parent' }, absolute", function() { element.simulate( "drag", { dx: -100, dy: -100 - }); + } ); offsetAfter = element.offset(); deepEqual( offsetAfter, expected, "compare offset to parent" ); -}); +} ); test( "containment, account for border", function( assert ) { expect( 2 ); var el = $( "#draggable1" ).appendTo( "#scrollParent" ), - parent = el.parent().css({ + parent = el.parent().css( { height: "100px", width: "100px", borderStyle: "solid", borderWidth: "5px 10px 15px 20px" - }), + } ), parentBottom = parent.offset().top + parent.outerHeight(), parentRight = parent.offset().left + parent.outerWidth(), parentBorderBottom = testHelper.border( parent, "bottom" ), parentBorderRight = testHelper.border( parent, "right" ); - el.css({ + el.css( { height: "5px", width: "5px" - }).draggable({ containment: "parent", scroll: false }); + } ).draggable( { containment: "parent", scroll: false } ); el.simulate( "drag", { dx: 100, dy: 100 - }); + } ); assert.close( el.offset().top, parentBottom - parentBorderBottom - el.height(), 1, "The draggable should be on top of its parent's bottom border" ); assert.close( el.offset().left, parentRight - parentBorderRight - el.width(), 1, "The draggable should be to the right of its parent's right border" ); -}); +} ); // http://bugs.jqueryui.com/ticket/7016 // draggable can be pulled out of containment in Chrome and IE8 @@ -560,48 +563,48 @@ test( "containment, element cant be pulled out of container", function() { expect( 1 ); var offsetBefore, - parent = $( "
    ").css({ width: 200, height: 200 }).appendTo( "#qunit-fixture" ), + parent = $( "
    " ).css( { width: 200, height: 200 } ).appendTo( "#qunit-fixture" ), element = $( "#draggable1" ).appendTo( parent ); element - .css({ + .css( { height: "5px", width: "5px" - }) - .draggable({ containment: "parent" }) + } ) + .draggable( { containment: "parent" } ) .simulate( "drag", { dx: 500, dy: 500 - }); + } ); offsetBefore = element.offset(); element.simulate( "drag", { dx: 200, dy: 200 - }); + } ); deepEqual( element.offset(), offsetBefore, "The draggable should not move past bottom right edge" ); -}); +} ); test( "containment, default, switching after initialization", function() { expect( 8 ); - var element = $( "#draggable1" ).draggable({ containment: false, scroll: false }), + var element = $( "#draggable1" ).draggable( { containment: false, scroll: false } ), po = element.parent().offset(), containment = [ po.left - 100, po.top - 100, po.left + 500, po.top + 500 ]; testHelper.testDrag( element, element, -100, -100, -100, -100, "containment: default" ); - element.draggable( "option", "containment", "parent" ).css({ top: 0, left: 0 }); + element.draggable( "option", "containment", "parent" ).css( { top: 0, left: 0 } ); testHelper.testDrag( element, element, -100, -100, 0, 0, "containment: parent as option" ); - element.draggable( "option", "containment", containment ).css({ top: 0, left: 0 }); + element.draggable( "option", "containment", containment ).css( { top: 0, left: 0 } ); testHelper.testDrag( element, element, -100, -100, -100, -100, "containment: array as option" ); element.draggable( "option", "containment", false ); testHelper.testDrag( element, element, -100, -100, -100, -100, "containment: false as option" ); -}); +} ); test( "{ cursor: 'auto' }, default", function() { function getCursor() { @@ -612,23 +615,23 @@ test( "{ cursor: 'auto' }, default", function() { var actual, after, expected = "auto", - element = $( "#draggable2" ).draggable({ + element = $( "#draggable2" ).draggable( { cursor: expected, start: function() { actual = getCursor(); } - }), + } ), before = getCursor(); element.simulate( "drag", { dx: -1, dy: -1 - }); + } ); after = getCursor(); equal( actual, expected, "start callback: cursor '" + expected + "'" ); equal( after, before, "after drag: cursor restored" ); -}); +} ); test( "{ cursor: 'move' }", function() { function getCursor() { @@ -639,23 +642,23 @@ test( "{ cursor: 'move' }", function() { var actual, after, expected = "move", - element = $( "#draggable2" ).draggable({ + element = $( "#draggable2" ).draggable( { cursor: expected, start: function() { actual = getCursor(); } - }), + } ), before = getCursor(); element.simulate( "drag", { dx: -1, dy: -1 - }); + } ); after = getCursor(); equal( actual, expected, "start callback: cursor '" + expected + "'" ); equal( after, before, "after drag: cursor restored" ); -}); +} ); test( "#6889: Cursor doesn't revert to pre-dragging state after revert action when original element is removed", function() { function getCursor() { @@ -664,7 +667,7 @@ test( "#6889: Cursor doesn't revert to pre-dragging state after revert action wh expect( 2 ); - var element = $( "#draggable1" ).wrap( "
    " ).draggable({ + var element = $( "#draggable1" ).wrap( "
    " ).draggable( { cursor: "move", revert: true, revertDuration: 0, @@ -675,7 +678,7 @@ test( "#6889: Cursor doesn't revert to pre-dragging state after revert action wh stop: function() { equal( getCursor(), expected, "after drag: cursor restored" ); } - }), + } ), expected = getCursor(); if ( testHelper.unreliableContains ) { @@ -685,9 +688,9 @@ test( "#6889: Cursor doesn't revert to pre-dragging state after revert action wh element.simulate( "drag", { dx: -1, dy: -1 - }); + } ); } -}); +} ); test( "cursor, default, switching after initialization", function() { expect( 3 ); @@ -706,7 +709,7 @@ test( "cursor, default, switching after initialization", function() { element.draggable( "option", "cursor", "ns-resize" ); testHelper.move( element, 1, 1 ); equal( element.data( "last_dragged_cursor" ), "ns-resize" ); -}); +} ); test( "cursorAt", function() { expect( 24 ); @@ -724,7 +727,7 @@ test( "cursorAt", function() { $.each( tests, function( testName, testData ) { $.each( [ "relative", "absolute" ], function( i, position ) { - var element = $( "#draggable" + ( i + 1 ) ).draggable({ + var element = $( "#draggable" + ( i + 1 ) ).draggable( { cursorAt: testData.cursorAt, drag: function( event, ui ) { if ( !testData.cursorAt ) { @@ -738,16 +741,16 @@ test( "cursorAt", function() { equal( event.clientY - ui.offset.top, testData.y + testHelper.unreliableOffset, testName + " " + position + " top" ); } } - }); + } ); element.simulate( "drag", { moves: 1, dx: deltaX, dy: deltaY - }); - }); - }); -}); + } ); + } ); + } ); +} ); test( "cursorAt, switching after initialization", function() { expect( 24 ); @@ -767,7 +770,7 @@ test( "cursorAt, switching after initialization", function() { $.each( [ "relative", "absolute" ], function( i, position ) { var element = $( "#draggable" + ( i + 1 ) ); - element.draggable({ + element.draggable( { drag: function( event, ui ) { if ( !testData.cursorAt ) { equal( ui.position.left - ui.originalPosition.left, deltaX, testName + " " + position + " left" ); @@ -780,7 +783,7 @@ test( "cursorAt, switching after initialization", function() { equal( event.clientY - ui.offset.top, testData.y + testHelper.unreliableOffset, testName + " " + position + " top" ); } } - }); + } ); element.draggable( "option", "cursorAt", false ); element.draggable( "option", "cursorAt", testData.cursorAt ); @@ -789,10 +792,10 @@ test( "cursorAt, switching after initialization", function() { moves: 1, dx: deltaX, dy: deltaY - }); - }); - }); -}); + } ); + } ); + } ); +} ); test( "disabled", function() { expect( 6 ); @@ -806,23 +809,23 @@ test( "disabled", function() { element.draggable( "option", "disabled", false ); testHelper.shouldMove( element, "option: disabled false" ); -}); +} ); test( "{ grid: [50, 50] }, relative", function() { expect( 4 ); - var element = $( "#draggable1" ).draggable({ grid: [ 50, 50 ] }); + var element = $( "#draggable1" ).draggable( { grid: [ 50, 50 ] } ); testHelper.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] relative" ); testHelper.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] relative" ); -}); +} ); test( "{ grid: [50, 50] }, absolute", function() { expect( 4 ); - var element = $( "#draggable2" ).draggable({ grid: [ 50, 50 ] }); + var element = $( "#draggable2" ).draggable( { grid: [ 50, 50 ] } ); testHelper.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] absolute" ); testHelper.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] absolute" ); -}); +} ); test( "grid, switching after initialization", function() { expect( 8 ); @@ -837,17 +840,17 @@ test( "grid, switching after initialization", function() { testHelper.testDrag( element, element, 24, 24, 0, 0, "grid: [50, 50] as option" ); testHelper.testDrag( element, element, 26, 25, 50, 50, "grid: [50, 50] as option" ); -}); +} ); test( "{ handle: 'span' }", function() { expect( 6 ); - var element = $( "#draggable2" ).draggable({ handle: "span" }); + var element = $( "#draggable2" ).draggable( { handle: "span" } ); - testHelper.shouldMove( element, "handle: span", "#draggable2 span"); + testHelper.shouldMove( element, "handle: span", "#draggable2 span" ); testHelper.shouldMove( element, "handle: span child", "#draggable2 span em" ); testHelper.shouldNotDrag( element, "handle: span element" ); -}); +} ); test( "handle, default, switching after initialization", function() { expect( 12 ); @@ -866,7 +869,7 @@ test( "handle, default, switching after initialization", function() { element.draggable( "option", "handle", false ); testHelper.shouldMove( element, "handle: false as option, element dragged" ); testHelper.shouldMove( element, "handle: false as option, span dragged", "#draggable2 span" ); -}); +} ); test( "helper, default, switching after initialization", function() { expect( 6 ); @@ -879,36 +882,36 @@ test( "helper, default, switching after initialization", function() { element.draggable( "option", "helper", "original" ); testHelper.shouldMove( element, "helper: original" ); -}); +} ); // http://bugs.jqueryui.com/ticket/9446 // Draggable: helper function cannot emulate default behavior test( "helper, function returning original element", function() { expect( 1 ); - var element = $( "#draggable1" ).css( "position", "static" ).draggable({ + var element = $( "#draggable1" ).css( "position", "static" ).draggable( { helper: function() { return this; } - }); + } ); testHelper.testDragHelperOffset( element, 100, 100, 100, 100, "original element is draggable" ); element.simulate( "drag", { dx: 100, dy: 100 - }); -}); + } ); +} ); function testHelperPosition( scrollPositions, position, helper, scrollElements, scrollElementsTitle ) { test( "{ helper: '" + helper + "' }, " + position + ", with scroll offset on " + scrollElementsTitle, function() { expect( scrollPositions.length * 2 ); var i, j, - element = $( "#draggable1" ).css({ position: position, top: 0, left: 0 }).draggable({ + element = $( "#draggable1" ).css( { position: position, top: 0, left: 0 } ).draggable( { helper: helper, scroll: false - }); + } ); if ( scrollElements.length === 1 && scrollElements[ 0 ] === "#scrollParent" ) { testHelper.setScrollable( "#main", false ); @@ -931,10 +934,10 @@ function testHelperPosition( scrollPositions, position, helper, scrollElements, testHelper.setScrollable( "#main", true ); testHelper.setScrollable( "#scrollParent", false ); } - }); + } ); } -(function() { +( function() { var scrollElementsMap = { "no elements": [], "parent": [ "#main" ], @@ -944,6 +947,7 @@ function testHelperPosition( scrollPositions, position, helper, scrollElements, }, positions = [ "absolute", "fixed", "relative", "static" ], helpers = [ "original", "clone" ], + // static is not an option here since the fixture is in an absolute container scrollPositions = [ "relative", "absolute", "fixed" ]; @@ -953,39 +957,39 @@ function testHelperPosition( scrollPositions, position, helper, scrollElements, var position = this; $.each( scrollElementsMap, function( scrollElementsTitle, scrollElements ) { testHelperPosition( scrollPositions, position, helper, scrollElements, scrollElementsTitle ); - }); - }); - }); -})(); + } ); + } ); + } ); +} )(); test( "{ opacity: 0.5 }", function() { expect( 1 ); var opacity = null, - element = $( "#draggable2" ).draggable({ + element = $( "#draggable2" ).draggable( { opacity: 0.5, start: function() { - opacity = $(this).css( "opacity" ); + opacity = $( this ).css( "opacity" ); } - }); + } ); element.simulate( "drag", { dx: -1, dy: -1 - }); + } ); equal( opacity, 0.5, "start callback: opacity is" ); -}); +} ); test( "opacity, default, switching after initialization", function() { expect( 3 ); var opacity = null, - element = $( "#draggable2" ).draggable({ + element = $( "#draggable2" ).draggable( { start: function() { - opacity = $(this).css( "opacity" ); + opacity = $( this ).css( "opacity" ); } - }); + } ); testHelper.move( element, 1, 1 ); equal( opacity, 1 ); @@ -997,15 +1001,15 @@ test( "opacity, default, switching after initialization", function() { element.draggable( "option", "opacity", false ); testHelper.move( element, 3, 1 ); equal( opacity, 1 ); -}); +} ); asyncTest( "revert and revertDuration", function() { expect( 7 ); - var element = $( "#draggable2" ).draggable({ + var element = $( "#draggable2" ).draggable( { revert: true, revertDuration: 0 - }); + } ); testHelper.shouldMovePositionButNotOffset( element, "revert: true, revertDuration: 0 should revert immediately" ); $( "#draggable2" ).draggable( "option", "revert", "invalid" ); @@ -1020,45 +1024,45 @@ asyncTest( "revert and revertDuration", function() { stop: function() { start(); } - }); + } ); // Animation are async, so test for it asynchronously testHelper.move( element, 50, 50 ); setTimeout( function() { ok( $( "#draggable2" ).is( ":animated" ), "revert: true with revertDuration should animate" ); - }); -}); + } ); +} ); test( "revert: valid", function() { expect( 2 ); - var element = $( "#draggable2" ).draggable({ + var element = $( "#draggable2" ).draggable( { revert: "valid", revertDuration: 0 - }); + } ); $( "#droppable" ).droppable(); testHelper.shouldMovePositionButNotOffset( element, "revert: valid reverts when dropped on a droppable" ); -}); +} ); test( "scope", function() { expect( 4 ); - var element = $( "#draggable2" ).draggable({ + var element = $( "#draggable2" ).draggable( { scope: "tasks", revert: "valid", revertDuration: 0 - }); + } ); - $( "#droppable" ).droppable({ scope: "tasks" }); + $( "#droppable" ).droppable( { scope: "tasks" } ); testHelper.shouldMovePositionButNotOffset( element, "revert: valid reverts when dropped on a droppable in scope" ); - $( "#droppable" ).droppable( "destroy" ).droppable({ scope: "nottasks" }); + $( "#droppable" ).droppable( "destroy" ).droppable( { scope: "nottasks" } ); testHelper.shouldMove( element, "revert: valid reverts when dropped on a droppable out of scope" ); -}); +} ); test( "scroll, scrollSensitivity, and scrollSpeed", function() { expect( 2 ); @@ -1067,46 +1071,46 @@ test( "scroll, scrollSensitivity, and scrollSpeed", function() { var currentScrollTop, viewportHeight = $( window ).height(), - element = $( "#draggable1" ).draggable({ scroll: true }).appendTo( "#qunit-fixture" ), + element = $( "#draggable1" ).draggable( { scroll: true } ).appendTo( "#qunit-fixture" ), scrollSensitivity = element.draggable( "option", "scrollSensitivity" ), scrollSpeed = element.draggable( "option", "scrollSpeed" ); - element.offset({ + element.offset( { top: viewportHeight - scrollSensitivity - 1, left: 1 - }); + } ); $( element ).one( "drag", function() { equal( $( window ).scrollTop(), 0, "scroll: true doesn't scroll when the element is dragged outside of scrollSensitivity" ); - }); + } ); element.simulate( "drag", { dx: 1, y: viewportHeight - scrollSensitivity - 1, moves: 1 - }); + } ); element.draggable( "option", "scrollSensitivity", scrollSensitivity + 10 ); - element.offset({ + element.offset( { top: viewportHeight - scrollSensitivity - 1, left: 1 - }); + } ); currentScrollTop = $( window ).scrollTop(); $( element ).one( "drag", function() { ok( $( window ).scrollTop() - currentScrollTop, scrollSpeed, "scroll: true scrolls when the element is dragged within scrollSensitivity" ); - }); + } ); element.simulate( "drag", { dx: 1, y: viewportHeight - scrollSensitivity - 1, moves: 1 - }); + } ); testHelper.restoreScroll( document ); -}); +} ); test( "scroll ignores containers that are overflow: hidden", function() { expect( 2 ); @@ -1119,7 +1123,7 @@ test( "scroll ignores containers that are overflow: hidden", function() { element.simulate( "drag", { dx: 1300, dy: 1300 - }); + } ); // IE8 natively scrolls when dragging an element inside a overflow:hidden // container, so skip this test if native scroll occurs. @@ -1130,16 +1134,16 @@ test( "scroll ignores containers that are overflow: hidden", function() { return; } - element.css({ top: 0, left: 0 }).draggable( "option", "scroll", true ); + element.css( { top: 0, left: 0 } ).draggable( "option", "scroll", true ); element.simulate( "drag", { dx: 1300, dy: 1300 - }); + } ); equal( scrollParent.scrollTop(), 0, "container doesn't scroll vertically" ); equal( scrollParent.scrollLeft(), 0, "container doesn't scroll horizontally" ); -}); +} ); test( "#6817: auto scroll goes double distance when dragging", function( assert ) { expect( 2 ); @@ -1149,22 +1153,23 @@ test( "#6817: auto scroll goes double distance when dragging", function( assert var offsetBefore, distance = 10, viewportHeight = $( window ).height(), - element = $( "#draggable1" ).draggable({ + element = $( "#draggable1" ).draggable( { scroll: true, stop: function( e, ui ) { equal( ui.offset.top, newY, "offset of item matches pointer position after scroll" ); + // TODO: fix IE8 testswarm IFRAME positioning bug so assert.close can be turned back to equal assert.close( ui.offset.top - offsetBefore.top, distance, 1, "offset of item only moves expected distance after scroll" ); } - }), + } ), scrollSensitivity = element.draggable( "option", "scrollSensitivity" ), oldY = viewportHeight - scrollSensitivity, newY = oldY + distance; - element.offset({ + element.offset( { top: oldY, left: 1 - }); + } ); offsetBefore = element.offset(); @@ -1173,32 +1178,32 @@ test( "#6817: auto scroll goes double distance when dragging", function( assert dx: 1, y: newY, moves: 1 - }); + } ); testHelper.restoreScroll( document ); -}); +} ); test( "snap, snapMode, and snapTolerance", function( assert ) { expect( 10 ); var newX, newY, snapTolerance = 15, - element = $( "#draggable1" ).draggable({ + element = $( "#draggable1" ).draggable( { snap: true, scroll: false, snapMode: "both", snapTolerance: snapTolerance - }), + } ), element2 = $( "#draggable2" ).draggable(); // Http://bugs.jqueryui.com/ticket/9724 // Draggable: Snapping coordinates thrown off by margin on draggable element.css( "margin", "3px" ); - element.offset({ + element.offset( { top: 1, left: 1 - }); + } ); newX = element2.offset().left - element.outerWidth() - snapTolerance - 2; newY = element2.offset().top; @@ -1208,7 +1213,7 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); // TODO: fix IE8 testswarm IFRAME positioning bug so assert.close can be turned back to equal assert.close( element.offset().left, newX, 1, "doesn't snap outside the snapTolerance" ); @@ -1221,7 +1226,7 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); notDeepEqual( element.offset(), { top: newY, left: newX }, "snaps inside the snapTolerance" ); @@ -1232,7 +1237,7 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); notDeepEqual( element.offset(), { top: newY, left: newX }, "snaps based on selector" ); @@ -1243,7 +1248,7 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap based on invalid selector" ); @@ -1254,7 +1259,7 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap outside the modified snapTolerance" ); @@ -1266,7 +1271,7 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap inside the outer snapTolerance area when snapMode is inner" ); @@ -1278,7 +1283,7 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap inside the outer snapTolerance area when snapMode is inner" ); @@ -1289,7 +1294,7 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); notDeepEqual( element.offset(), { top: newY, left: newX }, "snaps inside the inner snapTolerance area when snapMode is inner" ); @@ -1300,17 +1305,17 @@ test( "snap, snapMode, and snapTolerance", function( assert ) { x: newX, y: newY, moves: 1 - }); + } ); deepEqual( element.offset(), { top: newY, left: newX }, "doesn't snap on the inner snapTolerance area when snapMode is outer" ); -}); +} ); test( "#8459: element can snap to an element that was removed during drag", function( assert ) { expect( 2 ); var newX, newY, snapTolerance = 15, - element = $( "#draggable1" ).draggable({ + element = $( "#draggable1" ).draggable( { snap: true, scroll: false, snapMode: "both", @@ -1318,13 +1323,13 @@ test( "#8459: element can snap to an element that was removed during drag", func start: function() { element2.remove(); } - }), + } ), element2 = $( "#draggable2" ).draggable(); - element.offset({ + element.offset( { top: 1, left: 1 - }); + } ); newX = element2.offset().left - element.outerWidth() - snapTolerance + 1; newY = element2.offset().top; @@ -1334,18 +1339,19 @@ test( "#8459: element can snap to an element that was removed during drag", func x: newX, y: newY, moves: 1 - }); + } ); // Support: Opera 12.10, Safari 5.1, jQuery <1.8 if ( testHelper.unreliableContains ) { ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" ); ok( true, "Opera <12.14 and Safari <6.0 report wrong values for $.contains in jQuery < 1.8" ); } else { + // TODO: fix IE8 testswarm IFRAME positioning bug so assert.close can be turned back to equal assert.close( element.offset().left, newX, 1, "doesn't snap to a removed element" ); assert.close( element.offset().top, newY, 1, "doesn't snap to a removed element" ); } -}); +} ); test( "#8165: Snapping large rectangles to small rectangles doesn't snap properly", function() { expect( 1 ); @@ -1353,85 +1359,85 @@ test( "#8165: Snapping large rectangles to small rectangles doesn't snap properl var snapTolerance = 20, y = 1, element = $( "#draggable1" ) - .css({ + .css( { width: "50px", height: "200px" - }).offset({ + } ).offset( { top: y, left: 1 - }), + } ), element2 = $( "#draggable2" ) - .css({ + .css( { width: "50px", height: "50px" - }).offset({ + } ).offset( { top: y + snapTolerance + 1, left: 200 - }), + } ), newX = element2.offset().left - element.outerWidth() - snapTolerance + 1; - $( "#draggable1, #draggable2" ).draggable({ + $( "#draggable1, #draggable2" ).draggable( { snap: true, snapTolerance: snapTolerance - }); + } ); element.simulate( "drag", { handle: "corner", x: newX, moves: 1 - }); + } ); notDeepEqual( element.offset(), { top: y, left: newX }, "snaps even if only a side (not a corner) is inside the snapTolerance" ); -}); +} ); test( "stack", function() { expect( 2 ); - var element = $( "#draggable1" ).draggable({ + var element = $( "#draggable1" ).draggable( { stack: "#draggable1, #draggable2" - }), - element2 = $( "#draggable2" ).draggable({ + } ), + element2 = $( "#draggable2" ).draggable( { stack: "#draggable1, #draggable2" - }); + } ); testHelper.move( element, 1, 1 ); equal( element.css( "zIndex" ), "2", "stack increments zIndex correctly" ); testHelper.move( element2, 1, 1 ); equal( element2.css( "zIndex" ), "3", "stack increments zIndex correctly" ); -}); +} ); test( "{ zIndex: 10 }", function() { expect( 1 ); var actual, expected = 10, - element = $( "#draggable2" ).draggable({ + element = $( "#draggable2" ).draggable( { zIndex: expected, start: function() { - actual = $(this).css( "zIndex" ); + actual = $( this ).css( "zIndex" ); } - }); + } ); element.simulate( "drag", { dx: -1, dy: -1 - }); + } ); equal( actual, expected, "start callback: zIndex is" ); -}); +} ); test( "zIndex, default, switching after initialization", function() { expect( 3 ); var zindex = null, - element = $( "#draggable2" ).draggable({ + element = $( "#draggable2" ).draggable( { start: function() { - zindex = $(this).css( "z-index" ); + zindex = $( this ).css( "z-index" ); } - }); + } ); element.css( "z-index", 1 ); @@ -1446,48 +1452,49 @@ test( "zIndex, default, switching after initialization", function() { testHelper.move( element, 3, 1 ); equal( zindex, 1 ); -}); +} ); test( "iframeFix", function() { expect( 5 ); - var element = $( "
    " ).appendTo( "#qunit-fixture" ).draggable({ iframeFix: true }), - element2 = $( "
    " ).appendTo( "#qunit-fixture" ).draggable({ iframeFix: ".iframe" }), + var element = $( "
    " ).appendTo( "#qunit-fixture" ).draggable( { iframeFix: true } ), + element2 = $( "
    " ).appendTo( "#qunit-fixture" ).draggable( { iframeFix: ".iframe" } ), iframe = $( "" ) .append( "