Difference between revisions of "Template:CSU CHINA/JS/easyResponsiveTabs.js"

Latest revision as of 08:31, 19 October 2019

(function ($) {

   $.fn.extend({
       easyResponsiveTabs: function (options) {
           var defaults = {
               type: 'default',
               width: 'auto',
               fit: true
           }
           var options = $.extend(defaults, options);
           var opt = options,
               jtype = opt.type,
               jfit = opt.fit,
               jwidth = opt.width,
               vtabs = 'vertical',
               accord = 'accordion';
           this.each(function () {
               var $respTabs = $(this);
               $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
               $respTabs.css({
                   'display': 'block',
                   'width': jwidth
               });
               $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
               jtab_options();

               function jtab_options() {
                   if (jtype == vtabs) {
                       $respTabs.addClass('resp-vtabs');
                   }
                   if (jfit == true) {
                       $respTabs.css({
                           width: '100%',
                           margin: '0px'
                       });
                   }
                   if (jtype == accord) {
                       $respTabs.addClass('resp-easy-accordion');
                       $respTabs.find('.resp-tabs-list').css('display', 'none');
                   }
               }
               var $tabItemh2;

               var itemCount = 0;
               $respTabs.find('.resp-accordion').each(function () {
                   $tabItemh2 = $(this);
                   var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').text();
                   $respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext);
                   $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
                   itemCount++;
               });
               var count = 0,
                   $tabContent;
               $respTabs.find('.resp-tab-item').each(function () {
                   $tabItem = $(this);
                   $tabItem.attr('aria-controls', 'tab_item-' + (count));
                   $tabItem.attr('role', 'tab');
                   $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
                   $respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
                   $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
                   var tabcount = 0;
                   $respTabs.find('.resp-tab-content').each(function () {
                       $tabContent = $(this);
                       $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
                       tabcount++;
                   });
                   count++;
               });
               $respTabs.find("[role=tab]").each(function () {
                   var $currentTab = $(this);
                   $currentTab.click(function () {
                       var $tabAria = $currentTab.attr('aria-controls');
                       if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
                           $respTabs.find('.resp-tab-content-active').slideUp(, function () {
                               $(this).addClass('resp-accordion-closed');
                           });
                           $currentTab.removeClass('resp-tab-active');
                           return false;
                       }
                       if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
                           $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
                           $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
                           $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
                           $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
                       } else {
                           $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
                           $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
                           $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
                           $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
                       }
                   });
                   $(window).resize(function () {
                       $respTabs.find('.resp-accordion-closed').removeAttr('style');
                   });
               });
           });
       }
   });

})(jQuery);