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));