ESPUI/data/js/tabbedcontent.js

/**
 * Tabs plugin for jQuery created by Òscar Casajuana < elboletaire at underave dot net >
 *
 * @copyright Copyright 2013-2016 Òscar Casajuana
 * @license   MIT
 * @author    Òscar Casajuana Alonso <elboletaire at underave dot net>
*/
;(function($, document, window, undefined) {
  "use strict";

  var Tabbedcontent = function(tabcontent, options) {
    var defaults = {
        links         : tabcontent.prev().find('a').length ? tabcontent.prev().find('a') : '.tabs a', // the tabs itself. By default it selects the links contained in the previous wrapper or the links inside ".tabs a" if there's no previous item
        errorSelector : '.error-message', // false to disable
        speed         : false, // speed of the show effect. Set to null or false to disable
        onSwitch      : false, // onSwitch callback
        onInit        : false, // onInit callback
        currentClass  : 'active', // current selected tab class (is set to the <a> element)
        tabErrorClass : 'has-errors', // a class to be added to the tab where errorSelector is detected
        history       : true, // set to false to disable HTML5 history
        historyOnInit : true, // allows to deactivate the history for the intial autmatically tab switch on load
        loop          : false // if set to true will loop between tabs when using the next() and prev() api methods
      },
      firstTime = false,
      children  = tabcontent.children(),
      history   = window.history,
      loc       = document.location,
      current   = null
    ;

    options = $.extend(defaults, options);

    if (!(options.links instanceof $)) {
      options.links = $(options.links);
    }

    /**
     * Checks if the specified tab id exists.
     *
     * @param  string tab Tab #id
     * @return bool
     */
    function tabExists(tab) {
      return Boolean(children.filter(tab).length);
    }
    /**
     * Checks if the current tab is the
     * first one in the tabs set.
     *
     * @return bool
     */
    function isFirst() {
      return current === 0;
    }
    /**
     * Checks if the passed number is an integer.
     *
     * @param  mixed  num The value to be checked.
     * @return bool
     */
    function isInt(num) {
      return num % 1 === 0;
    }
    /**
     * Checks if the current tab is the
     * last one in the tabs set.
     *
     * @return {Boolean} [description]
     */
    function isLast() {
      return current === children.length - 1;
    }
    /**
     * Filters a tab based on current links href.
     *
     * Method for compatibility with Zepto.js
     *
     * @param  string tab Tab #href
     * @return bool
     */
    function filterTab(tab) {
      return $(this).attr('href').match(new RegExp(tab + '$'));
    }
    /**
     * Returns an object containing two jQuery instances:
     * one for the tab content and the other for its link.
     *
     * @param  mixed tab A tab id, #id or index.
     * @return object    With thi
     */
    function getTab(tab) {
      if (tab instanceof $) {
        return {
          tab : tab,
          link : options.links.eq(tab.index())
        };
      }
      if (isInt(tab)) {
        return {
          tab : children.eq(tab),
          link : options.links.eq(tab)
        };
      }
      if (children.filter(tab).length) {
        return {
          tab : children.filter(tab),
          link : options.links.filter(function() {
            return filterTab.apply(this, [tab]);
          })
        };
      }
      // assume it's an id without #
      return {
        tab : children.filter('#' + tab),
        link : options.links.filter(function() {
          return filterTab.apply(this, ['#' + tab]);
        })
      };
    }
    /**
     * Returns the index of the current tab.
     *
     * @return int
     */
    function getCurrent() {
      return options.links.parent().filter('.' + options.currentClass).index();
    }
    /**
     * Go to the next tab in the tabs set.
     *
     * @param  bool  loop If defined will overwrite options.loop
     * @return mixed
     */
    function next(loop) {
      ++current;

      if (loop === undefined) loop = options.loop;

      if (current < children.length) {
        return switchTab(current, true);
      } else if (loop && current >= children.length) {
        return switchTab(0, true);
      }

      return false;
    }
    /**
     * Go to the previous tab in the tabs set.
     *
     * @param  bool  loop If defined will overwrite options.loop
     * @return mixed
     */
    function prev(loop) {
      --current;

      if (loop === undefined) loop = options.loop;

      if (current >= 0) {
        return switchTab(current, true);
      } else if (loop && current < 0) {
        return switchTab(children.length - 1, true);
      }

      return false;
    }
    /**
     * onSwitch callback for switchTab.
     *
     * @param  string tab The tab #id
     * @return void
     */
    function onSwitch(tab) {
      if (options.history && options.historyOnInit && firstTime && history !== undefined && ('pushState' in history)) {
        firstTime = false;
        window.setTimeout(function() {
          history.replaceState(null, '', tab);
        }, 100);
      }
      current = getCurrent();
      if (options.onSwitch && typeof options.onSwitch === 'function') {
        options.onSwitch(tab, api());
      }
      tabcontent.trigger('tabcontent.switch', [tab, api()]);
    }
    /**
     * Switch to specified tab.
     *
     * @param  mixed tab The tab to switch to.
     * @param  bool  api Set to true to force history writing.
     * @return bool      Returns false if tab does not exist; true otherwise.
     */
    function switchTab(tab, api) {
      if (!tab.toString().match(/^#/)) {
        tab = '#' + getTab(tab).tab.attr('id');
      }

      if (!tabExists(tab)) {
        return false;
      }

      // Toggle active class
      options.links.attr('aria-selected','false').parent().removeClass(options.currentClass);
      options.links.filter(function() {
        return filterTab.apply(this, [tab]);
      }).attr('aria-selected','true').parent().addClass(options.currentClass);
      // Hide tabs
      children.hide();

      // We need to force the change of the hash if we're using the API
      if (options.history && api) {
        if (history !== undefined && ('pushState' in history)) {
          history.pushState(null, '', tab);
        } else {
          // force hash change to add it to the history
          window.location.hash = tab;
        }
      }

      // Show tabs
      children.attr('aria-hidden','true').filter(tab).show(options.speed, function() {
        if (options.speed) {
          onSwitch(tab);
        }
      }).attr('aria-hidden','false');
      if (!options.speed) {
        onSwitch(tab);
      }

      return true;
    }
    /**
     * Api method to switch tabs.
     *
     * @param  mixed tab Tab to switch to.
     * @return bool      Returns false if tab does not exist; true otherwise.
     */
    function apiSwitch(tab) {
      return switchTab(tab, true);
    }
    /**
     * Method used to switch tabs using the
     * browser query hash.
     *
     * @param  object e Event.
     * @return void
     */
    function hashSwitch(e) {
      switchTab(loc.hash);
    }
    /**
     * Initialization method.
     *
     * The tab checking preference is:
     *   - document.location.hash
     *   - options.errorSelector
     *   - first tab in the set of tabs
     *
     * The onInit method is called at the
     * end of this method.
     *
     * @return void
     */
    function init() {
      // Switch to tab using location.hash
      if (tabExists(loc.hash)) {
        // Switch to current hash tab
        switchTab(loc.hash);
      }
      // If there's a tab link with the options.currentClass set,
      // switch to that tab.
      else if (options.links.parent().filter('.' + options.currentClass).length) {
        switchTab(options.links.parent().filter('.' + options.currentClass).index());
      }
      // Switch to tab containing class options.errorSelector
      else if (options.errorSelector && children.find(options.errorSelector).length) {
        // Search for errors and show first tab containing one
        children.each(function() {
          if ($(this).find(options.errorSelector).length) {
            switchTab("#" + $(this).attr("id"));
            return false;
          }
        });
      }
      // Open first tab
      else {
        switchTab("#" + children.filter(":first-child").attr("id"));
      }
      // Add a class to every tab containing errors
      if (options.errorSelector) {
        children.find(options.errorSelector).each(function() {
          var tab = getTab($(this).parent());
          tab.link.parent().addClass(options.tabErrorClass);
        });
      }

      // Binding
      if ('onhashchange' in window) {
        $(window).bind('hashchange', hashSwitch);
      } else { // old browsers
        var current_href = loc.href;
        window.setInterval(function() {
          if (current_href !== loc.href) {
            hashSwitch.call(window.event);
            current_href = loc.href;
          }
        }, 100);
      }
      // Bind click event on links, to ensure we don't rewrite the URI in
      // case history is disabled
      $(options.links).on('click', function(e) {
        switchTab($(this).attr('href').replace(/^[^#]+/, ''), options.history);
        e.preventDefault();
      });

      // onInit callback
      if (options.onInit && typeof options.onInit === 'function') {
        options.onInit(api());
      }
      tabcontent.trigger('tabcontent.init', [api()]);
    }
    /**
     * Returns the methods exposed in the api.
     *
     * @return object Containing each api method.
     */
    function api() {
      return {
        'switch'       : apiSwitch,
        'switchTab'    : apiSwitch, // for old browsers
        'getCurrent'   : getCurrent,
        'getTab'       : getTab,
        'next'         : next,
        'prev'         : prev,
        'isFirst'      : isFirst,
        'isLast'       : isLast
      };
    }

    init();

    return api();
  };

  $.fn.tabbedContent = function(options) {
    return this.each(function() {
      var tabs = new Tabbedcontent($(this), options);
      $(this).data('api', tabs);
    });
  };

})(window.jQuery || window.Zepto || window.$, document, window);