library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Rewrite popup/menu interaction to make popup managed by menu (adds trigger option to menu). Makes popup agnostic of menu and allows datepicker to use popup (soon).

Browse Source
This commit is contained in:
Hans Hillen 2011-10-19 11:41:33 +02:00 committed by Jörn Zaefferer
parent bd71f24f5d
commit 3c258bfa3c
4 changed files with 157 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
demos/menu/contextmenu.html
View File

@ -14,17 +14,17 @@
<link href="../demos.css" rel="stylesheet" /> <link href="../demos.css" rel="stylesheet" />
<script> <script>
$(function() { $(function() {
$(".demo button").button({ var btn = $(".demo button").button({
icons: { icons: {
primary: "ui-icon-home", primary: "ui-icon-home",
secondary: "ui-icon-triangle-1-s" secondary: "ui-icon-triangle-1-s"
} }
}).next().menu({ });
$("#cities").menu({
select: function(event, ui) { select: function(event, ui) {
$(this).hide();
$("#log").append("<div>Selected " + ui.item.text() + "</div>"); $("#log").append("<div>Selected " + ui.item.text() + "</div>");
} },
}).popup(); trigger : btn});
}); });
</script> </script>
<style> <style>
@ -36,7 +36,7 @@
<div class="demo"> <div class="demo">
<button>Select a city</button> <button>Select a city</button>
<ul> <ul id="cities">
<li><a href="#Amsterdam">Amsterdam</a></li> <li><a href="#Amsterdam">Amsterdam</a></li>
<li><a href="#Anaheim">Anaheim</a></li> <li><a href="#Anaheim">Anaheim</a></li>
<li><a href="#Cologne">Cologne</a></li> <li><a href="#Cologne">Cologne</a></li>

24
demos/popup/popup-menu.html
View File

@ -16,16 +16,13 @@
function log( msg ) { function log( msg ) {
$( "<div/>" ).text( msg ).appendTo( "#log" ); $( "<div/>" ).text( msg ).appendTo( "#log" );
} }
var selected = { var selected = function( event, ui ) {
select: function( event, ui ) { log( "Selected: " + ui.item.text() );
log( "Selected: " + ui.item.text() ); $(this).popup( "close" );
$(this).popup("close"); }
}
}; $("#button1").button().next().menu( {select: selected, trigger: $("#button1")} );
$("#button1").button()
.next().menu(selected).popup();
$( "#rerun" ) $( "#rerun" )
.button() .button()
.click(function() { .click(function() {
@ -39,10 +36,7 @@
} }
}) })
.next() .next()
.menu(selected) .menu( {select: selected, trigger: $("#select")} )
.popup({
trigger: $("#select")
})
.parent() .parent()
.buttonset({ .buttonset({
items: "button" items: "button"
@ -69,8 +63,8 @@
<li><a href="#">Utrecht</a></li> <li><a href="#">Utrecht</a></li>
<li><a href="#">Zurich</a></li> <li><a href="#">Zurich</a></li>
</ul> </ul>
<div> <div>
<div> <div>
<button id="rerun">Run last action</button> <button id="rerun">Run last action</button>

31
ui/jquery.ui.menu.js vendored
View File

@ -24,7 +24,8 @@ $.widget( "ui.menu", {
position: { position: {
my: "left top", my: "left top",
at: "right top" at: "right top"
} },
trigger: null
}, },
_create: function() { _create: function() {
this.activeMenu = this.element; this.activeMenu = this.element;
@ -39,6 +40,16 @@ $.widget( "ui.menu", {
id: this.menuId, id: this.menuId,
role: "menu" role: "menu"
}) })
// Prevent focus from sticking to links inside menu after clicking
// them (focus should always stay on UL during navigation).
// If the link is clicked, redirect focus to the menu.
// TODO move to _bind below
.bind( "mousedown.menu", function( event ) {
if ( $( event.target).is( "a" ) ) {
event.preventDefault();
$( this ).focus( 1 );
}
})
// need to catch all clicks on disabled menu // need to catch all clicks on disabled menu
// not possible through _bind // not possible through _bind
.bind( "click.menu", $.proxy( function( event ) { .bind( "click.menu", $.proxy( function( event ) {
@ -203,10 +214,24 @@ $.widget( "ui.menu", {
} }
} }
}); });
if ( this.options.trigger ) {
this.element.popup({
trigger: this.options.trigger,
managed: true,
focusPopup: $.proxy( function( event, ui ) {
this.focus( event, this.element.children( ".ui-menu-item" ).first() );
this.element.focus( 1 );
}, this)
});
}
}, },
_destroy: function() { _destroy: function() {
//destroy (sub)menus //destroy (sub)menus
if ( this.options.trigger ) {
this.element.popup( "destroy" );
}
this.element this.element
.removeAttr( "aria-activedescendant" ) .removeAttr( "aria-activedescendant" )
.find( ".ui-menu" ) .find( ".ui-menu" )
@ -508,6 +533,10 @@ $.widget( "ui.menu", {
item: this.active item: this.active
}; };
this.collapseAll( event, true ); this.collapseAll( event, true );
if ( this.options.trigger ) {
$( this.options.trigger ).focus( 1 );
this.element.popup( "close" );
}
this._trigger( "select", event, ui ); this._trigger( "select", event, ui );
} }
}); });

