91 lines
3.4 KiB
JavaScript
91 lines
3.4 KiB
JavaScript
var edx = edx || {};
|
|
|
|
(function($) {
|
|
'use strict';
|
|
|
|
edx.dashboard = edx.dashboard || {};
|
|
edx.dashboard.dropdown = {};
|
|
|
|
// Generate the properties object to be passed along with business intelligence events.
|
|
edx.dashboard.dropdown.toggleCourseActionsDropdownMenu = function(event) {
|
|
var $target = $(event.currentTarget),
|
|
dashboardIndex = $target.data().dashboardIndex,
|
|
$dropdown = $($target.data('dropdownSelector') || '#actions-dropdown-' + dashboardIndex),
|
|
$dropdownButton = $($target.data('dropdownButtonSelector') || '#actions-dropdown-link-' + dashboardIndex),
|
|
ariaExpandedState = ($dropdownButton.attr('aria-expanded') === 'true'),
|
|
menuItems = $dropdown.find('a');
|
|
|
|
var catchKeyPress = function(object, event) {
|
|
// get currently focused item
|
|
var $focusedItem = $(':focus');
|
|
|
|
// get the index of the currently focused item
|
|
var focusedItemIndex = menuItems.index($focusedItem);
|
|
|
|
// var to store next focused item index
|
|
var itemToFocusIndex;
|
|
|
|
// if space or escape key pressed
|
|
if (event.which === 32 || event.which === 27) {
|
|
$dropdownButton.click();
|
|
event.preventDefault();
|
|
}
|
|
|
|
// if up arrow key pressed or shift+tab
|
|
else if (event.which === 38 || (event.which === 9 && event.shiftKey)) {
|
|
// if first item go to last
|
|
if (focusedItemIndex === 0 || focusedItemIndex === -1) {
|
|
menuItems.last().focus();
|
|
} else {
|
|
itemToFocusIndex = focusedItemIndex - 1;
|
|
menuItems.get(itemToFocusIndex).focus();
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
|
|
// if down arrow key pressed or tab key
|
|
else if (event.which === 40 || event.which === 9) {
|
|
// if last item go to first
|
|
if (focusedItemIndex === menuItems.length - 1 || focusedItemIndex === -1) {
|
|
menuItems.first().focus();
|
|
} else {
|
|
itemToFocusIndex = focusedItemIndex + 1;
|
|
menuItems.get(itemToFocusIndex).focus();
|
|
}
|
|
event.preventDefault();
|
|
}
|
|
};
|
|
|
|
// Toggle the visibility control for the selected element and set the focus
|
|
$dropdown.toggleClass('is-visible');
|
|
if ($dropdown.hasClass('is-visible')) {
|
|
$dropdown.attr('tabindex', -1);
|
|
$dropdown.focus();
|
|
} else {
|
|
$dropdown.removeAttr('tabindex');
|
|
$dropdownButton.focus();
|
|
}
|
|
|
|
// Inform the ARIA framework that the dropdown has been expanded
|
|
$dropdownButton.attr('aria-expanded', !ariaExpandedState);
|
|
|
|
// catch keypresses when inside dropdownMenu (we want to catch spacebar;
|
|
// escape; up arrow or shift+tab; and down arrow or tab)
|
|
$dropdown.on('keydown', function(e) {
|
|
catchKeyPress($(this), e);
|
|
});
|
|
};
|
|
|
|
edx.dashboard.dropdown.bindToggleButtons = function(selector) {
|
|
$(selector).bind(
|
|
'click',
|
|
edx.dashboard.dropdown.toggleCourseActionsDropdownMenu
|
|
);
|
|
};
|
|
|
|
$(document).ready(function() {
|
|
edx.dashboard.dropdown.bindToggleButtons('.action-more');
|
|
edx.dashboard.dropdown.bindToggleButtons('.js-entitlement-action-more');
|
|
});
|
|
}(jQuery));
|