position: {
my: "left top",
at: "right top"
- }
+ },
+ trigger: null
},
_create: function() {
this.activeMenu = this.element;
id: this.menuId,
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
// not possible through _bind
.bind( "click.menu", $.proxy( function( event ) {
}
}
});
+
+ 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 (sub)menus
+ if ( this.options.trigger ) {
+ this.element.popup( "destroy" );
+ }
this.element
.removeAttr( "aria-activedescendant" )
.find( ".ui-menu" )
item: this.active
};
this.collapseAll( event, true );
+ if ( this.options.trigger ) {
+ $( this.options.trigger ).focus( 1 );
+ this.element.popup( "close" );
+ }
this._trigger( "select", event, ui );
}
});
*/
(function($) {
-var idIncrement = 0;
+var idIncrement = 0,
+ suppressExpandOnFocus = false;
$.widget( "ui.popup", {
version: "@VERSION",
my: "left top",
at: "left bottom"
},
+ managed: false,
+ expandOnFocus: false,
show: {
effect: "slideDown",
duration: "fast"
}
if ( !this.element.attr( "role" ) ) {
- // TODO alternatives to tooltip are dialog and menu, all three aren't generic popups
- this.element.attr( "role", "dialog" );
- this.generatedRole = true;
+ if ( !this.options.managed ) {
+ this.element.attr( "role", "dialog" );
+ this.generatedRole = true;
+ }
}
this.options.trigger
this._bind(this.options.trigger, {
keydown: function( event ) {
- // prevent space-to-open to scroll the page, only happens for anchor ui.button
- if ( $.ui.button && this.options.trigger.is( "a:ui-button" ) && event.keyCode == $.ui.keyCode.SPACE ) {
- event.preventDefault();
- }
- // TODO handle SPACE to open popup? only when not handled by ui.button
- if ( event.keyCode == $.ui.keyCode.SPACE && this.options.trigger.is( "a:not(:ui-button)" ) ) {
- this.options.trigger.trigger( "click", event );
- }
- // translate keydown to click
- // opens popup and let's tooltip hide itself
- if ( event.keyCode == $.ui.keyCode.DOWN ) {
- // prevent scrolling
- event.preventDefault();
- this.options.trigger.trigger( "click", event );
+ switch ( event.keyCode ) {
+ case $.ui.keyCode.TAB:
+ // Waiting for close() will make popup hide too late, which breaks tab key behavior
+ this.element.hide();
+ this.close( event );
+ break;
+ case $.ui.keyCode.ESCAPE:
+ if ( this.isOpen ) {
+ this.close( event );
+ }
+ break;
+ case $.ui.keyCode.SPACE:
+ // prevent space-to-open to scroll the page, only happens for anchor ui.button
+ // 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 ) {
+ event.stopPropagation();
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) {
- // let it propagate to close
+ suppressExpandOnFocus = true;
+ this.close();
return;
}
+ this.open( event );
+ var that = this;
clearTimeout( this.closeTimer );
this._delay(function() {
- this.open( event );
+ if ( !noFocus ) {
+ that.focusPopup();
+ }
}, 1);
}
});
- if ( !$.ui.menu || !this.element.is( ":ui-menu" ) ) {
- // default use case, wrap tab order in popup
+ if ( this.options.expandOnFocus ) {
+ 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 ) {
if ( event.keyCode !== $.ui.keyCode.TAB ) {
return;
}
this._bind({
- // TODO only triggered on element if it can receive focus
- // bind to document instead?
- // either element itself or a child should be focusable
+ focusout: function( event ) {
+ var that = this;
+ // 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 ) {
if ( event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" ) ) {
this.close( event );
- // TODO move this to close()? would allow menu.select to call popup.close, and get focus back to trigger
- this.options.trigger.focus();
+ this.focusTrigger();
}
}
});
this._bind(document, {
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 );
}
}
.attr( "aria-expanded", "true" )
.position( position );
- // can't use custom selector when menu isn't loaded
- if ( $.ui.menu && this.element.is( ":ui-menu" ) ) {
- this.element.menu( "focus", event, this.element.children( "li" ).first() );
- this.element.focus();
- } else {
+ // take trigger out of tab order to allow shift-tab to skip trigger
+ this.options.trigger.attr( "tabindex", -1 );
+ this.isOpen = true;
+ this._trigger( "open", event );
+ },
+
+ focusPopup: function( event ) {
+ if ( !this.options.managed ) {
// set focus to the first tabbable element in the popup container
// if there are no tabbable elements, set focus on the popup itself
var tabbables = this.element.find( ":tabbable" );
}
tabbables.first().focus( 1 );
}
+ this._trigger( "focusPopup", event );
+ },
- // take trigger out of tab order to allow shift-tab to skip trigger
- this.options.trigger.attr( "tabindex", -1 );
- this.isOpen = true;
- this._trigger( "open", event );
+ focusTrigger: function( event ) {
+ suppressExpandOnFocus = true;
+ this.options.trigger.focus();
+ this._trigger( "focusTrigger", event );
},
close: function( event ) {
projects / jquery-ui.git / commitdiff