https://www.xanax.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        $tabNav.first("li").focus();
248    }
249
250    /**
251     * initInstance initializes component according to his option
252     * @memberOf module:Tabs
253     * @method
254     * @param {jQuery} component Root DOM element of archive component wrapped by jQuery
255     * @alias module:Tabs.initInstance
256     */
257    api.initInstance = function(component) {
258        var $tabModule = component.find(".tabs-inner");
259        if (component.hasClass("tabs-scrollable")) {
260            tabsScrollable(component);
261        } else {
262            $tabModule.each(function() {
263                var $tabNav = $(this).find(".tabs-heading > li"),
264                    $tabs = $(this).find("> .tabs-container > .tab");
265
266                selectActiveTab($tabNav, $tabs);
267
268                $tabNav
269                    .click(function(event) {
270                        var current = $(this),
271                            index = current.index(),
272                            tabInner = current.parent().parent();
273
274                        current.siblings().removeClass("active");
275                        tabInner
276                            .find("> .tabs-container > .tab")
277                            .removeClass("active");
278                        current.addClass("active");
279                        $(
280                            tabInner
281                                .children(".tabs-container")
282                                .children(".tab")
283                                .eq(index)
284                        ).addClass("active");
285                        if (isFlipInside(component)) {
286                            try {
287                                XA.component.flip.equalSideHeight(component);
288                            } catch (e) {
289                                /* eslint-disable no-console */
290                                console.warn(
291                                    "Error during calculation height of Flip list in toggle"
292                                ); // jshint ignore:line
293                                /* eslint-enable no-console */
294                            }
295                        }
296                        current.focus();
297                        event.preventDefault();
298                    })
299                    .keyup(function(event) {
300                        var currentHeading = $(this);
301                        switch (event.keyCode) {
302                            case 38: {
303                                currentHeading.prev("li").click();
304                                break;
305                            }
306                            case 40: {
307                                currentHeading.next("li").click();
308                                break;
309                            }
310                        }
311                    });
312            });
313        }
314
315        if (isFlipInside(component)) {
316            try {
317                XA.component.flip.equalSideHeight(component);
318            } catch (e) {
319                /* eslint-disable no-console */
320                console.warn(
321                    "Error during calculation height of Flip list in toggle"
322                ); // jshint ignore:line
323                /* eslint-enable no-console */
324            }
325        }
326    };
327    /**
328     * init method calls in a loop for each
329     * tabs component on a page and runs Tab's
330     * ["initInstance"]{@link module:Tabs.api.initInstance} method
331     * @memberOf module:Tabs
332     * @alias module:Tabs.init
333     */
334    api.init = function() {
335        var $tabs = $(".tabs:not(.initialized)");
336        $tabs.each(function() {
337            var instance = $(this);
338            api.initInstance(instance);
339            $(this).addClass("initialized");
340        });
341    };
342
343    return api;
344})(jQuery);
345
346XA.register("tabs", XA.component.tabs);