From 62b53201e23ba5f5a1b459bc076ba8eb3a5b3ac1 Mon Sep 17 00:00:00 2001
From: Endi S. Dewata <edewata@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