From f19bceaa080ab47bae751cd0597a9fb32d1b6b4f Mon Sep 17 00:00:00 2001 From: Thierry Parmentelat Date: Fri, 29 Nov 2013 09:46:33 +0100 Subject: [PATCH] the tabs plugin has a persistent_active feature to enable saving the active tab in html5 storage --- plugins/tabs/__init__.py | 22 ++++++++++ plugins/tabs/static/js/tabs.js | 68 +++++++++++++++++++++++++++++++ plugins/tabs/templates/tabs.html | 2 +- portal/sliceview.py | 1 + unfold/composite.py | 13 +++--- unfold/static/js/plugin_helper.js | 17 ++++---- 6 files changed, 109 insertions(+), 14 deletions(-) diff --git a/plugins/tabs/__init__.py b/plugins/tabs/__init__.py index d1b9bda3..4bab62d9 100644 --- a/plugins/tabs/__init__.py +++ b/plugins/tabs/__init__.py @@ -1,7 +1,24 @@ from unfold.composite import Composite +# although the persistent_active feature originally targetted any kind of +# composite widget, the current implementation clearly +# works only with Tabs, as the javascript function for enabling a given tab +# cannot just set the 'active' class on some DOM element, but is required +# by bootstrap to call the tab() javascript method + class Tabs (Composite): + """A composite plugin for arranging sons as selectable tabs + +persistent_active: if set to True, enables preserving +the domid for the active tab, so that a given page +will re-open with the same active tab +""" + + def __init__ (self, persistent_active=False, *args, **kwds): + Composite.__init__ (self, *args, **kwds) + self.persistent_active=persistent_active + def requirements (self): return { 'js_files' : ['js/tabs.js', 'js/bootstrap.js'], 'css_files' : ['css/bootstrap.css', 'css/tabs.css', ] @@ -10,6 +27,11 @@ class Tabs (Composite): def template_file (self): return "tabs.html" + def template_env (self, request): + inherited=Composite.template_env(self,request) + inherited.update({'persistent_active':self.persistent_active}) + return inherited + # see Composite.py for the details of template_env, that exposes global # 'sons' as a list of sons with each a set of a few attributes def json_settings_list (self): diff --git a/plugins/tabs/static/js/tabs.js b/plugins/tabs/static/js/tabs.js index 75ce452a..bfd568a9 100644 --- a/plugins/tabs/static/js/tabs.js +++ b/plugins/tabs/static/js/tabs.js @@ -1,3 +1,71 @@ +// storing tabs active component in localStorage +// +// based on plugin_helper.js, extended to store the domid of an active tab +// + +var tabs_helper = { + + debug:false, + + ////////// 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); + }, + + 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); + console.log("CLICKED domid="+domid+" active_domid="+active_domid); + }); + }, + +} // global var tabs_helper + +$(document).ready(tabs_helper.init_all_tabs); + (function($){ $.fn.Tabs = function( method ) { // In Bootstrap 3, we need 'shown.bs.tab' instead of 'shown' diff --git a/plugins/tabs/templates/tabs.html b/plugins/tabs/templates/tabs.html index 298dec92..60031f63 100644 --- a/plugins/tabs/templates/tabs.html +++ b/plugins/tabs/templates/tabs.html @@ -1,4 +1,4 @@ -