summaryrefslogtreecommitdiffstats
path: root/js/dropdown.js
blob: 58aa4fee2da75040b043ff94e099c9c2ef176b64 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/.
 *
 * This Source Code Form is "Incompatible With Secondary Licenses", as
 * defined by the Mozilla Public License, v. 2.0. */

$(function() {
    'use strict';

    $(window).click(function(e) {
        // clicking dropdown button opens or closes the dropdown content
        if (!$(e.target).hasClass('dropdown-button')) {
            $('.dropdown-button').each(function() {
                toggleDropDown(e, $(this), $('#' + $(this).attr('aria-controls')), 1);
            });
        }
    }).keydown(function(e) {
        // Escape key hides the dropdown if visible
        if (e.keyCode == 27) {
            $('.dropdown-button').each(function() {
                var $button = $(this);
                if ($button.siblings('.dropdown-content').is(':visible')) {
                    toggleDropDown(e, $button, $('#' + $button.attr('aria-controls')), 1);
                    $button.focus();
                }
            });
        }
        // allow arrow up and down keys to choose one of the dropdown items if menu visible
        if (e.keyCode == 38 || e.keyCode == 40) {
            $('.dropdown-content').each(function() {
                var $content = $(this);
                var content_id = $content.attr('id');
                var $controller = content_id ? $('[aria-controls="' + content_id + '"]') : $();
                if ($content.is(':visible')) {
                    e.preventDefault();
                    e.stopPropagation();
                    var $items = $content.find('[role="menuitem"], [role="option"]');
                    // if none active select the first or last
                    var $link = $items.filter('.active');
                    if ($link.length == 0) {
                        var index = e.keyCode == 40 ? 0 : $items.length - 1;
                        $link = $items.eq(index);
                    } else {
                        // otherwise move up or down the list based on arrow key pressed
                        var move = $items.index($link) + (e.keyCode == 40 ? 1 : -1);

                        // remove active state first
                        if ($link.length) {
                            $link.removeClass('active');

                            if ($link.attr('id') === content_id + '-active-item') {
                                $link.removeAttr('id');
                            }
                        }

                        // get the new active element
                        $link = $items.eq(move % $items.length);
                    }

                    $link.addClass('active');

                    if (content_id && !$link.attr('id')) {
                        $link.attr('id', content_id + '-active-item');
                    }

                    if ($link.attr('id')) {
                        $controller.attr('aria-activedescendant', $link.attr('id'));
                    }

                    // move focus when the dropdown's controller is not search box
                    if (!$controller.eq('input')) {
                        $link.focus();
                    }
                }
            });
        }

        // navigate to an active link or click on it
        // note that `trigger('click')` doesn't always work
        if (e.keyCode == 13) {
            var $link = $('.dropdown-content:visible a.active');
            if ($link.length) {
                if ($link.attr('href')) {
                    location.href = $link.attr('href');
                } else {
                    $link.trigger('click');
                }
            }
        }
    });

    $('.dropdown-content a').hover(
        function(){ $(this).addClass('active')  },
        function(){ $(this).removeClass('active')  }
    );

    $('.dropdown').each(function() {
        var $div     = $(this);
        var $button  = $div.find('.dropdown-button');
        var $content = $div.find('.dropdown-content');
        $button.click(function(e) {
            toggleDropDown(e, $button, $content);
        }).keydown(function(e) {
            if (e.keyCode == 13) {
                if ($button.eq('input') && !$button.val()) {
                    // prevent the form being submitted if the search bar is empty
                    e.preventDefault();
                    // navigate to an active link if any
                    var $link = $content.find('a.active');
                    if ($link.length) {
                        location.href = $link.attr('href');
                    }
                }

                // allow enter to toggle menu
                toggleDropDown(e, $button, $content);
            }
        });
    });

    function toggleDropDown(e, $button, $content, hide_only) {
        // hide other expanded dropdown menu if any
        var $expanded = $('.dropdown-button[aria-expanded="true"]');
        if ($expanded.length && !$expanded.is($button)) {
            $('#' + $expanded.attr('aria-controls')).hide();
            $expanded.attr('aria-expanded', false);
        }

        // don't expand the dropdown if there's no item
        var $items = $content.find('[role="menuitem"], [role="option"]');
        if (!$items.length) {
            return;
        }

        // clear all active links
        $content.find('a').removeClass('active');
        var content_id = $content.attr('id');
        if (content_id) {
            $('[aria-controls="' + content_id + '"]').removeAttr('aria-activedescendant');
            $content.find('#' + content_id + '-active-item').removeAttr('id');
        }
        if ($content.is(':visible')) {
            $content.hide();
            $button.attr('aria-expanded', false);
        }
        // if not using Escape or clicking outside the dropdown div, then we are hiding
        else if (!hide_only) {
            $content.show();
            $button.attr('aria-expanded', true);
        }
    }
});