edx-platform/lms/static/js/dashboard/dropdown.js

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

        // eslint-disable-next-line no-shadow
        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();
            // eslint-disable-next-line brace-style
            }

            // 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();
            // eslint-disable-next-line brace-style
            }

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