Menubar

The Menubar class provides a simple menubar widget.

author: Julien Ramboz version: 1.0 references: WAI-ARIA menu role, AOL's Menu style guide usage: Menubar examples requires: Toolbar

AMD loader

Try loading as AMD module or fall back to default loading

((widget) -> if typeof define is "function" and define.amd define ["jslib", "core", "widget", "toolbar"], widget else widget @$, _, _.AbstractWidget, _.Toolbar ) menubar = ($, _, AbstractWidget, Toolbar) -> "use strict"

The actual widget class

class Menubar extends Toolbar

Default options for the widget

@defaultOptions:

items: a selector pointing to the items

items: ""

Initialisation

Initializer function.

initialize: (options) -> super options

Accessibility markup

Add aria attributes

aria: () -> super() @element.attr "role", "menubar" @items.attr("role", "menuitem").each () -> $item = $(this) if $item.children("[role='menu']").length $item.attr("aria-haspopup", "true") $label = $item.children().filter () -> not $(this).is('[data-widget="menu"],[role="menu"]') if $label.length and not this.getAttribute("aria-labelledby") id = $label.attr("id") if not id id = _.getGUID("menu-item-label-") $label.attr("id", id) $item.attr("aria-labelledby", id) @currentItem = @selectNextItem().attr("tabindex", 0)

Event handling

Attach evenets to the widget

bindEvents: () -> @handleKeys(@items) @element.on "click", "[role='menuitem']", (e) => if e.target.getAttribute("aria-disabled") is "true" return e.preventDefault() $item = $(e.currentTarget) return if @items.index($item) is -1 @selectItem($item)

Structure discovery

Find the widget structure using the specified configuration

Key handling

Handle enter key press

keyEnter: (e) -> if @currentItem.get(0).getAttribute("aria-haspopup") is "true" $submenu = @getSubmenu() if $submenu.get(0).getAttribute("aria-hidden") is "true" $toggle = @getToggle() _.getInstance($toggle.get(0), ["toggle", "collapse"]) .toggle(undefined, e)

Handle space key press

keySpace: (e) -> e.preventDefault() @keyEnter(e)

Cleanup

Cleanup the widget and remove remaining references

destructor: () -> @items.removeAttr("role aria-haspopup") super()

Installation

Install the widget into the JS library

Menubar.install("Menubar", () -> $("[data-widget='menubar']")["#{_.namespace}menubar"]() )