From: Thierry Parmentelat Date: Tue, 17 Dec 2013 19:40:33 +0000 (+0100) Subject: fix propagation of tabs-originated events to tab panes X-Git-Tag: myslice-0.3-0~51 X-Git-Url: http://git.onelab.eu/?p=myslice.git;a=commitdiff_plain;h=b34976c759e549dbfd112b80b2168d4c8d483b03 fix propagation of tabs-originated events to tab panes --- diff --git a/plugins/tabs/static/js/tabs.js b/plugins/tabs/static/js/tabs.js index 7c7f159c..0452b9f9 100644 --- a/plugins/tabs/static/js/tabs.js +++ b/plugins/tabs/static/js/tabs.js @@ -3,75 +3,75 @@ // based on plugin-helper.js, extended to store the domid of an active tab // -var tabs_helper = { +(function($){ - debug:false, + var tabs_helper = { - ////////// use local storage to remember the active son - // xxx this is a bit fragile in that we assume the elements that need to have the 'active' class - // are direct sons of the .persistent-active elements - // it would be simple to overcome this weakness by requiring the template to set - // .persistent-active-item on these elements active-able instead - store_active_domid : function (domid,active_domid) { - var key='active.'+domid; - if (tabs_helper.debug) messages.debug("storing for domid " + domid + " (key=" + key + ") active_domid=" + active_domid); - $.localStorage.setItem(key,active_domid); - }, - // restore last status - retrieve_last_active_domid : function (domid) { - var key='active.'+domid; - // don't do anything if nothing stored - var retrieved=$.localStorage.getItem(key); - // set default to undefined - if (retrieved==null) retrieved=undefined; - if (tabs_helper.debug) messages.debug ("retrieved active status for " + domid + " (key=" + key + ") -> " + retrieved); - return retrieved; - }, - // tabs_helper.set_active_domid("tabs-resources","tab-resources-list") - set_active_domid : function (domid,active_domid) { - if ( ! active_domid ) return; - if (tabs_helper.debug) messages.debug ("setting active for " + domid + " to active_domid=" + active_domid); - // build something like "#uldomid a[href='#active_domid']" - var selector="#"+domid+" a[href='#"+active_domid+"']"; - console.log("selector="+selector); - $(selector).tab('show'); - }, - set_from_saved_active_domid : function (domid) { - var active_domid=tabs_helper.retrieve_last_active_domid (domid); - if (tabs_helper.debug) messages.debug("restoring active domid for domid " + domid + " -> " + active_domid); - tabs_helper.set_active_domid (domid,active_domid); - }, + debug:false, - init_all_tabs : function () { - ////////// active - $('.persistent-active').each(function() { - var domid=this.id; - tabs_helper.set_from_saved_active_domid(domid); - }); - // on all the children of the persistent-active element - $('.persistent-active>*').on('shown.bs.tab', function (e) { - var active_domid=e.target; - // at this point we have something like - // http://localhost:8080/portal/slice/ple.inria.f14#tab-resources-list - active_domid=active_domid.hash.replace("#",""); - // find out the domid, which is for the nearest ancestor with class - // persistent-active - var domid=$(e.target).closest(".persistent-active").attr('id'); - tabs_helper.store_active_domid(domid,active_domid); - }); - }, + ////////// use local storage to remember the active son + // xxx this is a bit fragile in that we assume the elements that need to have the 'active' class + // are direct sons of the .persistent-active elements + // it would be simple to overcome this weakness by requiring the template to set + // .persistent-active-item on these elements active-able instead + store_active_domid : function (domid,active_domid) { + var key='active.'+domid; + if (tabs_helper.debug) messages.debug("storing for domid " + domid + " (key=" + key + ") active_domid=" + active_domid); + $.localStorage.setItem(key,active_domid); + }, + // restore last status + retrieve_last_active_domid : function (domid) { + var key='active.'+domid; + // don't do anything if nothing stored + var retrieved=$.localStorage.getItem(key); + // set default to undefined + if (retrieved==null) retrieved=undefined; + if (tabs_helper.debug) messages.debug ("retrieved active status for " + domid + " (key=" + key + ") -> " + retrieved); + return retrieved; + }, + // tabs_helper.set_active_domid("tabs-resources","tab-resources-list") + set_active_domid : function (domid,active_domid) { + if ( ! active_domid ) return; + if (tabs_helper.debug) messages.debug ("setting active for " + domid + " to active_domid=" + active_domid); + // build something like "#uldomid a[href='#active_domid']" + var selector="#"+domid+" a[href='#"+active_domid+"']"; + $(selector).tab('show'); + }, + set_from_saved_active_domid : function (domid) { + var active_domid=tabs_helper.retrieve_last_active_domid (domid); + if (tabs_helper.debug) messages.debug("restoring active domid for domid " + domid + " -> " + active_domid); + tabs_helper.set_active_domid (domid,active_domid); + }, -} // global var tabs_helper + init_all_tabs : function () { + ////////// active + $('.persistent-active').each(function() { + var domid=this.id; + tabs_helper.set_from_saved_active_domid(domid); + }); + // on all the children of the persistent-active element + $('.persistent-active>*').on('shown.bs.tab', function (e) { + var active_domid=e.target; + // at this point we have something like + // http://localhost:8080/portal/slice/ple.inria.f14#tab-resources-list + active_domid=active_domid.hash.replace("#",""); + // find out the domid, which is for the nearest ancestor with class + // persistent-active + var domid=$(e.target).closest(".persistent-active").attr('id'); + tabs_helper.store_active_domid(domid,active_domid); + }); + // In Bootstrap 3, the tab receives 'shown.bs.tab' instead of 'shown' + // see: http://bootply.com/bootstrap-3-migration-guide + // we just forward this event to the actual plugin in the tab + // + $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { + // find the plugin object inside the tab content referenced by the current tabs + $('.plugin', $($(e.target).attr('href'))).trigger('shown.bs.tab'); + }); + }, -$(document).ready(tabs_helper.init_all_tabs); + } // var tabs_helper + + $(tabs_helper.init_all_tabs); -(function($){ - $.fn.Tabs = function( method ) { - // In Bootstrap 3, we need 'shown.bs.tab' instead of 'shown' - // see: http://bootply.com/bootstrap-3-migration-guide - $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { - // find the plugin object inside the tab content referenced by the current tabs - $('.plugin', $($(e.target).attr('href'))).trigger('show'); - }); - }; })( jQuery );