Skip to content

Commit 2ae6ac5

Browse files
committed
[soc2009/admin-ui] Javascript inline addition for tabular inlines
git-svn-id: http://code.djangoproject.com/svn/django/branches/soc2009/admin-ui@11153 bcc190cf-cafb-0310-a4f2-bffc1f526a37
1 parent d2d6301 commit 2ae6ac5

File tree

3 files changed

+91
-50
lines changed

3 files changed

+91
-50
lines changed

django/contrib/admin/media/css/forms.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -274,34 +274,34 @@ fieldset.monospace textarea {
274274
color: #fff;
275275
}
276276

277-
.inline-related.tabular fieldset.module table {
277+
.tabular.inline-group fieldset.module table {
278278
width: 100%;
279279
}
280280

281281
.last-related fieldset {
282282
border: none;
283283
}
284284

285-
.inline-group .tabular tr.has_original td {
285+
.tabular.inline-group tr.has_original td {
286286
padding-top: 2em;
287287
}
288288

289-
.inline-group .tabular tr td.original {
289+
.tabular.inline-group tr td.original {
290290
padding: 2px 0 0 0;
291291
width: 0;
292292
_position: relative;
293293
}
294294

295-
.inline-group .tabular th.original {
295+
.tabular.inline-group th.original {
296296
width: 0px;
297297
padding: 0;
298298
}
299299

300-
.inline-group .tabular td.original p {
300+
.tabular.inline-group td.original p {
301301
position: absolute;
302302
left: 0;
303303
height: 1.1em;
304-
padding: 2px 7px;
304+
padding: 2px 25px;
305305
overflow: hidden;
306306
font-size: 9px;
307307
font-weight: bold;

django/contrib/admin/templates/admin/edit_inline/stacked.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ <h3><b>{{ inline_admin_formset.opts.verbose_name|title }}:</b>&nbsp;<span class=
5353

5454
$(id_prefix + "-add").click(function() {
5555
var new_inline = $(id_prefix + '-empty').clone(true)
56-
.insertBefore(id_prefix + '-addinline').fadeIn('normal');
56+
.insertBefore(id_prefix + '-empty').fadeIn('normal');
5757

5858
var inline_template = $(new_inline).html();
5959
var new_inline_html = inline_template.replace(/__prefix__/g, total_forms.val().toString());

django/contrib/admin/templates/admin/edit_inline/tabular.html

Lines changed: 84 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{% load i18n %}
2-
<div class="inline-group">
3-
<div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
2+
<div class="tabular inline-group" id="{{ inline_admin_formset.opts.verbose_name}}-group">
43
{{ inline_admin_formset.formset.management_form }}
54
<fieldset class="module">
65
<h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
@@ -19,7 +18,8 @@ <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
1918
{% if inline_admin_form.form.non_field_errors %}
2019
<tr><td colspan="{{ inline_admin_form.field_count }}">{{ inline_admin_form.form.non_field_errors }}</td></tr>
2120
{% endif %}
22-
<tr class="{% if not inline_admin_formset.opts.order_field %}{% cycle 'row1' 'row2' %} {% endif %}{% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}">
21+
<tr class="inline-related {% if forloop.last %}empty_form{% endif %} {% if not inline_admin_formset.opts.order_field %}{% cycle 'row1' 'row2' %} {% endif %}{% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}"
22+
id="{{ inline_admin_formset.opts.verbose_name}}{% if not forloop.last %}{{ forloop.counter }}{% else %}-empty{% endif %}">
2323

2424
<td class="original">
2525
{% if inline_admin_form.original or inline_admin_form.show_url %}<p>
@@ -61,54 +61,95 @@ <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
6161
</table>
6262

6363
</fieldset>
64-
</div>
6564

66-
{# <ul class="tools"> #}
67-
{# <li><a class="add" href="">Add another {{ inline_admin_formset.opts.verbose_name|title }}</a></li> #}
68-
{# </ul> #}
65+
<ul class="tools add_inline" id="{{ inline_admin_formset.opts.verbose_name}}-addinline">
66+
<li><a id="{{ inline_admin_formset.opts.verbose_name }}-add" class="add" href="#">Add a {{ inline_admin_formset.opts.verbose_name }}</a></li>
67+
</ul>
6968

7069
</div>
7170

7271
<script type="text/javascript">
7372
$(function() {
73+
/* Add inline */
74+
// TODO: this block of code is the same for all inlines, so move it out into a separate file
75+
var prefix = "{{ inline_admin_formset.opts.verbose_name }}";
76+
var id_prefix = "#" + prefix;
77+
var total_forms = $(id_prefix + '-group input[id$="TOTAL_FORMS"]');
78+
var initial_forms = $(id_prefix + '-group').find('input[id$="INITIAL_FORMS"]');
79+
80+
// since javascript is turned on, unhide the "add new <inline>" link
81+
$('.add_inline').show();
82+
83+
// hide the extras, but only if there were no form errors
84+
if (!$('.errornote').html()) {
85+
if (parseInt(initial_forms.val()) > 0) {
86+
$(id_prefix + '-group .inline-related:gt(' + (initial_forms.val() - 1) + ')')
87+
.not('.empty_form').remove();
88+
}
89+
else {
90+
$(id_prefix + '-group .inline-related').not('.empty_form').remove();
91+
}
92+
93+
total_forms.val(parseInt(initial_forms.val()));
94+
}
95+
96+
$(id_prefix + "-add").click(function() {
97+
var new_inline = $(id_prefix + '-empty').clone(true)
98+
.insertBefore(id_prefix + '-empty').fadeIn('normal');
99+
100+
var inline_template = $(new_inline).html();
101+
var new_inline_html = inline_template.replace(/__prefix__/g, total_forms.val().toString());
102+
103+
total_forms.val(parseInt(total_forms.val()) + 1);
104+
105+
$(new_inline).html(new_inline_html);
106+
$(new_inline).attr('id', prefix + total_forms.val().toString());
107+
$(new_inline).find('.inline_label').html('#' + total_forms.val().toString());
108+
$(new_inline).removeClass('empty_form');
109+
110+
return false;
111+
});
112+
74113
{% if inline_admin_formset.opts.order_field %}
75-
// highlight each row on hover
76-
$("table.orderable tbody tr").hover(
77-
function() {
78-
$(this).addClass('hover');
79-
},
80-
function() {
81-
$(this).removeClass('hover');
82-
}
83-
);
114+
/* Reordering Inlines */
84115

85-
$('table.orderable').tableDnD({
86-
onDragStart: function(table, row_obj) {
87-
// once you start dragging a row, stop the hover() highlighting.
88-
// this is needed because the highlighting from onDragStyle isn't always in
89-
// sync with the hover() highlighting, which results in times where you have
90-
// two rows highlighted.
91-
$("table.orderable tbody tr").unbind('mouseenter').unbind('mouseleave');
92-
},
93-
onDrop: function(table, row_obj) {
94-
var counter = 0;
95-
96-
$(row_obj).parent().find('input[id$="{{ inline_admin_formset.opts.order_field }}"]')
97-
.each(function (i) {
98-
$(this).val(counter++);
99-
});
100-
101-
// rebind hover
102-
$("table.orderable tbody tr").hover(
103-
function() {
104-
$(this).addClass('hover');
105-
},
106-
function() {
107-
$(this).removeClass('hover');
108-
}
109-
);
110-
}
111-
});
116+
// highlight each row on hover
117+
$("table.orderable tbody tr").hover(
118+
function() {
119+
$(this).addClass('hover');
120+
},
121+
function() {
122+
$(this).removeClass('hover');
123+
}
124+
);
125+
126+
$('table.orderable').tableDnD({
127+
onDragStart: function(table, row_obj) {
128+
// once you start dragging a row, stop the hover() highlighting.
129+
// this is needed because the highlighting from onDragStyle isn't always in
130+
// sync with the hover() highlighting, which results in times where you have
131+
// two rows highlighted.
132+
$("table.orderable tbody tr").unbind('mouseenter').unbind('mouseleave');
133+
},
134+
onDrop: function(table, row_obj) {
135+
var counter = 0;
136+
137+
$(row_obj).parent().find('input[id$="{{ inline_admin_formset.opts.order_field }}"]')
138+
.each(function (i) {
139+
$(this).val(counter++);
140+
});
141+
142+
// rebind hover
143+
$("table.orderable tbody tr").hover(
144+
function() {
145+
$(this).addClass('hover');
146+
},
147+
function() {
148+
$(this).removeClass('hover');
149+
}
150+
);
151+
}
152+
});
112153
{% endif %}
113154
});
114155
</script>

0 commit comments

Comments
 (0)