[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

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

@@ -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;

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

@@ -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());

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

@@ -1,6 +1,5 @@
 {% load i18n %}
-<div class="inline-group">
+<div class="tabular inline-group" id="{{ inline_admin_formset.opts.verbose_name}}-group">
-  <div class="tabular inline-related {% if forloop.last %}last-related{% endif %}">
 {{ 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,17 +61,58 @@
    </table>
 
 </fieldset>
-  </div>
 
-  {# <ul class="tools"> #}
+<ul class="tools add_inline" id="{{ inline_admin_formset.opts.verbose_name}}-addinline">
-  {#   <li><a class="add" href="">Add another {{ inline_admin_formset.opts.verbose_name|title }}</a></li> #}
+    <li><a id="{{ inline_admin_formset.opts.verbose_name }}-add" class="add" href="#">Add a {{ inline_admin_formset.opts.verbose_name }}</a></li>
-  {# </ul> #}
+</ul>
 
 </div>
 
 <script type="text/javascript">
 $(function() {
+    /* 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"]');
+    
+    // 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() {