https://www.phinational.org/wp-content/mu-plugins/constructive/shortcodes/tabs/public/js/main.js?ver=7.0.4

1
2(function() {
3    "use strict";
4
5    // INIT
6    var tabContentContainers = $( 'section.constructive-tab' ),
7        tabGroupsCounter = {},
8        tabGroupCounter;
9
10    // GROUP TABS
11    tabContentContainers.each( function() {
12        tabGroupsCounter[ $(this).attr('data-tab-group') ] = '';
13    });
14    for ( tabGroupCounter in tabGroupsCounter ) {
15        tabContentContainers
16            .filter( '[data-tab-group=' + tabGroupCounter + ']' )
17            .wrapAll( '<div class="constructive-tabs-wrapper" data-tab-group="' + tabGroupCounter + '" />' );
18    }
19
20    // CREATE BUTTON GROUP CONTAINERS
21    var tabContentWrappers = $( 'div.constructive-tabs-wrapper' );
22
23    $.each( tabContentWrappers, function() {
24        var wrapper = $( this ),
25            group = wrapper.attr('data-tab-group');
26        wrapper.before( '<div class="constructive-tabs-buttons" data-tab-group="' + group + '" />' );
27    });
28
29    // CREATE TAB BUTTONS
30    $.each( tabContentContainers, function() {
31        var tab = $( this ),
32            label = tab.attr('data-tab-label'),
33            id = tab.attr('data-tab-id'),
34            group = tab.attr('data-tab-group');
35        $( 'div.constructive-tabs-buttons[data-tab-group="' + group + '"]')
36            .append(
37                '<button class="constructive-tab-button" data-tab-label="' + label
38                + '" data-tab-id="' + id
39                + '" data-tab-group="' + group
40                + '">' + label
41                + '</button>'
42            );
43    });
44
45    // SELECT ACTIVE TABS AND BUTTONS
46    $.each( tabContentWrappers, function() {
47        var tabWrapper = $( this ),
48            tabs = tabWrapper.find( 'section.constructive-tab' ),
49            defaultTab = tabs.filter( function() {
50                return $( this ).hasClass( 'is-active' );
51            });
52
53        // See if default tab is set
54        // This is manually set in custom templates
55        if ( defaultTab.length > 0 ) {
56            var defaultTabID = defaultTab.attr( 'data-tab-id' );
57            defaultTab.addClass( 'is-active' );
58            var matchingButton = $( 'button.constructive-tab-button[data-tab-id="' + defaultTabID + '"]').addClass('is-active');
59        // Fall back on first tab in group
60        } else {
61            var firstTab = tabWrapper.find( 'section.constructive-tab:first-child' ).addClass( 'is-active' ),
62                firstTabID = firstTab.attr( 'data-tab-id' ),
63                matchingButton = $( 'button.constructive-tab-button[data-tab-id="' + firstTabID + '"]').addClass('is-active');
64        }
65    });
66
67    // EVENT
68    var tabButtons = $( 'button.constructive-tab-button' );
69
70    tabButtons.click( function( event ) {
71        var clickedButton = $( this ),
72            groupID = clickedButton.attr( 'data-tab-group' ),
73            tabID = clickedButton.attr( 'data-tab-id' ),
74            otherButtons = clickedButton.siblings( 'button' ),
75            otherTabs = $( 'section.constructive-tab[data-tab-group="' + groupID + '"]' ),
76            selectedTab = $( 'section.constructive-tab[data-tab-id="' + tabID + '"]' );
77
78        if ( !clickedButton.hasClass('is-active') ) {
79            otherButtons.removeClass( 'is-active' );
80            otherTabs.removeClass( 'is-active' );
81            clickedButton.addClass( 'is-active' );
82            selectedTab.addClass( 'is-active' );
83
84            $('body').trigger({
85                type: 'constructive-tab-change',
86            });
87        }
88    });
89
90})();