diff options
| author | gnarf <gnarf@gnarf.net> | 2011-05-04 01:38:41 -0500 |
|---|---|---|
| committer | gnarf <gnarf@gnarf.net> | 2011-05-04 01:38:41 -0500 |
| commit | d61e0656c59761cf9729d2aacbc16d74e576a440 (patch) | |
| tree | 436fa7641aa06435fcbf49b3f3d88caf849a99f6 | |
| parent | c5c65dbac60463d04a6c34a3c0e3e9ce5a846a43 (diff) | |
| parent | f5ee22c74a2e0e48b686a94838e12cbb9b45c99c (diff) | |
| download | jquery-ui-d61e0656c59761cf9729d2aacbc16d74e576a440.tar.gz jquery-ui-d61e0656c59761cf9729d2aacbc16d74e576a440.zip | |
Merge branch 'master' into effects-unit
28 files changed, 593 insertions, 236 deletions
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index a9745a062..ef8857979 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -11,15 +11,14 @@ <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { - // TODO overhaul this with custom animation API $(".demo").tooltip({ - open: function() { - $(".ui-tooltip").stop(false, true).hide().slideDown(); + show: { + effect: "slideDown", + delay: 250 }, - close: function() { - $(".ui-tooltip").stop(false, false).show().slideUp(function() { - $(this).remove(); - }); + hide: { + effect: "hide", + delay: 250 } }); }); @@ -48,7 +47,9 @@ <div class="demo-description"> -<p>Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.</p> +<p>This demo shows how to customize animations. The tooltip is shown, after a +delay of 250ms, using a slide down animation, and hidden, after another delay, +without an animation.</p> </div><!-- End demo-description --> diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html index 3563350c5..4ad189ed2 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -14,7 +14,7 @@ <li><a href="tracking.html">Track the mouse</a></li> <li><a href="custom-animation.html">Custom animation</a></li> <li><a href="delegation-mixbag.html">Delegation Mixbag</a></li> - <li><a href="lots.html">Lots</a></li> + <li><a href="video-player.html">Video Player</a></li> </ul> </div> diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html new file mode 100644 index 000000000..c890c76b4 --- /dev/null +++ b/demos/tooltip/video-player.html @@ -0,0 +1,101 @@ +<!doctype html> +<html lang="en"> +<head> + <title>jQuery UI Tooltip - Video Player demo</title> + <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> + <script type="text/javascript" src="../../jquery-1.5.1.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.tooltip.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> + <script type="text/javascript" src="../../ui/jquery.ui.menu.js"></script> + <script type="text/javascript" src="../../tests/visual/menu/popup.js"></script> + <link type="text/css" href="../demos.css" rel="stylesheet" /> + <script type="text/javascript"> + $(function() { + $("button").each(function() { + $(this).button({ + icons: { + primary: $(this).data("icon") + }, + text: !!$(this).attr("title") + }); + }); + $(".set").buttonset(); + + // TODO hide the tooltip when clicking the button + $("ul").menu().popup({ + trigger: $(".menu") + }); + + $(".demo").tooltip({ + position: { + my: "center top", + at: "center bottom+5", + }, + show: { + duration: "fast" + }, + hide: { + effect: "hide" + } + }); + }); + </script> + <style> + .player { width: 500px; height: 300px; border: 2px groove gray; background: rgb(200, 200, 200); text-align: center; line-height: 300px; } + /* TODO load from jquery.ui.popup.css */ + .ui-popup { position: absolute; z-index: 5000; } + + .ui-tooltip { + border: 1px solid white; + background: rgba(20, 20, 20, 1); + color: white; + } + </style> +</head> +<body> + +<div class="demo"> + + <div class="player">Here Be Video (HTML5?)</div> + <div class="tools"> + <span class="set"> + <button data-icon="ui-icon-circle-arrow-n" title="I like this">Like</button> + <button data-icon="ui-icon-circle-arrow-s">I dislike this</button> + </span> + <span class="set"> + <button data-icon="ui-icon-circle-plus" title="Add to Watch Later">Add to</button> + <button class="menu" data-icon="ui-icon-triangle-1-s">Add to favorites or playlist</button> + </span> + <button title="Share this video">Share</button> + <button data-icon="ui-icon-alert">Flag as inappropiate</button> + <ul> + <li> + <a href="#">Favorites</a> + </li> + <li> + <a href="#">Watch Later</a> + </li> + <li> + <a href="#">New Playlist...</a> + </li> + </ul> + </div> + </div> + +</div><!-- End demo --> + + + +<div class="demo-description"> + +<p>A fake video player with like/share/stats button, each with a custom-styled tooltip.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js index 5b00e17e8..c0feae75c 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -13,23 +13,26 @@ test("accessibility", function () { var item0 = $("li:eq(0) a"); ok( ac.hasClass("ui-menu ui-widget ui-widget-content ui-corner-all"), "menu class"); - equals( ac.attr("role"), "listbox", "main role"); + equals( ac.attr("role"), "menu", "main role"); ok( !ac.attr("aria-activedescendant"), "aria attribute not yet active"); + var item = ac.find( "li:first" ).find( "a" ).attr( "id", "xid" ).end(); ac.menu( "focus", $.Event(), item ); equals( ac.attr("aria-activedescendant"), "xid", "aria attribute, id from dom"); + var item = ac.find( "li:last" ); ac.menu( "focus", $.Event(), item ); - equals( ac.attr("aria-activedescendant"), "menu1-activedescendant", "aria attribute, generated id"); + equals( ac.attr("aria-activedescendant"), "menu1-4", "aria attribute, generated id"); }); test("items class and role", function () { var ac = $('#menu1').menu(); - expect(1 + 4 * $("li",ac).length); + expect(1 + 5 * $("li",ac).length); ok( ($("li",ac).length > 0 ), "number of menu items"); $("li",ac).each(function(item) { ok( $(this).hasClass("ui-menu-item"), "menu item ("+ item + ") class for item"); - equals( $(this).attr("role"), "menuitem", "menu item ("+ item + ") role"); + equals( $(this).attr("role"), "presentation", "menu item ("+ item + ") role"); + equals( $("a", this).attr("role"), "menuitem", "menu item ("+ item + ") role"); ok( $("a",this).hasClass("ui-corner-all"), "a element class for menu item ("+ item + ") "); equals( $("a",this).attr("tabindex"), "-1", "a element tabindex for menu item ("+ item + ") "); }); diff --git a/tests/unit/position/position_core.js b/tests/unit/position/position_core.js index 5a47fe6bb..dbbda8a3b 100644 --- a/tests/unit/position/position_core.js +++ b/tests/unit/position/position_core.js @@ -1,5 +1,10 @@ (function( $ ) { +function scrollTopSupport() { + $( window ).scrollTop( 1 ); + return $( window ).scrollTop() === 1; +} + module( "position" ); test( "my, at, of", function() { @@ -161,11 +166,7 @@ test( "of", function() { left: $( window ).width() - 10 }, "window as jQuery object" ); - var scrollTopSupport = (function() { - $( window ).scrollTop( 1 ); - return $( window ).scrollTop() === 1; - }() ); - if ( scrollTopSupport ) { + if ( scrollTopSupport() ) { $( window ).scrollTop( 500 ).scrollLeft( 200 ); $( "#elx" ).position({ my: "right bottom", @@ -311,6 +312,22 @@ test( "collision: fit, with offset", function() { }, { top: 0, left: 0 }, "left top, negative offset" ); }); +test( "collision: fit, window scrolled", function() { + if ( scrollTopSupport() ) { + var win = $( window ); + win.scrollTop( 300 ).scrollLeft( 200 ); + collisionTest({ + collision: "fit", + at: "left-100 top-100" + }, { top: 300, left: 200 }, "top left" ); + collisionTest2({ + collision: "fit", + at: "right+100 bottom+100" + }, { top: 300 + win.height() - 10, left: 200 + win.width() - 10 }, "right bottom" ); + win.scrollTop( 0 ).scrollLeft( 0 ); + } +}); + test( "collision: flip, no offset", function() { collisionTest({ collision: "flip" diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js index 25877e69c..90c43037c 100644 --- a/tests/unit/tabs/tabs_deprecated.js +++ b/tests/unit/tabs/tabs_deprecated.js @@ -107,84 +107,90 @@ test('spinner', function() { }); }); -test('selected', function() { - expect(10); +test( "selected", function() { + expect( 19 ); - el = $('#tabs1').tabs(); - equals(el.tabs('option', 'selected'), 0, 'should be 0 by default'); + var element = $( "#tabs1" ).tabs(); + equals( element.tabs( "option", "selected" ), 0, "should be 0 by default" ); + tabs_state( element, 1, 0, 0 ); + element.tabs( "destroy" ); - el.tabs('destroy'); - //set a hash in the url - location.hash = '#fragment-2'; - //selection of tab with divs ordered differently than list - el = $('#tabs1').tabs(); - equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); + location.hash = "#fragment-3"; + element = $( "#tabs1" ).tabs(); + equals( element.tabs( "option", "selected" ), 2, "should be 2 based on URL" ); + tabs_state( element, 0, 0, 1 ); + element.tabs( "destroy" ); - el.tabs('destroy'); - //set a hash in the url - location.hash = '#tabs7-2'; - //selection of tab with divs ordered differently than list - el = $('#tabs7').tabs(); - equals(el.tabs('option', 'selected'), 1, 'second tab should be selected'); + el = $('#tabs1').tabs({ + selected: -1, + collapsible: true + }); + tabs_state( element, 0, 0, 0 ); + equal( element.find( ".ui-tabs-nav .ui-state-active" ).size(), 0, "no tabs selected" ); + strictEqual( element.tabs( "option", "selected" ), -1 ); - el.tabs('destroy'); - el = $('#tabs1').tabs({ selected: -1 }); - equals(el.tabs('option', 'selected'), -1, 'should be -1 for all tabs unselected'); - equals( $('li.ui-tabs-active', el).length, 0, 'no tab should be selected' ); - equals( $('div:hidden', '#tabs1').length, 3, 'all panels should be hidden' ); + element.tabs( "option", "collapsible", false ); + tabs_state( element, 1, 0, 0 ); + equal( element.tabs( "option", "selected" ), 0 ); + element.tabs( "destroy" ); - el.tabs('destroy'); - el.tabs({ selected: 1 }); - equals(el.tabs('option', 'selected'), 1, 'should be specified tab'); + element.tabs({ + selected: -1 + }); + tabs_state( element, 1, 0, 0 ); + strictEqual( element.tabs( "option", "selected" ), 0 ); + element.tabs( "destroy" ); - el.tabs('destroy'); - el.tabs({ selected: 99 }); - equals(el.tabs('option', 'selected'), 0, 'selected should default to zero if given value is out of index'); + element.tabs({ selected: 2 }); + equals( element.tabs( "option", "selected" ), 2 ); + tabs_state( element, 0, 0, 1 ); - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('option', 'selected', 0); - equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected'); + element.tabs( "option", "selected", 0 ); + equals( element.tabs( "option", "selected" ), 0 ); + tabs_state( element, 1, 0, 0 ); - el.tabs('destroy'); - el = $('#tabs1').tabs(); - el.tabs('select', 1); - equals(el.tabs('option', 'selected'), 1, 'should select tab'); + element.find( ".ui-tabs-nav a" ).eq( 1 ).click(); + equals( element.tabs( "option", "selected" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + element.tabs( "option", "selected", 10 ); + equals( element.tabs( "option", "selected" ), 1 ); + tabs_state( element, 0, 1, 0 ); + + location.hash = "#"; }); -module("tabs (deprecated): events"); +module( "tabs (deprecated): events" ); -test('enable', function() { - expect(4); +test( "enable", function() { + expect( 3 ); - var uiObj; - el = $('#tabs1').tabs({ + var element = $( "#tabs1" ).tabs({ disabled: [ 0, 1 ], - enable: function (event, ui) { - uiObj = ui; + enable: function ( event, ui ) { + equals( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" ); + equals( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" ); + equals( ui.index, 1, "ui.index" ); } }); - el.tabs('enable', 1); - ok(uiObj !== undefined, 'trigger callback'); - equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); - equals(uiObj.index, 1, 'contain index'); + element.tabs( "enable", 1 ); + // shouldn't trigger event + element.tabs( "enable", 2 ); }); -test('disable', function() { - expect(4); +test( "disable", function() { + expect( 3 ); - var uiObj; - el = $('#tabs1').tabs({ - disable: function (event, ui) { - uiObj = ui; + var element = $( "#tabs1" ).tabs({ + disable: function ( event, ui ) { + equals( ui.tab, element.find( ".ui-tabs-nav a" )[ 1 ], "ui.tab" ); + equals( ui.panel, element.find( ".ui-tabs-panel" )[ 1 ], "ui.panel" ); + equals( ui.index, 1, "ui.index" ); } }); - el.tabs('disable', 1); - ok(uiObj !== undefined, 'trigger callback'); - equals(uiObj.tab, $('a', el)[1], 'contain tab as DOM anchor element'); - equals(uiObj.panel, $('div', el)[1], 'contain panel as DOM div element'); - equals(uiObj.index, 1, 'contain index'); + element.tabs( "disable", 1 ); + // shouldn't trigger event + element.tabs( "disable", 1 ); }); test('show', function() { @@ -332,33 +338,49 @@ test( "remove", function() { equals( element.tabs( "option", "active" ), false ); }); -test('select', function() { - expect(6); - - el = $('#tabs1').tabs(); +test( "select", function() { + expect( 23 ); - el.tabs('select', 1); - equals(el.tabs('option', 'active'), 1, 'should select tab'); - - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('select', 0); - equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab'); + var element = $( "#tabs1" ).tabs(); + tabs_state( element, 1, 0, 0 ); + element.tabs( "select", 1 ); + tabs_state( element, 0, 1, 0 ); + equals( element.tabs( "option", "active" ), 1, "active" ); + equals( element.tabs( "option", "selected" ), 1, "selected" ); + element.tabs( "destroy" ); - el.tabs('destroy'); - el.tabs({ collapsible: true }); - el.tabs('select', -1); - equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1'); + element.tabs({ collapsible: true }); + tabs_state( element, 1, 0, 0 ); + element.tabs( "select", 0 ); + tabs_state( element, 0, 0, 0 ); + equals( element.tabs( "option", "active" ), false, "active" ); + equals( element.tabs( "option", "selected" ), -1, "selected" ); + element.tabs( "destroy" ); + + element.tabs({ collapsible: true }); + element.tabs( "select", -1 ); + tabs_state( element, 0, 0, 0 ); + equals( element.tabs( "option", "active" ), false, "active" ); + equals( element.tabs( "option", "selected" ), -1, "selected" ); + element.tabs( "destroy" ); + + element.tabs(); + tabs_state( element, 1, 0, 0 ); + equals( element.tabs( "option", "active" ), 0, "active" ); + equals( element.tabs( "option", "selected" ), 0, "selected" ); + element.tabs( "select", 0 ); + tabs_state( element, 1, 0, 0 ); + equals( element.tabs( "option", "active" ), 0, "active" ); + equals( element.tabs( "option", "selected" ), 0, "selected" ); + element.tabs( "select", -1 ); + tabs_state( element, 1, 0, 0 ); + equals( element.tabs( "option", "active" ), 0, "active" ); + equals( element.tabs( "option", "selected" ), 0, "selected" ); - el.tabs('destroy'); - el.tabs(); - el.tabs('select', 0); - equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true'); - el.tabs('select', -1); - equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true'); - - el.tabs('select', '#fragment-2'); - equals(el.tabs('option', 'active'), 1, 'should select tab by id'); + element.tabs( "select", "#fragment-2" ); + tabs_state( element, 0, 1, 0 ); + equals( element.tabs( "option", "active" ), 1, "active" ); + equals( element.tabs( "option", "selected" ), 1, "selected" ); }); test( "length", function() { diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index 361ace45b..a6e60a4b3 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -85,7 +85,7 @@ test( "disable( index )", function() { tabs_disabled( element, true ); }); -test( "refersh", function() { +test( "refresh", function() { expect( 27 ); var element = $( "#tabs1" ).tabs(); diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js index 884a566c6..691186276 100644 --- a/tests/unit/tabs/tabs_options.js +++ b/tests/unit/tabs/tabs_options.js @@ -15,6 +15,7 @@ test( "{ active: default }", function() { equals( element.tabs( "option", "active" ), 2, "should be 2 based on URL" ); tabs_state( element, 0, 0, 1 ); element.tabs( "destroy" ); + location.hash = "#"; }); test( "{ active: false }", function() { @@ -92,7 +93,8 @@ test( "active - mismatched tab/panel order", function() { equals( element.tabs( "option", "active" ), 1, "should be 1 based on URL" ); tabs_state( element, 0, 1 ); element.tabs( "option", "active", 0 ); - tabs_state( element, 1, 0 ); + tabs_state( element, 1, 0 ); + location.hash = "#"; }); test( "{ collapsible: false }", function() { diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index 4b273ce78..c1f394ed9 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -75,6 +75,10 @@ window.domEqual = function( selector, modifier, message ) { var attributes = ["class", "role", "id", "tabIndex", "aria-activedescendant"]; function extract(value) { + if (!value || !value.length) { + QUnit.push( false, actual, expected, "domEqual failed, can't extract " + selector + ", message was: " + message ); + return; + } var result = {}; result.nodeName = value[0].nodeName; $.each(attributes, function(index, attr) { diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html index ee4e92723..189c75261 100644 --- a/tests/unit/tooltip/tooltip.html +++ b/tests/unit/tooltip/tooltip.html @@ -39,7 +39,7 @@ <div> <a id="tooltipped1" href="#" title="anchortitle">anchor</a> <input title="inputtitle" /> - <span data-tooltip="text">span</span> + <span id="fixture-span" data-tooltip="text">span</span> </div> </div> diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js index c1fc49f1a..5f304f497 100644 --- a/tests/unit/tooltip/tooltip_defaults.js +++ b/tests/unit/tooltip/tooltip_defaults.js @@ -4,10 +4,10 @@ commonWidgetTests( "tooltip", { items: "[title]", content: $.ui.tooltip.prototype.options.content, position: { - my: "left center", - at: "right center", - offset: "15 0" + my: "left+15 center", + at: "right center" }, + tooltipClass: null, // callbacks create: null diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js index 35620df47..5c915ae30 100644 --- a/tests/unit/tooltip/tooltip_events.js +++ b/tests/unit/tooltip/tooltip_events.js @@ -28,10 +28,10 @@ test("mouse events", function() { }, close: function(event, ui) { same( event.type, "tooltipclose" ); - same( event.originalEvent.type, "mouseout" ); + same( event.originalEvent.type, "mouseleave" ); } }); - e.trigger("mouseover").trigger("mouseout"); + e.trigger("mouseover").trigger("mouseleave"); e.tooltip("destroy"); }); @@ -40,7 +40,7 @@ test("focus events", function() { var e = $("#tooltipped1").tooltip({ open: function(event, ui) { same( event.type, "tooltipopen" ); - same( event.originalEvent.type, "focus" ); + same( event.originalEvent.type, "focusin" ); }, close: function(event, ui) { same( event.type, "tooltipclose" ); diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/tooltip_methods.js index ace1a1288..496a5fdb7 100644 --- a/tests/unit/tooltip/tooltip_methods.js +++ b/tests/unit/tooltip/tooltip_methods.js @@ -14,17 +14,20 @@ test("destroy", function() { test("open", function() { var e = $("#tooltipped1").tooltip(); - ok( $(".ui-tooltip").is(":hidden") ); e.tooltip("open"); ok( $(".ui-tooltip").is(":visible") ); $(":ui-tooltip").tooltip("destroy"); }); +/* +TODO currently tooltip doesn't override widget +can't return anything useful if no element is kept around and there's no useful reference test("widget", function() { var tooltip = $("#tooltipped1").tooltip(); same(tooltip.tooltip("widget")[0], $(".ui-tooltip")[0]); same(tooltip.tooltip("widget").end()[0], tooltip[0]); }); +*/ })(jQuery); diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js index ea4b14229..37a468489 100644 --- a/tests/unit/tooltip/tooltip_options.js +++ b/tests/unit/tooltip/tooltip_options.js @@ -19,12 +19,12 @@ test("option: items", function() { return $(this).attr("data-tooltip"); } }).tooltip("open", event); - same( $(".ui-tooltip").text(), "text" ); + same( $( "#" + $("#fixture-span").attr("aria-describedby") ).text(), "text" ); }); test("content: default", function() { $("#tooltipped1").tooltip().tooltip("open"); - same( $(".ui-tooltip").text(), "anchortitle" ); + same( $( "#" + $("#tooltipped1").attr("aria-describedby") ).text(), "anchortitle" ); }); test("content: return string", function() { @@ -33,7 +33,7 @@ test("content: return string", function() { return "customstring"; } }).tooltip("open"); - same( $(".ui-tooltip").text(), "customstring" ); + same( $( "#" + $("#tooltipped1").attr("aria-describedby") ).text(), "customstring" ); }); test("content: return jQuery", function() { @@ -42,21 +42,25 @@ test("content: return jQuery", function() { return $("<div></div>").html("cu<b>s</b>tomstring"); } }).tooltip("open"); - same( $(".ui-tooltip").text(), "customstring" ); + same( $( "#" + $("#tooltipped1").attr("aria-describedby") ).text(), "customstring" ); }); +/* +TODO broken, probably related to async content test("content: callback string", function() { stop(); $("#tooltipped1").tooltip({ content: function(response) { response("customstring2"); setTimeout(function() { - same( $(".ui-tooltip").text(), "customstring2" ); + //console.log($("#tooltipped1").attr("aria-describedby")) + same( $( "#" + $("#tooltipped1").attr("aria-describedby") ).text(), "customstring2" ); start(); }, 100) } }).tooltip("open"); }); +*/ })(jQuery); diff --git a/tests/visual/effects.all.html b/tests/visual/effects.all.html index 1bbc7a110..1fc35f700 100644 --- a/tests/visual/effects.all.html +++ b/tests/visual/effects.all.html @@ -26,14 +26,26 @@ <ul class="effects"> <li> - <div class="effect" id="blindHorizontally"> - <p>Blind horizontally</p> + <div class="effect" id="blindUp"> + <p>Blind up</p> </div> </li> <li> - <div class="effect" id="blindVertically"> - <p>Blind vertically</p> + <div class="effect" id="blindDown"> + <p>Blind down</p> + </div> + </li> + + <li> + <div class="effect" id="blindLeft"> + <p>Blind left</p> + </div> + </li> + + <li> + <div class="effect" id="blindRight"> + <p>Blind right</p> </div> </li> diff --git a/tests/visual/effects.all.js b/tests/visual/effects.all.js index f678c6276..9cf7487c9 100644 --- a/tests/visual/effects.all.js +++ b/tests/visual/effects.all.js @@ -35,8 +35,10 @@ $(function() { }) }) - effect("#blindHorizontally", "blind", { direction: "horizontal" }); - effect("#blindVertically", "blind", { direction: "vertical" }); + effect("#blindLeft", "blind", { direction: "left" }); + effect("#blindUp", "blind", { direction: "up" }); + effect("#blindRight", "blind", { direction: "right" }); + effect("#blindDown", "blind", { direction: "down" }); effect("#bounce3times", "bounce", { times: 3 }); diff --git a/tests/visual/menu/popup.html b/tests/visual/menu/popup.html index de9796133..271002a20 100644 --- a/tests/visual/menu/popup.html +++ b/tests/visual/menu/popup.html @@ -28,7 +28,9 @@ $(this).hide(); } }; - + + $("#members-popup").popup(); + $("#button1").button(); $("#menu1").menu(selected).popup(); @@ -69,10 +71,24 @@ padding: 0.5em; border: 1px solid black; } + + #members-popup { + width: 200px; height: 150px; border: 1px solid gray; border-radius: 5px; + box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5); + background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd)); + font-size: 120%; text-align: center; line-height: 150px; + } </style> </head> <body> +<div> + <a href="#members-popup">Project members</a> + <div id="members-popup" tabIndex="0"> + some form controls in here + </div> +</div> + <button id="button1">Show context menu 1</button> <ul id="menu1"> <li><a href="#">Amsterdam</a></li> @@ -85,6 +101,7 @@ <li><a href="#">Zurich</a></li> </ul> + <div> <div> <button id="rerun">Run last action</button> diff --git a/tests/visual/tooltip/animations.html b/tests/visual/tooltip/animations.html new file mode 100644 index 000000000..f0deac1d3 --- /dev/null +++ b/tests/visual/tooltip/animations.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Tooltip Visual Test: Default</title> + <link rel="stylesheet" href="../visual.css" type="text/css" /> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css"> + <script type="text/javascript" src="../../../jquery-1.5.1.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script> + <script type="text/javascript" src="../../../ui/jquery.ui.tooltip.js"></script> + <script type="text/javascript" src="../../../ui/jquery.effects.core.js"></script> + <script type="text/javascript" src="../../../ui/jquery.effects.blind.js"></script> + <script type="text/javascript" src="../../../ui/jquery.effects.bounce.js"></script> + <script type="text/javascript" src="../../../ui/jquery.effects.drop.js"></script> + <script type="text/javascript" src="../../../ui/jquery.effects.explode.js"></script> + <!-- + <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> + --> + <script type="text/javascript"> + $(function() { + var animations = [{}, { + show: { + effect: "slideDown" + }, + hide: { + effect: "slideUp" + } + }, { + show: { + effect: "explode" + }, + hide: { + effect: "explode" + } + }, { + show: { + effect: "bounce" + }, + hide: { + effect: "blind" + } + }, + { + show: { + effect: "drop", + direction: "right" + }, + hide: { + effect: "drop", + direction: "right" + } + }]; + $.each(animations, function(index, animation) { + var text = JSON.stringify(animation); + $("<span></span>").attr("title", text).text(text).tooltip({ + show: animation.show, + hide: animation.hide + }).wrap("<li></li>").parent().appendTo("ul"); + }); + }); + </script> +</head> +<body> + +<div style="width:300px"> + <ul class="ui-widget ui-widget-header"> + </ul> +</div> +</body> +</html> diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 6b7250789..7a59d8a75 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -11,6 +11,9 @@ * jquery.effects.core.js */ (function( $, undefined ) { + +var rvertical = /up|down|vertical/; +var rpositivemotion = /up|left|vertical|horizontal/; $.effects.effect.blind = function( o ) { @@ -18,31 +21,57 @@ $.effects.effect.blind = function( o ) { // Create element var el = $( this ), - props = [ 'position', 'top', 'bottom', 'left', 'right' ], - mode = $.effects.setMode( el, o.mode || 'hide' ), - direction = o.direction || 'vertical', - ref = ( direction == 'vertical' ) ? 'height' : 'width', + props = [ "position", "top", "bottom", "left", "right" ], + mode = $.effects.setMode( el, o.mode || "hide" ), + direction = o.direction || "up", + vertical = rvertical.test( direction ), + ref = vertical ? "height" : "width", + ref2 = vertical ? "top" : "left", + motion = rpositivemotion.test( direction ), animation = {}, wrapper, distance; $.effects.save( el, props ); el.show(); wrapper = $.effects.createWrapper( el ).css({ - overflow: 'hidden' + overflow: "hidden" }); - animation[ ref ] = ( mode == 'show' ? wrapper[ ref ]() : 0 ); + distance = wrapper[ ref ](); + + animation[ ref ] = ( mode === "show" ? distance : 0 ); + if ( !motion ) { + el + .css( vertical ? "bottom" : "right", 0 ) + .css( vertical ? "top" : "left", "" ) + .css({ position: "absolute" }); + animation[ ref2 ] = ( mode === "show" ) ? 0 : distance; + } // start at 0 if we are showing - ( mode == 'show' && wrapper.css( ref, 0 ) ); + if ( mode == "show" ) { + wrapper.css( ref, 0 ); + if ( ! motion ) { + wrapper.css( ref2, distance ); + } + } // Animate - wrapper.animate( animation, o.duration, o.easing, function() { - ( mode == 'hide' && el.hide() ); - $.effects.restore( el, props ); - $.effects.removeWrapper( el ); - $.isFunction( o.complete ) && o.complete.apply( el[ 0 ], arguments ); - el.dequeue(); + wrapper.animate( animation, { + duration: o.duration, + easing: o.easing, + queue: false, + complete: function() { + if ( mode == "hide" ) { + el.hide(); + } + $.effects.restore( el, props ); + $.effects.removeWrapper( el ); + if ( $.isFunction( o.complete ) ) { + o.complete.apply( el[ 0 ], arguments ); + } + el.dequeue(); + } }); }); diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js index cc27365d3..3437d0bda 100644 --- a/ui/jquery.ui.datepicker.js +++ b/ui/jquery.ui.datepicker.js @@ -16,6 +16,7 @@ $.extend($.ui, { datepicker: { version: "@VERSION" } }); var PROP_NAME = 'datepicker'; var dpuuid = new Date().getTime(); +var instActive; /* Date picker manager. Use the singleton instance of this class, $.datepicker, to interact with the date picker. @@ -107,7 +108,7 @@ function Datepicker() { autoSize: false // True to size the input for the date format, false to leave as is }; $.extend(this._defaults, this.regional['']); - this.dpDiv = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'); + this.dpDiv = bindHover($('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>')); } $.extend(Datepicker.prototype, { @@ -173,7 +174,7 @@ $.extend(Datepicker.prototype, { drawMonth: 0, drawYear: 0, // month being drawn inline: inline, // is datepicker inline or not dpDiv: (!inline ? this.dpDiv : // presentation div - $('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'))}; + bindHover($('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>')))}; }, /* Attach the date picker to an input field. */ @@ -674,29 +675,13 @@ $.extend(Datepicker.prototype, { _updateDatepicker: function(inst) { var self = this; var borders = $.datepicker._getBorders(inst.dpDiv); + instActive = inst; // for delegate hover events inst.dpDiv.empty().append(this._generateHTML(inst)); var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6 cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()}) } - inst.dpDiv.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a') - .bind('mouseout', function(){ - $(this).removeClass('ui-state-hover'); - if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover'); - if(this.className.indexOf('ui-datepicker-next') != -1) $(this).removeClass('ui-datepicker-next-hover'); - }) - .bind('mouseover', function(){ - if (!self._isDisabledDatepicker( inst.inline ? inst.dpDiv.parent()[0] : inst.input[0])) { - $(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover'); - $(this).addClass('ui-state-hover'); - if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).addClass('ui-datepicker-prev-hover'); - if(this.className.indexOf('ui-datepicker-next') != -1) $(this).addClass('ui-datepicker-next-hover'); - } - }) - .end() - .find('.' + this._dayOverClass + ' a') - .trigger('mouseover') - .end(); + inst.dpDiv.find('.' + this._dayOverClass + ' a').mouseover(); var numMonths = this._getNumberOfMonths(inst); var cols = numMonths[1]; var width = 17; @@ -1719,6 +1704,28 @@ $.extend(Datepicker.prototype, { } }); +/* + * Bind hover events for datepicker elements. + * Done via delegate so the binding only occurs once in the lifetime of the parent div. + * Global instActive, set by _updateDatepicker allows the handlers to find their way back to the active picker. + */ +function bindHover(dpDiv) { + var selector = 'button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a'; + return dpDiv.delegate(selector, 'mouseout', function() { + $(this).removeClass('ui-state-hover'); + if (this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover'); + if (this.className.indexOf('ui-datepicker-next') != -1) $(this).removeClass('ui-datepicker-next-hover'); + }) + .delegate(selector, 'mouseover', function(){ + if (!$.datepicker._isDisabledDatepicker( instActive.inline ? dpDiv.parent()[0] : instActive.input[0])) { + $(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover'); + $(this).addClass('ui-state-hover'); + if (this.className.indexOf('ui-datepicker-prev') != -1) $(this).addClass('ui-datepicker-prev-hover'); + if (this.className.indexOf('ui-datepicker-next') != -1) $(this).addClass('ui-datepicker-next-hover'); + } + }); +} + /* jQuery extend now ignores nulls! */ function extendRemove(target, props) { $.extend(target, props); diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index c14237b6a..8423d1164 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -86,16 +86,14 @@ $.widget("ui.dialog", { titleId = $.ui.dialog.getTitleId( self.element ), uiDialog = ( self.uiDialog = $( "<div>" ) ) - .appendTo( document.body ) - .hide() .addClass( uiDialogClasses + options.dialogClass ) .css({ + display: "none", + outline: 0, // TODO: move to stylesheet zIndex: options.zIndex }) // setting tabIndex makes the div focusable .attr( "tabIndex", -1) - // TODO: move to stylesheet - .css( "outline", 0 ) .keydown(function( event ) { if ( options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && event.keyCode === $.ui.keyCode.ESCAPE ) { @@ -156,6 +154,8 @@ $.widget("ui.dialog", { self._createButtons( options.buttons ); self._isOpen = false; + uiDialog.appendTo( document.body ); + if ( $.fn.bgiframe ) { uiDialog.bgiframe(); } @@ -310,9 +310,14 @@ $.widget("ui.dialog", { // set focus to the first tabbable element in the content area or the first button // if there are no tabbable elements, set focus on the dialog itself - $( self.element.find( ":tabbable" ).get().concat( - uiDialog.find( ".ui-dialog-buttonpane :tabbable" ).get().concat( - uiDialog.get() ) ) ).eq( 0 ).focus(); + var hasFocus = self.element.find( ":tabbable" ); + if ( !hasFocus.length ) { + hasFocus = uiDialog.find( ".ui-dialog-buttonpane :tabbable" ); + if ( !hasFocus.length ) { + hasFocus = uiDialog; + } + } + hasFocus.eq( 0 ).focus(); self._isOpen = true; self._trigger( "open" ); @@ -322,12 +327,7 @@ $.widget("ui.dialog", { _createButtons: function( buttons ) { var self = this, - hasButtons = false, - uiDialogButtonPane = $( "<div>" ) - .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ), - uiButtonSet = $( "<div>" ) - .addClass( "ui-dialog-buttonset" ) - .appendTo( uiDialogButtonPane ); + hasButtons = false; // if we already have a button pane, remove it self.uiDialog.find( ".ui-dialog-buttonpane" ).remove(); @@ -338,6 +338,12 @@ $.widget("ui.dialog", { }); } if ( hasButtons ) { + var uiDialogButtonPane = $( "<div>" ) + .addClass( "ui-dialog-buttonpane ui-widget-content ui-helper-clearfix" ), + uiButtonSet = $( "<div>" ) + .addClass( "ui-dialog-buttonset" ) + .appendTo( uiDialogButtonPane ); + $.each( buttons, function( name, props ) { props = $.isFunction( props ) ? { click: props, text: name } : diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js index ff1ad1363..774ea4380 100644 --- a/ui/jquery.ui.draggable.js +++ b/ui/jquery.ui.draggable.js @@ -79,6 +79,16 @@ $.widget("ui.draggable", $.ui.mouse, { this.handle = this._getHandle(event); if (!this.handle) return false; + + $(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() { + $('<div class="ui-draggable-iframeFix" style="background: #fff;"></div>') + .css({ + width: this.offsetWidth+"px", height: this.offsetHeight+"px", + position: "absolute", opacity: "0.001", zIndex: 1000 + }) + .css($(this).offset()) + .appendTo("body"); + }); return true; @@ -212,6 +222,16 @@ $.widget("ui.draggable", $.ui.mouse, { return false; }, + _mouseUp: function(event) { + if (this.options.iframeFix === true) { + $("div.ui-draggable-iframeFix").each(function() { + this.parentNode.removeChild(this); + }); //Remove frame helpers + } + + return $.ui.mouse.prototype._mouseUp.call(this, event); + }, + cancel: function() { if(this.helper.is(".ui-draggable-dragging")) { @@ -342,16 +362,19 @@ $.widget("ui.draggable", $.ui.mouse, { ]; if(!(/^(document|window|parent)$/).test(o.containment) && o.containment.constructor != Array) { - var ce = $(o.containment)[0]; if(!ce) return; - var co = $(o.containment).offset(); + var c = $(o.containment); + var ce = c[0]; if(!ce) return; + var co = c.offset(); var over = ($(ce).css("overflow") != 'hidden'); this.containment = [ - co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0), - co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0), - 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 - this.margins.right, - 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 - this.margins.bottom + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0), + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0), + (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 - this.margins.right, + (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 - this.margins.bottom ]; + this.relative_container = c; + } else if(o.containment.constructor == Array) { this.containment = o.containment; } @@ -393,20 +416,31 @@ $.widget("ui.draggable", $.ui.mouse, { */ 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(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.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top; + var containment; + if(this.containment) { + if (this.relative_container){ + var co = this.relative_container.offset(); + containment = [ this.containment[0] + co.left, + this.containment[1] + co.top, + this.containment[2] + co.left, + this.containment[3] + co.top ]; + } + else { + containment = this.containment; + } + + if(event.pageX - this.offset.click.left < containment[0]) pageX = containment[0] + this.offset.click.left; + if(event.pageY - this.offset.click.top < containment[1]) pageY = containment[1] + this.offset.click.top; + if(event.pageX - this.offset.click.left > containment[2]) pageX = containment[2] + this.offset.click.left; + if(event.pageY - this.offset.click.top > containment[3]) pageY = containment[3] + this.offset.click.top; } if(o.grid) { var 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; + pageY = containment ? (!(top - this.offset.click.top < containment[1] || top - this.offset.click.top > containment[3]) ? top : (!(top - this.offset.click.top < containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top; var 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; + pageX = containment ? (!(left - this.offset.click.left < containment[0] || left - this.offset.click.left > containment[2]) ? left : (!(left - this.offset.click.left < containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left; } } @@ -616,24 +650,6 @@ $.ui.plugin.add("draggable", "cursor", { } }); -$.ui.plugin.add("draggable", "iframeFix", { - start: function(event, ui) { - var o = $(this).data('draggable').options; - $(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() { - $('<div class="ui-draggable-iframeFix" style="background: #fff;"></div>') - .css({ - width: this.offsetWidth+"px", height: this.offsetHeight+"px", - position: "absolute", opacity: "0.001", zIndex: 1000 - }) - .css($(this).offset()) - .appendTo("body"); - }); - }, - stop: function(event, ui) { - $("div.ui-draggable-iframeFix").each(function() { this.parentNode.removeChild(this); }); //Remove frame helpers - } -}); - $.ui.plugin.add("draggable", "opacity", { start: function(event, ui) { var t = $(ui.helper), o = $(this).data('draggable').options; diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 0f585d976..0841018af 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -177,7 +177,7 @@ $.widget("ui.menu", { .andSelf() .removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .removeAttr( "role" ) - .removeAttr("id") + .removeAttr("tabIndex") .removeAttr( "aria-labelledby" ) .removeAttr( "aria-expanded" ) .removeAttr( "aria-hidden" ) diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index b6fcc7151..98b8198e2 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -184,20 +184,37 @@ $.ui.position = { fit: { left: function( position, data ) { var win = $( window ), - over = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); - position.left = over > 0 ? - position.left - over : - Math.max( position.left - data.collisionPosition.left, position.left ); + overLeft = win.scrollLeft() - data.collisionPosition.left, + overRight = data.collisionPosition.left + data.collisionWidth - win.width() - win.scrollLeft(); + + // element is wider than window or too far left -> align with left edge + if ( data.collisionWidth > win.width() || overLeft > 0 ) { + position.left = position.left + overLeft; + // too far right -> align with right edge + } else if ( overRight > 0 ) { + position.left = position.left - overRight; + // adjust based on position and margin + } else { + position.left = Math.max( position.left - data.collisionPosition.left, position.left ); + } }, top: function( position, data ) { var win = $( window ), - over = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); - position.top = over > 0 ? - position.top - over : - Math.max( position.top - data.collisionPosition.top, position.top ); + overTop = win.scrollTop() - data.collisionPosition.top, + overBottom = data.collisionPosition.top + data.collisionHeight - win.height() - win.scrollTop(); + + // element is taller than window or too far up -> align with top edge + if ( data.collisionHeight > win.height() || overTop > 0 ) { + position.top = position.top + overTop; + // too far down -> align with bottom edge + } else if ( overBottom > 0 ) { + position.top = position.top - overBottom; + // adjust based on position and margin + } else { + position.top = Math.max( position.top - data.collisionPosition.top, position.top ); + } } }, - flip: { left: function( position, data ) { if ( data.at[ 0 ] === center ) { diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index 131fb50d0..78349669a 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -50,7 +50,7 @@ $.widget("ui.sortable", $.ui.mouse, { this.refresh(); //Let's determine if the items are being displayed horizontally - this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) || (/inline|table-cell/).test(this.items[0].item.css('display')) : false; + this.floating = this.items.length ? o.axis === 'x' || (/left|right/).test(this.items[0].item.css('float')) || (/inline|table-cell/).test(this.items[0].item.css('display')) : false; //Let's determine the parent's offset this.offset = this.element.offset(); diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 7946cc667..58c181670 100755 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -783,10 +783,11 @@ if ( $.uiBackCompat !== false ) { disable = prototype.disable; prototype.enable = function( index ) { - var o = this.options, + var options = this.options, trigger; - if ( index && o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) !== -1 ) ) { + if ( index && options.disabled === true || + ( $.isArray( options.disabled ) && $.inArray( index, options.disabled ) !== -1 ) ) { trigger = true; } @@ -798,10 +799,11 @@ if ( $.uiBackCompat !== false ) { }; prototype.disable = function( index ) { - var o = this.options, + var options = this.options, trigger; - if ( index && !o.disabled || ($.isArray( o.disabled ) && $.inArray( index, o.disabled ) == -1 ) ) { + if ( index && options.disabled === false || + ( $.isArray( options.disabled ) && $.inArray( index, options.disabled ) === -1 ) ) { trigger = true; } @@ -946,19 +948,15 @@ if ( $.uiBackCompat !== false ) { }; prototype._setOption = function( key, value ) { - var options = this.options; - if ( key === "selected" ) { - key = "active"; + if ( key !== "selected" ) { + return _setOption.apply( this, arguments ); } - _setOption.apply( this, arguments ); - if ( key === "active" ) { - if ( key === - 1 ) { - key = false; - } - options.selected = options.active; - if ( options.selected === false ) { - options.selected = -1; - } + + var options = this.options; + _setOption.call( this, "active", value === -1 ? false : value ); + options.selected = options.active; + if ( options.selected === false ) { + options.selected = -1; } }; @@ -1000,8 +998,8 @@ if ( $.uiBackCompat !== false ) { (function( $, prototype ) { prototype.select = function( index ) { index = this._getIndex( index ); - if ( index == -1 ) { - if ( this.options.collapsible && this.options.selected != -1 ) { + if ( index === -1 ) { + if ( this.options.collapsible && this.options.selected !== -1 ) { index = this.options.selected; } else { return; diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 534b3c947..20638cba5 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -24,9 +24,8 @@ $.widget("ui.tooltip", { return $( this ).attr( "title" ); }, position: { - my: "left center", - at: "right center", - offset: "15 0" + my: "left+15 center", + at: "right center" } }, _create: function() { @@ -90,8 +89,8 @@ $.widget("ui.tooltip", { of: target }, this.options.position ) ).hide(); - - tooltip.fadeIn(); + tooltip.stop( true ); + this._show( tooltip, this.options.show ); this._trigger( "open", event ); @@ -111,7 +110,8 @@ $.widget("ui.tooltip", { var tooltip = this._find( target ); target.removeAttr( "aria-describedby" ); - tooltip.fadeOut( function() { + tooltip.stop( true ); + this._hide( tooltip, this.options.hide, function() { $( this ).remove(); }); diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 55b9f7984..a74e6b77b 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -356,11 +356,35 @@ $.Widget.prototype = { } }; +$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { + $.Widget.prototype[ "_" + method ] = function( element, options, callback ) { + options = options || {}; + var hasOptions = !$.isEmptyObject( options ), + effectName = options.effect || defaultEffect; + options.complete = callback; + if (options.delay) { + element.delay( options.delay ); + } + if ( hasOptions && $.effects && ( $.effects.effect[ effectName ] || $.uiBackCompat !== false && $.effects[ effectName ] ) ) { + element[ method ]( options ); + } else if ( effectName !== method && element[ effectName ] ) { + element[ effectName ]( options.duration, options.easing, callback ); + } else { + element.queue( function() { + $( this )[ method ](); + if ( callback ) { + callback.call( element[ 0 ] ); + } + }); + } + }; +}); + // DEPRECATED if ( $.uiBackCompat !== false ) { $.Widget.prototype._getCreateOptions = function() { return $.metadata && $.metadata.get( this.element[0] )[ this.widgetName ]; - } + }; } })( jQuery ); |