mirror of
https://github.com/teachingtechYT/teachingtechYT.github.io.git
synced 2024-08-30 18:23:26 +00:00
1631a2d7d3
Set a reference to the selected tab in the URL, allowing easier sharing of the calibration tool. https://github.com/jellekralt/Responsive-Tabs#set-hash
705 lines
26 KiB
JavaScript
705 lines
26 KiB
JavaScript
;(function ( $, window, undefined ) {
|
|
|
|
/** Default settings */
|
|
var defaults = {
|
|
active: null,
|
|
event: 'click',
|
|
disabled: [],
|
|
collapsible: 'accordion',
|
|
startCollapsed: false,
|
|
rotate: false,
|
|
setHash: true,
|
|
animation: 'default',
|
|
animationQueue: false,
|
|
duration: 500,
|
|
fluidHeight: true,
|
|
scrollToAccordion: false,
|
|
scrollToAccordionOnLoad: true,
|
|
scrollToAccordionOffset: 0,
|
|
accordionTabElement: '<div></div>',
|
|
navigationContainer: '',
|
|
click: function(){},
|
|
activate: function(){},
|
|
deactivate: function(){},
|
|
load: function(){},
|
|
activateState: function(){},
|
|
classes: {
|
|
stateDefault: 'r-tabs-state-default',
|
|
stateActive: 'r-tabs-state-active',
|
|
stateDisabled: 'r-tabs-state-disabled',
|
|
stateExcluded: 'r-tabs-state-excluded',
|
|
container: 'r-tabs',
|
|
ul: 'r-tabs-nav',
|
|
tab: 'r-tabs-tab',
|
|
anchor: 'r-tabs-anchor',
|
|
panel: 'r-tabs-panel',
|
|
accordionTitle: 'r-tabs-accordion-title'
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Responsive Tabs
|
|
* @constructor
|
|
* @param {object} element - The HTML element the validator should be bound to
|
|
* @param {object} options - An option map
|
|
*/
|
|
function ResponsiveTabs(element, options) {
|
|
this.element = element; // Selected DOM element
|
|
this.$element = $(element); // Selected jQuery element
|
|
|
|
this.tabs = []; // Create tabs array
|
|
this.state = ''; // Define the plugin state (tabs/accordion)
|
|
this.rotateInterval = 0; // Define rotate interval
|
|
this.$queue = $({});
|
|
|
|
// Extend the defaults with the passed options
|
|
this.options = $.extend( {}, defaults, options);
|
|
|
|
this.init();
|
|
}
|
|
|
|
|
|
/**
|
|
* This function initializes the tab plugin
|
|
*/
|
|
ResponsiveTabs.prototype.init = function () {
|
|
var _this = this;
|
|
|
|
// Load all the elements
|
|
this.tabs = this._loadElements();
|
|
this._loadClasses();
|
|
this._loadEvents();
|
|
|
|
// Window resize bind to check state
|
|
$(window).on('resize', function(e) {
|
|
_this._setState(e);
|
|
if(_this.options.fluidHeight !== true) {
|
|
_this._equaliseHeights();
|
|
}
|
|
});
|
|
|
|
// Hashchange event
|
|
$(window).on('hashchange', function(e) {
|
|
var tabRef = _this._getTabRefBySelector(window.location.hash);
|
|
var oTab = _this._getTab(tabRef);
|
|
|
|
// Check if a tab is found that matches the hash
|
|
if(tabRef >= 0 && !oTab._ignoreHashChange && !oTab.disabled) {
|
|
// If so, open the tab and auto close the current one
|
|
_this._openTab(e, _this._getTab(tabRef), true);
|
|
}
|
|
});
|
|
|
|
// Start rotate event if rotate option is defined
|
|
if(this.options.rotate !== false) {
|
|
this.startRotation();
|
|
}
|
|
|
|
// Set fluid height
|
|
if(this.options.fluidHeight !== true) {
|
|
_this._equaliseHeights();
|
|
}
|
|
|
|
// --------------------
|
|
// Define plugin events
|
|
//
|
|
|
|
// Activate: this event is called when a tab is selected
|
|
this.$element.bind('tabs-click', function(e, oTab) {
|
|
_this.options.click.call(this, e, oTab);
|
|
});
|
|
|
|
// Activate: this event is called when a tab is selected
|
|
this.$element.bind('tabs-activate', function(e, oTab) {
|
|
_this.options.activate.call(this, e, oTab);
|
|
});
|
|
// Deactivate: this event is called when a tab is closed
|
|
this.$element.bind('tabs-deactivate', function(e, oTab) {
|
|
_this.options.deactivate.call(this, e, oTab);
|
|
});
|
|
// Activate State: this event is called when the plugin switches states
|
|
this.$element.bind('tabs-activate-state', function(e, state) {
|
|
_this.options.activateState.call(this, e, state);
|
|
});
|
|
|
|
// Load: this event is called when the plugin has been loaded
|
|
this.$element.bind('tabs-load', function(e) {
|
|
var startTab;
|
|
|
|
_this._setState(e); // Set state
|
|
|
|
// Check if the panel should be collaped on load
|
|
if(_this.options.startCollapsed !== true && !(_this.options.startCollapsed === 'accordion' && _this.state === 'accordion')) {
|
|
|
|
startTab = _this._getStartTab();
|
|
|
|
// Open the initial tab
|
|
_this._openTab(e, startTab); // Open first tab
|
|
|
|
// Call the callback function
|
|
_this.options.load.call(this, e, startTab); // Call the load callback
|
|
}
|
|
});
|
|
// Trigger loaded event
|
|
this.$element.trigger('tabs-load');
|
|
};
|
|
|
|
//
|
|
// PRIVATE FUNCTIONS
|
|
//
|
|
|
|
/**
|
|
* This function loads the tab elements and stores them in an array
|
|
* @returns {Array} Array of tab elements
|
|
*/
|
|
ResponsiveTabs.prototype._loadElements = function() {
|
|
var _this = this;
|
|
var $ul = (_this.options.navigationContainer === '') ? this.$element.children('ul:first') : this.$element.find(_this.options.navigationContainer).children('ul:first');
|
|
var tabs = [];
|
|
var id = 0;
|
|
|
|
// Add the classes to the basic html elements
|
|
this.$element.addClass(_this.options.classes.container); // Tab container
|
|
$ul.addClass(_this.options.classes.ul); // List container
|
|
|
|
// Get tab buttons and store their data in an array
|
|
$('li', $ul).each(function() {
|
|
var $tab = $(this);
|
|
var isExcluded = $tab.hasClass(_this.options.classes.stateExcluded);
|
|
var $anchor, $panel, $accordionTab, $accordionAnchor, panelSelector;
|
|
|
|
// Check if the tab should be excluded
|
|
if(!isExcluded) {
|
|
|
|
$anchor = $('a', $tab);
|
|
panelSelector = $anchor.attr('href');
|
|
$panel = $(panelSelector);
|
|
$accordionTab = $(_this.options.accordionTabElement).insertBefore($panel);
|
|
$accordionAnchor = $('<a></a>').attr('href', panelSelector).html($anchor.html()).appendTo($accordionTab);
|
|
|
|
var oTab = {
|
|
_ignoreHashChange: false,
|
|
id: id,
|
|
disabled: ($.inArray(id, _this.options.disabled) !== -1),
|
|
tab: $(this),
|
|
anchor: $('a', $tab),
|
|
panel: $panel,
|
|
selector: panelSelector,
|
|
accordionTab: $accordionTab,
|
|
accordionAnchor: $accordionAnchor,
|
|
active: false
|
|
};
|
|
|
|
// 1up the ID
|
|
id++;
|
|
// Add to tab array
|
|
tabs.push(oTab);
|
|
}
|
|
});
|
|
return tabs;
|
|
};
|
|
|
|
|
|
/**
|
|
* This function adds classes to the tab elements based on the options
|
|
*/
|
|
ResponsiveTabs.prototype._loadClasses = function() {
|
|
for (var i=0; i<this.tabs.length; i++) {
|
|
this.tabs[i].tab.addClass(this.options.classes.stateDefault).addClass(this.options.classes.tab);
|
|
this.tabs[i].anchor.addClass(this.options.classes.anchor);
|
|
this.tabs[i].panel.addClass(this.options.classes.stateDefault).addClass(this.options.classes.panel);
|
|
this.tabs[i].accordionTab.addClass(this.options.classes.accordionTitle);
|
|
this.tabs[i].accordionAnchor.addClass(this.options.classes.anchor);
|
|
if(this.tabs[i].disabled) {
|
|
this.tabs[i].tab.removeClass(this.options.classes.stateDefault).addClass(this.options.classes.stateDisabled);
|
|
this.tabs[i].accordionTab.removeClass(this.options.classes.stateDefault).addClass(this.options.classes.stateDisabled);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function adds events to the tab elements
|
|
*/
|
|
ResponsiveTabs.prototype._loadEvents = function() {
|
|
var _this = this;
|
|
|
|
// Define activate event on a tab element
|
|
var fActivate = function(e) {
|
|
var current = _this._getCurrentTab(); // Fetch current tab
|
|
var activatedTab = e.data.tab;
|
|
|
|
e.preventDefault();
|
|
|
|
// Trigger click event for whenever a tab is clicked/touched even if the tab is disabled
|
|
activatedTab.tab.trigger('tabs-click', activatedTab);
|
|
|
|
// Make sure this tab isn't disabled
|
|
if(!activatedTab.disabled) {
|
|
|
|
// Check if hash has to be set in the URL location
|
|
if(_this.options.setHash) {
|
|
// Set the hash using the history api if available to tackle Chromes repaint bug on hash change
|
|
if(history.pushState) {
|
|
// Fix for missing window.location.origin in IE
|
|
if (!window.location.origin) {
|
|
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
|
|
}
|
|
|
|
history.pushState(null, null, window.location.origin + window.location.pathname + window.location.search + activatedTab.selector);
|
|
} else {
|
|
// Otherwise fallback to the hash update for sites that don't support the history api
|
|
window.location.hash = activatedTab.selector;
|
|
}
|
|
}
|
|
|
|
e.data.tab._ignoreHashChange = true;
|
|
|
|
// Check if the activated tab isnt the current one or if its collapsible. If not, do nothing
|
|
if(current !== activatedTab || _this._isCollapisble()) {
|
|
// The activated tab is either another tab of the current one. If it's the current tab it is collapsible
|
|
// Either way, the current tab can be closed
|
|
_this._closeTab(e, current);
|
|
|
|
// Check if the activated tab isnt the current one or if it isnt collapsible
|
|
if(current !== activatedTab || !_this._isCollapisble()) {
|
|
_this._openTab(e, activatedTab, false, true);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Loop tabs
|
|
for (var i=0; i<this.tabs.length; i++) {
|
|
// Add activate function to the tab and accordion selection element
|
|
this.tabs[i].anchor.on(_this.options.event, {tab: _this.tabs[i]}, fActivate);
|
|
this.tabs[i].accordionAnchor.on(_this.options.event, {tab: _this.tabs[i]}, fActivate);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function gets the tab that should be opened at start
|
|
* @returns {Object} Tab object
|
|
*/
|
|
ResponsiveTabs.prototype._getStartTab = function() {
|
|
var tabRef = this._getTabRefBySelector(window.location.hash);
|
|
var startTab;
|
|
|
|
// Check if the page has a hash set that is linked to a tab
|
|
if(tabRef >= 0 && !this._getTab(tabRef).disabled) {
|
|
// If so, set the current tab to the linked tab
|
|
startTab = this._getTab(tabRef);
|
|
} else if(this.options.active > 0 && !this._getTab(this.options.active).disabled) {
|
|
startTab = this._getTab(this.options.active);
|
|
} else {
|
|
// If not, just get the first one
|
|
startTab = this._getTab(0);
|
|
}
|
|
|
|
return startTab;
|
|
};
|
|
|
|
/**
|
|
* This function sets the current state of the plugin
|
|
* @param {Event} e - The event that triggers the state change
|
|
*/
|
|
ResponsiveTabs.prototype._setState = function(e) {
|
|
var $ul = $('ul:first', this.$element);
|
|
var oldState = this.state;
|
|
var startCollapsedIsState = (typeof this.options.startCollapsed === 'string');
|
|
var startTab;
|
|
|
|
// The state is based on the visibility of the tabs list
|
|
if($ul.is(':visible')){
|
|
// Tab list is visible, so the state is 'tabs'
|
|
this.state = 'tabs';
|
|
} else {
|
|
// Tab list is invisible, so the state is 'accordion'
|
|
this.state = 'accordion';
|
|
}
|
|
|
|
// If the new state is different from the old state
|
|
if(this.state !== oldState) {
|
|
// If so, the state activate trigger must be called
|
|
this.$element.trigger('tabs-activate-state', {oldState: oldState, newState: this.state});
|
|
|
|
// Check if the state switch should open a tab
|
|
if(oldState && startCollapsedIsState && this.options.startCollapsed !== this.state && this._getCurrentTab() === undefined) {
|
|
// Get initial tab
|
|
startTab = this._getStartTab(e);
|
|
// Open the initial tab
|
|
this._openTab(e, startTab); // Open first tab
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function opens a tab
|
|
* @param {Event} e - The event that triggers the tab opening
|
|
* @param {Object} oTab - The tab object that should be opened
|
|
* @param {Boolean} closeCurrent - Defines if the current tab should be closed
|
|
* @param {Boolean} stopRotation - Defines if the tab rotation loop should be stopped
|
|
*/
|
|
ResponsiveTabs.prototype._openTab = function(e, oTab, closeCurrent, stopRotation) {
|
|
var _this = this;
|
|
var scrollOffset;
|
|
|
|
// Check if the current tab has to be closed
|
|
if(closeCurrent) {
|
|
this._closeTab(e, this._getCurrentTab());
|
|
}
|
|
|
|
// Check if the rotation has to be stopped when activated
|
|
if(stopRotation && this.rotateInterval > 0) {
|
|
this.stopRotation();
|
|
}
|
|
|
|
// Set this tab to active
|
|
oTab.active = true;
|
|
// Set active classes to the tab button and accordion tab button
|
|
oTab.tab.removeClass(_this.options.classes.stateDefault).addClass(_this.options.classes.stateActive);
|
|
oTab.accordionTab.removeClass(_this.options.classes.stateDefault).addClass(_this.options.classes.stateActive);
|
|
|
|
// Run panel transiton
|
|
_this._doTransition(oTab.panel, _this.options.animation, 'open', function() {
|
|
var scrollOnLoad = (e.type !== 'tabs-load' || _this.options.scrollToAccordionOnLoad);
|
|
|
|
// When finished, set active class to the panel
|
|
oTab.panel.removeClass(_this.options.classes.stateDefault).addClass(_this.options.classes.stateActive);
|
|
|
|
// And if enabled and state is accordion, scroll to the accordion tab
|
|
if(_this.getState() === 'accordion' && _this.options.scrollToAccordion && (!_this._isInView(oTab.accordionTab) || _this.options.animation !== 'default') && scrollOnLoad) {
|
|
|
|
// Add offset element's height to scroll position
|
|
scrollOffset = oTab.accordionTab.offset().top - _this.options.scrollToAccordionOffset;
|
|
|
|
// Check if the animation option is enabled, and if the duration isn't 0
|
|
if(_this.options.animation !== 'default' && _this.options.duration > 0) {
|
|
// If so, set scrollTop with animate and use the 'animation' duration
|
|
$('html, body').animate({
|
|
scrollTop: scrollOffset
|
|
}, _this.options.duration);
|
|
} else {
|
|
// If not, just set scrollTop
|
|
$('html, body').scrollTop(scrollOffset);
|
|
}
|
|
}
|
|
});
|
|
|
|
this.$element.trigger('tabs-activate', oTab);
|
|
};
|
|
|
|
/**
|
|
* This function closes a tab
|
|
* @param {Event} e - The event that is triggered when a tab is closed
|
|
* @param {Object} oTab - The tab object that should be closed
|
|
*/
|
|
ResponsiveTabs.prototype._closeTab = function(e, oTab) {
|
|
var _this = this;
|
|
var doQueueOnState = typeof _this.options.animationQueue === 'string';
|
|
var doQueue;
|
|
|
|
if(oTab !== undefined) {
|
|
if(doQueueOnState && _this.getState() === _this.options.animationQueue) {
|
|
doQueue = true;
|
|
} else if(doQueueOnState) {
|
|
doQueue = false;
|
|
} else {
|
|
doQueue = _this.options.animationQueue;
|
|
}
|
|
|
|
// Deactivate tab
|
|
oTab.active = false;
|
|
// Set default class to the tab button
|
|
oTab.tab.removeClass(_this.options.classes.stateActive).addClass(_this.options.classes.stateDefault);
|
|
|
|
// Run panel transition
|
|
_this._doTransition(oTab.panel, _this.options.animation, 'close', function() {
|
|
// Set default class to the accordion tab button and tab panel
|
|
oTab.accordionTab.removeClass(_this.options.classes.stateActive).addClass(_this.options.classes.stateDefault);
|
|
oTab.panel.removeClass(_this.options.classes.stateActive).addClass(_this.options.classes.stateDefault);
|
|
}, !doQueue);
|
|
|
|
this.$element.trigger('tabs-deactivate', oTab);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function runs an effect on a panel
|
|
* @param {Element} panel - The HTML element of the tab panel
|
|
* @param {String} method - The transition method reference
|
|
* @param {String} state - The state (open/closed) that the panel should transition to
|
|
* @param {Function} callback - The callback function that is called after the transition
|
|
* @param {Boolean} dequeue - Defines if the event queue should be dequeued after the transition
|
|
*/
|
|
ResponsiveTabs.prototype._doTransition = function(panel, method, state, callback, dequeue) {
|
|
var effect;
|
|
var _this = this;
|
|
|
|
// Get effect based on method
|
|
switch(method) {
|
|
case 'slide':
|
|
effect = (state === 'open') ? 'slideDown' : 'slideUp';
|
|
break;
|
|
case 'fade':
|
|
effect = (state === 'open') ? 'fadeIn' : 'fadeOut';
|
|
break;
|
|
default:
|
|
effect = (state === 'open') ? 'show' : 'hide';
|
|
// When default is used, set the duration to 0
|
|
_this.options.duration = 0;
|
|
break;
|
|
}
|
|
|
|
// Add the transition to a custom queue
|
|
this.$queue.queue('responsive-tabs',function(next){
|
|
// Run the transition on the panel
|
|
panel[effect]({
|
|
duration: _this.options.duration,
|
|
complete: function() {
|
|
// Call the callback function
|
|
callback.call(panel, method, state);
|
|
// Run the next function in the queue
|
|
next();
|
|
}
|
|
});
|
|
});
|
|
|
|
// When the panel is openend, dequeue everything so the animation starts
|
|
if(state === 'open' || dequeue) {
|
|
this.$queue.dequeue('responsive-tabs');
|
|
}
|
|
|
|
};
|
|
|
|
/**
|
|
* This function returns the collapsibility of the tab in this state
|
|
* @returns {Boolean} The collapsibility of the tab
|
|
*/
|
|
ResponsiveTabs.prototype._isCollapisble = function() {
|
|
return (typeof this.options.collapsible === 'boolean' && this.options.collapsible) || (typeof this.options.collapsible === 'string' && this.options.collapsible === this.getState());
|
|
};
|
|
|
|
/**
|
|
* This function returns a tab by numeric reference
|
|
* @param {Integer} numRef - Numeric tab reference
|
|
* @returns {Object} Tab object
|
|
*/
|
|
ResponsiveTabs.prototype._getTab = function(numRef) {
|
|
return this.tabs[numRef];
|
|
};
|
|
|
|
/**
|
|
* This function returns the numeric tab reference based on a hash selector
|
|
* @param {String} selector - Hash selector
|
|
* @returns {Integer} Numeric tab reference
|
|
*/
|
|
ResponsiveTabs.prototype._getTabRefBySelector = function(selector) {
|
|
// Loop all tabs
|
|
for (var i=0; i<this.tabs.length; i++) {
|
|
// Check if the hash selector is equal to the tab selector
|
|
if(this.tabs[i].selector === selector) {
|
|
return i;
|
|
}
|
|
}
|
|
// If none is found return a negative index
|
|
return -1;
|
|
};
|
|
|
|
/**
|
|
* This function returns the current tab element
|
|
* @returns {Object} Current tab element
|
|
*/
|
|
ResponsiveTabs.prototype._getCurrentTab = function() {
|
|
return this._getTab(this._getCurrentTabRef());
|
|
};
|
|
|
|
/**
|
|
* This function returns the next tab's numeric reference
|
|
* @param {Integer} currentTabRef - Current numeric tab reference
|
|
* @returns {Integer} Numeric tab reference
|
|
*/
|
|
ResponsiveTabs.prototype._getNextTabRef = function(currentTabRef) {
|
|
var tabRef = (currentTabRef || this._getCurrentTabRef());
|
|
var nextTabRef = (tabRef === this.tabs.length - 1) ? 0 : tabRef + 1;
|
|
return (this._getTab(nextTabRef).disabled) ? this._getNextTabRef(nextTabRef) : nextTabRef;
|
|
};
|
|
|
|
/**
|
|
* This function returns the previous tab's numeric reference
|
|
* @returns {Integer} Numeric tab reference
|
|
*/
|
|
ResponsiveTabs.prototype._getPreviousTabRef = function() {
|
|
return (this._getCurrentTabRef() === 0) ? this.tabs.length - 1 : this._getCurrentTabRef() - 1;
|
|
};
|
|
|
|
/**
|
|
* This function returns the current tab's numeric reference
|
|
* @returns {Integer} Numeric tab reference
|
|
*/
|
|
ResponsiveTabs.prototype._getCurrentTabRef = function() {
|
|
// Loop all tabs
|
|
for (var i=0; i<this.tabs.length; i++) {
|
|
// If this tab is active, return it
|
|
if(this.tabs[i].active) {
|
|
return i;
|
|
}
|
|
}
|
|
// No tabs have been found, return negative index
|
|
return -1;
|
|
};
|
|
|
|
/**
|
|
* This function gets the tallest tab and applied the height to all tabs
|
|
*/
|
|
ResponsiveTabs.prototype._equaliseHeights = function() {
|
|
var maxHeight = 0;
|
|
|
|
$.each($.map(this.tabs, function(tab) {
|
|
maxHeight = Math.max(maxHeight, tab.panel.css('minHeight', '').height());
|
|
return tab.panel;
|
|
}), function() {
|
|
this.css('minHeight', maxHeight);
|
|
});
|
|
};
|
|
|
|
//
|
|
// HELPER FUNCTIONS
|
|
//
|
|
|
|
ResponsiveTabs.prototype._isInView = function($element) {
|
|
var docViewTop = $(window).scrollTop(),
|
|
docViewBottom = docViewTop + $(window).height(),
|
|
elemTop = $element.offset().top,
|
|
elemBottom = elemTop + $element.height();
|
|
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
|
|
};
|
|
|
|
//
|
|
// PUBLIC FUNCTIONS
|
|
//
|
|
|
|
/**
|
|
* This function activates a tab
|
|
* @param {Integer} tabRef - Numeric tab reference
|
|
* @param {Boolean} stopRotation - Defines if the tab rotation should stop after activation
|
|
*/
|
|
ResponsiveTabs.prototype.activate = function(tabRef, stopRotation) {
|
|
var e = jQuery.Event('tabs-activate');
|
|
var oTab = this._getTab(tabRef);
|
|
if(!oTab.disabled) {
|
|
this._openTab(e, oTab, true, stopRotation || true);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function deactivates a tab
|
|
* @param {Integer} tabRef - Numeric tab reference
|
|
*/
|
|
ResponsiveTabs.prototype.deactivate = function(tabRef) {
|
|
var e = jQuery.Event('tabs-dectivate');
|
|
var oTab = this._getTab(tabRef);
|
|
if(!oTab.disabled) {
|
|
this._closeTab(e, oTab);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function enables a tab
|
|
* @param {Integer} tabRef - Numeric tab reference
|
|
*/
|
|
ResponsiveTabs.prototype.enable = function(tabRef) {
|
|
var oTab = this._getTab(tabRef);
|
|
if(oTab){
|
|
oTab.disabled = false;
|
|
oTab.tab.addClass(this.options.classes.stateDefault).removeClass(this.options.classes.stateDisabled);
|
|
oTab.accordionTab.addClass(this.options.classes.stateDefault).removeClass(this.options.classes.stateDisabled);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function disable a tab
|
|
* @param {Integer} tabRef - Numeric tab reference
|
|
*/
|
|
ResponsiveTabs.prototype.disable = function(tabRef) {
|
|
var oTab = this._getTab(tabRef);
|
|
if(oTab){
|
|
oTab.disabled = true;
|
|
oTab.tab.removeClass(this.options.classes.stateDefault).addClass(this.options.classes.stateDisabled);
|
|
oTab.accordionTab.removeClass(this.options.classes.stateDefault).addClass(this.options.classes.stateDisabled);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function gets the current state of the plugin
|
|
* @returns {String} State of the plugin
|
|
*/
|
|
ResponsiveTabs.prototype.getState = function() {
|
|
return this.state;
|
|
};
|
|
|
|
/**
|
|
* This function starts the rotation of the tabs
|
|
* @param {Integer} speed - The speed of the rotation
|
|
*/
|
|
ResponsiveTabs.prototype.startRotation = function(speed) {
|
|
var _this = this;
|
|
// Make sure not all tabs are disabled
|
|
if(this.tabs.length > this.options.disabled.length) {
|
|
this.rotateInterval = setInterval(function(){
|
|
var e = jQuery.Event('rotate');
|
|
_this._openTab(e, _this._getTab(_this._getNextTabRef()), true);
|
|
}, speed || (($.isNumeric(_this.options.rotate)) ? _this.options.rotate : 4000) );
|
|
} else {
|
|
throw new Error("Rotation is not possible if all tabs are disabled");
|
|
}
|
|
};
|
|
|
|
/**
|
|
* This function stops the rotation of the tabs
|
|
*/
|
|
ResponsiveTabs.prototype.stopRotation = function() {
|
|
window.clearInterval(this.rotateInterval);
|
|
this.rotateInterval = 0;
|
|
};
|
|
|
|
/**
|
|
* This function can be used to get/set options
|
|
* @return {any} Option value
|
|
*/
|
|
ResponsiveTabs.prototype.option = function(key, value) {
|
|
if(value) {
|
|
this.options[key] = value;
|
|
}
|
|
return this.options[key];
|
|
};
|
|
|
|
/** jQuery wrapper */
|
|
$.fn.responsiveTabs = function ( options ) {
|
|
var args = arguments;
|
|
var instance;
|
|
|
|
if (options === undefined || typeof options === 'object') {
|
|
return this.each(function () {
|
|
if (!$.data(this, 'responsivetabs')) {
|
|
$.data(this, 'responsivetabs', new ResponsiveTabs( this, options ));
|
|
}
|
|
});
|
|
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
|
|
instance = $.data(this[0], 'responsivetabs');
|
|
|
|
// Allow instances to be destroyed via the 'destroy' method
|
|
if (options === 'destroy') {
|
|
// TODO: destroy instance classes, etc
|
|
$.data(this, 'responsivetabs', null);
|
|
}
|
|
|
|
if (instance instanceof ResponsiveTabs && typeof instance[options] === 'function') {
|
|
return instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
|
|
} else {
|
|
return this;
|
|
}
|
|
}
|
|
};
|
|
|
|
}(jQuery, window));
|