189 lines
6.7 KiB
JavaScript
189 lines
6.7 KiB
JavaScript
|
!function ($) {
|
||
|
|
||
|
"use strict";
|
||
|
|
||
|
// TABCOLLAPSE CLASS DEFINITION
|
||
|
// ======================
|
||
|
|
||
|
var TabCollapse = function (el, options) {
|
||
|
this.options = options;
|
||
|
this.$tabs = $(el);
|
||
|
|
||
|
this._accordionVisible = false; //content is attached to tabs at first
|
||
|
this._initAccordion();
|
||
|
this._checkStateOnResize();
|
||
|
|
||
|
|
||
|
// checkState() has gone to setTimeout for making it possible to attach listeners to
|
||
|
// shown-accordion.bs.tabcollapse event on page load.
|
||
|
// See https://github.com/flatlogic/bootstrap-tabcollapse/issues/23
|
||
|
var that = this;
|
||
|
setTimeout(function() {
|
||
|
that.checkState();
|
||
|
}, 0);
|
||
|
};
|
||
|
|
||
|
TabCollapse.DEFAULTS = {
|
||
|
accordionClass: 'visible-xs',
|
||
|
tabsClass: 'hidden-xs',
|
||
|
accordionTemplate: function(heading, groupId, parentId, active) {
|
||
|
return '<div class="panel panel-default">' +
|
||
|
' <div class="panel-heading">' +
|
||
|
' <h4 class="panel-title">' +
|
||
|
' </h4>' +
|
||
|
' </div>' +
|
||
|
' <div id="' + groupId + '" class="panel-collapse collapse ' + (active ? 'in' : '') + '">' +
|
||
|
' <div class="panel-body js-tabcollapse-panel-body">' +
|
||
|
' </div>' +
|
||
|
' </div>' +
|
||
|
'</div>'
|
||
|
|
||
|
}
|
||
|
};
|
||
|
|
||
|
TabCollapse.prototype.checkState = function(){
|
||
|
if (this.$tabs.is(':visible') && this._accordionVisible){
|
||
|
this.showTabs();
|
||
|
this._accordionVisible = false;
|
||
|
} else if (this.$accordion.is(':visible') && !this._accordionVisible){
|
||
|
this.showAccordion();
|
||
|
this._accordionVisible = true;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
TabCollapse.prototype.showTabs = function(){
|
||
|
var view = this;
|
||
|
this.$tabs.trigger($.Event('show-tabs.bs.tabcollapse'));
|
||
|
|
||
|
var $panelHeadings = this.$accordion.find('.js-tabcollapse-panel-heading').detach();
|
||
|
|
||
|
$panelHeadings.each(function() {
|
||
|
var $panelHeading = $(this),
|
||
|
$parentLi = $panelHeading.data('bs.tabcollapse.parentLi');
|
||
|
|
||
|
var $oldHeading = view._panelHeadingToTabHeading($panelHeading);
|
||
|
|
||
|
$parentLi.removeClass('active');
|
||
|
if ($parentLi.parent().hasClass('dropdown-menu') && !$parentLi.siblings('li').hasClass('active')) {
|
||
|
$parentLi.parent().parent().removeClass('active');
|
||
|
}
|
||
|
|
||
|
if (!$oldHeading.hasClass('collapsed')) {
|
||
|
$parentLi.addClass('active');
|
||
|
if ($parentLi.parent().hasClass('dropdown-menu')) {
|
||
|
$parentLi.parent().parent().addClass('active');
|
||
|
}
|
||
|
} else {
|
||
|
$oldHeading.removeClass('collapsed');
|
||
|
}
|
||
|
|
||
|
$parentLi.append($panelHeading);
|
||
|
});
|
||
|
|
||
|
if (!$('li').hasClass('active')) {
|
||
|
$('li').first().addClass('active')
|
||
|
}
|
||
|
|
||
|
var $panelBodies = this.$accordion.find('.js-tabcollapse-panel-body');
|
||
|
$panelBodies.each(function(){
|
||
|
var $panelBody = $(this),
|
||
|
$tabPane = $panelBody.data('bs.tabcollapse.tabpane');
|
||
|
$tabPane.append($panelBody.children('*').detach());
|
||
|
});
|
||
|
this.$accordion.html('');
|
||
|
|
||
|
this.$tabs.trigger($.Event('shown-tabs.bs.tabcollapse'));
|
||
|
};
|
||
|
|
||
|
TabCollapse.prototype.showAccordion = function(){
|
||
|
this.$tabs.trigger($.Event('show-accordion.bs.tabcollapse'));
|
||
|
|
||
|
var $headings = this.$tabs.find('li:not(.dropdown) [data-toggle="tab"], li:not(.dropdown) [data-toggle="pill"]'),
|
||
|
view = this;
|
||
|
$headings.each(function(){
|
||
|
var $heading = $(this),
|
||
|
$parentLi = $heading.parent();
|
||
|
$heading.data('bs.tabcollapse.parentLi', $parentLi);
|
||
|
view.$accordion.append(view._createAccordionGroup(view.$accordion.attr('id'), $heading.detach()));
|
||
|
});
|
||
|
|
||
|
this.$tabs.trigger($.Event('shown-accordion.bs.tabcollapse'));
|
||
|
};
|
||
|
|
||
|
TabCollapse.prototype._panelHeadingToTabHeading = function($heading) {
|
||
|
var href = $heading.attr('href').replace(/-collapse$/g, '');
|
||
|
$heading.attr({
|
||
|
'data-toggle': 'tab',
|
||
|
'href': href,
|
||
|
'data-parent': ''
|
||
|
});
|
||
|
return $heading;
|
||
|
};
|
||
|
|
||
|
TabCollapse.prototype._tabHeadingToPanelHeading = function($heading, groupId, parentId, active) {
|
||
|
$heading.addClass('js-tabcollapse-panel-heading ' + (active ? '' : 'collapsed'));
|
||
|
$heading.attr({
|
||
|
'data-toggle': 'collapse',
|
||
|
'data-parent': '#' + parentId,
|
||
|
'href': '#' + groupId
|
||
|
});
|
||
|
return $heading;
|
||
|
};
|
||
|
|
||
|
TabCollapse.prototype._checkStateOnResize = function(){
|
||
|
var view = this;
|
||
|
$(window).resize(function(){
|
||
|
clearTimeout(view._resizeTimeout);
|
||
|
view._resizeTimeout = setTimeout(function(){
|
||
|
view.checkState();
|
||
|
}, 100);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
|
||
|
TabCollapse.prototype._initAccordion = function(){
|
||
|
this.$accordion = $('<div class="panel-group ' + this.options.accordionClass + '" id="' + this.$tabs.attr('id') + '-accordion' +'"></div>');
|
||
|
this.$tabs.after(this.$accordion);
|
||
|
this.$tabs.addClass(this.options.tabsClass);
|
||
|
this.$tabs.siblings('.tab-content').addClass(this.options.tabsClass);
|
||
|
};
|
||
|
|
||
|
TabCollapse.prototype._createAccordionGroup = function(parentId, $heading){
|
||
|
var tabSelector = $heading.attr('data-target'),
|
||
|
active = $heading.data('bs.tabcollapse.parentLi').is('.active');
|
||
|
|
||
|
if (!tabSelector) {
|
||
|
tabSelector = $heading.attr('href');
|
||
|
tabSelector = tabSelector && tabSelector.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
|
||
|
}
|
||
|
|
||
|
var $tabPane = $(tabSelector),
|
||
|
groupId = $tabPane.attr('id') + '-collapse',
|
||
|
$panel = $(this.options.accordionTemplate($heading, groupId, parentId, active));
|
||
|
$panel.find('.panel-heading > .panel-title').append(this._tabHeadingToPanelHeading($heading, groupId, parentId, active));
|
||
|
$panel.find('.panel-body').append($tabPane.children('*').detach())
|
||
|
.data('bs.tabcollapse.tabpane', $tabPane);
|
||
|
|
||
|
return $panel;
|
||
|
};
|
||
|
|
||
|
|
||
|
|
||
|
// TABCOLLAPSE PLUGIN DEFINITION
|
||
|
// =======================
|
||
|
|
||
|
$.fn.tabCollapse = function (option) {
|
||
|
return this.each(function () {
|
||
|
var $this = $(this);
|
||
|
var data = $this.data('bs.tabcollapse');
|
||
|
var options = $.extend({}, TabCollapse.DEFAULTS, $this.data(), typeof option === 'object' && option);
|
||
|
|
||
|
if (!data) $this.data('bs.tabcollapse', new TabCollapse(this, options));
|
||
|
});
|
||
|
};
|
||
|
|
||
|
$.fn.tabCollapse.Constructor = TabCollapse;
|
||
|
|
||
|
|
||
|
}(window.jQuery);
|