Packages
formex
0.6.4
0.6.7
0.6.6
0.6.5
0.6.4
0.6.3
0.6.2
0.6.1
0.6.0
0.5.10
0.5.9
0.5.8
0.5.7
0.5.6
0.5.5
0.5.4
0.5.3
0.5.2
0.5.1
0.5.0
0.4.16
0.4.15
0.4.14
0.4.13
0.4.12
0.4.11
0.4.10
0.4.9
0.4.8
0.4.7
0.4.6
0.4.5
0.4.4
0.4.3
0.4.2
0.4.1
0.4.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.3
0.2.2
0.2.1
0.2.0
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
Form library for Phoenix with Ecto support
Current section
Files
Jump to
Current section
Files
web/static/js/formex.js
import $ from 'jquery'
import uuidV4 from 'uuid/v4'
export class Collection {
static run(callback) {
Collection.listenDOM();
$(document).on('formex-collection-change', callback)
}
static listenDOM() {
$(document).on('click', '.formex-collection-add', function (e) {
e.preventDefault()
Collection.addCollectionItemForm($(this).closest('.formex-collection'))
})
$(document).on('click', '.formex-collection-item-remove', function (e) {
e.preventDefault()
if (!confirm($(this).data('formex-confirm')))
return
let collectionHolder = $(this).closest('.formex-collection')
let item = $(this).closest('.formex-collection-item')
collectionHolder.trigger('formex-collection-remove-item', item)
if (item.is('.formex-collection-item-new')) {
item.remove()
} else {
item.find('[data-formex-remove]').val('true')
item.hide()
}
collectionHolder.trigger('formex-collection-removed-item')
collectionHolder.trigger('formex-collection-change')
})
}
static addCollectionItemForm(collectionHolder) {
let prototype = collectionHolder.data('formex-prototype')
let indexes = []
const items = collectionHolder.find('.formex-collection-items').first()
const newIndex = (items.find('> :last-child').data('formex-index') + 1) || 0
indexes.push(newIndex)
collectionHolder.parents('.formex-collection-item').each(function(){
indexes.push($(this).data('formex-index'))
})
indexes = indexes.reverse()
// console.log(indexes)
const newItem = Collection.replaceIndexes(prototype, indexes)
newItem.find('[data-formex-id]').val(uuidV4())
newItem.data('formex-index', newIndex)
collectionHolder.find('.formex-collection-items').first().append(newItem)
collectionHolder.trigger('formex-collection-add-item', items.find('> :last-child'))
collectionHolder.trigger('formex-collection-change')
}
static replaceIndexes(prototype, indexes) {
let $prototype = $(prototype).find('.formex-collection-item').first()
function fun(name) {
let els = $prototype.find('['+name+']')
$(els).each(function(){
let newValue = $(this).attr(name)
for (const k in indexes) {
const placeholder = new RegExp('__idx'+k+'__', 'g')
newValue = newValue.replace(placeholder, indexes[k])
}
$(this).attr(name, newValue)
})
}
fun('for')
fun('id')
fun('name')
return $prototype
}
}