From d3d8f27c6de39990e974384f864b1b28d10f5b2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Fri, 25 May 2018 00:58:20 +0200 Subject: [PATCH] =?UTF-8?q?Collection:=20am=C3=A9lioration=20+=20lancement?= =?UTF-8?q?=20d'=C3=A9v=C3=A9nements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Form/Type/ChillCollectionType.php | 10 ++- .../public/js/collection/collection.scss | 23 ++++++ Resources/public/js/collection/collections.js | 72 ++++++++++++++----- .../public/sass/custom/config/_colors.scss | 35 ++++++++- Resources/views/Form/fields.html.twig | 26 +++---- 5 files changed, 132 insertions(+), 34 deletions(-) create mode 100644 Resources/public/js/collection/collection.scss diff --git a/Form/Type/ChillCollectionType.php b/Form/Type/ChillCollectionType.php index d653794c7..1068522c9 100644 --- a/Form/Type/ChillCollectionType.php +++ b/Form/Type/ChillCollectionType.php @@ -23,6 +23,12 @@ use Symfony\Component\OptionsResolver\OptionsResolver; use Symfony\Component\Form\FormInterface; /** + * Available options : + * + * - `button_add_label` + * - `button_remove_label` + * - `identifier`: an identifier to identify the kind of collecton. Useful if some + * javascript should be launched associated to `add_entry`, `remove_entry` events. * * * @author Julien Fastré @@ -34,7 +40,8 @@ class ChillCollectionType extends AbstractType $resolver ->setDefaults([ 'button_add_label' => 'Add an entry', - 'button_remove_label' => 'Remove entry' + 'button_remove_label' => 'Remove entry', + 'identifier' => '' ]); } @@ -44,6 +51,7 @@ class ChillCollectionType extends AbstractType $view->vars['button_remove_label'] = $options['button_remove_label']; $view->vars['allow_delete'] = (int) $options['allow_delete']; $view->vars['allow_add'] = (int) $options['allow_add']; + $view->vars['identifier'] = $options['identifier']; } public function getParent() diff --git a/Resources/public/js/collection/collection.scss b/Resources/public/js/collection/collection.scss new file mode 100644 index 000000000..13fc4a528 --- /dev/null +++ b/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 { + + + } +} + diff --git a/Resources/public/js/collection/collections.js b/Resources/public/js/collection/collections.js index 820df1efd..5a42162e6 100644 --- a/Resources/public/js/collection/collections.js +++ b/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 - * - * - * * ``` + * 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() { } }); + + diff --git a/Resources/public/sass/custom/config/_colors.scss b/Resources/public/sass/custom/config/_colors.scss index f19899f6c..967c9b7a5 100644 --- a/Resources/public/sass/custom/config/_colors.scss +++ b/Resources/public/sass/custom/config/_colors.scss @@ -6,8 +6,8 @@ $chill-yellow: #eec84a; $chill-orange: #e2793d; $chill-red: #df4949; $chill-gray: #ececec; -$chill-beige :#cabb9f; -$chill-pink :#dd506d; +$chill-beige: #cabb9f; +$chill-pink: #dd506d; $chill-dark-gray: #333333; $chill-light-gray: #b2b2b2; $chill-llight-gray: $chill-light-gray; @@ -32,3 +32,34 @@ $yellow: $chill-yellow; $black: #111111; $white: #ffffff; $light-grey: $chill-light-gray; + +/* + due to a bug in sass, we must re-declare the variable in css + (use of a sass variable after -- does not work) +*/ +:root { + --chill-blue: #334d5c; + --chill-green: #43b29d; + --chill-green-dark: #328474; + --chill-yellow: #eec84a; + --chill-orange: #e2793d; + --chill-red: #df4949; + --chill-gray: #ececec; + --chill-beige: #cabb9f; + --chill-pink: #dd506d; + --chill-dark-gray: #333333; + --chill-light-gray: #b2b2b2; + --chill-llight-gray: #b2b2b2; + + --dark-grey: #333333; + + --orange: #e2793d; + --red: #df4949; + --green: #43b29d; + --blue: #334d5c; + --yellow: #eec84a; + + --black: #111111; + --white: #ffffff; + --light-grey: #b2b2b2; +} diff --git a/Resources/views/Form/fields.html.twig b/Resources/views/Form/fields.html.twig index 324aa41bd..441519bc7 100644 --- a/Resources/views/Form/fields.html.twig +++ b/Resources/views/Form/fields.html.twig @@ -160,17 +160,19 @@ {% endblock %} {% block chill_collection_widget %} - - - {% if form.vars.allow_add == 1 %} - +
+
    + {% for entry in form %} +
  • +
    + {{ form_widget(entry) }} +
    +
    • + {% endfor %} +
+ + {% if form.vars.allow_add == 1 %} + +
{% endif %} {% endblock %} \ No newline at end of file