https://www.apforgen.org/typo3temp/assets/vhs-assets-apforgen-tabs.js?1790324959

1/**
2 * Tabs wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires
7 *
8 */
9;(function ($) {
10  'use strict';
11
12  $.HSCore.components.HSTabs = {
13    /**
14     *
15     *
16     * @var Object _baseConfig
17     */
18    _baseConfig: {},
19
20    /**
21     *
22     *
23     * @var jQuery pageCollection
24     */
25    pageCollection: $(),
26
27    /**
28     * Initialization of Tabs wrapper.
29     *
30     * @param String selector (optional)
31     * @param Object config (optional)
32     *
33     * @return jQuery pageCollection - collection of initialized items.
34     */
35
36    init: function (selector, config) {
37
38      this.collection = selector && $(selector).length ? $(selector) : $();
39      if (!$(selector).length) return;
40
41      this.config = config && $.isPlainObject(config) ?
42        $.extend({}, this._baseConfig, config) : this._baseConfig;
43
44      this.config.itemSelector = selector;
45
46      this.initTabs();
47
48      return this.pageCollection;
49
50    },
51
52    initTabs: function () {
53      //Variables
54      var $self = this,
55        collection = $self.pageCollection;
56
57      //Actions
58      this.collection.each(function (i, el) {
59        //Variables
60        var windW = $(window).width(),
61          //Tabs
62          $tabs = $(el),
63          $tabsItem = $tabs.find('.nav-item'),
64          tabsType = $tabs.data('tabs-mobile-type'), //[slide-up-down], [accordion], [hide-extra-items]
65          controlClasses = $tabs.data('btn-classes'),
66          context = $tabs.parent(),
67
68          //Tabs Content
69          $tabsContent = $('#' + $tabs.data('target')),
70          $tabsContentItem = $tabsContent.find('.tab-pane');
71
72        if (windW < 767) {
73          $('body').on('click', function () {
74            if (tabsType) {
75              $tabs.slideUp(200);
76            } else {
77              $tabs.find('.nav-inner').slideUp(200);
78            }
79          });
80        } else {
81          $('body').off('click');
82        }
83
84        if (windW > 767 && tabsType) {
85          $tabs.removeAttr('style');
86          $tabsContentItem.removeAttr('style');
87          context.off('click', '.js-tabs-mobile-control');
88          context.off('click', '[role="tab"]');
89          if (tabsType == 'accordion') {
90            $tabsContent.find('.js-tabs-mobile-control').remove();
91          } else {
92            context.find('.js-tabs-mobile-control').remove();
93          }
94          return;
95        }
96
97        if (windW < 768 && tabsType == 'accordion') {
98          $self.accordionEffect($tabsContent, $tabsItem, $tabsContentItem, controlClasses);
99        } else if (windW < 768 && tabsType == 'slide-up-down') {
100          $self.slideUpDownEffect(context, $tabs, controlClasses);
101        }
102
103        //Actions
104        collection = collection.add($tabs);
105      });
106    },
107
108    slideUpDownEffect: function (context, menu, btnClasses) {
109      if (context.find('.js-tabs-mobile-control').length) return;
110
111      //Create control
112      var activeItemHTML = menu.find('.active').html();
113
114      $(menu).before('<a class="js-tabs-mobile-control ' + btnClasses + '" href="#">' + activeItemHTML + '</a>');
115
116      /*----- CLICK -----*/
117      context.on('click', '.js-tabs-mobile-control', function (e) {
118        e.stopPropagation();
119        e.preventDefault();
120
121        $(menu).slideToggle(200);
122      });
123
124      context.on('click', '[role="tab"]', function (e) {
125        e.preventDefault();
126
127        var thisHTML = $(this).html(),
128          $targetControl = $(this).closest('ul').prev('.js-tabs-mobile-control');
129
130        $targetControl.html(thisHTML);
131        $(menu).slideUp(200);
132      });
133    },
134
135    accordionEffect: function (context, menuItem, menu, btnClasses) {
136      if (context.find('.js-tabs-mobile-control').length) return;
137
138      //Create control
139      $(menu).before('<a class="js-tabs-mobile-control ' + btnClasses + '" href="#"></a>');
140
141      menuItem.each(function () {
142        var thisIndex = $(this).index(),
143          thisHTML = $(this).find('[role="tab"]').html();
144
145        if ($(this).find('[role="tab"]').hasClass('active')) {
146          $(menu[thisIndex]).prev().addClass('active');
147        }
148
149        $(menu[thisIndex]).prev().html(thisHTML);
150      });
151
152      /*----- CLICK -----*/
153      context.on('click', '.js-tabs-mobile-control', function (e) {
154        e.preventDefault();
155
156        if ($(this).hasClass('active')) return;
157
158        var contextID = context.attr('id');
159
160        context.find('.js-tabs-mobile-control').removeClass('active');
161
162        $('[data-target="' + contextID + '"]').find('.nav-link').removeClass('active');
163        var $target = $(this).next(),
164          targetID = $target.attr('id');
165
166        if ($target.hasClass('fade')) {
167          $(this).addClass('active');
168          $('[href="#' + targetID + '"]').addClass('active');
169
170          $(menu)
171            .slideUp(200);
172          $target
173            .slideDown(200, function () {
174              context.find('[role="tabpanel"]').removeClass('show active');
175              $target.addClass('show active');
176            });
177        } else {
178          $(this).addClass('active');
179          $(menu).slideUp(200);
180          $target.slideDown(200);
181        }
182      });
183    }
184  }
185
186})(jQuery);
187
188