https://starrcompanies.com/-/media/Base-Themes/Components-Theme/Scripts/component-tabs.js

1/**
2 * Component Tabs
3 * @module Tabs
4 * @param  {jQuery} $ Instance of jQuery
5 * @return {Object} List of tabs methods
6 */
7XA.component.tabs = (function($) {
8    /**
9     * This object stores all public api methods
10     * @type {Object.<Methods>}
11     * @memberOf module:Tabs
12     * @
13     * */
14    var api = {},
15        instance;
16    /**
17     * isFlipInside chech if inside Tab component present Flip component
18     * @memberOf module:Tab
19     * @method
20     * @param {jQuery} $instance Tabs Root DOM element of tab component wrapped by jQuery
21     * @alias module:Tab.isFlipInside
22     * @return {boolean}
23     * @private
24     */
25    var isFlipInside = function(instance) {
26        return !!instance.find(".component.flip").length;
27    };
28    /**
29     * tabsScrollable modify tabs to support scroll for tabs header
30     * @memberOf module:Tab
31     * @method
32     * @param {jQuery} $tabsScroll Tabs Root DOM element of tab component wrapped by jQuery
33     * @alias module:Tab.tabsScrollable
34     * @private
35     */
36    function tabsScrollable($tabsScroll) {
37        var speed = 150; //tabs scroll speed
38
39        function initNavScroll($tabsNav) {
40            var sum = 0,
41                maxHeight = 0;
42
43            if ($tabsNav.length) {
44                $tabsNav
45                    .parent()
46                    .find(".prev")
47                    .remove();
48                $tabsNav
49                    .parent()
50                    .find(".next")
51                    .remove();
52                $tabsNav.unwrap();
53
54                $tabsNav.css("width", "auto");
55                $tabsNav.css("height", "auto");
56                $tabsNav.css("left", 0);
57            }
58
59            $tabsNav.find("li").each(function() {
60                sum += $(this).outerWidth(true);
61            });
62
63            $tabsNav.find("li").each(function() {
64                maxHeight = Math.max(maxHeight, $(this).height());
65            });
66
67            $tabsNav.wrap("<div class='wrapper'>");
68            $("<div class='next tab-slider'>></div>").insertAfter($tabsNav);
69            $("<div class='prev tab-slider'><</div>").insertBefore($tabsNav);
70
71            $tabsNav.parent().css("height", parseInt(maxHeight, 10));
72            $tabsNav
73                .parent()
74                .find(".tab-slider")
75                .css("height", parseInt(maxHeight, 10) - 2);
76            //fix for 8111
77            sum += 10;
78            if (sum > $tabsNav.parent().width()) {
79                $tabsNav
80                    .parent()
81                    .find(".prev")
82                    .hide();
83                $tabsNav.width(sum);
84            } else {
85                $tabsNav
86                    .parent()
87                    .find(".prev")
88                    .hide();
89                $tabsNav
90                    .parent()
91                    .find(".next")
92                    .hide();
93            }
94        }
95
96        function bindPrevNextEvents(current, $tabsNav) {
97            current.find(".prev").click(function() {
98                var left = parseInt($tabsNav.css("left"), 10);
99                left += speed;
100
101                if (left > 0) {
102                    left = 0;
103                    $tabsNav.stop().animate({
104                        left: left
105                    });
106
107                    $tabsNav
108                        .parent()
109                        .find(".prev")
110                        .hide();
111                    $tabsNav
112                        .parent()
113                        .find(".next")
114                        .show();
115                } else {
116                    $tabsNav.stop().animate({
117                        left: left
118                    });
119
120                    $tabsNav
121                        .parent()
122                        .find(".prev")
123                        .show();
124                    $tabsNav
125                        .parent()
126                        .find(".next")
127                        .show();
128                }
129            });
130
131            current.find(".next").click(function() {
132                var left = parseInt($tabsNav.css("left"), 10),
133                    navWidth = $tabsNav.width(),
134                    navParentWidth = $tabsNav.parent().width();
135
136                left -= speed;
137
138                if (navWidth + left < navParentWidth) {
139                    left = navWidth - navParentWidth + 20;
140                    $tabsNav.stop().animate({
141                        left: -left
142                    });
143
144                    $tabsNav
145                        .parent()
146                        .find(".prev")
147                        .show();
148                    $tabsNav
149                        .parent()
150                        .find(".next")
151                        .hide();
152                } else {
153                    $tabsNav.stop().animate({
154                        left: left
155                    });
156
157                    $tabsNav
158                        .parent()
159                        .find(".prev")
160                        .show();
161                    $tabsNav
162                        .parent()
163                        .find(".next")
164                        .show();
165                }
166            });
167        }
168
169        function bindChangeTabs($tabsNav, $tabsContainer) {
170            $tabsNav.find("li").click(function(event) {
171                var index = $(this).index(),
172                    instance = $(this).closest(".component.tabs");
173
174                $(this).addClass("active");
175                $(this)
176                    .siblings()
177                    .removeClass("active");
178
179                $tabsContainer.find(".tab").removeClass("active");
180                $tabsContainer
181                    .find(".tab:eq(" + index + ")")
182                    .addClass("active");
183
184                if (isFlipInside(instance)) {
185                    try {
186                        XA.component.flip.equalSideHeight(instance);
187                    } catch (e) {
188                        /* eslint-disable no-console */
189                        console.warn(
190                            "Error during calculation height of Flip list in toggle"
191                        ); // jshint ignore:line
192                        /* eslint-enable no-console */
193                    }
194                }
195                event.preventDefault();
196            });
197        }
198
199        function initTabsScrollable($tabs) {
200            $tabs.each(function() {
201                var $tabsNav = $(this).find(".tabs-heading"),
202                    $tabsContainer = $(this).find(".tabs-container");
203
204                $tabsNav.find("li:first-child").addClass("active");
205                $tabsContainer.find(".tab:eq(0)").addClass("active");
206
207                bindChangeTabs($tabsNav, $tabsContainer);
208                initNavScroll($tabsNav);
209                bindPrevNextEvents($(this), $tabsNav);
210            });
211        }
212
213        initTabsScrollable($tabsScroll);
214        $(window).resize(function() {
215            initTabsScrollable($tabsScroll);
216        });
217    }
218    /**
219     * selectActiveTab activate selected tab
220     * @memberOf module:Tab
221     * @method
222     * @param {jQuery} $tabNav Tabs header DOM element of tab component wrapped by jQuery
223     * @param {jQuery} $tabs Tabs content DOM element of tab component wrapped by jQuery
224     * @alias module:Tab.selectActiveTab
225     * @private
226     */
227    function selectActiveTab($tabNav, $tabs) {
228        var tabRootId = $tabNav.closest(".component.tabs").attr("id");
229        var tabToSelect = XA.queryString.getQueryParam(tabRootId || "tab");
230
231        if (
232            tabToSelect != null &&
233            !isNaN(parseInt(tabToSelect)) &&
234            isFinite(tabToSelect)
235        ) {
236            tabToSelect = parseInt(tabToSelect);
237            if ($tabNav.length > tabToSelect) {
238                $($tabNav[tabToSelect]).addClass("active");
239                $($tabs[tabToSelect]).addClass("active");
240
241                return;
242            }
243        }
244        $tabNav.first().addClass("active");
245        $tabNav.first().attr("tabindex", "0");
246        $tabs.first().addClass("active");
247    }
248
249    /**
250     * initInstance initializes component according to his option
251     * @memberOf module:Tabs
252     * @method
253     * @param {jQuery} component Root DOM element of archive component wrapped by jQuery
254     * @alias module:Tabs.initInstance
255     */
256    api.initInstance = function(component) {
257        var $tabModule = component.find(".tabs-inner");
258        if (component.hasClass("tabs-scrollable")) {
259            tabsScrollable(component);
260        } else {
261            $tabModule.each(function() {
262                var $tabNav = $(this).find(".tabs-heading > li"),
263                    $tabs = $(this).find("> .tabs-container > .tab");
264
265                selectActiveTab($tabNav, $tabs);
266
267                $tabNav
268                    .click(function(event) {
269                        var current = $(this),
270                            index = current.index(),
271                            tabInner = current.parent().parent();
272
273                        current.siblings().removeClass("active");
274                        tabInner
275                            .find("> .tabs-container > .tab")
276                            .removeClass("active");
277                        current.addClass("active");
278                        $(
279                            tabInner
280                                .children(".tabs-container")
281                                .children(".tab")
282                                .eq(index)
283                        ).addClass("active");
284                        if (isFlipInside(component)) {
285                            try {
286                                XA.component.flip.equalSideHeight(component);
287                            } catch (e) {
288                                /* eslint-disable no-console */
289                                console.warn(
290                                    "Error during calculation height of Flip list in toggle"
291                                ); // jshint ignore:line
292                                /* eslint-enable no-console */
293                            }
294                        }
295                        current.focus();
296                        event.preventDefault();
297                    })
298                    .keyup(function(event) {
299                        var currentHeading = $(this);
300                        switch (event.keyCode) {
301                            case 38: {
302                                currentHeading.prev("li").click();
303                                break;
304                            }
305                            case 40: {
306                                currentHeading.next("li").click();
307                                break;
308                            }
309                        }
310                    });
311            });
312        }
313
314        if (isFlipInside(component)) {
315            try {
316                XA.component.flip.equalSideHeight(component);
317            } catch (e) {
318                /* eslint-disable no-console */
319                console.warn(
320                    "Error during calculation height of Flip list in toggle"
321                ); // jshint ignore:line
322                /* eslint-enable no-console */
323            }
324        }
325    };
326    /**
327     * init method calls in a loop for each
328     * tabs component on a page and runs Tab's
329     * ["initInstance"]{@link module:Tabs.api.initInstance} method
330     * @memberOf module:Tabs
331     * @alias module:Tabs.init
332     */
333    api.init = function() {
334        var $tabs = $(".tabs:not(.initialized)");
335        $tabs.each(function() {
336            var instance = $(this);
337            api.initInstance(instance);
338            $(this).addClass("initialized");
339        });
340    };
341
342    return api;
343})(jQuery);
344
345XA.register("tabs", XA.component.tabs);