a284d76c3c203aab78396358c136f4ba2e3cec69
[emels.git] / emels / static / admin / js / inlines.js
1 /*global DateTimeShortcuts, SelectFilter*/
2 /**
3  * Django admin inlines
4  *
5  * Based on jQuery Formset 1.1
6  * @author Stanislaus Madueke (stan DOT madueke AT gmail DOT com)
7  * @requires jQuery 1.2.6 or later
8  *
9  * Copyright (c) 2009, Stanislaus Madueke
10  * All rights reserved.
11  *
12  * Spiced up with Code from Zain Memon's GSoC project 2009
13  * and modified for Django by Jannis Leidel, Travis Swicegood and Julien Phalip.
14  *
15  * Licensed under the New BSD License
16  * See: http://www.opensource.org/licenses/bsd-license.php
17  */
18 (function($) {
19     'use strict';
20     $.fn.formset = function(opts) {
21         var options = $.extend({}, $.fn.formset.defaults, opts);
22         var $this = $(this);
23         var $parent = $this.parent();
24         var updateElementIndex = function(el, prefix, ndx) {
25             var id_regex = new RegExp("(" + prefix + "-(\\d+|__prefix__))");
26             var replacement = prefix + "-" + ndx;
27             if ($(el).prop("for")) {
28                 $(el).prop("for", $(el).prop("for").replace(id_regex, replacement));
29             }
30             if (el.id) {
31                 el.id = el.id.replace(id_regex, replacement);
32             }
33             if (el.name) {
34                 el.name = el.name.replace(id_regex, replacement);
35             }
36         };
37         var totalForms = $("#id_" + options.prefix + "-TOTAL_FORMS").prop("autocomplete", "off");
38         var nextIndex = parseInt(totalForms.val(), 10);
39         var maxForms = $("#id_" + options.prefix + "-MAX_NUM_FORMS").prop("autocomplete", "off");
40         // only show the add button if we are allowed to add more items,
41         // note that max_num = None translates to a blank string.
42         var showAddButton = maxForms.val() === '' || (maxForms.val() - totalForms.val()) > 0;
43         $this.each(function(i) {
44             $(this).not("." + options.emptyCssClass).addClass(options.formCssClass);
45         });
46         if ($this.length && showAddButton) {
47             var addButton;
48             if ($this.prop("tagName") === "TR") {
49                 // If forms are laid out as table rows, insert the
50                 // "add" button in a new table row:
51                 var numCols = this.eq(-1).children().length;
52                 $parent.append('<tr class="' + options.addCssClass + '"><td colspan="' + numCols + '"><a href="#">' + options.addText + "</a></tr>");
53                 addButton = $parent.find("tr:last a");
54             } else {
55                 // Otherwise, insert it immediately after the last form:
56                 $this.filter(":last").after('<div class="' + options.addCssClass + '"><a href="#">' + options.addText + "</a></div>");
57                 addButton = $this.filter(":last").next().find("a");
58             }
59             addButton.click(function(e) {
60                 e.preventDefault();
61                 var template = $("#" + options.prefix + "-empty");
62                 var row = template.clone(true);
63                 row.removeClass(options.emptyCssClass)
64                 .addClass(options.formCssClass)
65                 .attr("id", options.prefix + "-" + nextIndex);
66                 if (row.is("tr")) {
67                     // If the forms are laid out in table rows, insert
68                     // the remove button into the last table cell:
69                     row.children(":last").append('<div><a class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></div>");
70                 } else if (row.is("ul") || row.is("ol")) {
71                     // If they're laid out as an ordered/unordered list,
72                     // insert an <li> after the last list item:
73                     row.append('<li><a class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></li>");
74                 } else {
75                     // Otherwise, just insert the remove button as the
76                     // last child element of the form's container:
77                     row.children(":first").append('<span><a class="' + options.deleteCssClass + '" href="#">' + options.deleteText + "</a></span>");
78                 }
79                 row.find("*").each(function() {
80                     updateElementIndex(this, options.prefix, totalForms.val());
81                 });
82                 // Insert the new form when it has been fully edited
83                 row.insertBefore($(template));
84                 // Update number of total forms
85                 $(totalForms).val(parseInt(totalForms.val(), 10) + 1);
86                 nextIndex += 1;
87                 // Hide add button in case we've hit the max, except we want to add infinitely
88                 if ((maxForms.val() !== '') && (maxForms.val() - totalForms.val()) <= 0) {
89                     addButton.parent().hide();
90                 }
91                 // The delete button of each row triggers a bunch of other things
92                 row.find("a." + options.deleteCssClass).click(function(e1) {
93                     e1.preventDefault();
94                     // Remove the parent form containing this button:
95                     row.remove();
96                     nextIndex -= 1;
97                     // If a post-delete callback was provided, call it with the deleted form:
98                     if (options.removed) {
99                         options.removed(row);
100                     }
101                     $(document).trigger('formset:removed', [row, options.prefix]);
102                     // Update the TOTAL_FORMS form count.
103                     var forms = $("." + options.formCssClass);
104                     $("#id_" + options.prefix + "-TOTAL_FORMS").val(forms.length);
105                     // Show add button again once we drop below max
106                     if ((maxForms.val() === '') || (maxForms.val() - forms.length) > 0) {
107                         addButton.parent().show();
108                     }
109                     // Also, update names and ids for all remaining form controls
110                     // so they remain in sequence:
111                     var i, formCount;
112                     var updateElementCallback = function() {
113                         updateElementIndex(this, options.prefix, i);
114                     };
115                     for (i = 0, formCount = forms.length; i < formCount; i++) {
116                         updateElementIndex($(forms).get(i), options.prefix, i);
117                         $(forms.get(i)).find("*").each(updateElementCallback);
118                     }
119                 });
120                 // If a post-add callback was supplied, call it with the added form:
121                 if (options.added) {
122                     options.added(row);
123                 }
124                 $(document).trigger('formset:added', [row, options.prefix]);
125             });
126         }
127         return this;
128     };
129
130     /* Setup plugin defaults */
131     $.fn.formset.defaults = {
132         prefix: "form",          // The form prefix for your django formset
133         addText: "add another",      // Text for the add link
134         deleteText: "remove",      // Text for the delete link
135         addCssClass: "add-row",      // CSS class applied to the add link
136         deleteCssClass: "delete-row",  // CSS class applied to the delete link
137         emptyCssClass: "empty-row",    // CSS class applied to the empty row
138         formCssClass: "dynamic-form",  // CSS class applied to each form in a formset
139         added: null,          // Function called each time a new form is added
140         removed: null          // Function called each time a form is deleted
141     };
142
143
144     // Tabular inlines ---------------------------------------------------------
145     $.fn.tabularFormset = function(options) {
146         var $rows = $(this);
147         var alternatingRows = function(row) {
148             $($rows.selector).not(".add-row").removeClass("row1 row2")
149             .filter(":even").addClass("row1").end()
150             .filter(":odd").addClass("row2");
151         };
152
153         var reinitDateTimeShortCuts = function() {
154             // Reinitialize the calendar and clock widgets by force
155             if (typeof DateTimeShortcuts !== "undefined") {
156                 $(".datetimeshortcuts").remove();
157                 DateTimeShortcuts.init();
158             }
159         };
160
161         var updateSelectFilter = function() {
162             // If any SelectFilter widgets are a part of the new form,
163             // instantiate a new SelectFilter instance for it.
164             if (typeof SelectFilter !== 'undefined') {
165                 $('.selectfilter').each(function(index, value) {
166                     var namearr = value.name.split('-');
167                     SelectFilter.init(value.id, namearr[namearr.length - 1], false);
168                 });
169                 $('.selectfilterstacked').each(function(index, value) {
170                     var namearr = value.name.split('-');
171                     SelectFilter.init(value.id, namearr[namearr.length - 1], true);
172                 });
173             }
174         };
175
176         var initPrepopulatedFields = function(row) {
177             row.find('.prepopulated_field').each(function() {
178                 var field = $(this),
179                     input = field.find('input, select, textarea'),
180                     dependency_list = input.data('dependency_list') || [],
181                     dependencies = [];
182                 $.each(dependency_list, function(i, field_name) {
183                     dependencies.push('#' + row.find('.field-' + field_name).find('input, select, textarea').attr('id'));
184                 });
185                 if (dependencies.length) {
186                     input.prepopulate(dependencies, input.attr('maxlength'));
187                 }
188             });
189         };
190
191         $rows.formset({
192             prefix: options.prefix,
193             addText: options.addText,
194             formCssClass: "dynamic-" + options.prefix,
195             deleteCssClass: "inline-deletelink",
196             deleteText: options.deleteText,
197             emptyCssClass: "empty-form",
198             removed: alternatingRows,
199             added: function(row) {
200                 initPrepopulatedFields(row);
201                 reinitDateTimeShortCuts();
202                 updateSelectFilter();
203                 alternatingRows(row);
204             }
205         });
206
207         return $rows;
208     };
209
210     // Stacked inlines ---------------------------------------------------------
211     $.fn.stackedFormset = function(options) {
212         var $rows = $(this);
213         var updateInlineLabel = function(row) {
214             $($rows.selector).find(".inline_label").each(function(i) {
215                 var count = i + 1;
216                 $(this).html($(this).html().replace(/(#\d+)/g, "#" + count));
217             });
218         };
219
220         var reinitDateTimeShortCuts = function() {
221             // Reinitialize the calendar and clock widgets by force, yuck.
222             if (typeof DateTimeShortcuts !== "undefined") {
223                 $(".datetimeshortcuts").remove();
224                 DateTimeShortcuts.init();
225             }
226         };
227
228         var updateSelectFilter = function() {
229             // If any SelectFilter widgets were added, instantiate a new instance.
230             if (typeof SelectFilter !== "undefined") {
231                 $(".selectfilter").each(function(index, value) {
232                     var namearr = value.name.split('-');
233                     SelectFilter.init(value.id, namearr[namearr.length - 1], false);
234                 });
235                 $(".selectfilterstacked").each(function(index, value) {
236                     var namearr = value.name.split('-');
237                     SelectFilter.init(value.id, namearr[namearr.length - 1], true);
238                 });
239             }
240         };
241
242         var initPrepopulatedFields = function(row) {
243             row.find('.prepopulated_field').each(function() {
244                 var field = $(this),
245                     input = field.find('input, select, textarea'),
246                     dependency_list = input.data('dependency_list') || [],
247                     dependencies = [];
248                 $.each(dependency_list, function(i, field_name) {
249                     dependencies.push('#' + row.find('.form-row .field-' + field_name).find('input, select, textarea').attr('id'));
250                 });
251                 if (dependencies.length) {
252                     input.prepopulate(dependencies, input.attr('maxlength'));
253                 }
254             });
255         };
256
257         $rows.formset({
258             prefix: options.prefix,
259             addText: options.addText,
260             formCssClass: "dynamic-" + options.prefix,
261             deleteCssClass: "inline-deletelink",
262             deleteText: options.deleteText,
263             emptyCssClass: "empty-form",
264             removed: updateInlineLabel,
265             added: function(row) {
266                 initPrepopulatedFields(row);
267                 reinitDateTimeShortCuts();
268                 updateSelectFilter();
269                 updateInlineLabel(row);
270             }
271         });
272
273         return $rows;
274     };
275
276     $(document).ready(function() {
277         $(".js-inline-admin-formset").each(function() {
278             var data = $(this).data(),
279                 inlineOptions = data.inlineFormset;
280             switch(data.inlineType) {
281             case "stacked":
282                 $(inlineOptions.name + "-group .inline-related").stackedFormset(inlineOptions.options);
283                 break;
284             case "tabular":
285                 $(inlineOptions.name + "-group .tabular.inline-related tbody tr").tabularFormset(inlineOptions.options);
286                 break;
287             }
288         });
289     });
290 })(django.jQuery);