From 77a55f1291861b87d30011ac5fd948f6b38d2c60 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Fri, 19 Oct 2012 20:58:08 -0400 Subject: Tooltip: Fix nested tooltips (on hover) by closing parent tooltips and removing title attributes. Fixes #8700 - Overlapping tooltipped elements shows native tooltip for one of the elements --- tests/visual/tooltip/tooltip.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'tests/visual') diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 56e5db10e..8f9b2e8df 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -140,10 +140,14 @@

Nested elements.

-
+
tooltipped - nested tooltipped + + nested tooltipped + third level +
+
Text in bold. -- cgit v1.2.3 From 6b48ef5eca67f389d7a58f3c8a263ceb82c8becb Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Fri, 19 Oct 2012 18:16:11 -0400 Subject: Tooltip: Only bind blur when opening via focus, mouseleave for mouseover. Remove the keep-open-on-focusout workaround. Now matching behaviour described in ARIA Authoring Practices. Fixes #8699 - Moving focus on click of a tooltipped element shows native tooltip in IE/Firefox on Windows --- tests/visual/tooltip/tooltip.html | 7 +++++++ ui/jquery.ui.tooltip.js | 25 ++++++++++--------------- 2 files changed, 17 insertions(+), 15 deletions(-) (limited to 'tests/visual') diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 8f9b2e8df..97fa99bb9 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -90,6 +90,10 @@ offset: "0 -5" } }); + + $( "#blurs-on-click" ).tooltip().click(function() { + $( "#focus-on-me" ).focus(); + }); }); @@ -154,6 +158,9 @@
+ + +

Play around with focusing and hovering of form elements.

diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 73321633b..b56d939e8 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -206,7 +206,7 @@ $.widget( "ui.tooltip", { }, _open: function( event, target, content ) { - var tooltip, positionOption; + var tooltip, positionOption, events; if ( !content ) { return; } @@ -261,9 +261,7 @@ $.widget( "ui.tooltip", { this._trigger( "open", event, { tooltip: tooltip } ); - this._on( target, { - mouseleave: "close", - focusout: "close", + events = { keyup: function( event ) { if ( event.keyCode === $.ui.keyCode.ESCAPE ) { var fakeEvent = $.Event(event); @@ -271,7 +269,14 @@ $.widget( "ui.tooltip", { this.close( fakeEvent, true ); } } - }); + }; + if ( !event || event.type === "mouseover" ) { + events.mouseleave = "close"; + } + if ( !event || event.type === "focusin" ) { + events.focusout = "close"; + } + this._on( target, events ); }, close: function( event, force ) { @@ -285,16 +290,6 @@ $.widget( "ui.tooltip", { return; } - // don't close if the element has focus - // this prevents the tooltip from closing if you hover while focused - // - // we have to check the event type because tabbing out of the document - // may leave the element as the activeElement - if ( !force && event && event.type !== "focusout" && - this.document[0].activeElement === target[0] ) { - return; - } - // only set title if we had one before (see comment in _open()) if ( target.data( "ui-tooltip-title" ) ) { target.attr( "title", target.data( "ui-tooltip-title" ) ); -- cgit v1.2.3 From 0b3e59f149054122d8948c29baa4bb174006d75e Mon Sep 17 00:00:00 2001 From: Andrew Couch Date: Tue, 16 Oct 2012 12:55:50 -0400 Subject: Tooltip: Do not attempt to position if tooltip is hidden. Fixed #8644 - Delayed tooltips set to track should reposition when being shown for the first time. --- tests/unit/tooltip/tooltip_options.js | 35 +++++++++++++++++++++++++++++++++++ tests/visual/tooltip/tooltip.html | 7 ++++++- ui/jquery.ui.tooltip.js | 18 ++++++++++++++++-- 3 files changed, 57 insertions(+), 3 deletions(-) (limited to 'tests/visual') diff --git a/tests/unit/tooltip/tooltip_options.js b/tests/unit/tooltip/tooltip_options.js index db193e8fa..e5046f464 100644 --- a/tests/unit/tooltip/tooltip_options.js +++ b/tests/unit/tooltip/tooltip_options.js @@ -103,4 +103,39 @@ test( "tooltipClass", function() { ok( $( "#" + element.data( "ui-tooltip-id" ) ).hasClass( "custom" ) ); }); +test( "track + show delay", function() { + expect( 2 ); + var event, + leftVal = 314, + topVal = 159, + offsetVal = 26, + element = $( "#tooltipped1" ).tooltip({ + track: true, + show: { + delay: 1 + }, + position: { + my: "left+" + offsetVal + " top+" + offsetVal, + at: "right bottom" + } + }); + + event = $.Event( "mouseover" ); + event.target = $( "#tooltipped1" )[ 0 ]; + event.originalEvent = { type: "mouseover" }; + event.pageX = leftVal; + event.pageY = topVal; + element.trigger( event ); + + event = $.Event( "mousemove" ); + event.target = $( "#tooltipped1" )[ 0 ]; + event.originalEvent = { type: "mousemove" }; + event.pageX = leftVal; + event.pageY = topVal; + element.trigger( event ); + + equal( $( ".ui-tooltip" ).css( "left" ), leftVal + offsetVal + "px" ); + equal( $( ".ui-tooltip" ).css( "top" ), topVal + offsetVal + "px" ); +}); + }( jQuery ) ); diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 97fa99bb9..598af0ee8 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -91,7 +91,12 @@ } }); - $( "#blurs-on-click" ).tooltip().click(function() { + $( "#blurs-on-click" ).tooltip({ + track: true, + show: { + delay: 500 + } + }).click(function() { $( "#focus-on-me" ).focus(); }); }); diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 1be56c7ea..a04b84289 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -206,7 +206,8 @@ $.widget( "ui.tooltip", { }, _open: function( event, target, content ) { - var tooltip, positionOption, events; + var tooltip, events, delayedShow, + positionOption = $.extend( {}, this.options.position ); if ( !content ) { return; @@ -241,10 +242,12 @@ $.widget( "ui.tooltip", { function position( event ) { positionOption.of = event; + if ( tooltip.is( ":hidden" ) ) { + return; + } tooltip.position( positionOption ); } if ( this.options.track && event && /^mouse/.test( event.originalEvent.type ) ) { - positionOption = $.extend( {}, this.options.position ); this._on( this.document, { mousemove: position }); @@ -259,6 +262,17 @@ $.widget( "ui.tooltip", { tooltip.hide(); this._show( tooltip, this.options.show ); + // Handle tracking tooltips that are shown with a delay (#8644). As soon + // as the tooltip is visible, position the tooltip using the most recent + // event. + if ( this.options.show && this.options.show.delay ) { + delayedShow = setInterval(function() { + if ( tooltip.is( ":visible" ) ) { + position( positionOption.of ); + clearInterval( delayedShow ); + } + }, $.fx.interval ); + } this._trigger( "open", event, { tooltip: tooltip } ); -- cgit v1.2.3 From 3829a37ca122e923c3a08b964c4b1a946a2a1456 Mon Sep 17 00:00:00 2001 From: Nate Eagle Date: Mon, 15 Oct 2012 16:12:21 -0400 Subject: Dialog: Awesome new stacking and overlay implementation. Fixes the following tickets: Fixes #3534 - Dialog: Modal dialog disables all input elements on page. Fixes #4671 - Dialog: Modal Dialog disables vertical scroll bar in Chrome & Safari. Fixes #4995 - Dialog: Modal Dialog's overlay dissapears in IE when content is tall. Fixes #5388 - Dialog: Don't change z-index when already at the top. Fixes #5466 - Dialog: "modal" Dialog Incorrectly Cancels Input Events. Fixes #5762 - Dialog: Get rid of z-index workaround, document it instead. Fixes #6267 - Dialog: checkboxes that inherit a z-index < jqueryui.dialog z-index don't work. Fixes #7051 - Dialog: modal prevents tab key from moving focus off slider handle. Fixes #7107 - Dialog: Modal dialog event loss with high zindex child elements (FF 3.6). Fixes #7120 - Dialog: Modal operation interrupts drag drop marker functionality on gmaps. Fixes #8172 - Dialog: Change event cancelled when opening modal dialog from another modal dialog. Fixes #8583 - Dialog: Mouse event wrongly stopped. Fixes #8722 - Dialog: Remove stack option. Fixes #8729 - Dialog: Remove zIndex option. --- tests/unit/dialog/dialog.html | 3 +- tests/unit/dialog/dialog_common.js | 1 - tests/unit/dialog/dialog_methods.js | 42 ++++--- tests/unit/dialog/dialog_tickets.js | 79 +----------- tests/visual/dialog/complex-dialogs.html | 89 +++++++++++++ themes/base/jquery.ui.core.css | 4 +- themes/base/jquery.ui.dialog.css | 2 +- ui/jquery.ui.dialog.js | 209 +++---------------------------- 8 files changed, 138 insertions(+), 291 deletions(-) create mode 100644 tests/visual/dialog/complex-dialogs.html (limited to 'tests/visual') diff --git a/tests/unit/dialog/dialog.html b/tests/unit/dialog/dialog.html index d804807f2..5a7fc8fe5 100644 --- a/tests/unit/dialog/dialog.html +++ b/tests/unit/dialog/dialog.html @@ -52,7 +52,8 @@

    - +
    +
    diff --git a/tests/unit/dialog/dialog_common.js b/tests/unit/dialog/dialog_common.js index 623908da7..d49f78a4b 100644 --- a/tests/unit/dialog/dialog_common.js +++ b/tests/unit/dialog/dialog_common.js @@ -26,7 +26,6 @@ TestHelpers.commonWidgetTests( "dialog", { stack: true, title: '', width: 300, - zIndex: 1000, // callbacks create: null diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js index 3c80a9bea..e7b2fc710 100644 --- a/tests/unit/dialog/dialog_methods.js +++ b/tests/unit/dialog/dialog_methods.js @@ -106,24 +106,30 @@ test("isOpen", function() { }); test("moveToTop", function() { - expect( 3 ); - - var d1, d2, dlg1, dlg2, - expected = $('
    ').dialog(), - actual = expected.dialog('moveToTop'); - equal(actual, expected, 'moveToTop is chainable'); - - d1 = $('
    ').dialog(); - dlg1 = d1.parents('.ui-dialog'); - d1.dialog('close'); - d1.dialog('open'); - d2 = $('
    ').dialog(); - dlg2 = d2.parents('.ui-dialog'); - d2.dialog('close'); - d2.dialog('open'); - ok(dlg1.css('zIndex') < dlg2.css('zIndex'), 'dialog 1 under dialog 2 before moveToTop method called'); - d1.dialog('moveToTop'); - ok(dlg1.css('zIndex') > dlg2.css('zIndex'), 'dialog 1 above dialog 2 after moveToTop method called'); + expect( 5 ); + function order() { + var actual = $( ".ui-dialog" ).map(function() { + return +$( this ).find( ".ui-dialog-content" ).attr( "id" ).replace( /\D+/, "" ); + }).get().reverse(); + deepEqual( actual, $.makeArray( arguments ) ); + } + var dialog1, dialog2, + focusOn = "dialog1"; + dialog1 = $( "#dialog1" ).dialog({ + focus: function() { + equal( focusOn, "dialog1" ); + } + }); + focusOn = "dialog2"; + dialog2 = $( "#dialog2" ).dialog({ + focus: function() { + equal( focusOn, "dialog2" ); + } + }); + order( 2, 1 ); + focusOn = "dialog1"; + dialog1.dialog( "moveToTop" ); + order( 1, 2 ); }); test("open", function() { diff --git a/tests/unit/dialog/dialog_tickets.js b/tests/unit/dialog/dialog_tickets.js index cf4ab0219..2b0214718 100644 --- a/tests/unit/dialog/dialog_tickets.js +++ b/tests/unit/dialog/dialog_tickets.js @@ -99,10 +99,10 @@ test("#6137: dialog('open') causes form elements to reset on IE7", function() { 'b').appendTo( "body" ).dialog({autoOpen: false}); d1.find('#b').prop( "checked", true ); - equal($('input:checked').val(), 'b', "checkbox b is checked"); + equal(d1.find('input:checked').val(), 'b', "checkbox b is checked"); d1.dialog('open'); - equal($('input:checked').val(), 'b', "checkbox b is checked"); + equal(d1.find('input:checked').val(), 'b', "checkbox b is checked"); d1.remove(); }); @@ -117,81 +117,6 @@ test("#6645: Missing element not found check in overlay", function(){ d1.add(d2).remove(); }); -test("#6966: Escape key closes all dialogs, not the top one", function(){ - expect(24); - // test with close function removing dialog triggered through the overlay - d1 = $('
    Dialog 1
    ').dialog({modal: true, close: function(){ d1.remove(); }}); - d2 = $('
    Dialog 2
    ').dialog({modal: true, close: function(){ d2.remove(); }}); - - ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog is open'); - ok(d2.data('dialog') && d2.dialog('isOpen'), 'second dialog is open'); - - $( document ).simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE}); - ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog still open'); - ok(!d2.data('dialog'), 'second dialog is closed'); - - $( document ).simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE}); - ok(!d1.data('dialog'), 'first dialog is closed'); - ok(!d2.data('dialog'), 'second dialog is closed'); - - d2.remove(); - d1.remove(); - - // test with close function removing dialog triggered through the dialog - d1 = $('
    Dialog 1
    ').dialog({modal: true, close: function(){ d1.remove(); }}); - d2 = $('
    Dialog 2
    ').dialog({modal: true, close: function(){ d2.remove(); }}); - - ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog is open'); - ok(d2.data('dialog') && d2.dialog('isOpen'), 'second dialog is open'); - - d2.simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE}); - ok(d1.data('dialog') && d1.dialog('isOpen'), 'first dialog still open'); - ok(!d2.data('dialog'), 'second dialog is closed'); - - d1.simulate('keydown', {keyCode: $.ui.keyCode.ESCAPE}); - ok(!d1.data('dialog'), 'first dialog is closed'); - ok(!d2.data('dialog'), 'second dialog is closed'); - - d2.remove(); - d1.remove(); - - // test without close function removing dialog - d1 = $('
    Dialog 1
    ').dialog({modal: true}); - d2 = $('
    Dialog 2
    ').dialog({modal: true}); - - ok(d1.dialog("isOpen"), 'first dialog is open'); - ok(d2.dialog("isOpen"), 'second dialog is open'); - - d2.simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE}); - ok(d1.dialog("isOpen"), 'first dialog still open'); - ok(!d2.dialog("isOpen"), 'second dialog is closed'); - - d1.simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE}); - ok(!d1.dialog("isOpen"), 'first dialog is closed'); - ok(!d2.dialog("isOpen"), 'second dialog is closed'); - - d2.remove(); - d1.remove(); - - // test without close function removing dialog triggered through the overlay - d1 = $('
    Dialog 1
    ').dialog({modal: true}); - d2 = $('
    Dialog 2
    ').dialog({modal: true}); - - ok(d1.dialog("isOpen"), 'first dialog is open'); - ok(d2.dialog("isOpen"), 'second dialog is open'); - - $( document ).simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE}); - ok(d1.dialog("isOpen"), 'first dialog still open'); - ok(!d2.dialog("isOpen"), 'second dialog is closed'); - - $( document ).simulate("keydown", {keyCode: $.ui.keyCode.ESCAPE}); - ok(!d1.dialog("isOpen"), 'first dialog is closed'); - ok(!d2.dialog("isOpen"), 'second dialog is closed'); - - d2.remove(); - d1.remove(); -}); - test("#4980: Destroy should place element back in original DOM position", function(){ expect( 2 ); container = $('
    '); diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html new file mode 100644 index 000000000..556336d00 --- /dev/null +++ b/tests/visual/dialog/complex-dialogs.html @@ -0,0 +1,89 @@ + + + + + Dialog Visual Test + + + + + + + + + + + + + + + + + + + + + +

    WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.

    +

    EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.

    + +Outside link + +
    +

    This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

    +

    +
    + +
    +

    Date:

    +

    +
    + +
    + + +
    + + + diff --git a/themes/base/jquery.ui.core.css b/themes/base/jquery.ui.core.css index 8cf4d02ef..b94c043da 100644 --- a/themes/base/jquery.ui.core.css +++ b/themes/base/jquery.ui.core.css @@ -19,6 +19,8 @@ .ui-helper-clearfix { zoom: 1; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } +.ui-front { z-index: 100; } + /* Interaction Cues ----------------------------------*/ @@ -36,4 +38,4 @@ ----------------------------------*/ /* Overlays */ -.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } +.ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } diff --git a/themes/base/jquery.ui.dialog.css b/themes/base/jquery.ui.dialog.css index 2937af9b7..4c54829e2 100644 --- a/themes/base/jquery.ui.dialog.css +++ b/themes/base/jquery.ui.dialog.css @@ -8,7 +8,7 @@ * * http://docs.jquery.com/UI/Dialog#theming */ -.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } +.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index c1ac7bc9e..93a49cfd6 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -19,7 +19,7 @@ */ (function( $, undefined ) { -var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ", +var uiDialogClasses = "ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ", sizeRelatedOptions = { buttons: true, height: true, @@ -67,10 +67,8 @@ $.widget("ui.dialog", { }, resizable: true, show: null, - stack: true, title: "", - width: 300, - zIndex: 1000 + width: 300 }, _create: function() { @@ -96,11 +94,7 @@ $.widget("ui.dialog", { uiDialog = ( this.uiDialog = $( "
    " ) ) .addClass( uiDialogClasses + options.dialogClass ) - .css({ - display: "none", - outline: 0, // TODO: move to stylesheet - zIndex: options.zIndex - }) + .hide() // setting tabIndex makes the div focusable .attr( "tabIndex", -1) .keydown(function( event ) { @@ -111,9 +105,9 @@ $.widget("ui.dialog", { } }) .mousedown(function( event ) { - that.moveToTop( false, event ); + that.moveToTop( event ); }) - .appendTo( "body" ); + .appendTo( this.document[ 0 ].body ); this.element .show() @@ -238,8 +232,7 @@ $.widget("ui.dialog", { }, close: function( event ) { - var that = this, - maxZ, thisZ; + var that = this; if ( !this._isOpen ) { return; @@ -264,22 +257,6 @@ $.widget("ui.dialog", { this._trigger( "close", event ); } - $.ui.dialog.overlay.resize(); - - // adjust the maxZ to allow other modal dialogs to continue to work (see #4309) - if ( this.options.modal ) { - maxZ = 0; - $( ".ui-dialog" ).each(function() { - if ( this !== that.uiDialog[0] ) { - thisZ = $( this ).css( "z-index" ); - if ( !isNaN( thisZ ) ) { - maxZ = Math.max( maxZ, thisZ ); - } - } - }); - $.ui.dialog.maxZ = maxZ; - } - return this; }, @@ -287,39 +264,11 @@ $.widget("ui.dialog", { return this._isOpen; }, - // the force parameter allows us to move modal dialogs to their correct - // position on open - moveToTop: function( force, event ) { - var options = this.options, - saveScroll; - - if ( ( options.modal && !force ) || - ( !options.stack && !options.modal ) ) { - return this._trigger( "focus", event ); - } - - if ( options.zIndex > $.ui.dialog.maxZ ) { - $.ui.dialog.maxZ = options.zIndex; - } - if ( this.overlay ) { - $.ui.dialog.maxZ += 1; - $.ui.dialog.overlay.maxZ = $.ui.dialog.maxZ; - this.overlay.$el.css( "z-index", $.ui.dialog.overlay.maxZ ); + moveToTop: function( event, silent ) { + var moved = this.uiDialog.nextAll( ":visible" ).insertBefore( this.uiDialog ); + if ( !silent && moved.length ) { + this._trigger( "focus", event ); } - - // Save and then restore scroll - // Opera 9.5+ resets when parent z-index is changed. - // http://bugs.jqueryui.com/ticket/3193 - saveScroll = { - scrollTop: this.element.scrollTop(), - scrollLeft: this.element.scrollLeft() - }; - $.ui.dialog.maxZ += 1; - this.uiDialog.css( "z-index", $.ui.dialog.maxZ ); - this.element.attr( saveScroll ); - this._trigger( "focus", event ); - - return this; }, open: function() { @@ -335,7 +284,8 @@ $.widget("ui.dialog", { this._position( options.position ); uiDialog.show( options.show ); this.overlay = options.modal ? new $.ui.dialog.overlay( this ) : null; - this.moveToTop( true ); + + this.moveToTop( null, true ); // 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 @@ -350,6 +300,7 @@ $.widget("ui.dialog", { this._isOpen = true; this._trigger( "open" ); + this._trigger( "focus" ); return this; }, @@ -421,7 +372,6 @@ $.widget("ui.dialog", { $( this ) .removeClass( "ui-dialog-dragging" ); that._trigger( "dragStop", event, filteredUi( ui ) ); - $.ui.dialog.overlay.resize(); } }); }, @@ -467,7 +417,6 @@ $.widget("ui.dialog", { options.height = $( this ).height(); options.width = $( this ).width(); that._trigger( "resizeStop", event, filteredUi( ui ) ); - $.ui.dialog.overlay.resize(); } }) .css( "position", position ) @@ -674,7 +623,6 @@ $.widget("ui.dialog", { $.extend($.ui.dialog, { uuid: 0, - maxZ: 0, getTitleId: function($el) { var id = $el.attr( "id" ); @@ -694,54 +642,11 @@ $.extend( $.ui.dialog.overlay, { instances: [], // reuse old instances due to IE memory leak with alpha transparency (see #5185) oldInstances: [], - maxZ: 0, - events: $.map( - "focus,mousedown,mouseup,keydown,keypress,click".split( "," ), - function( event ) { - return event + ".dialog-overlay"; - } - ).join( " " ), create: function( dialog ) { - if ( this.instances.length === 0 ) { - // prevent use of anchors and inputs - // we use a setTimeout in case the overlay is created from an - // event that we're going to be cancelling (see #2804) - setTimeout(function() { - // handle $(el).dialog().dialog('close') (see #4065) - if ( $.ui.dialog.overlay.instances.length ) { - $( document ).bind( $.ui.dialog.overlay.events, function( event ) { - // stop events if the z-index of the target is < the z-index of the overlay - // we cannot return true when we don't want to cancel the event (#3523) - if ( $( event.target ).zIndex() < $.ui.dialog.overlay.maxZ ) { - return false; - } - }); - } - }, 1 ); - - // handle window resize - $( window ).bind( "resize.dialog-overlay", $.ui.dialog.overlay.resize ); - } - var $el = ( this.oldInstances.pop() || $( "
    " ).addClass( "ui-widget-overlay" ) ); + var $el = ( this.oldInstances.pop() || $( "
    " ).addClass( "ui-widget-overlay ui-front" ) ); - // allow closing by pressing the escape key - $( document ).bind( "keydown.dialog-overlay", function( event ) { - var instances = $.ui.dialog.overlay.instances; - // only react to the event if we're the top overlay - if ( instances.length !== 0 && instances[ instances.length - 1 ] === $el && - dialog.options.closeOnEscape && !event.isDefaultPrevented() && event.keyCode && - event.keyCode === $.ui.keyCode.ESCAPE ) { - - dialog.close( event ); - event.preventDefault(); - } - }); - - $el.appendTo( document.body ).css({ - width: this.width(), - height: this.height() - }); + $el.appendTo( document.body ); if ( $.fn.bgiframe ) { $el.bgiframe(); @@ -752,8 +657,7 @@ $.extend( $.ui.dialog.overlay, { }, destroy: function( $el ) { - var indexOf = $.inArray( $el, this.instances ), - maxZ = 0; + var indexOf = $.inArray( $el, this.instances ); if ( indexOf !== -1 ) { this.oldInstances.push( this.instances.splice( indexOf, 1 )[ 0 ] ); @@ -763,86 +667,7 @@ $.extend( $.ui.dialog.overlay, { $( [ document, window ] ).unbind( ".dialog-overlay" ); } - $el.height( 0 ).width( 0 ).remove(); - - // adjust the maxZ to allow other modal dialogs to continue to work (see #4309) - $.each( this.instances, function() { - maxZ = Math.max( maxZ, this.css( "z-index" ) ); - }); - this.maxZ = maxZ; - }, - - height: function() { - var scrollHeight, - offsetHeight; - // handle IE - if ( $.ui.ie ) { - scrollHeight = Math.max( - document.documentElement.scrollHeight, - document.body.scrollHeight - ); - offsetHeight = Math.max( - document.documentElement.offsetHeight, - document.body.offsetHeight - ); - - if ( scrollHeight < offsetHeight ) { - return $( window ).height() + "px"; - } else { - return scrollHeight + "px"; - } - // handle "good" browsers - } else { - return $( document ).height() + "px"; - } - }, - - width: function() { - var scrollWidth, - offsetWidth; - // handle IE - if ( $.ui.ie ) { - scrollWidth = Math.max( - document.documentElement.scrollWidth, - document.body.scrollWidth - ); - offsetWidth = Math.max( - document.documentElement.offsetWidth, - document.body.offsetWidth - ); - - if ( scrollWidth < offsetWidth ) { - return $( window ).width() + "px"; - } else { - return scrollWidth + "px"; - } - // handle "good" browsers - } else { - return $( document ).width() + "px"; - } - }, - - resize: function() { - /* If the dialog is draggable and the user drags it past the - * right edge of the window, the document becomes wider so we - * need to stretch the overlay. If the user then drags the - * dialog back to the left, the document will become narrower, - * so we need to shrink the overlay to the appropriate size. - * This is handled by shrinking the overlay before setting it - * to the full document size. - */ - var $overlays = $( [] ); - $.each( $.ui.dialog.overlay.instances, function() { - $overlays = $overlays.add( this ); - }); - - $overlays.css({ - width: 0, - height: 0 - }).css({ - width: $.ui.dialog.overlay.width(), - height: $.ui.dialog.overlay.height() - }); + $el.remove(); } }); -- cgit v1.2.3 From 2a2a2c017c4395799ec07666f4ca14e078b52b5b Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Mon, 22 Oct 2012 20:33:15 -0400 Subject: Dialog: Prevent dialog form losing focus (or move it back in IE <= 8). --- tests/visual/dialog/complex-dialogs.html | 2 +- ui/jquery.ui.dialog.js | 23 +++++++++++++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) (limited to 'tests/visual') diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html index 556336d00..634bfb3d6 100644 --- a/tests/visual/dialog/complex-dialogs.html +++ b/tests/visual/dialog/complex-dialogs.html @@ -30,7 +30,7 @@ var datepickerDialog = $( "#dialog-datepicker" ).dialog({ autoOpen: false, - modal: true, + modal: true }), autocompleteDialog = $( "#dialog-autocomplete" ).dialog({ diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 93a49cfd6..2b9846b3a 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -256,8 +256,6 @@ $.widget("ui.dialog", { this.uiDialog.hide(); this._trigger( "close", event ); } - - return this; }, isOpen: function() { @@ -305,6 +303,23 @@ $.widget("ui.dialog", { return this; }, + _keepFocus: function( event ) { + function checkFocus() { + var activeElement = this.document[ 0 ].activeElement, + isActive = this.uiDialog[ 0 ] === activeElement || + $.contains( this.uiDialog[ 0 ], activeElement ); + if ( !isActive ) { + this.uiDialog.focus(); + } + } + event.preventDefault(); + checkFocus.call( this ); + // support: IE + // IE <= 8 doesn't prevent moving focus even with event.preventDefault() + // so we check again later + this._delay( checkFocus ); + }, + _createButtons: function( buttons ) { var that = this, hasButtons = false; @@ -648,6 +663,10 @@ $.extend( $.ui.dialog.overlay, { $el.appendTo( document.body ); + $el.bind( "mousedown", function( event ) { + dialog._keepFocus( event ); + }); + if ( $.fn.bgiframe ) { $el.bgiframe(); } -- cgit v1.2.3 From 14691ae6feea2732ec5aeae57b4275aa0e4d1beb Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Tue, 23 Oct 2012 10:31:10 -0400 Subject: Dialog: Save the active element that opened the dialog and restore focus to that. Fixes #8730 - Dialog: Restore focus to opener. --- tests/visual/dialog/complex-dialogs.html | 18 ++++++++++++------ ui/jquery.ui.dialog.js | 9 +++++++++ 2 files changed, 21 insertions(+), 6 deletions(-) (limited to 'tests/visual') diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html index 634bfb3d6..264787185 100644 --- a/tests/visual/dialog/complex-dialogs.html +++ b/tests/visual/dialog/complex-dialogs.html @@ -22,13 +22,13 @@ - diff --git a/tests/unit/position/position_deprecated.html b/tests/unit/position/position_deprecated.html deleted file mode 100644 index 84aae61f8..000000000 --- a/tests/unit/position/position_deprecated.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - jQuery UI Position Test Suite - - - - - - - - - - - - - - - - -
    - - - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    - -
    -
    -
    - -
    -
    -
    -
    - - - diff --git a/tests/unit/position/position_deprecated.js b/tests/unit/position/position_deprecated.js deleted file mode 100644 index 789d4e608..000000000 --- a/tests/unit/position/position_deprecated.js +++ /dev/null @@ -1,33 +0,0 @@ -(function( $ ) { - -test( "offset", function() { - expect( 3 ); - $( "#elx" ).position({ - my: "left top", - at: "left bottom", - of: "#parentx", - offset: "10", - collision: "none" - }); - deepEqual( $( "#elx" ).offset(), { top: 70, left: 50 }, "single value" ); - - $( "#elx" ).position({ - my: "left top", - at: "left bottom", - of: "#parentx", - offset: "5 -3", - collision: "none" - }); - deepEqual( $( "#elx" ).offset(), { top: 57, left: 45 }, "two values" ); - - $( "#elx" ).position({ - my: "left top", - at: "left bottom", - of: "#parentx", - offset: "5px -3px", - collision: "none" - }); - deepEqual( $( "#elx" ).offset(), { top: 57, left: 45 }, "with units" ); -}); - -}( jQuery ) ); diff --git a/tests/unit/subsuite.js b/tests/unit/subsuite.js index b583bbd75..148f35b1e 100644 --- a/tests/unit/subsuite.js +++ b/tests/unit/subsuite.js @@ -7,7 +7,7 @@ var versions = [ "git" ], additionalTests = { - position: [ "position_deprecated.html" ] + // component: [ "other_test.html" ] }; window.testAllVersions = function( widget ) { diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html index fe1f04e5b..fb3bf00fd 100644 --- a/tests/visual/position/position_feedback.html +++ b/tests/visual/position/position_feedback.html @@ -55,25 +55,24 @@ }); element.width( 150 ); - $( document ).on( "mousemove", function( event ) { - var base = { + function positionWithOffset( horizontal, vertical ) { + return { my: "left top", - at: "left top", + at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " + + "top" + (vertical < 0 ? vertical : "+" + vertical), of: target, using: using }; - element.position( $.extend({ - offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top) - }, base )); - oppositeElement.position( $.extend({ - offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)) - }, base )); - leftElement.position( $.extend({ - offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top)) - }, base )); - rightElement.position( $.extend({ - offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top)) - }, base) ); + }; + $( document ).on( "mousemove", function( event ) { + element.position( positionWithOffset( + event.pageX - targetOffset.left, event.pageY - targetOffset.top ) ); + oppositeElement.position( positionWithOffset( + -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) ); + leftElement.position( positionWithOffset( + -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) ); + rightElement.position( positionWithOffset( + 0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) ); }); }); diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 598af0ee8..706ed5091 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -66,8 +66,7 @@ tooltipClass: "ui-state-highlight", position: { my: "center top", - at: "center bottom", - offset: "0 10" + at: "center bottom+10" } }); @@ -86,8 +85,7 @@ $( "#buttons" ).tooltip({ position: { my: "center bottom", - at: "center top", - offset: "0 -5" + at: "center top-5" } }); diff --git a/ui/jquery.ui.position.js b/ui/jquery.ui.position.js index 5b595a8c0..edbb0f6ff 100644 --- a/ui/jquery.ui.position.js +++ b/ui/jquery.ui.position.js @@ -478,40 +478,4 @@ $.ui.position = { testElementParent.removeChild( testElement ); })(); -// DEPRECATED -if ( $.uiBackCompat !== false ) { - // offset option - (function( $ ) { - var _position = $.fn.position; - $.fn.position = function( options ) { - if ( !options || !options.offset ) { - return _position.call( this, options ); - } - var offset = options.offset.split( " " ), - at = options.at.split( " " ); - if ( offset.length === 1 ) { - offset[ 1 ] = offset[ 0 ]; - } - if ( /^\d/.test( offset[ 0 ] ) ) { - offset[ 0 ] = "+" + offset[ 0 ]; - } - if ( /^\d/.test( offset[ 1 ] ) ) { - offset[ 1 ] = "+" + offset[ 1 ]; - } - if ( at.length === 1 ) { - if ( /left|center|right/.test( at[ 0 ] ) ) { - at[ 1 ] = "center"; - } else { - at[ 1 ] = at[ 0 ]; - at[ 0 ] = "center"; - } - } - return _position.call( this, $.extend( options, { - at: at[ 0 ] + offset[ 0 ] + " " + at[ 1 ] + offset[ 1 ], - offset: undefined - } ) ); - }; - }( jQuery ) ); -} - }( jQuery ) ); -- cgit v1.2.3 From 8251440d78c68f41bfdc7324874f50909b6571a9 Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Thu, 25 Oct 2012 20:47:05 -0400 Subject: Dialog: Visual test page for animated modal dialog --- tests/visual/dialog/animated.html | 53 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 tests/visual/dialog/animated.html (limited to 'tests/visual') diff --git a/tests/visual/dialog/animated.html b/tests/visual/dialog/animated.html new file mode 100644 index 000000000..2a4c38d2e --- /dev/null +++ b/tests/visual/dialog/animated.html @@ -0,0 +1,53 @@ + + + + + Dialog Visual Test + + + + + + + + + + + + + + + + + +

    WHAT: A animated modal dialog, using blind effect to show, explode to hide.

    +

    EXPECTED: Dialog shows up on top of the overlay and stays there during and after the animation. Focus is set to the input inside the dialog and stays there after the animation finishes.

    + +
    +

    Please enter password to continue.

    + +
    + + + + + -- cgit v1.2.3 From 039ee746d3eaeeaa4ad92ecd8ebf4e6fcd11768c Mon Sep 17 00:00:00 2001 From: Jörn Zaefferer Date: Thu, 25 Oct 2012 20:47:22 -0400 Subject: Dialog: Visual test page for modal form dialogs --- tests/visual/dialog/form.html | 70 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 tests/visual/dialog/form.html (limited to 'tests/visual') diff --git a/tests/visual/dialog/form.html b/tests/visual/dialog/form.html new file mode 100644 index 000000000..c974a500a --- /dev/null +++ b/tests/visual/dialog/form.html @@ -0,0 +1,70 @@ + + + + + Dialog Visual Test + + + + + + + + + + + + + + + + + + +

    WHAT: A modal dialog containing form fields, with groups to describe each section. A second modal dialog with just an input and some text markup.

    +

    EXPECTED: Dialog shows up, screenreader reads the dialog's title, the word "dialog" (or equivalent), the text before the first input (description of the first section) and the label of the first, focused input. When tabbing to the next group, the screenreader should announce the description of that group, along with the label of the focused field.

    +

    For the second dialog, the behaviour should be similar, except that the whole content is read as the description of the dialog, likely causing the input's label to be read twice.

    +

    NOTE: Using fieldset with legend seems to have the same result as using role="group" and aria-describedby. The latter needs an id-attribute, offers more flexibilty in markup order and has no built-in styling.

    + +
    +
    + Please share some personal information + + +
    +
    +

    Some more (optional) information

    + +
    +
    + + + +
    +

    Please enter password to continue.

    + +
    + + + + + -- cgit v1.2.3 From 68cab60fa758b34c024742daa9dbc3e6bf6a0521 Mon Sep 17 00:00:00 2001 From: Scott González Date: Fri, 26 Oct 2012 10:53:17 -0400 Subject: Removed bgiframe. --- demos/dialog/animated.html | 1 - demos/dialog/default.html | 1 - demos/dialog/modal-confirmation.html | 1 - demos/dialog/modal-form.html | 1 - demos/dialog/modal-message.html | 1 - demos/dialog/modal.html | 1 - external/jquery.bgiframe-2.1.2.js | 39 -------------------------------- tests/unit/dialog/dialog.html | 1 - tests/visual/dialog/animated.html | 1 - tests/visual/dialog/complex-dialogs.html | 1 - tests/visual/dialog/form.html | 1 - tests/visual/dialog/performance.html | 1 - ui/jquery.ui.autocomplete.js | 4 ---- ui/jquery.ui.dialog.js | 8 ------- ui/jquery.ui.position.js | 4 ---- ui/jquery.ui.tooltip.js | 3 --- 16 files changed, 69 deletions(-) delete mode 100644 external/jquery.bgiframe-2.1.2.js (limited to 'tests/visual') diff --git a/demos/dialog/animated.html b/demos/dialog/animated.html index 808d0e926..92d7b642d 100644 --- a/demos/dialog/animated.html +++ b/demos/dialog/animated.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Animation - diff --git a/demos/dialog/default.html b/demos/dialog/default.html index 5dcb1a05c..19cf912e2 100644 --- a/demos/dialog/default.html +++ b/demos/dialog/default.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Default functionality - diff --git a/demos/dialog/modal-confirmation.html b/demos/dialog/modal-confirmation.html index cca3b296d..b9bf6396f 100644 --- a/demos/dialog/modal-confirmation.html +++ b/demos/dialog/modal-confirmation.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Modal confirmation - diff --git a/demos/dialog/modal-form.html b/demos/dialog/modal-form.html index 48452f862..1c0cd6fc3 100644 --- a/demos/dialog/modal-form.html +++ b/demos/dialog/modal-form.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Modal form - diff --git a/demos/dialog/modal-message.html b/demos/dialog/modal-message.html index d44331017..3c877b26e 100644 --- a/demos/dialog/modal-message.html +++ b/demos/dialog/modal-message.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Modal message - diff --git a/demos/dialog/modal.html b/demos/dialog/modal.html index 2b1ac2574..9bb6d95b2 100644 --- a/demos/dialog/modal.html +++ b/demos/dialog/modal.html @@ -5,7 +5,6 @@ jQuery UI Dialog - Basic modal - diff --git a/external/jquery.bgiframe-2.1.2.js b/external/jquery.bgiframe-2.1.2.js deleted file mode 100644 index 5cd38bb1d..000000000 --- a/external/jquery.bgiframe-2.1.2.js +++ /dev/null @@ -1,39 +0,0 @@ -/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) - * Licensed under the MIT License (LICENSE.txt). - * - * Version 2.1.2 - */ - -(function($){ - -$.fn.bgiframe = ($.browser.msie && /msie 6\.0/i.test(navigator.userAgent) ? function(s) { - s = $.extend({ - top : 'auto', // auto == .currentStyle.borderTopWidth - left : 'auto', // auto == .currentStyle.borderLeftWidth - width : 'auto', // auto == offsetWidth - height : 'auto', // auto == offsetHeight - opacity : true, - src : 'javascript:false;' - }, s); - var html = '