From a260980f983afce5e98f1e1a7416567293fd5927 Mon Sep 17 00:00:00 2001 From: Jannis Leidel Date: Tue, 26 Jan 2010 15:03:52 +0000 Subject: [PATCH] Ported collapsible admin fieldsets to jQuery. Thanks Rob Hudson. git-svn-id: http://code.djangoproject.com/svn/django/trunk@12299 bcc190cf-cafb-0310-a4f2-bffc1f526a37 --- django/contrib/admin/helpers.py | 2 +- django/contrib/admin/media/css/forms.css | 1 - .../media/js/admin/CollapsedFieldsets.js | 85 ------------------- django/contrib/admin/media/js/collapse.js | 27 ++++++ django/contrib/admin/media/js/collapse.min.js | 1 + 5 files changed, 29 insertions(+), 87 deletions(-) delete mode 100644 django/contrib/admin/media/js/admin/CollapsedFieldsets.js create mode 100644 django/contrib/admin/media/js/collapse.js create mode 100644 django/contrib/admin/media/js/collapse.min.js diff --git a/django/contrib/admin/helpers.py b/django/contrib/admin/helpers.py index 5e64b76908..ef6ad66ece 100644 --- a/django/contrib/admin/helpers.py +++ b/django/contrib/admin/helpers.py @@ -75,7 +75,7 @@ class Fieldset(object): def _media(self): if 'collapse' in self.classes: - return forms.Media(js=['%sjs/admin/CollapsedFieldsets.js' % settings.ADMIN_MEDIA_PREFIX]) + return forms.Media(js=['%sjs/collapse.min.js' % settings.ADMIN_MEDIA_PREFIX]) return forms.Media() media = property(_media) diff --git a/django/contrib/admin/media/css/forms.css b/django/contrib/admin/media/css/forms.css index 6716d1c4d5..791c9b6b5c 100644 --- a/django/contrib/admin/media/css/forms.css +++ b/django/contrib/admin/media/css/forms.css @@ -140,7 +140,6 @@ fieldset.collapsed h2 { } fieldset.collapsed .collapse-toggle { - padding: 3px 5px !important; background: transparent; display: inline !important; } diff --git a/django/contrib/admin/media/js/admin/CollapsedFieldsets.js b/django/contrib/admin/media/js/admin/CollapsedFieldsets.js deleted file mode 100644 index d66bec0d97..0000000000 --- a/django/contrib/admin/media/js/admin/CollapsedFieldsets.js +++ /dev/null @@ -1,85 +0,0 @@ -// Finds all fieldsets with class="collapse", collapses them, and gives each -// one a "Show" link that uncollapses it. The "Show" link becomes a "Hide" -// link when the fieldset is visible. - -function findForm(node) { - // returns the node of the form containing the given node - if (node.tagName.toLowerCase() != 'form') { - return findForm(node.parentNode); - } - return node; -} - -var CollapsedFieldsets = { - collapse_re: /\bcollapse\b/, // Class of fieldsets that should be dealt with. - collapsed_re: /\bcollapsed\b/, // Class that fieldsets get when they're hidden. - collapsed_class: 'collapsed', - init: function() { - var fieldsets = document.getElementsByTagName('fieldset'); - var collapsed_seen = false; - for (var i = 0, fs; fs = fieldsets[i]; i++) { - // Collapse this fieldset if it has the correct class, and if it - // doesn't have any errors. (Collapsing shouldn't apply in the case - // of error messages.) - if (fs.className.match(CollapsedFieldsets.collapse_re) && !CollapsedFieldsets.fieldset_has_errors(fs)) { - collapsed_seen = true; - // Give it an additional class, used by CSS to hide it. - fs.className += ' ' + CollapsedFieldsets.collapsed_class; - // (Show) - var collapse_link = document.createElement('a'); - collapse_link.className = 'collapse-toggle'; - collapse_link.id = 'fieldsetcollapser' + i; - collapse_link.onclick = new Function('CollapsedFieldsets.show('+i+'); return false;'); - collapse_link.href = '#'; - collapse_link.innerHTML = gettext('Show'); - var h2 = fs.getElementsByTagName('h2')[0]; - h2.appendChild(document.createTextNode(' (')); - h2.appendChild(collapse_link); - h2.appendChild(document.createTextNode(')')); - } - } - if (collapsed_seen) { - // Expand all collapsed fieldsets when form is submitted. - addEvent(findForm(document.getElementsByTagName('fieldset')[0]), 'submit', function() { CollapsedFieldsets.uncollapse_all(); }); - } - }, - fieldset_has_errors: function(fs) { - // Returns true if any fields in the fieldset have validation errors. - var divs = fs.getElementsByTagName('div'); - for (var i=0; i' + gettext("Show") + + ')'); + } + }); + // Add toggle to anchor tag + $("fieldset.collapse a.collapse-toggle").toggle( + function() { // Show + $(this).text(gettext("Hide")); + $(this).closest("fieldset").removeClass("collapsed"); + return false; + }, + function() { // Hide + $(this).text(gettext("Show")); + $(this).closest("fieldset").addClass("collapsed"); + return false; + } + ); + }); +})(jQuery); diff --git a/django/contrib/admin/media/js/collapse.min.js b/django/contrib/admin/media/js/collapse.min.js new file mode 100644 index 0000000000..64ecea16c1 --- /dev/null +++ b/django/contrib/admin/media/js/collapse.min.js @@ -0,0 +1 @@ +(function(a){a(document).ready(function(){a("fieldset.collapse").each(function(b,c){if(a(c).find("div.errors").length==0){a(c).addClass("collapsed");a(c).find("h2").first().append(' ('+gettext("Show")+")")}});a("fieldset.collapse a.collapse-toggle").toggle(function(){a(this).text(gettext("Hide"));a(this).closest("fieldset").removeClass("collapsed");return false},function(){a(this).text(gettext("Show"));a(this).closest("fieldset").addClass("collapsed");return false})})})(jQuery); \ No newline at end of file