92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
|
module.exports = {
|
||
|
|
pushStateSelector: null,
|
||
|
|
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* Initialize push state handling for tabs.
|
||
|
|
*/
|
||
|
|
usePushStateForTabs(selector) {
|
||
|
|
this.pushStateSelector = selector;
|
||
|
|
|
||
|
|
this.registerTabClickHandler();
|
||
|
|
|
||
|
|
window.addEventListener('popstate', e => {
|
||
|
|
this.activateTabForCurrentHash();
|
||
|
|
});
|
||
|
|
|
||
|
|
if (window.location.hash) {
|
||
|
|
this.activateTabForCurrentHash();
|
||
|
|
} else {
|
||
|
|
this.activateFirstTab();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Register the click handler for all of the tabs.
|
||
|
|
*/
|
||
|
|
registerTabClickHandler() {
|
||
|
|
const self = this;
|
||
|
|
|
||
|
|
$(`${this.pushStateSelector} a[data-toggle="tab"]`).on('click', function(e) {
|
||
|
|
self.removeActiveClassFromTabs();
|
||
|
|
|
||
|
|
history.pushState(null, null, '#/' + $(this).attr('href').substring(1));
|
||
|
|
|
||
|
|
self.broadcastTabChange($(this).attr('href').substring(1));
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Activate the tab for the current hash in the URL.
|
||
|
|
*/
|
||
|
|
activateTabForCurrentHash() {
|
||
|
|
var hash = window.location.hash.substring(2);
|
||
|
|
|
||
|
|
var parameters = hash.split('/');
|
||
|
|
|
||
|
|
hash = parameters.shift();
|
||
|
|
|
||
|
|
this.removeActiveClassFromTabs();
|
||
|
|
|
||
|
|
const tab = $(`${this.pushStateSelector} a[href="#${hash}"][data-toggle="tab"]`);
|
||
|
|
|
||
|
|
if (tab.length > 0) {
|
||
|
|
tab.tab('show');
|
||
|
|
}
|
||
|
|
|
||
|
|
this.broadcastTabChange(hash, parameters);
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Activate the first tab in a list.
|
||
|
|
*/
|
||
|
|
activateFirstTab() {
|
||
|
|
const tab = $(`${this.pushStateSelector} a[data-toggle="tab"]`).first();
|
||
|
|
|
||
|
|
tab.tab('show');
|
||
|
|
|
||
|
|
this.broadcastTabChange(tab.attr('href').substring(1));
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Remove the active class from the tabs.
|
||
|
|
*/
|
||
|
|
removeActiveClassFromTabs() {
|
||
|
|
$(`${this.pushStateSelector} li`).removeClass('active');
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Broadcast that a tab change happened.
|
||
|
|
*/
|
||
|
|
broadcastTabChange(hash, parameters) {
|
||
|
|
Bus.$emit('sparkHashChanged', hash, parameters);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|