avvo-styleguide/source/javascripts/modules/avvo_ui/components/tab.js

Avvo styleguide

/* ========================================================================
 * Avvo UI - tab.js
 * ========================================================================
 * Forked from Bootstrap tab.js v3.2.0
 * http://getbootstrap.com/javascript/#tabs
 * ========================================================================
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */

const $ = global.jQuery

// TAB CLASS DEFINITION
// ====================

const Tab = function (element) {
  this.element = $(element)
}

Tab.VERSION = '4.0.0'

Tab.prototype.show = function () {
  const $this    = this.element
  const $ul      = $this.closest('ul:not(.dropdown-menu)')
  let selector = $this.data('target')

  if (!selector) {
    selector = $this.attr('href')
    selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
  }

  if ($this.parent('li').hasClass('active')) return

  const previous = $ul.find('.active:last a')[0]
  const e        = $.Event('show.ui.tab', {
    relatedTarget: previous
  })

  $this.trigger(e)

  if (e.isDefaultPrevented()) return

  const $target = $(selector)

  this.activate($this.closest('li'), $ul)
  this.activate($target, $target.parent(), function () {
    $this.trigger({
      type: 'shown.ui.tab',
      relatedTarget: previous
    })
  })
}

Tab.prototype.activate = function (element, container, callback) {
  const $active    = container.find('> .active')
  const transition = callback
    && $.support.transition
    && $active.hasClass('fade')

  function next() {
    $active
      .removeClass('active')
      .find('> .dropdown-menu > .active')
      .removeClass('active')

    element.addClass('active')

    if (transition) {
      element[0].offsetWidth // reflow for transition
      element.addClass('in')
    } else {
      element.removeClass('fade')
    }

    if (element.parent('.dropdown-menu')) {
      element.closest('li.dropdown').addClass('active')
    }

    callback && callback()
  }

  transition ?
    $active
      .one('uiTransitionEnd', next)
      .emulateTransitionEnd(150) :
    next()

  $active.removeClass('in')
}


// TAB PLUGIN DEFINITION
// =====================

function Plugin(option) {
  return this.each(function () {
    let $this = $(this)
    let data  = $this.data('ui.tab')

    if (!data) $this.data('ui.tab', (data = new Tab(this)))
    if (typeof option == 'string') data[option]()
  })
}

export function init() {
  "use strict";

  const old = $.fn.tab

  $.fn.tab             = Plugin
  $.fn.tab.Constructor = Tab


// TAB NO CONFLICT
// ===============

  $.fn.tab.noConflict = function () {
    $.fn.tab = old
    return this
  }


// TAB DATA-API
// ============
  $(document).on('click.ui.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    Plugin.call($(this), 'show')
  })
}