Skip to content

Commit

Permalink
Remove wc/template from bar menu
Browse files Browse the repository at this point in the history 
And fix some key handlers I missed earlier. #1822 #1823 #1825
  • Loading branch information
@ricksbrown
ricksbrown committed Aug 18, 2023
1 parent 4a8d030 commit 3486c73
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 77 deletions.
97 changes: 52 additions & 45 deletions wcomponents-theme/src/main/js/wc/ui/menu/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,27 @@ define(["wc/ui/menu/core",
"wc/i18n/i18n",
"wc/timers",
"wc/ui/ajax/processResponse",
"wc/template",
"wc/ui/viewportUtils",
"wc/ui/menu/menuItem"],
function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid, i18n, timers,
processResponse, template, viewportUtils) {
processResponse, viewportUtils) {
"use strict";
var instance;
let instance;

const barTemplate = context => `
<div id="${context.id}" role="presentation" class="wc-submenu ${context.class}"
${context.tooltip ? `title=${context.tooltip}` : ""}>
<button type="button" role="menuitem" aria-haspopup="true" class="wc-nobutton wc-submenu-o${context.opener.class}"
${context.opener.tooltip ? `title=${context.opener.tooltip}` : ""}
aria-controls="${context.contentId}">
</button>
<div id="${context.contentId}" class="wc_submenucontent wc-content" role="menu" aria-expanded="${context.open}">
<button class="wc-menuitem wc_closesubmenu wc-nobutton wc-invite" role="menuitem" type="button">
<span class="wc-decoratedlabel"><span class="fa fa-caret-left wc_dlbl_seg" aria-hidden="true"></span><span class="wc-labelbody wc_dlbl_seg">${context.closeText}</span></span>
</button>
${context.items}
</div>
</div>`;

/* Unused dependencies:
* We will need "wc/ui/menu/menuItem" if we have any selectable items so we get it just in case rather than
Expand All @@ -29,11 +43,11 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
* @private
*/
function Menubar() {
var MENU_FIXED = "wc_menu_fix",
resizeTimer,
const MENU_FIXED = "wc_menu_fix",
BURGER_MENU_CLASS = "wc_menu_hbgr",
hamburgerSelector = `div.${BURGER_MENU_CLASS}`,
decoratedLabelSelector = ".wc-decoratedlabel",
decoratedLabelSelector = ".wc-decoratedlabel";
let resizeTimer,
RESPONSIVE_MENU,
SEPARATOR;

Expand Down Expand Up @@ -76,13 +90,13 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
* @returns {Boolean} true if first/last item.
*/
function isFirstLastItem(element, root, isLast) {
var target,
direction = isLast ? keyWalker.MOVE_TO.NEXT : keyWalker.MOVE_TO.PREVIOUS;
const direction = isLast ? keyWalker.MOVE_TO.NEXT : keyWalker.MOVE_TO.PREVIOUS;

/* get the element which would be focussed if we were to use findFn without
* allowing cycling and forcing depthFirstNavigation false. If we don't get anything then
* the element passed in is the first/last*/
if ((target = instance._getTargetItem(element, direction, root, false))) {
const target = instance._getTargetItem(element, direction, root, false);
if (target) {
return element === target; // if the target is the same as target then element is first &/or last
}
return true;
Expand Down Expand Up @@ -133,20 +147,21 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
* @param {Element} item The item which has focus.
*/
this._remapKeys = function(item) {
var submenu,
_item = item,
VK_UP = "DOM_VK_UP",
VK_DOWN = "DOM_VK_DOWN",
VK_RIGHT = "DOM_VK_RIGHT",
VK_LEFT = "DOM_VK_LEFT",
branch, grandparent,
let _item = item;
const VK_UP = "ArrowUp",
VK_DOWN = "ArrowDown",
VK_RIGHT = "ArrowRight",
VK_LEFT = "ArrowLeft",
root = this.getRoot(_item);

if (!root) {
return;
}
if ((submenu = this.getSubMenu(_item))) {
if ((branch = this._getBranch(submenu)) && (grandparent = this.getSubMenu(branch))) {
const submenu = this.getSubMenu(_item);
if (submenu) {
const branch = this._getBranch(submenu);
let grandparent;
if (branch && (grandparent = this.getSubMenu(branch))) {
// more than one level deep.
/* If a submenu left closes the current branch and right will
* trigger the action if the item is a branch or opener but
Expand Down Expand Up @@ -220,13 +235,13 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
*/
this._setupKeymap = function() {
this._keyMap = {
DOM_VK_LEFT: keyWalker.MOVE_TO.PREVIOUS,
DOM_VK_RIGHT: keyWalker.MOVE_TO.NEXT,
DOM_VK_HOME: keyWalker.MOVE_TO.FIRST,
DOM_VK_END: keyWalker.MOVE_TO.LAST,
DOM_VK_ESCAPE: this._FUNC_MAP.ESCAPE,
DOM_VK_UP: this._FUNC_MAP.ACTION,
DOM_VK_DOWN: this._FUNC_MAP.ACTION
ArrowLeft: keyWalker.MOVE_TO.PREVIOUS,
ArrowRight: keyWalker.MOVE_TO.NEXT,
Home: keyWalker.MOVE_TO.FIRST,
End: keyWalker.MOVE_TO.LAST,
Escape: this._FUNC_MAP.ESCAPE,
ArrowUp: this._FUNC_MAP.ACTION,
ArrowDown: this._FUNC_MAP.ACTION
};
};

Expand All @@ -238,23 +253,22 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
* @param {Element} nextMenu the menu to manipulate
*/
function removeIconified(nextMenu) {
var burger,
submenuContent,
current;
if (!nextMenu.classList.contains(MENU_FIXED)) {
return;
}

try {
burger = nextMenu.querySelector(hamburgerSelector);
const burger = nextMenu.querySelector(hamburgerSelector);
if (!burger) {
return;
}

submenuContent = instance._wd.submenu.findDescendant(burger);
const submenuContent = instance._wd.submenu.findDescendant(burger);
if (!submenuContent) {
return;
}

let current;
while ((current = submenuContent.firstChild)) {
if (current.classList.contains("wc_closesubmenu")) {
submenuContent.removeChild(current);
Expand Down Expand Up @@ -320,25 +334,18 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
i18n.translate(["menu_open_label", "menu_close_label"]).then(function(strings) {
const props = {
id: uid(),
class: " " + BURGER_MENU_CLASS,
class: BURGER_MENU_CLASS,
opener: {
class: " wc_hbgr fa fa-bars",
class: "wc_hbgr fa fa-bars",
tooltip: strings[0]
},
contentId: uid(),
open: false,
closeText: strings[1],
items: nextMenu.innerHTML
};
template.process({
source: "submenu.mustache",
loadSource: true,
target: nextMenu,
context: props,
callback: function() {
nextMenu.classList.add(MENU_FIXED);
}
});
nextMenu.innerHTML = barTemplate(props);
nextMenu.classList.add(MENU_FIXED);
});
}

Expand All @@ -351,7 +358,8 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
* @param {Element} el the element to test which may be a menu, submenu or something containing a menu.
*/
function toggleIconMenus(el) {
var candidates, element = el || document.body;
let candidates;
const element = el || document.body;
if (instance.isSubMenu(element)) {
return;
}
Expand Down Expand Up @@ -397,7 +405,7 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
*
* @function
* @private
* @param {Element} element any element which may contain a bar/flyout menu separators
* @param {HTMLElement} element any element which may contain a bar/flyout menu separators
*/
function setSeparatorOrientation(element) {
if (!SEPARATOR) {
Expand All @@ -422,7 +430,7 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
}

function attachClosebuttons(container) {
var el = container || document.body;
const el = container || document.body;
if (container && instance.isSubMenu(container)) {
attachSubMenuCloseButton(container);
}
Expand Down Expand Up @@ -470,7 +478,6 @@ function(abstractMenu, toArray, event, keyWalker, shed, Widget, initialise, uid,
* @requires module:wc/i18n/i18n
* @requires module:wc/timers
* @requires module:wc/ui/ajax/processResponse
* @requires:module:wc/template
* @requires module:wc/ui/viewportUtils
*/
instance = new Menubar();
Expand Down
12 changes: 6 additions & 6 deletions wcomponents-theme/src/main/js/wc/ui/menu/column.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@ define(["wc/ui/menu/core", "wc/dom/keyWalker", "wc/dom/shed", "wc/dom/Widget", "
if (this._isBranchOrOpener(element)) {
element = this._getBranchExpandableElement(element);
if (!shed.isExpanded(element)) {
this._keyMap["DOM_VK_RIGHT"] = this._FUNC_MAP.ACTION;
this._keyMap["ArrowRight"] = this._FUNC_MAP.ACTION;
} else {
this._keyMap["DOM_VK_RIGHT"] = keyWalker.MOVE_TO.CHILD;
this._keyMap["ArrowRight"] = keyWalker.MOVE_TO.CHILD;
}
}
};
Expand All @@ -66,10 +66,10 @@ define(["wc/ui/menu/core", "wc/dom/keyWalker", "wc/dom/shed", "wc/dom/Widget", "
*/
this._setupKeymap = function() {
this._keyMap = {
"DOM_VK_UP": keyWalker.MOVE_TO.PREVIOUS,
"DOM_VK_DOWN": keyWalker.MOVE_TO.NEXT,
"DOM_VK_LEFT": this._FUNC_MAP.CLOSE_MY_BRANCH,
"DOM_VK_ESCAPE": this._FUNC_MAP.CLOSE_MY_BRANCH
"ArrowUp": keyWalker.MOVE_TO.PREVIOUS,
"ArrowDown": keyWalker.MOVE_TO.NEXT,
"ArrowLeft": this._FUNC_MAP.CLOSE_MY_BRANCH,
"Escape": this._FUNC_MAP.CLOSE_MY_BRANCH
};
};
}
Expand Down
12 changes: 6 additions & 6 deletions wcomponents-theme/src/main/js/wc/ui/menu/treemenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,9 @@ define(["wc/ui/menu/core", "wc/dom/keyWalker", "wc/dom/shed", "wc/dom/Widget", "
if (this._isBranchOrOpener(element)) {
element = this._getBranchExpandableElement(element);
if (!shed.isExpanded(element)) {
this._keyMap["DOM_VK_RIGHT"] = this._FUNC_MAP.ACTION;
this._keyMap["ArrowRight"] = this._FUNC_MAP.ACTION;
} else {
this._keyMap["DOM_VK_RIGHT"] = keyWalker.MOVE_TO.CHILD;
this._keyMap["ArrowRight"] = keyWalker.MOVE_TO.CHILD;
}
}
};
Expand All @@ -114,10 +114,10 @@ define(["wc/ui/menu/core", "wc/dom/keyWalker", "wc/dom/shed", "wc/dom/Widget", "
*/
this._setupKeymap = function() {
this._keyMap = {
"DOM_VK_UP": keyWalker.MOVE_TO.PREVIOUS,
"DOM_VK_DOWN": keyWalker.MOVE_TO.NEXT,
"DOM_VK_LEFT": this._FUNC_MAP.CLOSE_MY_BRANCH,
"DOM_VK_ESCAPE": this._FUNC_MAP.CLOSE_MY_BRANCH
"ArrowUp": keyWalker.MOVE_TO.PREVIOUS,
"ArrowDown": keyWalker.MOVE_TO.NEXT,
"ArrowLeft": this._FUNC_MAP.CLOSE_MY_BRANCH,
"Escape": this._FUNC_MAP.CLOSE_MY_BRANCH
};
};

Expand Down
20 changes: 0 additions & 20 deletions wcomponents-theme/src/main/resource/submenu.mustache
View file

This file was deleted.

0 comments on commit 3486c73

Please sign in to comment.