Changeset 16233

Timestamp:

01/06/09 04:40:56 (14 months ago)

Author:

bill

Message:

Defer focusing on a static Menu/MenuBar until user clicks it, or tabs into it. Once user clicks on a Menu/MenuBar, it focuses on it, and then (as before) any mouse movement or keyboard movement (via arrow keys) will change focus. Also (as before), focus is shifted to a context menu immediately when it's displayed.

Separated out CSS classes for indicating that a MenuItem? is mouse hovered (dijitMenuItemHover), and to indicate which MenuItem? is selected/active (dijitMenuItemSelected). Currently they look exactly the same, although that could be changed (including removing the hover effect altogether).

"Selected/active" is in the sense of the selected tab, and is controlled by the mouse or keyboard. Implementation-wise, it means that either the MenuItem? has focus, or focus is on a submenu of that MenuItem?.

Also added dijitMenuPassive/dijitMenuActive class to the Menu/MenuBar domNode so that CSS rules for hover can be customized based on whether or not the menu has focus. Once the menu gets focus the dijitMenuHover effect is disabled in favor of the dijitMenuSelected effect, so that the dijitMenuHover effect won't linger on "File" if user moved the mouse over "File" but then used the keyboard arrows to move to the "Edit" MenuBarItem?. (This is a setting in tundra/nihilo/soria and can be changed if desired.)

Open issue with re-focus on click-execute of a leaf menu item... after executing a menu choice focus ends up nowhere (or maybe on the page itself). Probably should be going to the menubar?

Refs #4634 !strict

Location:

dijit/trunk

Files:

• Menu.js (modified) (9 diffs)
• MenuBar.js (modified) (1 diff)
• tests/test_Menu.html (modified) (6 diffs)
• themes/dijit.css (modified) (2 diffs)
• themes/nihilo/Menu.css (modified) (2 diffs)
• themes/soria/Menu.css (modified) (2 diffs)
• themes/tundra/Menu.css (modified) (3 diffs)

dijit/trunk/Menu.js

@@ -16 +16 @@
         // popupDelay: Integer
         //      number of milliseconds before hovering (without clicking) causes the popup to automatically open.
-        //      set this to -1 to disable automatically opening of submenus.
         popupDelay: 500,
 
