1
0
mirror of https://github.com/django/django.git synced 2025-07-04 09:49:12 +00:00

[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
This commit is contained in:
Zain Memon 2009-07-02 08:10:57 +00:00
parent d2d6301455
commit 2ae6ac5a6c
3 changed files with 92 additions and 51 deletions

View File

@ -274,7 +274,7 @@ fieldset.monospace textarea {
color: #fff;
}
.inline-related.tabular fieldset.module table {
.tabular.inline-group fieldset.module table {
width: 100%;
}
@ -282,26 +282,26 @@ fieldset.monospace textarea {
border: none;
}
.inline-group .tabular tr.has_original td {
.tabular.inline-group tr.has_original td {
padding-top: 2em;
}
.inline-group .tabular tr td.original {
.tabular.inline-group tr td.original {
padding: 2px 0 0 0;
width: 0;
_position: relative;
}
.inline-group .tabular th.original {
.tabular.inline-group th.original {
width: 0px;
padding: 0;
}
.inline-group .tabular td.original p {
.tabular.inline-group td.original p {
position: absolute;
left: 0;
height: 1.1em;
padding: 2px 7px;
padding: 2px 25px;
overflow: hidden;
font-size: 9px;
font-weight: bold;

View File

@ -53,7 +53,7 @@ $(function() {
$(id_prefix + "-add").click(function() {
var new_inline = $(id_prefix + '-empty').clone(true)
.insertBefore(id_prefix + '-addinline').fadeIn('normal');
.insertBefore(id_prefix + '-empty').fadeIn('normal');
var inline_template = $(new_inline).html();
var new_inline_html = inline_template.replace(/__prefix__/g, total_forms.val().toString());

View File

@ -1,6 +1,5 @@
{% load i18n %}
<div class="inline-group">
<div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
<div class="tabular inline-group" id="{{ inline_admin_formset.opts.verbose_name}}-group">
{{ inline_admin_formset.formset.management_form }}
<fieldset class="module">
<h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
@ -19,7 +18,8 @@
{% if inline_admin_form.form.non_field_errors %}
<tr><td colspan="{{ inline_admin_form.field_count }}">{{ inline_admin_form.form.non_field_errors }}</td></tr>
{% endif %}
<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 %}">
<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 %}"
id="{{ inline_admin_formset.opts.verbose_name}}{% if not forloop.last %}{{ forloop.counter }}{% else %}-empty{% endif %}">
<td class="original">
{% if inline_admin_form.original or inline_admin_form.show_url %}<p>
@ -61,54 +61,95 @@
</table>
</fieldset>
</div>
{# <ul class="tools"> #}
{# <li><a class="add" href="">Add another {{ inline_admin_formset.opts.verbose_name|title }}</a></li> #}
{# </ul> #}
<ul class="tools add_inline" id="{{ inline_admin_formset.opts.verbose_name}}-addinline">
<li><a id="{{ inline_admin_formset.opts.verbose_name }}-add" class="add" href="#">Add a {{ inline_admin_formset.opts.verbose_name }}</a></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
{% if inline_admin_formset.opts.order_field %}
// highlight each row on hover
$("table.orderable tbody tr").hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);
/* Add inline */
// TODO: this block of code is the same for all inlines, so move it out into a separate file
var prefix = "{{ inline_admin_formset.opts.verbose_name }}";
var id_prefix = "#" + prefix;
var total_forms = $(id_prefix + '-group input[id$="TOTAL_FORMS"]');
var initial_forms = $(id_prefix + '-group').find('input[id$="INITIAL_FORMS"]');
$('table.orderable').tableDnD({
onDragStart: function(table, row_obj) {
// once you start dragging a row, stop the hover() highlighting.
// this is needed because the highlighting from onDragStyle isn't always in
// sync with the hover() highlighting, which results in times where you have
// two rows highlighted.
$("table.orderable tbody tr").unbind('mouseenter').unbind('mouseleave');
},
onDrop: function(table, row_obj) {
var counter = 0;
$(row_obj).parent().find('input[id$="{{ inline_admin_formset.opts.order_field }}"]')
.each(function (i) {
$(this).val(counter++);
});
// rebind hover
$("table.orderable tbody tr").hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);
}
});
// since javascript is turned on, unhide the "add new <inline>" link
$('.add_inline').show();
// hide the extras, but only if there were no form errors
if (!$('.errornote').html()) {
if (parseInt(initial_forms.val()) > 0) {
$(id_prefix + '-group .inline-related:gt(' + (initial_forms.val() - 1) + ')')
.not('.empty_form').remove();
}
else {
$(id_prefix + '-group .inline-related').not('.empty_form').remove();
}
total_forms.val(parseInt(initial_forms.val()));
}
$(id_prefix + "-add").click(function() {
var new_inline = $(id_prefix + '-empty').clone(true)
.insertBefore(id_prefix + '-empty').fadeIn('normal');
var inline_template = $(new_inline).html();
var new_inline_html = inline_template.replace(/__prefix__/g, total_forms.val().toString());
total_forms.val(parseInt(total_forms.val()) + 1);
$(new_inline).html(new_inline_html);
$(new_inline).attr('id', prefix + total_forms.val().toString());
$(new_inline).find('.inline_label').html('#' + total_forms.val().toString());
$(new_inline).removeClass('empty_form');
return false;
});
{% if inline_admin_formset.opts.order_field %}
/* Reordering Inlines */
// highlight each row on hover
$("table.orderable tbody tr").hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);
$('table.orderable').tableDnD({
onDragStart: function(table, row_obj) {
// once you start dragging a row, stop the hover() highlighting.
// this is needed because the highlighting from onDragStyle isn't always in
// sync with the hover() highlighting, which results in times where you have
// two rows highlighted.
$("table.orderable tbody tr").unbind('mouseenter').unbind('mouseleave');
},
onDrop: function(table, row_obj) {
var counter = 0;
$(row_obj).parent().find('input[id$="{{ inline_admin_formset.opts.order_field }}"]')
.each(function (i) {
$(this).val(counter++);
});
// rebind hover
$("table.orderable tbody tr").hover(
function() {
$(this).addClass('hover');
},
function() {
$(this).removeClass('hover');
}
);
}
});
{% endif %}
});
</script>