Track tab state (with patch)

[corey.gilmore]

Hey Jack,

I love the tab panel, the big thing I'd like is a way to deep link directly to a tab. With that in mind here's a patch based on TabPanel.js version 0.32.3.1. It adds one new flag to a TabPanel and a function to set it. If this.urlState is true then each time a tab is activated the URL is updated (site.tld/index.php#tab-tabId). TabPanel.activate() will use tabId as a default on a page load assuming some conditions are met.

Hopefully someone will find this useful.


Index: TabPanel.js
===================================================================
--- TabPanel.js (revision 469)
+++ TabPanel.js (working copy)
@@ -79,6 +79,8 @@
this.items = {};
/** @private */
this.active = null;
+ /** @private */
+ this.urlState = false;
/**
* Fires when the active TabPanelItem changes. Uses fireDirect with signature: (TabPanel this, TabPanelItem activedTab).
* @type CustomEvent
@@ -164,9 +166,14 @@

/**
* Activate a TabPanelItem. The currently active will be deactivated.
+ * If this.urlState is true and the url contains a valid tab ID that tab will be activated instead.
* @param {String} id The id of the TabPanelItem to activate.
*/
activate : function(id){
+ var re = new RegExp("#tab-([^?&]+)");
+ if(this.urlState && re.test(window.location) && this.active == null && typeof(this.items[RegExp.$1]) != "undefined" ) {
+ id = RegExp.$1;
+ }
var tab = this.items[id];
if(!tab.disabled){
if(this.active){
@@ -174,6 +181,9 @@
}
this.active = this.items[id];
this.active.show();
+ if(this.urlState) {
+ window.location = "#tab-" + id;
+ }
this.onTabChange.fireDirect(this, this.active);
}
},
@@ -184,6 +194,14 @@
*/
getActiveTab : function(){
return this.active;
+ },
+
+ /**
+ * Get the active TabPanelItem
+ * @param {Boolean} state true or false to track the tab state in the URL, allowing linking directly to a tab.
+ */
+ trackStateInURL : function(state){
+ this.urlState = state;
}

};

[jack.slocum]

I like it. I will do some testing and see if I can make part of the next release. Thank you very much for your contribution!

[corey.gilmore]

I like it. I will do some testing and see if I can make part of the next release. Thank you very much for your contribution!

Great! It's fairly simple, I could see extending it to allow tracking via the URL or a cookie. Also if you don't call trackStateInURL(true) to activate the tracking before you call activate() then if there is a tab defined in the URL it won't be displayed initially.