diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2015-04-30 15:38:30 +0200 |
---|---|---|
committer | Petr Vobornik <pvoborni@redhat.com> | 2015-05-20 14:04:10 +0200 |
commit | 435f9331c633296d72160de1e25bbdc77a81c75e (patch) | |
tree | 06ffde69965e96eb06dd50f5fab016948e1c7916 /install/ui | |
parent | 3c2a8b408ec1af284af0ebe218832f3fab85c008 (diff) | |
download | freeipa-435f9331c633296d72160de1e25bbdc77a81c75e.tar.gz freeipa-435f9331c633296d72160de1e25bbdc77a81c75e.tar.xz freeipa-435f9331c633296d72160de1e25bbdc77a81c75e.zip |
webui: facet groups widget
Refactoring of facet groups. This new widget has an html structure which
could be used for current facet tabs but also for PatternFly two column
layout with either accordion or nav-category
- https://www.patternfly.org/wp-content/uploads/patternfly/tests/form.html
- https://www.patternfly.org/wp-content/uploads/patternfly/tests/tab.html
Will be useful for #4625.
Reviewed-By: David Kupka <dkupka@redhat.com>
Reviewed-By: Thierry Bordaz <tbordaz@redhat.com>
Diffstat (limited to 'install/ui')
-rw-r--r-- | install/ui/src/freeipa/facet.js | 248 | ||||
-rw-r--r-- | install/ui/src/freeipa/navigation.js | 4 |
2 files changed, 168 insertions, 84 deletions
diff --git a/install/ui/src/freeipa/facet.js b/install/ui/src/freeipa/facet.js index 74c13353f..863f71af2 100644 --- a/install/ui/src/freeipa/facet.js +++ b/install/ui/src/freeipa/facet.js @@ -1114,6 +1114,9 @@ exp.facet_header = IPA.facet_header = function(spec) { that.facet.action_state.changed.attach(that.update_summary); that.title_widget = IPA.facet_title(); + that.tabs_widget = new exp.FacetGroupsWidget({ + facet: this.facet + }); }; /** @@ -1121,14 +1124,11 @@ exp.facet_header = IPA.facet_header = function(spec) { */ that.select_tab = function() { if (that.facet.disable_facet_tabs) return; - - $(that.facet_tabs).find('a').removeClass('selected'); var facet_name = that.facet.name; - if (!facet_name || facet_name === 'default') { - that.facet_tabs.find('a:first').addClass('selected'); + that.tabs_widget.select_first(); } else { - that.facet_tabs.find('a#' + facet_name ).addClass('selected'); + that.tabs_widget.select(that.facet.get_full_name()); } }; @@ -1160,6 +1160,12 @@ exp.facet_header = IPA.facet_header = function(spec) { if (!that.breadcrumb) return; + if (pkey === undefined) { + pkey = that.facet.get_pkey(); + var pkey_max = that.get_max_pkey_length(); + pkey = IPA.limit_text(pkey, pkey_max); + } + var items = []; var item, i, l, keys, target_facet, target_facet_keys, containing_entity; @@ -1240,60 +1246,11 @@ exp.facet_header = IPA.facet_header = function(spec) { return bc_item; }; - /** - * Create link for facet tab - * @protected - * @param {jQuery} container - * @param {facet.facet} other_facet - */ - that.create_facet_link = function(container, other_facet) { - - var li = $('<li/>', { - name: other_facet.name, - click: function() { - if (li.hasClass('entity-facet-disabled')) { - return false; - } - - var pkeys = that.facet.get_pkeys(); - navigation.show(other_facet, pkeys); - - return false; - } - }).appendTo(container); - - $('<a/>', { - text: other_facet.tab_label, - id: other_facet.name - }).appendTo(li); - }; - - /** - * Create facet tab group - * @protected - * @param {jQuery} container - * @param {Object} facet_group - */ - that.create_facet_group = function(container, facet_group) { - - var section = $('<div/>', { - name: facet_group.name, - 'class': 'facet-group' - }).appendTo(container); - - $('<div/>', { - 'class': 'facet-group-label' - }).appendTo(section); - - var ul = $('<ul/>', { - 'class': 'facet-tab' - }).appendTo(section); - - var facets = facet_group.facets.values; - for (var i=0; i<facets.length; i++) { - var facet = reg.facet.get(facets[i]); - that.create_facet_link(ul, facet); - } + that.create_facet_groups = function(container) { + var facet_groups = that.get_facet_groups(); + this.tabs_widget.groups = facet_groups; + var tabs = this.tabs_widget.render(); + container.append(tabs); }; /** @@ -1330,17 +1287,7 @@ exp.facet_header = IPA.facet_header = function(spec) { that.title_widget.update({ text: that.facet.label }); if (!that.facet.disable_facet_tabs) { - that.facet_tabs = $('<div/>', { - 'class': 'facet-tabs' - }).appendTo(container); - - var facet_groups = that.get_facet_groups(); - for (var i=0; i<facet_groups.length; i++) { - var facet_group = facet_groups[i]; - if (facet_group.facets.length) { - that.create_facet_group(that.facet_tabs, facet_group); - } - } + that.create_facet_groups(container); } }; @@ -1362,36 +1309,29 @@ exp.facet_header = IPA.facet_header = function(spec) { if (!that.facet.disable_facet_tabs) { var pkey = that.facet.get_pkey(); - var facet_groups = that.facet.entity.facet_groups.values; + var facet_groups = that.get_facet_groups(); for (var i=0; i<facet_groups.length; i++) { var facet_group = facet_groups[i]; - var span = $('.facet-group[name='+facet_group.name+']', that.facet_tabs); - if (!span.length) continue; - var label = facet_group.label; if (pkey && label) { var limited_pkey = IPA.limit_text(pkey, 20); label = label.replace('${primary_key}', limited_pkey); - } else { + } else if (!label) { label = ''; } - var label_container = $('.facet-group-label', span); - label_container.text(label); - if (pkey) label_container.attr('title', pkey); + this.tabs_widget.update_group(facet_group.name, label, pkey); var facets = facet_group.facets.values; for (var j=0; j<facets.length; j++) { - var facet = facets[j]; - var link = $('li[name='+facet.name+'] a', span); - + var facet = reg.facet.get(facets[j]); var values = result ? result[facet.name] : null; + label = facet.tab_label; if (values) { - link.text(facet.tab_label+' ('+values.length+')'); - } else { - link.text(facet.tab_label); + label = facet.tab_label + ' (' + values.length + ')'; } + this.tabs_widget.update_tab(facet.get_full_name(), label); } } } @@ -1442,6 +1382,146 @@ exp.facet_header = IPA.facet_header = function(spec) { return that; }; +exp.FacetGroupsWidget = declare([], { + + facet: null, + groups: null, + group_els: null, + el: null, + css_class: 'facet-tabs', + group_el_type: '<div/>', + group_class: 'facet-group', + group_label_el_type: '<div/>', + group_label_class: 'facet-group-label', + group_label_title_el_type: '<span/>', + group_label_title_class: '', + tab_cont_el_type: '<div/>', + tab_cont_class: '', + tab_list_el_type: '<ul/>', + tab_list_class: 'facet-tab', + tab_el_type: '<li/>', + tab_class: 't', + selected_class: 'selected', + + render: function() { + + this.group_els = {}; + this.tab_els = {}; + + this.el = $('<div/>', { 'class': this.css_class }); + + for (var i=0; i<this.groups.length; i++) { + var group = this.groups[i]; + if (group.facets.length) { + var group_el = this.render_group(group); + this.el.append(group_el); + } + } + return this.el; + }, + + render_group: function(group) { + + var gr = this.group_els[group.name] = { tab_els: {}}; + + gr.group_el = $(this.group_el_type, { + 'class': this.group_class, + name: group.name + }); + + gr.label_el = $(this.group_label_el_type, { + 'class': this.group_label_class + }).appendTo(gr.group_el); + + gr.label_title_el = $(this.group_label_title_el_type, { + 'class': this.group_label_title_class, + text: '' + }).appendTo(gr.label_el); + + + var tab_cont = $(this.tab_cont_el_type, { 'class': this.tab_cont_class }); + var tab_list = $(this.tab_list_el_type, { 'class': this.tab_list_class }); + tab_list.appendTo(tab_cont); + var facets = group.facets.values; + for (var i=0,l=facets.length; i<l ;i++) { + var facet = reg.facet.get(facets[i]); + var tab_el = this.tab_els[facet.get_full_name()] = this.render_tab(facet); + tab_list.append(tab_el); + } + gr.group_el.append(tab_cont); + + return gr.group_el; + }, + + render_tab: function(tab) { + var self = this; + var el = $(this.tab_el_type, { + name: tab.name, + 'class': this.tab_class, + click: function() { + if (el.hasClass('entity-facet-disabled')) { + return false; + } + self.on_click(tab); + return false; + } + }); + + $('<a/>', { + text: tab.tab_label, + 'class': 'tab-link', + href: "#" + navigation.create_hash(tab, {}), + name: tab.name + }).appendTo(el); + + return el; + }, + + on_click: function(facet) { + var pkeys = this.facet.get_pkeys(); + navigation.show(facet, pkeys); + }, + + update_group: function(group_name, text, title) { + if (!this.group_els[group_name]) return; + var label_el = this.group_els[group_name].label_title_el; + label_el.text(text); + if (title) label_el.attr('title', title); + }, + + update_tab: function(tab_name, text, title) { + var tab_el = this.tab_els[tab_name]; + var label_el = $('a', tab_el); + label_el.text(text); + if (title) label_el.attr('title', title); + }, + + select: function(tab_name) { + if (!this.el) return; + var cls = this.selected_class; + var tab_el = this.tab_els[tab_name]; + + this.el.find(this.tab_class).removeClass(cls); + this.el.find('.tab-link').removeClass(cls); + + tab_el.addClass(cls); + tab_el.find('.tab-link').addClass(cls); + }, + + select_first: function() { + if (!this.el) return; + this.el.find('.tab-link').removeClass(this.selected_class); + this.el.find(this.tab_class).removeClass(this.selected_class); + var first = this.el.find('.tab-link:first'); + first.addClass(this.selected_class); + first.parent().addClass(this.selected_class); + }, + + constructor: function(spec) { + lang.mixin(this, spec); + } +}); + /** * Facet title widget * diff --git a/install/ui/src/freeipa/navigation.js b/install/ui/src/freeipa/navigation.js index 105e867cb..1797a5e92 100644 --- a/install/ui/src/freeipa/navigation.js +++ b/install/ui/src/freeipa/navigation.js @@ -152,6 +152,10 @@ define([ */ show_default: function() { routing.navigate(routing.default_path); + }, + + create_hash: function(facet, option) { + return routing.create_hash(facet, option); } }; return navigation; |