123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- function template(html, data) {
- var loop = /\{@([^}]+)\}(.+?)\{\/\1\}/g
- , loopVariable = /\{#([^}]+)\}/g
- , variable = /\{([^}]+)\}/g;
- return html
- .replace(loop, function(_, key, list) {
- return $.map(data[key], function(item) {
- return list.replace(loopVariable, function(_, k) {
- return item[k];
- });
- }).join('');
- })
- .replace(variable, function(_, key) {
- return data[key] || '';
- });
- }
- module.exports = {
- name: 'dynamicFields',
- options: {
- templates: {
- base:'\
- <div class="field">\
- <label class="main">{label}</label>\
- {field}\
- <span class="error"></span>\
- </div>\
- ',
- text: '<input name="{name}" type="{subtype}" value="{value}" {attrs}>',
- file: '<input id="{name}" name="{name}" type="file" {attrs}>',
- textarea: '<textarea name="{name}" {attrs}>{text}</textarea>',
- group: '\
- <p class="group">\
- {@list}\
- <label><input name="{name}" type="{subtype}" value="{#value}" {#attrs}>{#text}</label>\
- {/list}\
- </p>\
- ',
- select: '\
- <select name={name}>\
- {@list}\
- <option value="{#value}">{#text}</option>\
- {/list}\
- </select>\
- '
- }
- },
- methods: {
- addFields: function(fields) {
- var self = this;
- $.each(fields, function(name, field) {
- var typeArray = field.type.split(':')
- , rules = {}
- , $last = self.$form.find(self.opts.field).last();
- field.name = name;
- field.type = typeArray[0];
- if (typeArray[1]) field.subtype = typeArray[1];
- field.html = template(self.opts.templates.base, {
- label: field.label,
- field: template(self.opts.templates[field.type], field)
- });
- self._inject('addFields:before', field);
- if (field.after || field.before) {
- self.$form.find('[name="'+ (field.after || field.before) +'"]').first().each(function() {
- self._getField(this)[field.after ? 'after' : 'before'](field.html);
- });
- } else {
- // Form has at least one field
- if ($last.length) $last.after(field.html);
- // Form has no fields
- else self.$form.append(field.html);
- }
- if (field.rules) {
- rules[name] = field.rules;
- self.addRules(rules);
- }
- self._inject('addFields:after', field);
- });
- },
- removeFields: function(names) {
- var self = this;
- $.each(names.split(' '), function(i, name) {
- var $field = self._getField($('[name="'+ name +'"]'));
- self.$fields = self.$fields.filter(function() {
- return ! $(this).is($field);
- });
- $field.remove();
- });
- this._inject('removeFields');
- },
- toggleFields: function(names) {
- var self = this;
- $.each(names.split(' '), function(i, name) {
- var $field = self._getField($('[name="'+ name +'"]'));
- $field.data('idealforms-valid', $field.is(':visible')).toggle();
- });
- this._inject('toggleFields');
- }
- }
- };
|