plugins/tabs/static/js/tabs.js

   1 // storing tabs active component in localStorage
   2 //
   3 // based on plugin_helper.js, extended to store the domid of an active tab
   4 //
   5
   6 var tabs_helper = {
   7
   8     debug:false,
   9
  10     ////////// use local storage to remember the active son
  11     // xxx this is a bit fragile in that we assume the elements that need to have the 'active' class
  12     // are direct sons of the .persistent-active elements
  13     // it would be simple to overcome this weakness by requiring the template to set
  14     // .persistent-active-item on these elements active-able instead
  15     store_active_domid : function (domid,active_domid) {
  16         var key='active.'+domid;
  17         if (tabs_helper.debug) messages.debug("storing for domid " + domid + " (key=" + key + ") active_domid=" + active_domid);
  18         $.localStorage.setItem(key,active_domid);
  19     },
  20     // restore last status
  21     retrieve_last_active_domid : function (domid) {
  22         var key='active.'+domid;
  23         // don't do anything if nothing stored
  24         var retrieved=$.localStorage.getItem(key);
  25         // set default to undefined
  26         if (retrieved==null) retrieved=undefined;
  27         if (tabs_helper.debug) messages.debug ("retrieved active status for " + domid + " (key=" + key + ") -> " + retrieved);
  28         return retrieved;
  29     },
  30     // tabs_helper.set_active_domid("tabs-resources","tab-resources-list")
  31     set_active_domid : function (domid,active_domid) {
  32         if ( ! active_domid ) return;
  33         if (tabs_helper.debug) messages.debug ("setting active for " + domid + " to active_domid=" + active_domid);
  34         // build something like "#uldomid a[href='#active_domid']"
  35         var selector="#"+domid+" a[href='#"+active_domid+"']";
  36         console.log("selector="+selector);
  37         $(selector).tab('show');
  38     },
  39     set_from_saved_active_domid : function (domid) {
  40         var active_domid=tabs_helper.retrieve_last_active_domid (domid);
  41         if (tabs_helper.debug) messages.debug("restoring active domid for domid " + domid + " -> " + active_domid);
  42         tabs_helper.set_active_domid (domid,active_domid);
  43     },
  44
  45     init_all_tabs : function () {
  46         ////////// active
  47         $('.persistent-active').each(function() {
  48             var domid=this.id;
  49             tabs_helper.set_from_saved_active_domid(domid);
  50         });
  51         // on all the children of the persistent-active element
  52         $('.persistent-active>*').on('shown.bs.tab', function (e) {
  53             var active_domid=e.target;
  54             // at this point we have something like
  55             // http://localhost:8080/portal/slice/ple.inria.f14#tab-resources-list
  56             active_domid=active_domid.hash.replace("#","");
  57             // find out the domid, which is for the nearest ancestor with class
  58             // persistent-active
  59             var domid=$(e.target).closest(".persistent-active").attr('id');
  60             tabs_helper.store_active_domid(domid,active_domid);
  61             console.log("CLICKED domid="+domid+" active_domid="+active_domid);
  62         });
  63     },
  64
  65 } // global var tabs_helper
  66
  67 $(document).ready(tabs_helper.init_all_tabs);
  68
  69 (function($){
  70     $.fn.Tabs = function( method ) {
  71         // In Bootstrap 3, we need 'shown.bs.tab' instead of 'shown'
  72         // see: http://bootply.com/bootstrap-3-migration-guide
  73         $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  74           // find the plugin object inside the tab content referenced by the current tabs
  75           $('.plugin', $($(e.target).attr('href'))).trigger('show');
  76         });
  77     };
  78 })( jQuery );