Code

Ticket #105: show-hide-toggle-fixed.diff

File show-hide-toggle-fixed.diff, 4.9 KB (added by Simon Willison, 9 years ago)

Ignore previous patch - it includes unrelated changes to the template system

Line 
1Index: django/conf/admin_media/css/global.css
2===================================================================
3--- django/conf/admin_media/css/global.css      (revision 241)
4+++ django/conf/admin_media/css/global.css      (working copy)
5@@ -228,10 +228,9 @@
6 /*  COLLAPSED FIELDSETS  */
7 
8 fieldset.collapsed * { display:none; }
9-fieldset.collapsed h2, fieldset.collapsed .collapse-toggle  { display:block !important; }
10+fieldset.collapsed h2, fieldset.collapsed { display:block !important; }
11+fieldset.collapsed .collapse-toggle { display: inline !important; }
12 fieldset.collapsed h2 { background-image:url(../img/admin/nav-bg.gif); background-position:bottom left; color:#999; }
13-fieldset.collapsed .collapse-toggle { padding:3px 5px !important; background:#efefef; }
14-fieldset.collapsed .collapse-toggle a { display:inline !important; }
15 
16 /* MESSAGES & ERRORS  */
17 
18Index: django/conf/admin_media/js/admin/CollapsedFieldsets.js
19===================================================================
20--- django/conf/admin_media/js/admin/CollapsedFieldsets.js      (revision 241)
21+++ django/conf/admin_media/js/admin/CollapsedFieldsets.js      (working copy)
22@@ -1,5 +1,6 @@
23 // Finds all fieldsets with class="collapse", collapses them, and gives each
24-// one a "Show foo" link that uncollapses it.
25+// one a "Show" link that uncollapses it. The "Show" link becomes a "Hide"
26+// link when the fieldset is visible.
27 
28 function findForm(node) {
29        // returns the node of the form containing the given node
30@@ -16,35 +17,25 @@
31        init: function() {
32                var fieldsets = document.getElementsByTagName('fieldset');
33                var collapsed_seen = false;
34-               for (var i=0; i<fieldsets.length; i++) {
35-                       var fs = fieldsets[i];
36+               for (var i = 0, fs; fs = fieldsets[i]; i++) {
37                        // Collapse this fieldset if it has the correct class, and if it
38                        // doesn't have any errors. (Collapsing shouldn't apply in the case
39                        // of error messages.)
40                        if (fs.className.match(CollapsedFieldsets.collapse_re) && !CollapsedFieldsets.fieldset_has_errors(fs)) {
41-
42                                collapsed_seen = true;
43-
44                                // Give it an additional class, used by CSS to hide it.
45                                fs.className += ' ' + CollapsedFieldsets.collapsed_class;
46-
47-                               // Get plural verbose name of object.
48-                               var verbose_name = fs.getElementsByTagName('h2')[0].innerHTML;
49-
50-                               // <div class="form-row collapse-toggle" id="fieldsetcollapser1">
51-                               // <a href="javascript:toggleDisplay;">Show section priorities&hellip;</a>
52-                               // </div>
53-                               var div = document.createElement('div');
54-
55-                               // Give it a hook so we can remove it later.
56-                               div.id = 'fieldsetcollapser' + i;
57-
58-                               div.className = 'form-row collapse-toggle'; // CSS hook
59+                               // (<a id="fieldsetcollapser3" class="collapse-toggle" href="#">Show</a>)
60                                var collapse_link = document.createElement('a');
61-                               collapse_link.setAttribute('href', 'javascript:CollapsedFieldsets.display(' + i + ');');
62-                               collapse_link.appendChild(document.createTextNode('Show ' + verbose_name));
63-                               div.appendChild(collapse_link);
64-                               fs.appendChild(div);
65+                               collapse_link.className = 'collapse-toggle';
66+                               collapse_link.id = 'fieldsetcollapser' + i;
67+                               collapse_link.onclick = new Function('CollapsedFieldsets.show('+i+'); return false;');
68+                               collapse_link.href = '#';
69+                               collapse_link.innerHTML = 'Show';
70+                               var h2 = fs.getElementsByTagName('h2')[0];
71+                               h2.appendChild(document.createTextNode(' ('));
72+                               h2.appendChild(collapse_link);
73+                               h2.appendChild(document.createTextNode(')'));
74                        }
75                }
76                if (collapsed_seen) {
77@@ -62,18 +53,30 @@
78                }
79                return false;
80        },
81-       display: function(fieldset_index) {
82+       show: function(fieldset_index) {
83                var fs = document.getElementsByTagName('fieldset')[fieldset_index];
84                // Remove the class name that causes the "display: none".
85                fs.className = fs.className.replace(CollapsedFieldsets.collapsed_re, '');
86-               // Remove the "Show foo" link.
87-               fs.removeChild(document.getElementById('fieldsetcollapser' + fieldset_index));
88+               // Toggle the "Show" link to a "Hide" link
89+               var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
90+               collapse_link.onclick = new Function('CollapsedFieldsets.hide('+fieldset_index+'); return false;');
91+               collapse_link.innerHTML = 'Hide';
92        },
93+       hide: function(fieldset_index) {
94+               var fs = document.getElementsByTagName('fieldset')[fieldset_index];
95+               // Add the class name that causes the "display: none".
96+               fs.className += ' ' + CollapsedFieldsets.collapsed_class;
97+               // Toggle the "Hide" link to a "Show" link
98+               var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
99+        collapse_link.onclick = new Function('CollapsedFieldsets.show('+fieldset_index+'); return false;');
100+               collapse_link.innerHTML = 'Show';
101+       },
102+       
103        uncollapse_all: function() {
104                var fieldsets = document.getElementsByTagName('fieldset');
105                for (var i=0; i<fieldsets.length; i++) {
106                        if (fieldsets[i].className.match(CollapsedFieldsets.collapsed_re)) {
107-                               CollapsedFieldsets.display(i);
108+                               CollapsedFieldsets.show(i);
109                        }
110                }
111        }