chill-bundles/Resources/public/js/collection/collections.js

/**
 * Exemple d'utilisation
 * 
 * ```html
 *  <ul id="form_profile_formations">
 *      {% for formation in form.formations %}
 *          <li>
 *              <div data-removable data-label-remove-button="{{ 'Supprimer'|trans|e }}" >
 *                  {{ form_row(formation) }}
 *              </div>
 *          </li>
 *      {% endfor %}
 *  </ul>
 *
 *  <button data-add-target="form_profile_formations" data-form-prototype="{{ ('<div data-removable data-label-remove-button="' ~ 'Supprimer'|trans ~'">' ~ form_widget(form.formations.vars.prototype) ~ '</div>')|e }}" >{{ 'Ajouter une formation'|trans }}</button>
 * ```
 * 
 * Le javascript est initialisé dans `forms.js`
 * 
 */
var handleAdd = function(button) {
    var
        form_name = button.dataset.collectionAddTarget,
        prototype = button.dataset.formPrototype,
        collection = document.querySelector('ul[data-collection-name="'+form_name+'"]'),
        entry = document.createElement('li'),
        counter = collection.childNodes.length,
        content
        ;
    content = prototype.replace(new RegExp('__name__', 'g'), counter);
    entry.innerHTML = content;
    initializeRemove(collection, entry);
    collection.appendChild(entry);
};

var initializeRemove = function(collection, entry) {
    var
        button = document.createElement('button'),
        content = collection.dataset.collectionButtonRemoveLabel,
        allowDelete = collection.dataset.collectionAllowDelete
        ;
        
    if (allowDelete == '0') {
        return;
    }
    
    button.textContent = content;
    
    button.addEventListener('click', function(e) {
        e.preventDefault();
        entry.remove();
        console.log('click remove');
    });
    
    entry.appendChild(button);
};

window.addEventListener('load', function() {
    var 
        addButtons = document.querySelectorAll("button[data-collection-add-target]"),
        collections = document.querySelectorAll("ul[data-collection-name]")
        ;
    
    for (let i = 0; i < addButtons.length; i ++) {
        let addButton = addButtons[i];
        addButton.addEventListener('click', function(e) {
            e.preventDefault();
            console.log('click');
            handleAdd(e.target);
        });
    }
    
    for (let i = 0; i < collections.length; i ++) {
        let entries = collections[i].querySelectorAll('li'), entry;
        
        for (let j = 0; j < entries.length; j ++) {
            initializeRemove(collections[i], entries[j]);
        }
    }
});