[galaxy-commits] commit/galaxy-central: guerler: UI: Improve masthead, simplify code

3 Dec 2013

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/a62c54ddbe2a/
Changeset:   a62c54ddbe2a
User:        guerler
Date:        2013-12-03 07:42:58
Summary:     UI: Improve masthead, simplify code
Affected #:  4 files

diff -r f1729c6dcba86603a9e471688df633251511a22b -r a62c54ddbe2a845be9f0ee2dc4fe4b5820bcd70c static/scripts/galaxy.masthead.js

--- a/static/scripts/galaxy.masthead.js
+++ b/static/scripts/galaxy.masthead.js
@@ -14,20 +14,11 @@
     // options
     options : null,
     
-    // item list
-    list : {},
-    
-    // keeps track of the last element
-    itemLast: null,
-    
-    // counter
-    itemCounter: 0,
-    
     // background
     $background: null,
     
-    // flag indicating visibility of background
-    backgroundVisible: false,
+    // list
+    list: [],
     
     // initialize
     initialize : function(options)
@@ -47,9 +38,7 @@
         // assign background
         this.$background = $(this.el).find('#masthead-background');
         
-        // loop through item specific unload functions
-        // and collect all there warning messages, regarding
-        // the user's attempt to unload the page
+        // loop through unload functions if the user attempts to unload the page
         var self = this;
         window.onbeforeunload = function()
         {
@@ -68,7 +57,7 @@
     // configure events
     events:
     {
-        'click'     : '_eventRefresh',
+        'click'     : '_click',
         'mousedown' : function(e) { e.preventDefault() }
     },
 
@@ -84,32 +73,36 @@
         return this._add(item, false);
     },
     
+    // activate
+    highlight: function(id)
+    {
+        var current = $(this.el).find('#' + id + '> li');
+        if (current) {
+            current.addClass('active');
+        }
+    },
+    
     // adds a new item to the masthead
     _add : function(item, append)
     {
-        var $loc = $(this.el).find('#' + item.mastheadLocation);
+        var $loc = $(this.el).find('#' + item.location);
         if ($loc)
         {
             // create frame for new item
-            var itemId = 'masthead-item-' + this.itemCounter++;
-            var $itemNew = $(item.el);
+            var $current = $(item.el);
             
-            // configure id and class in order to mark new items
-            $itemNew.attr('id', itemId);
-            $itemNew.addClass('masthead-item');
+            // configure class in order to mark new items
+            $current.addClass('masthead-item');
             
             // append to masthead
             if (append) {
-                $loc.append($itemNew);
+                $loc.append($current);
             } else {
-                $loc.prepend($itemNew);
+                $loc.prepend($current);
             }
             
             // add to list
-            this.list[itemId] = item;
-            
-            // return item id
-            return itemId;
+            this.list.push(item);
         }
         
         // location not found
@@ -117,63 +110,27 @@
     },
 
     // handle click event
