From 4c35cfb24486c7e55bbebb6bd9e09c994e142e83 Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Tue, 15 Sep 2020 12:13:00 +0200
Subject: [PATCH 1/7] Multiple collections on the same page work without
 duplicated event listeners

---
 .../js/app/editor/Components/Collection.vue   | 20 +++++++++++--------
 .../_partials/fields/collection.html.twig     |  1 +
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/assets/js/app/editor/Components/Collection.vue b/assets/js/app/editor/Components/Collection.vue
index b33fb839b..3b8549d2d 100644
--- a/assets/js/app/editor/Components/Collection.vue
+++ b/assets/js/app/editor/Components/Collection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="collectionContainer" class="collection-container">
+  <div :id="name" ref="collectionContainer" class="collection-container">
     <div class="expand-buttons">
       <label>{{ labels.field_label }}:</label>
 
@@ -75,6 +75,10 @@ var uniqid = require('locutus/php/misc/uniqid');
 export default {
   name: 'EditorCollection',
   props: {
+    name: {
+      type: String,
+      required: true,
+    },
     templates: {
       type: Array,
       required: true,
@@ -104,13 +108,13 @@ export default {
       templateSelectName: 'templateSelect' + this.id,
       templateSelectOptions: templateSelectOptions,
       selector: {
-        collectionContainer: '.collection-container',
-        item: '.collection-item',
-        remove: '.action-remove-collection-item',
-        moveUp: '.action-move-up-collection-item',
-        moveDown: '.action-move-down-collection-item',
-        expandAll: '.collection-expand-all',
-        collapseAll: '.collection-collapse-all',
+        collectionContainer: '#' + this.name,
+        item: '#' + this.name + ' .collection-item',
+        remove: '#' + this.name + ' .action-remove-collection-item',
+        moveUp: '#' + this.name + ' .action-move-up-collection-item',
+        moveDown: '#' + this.name + ' .action-move-down-collection-item',
+        expandAll: '#' + this.name + ' .collection-expand-all',
+        collapseAll: '#' + this.name + ' .collection-collapse-all',
         editor: '#editor',
       },
     };
diff --git a/templates/_partials/fields/collection.html.twig b/templates/_partials/fields/collection.html.twig
index 416385ff0..4c0d76991 100644
--- a/templates/_partials/fields/collection.html.twig
+++ b/templates/_partials/fields/collection.html.twig
@@ -25,6 +25,7 @@
       :templates='{{ templated_fields }}'
       :labels='{{ labels | json_encode }}'
       :limit='{{ limit | json_encode }}'
+      :name="{{  field.name | json_encode }}"
       :state="{{ field.definition.get('default_state')|default('collapsed')|json_encode }}"
     ></editor-collection>
 

From 0ab76c3edbe6777bd1b94006e4f1f29d0db57fc0 Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Tue, 15 Sep 2020 15:29:57 +0200
Subject: [PATCH 2/7] fix selectors

---
 .../js/app/editor/Components/Collection.vue   | 149 +++++++++++-------
 1 file changed, 95 insertions(+), 54 deletions(-)

diff --git a/assets/js/app/editor/Components/Collection.vue b/assets/js/app/editor/Components/Collection.vue
index 3b8549d2d..704492e60 100644
--- a/assets/js/app/editor/Components/Collection.vue
+++ b/assets/js/app/editor/Components/Collection.vue
@@ -109,13 +109,13 @@ export default {
       templateSelectOptions: templateSelectOptions,
       selector: {
         collectionContainer: '#' + this.name,
-        item: '#' + this.name + ' .collection-item',
-        remove: '#' + this.name + ' .action-remove-collection-item',
-        moveUp: '#' + this.name + ' .action-move-up-collection-item',
-        moveDown: '#' + this.name + ' .action-move-down-collection-item',
-        expandAll: '#' + this.name + ' .collection-expand-all',
-        collapseAll: '#' + this.name + ' .collection-collapse-all',
-        editor: '#editor',
+        item: ' .collection-item',
+        remove: ' .action-remove-collection-item',
+        moveUp: ' .action-move-up-collection-item',
+        moveDown: ' .action-move-down-collection-item',
+        expandAll: ' .collection-expand-all',
+        collapseAll: ' .collection-collapse-all',
+        editor: ' #editor',
       },
     };
   },
@@ -136,69 +136,110 @@ export default {
      * This is a jQuery event listener, because Vue cannot handle an event emitted by a non-vue element.
      * The collection items are not Vue elements in order to initialise them correctly within their twig template.
      */
-    window.$(document).on('click', vueThis.selector.remove, function(e) {
-      e.preventDefault();
-      let collectionContainer = window
-        .$(this)
-        .closest(vueThis.selector.collectionContainer);
-      vueThis.getCollectionItemFromPressedButton(this).remove();
-      vueThis.setAllButtonsStates(collectionContainer);
-      vueThis.counter--;
-    });
-
-    window.$(document).on('click', vueThis.selector.moveUp, function(e) {
-      e.preventDefault();
-      let thisCollectionItem = vueThis.getCollectionItemFromPressedButton(this);
-      let prevCollectionitem = vueThis.getPreviousCollectionItem(
-        thisCollectionItem,
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.remove,
+        function(e) {
+          e.preventDefault();
+          let collectionContainer = window
+            .$(this)
+            .closest(vueThis.selector.collectionContainer);
+          vueThis.getCollectionItemFromPressedButton(this).remove();
+          vueThis.setAllButtonsStates(collectionContainer);
+          vueThis.counter--;
+        },
       );
-      window.$(thisCollectionItem).after(prevCollectionitem);
 
-      vueThis.setButtonsState(thisCollectionItem);
-      vueThis.setButtonsState(prevCollectionitem);
-    });
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.moveUp,
+        function(e) {
+          e.preventDefault();
+          let thisCollectionItem = vueThis.getCollectionItemFromPressedButton(
+            this,
+          );
+          let prevCollectionitem = vueThis.getPreviousCollectionItem(
+            thisCollectionItem,
+          );
+          window.$(thisCollectionItem).after(prevCollectionitem);
 
-    window.$(document).on('click', vueThis.selector.moveDown, function(e) {
-      e.preventDefault();
-      let thisCollectionItem = vueThis.getCollectionItemFromPressedButton(this);
-      let nextCollectionItem = vueThis.getNextCollectionItem(
-        thisCollectionItem,
+          vueThis.setButtonsState(thisCollectionItem);
+          vueThis.setButtonsState(prevCollectionitem);
+        },
       );
-      window.$(thisCollectionItem).before(nextCollectionItem);
 
-      vueThis.setButtonsState(thisCollectionItem);
-      vueThis.setButtonsState(nextCollectionItem);
-    });
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.moveDown,
+        function(e) {
+          e.preventDefault();
+          let thisCollectionItem = vueThis.getCollectionItemFromPressedButton(
+            this,
+          );
+          let nextCollectionItem = vueThis.getNextCollectionItem(
+            thisCollectionItem,
+          );
+          window.$(thisCollectionItem).before(nextCollectionItem);
 
-    window.$(document).on('click', vueThis.selector.expandAll, function(e) {
-      e.preventDefault();
-      const collection = $(e.target).closest(
-        vueThis.selector.collectionContainer,
+          vueThis.setButtonsState(thisCollectionItem);
+          vueThis.setButtonsState(nextCollectionItem);
+        },
       );
-      collection.find('details').attr('open', '');
-    });
 
-    window.$(document).on('click', vueThis.selector.collapseAll, function(e) {
-      e.preventDefault();
-      const collection = $(e.target).closest(
-        vueThis.selector.collectionContainer,
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.expandAll,
+        function(e) {
+          e.preventDefault();
+          const collection = $(e.target).closest(
+            vueThis.selector.collectionContainer,
+          );
+          collection.find('details').attr('open', '');
+        },
+      );
+
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.collapseAll,
+        function(e) {
+          e.preventDefault();
+          const collection = $(e.target).closest(
+            vueThis.selector.collectionContainer,
+          );
+          collection.find('details').removeAttr('open');
+        },
       );
-      collection.find('details').removeAttr('open');
-    });
 
     /**
      * Update the title dynamically.
      */
     $(document).ready(function() {
-      $.each(window.$(vueThis.selector.item), function() {
-        updateTitle(this);
-      });
+      $.each(
+        window.$(vueThis.selector.collectionContainer + vueThis.selector.item),
+        function() {
+          updateTitle(this);
+        },
+      );
 
       window
-        .$(vueThis.selector.editor)
-        .on('keyup change', vueThis.selector.item, function() {
-          updateTitle(this);
-        });
+        .$(vueThis.selector.collectionContainer + vueThis.selector.editor)
+        .on(
+          'keyup change',
+          vueThis.selector.collectionContainer + vueThis.selector.item,
+          function() {
+            updateTitle(this);
+          },
+        );
     });
 
     /**

From 4bb82fc9ef071350904bfe1a98c0f53a2fea16aa Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Wed, 16 Sep 2020 10:08:56 +0200
Subject: [PATCH 3/7] Fix updating live title

---
 assets/js/app/editor/Components/Collection.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/app/editor/Components/Collection.vue b/assets/js/app/editor/Components/Collection.vue
index 704492e60..230026054 100644
--- a/assets/js/app/editor/Components/Collection.vue
+++ b/assets/js/app/editor/Components/Collection.vue
@@ -232,10 +232,10 @@ export default {
       );
 
       window
-        .$(vueThis.selector.collectionContainer + vueThis.selector.editor)
+        .$(vueThis.selector.collectionContainer)
         .on(
           'keyup change',
-          vueThis.selector.collectionContainer + vueThis.selector.item,
+          vueThis.selector.item,
           function() {
             updateTitle(this);
           },

From 806bcb3836c2ec3d88f700595424af3306a5d699 Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Tue, 15 Sep 2020 12:13:00 +0200
Subject: [PATCH 4/7] Multiple collections on the same page work without
 duplicated event listeners

---
 .../js/app/editor/Components/Collection.vue   | 20 +++++++++++--------
 .../_partials/fields/collection.html.twig     |  1 +
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/assets/js/app/editor/Components/Collection.vue b/assets/js/app/editor/Components/Collection.vue
index 653c3d07a..f0e7340da 100644
--- a/assets/js/app/editor/Components/Collection.vue
+++ b/assets/js/app/editor/Components/Collection.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="collectionContainer" class="collection-container">
+  <div :id="name" ref="collectionContainer" class="collection-container">
     <div class="expand-buttons">
       <label>{{ labels.field_label }}:</label>
 
@@ -83,6 +83,10 @@ var uniqid = require('locutus/php/misc/uniqid');
 export default {
   name: 'EditorCollection',
   props: {
+    name: {
+      type: String,
+      required: true,
+    },
     templates: {
       type: Array,
       required: true,
@@ -112,13 +116,13 @@ export default {
       templateSelectName: 'templateSelect' + this.id,
       templateSelectOptions: templateSelectOptions,
       selector: {
-        collectionContainer: '.collection-container',
-        item: '.collection-item',
-        remove: '.action-remove-collection-item',
-        moveUp: '.action-move-up-collection-item',
-        moveDown: '.action-move-down-collection-item',
-        expandAll: '.collection-expand-all',
-        collapseAll: '.collection-collapse-all',
+        collectionContainer: '#' + this.name,
+        item: '#' + this.name + ' .collection-item',
+        remove: '#' + this.name + ' .action-remove-collection-item',
+        moveUp: '#' + this.name + ' .action-move-up-collection-item',
+        moveDown: '#' + this.name + ' .action-move-down-collection-item',
+        expandAll: '#' + this.name + ' .collection-expand-all',
+        collapseAll: '#' + this.name + ' .collection-collapse-all',
         editor: '#editor',
       },
     };
diff --git a/templates/_partials/fields/collection.html.twig b/templates/_partials/fields/collection.html.twig
index 8a8e9bcfc..86d9ea8da 100644
--- a/templates/_partials/fields/collection.html.twig
+++ b/templates/_partials/fields/collection.html.twig
@@ -24,6 +24,7 @@
       :templates='{{ templated_fields }}'
       :labels='{{ labels | json_encode }}'
       :limit='{{ limit | json_encode }}'
+      :name="{{  field.name | json_encode }}"
       :state="{{ field.definition.get('default_state')|default('collapsed')|json_encode }}"
     ></editor-collection>
 

From ad1acaa4b357a6ff7be4222334dca0282c58ba54 Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Tue, 15 Sep 2020 15:29:57 +0200
Subject: [PATCH 5/7] fix selectors

---
 .../js/app/editor/Components/Collection.vue   | 149 +++++++++++-------
 1 file changed, 95 insertions(+), 54 deletions(-)

diff --git a/assets/js/app/editor/Components/Collection.vue b/assets/js/app/editor/Components/Collection.vue
index f0e7340da..4dc16685b 100644
--- a/assets/js/app/editor/Components/Collection.vue
+++ b/assets/js/app/editor/Components/Collection.vue
@@ -117,13 +117,13 @@ export default {
       templateSelectOptions: templateSelectOptions,
       selector: {
         collectionContainer: '#' + this.name,
-        item: '#' + this.name + ' .collection-item',
-        remove: '#' + this.name + ' .action-remove-collection-item',
-        moveUp: '#' + this.name + ' .action-move-up-collection-item',
-        moveDown: '#' + this.name + ' .action-move-down-collection-item',
-        expandAll: '#' + this.name + ' .collection-expand-all',
-        collapseAll: '#' + this.name + ' .collection-collapse-all',
-        editor: '#editor',
+        item: ' .collection-item',
+        remove: ' .action-remove-collection-item',
+        moveUp: ' .action-move-up-collection-item',
+        moveDown: ' .action-move-down-collection-item',
+        expandAll: ' .collection-expand-all',
+        collapseAll: ' .collection-collapse-all',
+        editor: ' #editor',
       },
     };
   },
@@ -144,69 +144,110 @@ export default {
      * This is a jQuery event listener, because Vue cannot handle an event emitted by a non-vue element.
      * The collection items are not Vue elements in order to initialise them correctly within their twig template.
      */
-    window.$(document).on('click', vueThis.selector.remove, function(e) {
-      e.preventDefault();
-      let collectionContainer = window
-        .$(this)
-        .closest(vueThis.selector.collectionContainer);
-      vueThis.getCollectionItemFromPressedButton(this).remove();
-      vueThis.setAllButtonsStates(collectionContainer);
-      vueThis.counter--;
-    });
-
-    window.$(document).on('click', vueThis.selector.moveUp, function(e) {
-      e.preventDefault();
-      let thisCollectionItem = vueThis.getCollectionItemFromPressedButton(this);
-      let prevCollectionitem = vueThis.getPreviousCollectionItem(
-        thisCollectionItem,
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.remove,
+        function(e) {
+          e.preventDefault();
+          let collectionContainer = window
+            .$(this)
+            .closest(vueThis.selector.collectionContainer);
+          vueThis.getCollectionItemFromPressedButton(this).remove();
+          vueThis.setAllButtonsStates(collectionContainer);
+          vueThis.counter--;
+        },
       );
-      window.$(thisCollectionItem).after(prevCollectionitem);
 
-      vueThis.setButtonsState(thisCollectionItem);
-      vueThis.setButtonsState(prevCollectionitem);
-    });
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.moveUp,
+        function(e) {
+          e.preventDefault();
+          let thisCollectionItem = vueThis.getCollectionItemFromPressedButton(
+            this,
+          );
+          let prevCollectionitem = vueThis.getPreviousCollectionItem(
+            thisCollectionItem,
+          );
+          window.$(thisCollectionItem).after(prevCollectionitem);
 
-    window.$(document).on('click', vueThis.selector.moveDown, function(e) {
-      e.preventDefault();
-      let thisCollectionItem = vueThis.getCollectionItemFromPressedButton(this);
-      let nextCollectionItem = vueThis.getNextCollectionItem(
-        thisCollectionItem,
+          vueThis.setButtonsState(thisCollectionItem);
+          vueThis.setButtonsState(prevCollectionitem);
+        },
       );
-      window.$(thisCollectionItem).before(nextCollectionItem);
 
-      vueThis.setButtonsState(thisCollectionItem);
-      vueThis.setButtonsState(nextCollectionItem);
-    });
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.moveDown,
+        function(e) {
+          e.preventDefault();
+          let thisCollectionItem = vueThis.getCollectionItemFromPressedButton(
+            this,
+          );
+          let nextCollectionItem = vueThis.getNextCollectionItem(
+            thisCollectionItem,
+          );
+          window.$(thisCollectionItem).before(nextCollectionItem);
 
-    window.$(document).on('click', vueThis.selector.expandAll, function(e) {
-      e.preventDefault();
-      const collection = $(e.target).closest(
-        vueThis.selector.collectionContainer,
+          vueThis.setButtonsState(thisCollectionItem);
+          vueThis.setButtonsState(nextCollectionItem);
+        },
       );
-      collection.find('details').attr('open', '');
-    });
 
-    window.$(document).on('click', vueThis.selector.collapseAll, function(e) {
-      e.preventDefault();
-      const collection = $(e.target).closest(
-        vueThis.selector.collectionContainer,
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.expandAll,
+        function(e) {
+          e.preventDefault();
+          const collection = $(e.target).closest(
+            vueThis.selector.collectionContainer,
+          );
+          collection.find('details').attr('open', '');
+        },
+      );
+
+    window
+      .$(document)
+      .on(
+        'click',
+        vueThis.selector.collectionContainer + vueThis.selector.collapseAll,
+        function(e) {
+          e.preventDefault();
+          const collection = $(e.target).closest(
+            vueThis.selector.collectionContainer,
+          );
+          collection.find('details').removeAttr('open');
+        },
       );
-      collection.find('details').removeAttr('open');
-    });
 
     /**
      * Update the title dynamically.
      */
     $(document).ready(function() {
-      $.each(window.$(vueThis.selector.item), function() {
-        updateTitle(this);
-      });
+      $.each(
+        window.$(vueThis.selector.collectionContainer + vueThis.selector.item),
+        function() {
+          updateTitle(this);
+        },
+      );
 
       window
-        .$(vueThis.selector.editor)
-        .on('keyup change', vueThis.selector.item, function() {
-          updateTitle(this);
-        });
+        .$(vueThis.selector.collectionContainer + vueThis.selector.editor)
+        .on(
+          'keyup change',
+          vueThis.selector.collectionContainer + vueThis.selector.item,
+          function() {
+            updateTitle(this);
+          },
+        );
     });
 
     /**

From cf2369890a2d5379d104a8788aff163aff092527 Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Wed, 16 Sep 2020 10:08:56 +0200
Subject: [PATCH 6/7] Fix updating live title

---
 assets/js/app/editor/Components/Collection.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/js/app/editor/Components/Collection.vue b/assets/js/app/editor/Components/Collection.vue
index 4dc16685b..d2f7bb1dc 100644
--- a/assets/js/app/editor/Components/Collection.vue
+++ b/assets/js/app/editor/Components/Collection.vue
@@ -240,10 +240,10 @@ export default {
       );
 
       window
-        .$(vueThis.selector.collectionContainer + vueThis.selector.editor)
+        .$(vueThis.selector.collectionContainer)
         .on(
           'keyup change',
-          vueThis.selector.collectionContainer + vueThis.selector.item,
+          vueThis.selector.item,
           function() {
             updateTitle(this);
           },

From 3cc089a99a20288a653f8c07fa864482deb1f74a Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Wed, 16 Sep 2020 14:30:45 +0200
Subject: [PATCH 7/7] csfix

---
 assets/js/app/editor/Components/Collection.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/assets/js/app/editor/Components/Collection.vue b/assets/js/app/editor/Components/Collection.vue
index d2f7bb1dc..4c414d075 100644
--- a/assets/js/app/editor/Components/Collection.vue
+++ b/assets/js/app/editor/Components/Collection.vue
@@ -241,13 +241,9 @@ export default {
 
       window
         .$(vueThis.selector.collectionContainer)
-        .on(
-          'keyup change',
-          vueThis.selector.item,
-          function() {
-            updateTitle(this);
-          },
-        );
+        .on('keyup change', vueThis.selector.item, function() {
+          updateTitle(this);
+        });
     });
 
     /**