@@ -52 +51 @@
 
         onItemHover: function(/*MenuItem*/ item){
-                // summary: Called when cursor is over a MenuItem
-                this.focusChild(item);
-
-                if(this.focusedChild.popup && !this.focusedChild.disabled && !this.hover_timer && this.popupDelay>=0){
-                        this.hover_timer = setTimeout(dojo.hitch(this, "_openPopup"), this.popupDelay);
+                // summary:
+                //              Called when cursor is over a MenuItem.
+
+                // Don't do anything unless user has "activated" the menu by:
+                //              1) clicking it
+                //              2) tabbing into it
+                //              3) opening it from a parent menu (which automatically focuses it)
+                if(this.isActive){
+                        this.focusChild(item);
+        
+                        if(this.focusedChild.popup && !this.focusedChild.disabled && !this.hover_timer){
+                                this.hover_timer = setTimeout(dojo.hitch(this, "_openPopup"), this.popupDelay);
+                        }
                 }
         },
 
         _onChildBlur: function(item){
-                // summary: Close all popups that are open and descendants of this menu
+                // summary:
+                //              Called when a child MenuItem becomes inactive because focus
+                //              has been removed from the MenuItem *and* it's descendant menus.
+
+                item._setSelected(false);
+
+                // Close all popups that are open and descendants of this menu
                 dijit.popup.close(item.popup);
-                item._blur();
                 this._stopPopupTimer();
         },
@@ -69 +81 @@
         onItemUnhover: function(/*MenuItem*/ item){
                 // summary: Callback fires when mouse exits a MenuItem
-                this._stopPopupTimer();
+                if(this.isActive){
+                        this._stopPopupTimer();
+                }
         },
 
@@ -87 +101 @@
                 // summary: user defined function to handle clicks on an item
                 if(item.disabled){ return false; }
+
+                this.focusChild(item);
 
                 if(item.popup){
@@ -149 +165 @@
         },
 
+        _onFocus: function(){
+                // summary:
+                //              Called when this Menu gets focus from:
+                //                      1) clicking it
+                //                      2) tabbing into it
+                //                      3) being opened by a parent menu.
+                //              This is not called just from mouse hover.
+                this.isActive = true;
+                dojo.addClass(this.domNode, "dijitMenuActive");
+                dojo.removeClass(this.domNode, "dijitMenuPassive");
+                this.inherited(arguments);
+        },
+        
         _onBlur: function(){
+                // summary:
+                //              Called when focus is moved away from this Menu and it's submenus
+                this.isActive = false;
+                dojo.removeClass(this.domNode, "dijitMenuActive");
+                dojo.addClass(this.domNode, "dijitMenuPassive");
+
                 // If user blurs/clicks away from a MenuBar (or always visible Menu), then close all popped up submenus etc.
                 this.onClose();
+
                 this.inherited(arguments);
         },
@@ -177 +213 @@
 
         templateString:
-                        '<table class="dijit dijitMenu dijitReset dijitMenuTable" waiRole="menu" tabIndex="${tabIndex}" dojoAttachEvent="onkeypress:_onKeyPress">' +
+                        '<table class="dijit dijitMenu dijitMenuPassive dijitReset dijitMenuTable" waiRole="menu" tabIndex="${tabIndex}" dojoAttachEvent="onkeypress:_onKeyPress">' +
                                 '<tbody class="dijitReset" dojoAttachPoint="containerNode"></tbody>'+
                         '</table>',
@@ -429 +465 @@
         _onHover: function(){
                 // summary: callback when mouse is moved onto menu item
+                dojo.addClass(this.domNode, 'dijitMenuItemHover');
                 this.getParent().onItemHover(this);
         },
 
         _onUnhover: function(){
-                // summary: callback when mouse is moved off of menu item
+                // summary:
+                //              Callback when mouse is moved off of menu item,
+                //              possibly to a child menu, or maybe to a sibling
+                //              menuitem or somewhere else entirely.
 
                 // if we are unhovering the currently selected item
                 // then unselect it
+                dojo.removeClass(this.domNode, 'dijitMenuItemHover');
                 this.getParent().onItemUnhover(this);
         },
@@ -450 +491 @@
 
         focus: function(){
-                dojo.addClass(this.domNode, 'dijitMenuItemHover');
+                // summary:
+                //              Focus on this MenuItem
                 try{
                         dijit.focus(this.focusNode);
@@ -458 +500 @@
         },
 
-        _blur: function(){
-                dojo.removeClass(this.domNode, 'dijitMenuItemHover');
+        _onFocus: function(){
+                this._setSelected(true);
+        },
+
+        _setSelected: function(selected){
+                // summary:
+                //              Indicate that this node is the currently selected one
+
+                /***
+                 * TODO: remove this method and calls to it, when _onBlur() is working for MenuItem.
+                 * Currently _onBlur() gets called when focus is moved from the MenuItem to a child menu.
+                 * That's not supposed to happen, but the problem is:
+                 * In order to allow dijit.popup's getTopPopup()  work,a sub menu's popupParent
+                 * points to the parent Menu, bypassing the parent MenuItem... thus the
+                 * MenuItem is not in the chain of active widgets and gets a premature call to
+                 * _onBlur()
+                 */
+                
+                dojo.toggleClass(this.domNode, "dijitMenuItemSelected", selected);
         },
 

dijit/trunk/MenuBar.js

@@ -7 +7 @@
         //              A menu bar, listing menu choices horizontally, like the "File" menu in most desktop applications
 
-        templateString: '<div class="dijitMenuBar" dojoAttachPoint="containerNode"  tabIndex="${tabIndex}" dojoAttachEvent="onkeypress: _onKeyPress"></div>',
+        templateString: '<div class="dijitMenuBar dijitMenuPassive" dojoAttachPoint="containerNode"  tabIndex="${tabIndex}" dojoAttachEvent="onkeypress: _onKeyPress"></div>',
 
         _isMenuBar: true,

dijit/trunk/tests/test_Menu.html

@@ -91 +91 @@
         }
         dojo.addOnLoad(function(){
-            // need to explicitly update our buttons states, otherwise the 
-            // browser will remember the last states of them before reloading 
-            // (so a programmatic menu is created, reload, and "the create 
-            // programmatic menu" button is still in disabled state)
-            updateButtons(false);
+                // need to explicitly update our buttons states, otherwise the 
+                // browser will remember the last states of them before reloading 
+                // (so a programmatic menu is created, reload, and "the create 
+                // programmatic menu" button is still in disabled state)
+                updateButtons(false);
         });
     </script>
@@ -192 +192 @@
                                         <div dojoType="dijit.MenuBarItem">
                                                 <span>File</span>
-                                                <div dojoType="dijit.Menu">
+                                                <div dojoType="dijit.Menu" id="fileMenu">
                                                         <div dojoType="dijit.MenuItem">New</div>
                                                         <div dojoType="dijit.MenuItem">Open</div>
@@ -202 +202 @@
                                         <div dojoType="dijit.MenuBarItem">
                                                 <span>Edit</span>
-                                                <div dojoType="dijit.Menu">
+                                                <div dojoType="dijit.Menu" id="editMenu">
                                                         <div dojoType="dijit.MenuItem"  iconClass="dijitEditorIcon dijitEditorIconCut"
                                                                 onClick="console.log('not actually cutting anything, just a test!')">Cut</div>
@@ -213 +213 @@
                                         <div dojoType="dijit.MenuBarItem">
                                                 <span>View</span>
-                                                <div dojoType="dijit.Menu">
+                                                <div dojoType="dijit.Menu" id="viewMenu">
                                                         <div dojoType="dijit.MenuItem">Normal</div>
                                                         <div dojoType="dijit.MenuItem">Outline</div>
                                                         <div dojoType="dijit.PopupMenuItem">
                                                                 <span>Zoom</span>
-                                                                <div dojoType="dijit.Menu" id="menuBarSub1">
+                                                                <div dojoType="dijit.Menu" id="zoomMenu">
                                                                         <div dojoType="dijit.MenuItem">50%</div>
                                                                         <div dojoType="dijit.MenuItem">75%</div>
@@ -230 +230 @@
                                         <div dojoType="dijit.MenuBarItem">
                                                 <span>Help</span>
-                                                <div dojoType="dijit.Menu">
+                                                <div dojoType="dijit.Menu" id="helpMenu">
                                                         <div dojoType="dijit.MenuItem">Help Topics</div>
                                                         <div dojoType="dijit.MenuItem">About Dijit</div>
@@ -295 +295 @@
                                         <li>left click context menu (left click on input on far right)
                                         <li>Example of programatically created menu
-                                        <li>Note: while some accelerator (shortcut) keys are displayed in the context menu, they are not actually hooked up to the corresponding actions (if any), they need to be setup explicitly by the user explicitly
+                                        <li>Note: while some accelerator (shortcut) keys are displayed in the context menu, they are not actually hooked up to the corresponding actions (if any), they need to be setup explicitly by the user
                                 </ul>
                 

dijit/trunk/themes/dijit.css

@@ -983 +983 @@
 }
 
-.dijitMenuItemHover {
+.dijitMenuPassive .dijitMenuItemHover,
+.dijitMenuItemSelected {
+        /*
+         * dijitMenuItemHover refers to actual mouse over
+         * dijitMenuItemSelected is used after a menu has been "activated" by
+         * clicking it, tabbing into it, or being opened from a parent menu,
+         * and denotes that the menu item has focus or that focus is on a child
+         * menu
+         */
         background-color:black;
         color:white;
@@ -1011 +1019 @@
 }
 
-.dijit_a11y .dijitMenuItemHover .dijitMenuItemLabel {
+.dijit_a11y .dijitMenuItemSelected .dijitMenuItemLabel {
         border-width: 1px;
         border-style: solid;
 }
-.dijit_a11y .dijitMenuItemHover {
+.dijit_a11y .dijitMenuItemSelected {
         border: 1px #fff dotted !important;
 }

dijit/trunk/themes/nihilo/Menu.css

@@ -25 +25 @@
 }
 
-.nihilo .dijitMenuItemHover {
+.nihilo .dijitMenuPassive .dijitMenuItemHover,
+.nihilo .dijitMenuItemSelected {
         background-color: #ffe284; /* #95a0b0; #555555; #aaaaaa; #646464;  #60a1ea; #848484; */
         color: #243C5F;
@@ -69 +70 @@
 .nihilo .dijitCheckedMenuItemIcon {
         background-image: url('images/spriteCheckbox.gif');
-        background-position: -16px;
+        background-position: -80px;
 }
 
 .nihilo .dijitCheckedMenuItemIconChecked {
-        background-position: 0px;
-}
-
-.nihilo .dijitMenuItemHover .dijitCheckedMenuItemIcon {
-        background-position: -80px;
-}
-
-.nihilo .dijitMenuItemHover .dijitCheckedMenuItemIconChecked {
         background-position: -64px;
 }

dijit/trunk/themes/soria/Menu.css

@@ -25 +25 @@
 }
 
-.soria .dijitMenuItemHover {
+.soria .dijitMenuPassive .dijitMenuItemHover,
+.soria .dijitMenuItemSelected {
         background-color: #d9e6f9; /* #95a0b0; #555555; #aaaaaa; #646464;  #60a1ea; #848484; */
         color: #243C5F;
@@ -69 +70 @@
 .soria .dijitCheckedMenuItemIcon {
         background-image: url('images/spriteCheckbox.gif');
-        background-position: -16px;
+        background-position: -80px;
 }
 
 .soria .dijitCheckedMenuItemIconChecked {
-        background-position: 0px;
-}
-
-.soria .dijitMenuItemHover .dijitCheckedMenuItemIcon {
-        background-position: -80px;
-}
-
-.soria .dijitMenuItemHover .dijitCheckedMenuItemIconChecked {
         background-position: -64px;
 }

dijit/trunk/themes/tundra/Menu.css

@@ -24 +24 @@
 }
 
-.tundra .dijitMenuItemHover {
+.tundra .dijitMenuPassive .dijitMenuItemHover,
+.tundra .dijitMenuItemSelected {
         background-color: #3559ac;
         color:#fff;
@@ -63 +64 @@
 .tundra .dijitCheckedMenuItemIcon {
         background-image: url('images/checkmark.png');
-        background-position: -16px;
+        background-position: -80px;
 }
 
@@ -74 +75 @@
 }
 
-.tundra .dijitMenuItemHover .dijitCheckedMenuItemIcon {
-        background-position: -80px;
-}
-
-.tundra .dijitMenuItemHover .dijitCheckedMenuItemIconChecked {
+.tundra .dijitCheckedMenuItemIconChecked {
         background-position: -64px;
 }