https://www.caritas.es/main-files/themes/101wp-child/modules/tabs-box/tabs-box-build.js?ver=1.0.0

1(function ($) {
2
3    'use strict';
4
5    var TabsBox = function(){
6
7        var instances = [];
8
9        function initInstance(view) {
10
11            // Private properties
12            // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
13
14            var $view = view,
15                $tabContent = $view.find('.tab-content'),
16                $tabMenu = $view.find('.tab-menu'),
17                id = $view.data('id'),
18                currentTab = 1,
19                totalTabs = 0;
20
21            // Private methods
22            // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
23
24            /**
25             * setMaxHeight
26             * Setea el alto máximo general de todos los item (pestañas)
27             */
28            function setMaxHeight() {
29                var max = 0;
30
31                $tabContent.find('.item').each(function () {
32                    if ($(this).find('.col-wrapper').outerHeight() > max) {
33                        max = $(this).find('.col-wrapper').outerHeight();
34                    }
35                });
36
37                $tabContent.find('.tab-content-container').css('min-height', max);
38                // $tabContent.find('.tab-content-container').css('min-height', 350);
39            }
40
41            /**
42             * setCountSpace
43             * Setea el ancho del "contador" definido por el índice del boton clicado
44             * @param {int} index
45             */
46            function setCountSpace(index) {
47                var finalWidth = 0;
48
49                // Reset all li i colors
50                var secondaryColor = $($tabMenu.find('li').get(0)).data('secondary-color');
51
52                $tabMenu
53                    .find('li i')
54                    .css({
55                        // 'color': secondaryColor,
56                        // 'background-color': primaryColor
57                    });
58
59                if (index === totalTabs) {
60                    finalWidth = $view.find('.tab-menu').width();
61                }
62                else {
63                    for (var i = 0; i < index; i++) {
64                        var $currentLi = $($tabMenu.find('li').get(i));
65                        var primaryColor = $currentLi.data('primary-color');
66                        finalWidth += $currentLi.width();
67                        $currentLi.find('i').css({
68                            // 'color': primaryColor,
69                            // 'background-color': secondaryColor
70                        });
71                    }
72                }
73
74                $view.find('.menu-count')
75                    .delay(500)
76                    .width(finalWidth);
77            }
78
79            /**
80             * getTotalHeight
81             * Devuelve la altura total de un item
82             * @param {Object} e
83             */
84            function getTotalHeight($button) {
85                var height = 0;
86                $button.parent().find('.col-wrapper').children().each(function () {
87                    height += $(this).innerHeight();
88                });
89                // $button.parent().find('.col-wrapper').children().height();
90                
91                return height; 
92            }
93
94            /**
95             * accordionClick
96             * Evento click en un enlace de tab
97             * @param {Object} e
98             */
99            function accordionClick(e) {
100                e.preventDefault();
101                e.stopPropagation();
102
103                var $button = $(this);
104                var self = $(this);
105
106                if ( ! $button.hasClass('current') ) {
107                    $view.find('div.tab-mobile-button.current').trigger('click');
108                    $button.parent().find('.col-wrapper').animate({
109                        height: getTotalHeight($button)
110                    }, 700, function () {
111                        $button.addClass('current');
112                        $button.find('a').css({
113                            // 'color': $button.data('secondary-color'),
114                            'background-color': $button.data('primary-color')
115                        });
116                        $button.find('a span').css({
117                            // 'color': $button.data('primary-color'),
118                        });
119                        $button.find('a i').css({
120                            'color': $button.data('secondary-color'),
121                            'background-color': 'white'
122                        });
123                        $('html, body').animate({
124                            scrollTop: self.offset().top - ($('header#menu').outerHeight())
125                        }, 600);
126                    });
127                }
128                else {
129                    var $current = $view.find('div.tab-mobile-button.current');
130                    $current.parent().find('.col-wrapper').animate({
131                        height: 0
132                    }, 700, function () {
133                        $current.removeClass('current');
134                        $current.find('a').css('background-color', $current.data('secondary-color'));
135                        $button.find('a span').css({
136                                // 'color': 'white',
137                        });
138                        $current.find('a i').css({
139                            'color': $current.data('primary-color'),
140                            'background-color': 'white'
141                        });
142                    });
143                }
144            }
145
146            function setSlide(currentTab, $prevTab, $currentTab) {
147                if (Number($prevTab.data('num')) < Number($currentTab.data('num'))) {
148                    // Animation for prev tab
149                    $prevTab.removeClass('current').addClass('prev');
150                    $prevTab.animate({
151                        left: -$prevTab.parent().width()
152                    }, 400, function () {
153
154                    });
155
156                    // Calculate initial position for current tab
157                    if ($currentTab.hasClass('prev')) {
158                        $currentTab.css('left', $currentTab.parent().width());
159                    }
160
161                    // Animation for current tab
162                    $currentTab.addClass('current');
163                    $currentTab.animate({
164                        left: 0
165                    }, 400, function () {
166
167                    });
168                }
169                else if (Number($prevTab.data('num')) > Number($currentTab.data('num'))) {
170                    // Animation for prev tab
171                    $prevTab.removeClass('current');
172                    $prevTab.animate({
173                        left: $prevTab.parent().width()
174                    }, 400, function () {
175
176                    });
177
178                    // Calculate initial position for current tab
179                    if ( ! $currentTab.hasClass('prev') ) {
180                        $currentTab.css('left', -$prevTab.parent().width());
181                    }
182
183                    // Animation for current tab
184                    $currentTab.addClass('current').removeClass('prev');
185                    $currentTab.animate({
186                        left: 0
187                    }, 400, function () {
188
189                    });
190                }
191
192                setCountSpace(currentTab);
193            }
194
195            /**
196             * tabClick
197             * Evento click en un enlace de pestaña
198             * @param {Object} e
199             */
200            function tabClick(e) {
201                e.preventDefault();
202                $view.find('.menu-nav ul li.current').removeClass('current');
203                $(this).parents('li').addClass('current');
204                currentTab = Number($(this).data('num'));
205                var $prevTab = $tabContent.find('.current');
206                var $currentTab = $($tabContent.find('.item').get(currentTab - 1));
207                setSlide(currentTab, $prevTab, $currentTab);
208                // 
209                $view.find('.menu-nav ul li').removeClass('past');
210                var stop = false;

211                $view.find('.menu-nav ul li').each(function () {
212                    if (stop) { return; }
213                    if ( $(this).hasClass('current') === false ) {
214                        $(this).addClass('past');
215                    }
216                    else {
217                        stop = true;
218                    }
219                });
220            }
221
222            function bindMobile() {
223                $view.find('div.tab-mobile-button').on('click', accordionClick);
224            }
225
226            function unbindMobile() {
227                $view.find('div.tab-mobile-button a').removeClass('current');
228                // $view.find('div.tab-mobile-button a').css('background-color', $view.find('div.tab-mobile-button a').parents('div.tab-mobile-button').data('primary-color'));
229                // $view.find('div.tab-mobile-button a span').css({
230                    // 'color': 'white',
231                // });
232                // $view.find('#tab-menu a i').css({
233                //     'color': $view.find('#tab-menu a').parents('div.tab-mobile-button').data('primary-color'),
234                //     'background-color': 'white'
235                // });
236                $view.find('.col-wrapper').removeAttr('style');
237                $view.find('div.tab-mobile-button').off('click', accordionClick);
238            }
239
240            function bindDesktop() {
241                $view.find('.tab-menu a').on('click', tabClick);
242            }
243
244            function unbindDesktop() {
245                $view.find('.tab-menu a').off('click', tabClick);
246            }
247
248            function mediaQueryChangeTabs(value) {
249                if ($(window).width() < 1024 ) {
250                    unbindDesktop();
251                    unbindMobile();
252                    bindMobile();
253                }
254                else {
255                    unbindMobile();
256                    unbindDesktop();
257                    bindDesktop();
258                    setCountSpace(1);
259                    setMaxHeight();
260                }
261            }
262
263            function initInWindow(id, platform) {
264                if ($view.hasClass(id)) {
265                    // if (platform === 'mobile' || platform === 'tablet') {
266                    if ($(window).width() < 1024) {
267                        unbindDesktop();
268                        unbindMobile();
269                        bindMobile();
270                    }
271                    else {
272                        unbindMobile();
273                        unbindDesktop();
274                        bindDesktop();
275                        setCountSpace(1);
276                        setMaxHeight();
277                        /* @todo: si cuando vuelve a un módulo de pestañas queremos 
278                                  que se reinicie, descomentar esto las siguientes 
279                                  lineas */
280                        // currentTab = Number($($view.find('a[data-num="1"]').get(0)).data('num'));
281                        var $prevTab = $tabContent.find('.current');
282                        var $currentTab = $($tabContent.find('.item').get(currentTab - 1));
283                        setSlide(1, $prevTab, $currentTab);
284                    }
285                }
286            }
287
288            // instance object
289            var instance = {
290                init: function () {
291                    totalTabs = $view.find('.menu-nav ul li').length;
292
293                    // Subscribe events
294                    Events.subscribe('GENERAL_MEDIAQUERY_CHANGE', mediaQueryChangeTabs);
295                    
296                    // Trigger events
297                    Events.publish('GENERAL_MEDIAQUERY_CHECK', [mediaQueryChangeTabs]);
298
299                    $(window).resize(function () {
300                        setCountSpace(currentTab);
301                    });
302
303                    // Configuramos los colores
304                    // $view.find('.menu-count').css({
305                    //     backgroundColor: '#313131'
306                    // });
307
308                    initInWindow();
309                }
310            };
311
312            instance.init();
313
314            return instance;
315        }
316
317        /**
318         * onReady
319         */
320        function onReady() {
321            $('.module.tabs-box').each(function () {
322                instances.push(initInstance($(this)));
323            });
324        }
325
326        // DOMContentLoaded
327        $(onReady);
328
329    }
330
331    TabsBox();
332
333})(jQuery)