2014-09-10 15:06:10 -06:00
|
|
|
(function($){
|
|
|
|
|
|
|
|
|
|
var DynFields = {
|
|
|
|
|
init: function () {
|
|
|
|
|
var container = $('[data-grav-dynfields]');
|
|
|
|
|
DynFields.container = container;
|
|
|
|
|
container.on('click', '[data-grav-addfield]', DynFields.addField.bind(DynFields));
|
|
|
|
|
container.on('click', '[data-grav-remfield]', DynFields.remField.bind(DynFields));
|
|
|
|
|
container.on('keyup', 'input:not([name])', DynFields.updateFields.bind(DynFields));
|
|
|
|
|
},
|
|
|
|
|
addField: function (event, element) {
|
|
|
|
|
element = $(event.target);
|
2014-09-10 15:11:08 -06:00
|
|
|
var div = $('<div class="form-row" />').html(this.layout());
|
2014-09-10 15:06:10 -06:00
|
|
|
div.insertAfter(element.parent('div'));
|
|
|
|
|
},
|
|
|
|
|
remField: function (event, element) {
|
|
|
|
|
element = $(event.target);
|
|
|
|
|
element.parent('div').remove();
|
|
|
|
|
},
|
|
|
|
|
updateFields: function (event, element) {
|
|
|
|
|
element = $(event.target);
|
|
|
|
|
var sibling = element.next();
|
|
|
|
|
sibling.attr('name', this.getName() + '[' + element.val() + ']');
|
|
|
|
|
},
|
|
|
|
|
getName: function () {
|
|
|
|
|
return this.container.data('grav-dynfields') || 'generic';
|
|
|
|
|
},
|
|
|
|
|
layout: function () {
|
|
|
|
|
var name = this.getName();
|
2014-09-10 15:11:08 -06:00
|
|
|
return '' + ' <input type="text" value="" placeholder="/Your/Alias" />' + ' <input type="text" name="' + name + '[]" value="" placeholder="/Your/Real/Route" />' + ' <span data-grav-remfield class="fa fa-minus"></span> <span data-grav-addfield class="fa fa-plus"></span>' + '';
|
2014-09-10 15:06:10 -06:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$(DynFields.init);
|
|
|
|
|
|
|
|
|
|
})(jQuery);
|