Hi Kyle, I added the expand/collapse all link into the details page. See the following demo:
http://edewata.fedorapeople.org/freeipa/install/ui/index.html#navigation=0&identity=0&user-facet=details&user-pkey=kfrog Please let me know if this is sufficient for this ticket: https://fedorahosted.org/freeipa/ticket/737 Thanks! -- Endi S. Dewata
From 62b53201e23ba5f5a1b459bc076ba8eb3a5b3ac1 Mon Sep 17 00:00:00 2001 From: Endi S. Dewata <edew...@redhat.com> Date: Thu, 10 Feb 2011 16:10:53 -0600 Subject: [PATCH] Added expand/collapse all. A link has been added into the details page to expand/collapse all sections. Previously each section's <div> container is identified using a long ID. It is now identified using the section name. --- install/ui/details.js | 100 +++++++++++++++++++++++++++++++++++------------ install/ui/dialog.js | 4 +- install/ui/hbacrule.js | 4 +- install/ui/sudorule.js | 4 +- 4 files changed, 78 insertions(+), 34 deletions(-) diff --git a/install/ui/details.js b/install/ui/details.js index b62f049419b819def729bc75d89b1d9a6aa999e1..a9741690493b0aa75d0dd5c70e619b3ab7e4505b 100644 --- a/install/ui/details.js +++ b/install/ui/details.js @@ -348,18 +348,6 @@ IPA.details_facet = function(spec) { } }; - that.get_section_header_prefix = function(visible) { - if (visible) { - return '<span class="ui-icon '+ - IPA.collapse_icon + - ' section-expand" ></span>'; - } else { - return '<span class="ui-icon '+ - IPA.expand_icon + - ' section-expand" />'; - } - }; - function create(container) { container.attr('title', that.entity_name); @@ -373,6 +361,21 @@ IPA.details_facet = function(spec) { 'class': 'content' }).appendTo(container); + $('<a/>', { + name: 'expand_all', + href: 'expand_all', + text: 'Expand All', + style: 'display: none;' + }).appendTo(details); + + $('<a/>', { + name: 'collapse_all', + href: 'collapse_all', + text: 'Collapse All' + }).appendTo(details); + + details.append('<br/>'); + var action_panel = that.get_action_panel(); var ul = $('ul', action_panel); @@ -392,14 +395,22 @@ IPA.details_facet = function(spec) { for (var i = 0; i < that.sections.length; ++i) { var section = that.sections[i]; - $('<h2/>', { + var header = $('<h2/>', { name: section.name, - title: section.label, - html: that.get_section_header_prefix(true) + ' ' + section.label + title: section.label }).appendTo(details); + var icon = $('<span/>', { + name: 'icon', + 'class': 'ui-icon section-expand '+IPA.expand_icon + }).appendTo(header); + + header.append(' '); + + header.append(section.label); + var div = $('<div/>', { - 'id': that.entity_name+'-'+that.name+'-'+section.name, + name: section.name, 'class': 'details-section' }).appendTo(details); @@ -437,26 +448,65 @@ IPA.details_facet = function(spec) { }); button.replaceWith(that.update_button); + var details = $('div.content', that.container); + + var expand_all = $('a[name=expand_all]', details); + expand_all.click(function() { + expand_all.css('display', 'none'); + collapse_all.css('display', 'inline'); + + for (var i=0; i<that.sections.length; i++) { + var section = that.sections[i]; + toggle(section, true); + } + + return false; + }); + + var collapse_all = $('a[name=collapse_all]', details); + collapse_all.click(function() { + expand_all.css('display', 'inline'); + collapse_all.css('display', 'none'); + + for (var i=0; i<that.sections.length; i++) { + var section = that.sections[i]; + toggle(section, false); + } + + return false; + }); + for (var i = 0; i < that.sections.length; ++i) { var section = that.sections[i]; var header = $('h2[name='+section.name+']', that.container); + var div = $('div.details-section[name='+section.name+']', that.container); - var div = $('#'+that.entity_name+'-'+that.name+'-'+section.name, - that.container); - - header.click(function(section, header, div) { + header.click(function(section, div) { return function() { var visible = div.is(":visible"); - header.html(that.get_section_header_prefix(!visible) + ' ' + section.label); - div.slideToggle(); + toggle(section, !visible); }; - }(section, header, div)); + }(section, div)); section.setup(div); } } + function toggle(section, visible) { + var header = $('h2[name='+section.name+']', that.container); + + var icon = $('span[name=icon]', header); + icon.toggleClass(IPA.expand_icon, visible); + icon.toggleClass(IPA.collapse_icon, !visible); + + var div = section.container; + + if (visible != div.is(":visible")) { + div.slideToggle(); + } + } + function new_key(){ var pkey = $.bbq.getState(that.entity_name + '-pkey', true) || ''; return pkey != that.pkey; @@ -589,12 +639,10 @@ IPA.details_update = function(on_win, on_fail) { continue; } - var div = $('#'+that.entity_name+'-'+that.name+'-'+section.name, that.container); - for (var j=0; j<section.fields.length; j++) { var field = section.fields[j]; - var span = $('span[name='+field.name+']', div).first(); + var span = $('span[name='+field.name+']', section.container).first(); values = field.save(); if (!values) continue; diff --git a/install/ui/dialog.js b/install/ui/dialog.js index b1f84a98bbd11a827415664d1357cdf90cb90fb3..da0ff3c0d3fce887ff2e930d5627bb6602eba5e9 100644 --- a/install/ui/dialog.js +++ b/install/ui/dialog.js @@ -138,7 +138,7 @@ IPA.dialog = function(spec) { var section = that.sections[j]; var div = $('<div/>', { - 'id': that.entity_name+'-'+that.name+'-'+section.name, + name: section.name, 'class': 'details-section' }).appendTo(that.container); @@ -160,7 +160,7 @@ IPA.dialog = function(spec) { for (var j=0; j<that.sections.length; j++) { var section = that.sections[j]; - var div = $('#'+that.entity_name+'-'+that.name+'-'+section.name, + var div = $('div.details-section[name='+section.name+']', that.container); section.setup(div); diff --git a/install/ui/hbacrule.js b/install/ui/hbacrule.js index 9525f2b79d58ee4cb179e7990ae600ea90639ef1..28f5443fe64a6056410eba3e1d7e067fb5fdb608 100644 --- a/install/ui/hbacrule.js +++ b/install/ui/hbacrule.js @@ -423,12 +423,10 @@ IPA.hbacrule_details_facet = function (spec) { for (var i=0; i<that.sections.length; i++) { var section = that.sections[i]; - var div = $('#'+that.entity_name+'-'+that.name+'-'+section.name, that.container); - for (var j=0; j<section.fields.length; j++) { var field = section.fields[j]; - var span = $('span[name='+field.name+']', div).first(); + var span = $('span[name='+field.name+']', section.container).first(); var values = field.save(); if (!values) continue; diff --git a/install/ui/sudorule.js b/install/ui/sudorule.js index 5f062e731528caf4c35fac084dd5c8d037175e9c..b25a9dd37b8ffa3815cd2cb47c8bcf326d76c32d 100644 --- a/install/ui/sudorule.js +++ b/install/ui/sudorule.js @@ -282,12 +282,10 @@ IPA.sudorule_details_facet = function (spec) { for (var i=0; i<that.sections.length; i++) { var section = that.sections[i]; - var div = $('#'+that.entity_name+'-'+that.name+'-'+section.name, that.container); - for (var j=0; j<section.fields.length; j++) { var field = section.fields[j]; - var span = $('span[name='+field.name+']', div).first(); + var span = $('span[name='+field.name+']', section.container).first(); var values = field.save(); if (!values) continue; -- 1.6.6.1
_______________________________________________ Freeipa-devel mailing list Freeipa-devel@redhat.com https://www.redhat.com/mailman/listinfo/freeipa-devel