/*
* jQuery EasyTabs plugin 3.2.0
*
* Copyright (c) 2010-2011 Steve Schwartz (JangoSteve)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Date: Thu May 09 17:30:00 2013 -0500
*/
( function($) {
$.easytabs = function(container, options) {
// Attach to plugin anything that should be available via
// the $container.data('easytabs') object
var plugin = this,
$container = $(container),
defaults = {
animate: true,
panelActiveClass: "active",
tabActiveClass: "active",
defaultTab: "li:first-child",
animationSpeed: "normal",
tabs: "> ul > li",
updateHash: true,
cycle: false,
collapsible: false,
collapsedClass: "collapsed",
collapsedByDefault: true,
uiTabs: false,
transitionIn: 'fadeIn',
transitionOut: 'fadeOut',
transitionInEasing: 'swing',
transitionOutEasing: 'swing',
transitionCollapse: 'slideUp',
transitionUncollapse: 'slideDown',
transitionCollapseEasing: 'swing',
transitionUncollapseEasing: 'swing',
containerClass: "",
tabsClass: "",
tabClass: "",
panelClass: "",
cache: true,
event: 'click',
panelContext: $container
},
// Internal instance variables
// (not available via easytabs object)
$defaultTab,
$defaultTabLink,
transitions,
lastHash,
skipUpdateToHash,
animationSpeeds = {
fast: 200,
normal: 400,
slow: 600
},
// Shorthand variable so that we don't need to call
// plugin.settings throughout the plugin code
settings;
// =============================================================
// Functions available via easytabs object
// =============================================================
plugin.init = function() {
plugin.settings = settings = $.extend({}, defaults, options);
settings.bind_str = settings.event+".easytabs";
// Add jQuery UI's crazy class names to markup,
// so that markup will match theme CSS
if ( settings.uiTabs ) {
settings.tabActiveClass = 'ui-tabs-selected';
settings.containerClass = 'ui-tabs ui-widget ui-widget-content ui-corner-all';
settings.tabsClass = 'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all';
settings.tabClass = 'ui-state-default ui-corner-top';
settings.panelClass = 'ui-tabs-panel ui-widget-content ui-corner-bottom';
}
// If collapsible is true and defaultTab specified, assume user wants defaultTab showing (not collapsed)
if ( settings.collapsible && options.defaultTab !== undefined && options.collpasedByDefault === undefined ) {
settings.collapsedByDefault = false;
}
// Convert 'normal', 'fast', and 'slow' animation speed settings to their respective speed in milliseconds
if ( typeof(settings.animationSpeed) === 'string' ) {
settings.animationSpeed = animationSpeeds[settings.animationSpeed];
}
$('a.anchor').remove().prependTo('body');
// Store easytabs object on container so we can easily set
// properties throughout
$container.data('easytabs', {});
plugin.setTransitions();
plugin.getTabs();
addClasses();
setDefaultTab();
bindToTabClicks();
initHashChange();
initCycle();
// Append data-easytabs HTML attribute to make easy to query for
// easytabs instances via CSS pseudo-selector
$container.attr('data-easytabs', true);
};
// Set transitions for switching between tabs based on options.
// Could be used to update transitions if settings are changes.
plugin.setTransitions = function() {
transitions = ( settings.animate ) ? {
show: settings.transitionIn,
hide: settings.transitionOut,
speed: settings.animationSpeed,
collapse: settings.transitionCollapse,
uncollapse: settings.transitionUncollapse,
halfSpeed: settings.animationSpeed / 2
} :
{
show: "show",
hide: "hide",
speed: 0,
collapse: "hide",
uncollapse: "show",
halfSpeed: 0
};
};
// Find and instantiate tabs and panels.
// Could be used to reset tab and panel collection if markup is
// modified.
plugin.getTabs = function() {
var $matchingPanel;
// Find the initial set of elements matching the setting.tabs
// CSS selector within the container
plugin.tabs = $container.find(settings.tabs),
// Instantiate panels as empty jquery object
plugin.panels = $(),
plugin.tabs.each(function(){
var $tab = $(this),
$a = $tab.children('a'),
// targetId is the ID of the panel, which is either the
// `href` attribute for non-ajax tabs, or in the
// `data-target` attribute for ajax tabs since the `href` is
// the ajax URL
targetId = $tab.children('a').data('target');
$tab.data('easytabs', {});
// If the tab has a `data-target` attribute, and is thus an ajax tab
if ( targetId !== undefined && targetId !== null ) {
$tab.data('easytabs').ajax = $a.attr('href');
} else {
targetId = $a.attr('href');
}
targetId = targetId.match(/#([^\?]+)/)[1];
$matchingPanel = settings.panelContext.find("#" + targetId);
// If tab has a matching panel, add it to panels
if ( $matchingPanel.length ) {
// Store panel height before hiding
$matchingPanel.data('easytabs', {
position: $matchingPanel.css('position'),
visibility: $matchingPanel.css('visibility')
});
// Don't hide panel if it's active (allows `getTabs` to be called manually to re-instantiate tab collection)
$matchingPanel.not(settings.panelActiveClass).hide();
plugin.panels = plugin.panels.add($matchingPanel);
$tab.data('easytabs').panel = $matchingPanel;
// Otherwise, remove tab from tabs collection
} else {
plugin.tabs = plugin.tabs.not($tab);
if ('console' in window) {
console.warn('Warning: tab without matching panel for selector \'#' + targetId +'\' removed from set');
}
}
});
};
// Select tab and fire callback
plugin.selectTab = function($clicked, callback) {
var url = window.location,
hash = url.hash.match(/^[^\?]*/)[0],
$targetPanel = $clicked.parent().data('easytabs').panel,
ajaxUrl = $clicked.parent().data('easytabs').ajax;
// Tab is collapsible and active => toggle collapsed state
if( settings.collapsible && ! skipUpdateToHash && ($clicked.hasClass(settings.tabActiveClass) || $clicked.hasClass(settings.collapsedClass)) ) {
plugin.toggleTabCollapse($clicked, $targetPanel, ajaxUrl, callback);
// Tab is not active and panel is not active => select tab
} else if( ! $clicked.hasClass(settings.tabActiveClass) || ! $targetPanel.hasClass(settings.panelActiveClass) ){
activateTab($clicked, $targetPanel, ajaxUrl, callback);
// Cache is disabled => reload (e.g reload an ajax tab).
} else if ( ! settings.cache ){
activateTab($clicked, $targetPanel, ajaxUrl, callback);
}
};
// Toggle tab collapsed state and fire callback
plugin.toggleTabCollapse = function($clicked, $targetPanel, ajaxUrl, callback) {
plugin.panels.stop(true,true);
if( fire($container,"easytabs:before", [$clicked, $targetPanel, settings]) ){
plugin.tabs.filter("." + settings.tabActiveClass).removeClass(settings.tabActiveClass).children().removeClass(settings.tabActiveClass);
// If panel is collapsed, uncollapse it
if( $clicked.hasClass(settings.collapsedClass) ){
// If ajax panel and not already cached
if( ajaxUrl && (!settings.cache || !$clicked.parent().data('easytabs').cached) ) {
$container.trigger('easytabs:ajax:beforeSend', [$clicked, $targetPanel]);
$targetPanel.load(ajaxUrl, function(response, status, xhr){
$clicked.parent().data('easytabs').cached = true;
$container.trigger('easytabs:ajax:complete', [$clicked, $targetPanel, response, status, xhr]);
});
}
// Update CSS classes of tab and panel
$clicked.parent()
.removeClass(settings.collapsedClass)
.addClass(settings.tabActiveClass)
.children()
.removeClass(settings.collapsedClass)
.addClass(settings.tabActiveClass);
$targetPanel
.addClass(settings.panelActiveClass)
[transitions.uncollapse](transitions.speed, settings.transitionUncollapseEasing, function(){
$container.trigger('easytabs:midTransition', [$clicked, $targetPanel, settings]);
if(typeof callback == 'function') callback();
});
// Otherwise, collapse it
} else {
// Update CSS classes of tab and panel
$clicked.addClass(settings.collapsedClass)
.parent()
.addClass(settings.collapsedClass);
$targetPanel
.removeClass(settings.panelActiveClass)
[transitions.collapse](transitions.speed, settings.transitionCollapseEasing, function(){
$container.trigger("easytabs:midTransition", [$clicked, $targetPanel, settings]);
if(typeof callback == 'function') callback();
});
}
}
};
// Find tab with target panel matching value
plugin.matchTab = function(hash) {
return plugin.tabs.find("[href='" + hash + "'],[data-target='" + hash + "']").first();
};
// Find panel with `id` matching value
plugin.matchInPanel = function(hash) {
return ( hash && plugin.validId(hash) ? plugin.panels.filter(':has(' + hash + ')').first() : [] );
};
// Make sure hash is a valid id value (admittedly strict in that HTML5 allows almost anything without a space)
// but jQuery has issues with such id values anyway, so we can afford to be strict here.
plugin.validId = function(id) {
return id.substr(1).match(/^[A-Za-z]+[A-Za-z0-9\-_:\.].$/);
};
// Select matching tab when URL hash changes
plugin.selectTabFromHashChange = function() {
var hash = window.location.hash.match(/^[^\?]*/)[0],
$tab = plugin.matchTab(hash),
$panel;
if ( settings.updateHash ) {
// If hash directly matches tab
if( $tab.length ){
skipUpdateToHash = true;
plugin.selectTab( $tab );
} else {
$panel = plugin.matchInPanel(hash);
// If panel contains element matching hash
if ( $panel.length ) {
hash = '#' + $panel.attr('id');
$tab = plugin.matchTab(hash);
skipUpdateToHash = true;
plugin.selectTab( $tab );
// If default tab is not active...
} else if ( ! $defaultTab.hasClass(settings.tabActiveClass) && ! settings.cycle ) {
// ...and hash is blank or matches a parent of the tab container or
// if the last tab (before the hash updated) was one of the other tabs in this container.
if ( hash === '' || plugin.matchTab(lastHash).length || $container.closest(hash).length ) {
skipUpdateToHash = true;
plugin.selectTab( $defaultTabLink );
}
}
}
}
};
// Cycle through tabs
plugin.cycleTabs = function(tabNumber){
if(settings.cycle){
tabNumber = tabNumber % plugin.tabs.length;
$tab = $( plugin.tabs[tabNumber] ).children("a").first();
skipUpdateToHash = true;
plugin.selectTab( $tab, function() {
setTimeout(function(){ plugin.cycleTabs(tabNumber + 1); }, settings.cycle);
});
}
};
// Convenient public methods
plugin.publicMethods = {
select: function(tabSelector){
var $tab;
// Find tab container that matches selector (like 'li#tab-one' which contains tab link)
if ( ($tab = plugin.tabs.filter(tabSelector)).length === 0 ) {
// Find direct tab link that matches href (like 'a[href="#panel-1"]')
if ( ($tab = plugin.tabs.find("a[href='" + tabSelector + "']")).length === 0 ) {
// Find direct tab link that matches selector (like 'a#tab-1')
if ( ($tab = plugin.tabs.find("a" + tabSelector)).length === 0 ) {
// Find direct tab link that matches data-target (lik 'a[data-target="#panel-1"]')
if ( ($tab = plugin.tabs.find("[data-target='" + tabSelector + "']")).length === 0 ) {
// Find direct tab link that ends in the matching href (like 'a[href$="#panel-1"]', which would also match http://example.com/currentpage/#panel-1)
if ( ($tab = plugin.tabs.find("a[href$='" + tabSelector + "']")).length === 0 ) {
$.error('Tab \'' + tabSelector + '\' does not exist in tab set');
}
}
}
}
} else {
// Select the child tab link, since the first option finds the tab container (like <li>)
$tab = $tab.children("a").first();
}
plugin.selectTab($tab);
}
};
// =============================================================
// Private functions
// =============================================================
// Triggers an event on an element and returns the event result
var fire = function(obj, name, data) {
var event = $.Event(name);
obj.trigger(event, data);
return event.result !== false;
}
// Add CSS classes to markup (if specified), called by init
var addClasses = function() {
$container.addClass(settings.containerClass);
plugin.tabs.parent().addClass(settings.tabsClass);
plugin.tabs.addClass(settings.tabClass);
plugin.panels.addClass(settings.panelClass);
};
// Set the default tab, whether from hash (bookmarked) or option,
// called by init
var setDefaultTab = function(){
var hash = window.location.hash.match(/^[^\?]*/)[0],
$selectedTab = plugin.matchTab(hash).parent(),
$panel;
// If hash directly matches one of the tabs, active on page-load
if( $selectedTab.length === 1 ){
$defaultTab = $selectedTab;
settings.cycle = false;
} else {
$panel = plugin.matchInPanel(hash);
// If one of the panels contains the element matching the hash,
// make it active on page-load
if ( $panel.length ) {
hash = '#' + $panel.attr('id');
$defaultTab = plugin.matchTab(hash).parent();
// Otherwise, make the default tab the one that's active on page-load
} else {
$defaultTab = plugin.tabs.parent().find(settings.defaultTab);
if ( $defaultTab.length === 0 ) {
$.error("The specified default tab ('" + settings.defaultTab + "') could not be found in the tab set ('" + settings.tabs + "') out of " + plugin.tabs.length + " tabs.");
}
}
}
$defaultTabLink = $defaultTab.children("a").first();
activateDefaultTab($selectedTab);
};
// Activate defaultTab (or collapse by default), called by setDefaultTab
var activateDefaultTab = function($selectedTab) {
var defaultPanel,
defaultAjaxUrl;
if ( settings.collapsible && $selectedTab.length === 0 && settings.collapsedByDefault ) {
$defaultTab
.addClass(settings.collapsedClass)
.children()
.addClass(settings.collapsedClass);
} else {
defaultPanel = $( $defaultTab.data('easytabs').panel );
defaultAjaxUrl = $defaultTab.data('easytabs').ajax;
if ( defaultAjaxUrl && (!settings.cache || !$defaultTab.data('easytabs').cached) ) {
$container.trigger('easytabs:ajax:beforeSend', [$defaultTabLink, defaultPanel]);
defaultPanel.load(defaultAjaxUrl, function(response, status, xhr){
$defaultTab.data('easytabs').cached = true;
$container.trigger('easytabs:ajax:complete', [$defaultTabLink, defaultPanel, response, status, xhr]);
});
}
$defaultTab.data('easytabs').panel
.show()
.addClass(settings.panelActiveClass);
$defaultTab
.addClass(settings.tabActiveClass)
.children()
.addClass(settings.tabActiveClass);
}
// Fire event when the plugin is initialised
$container.trigger("easytabs:initialised", [$defaultTabLink, defaultPanel]);
};
// Bind tab-select funtionality to namespaced click event, called by
// init
var bindToTabClicks = function() {
plugin.tabs.children("a").bind(settings.bind_str, function(e) {
// Stop cycling when a tab is clicked
settings.cycle = false;
// Hash will be updated when tab is clicked,
// don't cause tab to re-select when hash-change event is fired
skipUpdateToHash = false;
// Select the panel for the clicked tab
plugin.selectTab( $(this) );
// Don't follow the link to the anchor
e.preventDefault ? e.preventDefault() : e.returnValue = false;
});
};
// Activate a given tab/panel, called from plugin.selectTab:
//
// * fire `easytabs:before` hook
// * get ajax if new tab is an uncached ajax tab
// * animate out previously-active panel
// * fire `easytabs:midTransition` hook
// * update URL hash
// * animate in newly-active panel
// * update CSS classes for inactive and active tabs/panels
//
// TODO: This could probably be broken out into many more modular
// functions
var activateTab = function($clicked, $targetPanel, ajaxUrl, callback) {
plugin.panels.stop(true,true);
if( fire($container,"easytabs:before", [$clicked, $targetPanel, settings]) ){
var $visiblePanel = plugin.panels.filter(":visible"),
$panelContainer = $targetPanel.parent(),
targetHeight,
visibleHeight,
heightDifference,
showPanel,
hash = window.location.hash.match(/^[^\?]*/)[0];
if (settings.animate) {
targetHeight = getHeightForHidden($targetPanel);
visibleHeight = $visiblePanel.length ? setAndReturnHeight($visiblePanel) : 0;
heightDifference = targetHeight - visibleHeight;
}
// Set lastHash to help indicate if defaultTab should be
// activated across multiple tab instances.
lastHash = hash;
// TODO: Move this function elsewhere
showPanel = function() {
// At this point, the previous panel is hidden, and the new one will be selected
$container.trigger("easytabs:midTransition", [$clicked, $targetPanel, settings]);
// Gracefully animate between panels of differing heights, start height change animation *after* panel change if panel needs to contract,
// so that there is no chance of making the visible panel overflowing the height of the target panel
if (settings.animate && settings.transitionIn == 'fadeIn') {
if (heightDifference < 0)
$panelContainer.animate({
height: $panelContainer.height() + heightDifference
}, transitions.halfSpeed ).css({ 'min-height': '' });
}
if ( settings.updateHash && ! skipUpdateToHash ) {
//window.location = url.toString().replace((url.pathname + hash), (url.pathname + $clicked.attr("href")));
// Not sure why this behaves so differently, but it's more straight forward and seems to have less side-effects
window.location.hash = '#' + $targetPanel.attr('id');
} else {
skipUpdateToHash = false;
}
$targetPanel
[transitions.show](transitions.speed, settings.transitionInEasing, function(){
$panelContainer.css({height: '', 'min-height': ''}); // After the transition, unset the height
$container.trigger("easytabs:after", [$clicked, $targetPanel, settings]);
// callback only gets called if selectTab actually does something, since it's inside the if block
if(typeof callback == 'function'){
callback();
}
});
};
if ( ajaxUrl && (!settings.cache || !$clicked.parent().data('easytabs').cached) ) {
$container.trigger('easytabs:ajax:beforeSend', [$clicked, $targetPanel]);
$targetPanel.load(ajaxUrl, function(response, status, xhr){
$clicked.parent().data('easytabs').cached = true;
$container.trigger('easytabs:ajax:complete', [$clicked, $targetPanel, response, status, xhr]);
});
}
// Gracefully animate between panels of differing heights, start height change animation *before* panel change if panel needs to expand,
// so that there is no chance of making the target panel overflowing the height of the visible panel
if( settings.animate && settings.transitionOut == 'fadeOut' ) {
if( heightDifference > 0 ) {
$panelContainer.animate({
height: ( $panelContainer.height() + heightDifference )
}, transitions.halfSpeed );
} else {
// Prevent height jumping before height transition is triggered at midTransition
$panelContainer.css({ 'min-height': $panelContainer.height() });
}
}
// Change the active tab *first* to provide immediate feedback when the user clicks
plugin.tabs.filter("." + settings.tabActiveClass).removeClass(settings.tabActiveClass).children().removeClass(settings.tabActiveClass);
plugin.tabs.filter("." + settings.collapsedClass).removeClass(settings.collapsedClass).children().removeClass(settings.collapsedClass);
$clicked.parent().addClass(settings.tabActiveClass).children().addClass(settings.tabActiveClass);
plugin.panels.filter("." + settings.panelActiveClass).removeClass(settings.panelActiveClass);
$targetPanel.addClass(settings.panelActiveClass);
if( $visiblePanel.length ) {
$visiblePanel
[transitions.hide](transitions.speed, settings.transitionOutEasing, showPanel);
} else {
$targetPanel
[transitions.uncollapse](transitions.speed, settings.transitionUncollapseEasing, showPanel);
}
}
};
// Get heights of panels to enable animation between panels of
// differing heights, called by activateTab
var getHeightForHidden = function($targetPanel){
if ( $targetPanel.data('easytabs') && $targetPanel.data('easytabs').lastHeight ) {
return $targetPanel.data('easytabs').lastHeight;
}
// this is the only property easytabs changes, so we need to grab its value on each tab change
var display = $targetPanel.css('display'),
outerCloak,
height;
// Workaround with wrapping height, because firefox returns wrong
// height if element itself has absolute positioning.
// but try/catch block needed for IE7 and IE8 because they throw
// an "Unspecified error" when trying to create an element
// with the css position set.
try {
outerCloak = $('<div></div>', {'position': 'absolute', 'visibility': 'hidden', 'overflow': 'hidden'});
} catch (e) {
outerCloak = $('<div></div>', {'visibility': 'hidden', 'overflow': 'hidden'});
}
height = $targetPanel
.wrap(outerCloak)
.css({'position':'relative','visibility':'hidden','display':'block'})
.outerHeight();
$targetPanel.unwrap();
// Return element to previous state
$targetPanel.css({
position: $targetPanel.data('easytabs').position,
visibility: $targetPanel.data('easytabs').visibility,
display: display
});
// Cache height
$targetPanel.data('easytabs').lastHeight = height;
return height;
};
// Since the height of the visible panel may have been manipulated due to interaction,
// we want to re-cache the visible height on each tab change, called
// by activateTab
var setAndReturnHeight = function($visiblePanel) {
var height = $visiblePanel.outerHeight();
if( $visiblePanel.data('easytabs') ) {
$visiblePanel.data('easytabs').lastHeight = height;
} else {
$visiblePanel.data('easytabs', {lastHeight: height});
}
return height;
};
// Setup hash-change callback for forward- and back-button
// functionality, called by init
var initHashChange = function(){
// enabling back-button with jquery.hashchange plugin
// http://benalman.com/projects/jquery-hashchange-plugin/
if(typeof $(window).hashchange === 'function'){
$(window).hashchange( function(){
plugin.selectTabFromHashChange();
});
} else if ($.address && typeof $.address.change === 'function') { // back-button with jquery.address plugin http://www.asual.com/jquery/address/docs/
$.address.change( function(){
plugin.selectTabFromHashChange();
});
}
};
// Begin cycling if set in options, called by init
var initCycle = function(){
var tabNumber;
if (settings.cycle) {
tabNumber = plugin.tabs.index($defaultTab);
setTimeout( function(){ plugin.cycleTabs(tabNumber + 1); }, settings.cycle);
}
};
plugin.init();
};
$.fn.easytabs = function(options) {
var args = arguments;
return this.each(function() {
var $this = $(this),
plugin = $this.data('easytabs');
// Initialization was called with $(el).easytabs( { options } );
if (undefined === plugin) {
plugin = new $.easytabs(this, options);
$this.data('easytabs', plugin);
}
// User called public method
if ( plugin.publicMethods[options] ){
return plugin.publicMethods[options](Array.prototype.slice.call( args, 1 ));
}
});
};
})(jQuery);