Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added keycodes dict for readability

Browse Source
This commit is contained in:
Jareer Ahsan
2016-08-25 14:32:36 +05:00
parent 05b89f05c4
commit 7b8b1f9df8
1 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
lms/static/js/my_courses_dropdown.js
View File

@@ -1,12 +1,23 @@
$(document).ready(function() {
'use strict';
// define variables for code legibility
// define variables for code legibility
var dropdownMenuToggle = $('.dropdown');
var dropdownMenu = $('.dropdown-menu');
var menuItems = dropdownMenu.find('a');
// bind menu toggle click for later use
var keyCodes = {
leftArrow: 37,
upArrow: 38,
rightArrow: 39,
downArrow: 40,
tab: 9,
escape: 27,
space: 32
};
// bind menu toggle click for later use
dropdownMenuToggle.toggle(function() {
dropdownMenu.addClass('expanded').find('a').first().focus();
dropdownMenuToggle.addClass('active').attr('aria-expanded', 'true');
@@ -15,47 +26,49 @@ $(document).ready(function() {
dropdownMenuToggle.removeClass('active').attr('aria-expanded', 'false').focus();
});
// catch keypresses when focused on dropdownMenuToggle (we only care about spacebar keypresses here)
// 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) {
// 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)
// 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
// get currently focused item
var focusedItem = jQuery(':focus');
// get the number of focusable items
// get the number of focusable items
var numberOfMenuItems = menuItems.length;
// get the index of the currently focused item
// get the index of the currently focused item
var focusedItemIndex = menuItems.index(focusedItem);
// var to store next focused item index
// var to store next focused item index
var itemToFocusIndex;
// if space key pressed
if (event.which == 32) {
// if space key pressed
if (event.which === keyCodes.space) {
dropdownMenuToggle.click();
event.preventDefault();
}
// if escape key pressed
if (event.which == 27) {
// if escape key pressed
if (event.which === keyCodes.escape) {
dropdownMenuToggle.click();
event.preventDefault();
}
// if up arrow key pressed or shift+tab else down key or tab is pressed
if (event.which === 38 || (event.which === 9 && event.shiftKey)) {
if (event.which === keyCodes.upArrow || event.which === keyCodes.leftArrow ||
(event.which === keyCodes.tab && event.shiftKey)) {
// if first item go to last
if (focusedItemIndex === 0) {
menuItems.last().focus();
@@ -64,7 +77,8 @@ $(document).ready(function() {
menuItems.get(itemToFocusIndex).focus();
}
event.preventDefault();
} else if (event.which === 40 || event.which === 9) {
} else if (event.which === keyCodes.downArrow || event.which === keyCodes.rightArrow ||
event.which === keyCodes.tab) {
// if last item go to first
if (focusedItemIndex === numberOfMenuItems - 1) {
menuItems.first().focus();