diff options
56 files changed, 900 insertions, 639 deletions
@@ -14,13 +14,13 @@ When looking at pull requests, first check for [proper commit messages](http://w Unless everything is fine and you can merge directly via GitHub's interface, fetch the remote first: - git remote add [username] [his-fork.git] -f + git remote add [username] [his-fork.git] -f If you want just one commit and edit the commit message: - git cherry-pick -e [sha-of-commit] + git cherry-pick -e [sha-of-commit] If it should go to the stable brach, cherry-pick it to stable: - git checkout 1-8-stable - git cherry-pick -x [sha-of-commit] + git checkout 1-8-stable + git cherry-pick -x [sha-of-commit] diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html index 17ec6495d..d2a1bc5bd 100644 --- a/demos/autocomplete/categories.html +++ b/demos/autocomplete/categories.html @@ -47,7 +47,7 @@ { label: "andreas andersson", category: "People" }, { label: "andreas johnson", category: "People" } ]; - + $( "#search" ).catcomplete({ delay: 0, source: data @@ -59,7 +59,7 @@ <div class="demo"> <label for="search">Search: </label> - <input id="search" /> + <input id="search"> </div><!-- End demo --> diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 5fb3ffef9..b228c1cbb 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -14,9 +14,16 @@ <script src="../../ui/jquery.ui.tooltip.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .ui-button { margin-left: -1px; } - .ui-button-icon-only .ui-button-text { padding: 0.35em; } - .ui-autocomplete-input { margin: 0; padding: 0.4em 0 0.4em 0.45em; } + .ui-button { + margin-left: -1px; + } + .ui-button-icon-only .ui-button-text { + padding: 0.35em; + } + .ui-autocomplete-input { + margin: 0; + padding: 0.4em 0 0.4em 0.45em; + } </style> <script> (function( $ ) { @@ -90,7 +97,7 @@ .addClass( "ui-widget ui-widget-content ui-corner-left" ); input.data( "autocomplete" )._renderItem = function( ul, item ) { - return $( "<li></li>" ) + return $( "<li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "</a>" ) .appendTo( ul ); diff --git a/demos/autocomplete/custom-data.html b/demos/autocomplete/custom-data.html index a4edc4fcc..a5782cab9 100644 --- a/demos/autocomplete/custom-data.html +++ b/demos/autocomplete/custom-data.html @@ -67,7 +67,7 @@ } }) .data( "autocomplete" )._renderItem = function( ul, item ) { - return $( "<li></li>" ) + return $( "<li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); @@ -79,9 +79,9 @@ <div class="demo"> <div id="project-label">Select a project (type "j" for a start):</div> - <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/> - <input id="project"/> - <input type="hidden" id="project-id"/> + <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"> + <input id="project"> + <input type="hidden" id="project-id"> <p id="project-description"></p> </div><!-- End demo --> diff --git a/demos/autocomplete/default.html b/demos/autocomplete/default.html index 80e7642d4..bbd0889cf 100644 --- a/demos/autocomplete/default.html +++ b/demos/autocomplete/default.html @@ -49,7 +49,7 @@ <div class="ui-widget"> <label for="tags">Tags: </label> - <input id="tags" /> + <input id="tags"> </div> </div><!-- End demo --> diff --git a/demos/autocomplete/folding.html b/demos/autocomplete/folding.html index f3e45502b..8ebf0d0a6 100644 --- a/demos/autocomplete/folding.html +++ b/demos/autocomplete/folding.html @@ -46,7 +46,7 @@ <div class="ui-widget"> <form> <label for="developer">Developer: </label> - <input id="developer" /> + <input id="developer"> </form> </div> diff --git a/demos/autocomplete/maxheight.html b/demos/autocomplete/maxheight.html index c4f9769c3..f87f03171 100644 --- a/demos/autocomplete/maxheight.html +++ b/demos/autocomplete/maxheight.html @@ -60,12 +60,12 @@ </script> </head> <body> - + <div class="demo"> <div class="ui-widget"> <label for="tags">Tags: </label> - <input id="tags" /> + <input id="tags"> </div> </div><!-- End demo --> diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index 9351e8f3b..16472a36c 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -12,7 +12,9 @@ <script src="../../ui/jquery.ui.autocomplete.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + .ui-autocomplete-loading { + background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; + } </style> <script> $(function() { @@ -69,7 +71,7 @@ <div class="ui-widget"> <label for="birds">Birds: </label> - <input id="birds" size="50" /> + <input id="birds" size="50"> </div> </div><!-- End demo --> diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html index 4e67bf7e7..f5f249c41 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -84,7 +84,7 @@ <div class="ui-widget"> <label for="tags">Tag programming languages: </label> - <input id="tags" size="50" /> + <input id="tags" size="50"> </div> </div><!-- End demo --> diff --git a/demos/autocomplete/remote-jsonp.html b/demos/autocomplete/remote-jsonp.html index 1cc71d1e3..bfcbc0607 100644 --- a/demos/autocomplete/remote-jsonp.html +++ b/demos/autocomplete/remote-jsonp.html @@ -12,14 +12,16 @@ <script src="../../ui/jquery.ui.autocomplete.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + .ui-autocomplete-loading { + background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; + } #city { width: 25em; } </style> <script> $(function() { function log( message ) { - $( "<div/>" ).text( message ).prependTo( "#log" ); - $( "#log" ).attr( "scrollTop", 0 ); + $( "<div>" ).text( message ).prependTo( "#log" ); + $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ @@ -65,7 +67,7 @@ <div class="ui-widget"> <label for="city">Your city: </label> - <input id="city" /> + <input id="city"> Powered by <a href="http://geonames.org">geonames.org</a> </div> diff --git a/demos/autocomplete/remote-with-cache.html b/demos/autocomplete/remote-with-cache.html index d7aabd72a..3d7a818ed 100644 --- a/demos/autocomplete/remote-with-cache.html +++ b/demos/autocomplete/remote-with-cache.html @@ -12,7 +12,9 @@ <script src="../../ui/jquery.ui.autocomplete.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + .ui-autocomplete-loading { + background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; + } </style> <script> $(function() { @@ -44,7 +46,7 @@ <div class="ui-widget"> <label for="birds">Birds: </label> - <input id="birds" /> + <input id="birds"> </div> </div><!-- End demo --> diff --git a/demos/autocomplete/remote.html b/demos/autocomplete/remote.html index 5538b2822..3229c5cd8 100644 --- a/demos/autocomplete/remote.html +++ b/demos/autocomplete/remote.html @@ -12,13 +12,15 @@ <script src="../../ui/jquery.ui.autocomplete.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } + .ui-autocomplete-loading { + background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; + } </style> <script> $(function() { function log( message ) { - $( "<div/>" ).text( message ).prependTo( "#log" ); - $( "#log" ).attr( "scrollTop", 0 ); + $( "<div>" ).text( message ).prependTo( "#log" ); + $( "#log" ).scrollTop( 0 ); } $( "#birds" ).autocomplete({ @@ -39,7 +41,7 @@ <div class="ui-widget"> <label for="birds">Birds: </label> - <input id="birds" /> + <input id="birds"> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> diff --git a/demos/autocomplete/search.php b/demos/autocomplete/search.php index cbe78a52a..835772dee 100644 --- a/demos/autocomplete/search.php +++ b/demos/autocomplete/search.php @@ -1,4 +1,6 @@ <?php + +sleep( 3 ); // no term passed - just exit early with no response if (empty($_GET['term'])) exit ; $q = strtolower($_GET["term"]); diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html index 8288e4c3d..1e9b37d08 100644 --- a/demos/spinner/currency.html +++ b/demos/spinner/currency.html @@ -27,7 +27,7 @@ max: 2500,
step: 25,
start: 1000,
- numberformat: "C"
+ numberFormat: "C"
});
});
diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html index 0a38fc51f..cdc659298 100644 --- a/demos/spinner/decimal.html +++ b/demos/spinner/decimal.html @@ -18,7 +18,7 @@ $(function() {
$("#spinner").spinner({
step: 0.01,
- numberformat: "n"
+ numberFormat: "n"
});
$("#culture").change(function() {
diff --git a/demos/tooltip/custom-animation.html b/demos/tooltip/custom-animation.html index ef8857979..e96960f47 100644 --- a/demos/tooltip/custom-animation.html +++ b/demos/tooltip/custom-animation.html @@ -1,59 +1,64 @@ <!doctype html> <html lang="en"> <head> + <meta charset="utf-8"> <title>jQuery UI Tooltip - Custom animation 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> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.tooltip.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.explode.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $(".demo").tooltip({ + $( "#show-option" ).tooltip({ show: { effect: "slideDown", delay: 250 - }, + } + }); + $( "#hide-option" ).tooltip({ hide: { - effect: "hide", + effect: "explode", delay: 250 } }); + $( "#position-option" ).tooltip({ + position: { + my: "left top", + at: "left bottom+10", + using: function( pos ) { + $( this ).css({ + left: pos.left, + top: pos.top - 10 + }).animate({ top: pos.top }, "fast" ); + } + } + }); }); </script> - <style> - label { display: inline-block; width: 5em; } - </style> </head> <body> <div class="demo"> - <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover - the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. - </p> - <p>But as it's not a native tooltip, it can be styled. Any themes built with - <a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a> - will also style tooltip's accordingly.</p> - <p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p> - <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p> - <p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p> +<p>There are various ways to customize the animation of a tooltip.</p> +<p>You can use the <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="slide down on show">show</a> and +<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="explode on hide">hide</a> options.</p> +<p>You can also use the <a id="position-option" href="http://jqueryui.com/demos/tooltip/#option-position" title="move down on show">position option</a>.</p> </div><!-- End demo --> <div class="demo-description"> - <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 --> - - </body> </html> diff --git a/demos/tooltip/default.html b/demos/tooltip/default.html index 9d5502f2b..cfb61f2eb 100644 --- a/demos/tooltip/default.html +++ b/demos/tooltip/default.html @@ -1,48 +1,47 @@ <!doctype html> <html lang="en"> <head> - <title>jQuery UI Tooltip - Default 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> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Tooltip - Default functionality</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.tooltip.js"></script> + <link rel="stylesheet" href="../demos.css"> + <script> $(function() { - $(".demo").tooltip(); + $( ".demo" ).tooltip(); }); </script> <style> - label { display: inline-block; width: 5em; } + label { + display: inline-block; + width: 5em; + } </style> </head> <body> <div class="demo"> - <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover - the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. - </p> - <p>But as it's not a native tooltip, it can be styled. Any themes built with - <a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a> - will also style tooltip's accordingly.</p> - <p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p> - <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p> - <p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p> +<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover +the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> +<p>But as it's not a native tooltip, it can be styled. Any themes built with +<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> +will also style tooltips accordingly.</p> +<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p> +<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p> +<p>Hover the field to see the tooltip.</p> </div><!-- End demo --> <div class="demo-description"> - <p>Hover the links above or use the tab key to cycle the focus on each element.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/tooltip/delegation-mixbag.html b/demos/tooltip/delegation-mixbag.html index 9c524dabe..5b1fa4119 100644 --- a/demos/tooltip/delegation-mixbag.html +++ b/demos/tooltip/delegation-mixbag.html @@ -1,73 +1,88 @@ <!doctype html> <html lang="en"> <head> + <meta charset="utf-8"> <title>jQuery UI Tooltip - Default 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> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.tooltip.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + .photo { + width: 300px; + text-align: center; + } + .photo .ui-widget-header { + margin: 1em 0; + } + </style> + <script> $(function() { - $(".demo").tooltip({ - items: "[href], [title]", - content: function(response) { - var href = $(this).attr("href"); - if (/^#/.test(href)) { - return $(href).html(); - } else if (href) { - $.get(href, response); - return "loading..."; + $( ".demo" ).tooltip({ + items: "img, [data-geo], [title]", + content: function() { + var element = $( this ); + if ( element.is( "[data-geo]" ) ) { + return $( "<iframe>", { + width: 425, + height: 350, + frameborder: 0, + scrolling: "no", + marginheight: 0, + marginwidth: 0, + src: "http://maps.google.com/maps?ll=" + element.attr( "data-geo" ) + + "&z=11&t=p&output=embed" + }); + } + if ( element.is( "[title]" ) ) { + return element.attr( "title" ); + } + if ( element.is( "img" ) ) { + return element.attr( "alt" ); } - return this.title; } }); - $("#footnotes").hide(); }); </script> - <style> - label { display: inline-block; width: 5em; } - </style> </head> <body> <div class="demo"> - <ul> - <li> - <a href="#footnote1">I'm a link to a footnote.</a> - </li> - <li> - <a href="#footnote2">I'm another link to a footnote.</a> - </li> - </ul> - <input title="This is just an input, nothing special" /> - - <ul> - <li> - <a href="ajax/content1.html">Link to ajax content, with tooltip preview!</a> - </li> - <li> - <a href="ajax/content2.html">Another link to ajax content, with tooltip preview!</a> - </li> - </ul> - - <div id="footnotes"> - <div id="footnote1">This is <strong>the</strong> footnote, including other elements</div> - <div id="footnote2">This is <strong>the other</strong> footnote, including other elements</div> - </div> -</div><!-- End demo --> +<div class="ui-widget photo"> + <div class="ui-widget-header ui-corner-all"> + <h2>St. Stephen's Cathedral</h2> + <h3><a href="http://maps.google.com/maps?q=vienna,+austria&z=11" data-geo="48.208174,16.373819">Vienna, Austria</a></h3> + </div> + <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG"> + <img src="images/st-stephens.jpg" alt="St. Stephen's Cathedral" class="ui-corner-all"> + </a> +</div> +<div class="ui-widget photo"> + <div class="ui-widget-header ui-corner-all"> + <h2>Tower Bridge</h2> + <h3><a href="http://maps.google.com/maps?q=london,+england&z=11" data-geo="51.500152,-0.126236">London, England</a></h3> + </div> + <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg"> + <img src="images/tower-bridge.jpg" alt="Tower Bridge" class="ui-corner-all"> + </a> +</div> -<div class="demo-description"> +<p>All images are part of <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a> +and are licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> by the copyright holder.</p> -<p>Show how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p> +</div><!-- End demo --> -</div><!-- End demo-description --> +<div class="demo-description"> +<p>Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.</p> +<p>We realize you may want to interact with the map tooltips. This is a planned feature for a future version.</p> +</div><!-- End demo-description --> </body> </html> diff --git a/demos/tooltip/forms.html b/demos/tooltip/forms.html index 983b56bdf..0f91736b2 100644 --- a/demos/tooltip/forms.html +++ b/demos/tooltip/forms.html @@ -1,71 +1,87 @@ <!doctype html> <html lang="en"> <head> + <meta charset="utf-8"> <title>jQuery UI Tooltip - Default 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> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.tooltip.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + label { + display: inline-block; width: 5em; + } + fieldset div { + margin-bottom: 2em; + } + fieldset .help { + display: inline-block; + } + .ui-tooltip { + width: 210px; + } + </style> + <script> $(function() { - $("[title]").tooltip().unbind(".tooltip"); - $("<button/>").text("Show help").button().toggle(function() { - $(":ui-tooltip").tooltip("open"); - }, function() { - $(":ui-tooltip").tooltip("close"); - }).appendTo("form"); + var tooltips = $( "[title]" ) + .click(function() { + $( this ).tooltip( $( this ).attr( "title" ) ? "open" : "close" ); + }) + .bind( "mouseover focusin mouseleave blur click", function( event ) { + event.stopImmediatePropagation(); + }) + .tooltip(); + $( "<button>" ) + .text( "Show help" ) + .button() + .toggle( + function() { + tooltips.tooltip( "open" ); + }, + function() { + tooltips.tooltip( "close" ); + } + ) + .appendTo( "form" ); }); </script> - <style> - label { display: inline-block; width: 5em; } - .ui-icon { display: inline-block; } - fieldset div { - margin-bottom: 2em; - } - .ui-tooltip { width: 210px; } - </style> </head> <body> <div class="demo"> - <form> - <fieldset> - <div> - <label for="firstname">Firstname</label> - <input id="firstname" name="firstname" /> - <span title="Please provide your firstname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> - </div> - <div> - <label for="lastname">Lastname</label> - <input id="lastname" name="lastname" /> - <span title="Please provide also your lastname." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> - </div> - <div> - <label for="address">Address</label> - <input id="address" name="address" /> - <span title="Your home or work address." class="ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> - </div> - </fieldset> - </form> +<form> + <fieldset> + <div> + <label for="firstname">Firstname</label> + <input id="firstname" name="firstname"> + <span title="Please provide your firstname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> + </div> + <div> + <label for="lastname">Lastname</label> + <input id="lastname" name="lastname"> + <span title="Please provide also your lastname." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> + </div> + <div> + <label for="address">Address</label> + <input id="address" name="address"> + <span title="Your home or work address." class="help ui-state-default ui-corner-all ui-icon ui-icon-help">?</span> + </div> + </fieldset> +</form> </div><!-- End demo --> <div class="demo-description"> - <p>Use the button below to display the help texts. Click again to hide them. Default hover and focus events are removed to show tooltip only programmatically.</p> - <p>A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.</p> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/tooltip/images/st-stephens.jpg b/demos/tooltip/images/st-stephens.jpg Binary files differnew file mode 100644 index 000000000..30fc36d67 --- /dev/null +++ b/demos/tooltip/images/st-stephens.jpg diff --git a/demos/tooltip/images/tower-bridge.jpg b/demos/tooltip/images/tower-bridge.jpg Binary files differnew file mode 100644 index 000000000..d1e14d6d2 --- /dev/null +++ b/demos/tooltip/images/tower-bridge.jpg diff --git a/demos/tooltip/index.html b/demos/tooltip/index.html index 4ad189ed2..460c494e3 100644 --- a/demos/tooltip/index.html +++ b/demos/tooltip/index.html @@ -1,8 +1,9 @@ <!doctype html> <html lang="en"> <head> + <meta charset="utf-8"> <title>jQuery UI Tooltip Demos</title> - <link type="text/css" href="../demos.css" rel="stylesheet" /> + <link rel="stylesheet" href="../demos.css"> </head> <body> diff --git a/demos/tooltip/tracking.html b/demos/tooltip/tracking.html index dd5dc9d92..4cddb4437 100644 --- a/demos/tooltip/tracking.html +++ b/demos/tooltip/tracking.html @@ -1,64 +1,64 @@ <!doctype html> <html lang="en"> <head> - <title>jQuery UI Tooltip - Default 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> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <meta charset="utf-8"> + <title>jQuery UI Tooltip - Track the mouse</title> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.tooltip.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + label { + display: inline-block; + width: 5em; + } + </style> + <script> $(function() { - $(".demo").tooltip({ - open: function() { + $( ".demo" ).tooltip({ + open: function( event ) { var tooltip = $( ".ui-tooltip" ); - $(document).mousemove(function( event ) { - tooltip.position( { + function position( event ) { + tooltip.position({ my: "left+25 center", at: "right+25 center", of: event }); - }) + } + $( document ).bind( "mousemove.tooltip-position", position ); // trigger once to override element-relative positioning - .mousemove(); + position( event ); }, close: function() { - $(document).unbind( "mousemove" ); + $( document ).unbind( "mousemove.tooltip-position" ); } }); }); </script> - <style> - label { display: inline-block; width: 5em; } - </style> </head> <body> <div class="demo"> - <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover - the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip. - </p> - <p>But as it's not a native tooltip, it can be styled. Any themes built with - <a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme builder application">ThemeRoller</a> - will also style tooltip's accordingly.</p> - <p>Tooltip's are also useful for form elements, to show some additional information in the context of each field.</p> - <p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p> - <p>Click the field to see the tooltip; when you tab out of the field, it gets hidden.</p> +<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover +the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> +<p>But as it's not a native tooltip, it can be styled. Any themes built with +<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> +will also style tooltips accordingly.</p> +<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p> +<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p> +<p>Hover the field to see the tooltip.</p> </div><!-- End demo --> <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> - </div><!-- End demo-description --> - - </body> </html> diff --git a/demos/tooltip/video-player.html b/demos/tooltip/video-player.html index 56003ab5a..1d8458abb 100644 --- a/demos/tooltip/video-player.html +++ b/demos/tooltip/video-player.html @@ -1,64 +1,105 @@ <!doctype html> <html lang="en"> <head> + <meta charset="utf-8"> <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="../../ui/jquery.ui.popup.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.effects.blind.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <script type="text/javascript"> + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.5.1.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.tooltip.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.menu.js"></script> + <script src="../../ui/jquery.ui.popup.js"></script> + <script src="../../ui/jquery.effects.core.js"></script> + <script src="../../ui/jquery.effects.blind.js"></script> + <link rel="stylesheet" href="../demos.css"> + <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; + } + .set { + display: inline-block; + } + .notification { + position: absolute; + display: inline-block; + font-size: 2em; + padding: .5em; + box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); + } + </style> + <script> $(function() { function notify( input ) { - var msg = "Selected " + $.trim($(input).text()); - $("<div/>").appendTo(document.body).text(msg).addClass("notification ui-state-default ui-corner-bottom").position({ - my: "center top", - at: "center top", - of: window - }).show({ - effect: "blind" - }).delay(1000).hide({ - effect: "blind", - duration: "slow" - }, function() { - $(this).remove(); - }); + var msg = "Selected " + $.trim( input.data( "tooltip-title" ) || input.text() ); + $( "<div>" ) + .appendTo( document.body ) + .text( msg ) + .addClass( "notification ui-state-default ui-corner-bottom" ) + .position({ + my: "center top", + at: "center top", + of: window + }) + .show({ + effect: "blind" + }) + .delay( 1000 ) + .hide({ + effect: "blind", + duration: "slow" + }, function() { + $( this ).remove(); + }); } - $("ul").menu({ - select: function(event, ui) { - // TODO stop button from handling the click - $(this).popup("close"); - // TODO should probably be handled by poup, see ESCAPE key handler + $( "ul" ).menu({ + select: function( event, ui ) { + // TODO should probably be handled by popup, see ESCAPE key handler // affects key handling - $(this).prev().focus(); - notify(ui.item); + $( this ).prev().focus(); + notify( ui.item ); } }).popup(); - $("button").each(function() { - $(this).button({ + $( "button" ).each(function() { + var button = $( this ).button({ icons: { - primary: $(this).data("icon") + primary: $( this ).data( "icon" ) }, - text: !!$(this).attr("title") - }).click(function() { - // TODO don't notify if the button is opening a popup - notify(this); + text: !!$( this ).attr( "title" ) }); + if ( button.next().is( ":ui-popup" ) ) { + button.click(function( event ) { + $( ".demo" ).tooltip( "close", event ); + }); + } else { + button.click(function() { + notify( button ); + }); + } }); - $(".set").buttonset({ + $( ".set" ).buttonset({ items: "button" }); - - $(".demo").tooltip({ + $( ".demo" ).tooltip({ position: { my: "center top", at: "center bottom+5", @@ -72,63 +113,43 @@ }); }); </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; - } - - .set { display: inline-block; } - - .notification { position: absolute; display: inline-block; font-size: 2em; padding: .5em; box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5); } - </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> - <div 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> - <ul> - <li> - <a href="#">Favorites</a> - </li> - <li> - <a href="#">Watch Later</a> - </li> - <li> - <a href="#">New Playlist...</a> - </li> - </ul> - </div> - <button title="Share this video">Share</button> - <button data-icon="ui-icon-alert">Flag as inappropiate</button> +<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> + <div 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> + <ul> + <li> + <a href="#">Favorites</a> + </li> + <li> + <a href="#">Watch Later</a> + </li> + <li> + <a href="#">New Playlist...</a> + </li> + </ul> </div> - </div> + <button title="Share this video">Share</button> + <button data-icon="ui-icon-alert">Flag as inappropiate</button> +</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/jquery.simulate.js b/tests/jquery.simulate.js index a88b6cbe4..bb82624d3 100644 --- a/tests/jquery.simulate.js +++ b/tests/jquery.simulate.js @@ -123,10 +123,10 @@ $.extend($.simulate.prototype, { this.simulateEvent(target, "click", coord); }, findCenter: function(el) { - var el = $(this.target), o = el.offset(); + var el = $(this.target), o = el.offset(), d = $(document); return { - x: o.left + el.outerWidth() / 2, - y: o.top + el.outerHeight() / 2 + x: o.left + el.outerWidth() / 2 - d.scrollLeft(), + y: o.top + el.outerHeight() / 2 - d.scrollTop() }; } }); diff --git a/tests/unit/button/button_tickets.js b/tests/unit/button/button_tickets.js index 79bbfeb5c..9a7ccae43 100644 --- a/tests/unit/button/button_tickets.js +++ b/tests/unit/button/button_tickets.js @@ -20,6 +20,14 @@ test( "#6262 - buttonset not applying ui-corner to invisible elements", function ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) ); }); +test( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() { + var check = $( "#check" ).button(), + label = $( "label[for='check']" ); + ok( !label.is( ".ui-state-focus" ) ); + check.focus(); + ok( label.is( ".ui-state-focus" ) ); +}); + test( "#7092 - button creation that requires a matching label does not find label in all cases", function() { var group = $( "<span><label for='t7092a'/><input type='checkbox' id='t7092a'/></span>" ); group.find( "input:checkbox" ).button(); diff --git a/tests/unit/spinner/spinner_defaults.js b/tests/unit/spinner/spinner_defaults.js index f6081b1f3..c9a7d5f62 100644 --- a/tests/unit/spinner/spinner_defaults.js +++ b/tests/unit/spinner/spinner_defaults.js @@ -4,7 +4,7 @@ commonWidgetTests( "spinner", { incremental: true,
max: null,
min: null,
- numberformat: null,
+ numberFormat: null,
page: 10,
step: null,
value: null,
diff --git a/tests/unit/spinner/spinner_options.js b/tests/unit/spinner/spinner_options.js index 3db7e5c55..398780ad2 100644 --- a/tests/unit/spinner/spinner_options.js +++ b/tests/unit/spinner/spinner_options.js @@ -5,26 +5,26 @@ module("spinner: options");
-test("numberformat, number", function() {
+test("numberFormat, number", function() {
var el = $("#spin").spinner({
value: "1",
- numberformat: "n"
+ numberFormat: "n"
});
equal(el.val(), "1.00");
});
-test("numberformat, number, simple", function() {
+test("numberFormat, number, simple", function() {
var el = $("#spin").spinner({
value: "1",
- numberformat: "n0"
+ numberFormat: "n0"
});
equal(el.val(), "1");
});
-test("numberformat, currency", function() {
+test("numberFormat, currency", function() {
var el = $("#spin").spinner({
value: "1",
- numberformat: "C"
+ numberFormat: "C"
});
equal(el.val(), "$1.00");
});
@@ -111,7 +111,7 @@ test("step, 2", function() { test("step, 0.7", function() {
var el = $("#spin").spinner({
step: 0.7,
- numberformat: "n1"
+ numberFormat: "n1"
});
equals(el.val(), "0.0", "value initialized to");
diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index c1f394ed9..3d9e64d60 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -61,7 +61,7 @@ window.commonWidgetTests = function( widget, settings ) { testWidgetOverrides( widget ); testBasicUsage( widget ); test( "version", function() { - ok( "version" in $.ui[ widget ], "version property exists" ); + ok( "version" in $.ui[ widget ].prototype, "version property exists" ); }); } diff --git a/tests/unit/tooltip/tooltip.html b/tests/unit/tooltip/tooltip.html index 189c75261..21eff51fd 100644 --- a/tests/unit/tooltip/tooltip.html +++ b/tests/unit/tooltip/tooltip.html @@ -1,30 +1,29 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tooltip Test Suite</title> - <link type="text/css" href="../../../themes/base/jquery.ui.tooltip.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> - - <link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/> - <script type="text/javascript" src="../../../external/qunit.js"></script> - <script type="text/javascript" src="../../jquery.simulate.js"></script> - <script type="text/javascript" src="../testsuite.js"></script> - - <script type="text/javascript" src="tooltip_core.js"></script> - <script type="text/javascript" src="tooltip_defaults.js"></script> - <script type="text/javascript" src="tooltip_events.js"></script> - <script type="text/javascript" src="tooltip_methods.js"></script> - <script type="text/javascript" src="tooltip_options.js"></script> - - <script type="text/javascript" src="../swarminject.js"></script> - + <link rel="stylesheet" href="../../../themes/base/jquery.ui.tooltip.css"> + + <script src="../../../jquery-1.5.1.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.tooltip.js"></script> + + <link rel="stylesheet" href="../../../external/qunit.css"> + <script src="../../../external/qunit.js"></script> + <script src="../../jquery.simulate.js"></script> + <script src="../testsuite.js"></script> + + <script src="tooltip_defaults.js"></script> + <script src="tooltip_core.js"></script> + <script src="tooltip_events.js"></script> + <script src="tooltip_methods.js"></script> + <script src="tooltip_options.js"></script> + + <script src="../swarminject.js"></script> </head> <body> @@ -32,16 +31,15 @@ <h2 id="qunit-banner"></h2> <div id="qunit-testrunner-toolbar"></div> <h2 id="qunit-userAgent"></h2> -<ol id="qunit-tests"> -</ol> - +<ol id="qunit-tests"></ol> <div id="qunit-fixture"> - <div> - <a id="tooltipped1" href="#" title="anchortitle">anchor</a> - <input title="inputtitle" /> - <span id="fixture-span" data-tooltip="text">span</span> - </div> + +<div> + <a id="tooltipped1" href="#" title="anchortitle">anchor</a> + <input title="inputtitle"> + <span id="fixture-span" title="title-text">span</span> </div> +</div> </body> </html> diff --git a/tests/unit/tooltip/tooltip_core.js b/tests/unit/tooltip/tooltip_core.js index 247927df4..d18b85398 100644 --- a/tests/unit/tooltip/tooltip_core.js +++ b/tests/unit/tooltip/tooltip_core.js @@ -1,11 +1,26 @@ -/* - * tooltip_core.js - */ +(function( $ ) { +module( "tooltip: core" ); -(function($) { +test( "markup structure", function() { + expect( 6 ); + var element = $( "#tooltipped1" ).tooltip(), + tooltip = $( ".ui-tooltip" ); -module("tooltip: core"); + equal( element.attr( "aria-describedby" ), undefined, "no aria-describedby on init" ); + equal( tooltip.length, 0, "no tooltip on init" ); + element.tooltip( "open" ); + tooltip = $( "#" + element.attr( "aria-describedby" ) ); + equal( tooltip.length, 1, "tooltip exists" ); + ok( tooltip.hasClass( "ui-tooltip" ), "tooltip is .ui-tooltip" ); + equal( tooltip.length, 1, ".ui-tooltip exists" ); + equal( tooltip.find( ".ui-tooltip-content" ).length, 1, + ".ui-tooltip-content exists" ); +}); -})(jQuery); +test( "accessibility", function() { + // TODO: add tests +}); + +}( jQuery ) ); diff --git a/tests/unit/tooltip/tooltip_defaults.js b/tests/unit/tooltip/tooltip_defaults.js index 5f304f497..ded3d4558 100644 --- a/tests/unit/tooltip/tooltip_defaults.js +++ b/tests/unit/tooltip/tooltip_defaults.js @@ -1,11 +1,12 @@ commonWidgetTests( "tooltip", { defaults: { + content: function() {}, disabled: false, items: "[title]", - content: $.ui.tooltip.prototype.options.content, position: { my: "left+15 center", - at: "right center" + at: "right center", + collision: "flip fit" }, tooltipClass: null, diff --git a/tests/unit/tooltip/tooltip_events.js b/tests/unit/tooltip/tooltip_events.js index 5c915ae30..61026882e 100644 --- a/tests/unit/tooltip/tooltip_events.js +++ b/tests/unit/tooltip/tooltip_events.js @@ -1,54 +1,76 @@ -/* - * tooltip_events.js - */ -(function($) { - -module("tooltip: events"); - -test("programmatic triggers", function() { - expect(2); - var e = $("#tooltipped1").tooltip({ - open: function(event, ui) { - same( event.type, "tooltipopen" ); - }, - close: function(event, ui) { - same( event.type, "tooltipclose" ); - } - }); - e.tooltip("open").tooltip("close"); - e.tooltip("destroy"); +(function( $ ) { + +module( "tooltip: events" ); + +test( "programmatic triggers", function() { + expect( 2 ); + var element = $( "#tooltipped1" ).tooltip(); + + element.one( "tooltipopen", function( event ) { + ok( !( "originalEvent" in event ), "open" ); + }); + element.tooltip( "open" ); + + element.one( "tooltipclose", function( event ) { + ok( !( "originalEvent" in event ), "close" ); + }); + element.tooltip( "close" ); +}); + +test( "mouse events", function() { + expect( 2 ); + var element = $( "#tooltipped1" ).tooltip(); + + element.one( "tooltipopen", function( event ) { + same( event.originalEvent.type, "mouseover" ); + }); + element.trigger( "mouseover" ); + + element.one( "tooltipclose", function( event ) { + same( event.originalEvent.type, "mouseleave" ); + }); + element.trigger( "mouseleave" ); }); -test("mouse events", function() { - expect(4); - var e = $("#tooltipped1").tooltip({ - open: function(event, ui) { - same( event.type, "tooltipopen" ); - same( event.originalEvent.type, "mouseover" ); - }, - close: function(event, ui) { - same( event.type, "tooltipclose" ); - same( event.originalEvent.type, "mouseleave" ); - } - }); - e.trigger("mouseover").trigger("mouseleave"); - e.tooltip("destroy"); +test( "focus events", function() { + expect( 2 ); + var element = $( "#tooltipped1" ).tooltip(); + + element.one( "tooltipopen", function( event ) { + same( event.originalEvent.type, "focusin" ); + }); + element.trigger( "focusin" ); + + element.one( "tooltipclose", function( event ) { + same( event.originalEvent.type, "blur" ); + }); + element.trigger( "blur" ); }); -test("focus events", function() { - expect(4); - var e = $("#tooltipped1").tooltip({ - open: function(event, ui) { - same( event.type, "tooltipopen" ); - same( event.originalEvent.type, "focusin" ); - }, - close: function(event, ui) { - same( event.type, "tooltipclose" ); - same( event.originalEvent.type, "blur" ); - } - }); - e.trigger("focus").trigger("blur"); - e.tooltip("destroy"); +test( "mixed events", function() { + expect( 2 ); + var element = $( "#tooltipped1" ).tooltip(); + + element.one( "tooltipopen", function( event ) { + same( event.originalEvent.type, "focusin" ); + }); + element[0].focus(); + + element.one( "tooltipopen", function() { + ok( false, "open triggered while already open" ); + }); + element.trigger( "mouseover" ); + + element.bind( "tooltipclose", function( event ) { + ok( false, "close triggered while still focused" ); + }); + element.trigger( "mouseleave" ); + element.unbind( "tooltipclose" ); + + element.one( "tooltipclose", function( event ) { + same( event.originalEvent.type, "blur" ); + }); + element[0].blur(); }); -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/tooltip/tooltip_methods.js b/tests/unit/tooltip/tooltip_methods.js index 496a5fdb7..798d55896 100644 --- a/tests/unit/tooltip/tooltip_methods.js +++ b/tests/unit/tooltip/tooltip_methods.js @@ -1,22 +1,57 @@ -/* - * tooltip_methods.js - */ -(function($) { +(function( $ ) { +module( "tooltip: methods" ); -module("tooltip: methods"); +test( "destroy", function() { + expect( 2 ); + domEqual( "#tooltipped1", function() { + $( "#tooltipped1" ).tooltip().tooltip( "destroy" ); + }); -test("destroy", function() { - var beforeHtml = $("#tooltipped1").parent().html(); - var afterHtml = $("#tooltipped1").tooltip().tooltip("destroy").parent().html(); - equal( afterHtml, beforeHtml ); + // make sure that open tooltips are removed on destroy + $( "#tooltipped1" ).tooltip().tooltip( "open" ).tooltip( "destroy" ); + equal( $( ".ui-tooltip" ).length, 0 ); }); -test("open", function() { - var e = $("#tooltipped1").tooltip(); - e.tooltip("open"); - ok( $(".ui-tooltip").is(":visible") ); - $(":ui-tooltip").tooltip("destroy"); +test( "open/close", function() { + expect( 3 ); + $.fx.off = true; + var element = $( "#tooltipped1" ).tooltip(); + equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); + + element.tooltip( "open" ); + var tooltip = $( "#" + element.attr( "aria-describedby" ) ); + ok( tooltip.is( ":visible" ) ); + + element.tooltip( "close" ); + ok( tooltip.is( ":hidden" ) ); + $.fx.off = false; +}); + +test( "enable/disable", function() { + expect( 7 ); + $.fx.off = true; + var element = $( "#tooltipped1" ).tooltip(); + equal( $( ".ui-tooltip" ).length, 0, "no tooltip on init" ); + + element.tooltip( "open" ); + var tooltip = $( "#" + element.attr( "aria-describedby" ) ); + ok( tooltip.is( ":visible" ) ); + + element.tooltip( "disable" ); + equal( $( ".ui-tooltip" ).length, 0, "no tooltip when disabled" ); + equal( tooltip.attr( "title" ), "", "title removed on disable" ); + + element.tooltip( "open" ); + equal( $( ".ui-tooltip" ).length, 0, "open does nothing when disabled" ); + + element.tooltip( "enable" ); + equal( element.attr( "title" ), "anchortitle", "title restored on enable" ); + + element.tooltip( "open" ); + tooltip = $( "#" + element.attr( "aria-describedby" ) ); + ok( tooltip.is( ":visible" ) ); + $.fx.off = false; }); /* @@ -29,5 +64,4 @@ test("widget", function() { }); */ - -})(jQuery); +}( jQuery ) ); diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js index 37a468489..04bb4c6a4 100644 --- a/tests/unit/tooltip/tooltip_options.js +++ b/tests/unit/tooltip/tooltip_options.js @@ -1,66 +1,73 @@ -/* - * tooltip_options.js - */ -(function($) { - -module("tooltip: options", { - teardown: function() { - $(":ui-tooltip").tooltip("destroy"); - } -}); +(function( $ ) { +module( "tooltip: options" ); -test("option: items", function() { - var event = $.Event("mouseenter"); - event.target = $("[data-tooltip]"); - $("#qunit-fixture").tooltip({ - items: "[data-tooltip]", - content: function() { - return $(this).attr("data-tooltip"); - } - }).tooltip("open", event); - same( $( "#" + $("#fixture-span").attr("aria-describedby") ).text(), "text" ); +test( "content: default", function() { + var element = $( "#tooltipped1" ).tooltip().tooltip( "open" ); + same( $( "#" + element.attr( "aria-describedby" ) ).text(), "anchortitle" ); }); -test("content: default", function() { - $("#tooltipped1").tooltip().tooltip("open"); - same( $( "#" + $("#tooltipped1").attr("aria-describedby") ).text(), "anchortitle" ); -}); - -test("content: return string", function() { - $("#tooltipped1").tooltip({ +test( "content: return string", function() { + var element = $( "#tooltipped1" ).tooltip({ content: function() { return "customstring"; } - }).tooltip("open"); - same( $( "#" + $("#tooltipped1").attr("aria-describedby") ).text(), "customstring" ); + }).tooltip( "open" ); + same( $( "#" + element.attr( "aria-describedby" ) ).text(), "customstring" ); }); -test("content: return jQuery", function() { - $("#tooltipped1").tooltip({ +test( "content: return jQuery", function() { + var element = $( "#tooltipped1" ).tooltip({ content: function() { - return $("<div></div>").html("cu<b>s</b>tomstring"); + return $( "<div>" ).html( "cu<b>s</b>tomstring" ); } - }).tooltip("open"); - same( $( "#" + $("#tooltipped1").attr("aria-describedby") ).text(), "customstring" ); + }).tooltip( "open" ); + same( $( "#" + element.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"); +asyncTest( "content: sync + async callback", function() { + expect( 2 ); + var element = $( "#tooltipped1" ).tooltip({ + content: function( response ) { setTimeout(function() { - //console.log($("#tooltipped1").attr("aria-describedby")) - same( $( "#" + $("#tooltipped1").attr("aria-describedby") ).text(), "customstring2" ); - start(); - }, 100) + same( $( "#" + element.attr("aria-describedby") ).text(), "loading..." ); + + response( "customstring2" ); + setTimeout(function() { + same( $( "#" + element.attr("aria-describedby") ).text(), "customstring2" ); + start(); + }, 13 ); + }, 13 ); + return "loading..."; } - }).tooltip("open"); - + }).tooltip( "open" ); +}); + +test( "items", function() { + expect( 2 ); + var element = $( "#qunit-fixture" ).tooltip({ + items: "#fixture-span" + }); + + var event = $.Event( "mouseenter" ); + event.target = $( "#fixture-span" )[ 0 ]; + element.tooltip( "open", event ); + same( $( "#" + $( "#fixture-span" ).attr( "aria-describedby" ) ).text(), "title-text" ); + + // make sure default [title] doesn't get used + event.target = $( "#tooltipped1" )[ 0 ]; + element.tooltip( "open", event ); + same( $( "#tooltipped1" ).attr( "aria-describedby" ), undefined ); + + element.tooltip( "destroy" ); +}); + +test( "tooltipClass", function() { + expect( 1 ) + var element = $( "#tooltipped1" ).tooltip({ + tooltipClass: "custom" + }).tooltip( "open" ); + ok( $( "#" + element.attr( "aria-describedby" ) ).hasClass( "custom" ) ); }); -*/ -})(jQuery); +}( jQuery ) ); diff --git a/ui/jquery.effects.blind.js b/ui/jquery.effects.blind.js index 7a59d8a75..8ef544faa 100644 --- a/ui/jquery.effects.blind.js +++ b/ui/jquery.effects.blind.js @@ -31,7 +31,12 @@ $.effects.effect.blind = function( o ) { animation = {}, wrapper, distance; - $.effects.save( el, props ); + // if already wrapped, the wrapper's properties are my property. #6245 + if ( el.parent().is( ".ui-effects-wrapper" ) ) { + $.effects.save( el.parent(), props ); + } else { + $.effects.save( el, props ); + } el.show(); wrapper = $.effects.createWrapper( el ).css({ overflow: "hidden" diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js index b5c49ce7c..00f0151af 100644 --- a/ui/jquery.effects.scale.js +++ b/ui/jquery.effects.scale.js @@ -54,7 +54,9 @@ $.effects.effect.scale = function( o ) { origin = o.origin, original = { height: el.height(), - width: el.width() + width: el.width(), + outerHeight: el.outerHeight(), + outerWidth: el.outerWidth() }, factor = { y: direction != 'horizontal' ? (percent / 100) : 1, @@ -74,7 +76,9 @@ $.effects.effect.scale = function( o ) { options.from = o.from || ( mode == 'show' ? { height: 0, width: 0 } : original ); options.to = { height: original.height * factor.y, - width: original.width * factor.x + width: original.width * factor.x, + outerHeight: original.outerHeight * factor.y, + outerWidth: original.outerWidth * factor.x }; if ( options.fade ) { // Fade option to support puff @@ -122,21 +126,14 @@ $.effects.effect.size = function( o ) { } original = { height: el.height(), - width: el.width() + width: el.width(), + outerHeight: el.outerHeight(), + outerWidth: el.outerWidth() }; el.from = o.from || original; el.to = o.to || original; - // Adjust - if (origin) { // Calculate baseline shifts - baseline = $.effects.getBaseline( origin, original ); - el.from.top = ( original.height - el.from.height ) * baseline.y; - el.from.left = ( original.width - el.from.width ) * baseline.x; - el.to.top = ( original.height - el.to.height ) * baseline.y; - el.to.left = ( original.width - el.to.width ) * baseline.x; - } - // Set scaling factor factor = { from: { @@ -183,6 +180,16 @@ $.effects.effect.size = function( o ) { $.effects.createWrapper( el ); el.css( 'overflow', 'hidden' ).css( el.from ); + // Adjust + if (origin) { // Calculate baseline shifts + baseline = $.effects.getBaseline( origin, original ); + el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y; + el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x; + el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y; + el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x; + } + el.css( el.from ); // set top & left + // Animate if ( scale == 'content' || scale == 'both' ) { // Scale the children diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js index c6b33befb..7602ae9bc 100644 --- a/ui/jquery.ui.accordion.js +++ b/ui/jquery.ui.accordion.js @@ -15,6 +15,7 @@ // TODO: use ui-accordion-header-active class and fix styling $.widget( "ui.accordion", { + version: "@VERSION", options: { active: 0, animated: "slide", @@ -432,7 +433,6 @@ $.widget( "ui.accordion", { }); $.extend( $.ui.accordion, { - version: "@VERSION", animations: { slide: function( options, additions ) { var showOverflow = options.toShow.css( "overflow" ), diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index f6573174a..e39b4649e 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -19,6 +19,7 @@ var requestIndex = 0; $.widget( "ui.autocomplete", { + version: "@VERSION", defaultElement: "<input>", options: { appendTo: "body", @@ -63,7 +64,7 @@ $.widget( "ui.autocomplete", { }) .bind( "keydown.autocomplete", function( event ) { if ( self.options.disabled || self.element.attr( "readonly" ) ) { - suppressKeyPress = true; + suppressKeyPress = true; suppressInput = true; return; } @@ -73,21 +74,21 @@ $.widget( "ui.autocomplete", { var keyCode = $.ui.keyCode; switch( event.keyCode ) { case keyCode.PAGE_UP: - suppressKeyPress = true; + suppressKeyPress = true; self._move( "previousPage", event ); break; case keyCode.PAGE_DOWN: - suppressKeyPress = true; + suppressKeyPress = true; self._move( "nextPage", event ); break; case keyCode.UP: - suppressKeyPress = true; + suppressKeyPress = true; self._move( "previous", event ); // prevent moving cursor to beginning of text field in some browsers event.preventDefault(); break; case keyCode.DOWN: - suppressKeyPress = true; + suppressKeyPress = true; self._move( "next", event ); // prevent moving cursor to end of text field in some browsers event.preventDefault(); @@ -122,7 +123,7 @@ $.widget( "ui.autocomplete", { if ( suppressKeyPress ) { suppressKeyPress = false; event.preventDefault(); - return; + return; } // replicate some key handlers to allow them to repeat in Firefox and Opera @@ -144,7 +145,7 @@ $.widget( "ui.autocomplete", { // prevent moving cursor to end of text field in some browsers event.preventDefault(); break; - } + } }) .bind( "input.autocomplete", function(event) { if ( suppressInput ) { @@ -475,7 +476,6 @@ $.widget( "ui.autocomplete", { }); $.extend( $.ui.autocomplete, { - version: "@VERSION", escapeRegex: function( value ) { return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); }, diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js index a95dddc6c..482cdc24c 100644 --- a/ui/jquery.ui.button.js +++ b/ui/jquery.ui.button.js @@ -41,6 +41,7 @@ var lastActive, startXPos, startYPos, clickDragged, }; $.widget( "ui.button", { + version: "@VERSION", defaultElement: "<button>", options: { disabled: null, @@ -95,19 +96,22 @@ $.widget( "ui.button", { } $( this ).removeClass( hoverClass ); }) - .bind( "focus.button", function() { - // no need to check disabled, focus won't be triggered anyway - $( this ).addClass( focusClass ); - }) - .bind( "blur.button", function() { - $( this ).removeClass( focusClass ); - }) .bind( "click.button", function( event ) { if ( options.disabled ) { + event.preventDefault(); event.stopImmediatePropagation(); } }); + this.element + .bind( "focus.button", function() { + // no need to check disabled, focus won't be triggered anyway + self.buttonElement.addClass( focusClass ); + }) + .bind( "blur.button", function() { + self.buttonElement.removeClass( focusClass ); + }); + if ( toggleButton ) { this.element.bind( "change.button", function() { if ( clickDragged ) { @@ -409,6 +413,4 @@ $.widget( "ui.buttonset", { } }); -$.ui.buttonset.version = "@VERSION"; - }( jQuery ) ); diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index dc2849155..0eba39842 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -36,6 +36,7 @@ var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ", }; $.widget("ui.dialog", { + version: "@VERSION", options: { autoOpen: true, buttons: {}, @@ -190,6 +191,10 @@ $.widget("ui.dialog", { }, close: function( event ) { + if ( !this._isOpen ) { + return self; + } + var self = this, maxZ, thisZ; @@ -197,13 +202,13 @@ $.widget("ui.dialog", { return; } + self._isOpen = false; + if ( self.overlay ) { self.overlay.destroy(); } self.uiDialog.unbind( "keypress.ui-dialog" ); - self._isOpen = false; - if ( self.options.hide ) { self.uiDialog.hide( self.options.hide, function() { self._trigger( "close", event ); @@ -369,8 +374,7 @@ $.widget("ui.dialog", { _makeDraggable: function() { var self = this, options = self.options, - doc = $( document ), - heightBeforeDrag; + doc = $( document ); function filteredUi( ui ) { return { @@ -384,9 +388,7 @@ $.widget("ui.dialog", { handle: ".ui-dialog-titlebar", containment: "document", start: function( event, ui ) { - heightBeforeDrag = options.height === "auto" ? "auto" : $( this ).height(); $( this ) - .height( $( this ).height() ) .addClass( "ui-dialog-dragging" ); self._trigger( "dragStart", event, filteredUi( ui ) ); }, @@ -399,8 +401,7 @@ $.widget("ui.dialog", { ui.position.top - doc.scrollTop() ]; $( this ) - .removeClass( "ui-dialog-dragging" ) - .height( heightBeforeDrag ); + .removeClass( "ui-dialog-dragging" ); self._trigger( "dragStop", event, filteredUi( ui ) ); $.ui.dialog.overlay.resize(); } @@ -655,8 +656,6 @@ $.widget("ui.dialog", { }); $.extend($.ui.dialog, { - version: "@VERSION", - uuid: 0, maxZ: 0, diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js index c16833eb0..6475ebd61 100644 --- a/ui/jquery.ui.draggable.js +++ b/ui/jquery.ui.draggable.js @@ -15,6 +15,7 @@ (function( $, undefined ) { $.widget("ui.draggable", $.ui.mouse, { + version: "@VERSION", widgetEventPrefix: "drag", options: { addClasses: true, @@ -163,6 +164,10 @@ $.widget("ui.draggable", $.ui.mouse, { this.helper.addClass("ui-draggable-dragging"); this._mouseDrag(event, true); //Execute the drag once - this causes the helper not to be visible before getting its correct position + + //If the ddmanager is used for droppables, inform the manager that dragging has started (see #5003) + if ( $.ui.ddmanager ) $.ui.ddmanager.dragStart(this, event); + return true; }, @@ -229,6 +234,9 @@ $.widget("ui.draggable", $.ui.mouse, { }); //Remove frame helpers } + //If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003) + if( $.ui.ddmanager ) $.ui.ddmanager.dragStop(this, event); + return $.ui.mouse.prototype._mouseUp.call(this, event); }, @@ -495,10 +503,6 @@ $.widget("ui.draggable", $.ui.mouse, { }); -$.extend($.ui.draggable, { - version: "@VERSION" -}); - $.ui.plugin.add("draggable", "connectToSortable", { start: function(event, ui) { diff --git a/ui/jquery.ui.droppable.js b/ui/jquery.ui.droppable.js index b8a93cd46..3942c6b8f 100644 --- a/ui/jquery.ui.droppable.js +++ b/ui/jquery.ui.droppable.js @@ -16,6 +16,7 @@ (function( $, undefined ) { $.widget("ui.droppable", { + version: "@VERSION", widgetEventPrefix: "drop", options: { accept: '*', @@ -146,10 +147,6 @@ $.widget("ui.droppable", { }); -$.extend($.ui.droppable, { - version: "@VERSION" -}); - $.ui.intersect = function(draggable, droppable, toleranceMode) { if (!droppable.offset) return false; @@ -238,6 +235,12 @@ $.ui.ddmanager = { 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" ).bind( "scroll.droppable", function() { + if( !draggable.options.refreshPositions ) $.ui.ddmanager.prepareOffsets( draggable, event ); + }); + }, drag: function(draggable, event) { //If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse. @@ -279,6 +282,11 @@ $.ui.ddmanager = { } }); + }, + dragStop: function( draggable, event ) { + draggable.element.parentsUntil( "body" ).unbind( "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 ); } }; diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 41b2e7a1a..03e14f124 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -16,6 +16,7 @@ var idIncrement = 0; $.widget("ui.menu", { + version: "@VERSION", defaultElement: "<ul>", delay: 150, options: { @@ -420,6 +421,4 @@ $.widget("ui.menu", { } }); -$.ui.menu.version = "@VERSION"; - }( jQuery )); diff --git a/ui/jquery.ui.menubar.js b/ui/jquery.ui.menubar.js index 2879d079c..a0e9afb3c 100644 --- a/ui/jquery.ui.menubar.js +++ b/ui/jquery.ui.menubar.js @@ -18,10 +18,11 @@ // TODO when mixing clicking menus and keyboard navigation, focus handling is broken // there has to be just one item that has tabindex $.widget( "ui.menubar", { - options: { - buttons: false, - menuIcon: false - }, + version: "@VERSION", + options: { + buttons: false, + menuIcon: false + }, _create: function() { var that = this; var items = this.items = this.element.children( "li" ) @@ -68,13 +69,13 @@ $.widget( "ui.menubar", { var input = $(this), // TODO menu var is only used on two places, doesn't quite justify the .each menu = input.next( "ul" ); - + input.bind( "click.menubar focus.menubar mouseenter.menubar", function( event ) { // ignore triggered focus event if ( event.type == "focus" && !event.originalEvent ) { return; } - event.preventDefault(); + event.preventDefault(); // TODO can we simplify or extractthis check? especially the last two expressions // there's a similar active[0] == menu[0] check in _open if ( event.type == "click" && menu.is( ":visible" ) && that.active && that.active[0] == menu[0] ) { @@ -84,7 +85,7 @@ $.widget( "ui.menubar", { if ( ( that.open && event.type == "mouseenter" ) || event.type == "click" ) { that._open( event, menu ); } - }) + }) .bind( "keydown", function( event ) { switch ( event.keyCode ) { case $.ui.keyCode.SPACE: @@ -113,11 +114,11 @@ $.widget( "ui.menubar", { input.addClass( "ui-state-default" ).append( "<span class='ui-button-icon-secondary ui-icon ui-icon-triangle-1-s'></span>" ); input.removeClass( "ui-button-text-only" ).addClass( "ui-button-text-icon-secondary" ); } - + if ( !that.options.buttons ) { // TODO ui-menubar-link is added above, not needed here? input.addClass( "ui-menubar-link" ).removeClass( "ui-state-default" ); - }; + }; }); that._bind( { @@ -139,18 +140,18 @@ $.widget( "ui.menubar", { } }); }, - + _destroy : function() { var items = this.element.children( "li" ) .removeClass( "ui-menubar-item" ) .removeAttr( "role", "presentation" ) .children( "button, a" ); - + this.element .removeClass( "ui-menubar ui-widget-header ui-helper-clearfix" ) .removeAttr( "role", "menubar" ) .unbind( ".menubar" ); - + items .unbind( ".menubar" ) .removeClass( "ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default" ) @@ -172,7 +173,7 @@ $.widget( "ui.menubar", { .removeAttr( "tabindex" ) .unbind( ".menubar" ); }, - + _close: function() { if ( !this.active || !this.active.length ) return; @@ -188,7 +189,7 @@ $.widget( "ui.menubar", { this.active = null; this.open = false; }, - + _open: function( event, menu ) { // on a single-button menubar, ignore reopening the same menu if ( this.active && this.active[0] == menu[0] ) { @@ -222,7 +223,7 @@ $.widget( "ui.menubar", { .focusin(); this.open = true; }, - + // TODO refactor this and the next three methods _prev: function( event, button ) { button.attr( "tabIndex", -1 ); @@ -234,7 +235,7 @@ $.widget( "ui.menubar", { lastItem.removeAttr( "tabIndex" )[0].focus(); } }, - + _next: function( event, button ) { button.attr( "tabIndex", -1 ); var next = button.parent().nextAll( "li" ).children( ".ui-button" ).eq( 0 ); @@ -256,7 +257,7 @@ $.widget( "ui.menubar", { this._open( event, lastItem ); } }, - + // TODO rename to child (or something like that) _right: function( event ) { var next = this.active.parent().nextAll( "li:eq(0)" ).children( ".ui-menu" ).eq( 0 ); diff --git a/ui/jquery.ui.mouse.js b/ui/jquery.ui.mouse.js index 0bd38db85..582eaf9c0 100644 --- a/ui/jquery.ui.mouse.js +++ b/ui/jquery.ui.mouse.js @@ -18,6 +18,7 @@ $(document).mousedown(function(e) { }); $.widget("ui.mouse", { + version: "@VERSION", options: { cancel: ':input,option', distance: 1, @@ -58,7 +59,7 @@ $.widget("ui.mouse", { var self = this, btnIsLeft = (event.which == 1), - elIsCancel = (typeof this.options.cancel == "string" ? $(event.target).parents().add(event.target).filter(this.options.cancel).length : false); + elIsCancel = (typeof this.options.cancel == "string" ? $(event.target).closest(this.options.cancel).length : false); if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) { return true; } diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js index 10361a35c..c90755fbb 100644 --- a/ui/jquery.ui.popup.js +++ b/ui/jquery.ui.popup.js @@ -17,6 +17,7 @@ var idIncrement = 0; $.widget( "ui.popup", { + version: "@VERSION", options: { position: { my: "left top", diff --git a/ui/jquery.ui.progressbar.js b/ui/jquery.ui.progressbar.js index e3b25cfd7..187470681 100644 --- a/ui/jquery.ui.progressbar.js +++ b/ui/jquery.ui.progressbar.js @@ -14,6 +14,7 @@ (function( $, undefined ) { $.widget( "ui.progressbar", { + version: "@VERSION", options: { value: 0, max: 100 @@ -100,8 +101,4 @@ $.widget( "ui.progressbar", { } }); -$.extend( $.ui.progressbar, { - version: "@VERSION" -}); - })( jQuery ); diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index e0579ef84..673a8fd75 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -15,6 +15,7 @@ (function( $, undefined ) { $.widget("ui.resizable", $.ui.mouse, { + version: "@VERSION", widgetEventPrefix: "resize", options: { alsoResize: false, @@ -293,6 +294,8 @@ $.widget("ui.resizable", $.ui.mouse, { // Calculate the attrs that will be change var data = trigger.apply(this, [event, dx, dy]), ie6 = $.browser.msie && $.browser.version < 7, csdif = this.sizeDiff; + // Put this in the mouseDrag handler since the user can start pressing shift while resizing + this._updateVirtualBoundaries(event.shiftKey); if (this._aspectRatio || event.shiftKey) data = this._updateRatio(data, event); @@ -351,6 +354,32 @@ $.widget("ui.resizable", $.ui.mouse, { }, + _updateVirtualBoundaries: function(forceAspectRatio) { + var o = this.options, pMinWidth, pMaxWidth, pMinHeight, pMaxHeight, b; + + b = { + minWidth: isNumber(o.minWidth) ? o.minWidth : 0, + maxWidth: isNumber(o.maxWidth) ? o.maxWidth : Infinity, + minHeight: isNumber(o.minHeight) ? o.minHeight : 0, + maxHeight: isNumber(o.maxHeight) ? o.maxHeight : Infinity + }; + + if(this._aspectRatio || forceAspectRatio) { + // We want to create an enclosing box whose aspect ration is the requested one + // First, compute the "projected" size for each dimension based on the aspect ratio and other dimension + pMinWidth = b.minHeight * this.aspectRatio; + pMinHeight = b.minWidth / this.aspectRatio; + pMaxWidth = b.maxHeight * this.aspectRatio; + pMaxHeight = b.maxWidth / this.aspectRatio; + + if(pMinWidth > b.minWidth) b.minWidth = pMinWidth; + if(pMinHeight > b.minHeight) b.minHeight = pMinHeight; + if(pMaxWidth < b.maxWidth) b.maxWidth = pMaxWidth; + if(pMaxHeight < b.maxHeight) b.maxHeight = pMaxHeight; + } + this._vBoundaries = b; + }, + _updateCache: function(data) { var o = this.options; this.offset = this.helper.offset(); @@ -364,8 +393,8 @@ $.widget("ui.resizable", $.ui.mouse, { var o = this.options, cpos = this.position, csize = this.size, a = this.axis; - if (data.height) data.width = (csize.height * this.aspectRatio); - else if (data.width) data.height = (csize.width / this.aspectRatio); + if (isNumber(data.height)) data.width = (data.height * this.aspectRatio); + else if (isNumber(data.width)) data.height = (data.width / this.aspectRatio); if (a == 'sw') { data.left = cpos.left + (csize.width - data.width); @@ -381,7 +410,7 @@ $.widget("ui.resizable", $.ui.mouse, { _respectSize: function(data, event) { - var el = this.helper, o = this.options, pRatio = this._aspectRatio || event.shiftKey, a = this.axis, + var el = this.helper, o = this._vBoundaries, pRatio = this._aspectRatio || event.shiftKey, a = this.axis, ismaxw = isNumber(data.width) && o.maxWidth && (o.maxWidth < data.width), ismaxh = isNumber(data.height) && o.maxHeight && (o.maxHeight < data.height), isminw = isNumber(data.width) && o.minWidth && (o.minWidth > data.width), isminh = isNumber(data.height) && o.minHeight && (o.minHeight > data.height); @@ -520,10 +549,6 @@ $.widget("ui.resizable", $.ui.mouse, { }); -$.extend($.ui.resizable, { - version: "@VERSION" -}); - /* * Resizable Extensions */ diff --git a/ui/jquery.ui.selectable.js b/ui/jquery.ui.selectable.js index fa7d01122..75f1cee66 100644 --- a/ui/jquery.ui.selectable.js +++ b/ui/jquery.ui.selectable.js @@ -15,6 +15,7 @@ (function( $, undefined ) { $.widget("ui.selectable", $.ui.mouse, { + version: "@VERSION", options: { appendTo: 'body', autoRefresh: true, @@ -259,8 +260,4 @@ $.widget("ui.selectable", $.ui.mouse, { }); -$.extend($.ui.selectable, { - version: "@VERSION" -}); - })(jQuery); diff --git a/ui/jquery.ui.slider.js b/ui/jquery.ui.slider.js index f0b01d7c0..978155370 100644 --- a/ui/jquery.ui.slider.js +++ b/ui/jquery.ui.slider.js @@ -19,7 +19,7 @@ var numPages = 5; $.widget( "ui.slider", $.ui.mouse, { - + version: "@VERSION", widgetEventPrefix: "slide", options: { @@ -659,8 +659,4 @@ $.widget( "ui.slider", $.ui.mouse, { }); -$.extend( $.ui.slider, { - version: "@VERSION" -}); - }(jQuery)); diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index 78349669a..99798a915 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -15,6 +15,7 @@ (function( $, undefined ) { $.widget("ui.sortable", $.ui.mouse, { + version: "@VERSION", widgetEventPrefix: "sort", options: { appendTo: "parent", @@ -983,7 +984,7 @@ $.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[0].parentNode) 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]) { @@ -1069,8 +1070,4 @@ $.widget("ui.sortable", $.ui.mouse, { }); -$.extend($.ui.sortable, { - version: "@VERSION" -}); - })(jQuery); diff --git a/ui/jquery.ui.spinner.js b/ui/jquery.ui.spinner.js index 2709175b5..b4cefc982 100644 --- a/ui/jquery.ui.spinner.js +++ b/ui/jquery.ui.spinner.js @@ -14,13 +14,14 @@ (function( $ ) { $.widget( "ui.spinner", { + version: "@VERSION", defaultElement: "<input>", widgetEventPrefix: "spin", options: { incremental: true, max: null, min: null, - numberformat: null, + numberFormat: null, page: 10, step: null, value: null @@ -62,6 +63,7 @@ $.widget( "ui.spinner", { // add buttons .append( self._buttonHtml() ) // add behaviours + .disableSelection() // TODO: user ._hoverable .hover(function() { if ( !options.disabled ) { @@ -251,7 +253,7 @@ $.widget( "ui.spinner", { this.counter > 20 ? this.counter > 100 ? this.counter > 200 - ? 100 + ? 100 : 10 : 2 : 1); @@ -318,13 +320,13 @@ $.widget( "ui.spinner", { _parse: function( val ) { if ( typeof val === "string" ) { - val = $.global && this.options.numberformat ? $.global.parseFloat( val ) : +val; + val = $.global && this.options.numberFormat ? $.global.parseFloat( val ) : +val; } return isNaN( val ) ? null : val; }, _format: function( num ) { - this.element.val( $.global && this.options.numberformat ? $.global.format( num, this.options.numberformat ) : num ); + this.element.val( $.global && this.options.numberFormat ? $.global.format( num, this.options.numberFormat ) : num ); }, destroy: function() { @@ -368,6 +370,4 @@ $.widget( "ui.spinner", { } }); -$.ui.spinner.version = "@VERSION"; - }( jQuery ) ); diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js index 239805b14..515a93ae0 100644 --- a/ui/jquery.ui.tabs.js +++ b/ui/jquery.ui.tabs.js @@ -19,6 +19,7 @@ function getNextTabId() { } $.widget( "ui.tabs", { + version: "@VERSION", options: { active: null, collapsible: false, @@ -577,10 +578,6 @@ $.widget( "ui.tabs", { } }); -$.extend( $.ui.tabs, { - version: "@VERSION" -}); - // DEPRECATED if ( $.uiBackCompat !== false ) { diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index a8a44f1c0..d30e49c66 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -12,136 +12,202 @@ * jquery.ui.widget.js * jquery.ui.position.js */ -(function($) { +(function( $ ) { var increments = 0; -$.widget("ui.tooltip", { +$.widget( "ui.tooltip", { + version: "@VERSION", options: { - tooltipClass: null, - items: "[title]", content: function() { return $( this ).attr( "title" ); }, + items: "[title]", position: { my: "left+15 center", - at: "right center" - } + at: "right center", + collision: "flip fit" + }, + tooltipClass: null }, + _create: function() { - this._bind( { + this._bind({ mouseover: "open", focusin: "open" }); + + // IDs of generated tooltips, needed for destroy + this.tooltips = {}; }, - - enable: function() { - this.options.disabled = false; + + _setOption: function( key, value ) { + if ( key === "disabled" ) { + this[ value ? "_disable" : "_enable" ](); + this.options[ key ] = value; + // disable element style changes + return; + } + this._super( "_setOption", key, value ); + }, + + _disable: function() { + var that = this; + + // close open tooltips + $.each( this.tooltips, function( id, element ) { + var event = $.Event( "blur" ); + event.target = event.currentTarget = element[0]; + that.close( event, true ); + }); + + // remove title attributes to prevent native tooltips + this.element.find( this.options.items ).andSelf().each(function() { + var element = $( this ); + if ( element.is( "[title]" ) ) { + element + .data( "tooltip-title", element.attr( "title" ) ) + .attr( "title", "" ); + } + }); }, - - disable: function() { - // only set option, disable element style changes - this.options.disabled = true; + + _enable: function() { + // restore title attributes + this.element.find( this.options.items ).andSelf().each(function() { + var element = $( this ); + if ( element.data( "tooltip-title" ) ) { + element.attr( "title", element.data( "tooltip-title" ) ); + } + }); }, - - open: function(event) { - var target = $(event && event.target || this.element).closest(this.options.items); - if ( !target.length ) { + + open: function( event ) { + var content, + that = this, + target = $( event ? event.target : this.element ) + .closest( this.options.items ); + + // if aria-describedby exists, then the tooltip is already open + if ( !target.length || target.attr( "aria-describedby" ) ) { return; } - var self = this; - if ( !target.data("tooltip-title") ) { - target.data("tooltip-title", target.attr("title")); + + if ( !target.data( "tooltip-title" ) ) { + target.data( "tooltip-title", target.attr( "title" ) ); } - var content = this.options.content.call(target[0], function(response) { - // IE may instantly serve a cached response, need to give it a chance to finish with _open before that + + content = this.options.content.call( target[0], function( response ) { + // IE may instantly serve a cached response for ajax requests + // delay this call to _open so the other call to _open runs first setTimeout(function() { - // when undefined, it got removeAttr, then ignore (ajax response) - // intially its an empty string, so not undefined - // TODO is there a better approach to enable ajax tooltips to have two updates? - if (target.attr( "aria-describedby" ) !== undefined) { - self._open(event, target, response); - } - }, 13); + that._open( event, target, response ); + }, 1 ); }); - if (content) { - self._open(event, target, content); + if ( content ) { + that._open( event, target, content ); } }, - + _open: function( event, target, content ) { - if ( !content ) + if ( !content ) { return; + } - target.attr("title", ""); - - if ( this.options.disabled ) - return; + // if we have a title, clear it to prevent the native tooltip + // we have to check first to avoid defining a title if none exists + // (we don't want to cause an element to start matching [title]) + // TODO: document why we don't use .removeAttr() + if ( target.is( "[title]" ) ) { + target.attr( "title", "" ); + } // ajaxy tooltip can update an existing one var tooltip = this._find( target ); - if (!tooltip.length) { - tooltip = this._tooltip(); + if ( !tooltip.length ) { + tooltip = this._tooltip( target ); target.attr( "aria-describedby", tooltip.attr( "id" ) ); } - tooltip.find(".ui-tooltip-content").html( content ); - tooltip.position( $.extend({ - of: target - }, this.options.position ) ).hide(); + tooltip.find( ".ui-tooltip-content" ).html( content ); + tooltip + .stop( true ) + .position( $.extend({ + of: target, + using: function( pos ) { + // we only want to hide if there's no custom using defined + $( this ).css( pos ).hide(); + } + }, this.options.position ) ); - tooltip.stop( true ); this._show( tooltip, this.options.show ); this._trigger( "open", event ); this._bind( target, { mouseleave: "close", - blur: "close", - click: "close" + blur: "close" }); }, - - close: function( event ) { - var target = $( event && event.currentTarget || this.element ); - target.attr( "title", target.data( "tooltip-title" ) ); - - if ( this.options.disabled ) + + close: function( event, force ) { + var that = this, + target = $( event ? event.currentTarget : this.element ), + tooltip = this._find( target ); + + // don't close if the element has focus + // this prevents the tooltip from closing if you hover while focused + if ( !force && document.activeElement === target[0] ) { return; + } + + // only set title if we had one before (see comment in _open()) + if ( target.data( "tooltip-title" ) ) { + target.attr( "title", target.data( "tooltip-title" ) ); + } - var tooltip = this._find( target ); target.removeAttr( "aria-describedby" ); - + tooltip.stop( true ); this._hide( tooltip, this.options.hide, function() { $( this ).remove(); + delete that.tooltips[ this.id ]; }); - + target.unbind( "mouseleave.tooltip blur.tooltip" ); - + this._trigger( "close", event ); }, - _tooltip: function() { - var tooltip = $( "<div></div>" ) - .attr( "id", "ui-tooltip-" + increments++ ) - .attr( "role", "tooltip" ) - .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content" ); - if (this.options.tooltipClass) { - tooltip.addClass(this.options.tooltipClass); - } - $( "<div></div>" ) + _tooltip: function( element ) { + var id = "ui-tooltip-" + increments++, + tooltip = $( "<div>" ) + .attr({ + id: id, + role: "tooltip" + }) + .addClass( "ui-tooltip ui-widget ui-corner-all ui-widget-content " + + ( this.options.tooltipClass || "" ) ); + $( "<div>" ) .addClass( "ui-tooltip-content" ) .appendTo( tooltip ); tooltip.appendTo( document.body ); + if ( $.fn.bgiframe ) { + tooltip.bgiframe(); + } + this.tooltips[ id ] = element; return tooltip; }, _find: function( target ) { var id = target.attr( "aria-describedby" ); - return id ? $( document.getElementById( id ) ) : $(); + return id ? $( "#" + id ) : $(); + }, + + _destroy: function() { + $.each( this.tooltips, function( id ) { + $( "#" + id ).remove(); + }); } }); -$.ui.tooltip.version = "@VERSION"; - -})(jQuery);
\ No newline at end of file +}( jQuery ) ); diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index 4167fd4e5..da52a5a9c 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -49,7 +49,7 @@ $.widget = function( name, base, prototype ) { if ( arguments.length ) { this._createWidget( options, element ); } - }, $[ namespace ][ name ] ); + }, $[ namespace ][ name ], { version: prototype.version } ); var basePrototype = new base(); // we need to make the options hash a property directly on the new instance @@ -379,7 +379,7 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) { var hasOptions = !$.isEmptyObject( options ), effectName = options.effect || defaultEffect; options.complete = callback; - if (options.delay) { + if ( options.delay ) { element.delay( options.delay ); } if ( hasOptions && $.effects && ( $.effects.effect[ effectName ] || $.uiBackCompat !== false && $.effects[ effectName ] ) ) { |
