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=0identity=0user-facet=detailsuser-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; ithat.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; ithat.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,
