Files
@ d14048bcb857
Branch filter:
Location: symposion_app/static/src/js/jquery.formset.js
d14048bcb857
7.3 KiB
application/javascript
Further changes to support badge generation for lca2018
* Undo some of the debugging done early in this series of patches
* Add ability for a user to preview their own badge
* Add a template for the LCA2018 badge
* Undo some of the debugging done early in this series of patches
* Add ability for a user to preview their own badge
* Add a template for the LCA2018 badge
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 | /**
* Django formset helper
*/
(function($) {
"use strict";
var pluginName = 'formset';
/**
* Wraps up a formset, allowing adding, and removing forms
*/
var Formset = function(el, options) {
var _this = this;
//Defaults:
this.opts = $.extend({}, Formset.defaults, options);
this.$formset = $(el);
this.$emptyForm = this.$formset.find(this.opts.emptyForm);
this.$body = this.$formset.find(this.opts.body);
this.$add = this.$formset.find(this.opts.add);
this.formsetPrefix = $(el).data('formset-prefix');
// Bind to the `Add form` button
this.addForm = $.proxy(this, 'addForm');
this.$add.click(this.addForm);
// Bind receiver to `formAdded` and `formDeleted` events
this.$formset.on('formAdded formDeleted', this.opts.form, $.proxy(this, 'checkMaxForms'));
// Set up the existing forms
this.$forms().each(function(i, form) {
var $form = $(form);
_this.bindForm($(this), i);
});
// Store a reference to this in the formset element
this.$formset.data(pluginName, this);
var extras = ['animateForms'];
$.each(extras, function(i, extra) {
if ((extra in _this.opts) && (_this.opts[extra])) {
_this[extra]();
}
});
};
Formset.defaults = {
form: '[data-formset-form]',
emptyForm: 'script[type=form-template][data-formset-empty-form]',
body: '[data-formset-body]',
add: '[data-formset-add]',
deleteButton: '[data-formset-delete-button]',
hasMaxFormsClass: 'has-max-forms',
animateForms: false
};
Formset.prototype.addForm = function() {
// Don't proceed if the number of maximum forms has been reached
if (this.hasMaxForms()) {
throw new Error("MAX_NUM_FORMS reached");
}
var newIndex = this.totalFormCount();
this.$managementForm('TOTAL_FORMS').val(newIndex + 1);
var newFormHtml = this.$emptyForm.html()
.replace(new RegExp('__prefix__', 'g'), newIndex)
.replace(new RegExp('<\\\\/script>', 'g'), '</script>');
var $newFormFragment = $($.parseHTML(newFormHtml, this.$body.document, true));
this.$body.append($newFormFragment);
var $newForm = $newFormFragment.filter(this.opts.form);
this.bindForm($newForm, newIndex);
return $newForm;
};
/**
* Attach any events needed to a new form
*/
Formset.prototype.bindForm = function($form, index) {
var prefix = this.formsetPrefix + '-' + index;
$form.data(pluginName + '__formPrefix', prefix);
var $delete = $form.find('[name=' + prefix + '-DELETE]');
var onChangeDelete = function() {
if ($delete.is(':checked')) {
$form.attr('data-formset-form-deleted', '');
// Remove required property and pattern attribute to allow submit, back it up to data field
$form.find(':required').data(pluginName + '-required-field', true).prop('required', false);
$form.find('input[pattern]').each(function() {
var pattern = $(this).attr('pattern');
$(this).data(pluginName + '-field-pattern', pattern).removeAttr('pattern');
});
$form.trigger('formDeleted');
} else {
$form.removeAttr('data-formset-form-deleted');
// Restore required property and pattern attributes from data field
$form.find('*').filter(function() {
return $(this).data(pluginName + '-required-field') === true;
}).prop('required', true);
$form.find('input').each(function() {
var pattern = $(this).data(pluginName + '-field-pattern');
if (pattern) {
$(this).attr('pattern', pattern);
}
});
$form.trigger('formAdded');
}
}
// Trigger `formAdded` / `formDeleted` events when delete checkbox value changes
$delete.change(onChangeDelete);
// This will trigger `formAdded` for newly created forms.
// It will also trigger `formAdded` or `formDeleted` for all forms when
// the Formset is first created.
// setTimeout so the caller can register events before the events are
// triggered, during initialisation.
window.setTimeout(onChangeDelete);
// Delete the form if the delete button is pressed
var $deleteButton = $form.find(this.opts.deleteButton);
$deleteButton.bind('click', function() {
$delete.attr('checked', true).change();
});
};
Formset.prototype.$forms = function() {
return this.$body.find(this.opts.form);
};
Formset.prototype.$managementForm = function(name) {
return this.$formset.find('[name=' + this.formsetPrefix + '-' + name + ']');
};
Formset.prototype.totalFormCount = function() {
return this.$forms().length;
};
Formset.prototype.deletedFormCount = function() {
return this.$forms().filter('[data-formset-form-deleted]').length;
};
Formset.prototype.activeFormCount = function() {
return this.totalFormCount() - this.deletedFormCount();
};
Formset.prototype.hasMaxForms = function() {
var maxForms = parseInt(this.$managementForm('MAX_NUM_FORMS').val(), 10) || 1000;
return this.activeFormCount() >= maxForms;
};
Formset.prototype.checkMaxForms = function() {
if (this.hasMaxForms()) {
this.$formset.addClass(this.opts.hasMaxFormsClass);
this.$add.attr('disabled', 'disabled');
} else {
this.$formset.removeClass(this.opts.hasMaxFormsClass);
this.$add.removeAttr('disabled');
}
};
Formset.prototype.animateForms = function() {
this.$formset.on('formAdded', this.opts.form, function() {
var $form = $(this);
$form.slideUp(0);
$form.slideDown();
}).on('formDeleted', this.opts.form, function() {
var $form = $(this);
$form.slideUp();
});
this.$forms().filter('[data-formset-form-deleted]').slideUp(0);
};
Formset.getOrCreate = function(el, options) {
var rev = $(el).data(pluginName);
if (!rev) {
rev = new Formset(el, options);
}
return rev;
};
$.fn[pluginName] = function() {
var options, fn, args;
// Create a new Formset for each element
if (arguments.length === 0 || (arguments.length === 1 && $.type(arguments[0]) != 'string')) {
options = arguments[0];
return this.each(function() {
return Formset.getOrCreate(this, options);
});
}
// Call a function on each Formset in the selector
fn = arguments[0];
args = $.makeArray(arguments).slice(1);
if (fn in Formset) {
// Call the Formset class method if it exists
args.unshift(this);
return Formset[fn].apply(Formset, args);
} else {
throw new Error("Unknown function call " + fn + " for $.fn.formset");
}
};
})(jQuery);
|