Completed
Push — master ( 80fdf3...351fbc )
by Vladimir
02:43
created

assets/js/src/tabs.js (1 issue)

Upgrade to new PHP Analysis Engine

These results are based on our legacy PHP analysis, consider migrating to our new PHP analysis engine instead. Learn more

1
/**
2
 * Check whether or not the tabs are visible
3
 *
4
 * @returns {boolean}
5
 */
6
function areTabsVisible() {
7
    return ($('[role="tablist"]:visible').length >= 1);
8
}
9
10
/**
11
 * Toggle the tabs' ARIA visibility based on whether or the tabs are visible via CSS
12
 */
13
function toggleTabsAriaVisible() {
14
    $('[role="tablist"]').attr('aria-hidden', (areTabsVisible()) ? 'false' : 'true');
15
}
16
17
/**
18
 * Toggle the tab panels' ARIA visibility based on whether or not tabs are visible
19
 */
20
function toggleAriaTabPanels() {
21
    var $activeTab = $('[aria-selected="true"]');
22
23
    $('[role="tabpanel"]').each(function () {
24
        var $this = $(this);
25
26
        // Don't hide the tab panel for the currently selected tab
27
        if ($this.attr('id') === $activeTab.attr('aria-controls')) {
28
            return;
29
        }
30
31
        $this.attr('aria-hidden', (areTabsVisible()) ? 'true' : 'false');
32
    });
33
}
34
35
// To support responsive behavior, listen for the window resize event and change the tabs' visibility
36
window.addEventListener('resize', function() {
37
    toggleTabsAriaVisible();
38
    toggleAriaTabPanels();
39
});
40
41
// Our main tabbing functionality. This should all be based on ARIA attributes
42
module.exports = function() {
43
    var $tab = $('[role="tab"]');
44
45
    toggleTabsAriaVisible();
46
    toggleAriaTabPanels();
47
48
    $tab.click(function() {
49
        var $this = $(this);
50
51
        $tab.attr('aria-selected', 'false'); // deselect all the tabs
52
        $this.attr('aria-selected', 'true');  // select this tab
53
54
        var tabPanelID = $this.attr('aria-controls'); // find out what tab panel this tab controls
55
        var $tabpan = $('#' + tabPanelID);
56
57
        $('[role="tabpanel"]').attr('aria-hidden', 'true'); // hide all the panels
58
59
        $tabpan.attr('aria-hidden', 'false');  // show our panel
60
61
        $this.trigger('shown.bzion.tab', $tabpan);
62
    });
63
64
    $tab.keydown(function(e) {
65
        if (e.which === 13) {
66
            $(this).click();
67
        }
68
    })
0 ignored issues
show
There should be a semicolon.

Requirement of semicolons purely is a coding style issue since JavaScript has specific rules about semicolons which are followed by all browsers.

Further Readings:

Loading history...
69
};
70