149
ui/jquery.ui.popup.js vendored
View File

@ -14,7 +14,8 @@
*/ */
(function($) { (function($) {
var idIncrement = 0; var idIncrement = 0,
suppressExpandOnFocus = false;
$.widget( "ui.popup", { $.widget( "ui.popup", {
version: "@VERSION", version: "@VERSION",
@ -23,6 +24,8 @@ $.widget( "ui.popup", {
my: "left top", my: "left top",
at: "left bottom" at: "left bottom"
}, },
managed: false,
expandOnFocus: false,
show: { show: {
effect: "slideDown", effect: "slideDown",
duration: "fast" duration: "fast"
@ -43,9 +46,10 @@ $.widget( "ui.popup", {
} }
if ( !this.element.attr( "role" ) ) { if ( !this.element.attr( "role" ) ) {
// TODO alternatives to tooltip are dialog and menu, all three aren't generic popups if ( !this.options.managed ) {
this.element.attr( "role", "dialog" ); this.element.attr( "role", "dialog" );
this.generatedRole = true; this.generatedRole = true;
}
} }
this.options.trigger this.options.trigger
@ -59,37 +63,90 @@ $.widget( "ui.popup", {
this._bind(this.options.trigger, { this._bind(this.options.trigger, {
keydown: function( event ) { keydown: function( event ) {
// prevent space-to-open to scroll the page, only happens for anchor ui.button switch ( event.keyCode ) {
if ( $.ui.button && this.options.trigger.is( "a:ui-button" ) && event.keyCode == $.ui.keyCode.SPACE ) { case $.ui.keyCode.TAB:
event.preventDefault(); // Waiting for close() will make popup hide too late, which breaks tab key behavior
} this.element.hide();
// TODO handle SPACE to open popup? only when not handled by ui.button this.close( event );
if ( event.keyCode == $.ui.keyCode.SPACE && this.options.trigger.is( "a:not(:ui-button)" ) ) { break;
this.options.trigger.trigger( "click", event ); case $.ui.keyCode.ESCAPE:
} if ( this.isOpen ) {
// translate keydown to click this.close( event );
// opens popup and let's tooltip hide itself }
if ( event.keyCode == $.ui.keyCode.DOWN ) { break;
// prevent scrolling case $.ui.keyCode.SPACE:
event.preventDefault(); // prevent space-to-open to scroll the page, only happens for anchor ui.button
this.options.trigger.trigger( "click", event ); // TODO check for $.ui.button before using custom selector, once more below
if ( this.options.trigger.is( "a:ui-button" ) ) {
event.preventDefault();
}
else if (this.options.trigger.is( "a:not(:ui-button)" ) ) {
this.options.trigger.trigger( "click", event );
}
break;
case $.ui.keyCode.DOWN:
case $.ui.keyCode.UP:
// prevent scrolling
event.preventDefault();
var that = this;
clearTimeout( this.closeTimer );
setTimeout(function() {
that.open( event );
that.focusPopup( event );
}, 1);
break;
} }
}, },
click: function( event ) { click: function( event ) {
event.stopPropagation();
event.preventDefault(); event.preventDefault();
},
mousedown: function( event ) {
var noFocus = false;
/* TODO: Determine in which cases focus should stay on the trigger after the popup opens
(should apply for any trigger that has other interaction besides opening the popup, e.g. a text field) */
if ( $( event.target ).is( "input" ) ) {
noFocus = true;
}
if (this.isOpen) { if (this.isOpen) {
// let it propagate to close suppressExpandOnFocus = true;
this.close();
return; return;
} }
this.open( event );
var that = this;
clearTimeout( this.closeTimer ); clearTimeout( this.closeTimer );
this._delay(function() { this._delay(function() {
this.open( event ); if ( !noFocus ) {
that.focusPopup();
}
}, 1); }, 1);
} }
}); });
if ( !$.ui.menu || !this.element.is( ":ui-menu" ) ) { if ( this.options.expandOnFocus ) {
// default use case, wrap tab order in popup this._bind( this.options.trigger, {
focus : function( event ) {
if ( !suppressExpandOnFocus ) {
var that = this;
setTimeout(function() {
if ( !that.isOpen ) {
that.open( event );
}
}, 1);
}
setTimeout(function() {
suppressExpandOnFocus = false;
}, 100);
},
blur: function( event ) {
suppressExpandOnFocus = false;
}
});
}
if ( !this.options.managed ) {
//default use case, wrap tab order in popup
this._bind({ keydown : function( event ) { this._bind({ keydown : function( event ) {
if ( event.keyCode !== $.ui.keyCode.TAB ) { if ( event.keyCode !== $.ui.keyCode.TAB ) {
return; return;
@ -109,21 +166,34 @@ $.widget( "ui.popup", {
} }
this._bind({ this._bind({
// TODO only triggered on element if it can receive focus focusout: function( event ) {
// bind to document instead? var that = this;
// either element itself or a child should be focusable // use a timer to allow click to clear it and letting that
// handle the closing instead of opening again
that.closeTimer = setTimeout( function() {
that.close( event );
}, 100);
},
focusin: function( event ) {
clearTimeout( this.closeTimer );
},
mouseup: function( event ) {
clearTimeout( this.closeTimer );
}
});
this._bind({
keyup: function( event ) { keyup: function( event ) {
if ( event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" ) ) { if ( event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" ) ) {
this.close( event ); this.close( event );
// TODO move this to close()? would allow menu.select to call popup.close, and get focus back to trigger this.focusTrigger();
this.options.trigger.focus();
} }
} }
}); });
this._bind(document, { this._bind(document, {
click: function( event ) { click: function( event ) {
if ( this.isOpen && !$(event.target).closest(".ui-popup").length ) { if ( this.isOpen && !$( event.target ).closest( this.element.add( this.options.trigger ) ).length ) {
this.close( event ); this.close( event );
} }
} }
@ -161,11 +231,14 @@ $.widget( "ui.popup", {
.attr( "aria-expanded", "true" ) .attr( "aria-expanded", "true" )
.position( position ); .position( position );
// can't use custom selector when menu isn't loaded // take trigger out of tab order to allow shift-tab to skip trigger
if ( $.ui.menu && this.element.is( ":ui-menu" ) ) { this.options.trigger.attr( "tabindex", -1 );
this.element.menu( "focus", event, this.element.children( "li" ).first() ); this.isOpen = true;
this.element.focus(); this._trigger( "open", event );
} else { },
focusPopup: function( event ) {
if ( !this.options.managed ) {
// set focus to the first tabbable element in the popup container // set focus to the first tabbable element in the popup container
// if there are no tabbable elements, set focus on the popup itself // if there are no tabbable elements, set focus on the popup itself
var tabbables = this.element.find( ":tabbable" ); var tabbables = this.element.find( ":tabbable" );
@ -179,11 +252,13 @@ $.widget( "ui.popup", {
} }
tabbables.first().focus( 1 ); tabbables.first().focus( 1 );
} }
this._trigger( "focusPopup", event );
},
// take trigger out of tab order to allow shift-tab to skip trigger focusTrigger: function( event ) {
this.options.trigger.attr( "tabindex", -1 ); suppressExpandOnFocus = true;
this.isOpen = true; this.options.trigger.focus();
this._trigger( "open", event ); this._trigger( "focusTrigger", event );
}, },
close: function( event ) { close: function( event ) {