From 3c258bfa3ceab51b7e4c847f1196bd64f6c40cee Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Wed, 19 Oct 2011 11:41:33 +0200 Subject: 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). --- ui/jquery.ui.menu.js | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) (limited to 'ui/jquery.ui.menu.js') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 944e47b7c..f2f758d96 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -24,7 +24,8 @@ $.widget( "ui.menu", { position: { my: "left top", at: "right top" - } + }, + trigger: null }, _create: function() { this.activeMenu = this.element; @@ -39,6 +40,16 @@ $.widget( "ui.menu", { 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 ) { @@ -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 (sub)menus + if ( this.options.trigger ) { + this.element.popup( "destroy" ); + } this.element .removeAttr( "aria-activedescendant" ) .find( ".ui-menu" ) @@ -508,6 +533,10 @@ $.widget( "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 ); } }); -- cgit v1.2.3 From a0856efef3c392d413aa6cd9bd084dc601a337c6 Mon Sep 17 00:00:00 2001 From: Scott González Date: Thu, 20 Oct 2011 16:57:47 -0400 Subject: Widget: Added window and document properties. Fixes #7801 - Widget: Add document and window properties. --- ui/jquery.ui.autocomplete.js | 11 +++++------ ui/jquery.ui.button.js | 4 ++-- ui/jquery.ui.dialog.js | 7 +++---- ui/jquery.ui.menu.js | 4 ++-- ui/jquery.ui.popup.js | 2 +- ui/jquery.ui.spinner.js | 4 ++-- ui/jquery.ui.tooltip.js | 4 ++-- ui/jquery.ui.widget.js | 2 ++ 8 files changed, 19 insertions(+), 19 deletions(-) (limited to 'ui/jquery.ui.menu.js') diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index ab2edfdff..5dda7d970 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -47,7 +47,6 @@ $.widget( "ui.autocomplete", { _create: function() { var self = this, - doc = this.element[ 0 ].ownerDocument, // Some browsers only repeat keydown events, not keypress events, // so we use the suppressKeyPress flag to determine if we've already // handled the keydown event. #7269 @@ -197,7 +196,7 @@ $.widget( "ui.autocomplete", { }; this.menu = $( "" ) .addClass( "ui-autocomplete" ) - .appendTo( $( this.options.appendTo || "body", doc )[0] ) + .appendTo( this.document.find( this.options.appendTo || "body" )[0] ) // prevent the close-on-blur in case of a "slow" click on the menu (long mousedown) .mousedown(function( event ) { // clicking on the scrollbar causes focus to shift to the body @@ -207,7 +206,7 @@ $.widget( "ui.autocomplete", { var menuElement = self.menu.element[ 0 ]; if ( !$( event.target ).closest( ".ui-menu-item" ).length ) { setTimeout(function() { - $( document ).one( 'mousedown', function( event ) { + self.document.one( 'mousedown', function( event ) { if ( event.target !== self.element[ 0 ] && event.target !== menuElement && !$.contains( menuElement, event.target ) ) { @@ -239,7 +238,7 @@ $.widget( "ui.autocomplete", { previous = self.previous; // only trigger when focus was lost (click on menu) - if ( self.element[0] !== doc.activeElement ) { + if ( self.element[0] !== self.document[0].activeElement ) { self.element.focus(); self.previous = previous; // #6109 - IE triggers two focus events and the second @@ -273,7 +272,7 @@ $.widget( "ui.autocomplete", { // turning off autocomplete prevents the browser from remembering the // value when navigating through history, so we re-enable autocomplete // if the page is unloaded before the widget is destroyed. #7790 - this._bind( doc.defaultView, { + this._bind( this.window, { beforeunload: function() { this.element.removeAttr( "autocomplete" ); } @@ -297,7 +296,7 @@ $.widget( "ui.autocomplete", { this._initSource(); } if ( key === "appendTo" ) { - this.menu.element.appendTo( $( value || "body", this.element[0].ownerDocument )[0] ); + this.menu.element.appendTo( this.document.find( value || "body" )[0] ); } if ( key === "disabled" && value && this.xhr ) { this.xhr.abort(); diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js index 63bd1fc73..20eb2ca89 100644 --- a/ui/jquery.ui.button.js +++ b/ui/jquery.ui.button.js @@ -174,7 +174,7 @@ $.widget( "ui.button", { } $( this ).addClass( "ui-state-active" ); lastActive = this; - $( document ).one( "mouseup", function() { + self.document.one( "mouseup", function() { lastActive = null; }); }) @@ -319,7 +319,7 @@ $.widget( "ui.button", { return; } var buttonElement = this.buttonElement.removeClass( typeClasses ), - buttonText = $( "", this.element[0].ownerDocument ) + buttonText = $( "", this.document[0] ) .addClass( "ui-button-text" ) .html( this.options.label ) .appendTo( buttonElement.empty() ) diff --git a/ui/jquery.ui.dialog.js b/ui/jquery.ui.dialog.js index 46320426a..9c9a9b6fc 100644 --- a/ui/jquery.ui.dialog.js +++ b/ui/jquery.ui.dialog.js @@ -372,8 +372,7 @@ $.widget("ui.dialog", { _makeDraggable: function() { var self = this, - options = self.options, - doc = $( document ); + options = self.options; function filteredUi( ui ) { return { @@ -396,8 +395,8 @@ $.widget("ui.dialog", { }, stop: function( event, ui ) { options.position = [ - ui.position.left - doc.scrollLeft(), - ui.position.top - doc.scrollTop() + ui.position.left - self.document.scrollLeft(), + ui.position.top - self.document.scrollTop() ]; $( this ) .removeClass( "ui-dialog-dragging" ); diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index f2f758d96..bf36a77fe 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -85,7 +85,7 @@ $.widget( "ui.menu", { }, blur: function( event ) { this._delay( function() { - if ( ! $.contains( this.element[0], document.activeElement ) ) { + if ( ! $.contains( this.element[0], this.document[0].activeElement ) ) { this.collapseAll( event ); } }, 0); @@ -207,7 +207,7 @@ $.widget( "ui.menu", { } }); - this._bind( document, { + this._bind( this.document, { click: function( event ) { if ( !$( event.target ).closest( ".ui-menu" ).length ) { this.collapseAll( event ); diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js index 70bf84be0..f6585b761 100644 --- a/ui/jquery.ui.popup.js +++ b/ui/jquery.ui.popup.js @@ -187,7 +187,7 @@ $.widget( "ui.popup", { } }); - this._bind(document, { + this._bind( this.document, { click: function( event ) { if ( this.isOpen && !$( event.target ).closest( this.element.add( this.options.trigger ) ).length ) { this.close( event ); diff --git a/ui/jquery.ui.spinner.js b/ui/jquery.ui.spinner.js index 7fc291c00..9c554b2df 100644 --- a/ui/jquery.ui.spinner.js +++ b/ui/jquery.ui.spinner.js @@ -53,7 +53,7 @@ $.widget( "ui.spinner", { // turning off autocomplete prevents the browser from remembering the // value when navigating through history, so we re-enable autocomplete // if the page is unloaded before the widget is destroyed. #7790 - this._bind( this.element[0].ownerDocument.defaultView, { + this._bind( this.window, { beforeunload: function() { this.element.removeAttr( "autocomplete" ); } @@ -112,7 +112,7 @@ $.widget( "ui.spinner", { "mousedown .ui-spinner-button": function( event ) { // ensure focus is on (or stays on) the text field event.preventDefault(); - if ( document.activeElement !== this.element[ 0 ] ) { + if ( this.document[0].activeElement !== this.element[ 0 ] ) { this.element.focus(); } diff --git a/ui/jquery.ui.tooltip.js b/ui/jquery.ui.tooltip.js index 2f8d92969..35b6f9b50 100644 --- a/ui/jquery.ui.tooltip.js +++ b/ui/jquery.ui.tooltip.js @@ -166,7 +166,7 @@ $.widget( "ui.tooltip", { // 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] ) { + if ( !force && this.document[0].activeElement === target[0] ) { return; } @@ -200,7 +200,7 @@ $.widget( "ui.tooltip", { $( "
" ) .addClass( "ui-tooltip-content" ) .appendTo( tooltip ); - tooltip.appendTo( document.body ); + tooltip.appendTo( this.document[0].body ); if ( $.fn.bgiframe ) { tooltip.bgiframe(); } diff --git a/ui/jquery.ui.widget.js b/ui/jquery.ui.widget.js index b78530dca..4b4d41fb1 100644 --- a/ui/jquery.ui.widget.js +++ b/ui/jquery.ui.widget.js @@ -195,6 +195,8 @@ $.Widget.prototype = { if ( element !== this ) { $.data( element, this.widgetName, this ); this._bind({ remove: "destroy" }); + this.document = $( element.ownerDocument ); + this.window = $( this.document[0].defaultView ); } this._create(); -- cgit v1.2.3 From 74a3f2ce0897ce8bdcac2acc997e68e3e8603121 Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 23 Nov 2011 22:37:55 -0600 Subject: Menu: Move mousedown handler into _bind and fix focusing of the Menu after click. Fixes focus issues with Selectmenu and Autocomplete. --- ui/jquery.ui.menu.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) (limited to 'ui/jquery.ui.menu.js') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index bf36a77fe..4fe859f4e 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -40,16 +40,6 @@ $.widget( "ui.menu", { 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 ) { @@ -58,6 +48,11 @@ $.widget( "ui.menu", { } }, this)); this._bind({ + // Prevent focus from sticking to links inside menu after clicking + // them (focus should always stay on UL during navigation). + "mousedown .ui-menu-item > a": function( event ) { + event.preventDefault(); + }, "click .ui-menu-item:has(a)": function( event ) { event.stopImmediatePropagation(); var target = $( event.currentTarget ); @@ -66,6 +61,8 @@ $.widget( "ui.menu", { this.focus( event, target ); } this.select( event ); + // Redirect focus to the menu. + this.element.focus(); }, "mouseover .ui-menu-item": function( event ) { event.stopImmediatePropagation(); -- cgit v1.2.3 From afdc577e9c26d6571e934a8fef892f7fbe3619c6 Mon Sep 17 00:00:00 2001 From: kborchers Date: Wed, 30 Nov 2011 08:39:10 -0600 Subject: Menu: Remove the isScrolling check which nolonger seems necessary. --- ui/jquery.ui.menu.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) (limited to 'ui/jquery.ui.menu.js') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 4fe859f4e..77190189e 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -29,7 +29,6 @@ $.widget( "ui.menu", { }, _create: function() { this.activeMenu = this.element; - this.isScrolling = false; this.menuId = this.element.attr( "id" ) || "ui-menu-" + idIncrement++; if ( this.element.find( ".ui-icon" ).length ) { this.element.addClass( "ui-menu-icons" ); @@ -66,13 +65,10 @@ $.widget( "ui.menu", { }, "mouseover .ui-menu-item": function( event ) { event.stopImmediatePropagation(); - if ( !this.isScrolling ) { - var target = $( event.currentTarget ); - // Remove ui-state-active class from siblings of the newly focused menu item to avoid a jump caused by adjacent elements both having a class with a border - target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); - this.focus( event, target ); - } - this.isScrolling = false; + var target = $( event.currentTarget ); + // Remove ui-state-active class from siblings of the newly focused menu item to avoid a jump caused by adjacent elements both having a class with a border + target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" ); + this.focus( event, target ); }, "mouseleave": "collapseAll", "mouseleave .ui-menu": "collapseAll", @@ -86,10 +82,6 @@ $.widget( "ui.menu", { this.collapseAll( event ); } }, 0); - }, - scroll: function( event ) { - // Keep track of scrolling to prevent mouseover from firing inadvertently when scrolling the menu - this.isScrolling = true; } }); -- cgit v1.2.3 From ce7918fc73c161ab237f052bad070e34250526be Mon Sep 17 00:00:00 2001 From: kborchers Date: Thu, 1 Dec 2011 12:39:16 -0600 Subject: Menu: Change items option to menus --- ui/jquery.ui.menu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/jquery.ui.menu.js') diff --git a/ui/jquery.ui.menu.js b/ui/jquery.ui.menu.js index 77190189e..0263cff65 100644 --- a/ui/jquery.ui.menu.js +++ b/ui/jquery.ui.menu.js @@ -20,7 +20,7 @@ $.widget( "ui.menu", { defaultElement: "
    ", delay: 150, options: { - items: "ul", + menus: "ul", position: { my: "left top", at: "right top" @@ -250,7 +250,7 @@ $.widget( "ui.menu", { refresh: function() { // initialize nested menus - var submenus = this.element.find( this.options.items + ":not( .ui-menu )" ) + var submenus = this.element.find( this.options.menus + ":not( .ui-menu )" ) .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" ) .attr( "role", "menu" ) .hide() -- cgit v1.2.3