Added navigation breadcrumb.

Navigation breadcrumb has been added to the facet header. The
breadcrumb will appear on details, association, and automount
facets.

Ticket #1323

install/ui/automount.js

@@ -28,8 +28,7 @@
 
 IPA.entity_factories.automountlocation = function() {
     return IPA.entity_builder().
-        entity({name:'automountlocation',
-                title:IPA.messages.tabs.automount}).
+        entity({ name: 'automountlocation' }).
         search_facet({
             title: IPA.metadata.objects.automountlocation.label,
             columns:['cn']
@@ -39,7 +38,8 @@ IPA.entity_factories.automountlocation = function() {
             nested_entity : 'automountmap',
             label : IPA.metadata.objects.automountmap.label,
             name: 'maps',
-            columns:['automountmapname']
+            columns:['automountmapname'],
+            back_link_text: 'Back to Locations'
         }).
         details_facet({
             sections:[
@@ -48,7 +48,9 @@ IPA.entity_factories.automountlocation = function() {
                     label: IPA.messages.details.identity,
                     fields:['cn']
                 }
-            ]}).
+            ],
+            back_link_text: 'Back to Locations'
+        }).
         adder_dialog({
             fields:['cn']
         }).
@@ -56,8 +58,7 @@ IPA.entity_factories.automountlocation = function() {
 };
 IPA.entity_factories.automountmap = function() {
     return IPA.entity_builder().
-        entity({name:'automountmap',
-                title:IPA.messages.tabs.automount}).
+        entity({ name: 'automountmap' }).
         containing_entity('automountlocation').
         nested_search_facet({
             facet_group: 'member',
@@ -65,7 +66,8 @@ IPA.entity_factories.automountmap = function() {
             label : IPA.metadata.objects.automountkey.label,
             name: 'keys',
             get_values: IPA.get_option_values,
-            columns:['automountkey','automountinformation']
+            columns:['automountkey','automountinformation'],
+            back_link_text: 'Back to Locations'
         }).
         details_facet({
             sections:[
@@ -74,7 +76,8 @@ IPA.entity_factories.automountmap = function() {
                     label: IPA.messages.details.identity,
                     fields:['automountmapname','description']
                 }
-            ]
+            ],
+            back_link_text: 'Back to Locations'
         }).
         adder_dialog({
             factory: IPA.automountmap_adder_dialog,
@@ -104,8 +107,7 @@ IPA.entity_factories.automountmap = function() {
 
 IPA.entity_factories.automountkey = function() {
     return IPA.entity_builder().
-        entity({name:'automountkey',
-                title:IPA.messages.tabs.automount}).
+        entity({ name: 'automountkey' }).
         containing_entity('automountmap').
         details_facet({
             sections:[
@@ -114,7 +116,8 @@ IPA.entity_factories.automountkey = function() {
                     label: IPA.messages.details.identity,
                     fields:['automountkey','automountinformation','description']
                 }
-            ]
+            ],
+            back_link_text: 'Back to Locations'
         }).
         adder_dialog({
             fields:['automountkey','automountinformation']

install/ui/details.js

@@ -336,7 +336,7 @@ IPA.details_facet = function(spec) {
 
     that.create = function(container) {
         if (that.entity.facets.length == 1) {
-            that.disable_back_link = true;
+            that.disable_breadcrumb = true;
             that.disable_facet_tabs = true;
         }
 

install/ui/dns.js

@@ -99,7 +99,7 @@ IPA.dnsrecord_facet = function(spec) {
 
     spec = spec || {};
 
-    spec.disable_back_link = false;
+    spec.disable_breadcrumb = false;
     spec.disable_facet_tabs = false;
 
     var that = IPA.search_facet(spec);

install/ui/entitle.js

@@ -326,7 +326,7 @@ IPA.entitle.entity = function(spec) {
 IPA.entitle.details_facet = function(spec) {
 
     spec = spec || {};
-    spec.disable_back_link = true;
+    spec.disable_breadcrumb = true;
 
     var that = IPA.details_facet(spec);
 

install/ui/entity.js

@@ -36,8 +36,9 @@ IPA.facet = function (spec) {
     that.title = spec.title || that.label;
     that.display_class = spec.display_class;
 
-    that.disable_back_link = spec.disable_back_link;
+    that.disable_breadcrumb = spec.disable_breadcrumb;
     that.disable_facet_tabs = spec.disable_facet_tabs;
+    that.back_link_text = spec.back_link_text || IPA.messages.buttons.back_to_list;
 
     that.header = spec.header || IPA.facet_header({ facet: that });
 
@@ -186,6 +187,7 @@ IPA.facet_header = function(spec) {
     spec = spec || {};
 
     var that = {};
+
     that.facet = spec.facet;
 
     that.select_tab = function() {
@@ -203,48 +205,47 @@ IPA.facet_header = function(spec) {
 
     that.set_pkey = function(value) {
 
-        if (value) {
+        if (!value) return;
+
+        if (!that.facet.disable_breadcrumb) {
             var breadcrumb = [];
-            var current_entity = that.facet.entity.containing_entity;
+            var entity = that.facet.entity.containing_entity;
 
-            while(current_entity){
-                breadcrumb.unshift($('<a/>',{
-                    text:$.bbq.getState(current_entity.name+'-pkey'),
-                    title: current_entity.name,
-                    click: function() {
-                        var entity = IPA.get_entity((this.title));
-                        IPA.nav.show_page(that.facet.entity.name, 'default');
-                        $('a', that.facet_tabs).removeClass('selected');
-                        return false;
-                    }
+            while (entity) {
+                breadcrumb.unshift($('<a/>', {
+                    text: $.bbq.getState(entity.name+'-pkey'),
+                    title: entity.name,
+                    click: function(entity) {
+                        return function() {
+                            IPA.nav.show_page(entity.name, 'default');
+                            return false;
+                        };
+                    }(entity)
                 }));
 
-                current_entity = current_entity.containing_entity;
+                entity = entity.containing_entity;
             }
 
-            that.title_container.empty();
-            var h3 =  $('<h3/>').appendTo(that.title_container);
-
-            h3.empty();
-            h3.append(that.facet.entity.title);
-            h3.append(': ');
-
-            for (var i = 0; i < breadcrumb.length; i+=1){
-                h3.append(breadcrumb[i]);
-                h3.append(' > ');
+            that.path.empty();
 
+            for (var i=0; i<breadcrumb.length; i++){
+                that.path.append(' &raquo; ');
+                that.path.append(breadcrumb[i]);
             }
-            h3.append(
-                $('<span/>', {
-                    'class': 'facet-pkey',
-                    text:value
-                }));
-        } else {
-            that.title_container.empty();
-            var span =  $('<h3/>',{
-                text: that.facet.entity.metadata.label
-            }).appendTo(that.title_container);
+
+            that.path.append(' &raquo; ');
+            that.path.append(value);
         }
+
+        that.title_container.empty();
+        var h3 = $('<h3/>').appendTo(that.title_container);
+        h3.append(that.facet.entity.title);
+        h3.append(': ');
+
+        $('<span/>', {
+            'class': 'facet-pkey',
+            text: value
+        }).appendTo(h3);
     };
 
     that.create_facet_link = function(container, other_facet) {
@@ -293,35 +294,44 @@ IPA.facet_header = function(spec) {
 
     that.create = function(container) {
 
-        that.title_container = $('<div/>', {
-            'class': 'facet-title'
-        }).appendTo(container);
+        if (!that.facet.disable_breadcrumb) {
+            that.breadcrumb = $('<div/>', {
+                'class': 'breadcrumb'
+            }).appendTo(container);
 
-        that.set_pkey(null);
-
-        if (!that.facet.disable_back_link) {
             that.back_link = $('<span/>', {
-                'class': 'back-link',
-                click: function() {
-                    if ($(this).hasClass('entity-facet-disabled')) {
-                        return false;
-                    }
+                'class': 'back-link'
+            }).appendTo(that.breadcrumb);
 
+            that.back_link.append('&laquo; ');
+
+            $('<a/>', {
+                text: that.facet.back_link_text,
+                click: function() {
                     var current_entity = that.facet.entity;
                     while(current_entity.containing_entity){
                         current_entity = current_entity.containing_entity;
                     }
 
                     IPA.nav.show_page(current_entity.name, 'search');
-                    $('a', that.facet_tabs).removeClass('selected');
                     return false;
                 }
-            }).appendTo(container);
+            }).appendTo(that.back_link);
 
-            that.back_link.append('<span class="ipa-icon">&#x25C0;</span> ');
-            that.back_link.append(IPA.messages.buttons.back_to_list);
+
+            that.path = $('<span/>', {
+                'class': 'path'
+            }).appendTo(that.breadcrumb);
         }
 
+        that.title_container = $('<div/>', {
+            'class': 'facet-title'
+        }).appendTo(container);
+
+        var span = $('<h3/>', {
+            text: that.facet.entity.metadata.label
+        }).appendTo(that.title_container);
+
         if (!that.facet.disable_facet_tabs) {
             that.facet_tabs = $('<div/>', {
                 'class': 'facet-tabs'

install/ui/ipa.css

@@ -443,7 +443,7 @@ div.tabs {
 
 .facet-title {
     position: absolute;
-    top: 0;
+    top: 10px;
     left: 0;
     color: gray;
     display: block;
@@ -461,11 +461,14 @@ div.tabs {
     color:black;
 }
 
-.back-link {
-    cursor: pointer;
+.breadcrumb {
     position: absolute;
     top: 0;
-    right: 0;
+    left: 0;
+}
+
+.breadcrumb a {
+    cursor: pointer;
 }
 
 /* ---- Facet Tabs ---- */

install/ui/search.js

@@ -31,7 +31,7 @@ IPA.search_facet = function(spec) {
     spec.name = spec.name || 'search';
     spec.managed_entity_name = spec.managed_entity_name || spec.entity_name;
 
-    spec.disable_back_link = spec.disable_back_link === undefined ? true : spec.disable_back_link;
+    spec.disable_breadcrumb = spec.disable_breadcrumb === undefined ? true : spec.disable_breadcrumb;
     spec.disable_facet_tabs = spec.disable_facet_tabs === undefined ? true : spec.disable_facet_tabs;
 
     var that = IPA.table_facet(spec);
@@ -339,7 +339,7 @@ IPA.nested_search_facet = function(spec) {
 
     spec.managed_entity_name = spec.nested_entity;
 
-    spec.disable_back_link = false;
+    spec.disable_breadcrumb = false;
     spec.disable_facet_tabs = false;
 
     var that = IPA.search_facet(spec);