MDL-50971 ActionMenu: Action menus cause page to jump when closing

This patch changes the behavior of open action menus when using a mouse.

Before this patch when clicking on the page with an open action menu the focus would be
returned to the action menu's call button. This could cause the page to jump when a
mouse user did not close an action menu, scrolled and then tried to perform another
action on the page.

After this patch when clicking the focus will not be returned to the action menu's call button.
The behavior of the script will not be changed when using the keyboard.
This commit is contained in:
Neill Magill
2015-08-28 12:13:16 +01:00
parent e28004e614
commit ccfb9b69db
13 changed files with 57 additions and 46 deletions
@@ -497,7 +497,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
};
this.send_request(data);
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
}, this);
@@ -744,7 +744,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
this.send_request(data, null, function(response) {
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
// Try to retrieve the existing string from the server
File diff suppressed because one or more lines are too long
@@ -497,7 +497,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
};
this.send_request(data);
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
}, this);
@@ -744,7 +744,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
this.send_request(data, null, function(response) {
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
// Try to retrieve the existing string from the server
+2 -2
View File
@@ -293,7 +293,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
};
this.send_request(data);
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
}, this);
@@ -540,7 +540,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
this.send_request(data, null, function(response) {
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
// Try to retrieve the existing string from the server
+2
View File
@@ -126,6 +126,8 @@ information provided here is intended especially for developers.
enrol_cohort_enrol_all_users()
enrol_cohort_search_cohorts()
* The never unused webdav_locks table was dropped.
* The actionmenu hideMenu() function now expects an EventFacade object to be passed to it,
i.e. a call to M.core.actionmenu.instance.hideMenu() should be change to M.core.actionmenu.instance.hideMenu(e)
=== 2.9.1 ===
@@ -247,9 +247,10 @@ ACTIONMENU.prototype = {
/**
* Hides the menu if it is visible.
* @param {EventFacade} e
* @method hideMenu
*/
hideMenu : function() {
hideMenu : function(e) {
if (this.dialogue) {
Y.log('Hiding an action menu', 'debug', ACTIONMENU.NAME);
this.dialogue.removeClass('show');
@@ -268,7 +269,9 @@ ACTIONMENU.prototype = {
}
if (this.menulink) {
this.menulink.focus();
if (e.type != 'click') {
this.menulink.focus();
}
this.menulink = null;
}
},
@@ -295,7 +298,7 @@ ACTIONMENU.prototype = {
// Prevent event propagation as it will trigger the hideIfOutside event handler in certain situations.
e.halt(true);
this.hideMenu();
this.hideMenu(e);
if (menuvisible) {
// The menu was visible and the user has clicked to toggle it again.
return;
@@ -324,7 +327,7 @@ ACTIONMENU.prototype = {
this.lastMenuChild.focus();
e.preventDefault();
} else if (e.keyCode === 9 && e.shiftKey) {
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
}
return this;
@@ -332,7 +335,7 @@ ACTIONMENU.prototype = {
if (e.keyCode === 27) {
// The escape key was pressed so close the menu.
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
} else if (e.keyCode === 32) {
@@ -344,10 +347,10 @@ ACTIONMENU.prototype = {
// We only override the Shift + Tab on the first option, and Tab on the last option to change where the
// focus is moved to.
if (e.target === this.firstMenuChild && e.shiftKey) {
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
} else if (e.target === this.lastMenuChild && !e.shiftKey) {
if (this.hideMenu()) {
if (this.hideMenu(e)) {
// Determine the next selector and focus on it.
next = this.menulink.next(SELECTOR.CAN_RECEIVE_FOCUS_SELECTOR);
if (next) {
@@ -414,7 +417,7 @@ ACTIONMENU.prototype = {
*/
hideIfOutside : function(e) {
if (!e.target.ancestor(SELECTOR.MENUCHILD, true)) {
this.hideMenu();
this.hideMenu(e);
}
},
@@ -469,7 +472,7 @@ ACTIONMENU.prototype = {
if (e.currentTarget.test(SELECTOR.KEEPOPEN)) {
return;
}
this.hideMenu();
this.hideMenu(e);
}, SELECTOR.MENUCHILD, this));
return true;
File diff suppressed because one or more lines are too long
@@ -246,9 +246,10 @@ ACTIONMENU.prototype = {
/**
* Hides the menu if it is visible.
* @param {EventFacade} e
* @method hideMenu
*/
hideMenu : function() {
hideMenu : function(e) {
if (this.dialogue) {
this.dialogue.removeClass('show');
this.dialogue.one(SELECTOR.MENUCONTENT).set('aria-hidden', true);
@@ -266,7 +267,9 @@ ACTIONMENU.prototype = {
}
if (this.menulink) {
this.menulink.focus();
if (e.type != 'click') {
this.menulink.focus();
}
this.menulink = null;
}
},
@@ -293,7 +296,7 @@ ACTIONMENU.prototype = {
// Prevent event propagation as it will trigger the hideIfOutside event handler in certain situations.
e.halt(true);
this.hideMenu();
this.hideMenu(e);
if (menuvisible) {
// The menu was visible and the user has clicked to toggle it again.
return;
@@ -322,7 +325,7 @@ ACTIONMENU.prototype = {
this.lastMenuChild.focus();
e.preventDefault();
} else if (e.keyCode === 9 && e.shiftKey) {
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
}
return this;
@@ -330,7 +333,7 @@ ACTIONMENU.prototype = {
if (e.keyCode === 27) {
// The escape key was pressed so close the menu.
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
} else if (e.keyCode === 32) {
@@ -342,10 +345,10 @@ ACTIONMENU.prototype = {
// We only override the Shift + Tab on the first option, and Tab on the last option to change where the
// focus is moved to.
if (e.target === this.firstMenuChild && e.shiftKey) {
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
} else if (e.target === this.lastMenuChild && !e.shiftKey) {
if (this.hideMenu()) {
if (this.hideMenu(e)) {
// Determine the next selector and focus on it.
next = this.menulink.next(SELECTOR.CAN_RECEIVE_FOCUS_SELECTOR);
if (next) {
@@ -411,7 +414,7 @@ ACTIONMENU.prototype = {
*/
hideIfOutside : function(e) {
if (!e.target.ancestor(SELECTOR.MENUCHILD, true)) {
this.hideMenu();
this.hideMenu(e);
}
},
@@ -465,7 +468,7 @@ ACTIONMENU.prototype = {
if (e.currentTarget.test(SELECTOR.KEEPOPEN)) {
return;
}
this.hideMenu();
this.hideMenu(e);
}, SELECTOR.MENUCHILD, this));
return true;
+12 -9
View File
@@ -245,9 +245,10 @@ ACTIONMENU.prototype = {
/**
* Hides the menu if it is visible.
* @param {EventFacade} e
* @method hideMenu
*/
hideMenu : function() {
hideMenu : function(e) {
if (this.dialogue) {
Y.log('Hiding an action menu', 'debug', ACTIONMENU.NAME);
this.dialogue.removeClass('show');
@@ -266,7 +267,9 @@ ACTIONMENU.prototype = {
}
if (this.menulink) {
this.menulink.focus();
if (e.type != 'click') {
this.menulink.focus();
}
this.menulink = null;
}
},
@@ -293,7 +296,7 @@ ACTIONMENU.prototype = {
// Prevent event propagation as it will trigger the hideIfOutside event handler in certain situations.
e.halt(true);
this.hideMenu();
this.hideMenu(e);
if (menuvisible) {
// The menu was visible and the user has clicked to toggle it again.
return;
@@ -322,7 +325,7 @@ ACTIONMENU.prototype = {
this.lastMenuChild.focus();
e.preventDefault();
} else if (e.keyCode === 9 && e.shiftKey) {
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
}
return this;
@@ -330,7 +333,7 @@ ACTIONMENU.prototype = {
if (e.keyCode === 27) {
// The escape key was pressed so close the menu.
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
} else if (e.keyCode === 32) {
@@ -342,10 +345,10 @@ ACTIONMENU.prototype = {
// We only override the Shift + Tab on the first option, and Tab on the last option to change where the
// focus is moved to.
if (e.target === this.firstMenuChild && e.shiftKey) {
this.hideMenu();
this.hideMenu(e);
e.preventDefault();
} else if (e.target === this.lastMenuChild && !e.shiftKey) {
if (this.hideMenu()) {
if (this.hideMenu(e)) {
// Determine the next selector and focus on it.
next = this.menulink.next(SELECTOR.CAN_RECEIVE_FOCUS_SELECTOR);
if (next) {
@@ -412,7 +415,7 @@ ACTIONMENU.prototype = {
*/
hideIfOutside : function(e) {
if (!e.target.ancestor(SELECTOR.MENUCHILD, true)) {
this.hideMenu();
this.hideMenu(e);
}
},
@@ -467,7 +470,7 @@ ACTIONMENU.prototype = {
if (e.currentTarget.test(SELECTOR.KEEPOPEN)) {
return;
}
this.hideMenu();
this.hideMenu(e);
}, SELECTOR.MENUCHILD, this));
return true;
@@ -399,7 +399,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
Y.Moodle.mod_quiz.util.slot.remove(element);
this.reorganise_edit_page();
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
}
});
@@ -441,7 +441,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
this.send_request(data, null, function(response) {
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
// Try to retrieve the existing string from the server.
File diff suppressed because one or more lines are too long
@@ -399,7 +399,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
Y.Moodle.mod_quiz.util.slot.remove(element);
this.reorganise_edit_page();
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
}
});
@@ -441,7 +441,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
this.send_request(data, null, function(response) {
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
// Try to retrieve the existing string from the server.
+2 -2
View File
@@ -177,7 +177,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
Y.Moodle.mod_quiz.util.slot.remove(element);
this.reorganise_edit_page();
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
}
});
@@ -219,7 +219,7 @@ Y.extend(RESOURCETOOLBOX, TOOLBOX, {
this.send_request(data, null, function(response) {
if (M.core.actionmenu && M.core.actionmenu.instance) {
M.core.actionmenu.instance.hideMenu();
M.core.actionmenu.instance.hideMenu(ev);
}
// Try to retrieve the existing string from the server.