Collection: amélioration + lancement d'événements

Resources/public/js/collection/collection.scss

@@ -0,0 +1,23 @@
+div.chill-collection {
+    ul.chill-collection__list {
+        list-style: none;
+        padding: 0;
+        margin-bottom: 1.5rem;
+        
+        li.chill-collection__list__entry:nth-child(2n) {
+            background-color: var(--chill-light-gray);
+            padding: 0.5rem 0;
+        }
+        
+        // all entries, except the last one
+        li.chill-collection__list__entry:nth-last-child(1n+2) {
+            margin-bottom: 1rem;
+        }
+    }
+    
+    button.chill-collection__button--add {
+        
+        
+    }
+}
+

Resources/public/js/collection/collections.js

@@ -1,22 +1,46 @@
 /**
- * Exemple d'utilisation
+ * Javascript file which handle ChillCollectionType
+ * 
+ * Two events are emitted by this module, both on window and on collection / ul. 
+ * 
+ * Collection (an UL element) and entry (a li element) are associated with those
+ * events.
  * 
- * ```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>
  * ```
+ * window.addEventListener('collection-add-entry', function(e) {
+ *   console.log(e.detail.collection);
+ *   console.log(e.detail.entry);
+ * });
  * 
- * Le javascript est initialisé dans `forms.js`
+ * window.addEventListener('collection-remove-entry', function(e) {
+ *   console.log(e.detail.collection);
+ *   console.log(e.detail.entry);
+ * });
  * 
+ * collection.addEventListener('collection-add-entry', function(e) {
+ *   console.log(e.detail.collection);
+ *   console.log(e.detail.entry);
+ * });
+ * 
+ * collection.addEventListener('collection-remove-entry', function(e) {
+ *   console.log(e.detail.collection);
+ *   console.log(e.detail.entry);
+ * });
+ * ```
+ */
+require('./collection.scss');
+
+class CollectionEvent {
+    constructor(collection, entry) {
+        this.collection = collection;
+        this.entry = entry;
+    }
+}
+
+/**
+ * 
+ * @param {type} button
+ * @returns {handleAdd}
  */
 var handleAdd = function(button) {
     var
@@ -24,32 +48,41 @@ var handleAdd = function(button) {
         prototype = button.dataset.formPrototype,
         collection = document.querySelector('ul[data-collection-name="'+form_name+'"]'),
         entry = document.createElement('li'),
+        event = new CustomEvent('collection-add-entry', { detail: { collection: collection, entry: entry } }),
         counter = collection.childNodes.length,
         content
         ;
     content = prototype.replace(new RegExp('__name__', 'g'), counter);
     entry.innerHTML = content;
+    entry.classList.add('chill-collection__list__entry');
     initializeRemove(collection, entry);
     collection.appendChild(entry);
+    
+    collection.dispatchEvent(event);
+    window.dispatchEvent(event);
 };
 
 var initializeRemove = function(collection, entry) {
     var
         button = document.createElement('button'),
+        isPersisted = entry.dataset.collectionIsPersisted,
         content = collection.dataset.collectionButtonRemoveLabel,
-        allowDelete = collection.dataset.collectionAllowDelete
+        allowDelete = collection.dataset.collectionAllowDelete,
+        event = new CustomEvent('collection-remove-entry', { detail: { collection: collection, entry: entry } })
         ;
         
-    if (allowDelete == '0') {
+    if (allowDelete === '0' && isPersisted === '1') {
         return;
     }
     
+    button.classList.add('sc-button', 'bt-delete');
     button.textContent = content;
     
     button.addEventListener('click', function(e) {
         e.preventDefault();
         entry.remove();
-        console.log('click remove');
+        collection.dispatchEvent(event);
+        window.dispatchEvent(event);
     });
     
     entry.appendChild(button);
@@ -65,13 +98,12 @@ window.addEventListener('load', function() {
         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;
+        let entries = collections[i].querySelectorAll('li');
         
         for (let j = 0; j < entries.length; j ++) {
             initializeRemove(collections[i], entries[j]);
@@ -79,3 +111,5 @@ window.addEventListener('load', function() {
     }
 });
 
+
+