-    _eventRefresh: function(e)
+    _click: function(e)
     {
-        // identify current item
-        var itemCurrent = $(e.target).closest('.masthead-item');
-        
-        // get identifier
-        if (itemCurrent.length)
-            itemCurrent = itemCurrent.attr('id');
-                
-        // check last item
-        if (this.itemLast && this.itemLast != itemCurrent)
-        {
-            var it = this.list[this.itemLast];
-            if (it) {
-                if (it.mastheadReset) {
-                    it.mastheadReset();
-                }
-            }
+        // close all popups
+        var $all = $(this.el).find('.popup');
+        if ($all) {
+            $all.hide();
         }
         
-        // check if current item is in active state
-        var useBackground = false;
-        if (itemCurrent)
-        {
-            var it = this.list[itemCurrent];
-            if (it) {
-                if (it.mastheadReset) {
-                    if (this.itemLast == itemCurrent) {
-                        useBackground = this.backgroundVisible ? false : true;
-                    } else {
-                        useBackground = true;
-                    }
-                }
-            }
-        }
-        
-        // decide wether to show/hide  background
-        if (useBackground) {
+        // open current item
+        var $current = $(e.target).closest('.masthead-item').find('.popup');
+        if ($(e.target).hasClass('head')) {
+            $current.show();
             this.$background.show();
         } else {
             this.$background.hide();
         }
-        
-        // backup
-        this.backgroundVisible = useBackground;
-        this.itemLast = itemCurrent;
     },
     
     /*
         HTML TEMPLATES
     */
- 
-    // template item
-    _templateItem: function(id)
-    {
-        return '<div id="' + id + '" class="masthead-item"></div>';
-    },
     
     // fill template
     _template: function(options)
@@ -202,9 +159,9 @@
     // icon options
     options:
     {
-        id              : "galaxy-icon",
-        icon            : "fa-cog",
-        tooltip         : "galaxy-icon",
+        id              : '',
+        icon            : 'fa-cog',
+        tooltip         : '',
         with_number     : false,
         on_click        : function() { alert ('clicked') },
         on_unload       : null,
@@ -212,7 +169,7 @@
     },
     
     // location identifier for masthead class
-    mastheadLocation: 'iconbar',
+    location: 'iconbar',
     
     // initialize
     initialize: function (options)
@@ -278,7 +235,7 @@
     // fill template icon
     _template: function (options)
     {
-        var tmpl =  '<div id=' + options.id + ' class="symbol">' +
+        var tmpl =  '<div id="' + options.id + '" class="symbol">' +
                         '<div class="icon fa fa-2x ' + options.icon + '"></div>';
         if (options.with_number)
             tmpl+=      '<div class="number"></div>';
@@ -296,7 +253,7 @@
     options:
     {
         id              : '',
-        title           : 'Title',
+        title           : '',
         target          : '_parent',
         content         : '',
         type            : 'url',
@@ -306,18 +263,15 @@
     },
     
     // location
-    mastheadLocation: 'navbar',
+    location: 'navbar',
     
     // optional sub menu
     $menu: null,
     
-    // flag if menu is visible
-    menuVisible: false,
-    
     // events
     events:
     {
-        'click .head' : '_eventClickHead'
+        'click .head' : '_head'
     },
     
     // initialize
@@ -352,7 +306,7 @@
     },
     
     // add menu item
-    addMenu: function (options)
+    add: function (options)
     {
         // menu option defaults
         var menuOptions = {
@@ -382,7 +336,7 @@
             $(this.el).find('.symbol').addClass('caret');
             
             // update element link
-            this.$menu = $(this.el).find('.menu');
+            this.$menu = $(this.el).find('.popup');
         }
         
         // create
@@ -397,9 +351,6 @@
         {
             // prevent default
             e.preventDefault();
-
-            // check for menu options
-            self._hideMenu();
         
             // no modifications if new tab is requested
             if (self.options.target === '_blank')
@@ -414,42 +365,14 @@
             this.$menu.append($(this._templateDivider()));
     },
     
-    // add reset function called by masthead
-    mastheadReset: function()
-    {
-        this._hideMenu();
-    },
-    
-    // hide menu
-    _hideMenu: function()
-    {
-        if (this.$menu && this.menuVisible)
-        {
-            this.$menu.hide();
-            this.menuVisible = false;
-        }
-    },
-    
     // show menu on header click
-    _eventClickHead: function(e)
+    _head: function(e)
     {
         // prevent default
         e.preventDefault();
         
         // check for menu options
-        if (this.$menu)
-        {
-            // show/hide menu
-            if (!this.menuVisible)
-            {
-                this.$menu.show();
-                this.menuVisible = true;
-            } else {
-                this.$menu.hide();
-                this.menuVisible = false;
-            }
-        } else {
-            // open new frame
+        if (!this.$menu) {
             Galaxy.frame.add(this.options);
         }
     },
@@ -463,7 +386,7 @@
     // fill template header
     _templateMenu: function ()
     {
-        return '<ul class="menu dropdown-menu"></ul>';
+        return '<ul class="popup dropdown-menu"></ul>';
     },
     
     _templateDivider: function()
@@ -475,7 +398,7 @@
     _template: function (options)
     {
         // start template
-        var tmpl =  '<ul class="nav navbar-nav" border="0" cellspacing="0">' +
+        var tmpl =  '<ul id="' + options.id + '" class="nav navbar-nav" border="0" cellspacing="0">' +
                         '<li class="root dropdown" style="">' +
                             '<a class="head dropdown-toggle" data-toggle="dropdown" target="' + options.target + '" href="' + options.content + '">' +
                                 options.title + '<b class="symbol"></b>' +

diff -r f1729c6dcba86603a9e471688df633251511a22b -r a62c54ddbe2a845be9f0ee2dc4fe4b5820bcd70c static/scripts/galaxy.menu.js
--- a/static/scripts/galaxy.menu.js
+++ b/static/scripts/galaxy.menu.js
@@ -29,6 +29,7 @@
         // Analyze data tab.
         //
         var tab_analysis = new mod_masthead.GalaxyMastheadTab({
+            id      : "analysis",
             title   : "Analyze Data",
             content : "root/index"
         });
@@ -38,6 +39,7 @@
         // Workflow tab.
         //
         var tab_workflow = new mod_masthead.GalaxyMastheadTab({
+            id      : "workflow",
             title   : "Workflow",
             content : "workflow"
 
@@ -48,33 +50,34 @@
         // 'Shared Items' or Libraries tab.
         //
         var tab_shared = new mod_masthead.GalaxyMastheadTab({
+            id      : "shared",
             title   : "Shared Data",
             content : "library/index"
         });
 
-        tab_shared.addMenu({
+        tab_shared.add({
             title   : "Data Libraries",
             content : "library/index",
             divider : true
         });
 
-        tab_shared.addMenu({
+        tab_shared.add({
             title   : "Published Histories",
             content : "history/list_published"
         });
 
-        tab_shared.addMenu({
+        tab_shared.add({
             title   : "Published Workflows",
             content : "workflow/list_published"
 
         });
 
-        tab_shared.addMenu({
+        tab_shared.add({
             title   : "Published Visualizations",
             content : "visualization/list_published"
         });
 
-        tab_shared.addMenu({
+        tab_shared.add({
             title   : "Published Pages",
             content : "page/list_published"
         });
@@ -87,17 +90,18 @@
         if (this.options.user.requests)
         {
             var tab_lab = new mod_masthead.GalaxyMastheadTab({
+                id      : "lab",
                 title   : "Lab"
             });
-            tab_lab.addMenu({
+            tab_lab.add({
                 title   : "Sequencing Requests",
                 content : "requests/index"
             });
-            tab_lab.addMenu({
+            tab_lab.add({
                 title   : "Find Samples",
                 content : "requests/find_samples_index"
             });
-            tab_lab.addMenu({
+            tab_lab.add({
                 title   : "Help",
                 content : this.options.lims_doc_url
             });
@@ -108,16 +112,16 @@
         // Visualization tab.
         //
         var tab_visualization = new mod_masthead.GalaxyMastheadTab({
-
+            id          : "visualization",
             title       : "Visualization",
             content     : "visualization/list"
         });
-        tab_visualization.addMenu({
+        tab_visualization.add({
             title       : "New Track Browser",
             content     : "visualization/trackster",
             target      : "_frame"
         });
-        tab_visualization.addMenu({
+        tab_visualization.add({
             title       : "Saved Visualizations",
             content     : "visualization/list",
             target      : "_frame"
@@ -130,10 +134,11 @@
         if (this.options.enable_cloud_launch)
         {
             var tab_cloud = new mod_masthead.GalaxyMastheadTab({
+                id      : "cloud",
                 title   : "Cloud",
                 content : "cloudlaunch/index"
             });
-            tab_cloud.addMenu({
+            tab_cloud.add({
                 title   : "New Cloud Cluster",
                 content : "cloudlaunch/index"
             });
@@ -146,6 +151,7 @@
         if (this.options.is_admin_user)
         {
             var tab_admin = new mod_masthead.GalaxyMastheadTab({
+                id          : "admin",
                 title       : "Admin",
                 content     : "admin/index",
                 extra_class : "admin-only"
@@ -157,54 +163,55 @@
         // Help tab.
         //
         var tab_help = new mod_masthead.GalaxyMastheadTab({
+            id      : "help",
             title   : "Help"
         });
         if (this.options.biostar_url)
         {
-            tab_help.addMenu({
+            tab_help.add({
                 title   : "Galaxy Q&A Site",
                 content : this.options.biostar_url_redirect,
                 target  : "_blank"
             });
-            tab_help.addMenu({
+            tab_help.add({
                 title   : "Ask a question",
                 content : "biostar/biostar_question_redirect",
                 target  : "_blank"
             });
         }
-        tab_help.addMenu({
+        tab_help.add({
             title   : "Support",
             content : this.options.support_url,
             target  : "_blank"
         });
-        tab_help.addMenu({
+        tab_help.add({
             title   : "Search",
             content : this.options.search_url,
             target  : "_blank"
         });
-        tab_help.addMenu({
+        tab_help.add({
             title   : "Mailing Lists",
             content : this.options.mailing_lists,
             target  : "_blank"
         });
-        tab_help.addMenu({
+        tab_help.add({
             title   : "Videos",
             content : this.options.screencasts_url,
             target  : "_blank"
         });
-        tab_help.addMenu({
+        tab_help.add({
             title   : "Wiki",
             content : this.options.wiki_url,
             target  : "_blank"
         });
-        tab_help.addMenu({
+        tab_help.add({
             title   : "How to Cite Galaxy",
             content : this.options.citation_url,
             target  : "_blank"
         });
         if (!this.options.terms_url)
         {
-            tab_help.addMenu({
+            tab_help.add({
                 title   : "Terms and Conditions",
                 content : this.options.terms_url,
                 target  : "_blank"
@@ -218,12 +225,13 @@
         if (!this.options.user.valid)
         {
             var tab_user = new mod_masthead.GalaxyMastheadTab({
+                id          : "user",
                 title       : "User",
                 extra_class : "loggedout-only"
             });
 
             // login
-            tab_user.addMenu({
+            tab_user.add({
                 title   : "Login",
                 content : "user/login",
                 target  : "galaxy_main"
@@ -232,7 +240,7 @@
             // register
             if (this.options.allow_user_creation)
             {
-                tab_user.addMenu({
+                tab_user.add({
                     title   : "Register",
                     content : "user/create",
                     target  : "galaxy_main"
@@ -243,37 +251,38 @@
             this.masthead.append(tab_user);
         } else {
             var tab_user = new mod_masthead.GalaxyMastheadTab({
+                id          : "user",
                 title       : "User",
                 extra_class : "loggedin-only"
             });
 
             // show user logged in info
-            tab_user.addMenu({
+            tab_user.add({
                 title       : "Logged in as " + this.options.user.email
             });
 
             // remote user
             if (this.options.use_remote_user && this.options.remote_user_logout_href)
             {
-                tab_user.addMenu({
+                tab_user.add({
                     title   : "Logout",
                     content : this.options.remote_user_logout_href,
                     target  : "_top"
                 });
             } else {
-                tab_user.addMenu({
+                tab_user.add({
                     title   : "Preferences",
                     content : "user?cntrller=user",
                     target  : "galaxy_main"
                 });
 
-                tab_user.addMenu({
+                tab_user.add({
                     title   : "Custom Builds",
                     content : "user/dbkeys",
                     target  : "galaxy_main"
                 });
             
-                tab_user.addMenu({
+                tab_user.add({
                     title   : "Logout",
                     content : "user/logout",
                     target  : "_top",
@@ -282,23 +291,23 @@
             }
         
             // default tabs
-            tab_user.addMenu({
+            tab_user.add({
                 title   : "Saved Histories",
                 content : "history/list",
                 target  : "galaxy_main"
             });
-            tab_user.addMenu({
+            tab_user.add({
                 title   : "Saved Datasets",
                 content : "dataset/list",
                 target  : "galaxy_main"
             });
-            tab_user.addMenu({
+            tab_user.add({
                 title   : "Saved Pages",
                 content : "page/list",
                 target  : "_top"
             });
 
-            tab_user.addMenu({
+            tab_user.add({
                 title   : "API Keys",
                 content : "user/api_keys?cntrller=user",
                 target  : "galaxy_main"
@@ -306,7 +315,7 @@
 
             if (this.options.use_remote_user)
             {
-                tab_user.addMenu({
+                tab_user.add({
                     title   : "Public Name",
                     content : "user/edit_username?cntrller=user",
                     target  : "galaxy_main"
@@ -316,6 +325,10 @@
             // add to masthead
             this.masthead.append(tab_user);
         }
+        
+        // identify active tab
+        if (this.options.active_view)
+            this.masthead.highlight(this.options.active_view);
     }
 });
 

diff -r f1729c6dcba86603a9e471688df633251511a22b -r a62c54ddbe2a845be9f0ee2dc4fe4b5820bcd70c templates/webapps/galaxy/base_panels.mako
--- a/templates/webapps/galaxy/base_panels.mako
+++ b/templates/webapps/galaxy/base_panels.mako
@@ -14,5 +14,7 @@
 
 ## Masthead
 <%def name="masthead()">
-    <% mod_masthead.load(); %>
+    <%
+        mod_masthead.load(self.active_view);
+    %></%def>
\ No newline at end of file

diff -r f1729c6dcba86603a9e471688df633251511a22b -r a62c54ddbe2a845be9f0ee2dc4fe4b5820bcd70c templates/webapps/galaxy/galaxy.masthead.mako
--- a/templates/webapps/galaxy/galaxy.masthead.mako
+++ b/templates/webapps/galaxy/galaxy.masthead.mako
@@ -28,7 +28,7 @@
 </%def>
 
 ## masthead head generator
-<%def name="load()">
+<%def name="load(active_view = None)"><%
         ## get configuration
         masthead_config = {
@@ -51,7 +51,8 @@
             'allow_user_creation'       : app.config.allow_user_creation,
             'logo_url'                  : h.url_for(app.config.get( 'logo_url', '/')),
             'is_admin_user'             : trans.user and app.config.is_admin_user(trans.user),
-            
+            'active_view'               : active_view,
+
             ## user details
             'user'          : {
                 'requests'  : bool(trans.user and (trans.user.requests or trans.app.security_agent.get_accessible_request_types(trans, trans.user))),

Repository URL: https://bitbucket.org/galaxy/galaxy-central/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    

[galaxy-commits] commit/galaxy-central: guerler: UI: Improve masthead, simplify code

commits-noreply＠bitbucket.org