Transform views select exposed filter into tabs in Drupal

Last updated on 08/06/2014
  Drupal.behaviors.selectIntoTabs = {
    attach: function(context, settings) {
      var selectToTabs = {
        select: $(),
        container: $(),
        items: [],
        // Fill items with text from options.
        makeItems: function() {
          for (var i = 0, len = this.select.find('option').length; i < len; i++) {
            var $this = this.select.find('option').eq(i);
            this.items[this.items.length] = $this.text();
          }
        },
        // Create Tabs Slider;
        // Returns html string of slider.
        maketabs: function() {
          var str = '<div class="tabs-slider tabs-slider-processed">' +
                  '<span class="tabs-slider-left"></span>' +
                  '<span class="tabs-slider-right"></span>' +
                  '<div class="tabs-slider-container">';
          for (var i = 0, len = this.items.length; i < len; i++) {
            str += '<span class="tabs-slider-item" data-val="' +
                    this.select.find('option').eq(i).val() + '">' +
                    this.items[i] + '</span>';
          }
          str += '</div></div>';
          return str;
        },
        // Adding functionality to Tabs Slider.
        fn: function() {
          var $tabsSlider = this.container.find('.tabs-slider'),
                  $tabsSliderItems = $tabsSlider.find('.tabs-slider-item');
          $tabsSlider.attr('data-total', $tabsSliderItems.length);
          $tabsSlider.attr('data-index', 0);
          $tabsSlider.attr('data-visible', 5);
 
          $tabsSliderItems.eq(0).addClass('active');
 
          $tabsSliderItems.click(function() {
            var $this = $(this),
                    $container = $this.closest('.pane-content'),
                    $select = $container.find('select');
            $this.removeClass('active').addClass('active');
            $this.siblings().removeClass('active');
 
            $select.val($this.attr('data-val'));
            $container.find('.form-submit').click();
          });
 
          if ($tabsSliderItems.length > 6) {
            $tabsSlider.addClass('show-arrows');
          }
        },
        sliderArrows: function() {
          var $tabSliderMove = $('.show-arrows'),
                  $tabSliderMoveLeft = $tabSliderMove.find('.tabs-slider-left');
          $tabSliderMoveRight = $tabSliderMove.find('.tabs-slider-right');
 
          $tabSliderMove.addClass('disabled-left');
 
          for (var i = 0, len = $tabSliderMove.length; i < len; i++) {
            var $this = $($tabSliderMove[i]);
            $this.find('.tabs-slider-item').filter(function(a) {
              return a < 5;
            }).css('display', 'inline-block');
          }
 
          $tabSliderMoveLeft.click(function() {
            var $this = $(this),
                    $container = $this.parent(),
                    current = $container.attr('data-index') | 0, // 0
                    visible = $container.attr('data-visible') | 0 // 5
            if (current > 0) {
              $container.removeClass('disabled-right');
              var prev = current - 1,
                      last = current + visible - 1;
              $container.attr('data-index', current - 1);
              $container.find('.tabs-slider-item').eq(prev).css('display', 'inline-block');
              $container.find('.tabs-slider-item').eq(last).hide();
              if (prev == 0) {
                $container.addClass('disabled-left');
              }
            }
          });
 
          $tabSliderMoveRight.click(function() {
            var $this = $(this),
                    $container = $this.parent(),
                    total = $container.attr('data-total') | 0, // 19
                    current = $container.attr('data-index') | 0, // 0
                    visible = $container.attr('data-visible') | 0, // 5
                    cango = total - visible - 1; // 19-5-1 = 13
            if (current <= cango) {
              $container.removeClass('disabled-left');
              var prev = current,
                      last = current + visible;
              $container.attr('data-index', current + 1);
              $container.find('.tabs-slider-item').eq(prev).hide();
              $container.find('.tabs-slider-item').eq(last).css('display', 'inline-block');
              if (last + 1 == total) {
                $container.addClass('disabled-right');
              }
            }
          });
        },
        execute: function() {
          // Fill items with options from select.
          this.makeItems();
          // Create slider with items.
          this.container.prepend(this.maketabs());
          // Add slider functionallity.
          this.fn();
          return true;
        },
        init: function(a, b) {
          this.select = $(a);
          this.container = $(this.select).closest('.pane-content');
          this.items = [];
          if (this.execute()) {
            if (typeof b !== 'undefined') {
              return b();
            }
          }
        }
      }
 
      if (!$('.tabs-slider-processed').length) {
        selectToTabs.init('.view-display-id-home_portfolio select');
      }
 
    }
  }