Skip to content
This repository has been archived by the owner on Oct 28, 2020. It is now read-only.

Commit

Permalink
Fixed issue with bootstrap 2 accordions, fixed hash-set functionality…
Browse files Browse the repository at this point in the history 
…, minor fixed
  • Loading branch information
Stephen Hoogendijk committed Feb 3, 2014
1 parent fd34b28 commit 7b14fb0
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 47 deletions.
14 changes: 6 additions & 8 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,28 +63,26 @@ <h4 class="panel-title">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" data-tab-url="remote/delay.html" data-tab-delay="3000">
Simple remote data (with 3 second delay)
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-body">&nbsp;
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" data-toggle="tab" data-tab-url="remote/callback.html" data-tab-callback="sampleCallback">
Remote data with callback
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="panel-body">&nbsp;
</div>
</div>
</div>
Expand Down
93 changes: 55 additions & 38 deletions js/bootstrap-remote-tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,20 @@ var tabShowEvent = (bootstrapVersion2 ? 'show' : 'show.bs.tab');
var accordionShowEvent = (bootstrapVersion2 ? 'show' : 'show.bs.collapse');

$(function() {
// try to navigate to the tab/accordion last given in the URL
var hash = document.location.hash;
if (hash) {
var hasTab = $('.nav-tabs a[href*='+hash+']');
var hasTab = $('[data-toggle=tab][href='+hash+']');
if (hasTab) {
hasTab.tab(tabShowEvent);
hasTab.tab('show');
}

var hasAccordion = $('.accordion-heading a[href*='+hash+']');
if (hasAccordion) {
hasAccordion.collapse(accordionShowEvent);
var hasAccordion = $('[data-toggle=collapse][href='+hash+']');
if (hasAccordion) {
// for some reason we cannot execute the 'show' event for an accordion properly, so here's a workaround
if (hasAccordion[0] != $('[data-toggle=collapse]:first')[0]) {
hasAccordion.click();
}
}
}
});
Expand All @@ -50,30 +54,32 @@ var RemoteTabs = function() {

// enable all remote data tabs
$('[data-toggle=tab], [data-toggle=collapse]').each(function(k, tab) {
var tabObj = $(tab),
tabDiv,
tabData,
tabCallback,
var bsObj = $(tab),
bsDiv,
bsData,
bsCallback,
url,
simulateDelay,
alwaysRefresh,
hasOpenPanel = false;
hasOpenPanel = false,
originalObj;

// check if the tab has a data-url property
if(tabObj.is('[data-tab-url]')) {
url = tabObj.attr('data-tab-url');
tabDiv = $( '#' + tabObj.attr('href').split('#')[1]);
tabData = tabObj.attr('data-tab-json') || [];
tabCallback = tabObj.attr('data-tab-callback') || null;
simulateDelay = tabObj.attr('data-tab-delay') || null;
alwaysRefresh = (tabObj.is('[data-tab-always-refresh]')
&& tabObj.attr('data-tab-always-refresh') == 'true') || null,
showEvent = (tabObj.attr('data-toggle') == 'tab' ? tabShowEvent : accordionShowEvent);

if(tabData.length > 0) {
if(bsObj.is('[data-tab-url]')) {
url = bsObj.attr('data-tab-url');
bsDiv = $( '#' + bsObj.attr('href').split('#')[1]);
bsData = bsObj.attr('data-tab-json') || [];
bsCallback = bsObj.attr('data-tab-callback') || null;
simulateDelay = bsObj.attr('data-tab-delay') || null;
alwaysRefresh = (bsObj.is('[data-tab-always-refresh]')
&& bsObj.attr('data-tab-always-refresh') == 'true') || null,
originalObj = bsObj,
showEvent = (bsObj.attr('data-toggle') == 'tab' ? tabShowEvent : accordionShowEvent);

if(bsData.length > 0) {
try
{
tabData = $.parseJSON(tabData);
bsData = $.parseJSON(bsData);
} catch (exc) {
console.log('Invalid json passed to data-tab-json');
console.log(exc);
Expand All @@ -82,22 +88,22 @@ var RemoteTabs = function() {
}

if (showEvent == accordionShowEvent) {
hasOpenPanel = tabDiv.hasClass('in');
hasOpenPanel = bsDiv.hasClass('in');
// when an accordion is triggered, make the div the triggered object instead of the link
if (bootstrapVersion2) {
tabObj = tabObj.parent();
bsObj = bsObj.parent();
} else {
tabObj = tabObj.parents('.panel');
bsObj = bsObj.parents('.panel');
}

// If there is a panel already opened, make sure the data url is fetched
if (hasOpenPanel) {
me._triggerChange(null, url, tabData, tabCallback, tabObj, tabDiv, simulateDelay, alwaysRefresh);
me._triggerChange(null, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj);
}
}

tabObj.on(showEvent, function(e) {
me._triggerChange(e, url, tabData, tabCallback, tabObj, tabDiv, simulateDelay, alwaysRefresh);
bsObj.on(showEvent, function(e) {
me._triggerChange(e, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj);
});

}
Expand All @@ -108,32 +114,43 @@ var RemoteTabs = function() {
* Trigger the change
*
* @param e
* @param objDetails
* @param url
* @param bsData
* @param bsCallback
* @param bsObj
* @param bsDiv
* @param simulateDelay
* @param alwaysRefresh
* @param originalObj
*/
_triggerChange: function(e, url, tabData, tabCallback, tabObj, tabDiv, simulateDelay, alwaysRefresh) {
_triggerChange: function(e, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj) {
var me = this;

// change the hash of the location
if (e && e.target.hash != 'undefined') {
window.location.hash = e.target.hash;
if (e) {
if (typeof e.target.hash != 'undefined') {
window.location.hash = e.target.hash;
} else {
window.location.hash = originalObj.prop('hash');
}
}

if ((!tabObj.hasClass("loaded") || alwaysRefresh) &&
!tabObj.hasClass('loading')) {
if ((!bsObj.hasClass("loaded") || alwaysRefresh) &&
!bsObj.hasClass('loading')) {

if(me.hasLoadingMask) {
tabDiv.mask('Loading...');
bsDiv.mask('Loading...');
}
tabObj.addClass('loading');
bsObj.addClass('loading');

// delay the json call if it has been given a value
if(simulateDelay) {
clearTimeout(window.timer);
window.timer=setTimeout(function(){
me._executeRemoteCall(url, tabData, tabCallback, tabObj, tabDiv);
me._executeRemoteCall(url, bsData, bsCallback, bsObj, bsDiv);
}, simulateDelay);
} else {
me._executeRemoteCall(url, tabData, tabCallback, tabObj, tabDiv);
me._executeRemoteCall(url, bsData, bsCallback, bsObj, bsDiv);
}


Expand Down
2 changes: 1 addition & 1 deletion js/bootstrap-remote-tabs.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 7b14fb0

Please sign in to comment.