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
This commit is contained in:
Jannis Leidel
parent
f109f36a06
commit
a260980f98
|
|
@ -75,7 +75,7 @@ class Fieldset(object):
|
||||||
|
|
||||||
def _media(self):
|
def _media(self):
|
||||||
if 'collapse' in self.classes:
|
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()
|
return forms.Media()
|
||||||
media = property(_media)
|
media = property(_media)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -140,7 +140,6 @@ fieldset.collapsed h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset.collapsed .collapse-toggle {
|
fieldset.collapsed .collapse-toggle {
|
||||||
padding: 3px 5px !important;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
display: inline !important;
|
display: inline !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
|
||||||
// (<a id="fieldsetcollapser3" class="collapse-toggle" href="#">Show</a>)
|
|
||||||
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<divs.length; i++) {
|
|
||||||
if (divs[i].className.match(/\berrors\b/)) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
show: function(fieldset_index) {
|
|
||||||
var fs = document.getElementsByTagName('fieldset')[fieldset_index];
|
|
||||||
// Remove the class name that causes the "display: none".
|
|
||||||
fs.className = fs.className.replace(CollapsedFieldsets.collapsed_re, '');
|
|
||||||
// Toggle the "Show" link to a "Hide" link
|
|
||||||
var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
|
|
||||||
collapse_link.onclick = new Function('CollapsedFieldsets.hide('+fieldset_index+'); return false;');
|
|
||||||
collapse_link.innerHTML = gettext('Hide');
|
|
||||||
},
|
|
||||||
hide: function(fieldset_index) {
|
|
||||||
var fs = document.getElementsByTagName('fieldset')[fieldset_index];
|
|
||||||
// Add the class name that causes the "display: none".
|
|
||||||
fs.className += ' ' + CollapsedFieldsets.collapsed_class;
|
|
||||||
// Toggle the "Hide" link to a "Show" link
|
|
||||||
var collapse_link = document.getElementById('fieldsetcollapser' + fieldset_index);
|
|
||||||
collapse_link.onclick = new Function('CollapsedFieldsets.show('+fieldset_index+'); return false;');
|
|
||||||
collapse_link.innerHTML = gettext('Show');
|
|
||||||
},
|
|
||||||
|
|
||||||
uncollapse_all: function() {
|
|
||||||
var fieldsets = document.getElementsByTagName('fieldset');
|
|
||||||
for (var i=0; i<fieldsets.length; i++) {
|
|
||||||
if (fieldsets[i].className.match(CollapsedFieldsets.collapsed_re)) {
|
|
||||||
CollapsedFieldsets.show(i);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
addEvent(window, 'load', CollapsedFieldsets.init);
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
(function($) {
|
||||||
|
$(document).ready(function() {
|
||||||
|
// Add anchor tag for Show/Hide link
|
||||||
|
$("fieldset.collapse").each(function(i, elem) {
|
||||||
|
// Don't hide if fields in this fieldset have errors
|
||||||
|
if ( $(elem).find("div.errors").length == 0 ) {
|
||||||
|
$(elem).addClass("collapsed");
|
||||||
|
$(elem).find("h2").first().append(' (<a id="fieldsetcollapser' +
|
||||||
|
i +'" class="collapse-toggle" href="#">' + gettext("Show") +
|
||||||
|
'</a>)');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 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);
|
||||||
|
|
@ -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(' (<a id="fieldsetcollapser'+b+'" class="collapse-toggle" href="#">'+gettext("Show")+"</a>)")}});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);
|
||||||
Loading…
Reference in New Issue