[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,54 +61,95 @@
    </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() {
-    {% if inline_admin_formset.opts.order_field %}
+    /* Add inline */
-        // highlight each row on hover
+    // TODO: this block of code is the same for all inlines, so move it out into a separate file
-        $("table.orderable tbody tr").hover(
+    var prefix = "{{ inline_admin_formset.opts.verbose_name }}";
-            function() {
+    var id_prefix = "#" + prefix;
-                $(this).addClass('hover');
+    var total_forms = $(id_prefix + '-group input[id$="TOTAL_FORMS"]');
-            }, 
+    var initial_forms = $(id_prefix + '-group').find('input[id$="INITIAL_FORMS"]');
-            function() {
-                $(this).removeClass('hover');
-            }
-        );
     
-        $('table.orderable').tableDnD({
+    // since javascript is turned on, unhide the "add new <inline>" link
-            onDragStart: function(table, row_obj) {
+    $('.add_inline').show();
-                // once you start dragging a row, stop the hover() highlighting. 
+    
-                // this is needed because the highlighting from onDragStyle isn't always in 
+    // hide the extras, but only if there were no form errors
-                // sync with the hover() highlighting, which results in times where you have 
+    if (!$('.errornote').html()) {
-                // two rows highlighted. 
+        if (parseInt(initial_forms.val()) > 0) {
-                $("table.orderable tbody tr").unbind('mouseenter').unbind('mouseleave');
+            $(id_prefix + '-group .inline-related:gt(' + (initial_forms.val() - 1) + ')')
-            },
+                .not('.empty_form').remove();
-            onDrop: function(table, row_obj) {
+        }
-                var counter = 0;
+        else {
-            
+            $(id_prefix + '-group .inline-related').not('.empty_form').remove();
-                $(row_obj).parent().find('input[id$="{{ inline_admin_formset.opts.order_field }}"]')
+        }
-                    .each(function (i) {
+        
-                        $(this).val(counter++);
+        total_forms.val(parseInt(initial_forms.val()));
-                    });
+    }
-            
+    
-                // rebind hover
+    $(id_prefix + "-add").click(function() {
-                $("table.orderable tbody tr").hover(
+        var new_inline = $(id_prefix + '-empty').clone(true)
-                    function() {
+                            .insertBefore(id_prefix + '-empty').fadeIn('normal');
-                        $(this).addClass('hover');
+        
-                    }, 
+        var inline_template = $(new_inline).html();
-                    function() {
+        var new_inline_html = inline_template.replace(/__prefix__/g, total_forms.val().toString());
-                        $(this).removeClass('hover');
+        
-                    }
+        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>