Skip to content

E
edx-platform
Commit 4b8490d9 by Jareer Ahsan
Options

Changed to global keycodes, refactored for quality

parent 7b8b1f9d
Showing with 74 additions and 79 deletions
lms/static/js/my_courses_dropdown.js
$(document).ready(function() { (function(require) {
'use strict'; 'use strict';
// define variables for code legibility require([
var dropdownMenuToggle = $('.dropdown'); 'jquery',
var dropdownMenu = $('.dropdown-menu'); 'edx-ui-toolkit/js/utils/constants'
var menuItems = dropdownMenu.find('a'); ], function($, constants) {
// define variables for code legibility
var $dropdownMenuToggle = $('.dropdown');
var $dropdownMenu = $('.dropdown-menu');
var menuItems = $dropdownMenu.find('a');
var keyCodes = { // bind menu toggle click for later use
leftArrow: 37, $dropdownMenuToggle.toggle(function() {
upArrow: 38, $dropdownMenu.addClass('expanded').find('a').first()
rightArrow: 39, .focus();
downArrow: 40, $dropdownMenuToggle.addClass('active').attr('aria-expanded', 'true');
tab: 9, }, function() {
escape: 27, $dropdownMenu.removeClass('expanded');
space: 32 $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 === constants.keyCodes.space) {
$dropdownMenuToggle.click();
event.preventDefault();
}
});
// bind menu toggle click for later use function catchKeyPress(object, event) {
dropdownMenuToggle.toggle(function() { // get currently focused item
dropdownMenu.addClass('expanded').find('a').first().focus(); var focusedItem = jQuery(':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 === keyCodes.space) {
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 // get the number of focusable items
var focusedItemIndex = menuItems.index(focusedItem); var numberOfMenuItems = menuItems.length;
// var to store next focused item index // get the index of the currently focused item
var itemToFocusIndex; var focusedItemIndex = menuItems.index(focusedItem);
// if space key pressed // var to store next focused item index
if (event.which === keyCodes.space) { var itemToFocusIndex;
dropdownMenuToggle.click();
event.preventDefault();
}
// if escape key pressed // if space key pressed
if (event.which === keyCodes.escape) { if (event.which === constants.keyCodes.space) {
dropdownMenuToggle.click(); $dropdownMenuToggle.click();
event.preventDefault(); event.preventDefault();
} }
// if up arrow key pressed or shift+tab else down key or tab is pressed // if escape key pressed
if (event.which === keyCodes.upArrow || event.which === keyCodes.leftArrow || if (event.which === constants.keyCodes.esc) {
(event.which === keyCodes.tab && event.shiftKey)) { $dropdownMenuToggle.click();
// if first item go to last event.preventDefault();
if (focusedItemIndex === 0) {
menuItems.last().focus();
} else {
itemToFocusIndex = focusedItemIndex - 1;
menuItems.get(itemToFocusIndex).focus();
} }
event.preventDefault();
} else if (event.which === keyCodes.downArrow || event.which === keyCodes.rightArrow || // if up arrow key pressed or shift+tab else down key or tab is pressed
event.which === keyCodes.tab) { if (event.which === constants.keyCodes.up || event.which === constants.keyCodes.left ||
// if last item go to first (event.which === constants.keyCodes.tab && event.shiftKey)) {
if (focusedItemIndex === numberOfMenuItems - 1) { // if first item go to last
menuItems.first().focus(); if (focusedItemIndex === 0) {
} else { menuItems.last().focus();
itemToFocusIndex = focusedItemIndex + 1; } else {
menuItems.get(itemToFocusIndex).focus(); itemToFocusIndex = focusedItemIndex - 1;
menuItems.get(itemToFocusIndex).focus();
}
event.preventDefault();
} else if (event.which === constants.keyCodes.down || event.which === constants.keyCodes.right ||
event.which === constants.keyCodes.tab) {
// if last item go to first
if (focusedItemIndex === numberOfMenuItems - 1) {
menuItems.first().focus();
} else {
itemToFocusIndex = focusedItemIndex + 1;
menuItems.get(itemToFocusIndex).focus();
}
event.preventDefault();
} }
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);
});
});
}).call(this, require || RequireJS.require);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment