Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation Menubar Example: Update structure to have parent/child relationships between parent menus and submenus #707

Closed
wants to merge 3 commits into from
Closed

Navigation Menubar Example: Update structure to have parent/child relationships between parent menus and submenus #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
507ed02
updated the link menu to use proper parent child relationships for me…
jongund Jun 7, 2018
a704556
added menubar items that include popup menus can also be links using …
jongund Jun 7, 2018
5d7012d
fixed landing page links that I broke
jongund Jun 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 62 additions & 30 deletions examples/menubar/menubar-1/css/menubarLinks.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,66 +6,98 @@ ul[role="menubar"] {
background-color: #EEEEEE;
}

ul[role="menubar"] [role="menuitem"] {
display: inline-block;
position: relative;
margin: 0;
padding: 0.25em;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
color: black;
}

ul[role="menubar"] [role="menuitem"],
ul[role="menubar"] [role="separator"] {
margin: 0;
padding: 0.25em;
background-color: #EEEEEE;
border: 2px solid #EEEEEE;
}

ul[role="menubar"] [role="separator"] {
padding-top: 0.15em;
background-image: url('../images/separator.png');
background-position: center;
background-repeat: repeat-x;

ul[role="menubar"] [role="menuitem"] > a {
text-decoration: none;
color: black;
border: none;
}

ul[role="menubar"] [role="menuitem"]:focus,
ul[role="menubar"] [role="menuitem"]:hover,
ul[role="menubar"] [role="separator"]:focus,
ul[role="menubar"] [role="separator"]:hover {
background-color: black;
color: white;
ul[role="menubar"] > [role="menuitem"] > a {
margin-right: 0.5em;
}

ul[role="menubar"] a[role="menuitem"] {
text-decoration: none;
color: black;
ul[role="menubar"] [role="menu"] [role="menuitem"] {
width: 10em;
}

ul[role="menubar"] [role="menu"] [role="separator"] {
padding-top: 0.15em;
background-image: url('../images/separator.png');
background-position: center;
background-repeat: repeat-x;
}

ul[role="menubar"] li {
ul[role="menubar"] ul {
list-style: none;
margin: 0;
padding: 0;
}

ul[role="menubar"] > li {
display: inline;
position: relative;
ul[role="menubar"] [role="menu"] [role="menuitem"] {
width: 10em;
}

ul[role="menubar"] > li > a:after {
content: url('../images/down-arrow-brown.png');
padding-left: .25em;
ul[role="menubar"] [role="menuitem"] > [role="menu"] {
margin: 0;
padding: 0;
position: absolute;
top: 2.5em;
left: -0.25em;
}


ul[role="menubar"] ul[role="menu"] {
display: none;
position: absolute;
top: -2px;
left: 0;
ul[role="menubar"] [role="menuitem"] > [role="menu"] [role="menu"] {
margin: 0;
padding: 0;
position: absolute;
top: 0em;
left: 10.5em;
}

ul[role="menubar"] [role="menuitem"][aria-expanded="false"] > [role="menu"] {
display: none;
}

ul[role="menubar"] ul[role="menu"] li a {
ul[role="menubar"] [role="menuitem"][aria-expanded="true"] > [role="menu"] {
display: block;
width: 10em;
}

ul[role="menubar"] ul[role="menu"] a[aria-haspopup="true"]:after {
ul[role="menubar"] [role="menuitem"]:focus,
ul[role="menubar"] [role="menuitem"]:focus > a,
ul[role="menubar"] [role="menuitem"]:hover,
ul[role="menubar"] [role="menuitem"]:hover > a,
ul[role="menubar"] [role="separator"]:focus,
ul[role="menubar"] [role="separator"]:hover {
background-color: #222;
color: white;
}


ul[role="menubar"] > [role="menuitem"] [role="menu"] [role="menuitem"][aria-haspopup="true"] > a:after {
content: url('../images/right-arrow-brown.png');
padding-right: 2em;
}

ul[role="menubar"] > [role="menuitem"] [role="menu"] [role="menuitem"][aria-haspopup="true"][aria-expanded="true"] > a:after {
content: url('../images/down-arrow-brown.png');
padding-left: .25em;
}
32 changes: 28 additions & 4 deletions examples/menubar/menubar-1/js/MenubarItemLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ var MenubarItem = function (domNode, menuObj) {

this.menu = menuObj;
this.domNode = domNode;
this.linkElem = false;

this.popupMenu = false;

this.hasFocus = false;
Expand Down Expand Up @@ -38,12 +40,20 @@ MenubarItem.prototype.init = function () {
this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));

// check to see if the the menu item has a child
var elem = this.domNode.firstElementChild;

if (elem && elem.tagName === 'A') {
elem.tabIndex = -1;
this.linkElem = elem;
}

// Initialize pop up menus

var nextElement = this.domNode.nextElementSibling;
var menuElement = this.domNode.querySelector('[role="menu"]');

if (nextElement && nextElement.tagName === 'UL') {
this.popupMenu = new PopupMenu(nextElement, this);
if (menuElement) {
this.popupMenu = new PopupMenu(menuElement, this);
this.popupMenu.init();
}

Expand All @@ -61,7 +71,6 @@ MenubarItem.prototype.handleKeydown = function (event) {

switch (event.keyCode) {
case this.keyCode.SPACE:
case this.keyCode.RETURN:
case this.keyCode.DOWN:
if (this.popupMenu) {
this.popupMenu.open();
Expand All @@ -70,6 +79,21 @@ MenubarItem.prototype.handleKeydown = function (event) {
}
break;

case this.keyCode.RETURN:
var anchor = tgt.firstElementChild;
if (anchor && anchor.href) {
window.location.href = anchor.href;
flag = true;
}
else {
if (this.popupMenu) {
this.popupMenu.open();
this.popupMenu.setFocusToFirstItem();
flag = true;
}
}
break;

case this.keyCode.LEFT:
this.menu.setFocusToPreviousItem(this);
flag = true;
Expand Down
9 changes: 4 additions & 5 deletions examples/menubar/menubar-1/js/MenubarLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,15 @@ Menubar.prototype.init = function () {

// Traverse the element children of menubarNode: configure each with
// menuitem role behavior and store reference in menuitems array.
elem = this.domNode.firstElementChild;
var elem = this.domNode.firstElementChild;

while (elem) {
var menuElement = elem.firstElementChild;

if (elem && menuElement && menuElement.tagName === 'A') {
menubarItem = new MenubarItem(menuElement, this);
if (elem.getAttribute('role') === 'menuitem') {
menubarItem = new MenubarItem(elem, this);
menubarItem.init();
this.menubarItems.push(menubarItem);
textContent = menuElement.textContent.trim();
textContent = elem.firstElementChild.textContent.trim();
this.firstChars.push(textContent.substring(0, 1).toLowerCase());
}

Expand Down
34 changes: 28 additions & 6 deletions examples/menubar/menubar-1/js/PopupMenuItemLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ var MenuItem = function (domNode, menuObj) {

this.domNode = domNode;
this.menu = menuObj;
this.linkElem = false;
this.popupMenu = false;
this.isMenubarItem = false;

Expand Down Expand Up @@ -39,12 +40,20 @@ MenuItem.prototype.init = function () {
this.domNode.addEventListener('mouseover', this.handleMouseover.bind(this));
this.domNode.addEventListener('mouseout', this.handleMouseout.bind(this));

// check to see if the the menu item has a child
var elem = this.domNode.firstElementChild;

if (elem && elem.tagName === 'A') {
elem.tabIndex = -1;
this.linkElem = elem;
}

// Initialize flyout menu

var nextElement = this.domNode.nextElementSibling;
var menuElement = this.domNode.querySelector('[role="menu"]');

if (nextElement && nextElement.tagName === 'UL') {
this.popupMenu = new PopupMenu(nextElement, this);
if (menuElement) {
this.popupMenu = new PopupMenu(menuElement, this);
this.popupMenu.init();
}

Expand All @@ -68,7 +77,6 @@ MenuItem.prototype.handleKeydown = function (event) {

switch (event.keyCode) {
case this.keyCode.SPACE:
case this.keyCode.RETURN:
if (this.popupMenu) {
this.popupMenu.open();
this.popupMenu.setFocusToFirstItem();
Expand All @@ -91,12 +99,27 @@ MenuItem.prototype.handleKeydown = function (event) {
clickEvent.initEvent('click', true, true);
}
}
tgt.dispatchEvent(clickEvent);
tgt.firstElementChild.dispatchEvent(clickEvent);
}

flag = true;
break;

case this.keyCode.RETURN:
var anchor = tgt.firstElementChild;
if (anchor && anchor.href) {
window.location.href = anchor.href;
flag = true;
}
else {
if (this.popupMenu) {
this.popupMenu.open();
this.popupMenu.setFocusToFirstItem();
flag = true;
}
}
break;

case this.keyCode.UP:
this.menu.setFocusToPreviousItem(this);
flag = true;
Expand All @@ -114,7 +137,6 @@ MenuItem.prototype.handleKeydown = function (event) {
break;

case this.keyCode.RIGHT:
console.log('[MenuItem][handleKeydown]: ' + this.menu.controller.isMenubarItem);
if (this.popupMenu) {
this.popupMenu.open();
this.popupMenu.setFocusToFirstItem();
Expand Down
38 changes: 12 additions & 26 deletions examples/menubar/menubar-1/js/PopupMenuLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,19 @@ PopupMenu.prototype.init = function () {
childElement = this.domNode.firstElementChild;

while (childElement) {
menuElement = childElement.firstElementChild;
menuElement = false;

if (menuElement && menuElement.tagName === 'A') {
if (childElement.getAttribute('role') === 'menuitem') {
menuElement = childElement;
}
else {
if (childElement.firstElementChild &&
childElement.firstElementChild.getAttribute('role') === 'menuitem') {
menuElement = childElement.firstElementChild;
}
}

if (menuElement) {
menuItem = new MenuItem(menuElement, this);
menuItem.init();
this.menuitems.push(menuItem);
Expand Down Expand Up @@ -211,33 +221,13 @@ PopupMenu.prototype.getIndexFirstChars = function (startIndex, char) {

PopupMenu.prototype.open = function () {
// Get position and bounding rectangle of controller object's DOM node
var rect = this.controller.domNode.getBoundingClientRect();

console.log('[PopupMenu][open]');

// Set CSS properties
if (!this.controller.isMenubarItem) {
this.domNode.parentNode.style.position = 'relative';
this.domNode.style.display = 'block';
this.domNode.style.position = 'absolute';
this.domNode.style.left = rect.width + 'px';
this.domNode.style.zIndex = 100;
}
else {
this.domNode.style.display = 'block';
this.domNode.style.position = 'absolute';
this.domNode.style.top = (rect.height - 1) + 'px';
this.domNode.style.zIndex = 100;
}

this.controller.setExpanded(true);

};

PopupMenu.prototype.close = function (force) {

console.log('[PopupMenu][close][force]: ' + force);

var controllerHasHover = this.controller.hasHover;

var hasFocus = this.hasFocus;
Expand All @@ -249,15 +239,11 @@ PopupMenu.prototype.close = function (force) {
}
}

console.log('[PopupMenu][close][hasFocus]: ' + hasFocus);

if (!this.controller.isMenubarItem) {
controllerHasHover = false;
}

if (force || (!hasFocus && !this.hasHover && !controllerHasHover)) {
this.domNode.style.display = 'none';
this.domNode.style.zIndex = 0;
this.controller.setExpanded(false);
}
};
Loading