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