79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
$(document).ready(function () {
|
|
// define variables for code legibility
|
|
var dropdownMenuToggle = $('a.dropdown');
|
|
var dropdownMenu = $('ul.dropdown-menu');
|
|
var menuItems = dropdownMenu.find('a');
|
|
|
|
// bind menu toggle click for later use
|
|
dropdownMenuToggle.toggle(function() {
|
|
dropdownMenu.addClass("expanded").find('a').first().focus();
|
|
dropdownMenuToggle.addClass("active").attr("aria-expanded", "true");
|
|
}, function() {
|
|
dropdownMenu.removeClass("expanded");
|
|
dropdownMenuToggle.removeClass("active").attr("aria-expanded", "false").focus();
|
|
});
|
|
|
|
//catch keypresses when focused on dropdownMenuToggle (we only care about spacebar keypresses here)
|
|
dropdownMenuToggle.on('keydown', function(event){
|
|
// if space key pressed
|
|
if ( event.which == 32) {
|
|
dropdownMenuToggle.click();
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
//catch keypresses when inside dropdownMenu (we want to catch spacebar; escape; up arrow or shift+tab; and down arrow or tab)
|
|
dropdownMenu.on('keydown', function(event){
|
|
catchKeyPress($(this), event);
|
|
});
|
|
|
|
function catchKeyPress(object, event) {
|
|
// get currently focused item
|
|
var focusedItem = jQuery(':focus');
|
|
|
|
// get the number of focusable items
|
|
var numberOfMenuItems = menuItems.length
|
|
|
|
// get the index of the currently focused item
|
|
var focusedItemIndex = menuItems.index(focusedItem);
|
|
|
|
// var to store next focused item index
|
|
var itemToFocusIndex;
|
|
|
|
// if space key pressed
|
|
if ( event.which == 32) {
|
|
dropdownMenuToggle.click();
|
|
event.preventDefault();
|
|
}
|
|
|
|
// if escape key pressed
|
|
if (event.which == 27) {
|
|
dropdownMenuToggle.click();
|
|
event.preventDefault();
|
|
}
|
|
|
|
// if up arrow key pressed or shift+tab
|
|
if (event.which == 38 || (event.which == 9 && event.shiftKey)) {
|
|
// if first item go to last
|
|
if (focusedItemIndex === 0) {
|
|
menuItems.last().focus();
|
|
} else {
|
|
itemToFocusIndex = focusedItemIndex - 1;
|
|
menuItems.get(itemToFocusIndex).focus();
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
|
|
// if down arrow key pressed or tab key
|
|
if (event.which == 40 || event.which == 9) {
|
|
// if last item go to first
|
|
if (focusedItemIndex == numberOfMenuItems - 1) {
|
|
menuItems.first().focus();
|
|
} else {
|
|
itemToFocusIndex = focusedItemIndex + 1;
|
|
menuItems.get(itemToFocusIndex).focus();
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}); |