lato_cms 3.1.3 → 3.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c71453863fa3e56037214bc1884c628a66104e331cfd1b13804f2408964d332c
-  data.tar.gz: 47f259f2406ed3913f15220c83395ffb6d8e592013980d278fa7e2649c4103aa
+  metadata.gz: 178517109975256e769273564f9570b355cd42c9a134e52aa3c0ea844753edbd
+  data.tar.gz: 19602e064f08dbf3516d4ebdb31c6156e024ba28d335c2162ee42e0e0c09f1c2
 SHA512:
-  metadata.gz: cea16a860d7468d42ec2df54e32ecf18c1d923860f77f66ce3fda79548e637d3e436506fc90c1b9b5ea7b3e0641b45146f288a691bc805089a84be47a4afdf86
-  data.tar.gz: 971a5d487ba77d10b7761cf20d976ec38c3ea3fb4bdfc7228a7c626888cb28345894bce7aef71dbca35f40d11f330b1da9b5334dc4334d6587aabb8ec7316051
+  metadata.gz: fe7c5eb7ae908ba2679d1ee51d7210cf8855fdd8b87b71fbf94cecc3b0e0025e26b3023a1721ed6c39a35fa82ad7c13ae806f77d45e21bcabbcf3948a8e168f4
+  data.tar.gz: d8c78e9f4c0c3d441e7d2bc5b4b3daddd8e8c8504827d4835ab44a9862c707e3dfc5ec3a30c9d38d0fd149bb87b260d101787a2e84bd1bd2336a66ab66a6dc80

data/app/assets/javascripts/lato_cms/controllers/lato_cms_component_accordion_controller.js

@@ -2,45 +2,46 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   connect () {
-    this.handleShown = this.handleShown.bind(this)
-    this.handleHidden = this.handleHidden.bind(this)
+    this.handleToggle = this.handleToggle.bind(this)
 
-    this.element.addEventListener('shown.bs.collapse', this.handleShown)
-    this.element.addEventListener('hidden.bs.collapse', this.handleHidden)
+    this.element.addEventListener('shown.bs.collapse', this.handleToggle)
+    this.element.addEventListener('hidden.bs.collapse', this.handleToggle)
 
     window.requestAnimationFrame(() => {
-      this.broadcastInitiallyOpenComponent()
+      this.broadcastCurrentSelection()
     })
   }
 
   disconnect () {
-    this.element.removeEventListener('shown.bs.collapse', this.handleShown)
-    this.element.removeEventListener('hidden.bs.collapse', this.handleHidden)
+    this.element.removeEventListener('shown.bs.collapse', this.handleToggle)
+    this.element.removeEventListener('hidden.bs.collapse', this.handleToggle)
   }
 
-  handleShown (event) {
-    this.broadcastForCollapse(event.target)
-  }
-
-  // Repeater items are nested collapses without a template component id, and
-  // their events bubble up here: closing one would otherwise deselect the
-  // component that is still open. Same guard `broadcastForCollapse` applies.
-  handleHidden (event) {
-    if (!event.target.dataset.templateComponentId) return
-
-    this.broadcastClosedComponent()
+  // Repeater items are nested collapses, so their events bubble up here, and
+  // opening one item closes its sibling: the events alone don't tell what ends
+  // up open. Read the selection off the DOM once it has settled instead.
+  handleToggle () {
+    window.requestAnimationFrame(() => {
+      this.broadcastCurrentSelection()
+    })
   }
 
-  broadcastInitiallyOpenComponent () {
-    const openCollapse = this.element.querySelector('.accordion-collapse.show')
-    if (!openCollapse) return
+  // The open component, narrowed to the open repeater item when there is one.
+  broadcastCurrentSelection () {
+    const openComponent = this.element.querySelector('.accordion-collapse.show')
+    if (!openComponent) {
+      this.broadcastClosedComponent()
+      return
+    }
 
-    this.broadcastForCollapse(openCollapse)
+    const openItem = openComponent.querySelector('.collapse.show[data-repeater-item-id]')
+    this.broadcastForCollapse(openItem || openComponent)
   }
 
   broadcastForCollapse (collapseElement) {
     const templateComponentId = collapseElement.dataset.templateComponentId
     const componentId = collapseElement.dataset.componentId
+    const repeaterItemId = collapseElement.dataset.repeaterItemId
 
     if (!templateComponentId) return
 
@@ -48,7 +49,8 @@ export default class extends Controller {
       detail: {
         id: templateComponentId,
         templateComponentId,
-        componentId
+        componentId,
+        repeaterItemId: repeaterItemId || null
       }
     }))
   }
@@ -58,7 +60,8 @@ export default class extends Controller {
       detail: {
         id: null,
         templateComponentId: null,
-        componentId: null
+        componentId: null,
+        repeaterItemId: null
       }
     }))
   }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_component_form_controller.js

@@ -66,11 +66,14 @@ export default class extends Controller {
     const templateComponentId = openCollapse.dataset.templateComponentId
     if (!templateComponentId) return
 
+    const openItem = openCollapse.querySelector('.collapse.show[data-repeater-item-id]')
+
     document.dispatchEvent(new CustomEvent('lato-cms:component-change', {
       detail: {
         id: templateComponentId,
         templateComponentId,
-        componentId: openCollapse.dataset.componentId
+        componentId: openCollapse.dataset.componentId,
+        repeaterItemId: openItem?.dataset.repeaterItemId || null
       }
     }))
   }

data/app/assets/javascripts/lato_cms/controllers/lato_cms_page_preview_controller.js

@@ -116,10 +116,13 @@ export default class extends Controller {
     const templateComponentId = openCollapse.dataset.templateComponentId
     if (!templateComponentId) return
 
+    const openItem = openCollapse.querySelector('.collapse.show[data-repeater-item-id]')
+
     this.activeComponent = {
       id: templateComponentId,
       templateComponentId,
-      componentId: openCollapse.dataset.componentId
+      componentId: openCollapse.dataset.componentId,
+      repeaterItemId: openItem?.dataset.repeaterItemId || null
     }
 
     this.postActiveComponent()

data/app/views/lato_cms/pages/_repeater_item.html.erb

@@ -14,7 +14,11 @@
     </button>
   </div>
 
-  <div id="<%= collapse_id %>" class="collapse <%= 'show' if expanded %>" data-bs-parent="#<%= parent_id %>">
+  <%# The component ids travel on the item collapse too, so the live preview can
+      highlight the single item being edited (see lato_cms_component_accordion_controller). %>
+  <div id="<%= collapse_id %>" class="collapse <%= 'show' if expanded %>" data-bs-parent="#<%= parent_id %>"
+      data-template-component-id="<%= tc[:template_component_id] %>" data-component-id="<%= tc[:component_id] %>"
+      data-repeater-item-id="<%= item_id %>">
     <div class="card-body pb-2">
       <% tc[:fields].each do |field_id, field_config| %>
         <% page_field = item_fields[field_id.to_s] %>

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.1.3"
+  VERSION = "3.1.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.1.3
+  version: 3.1.4
 platform: ruby
 authors:
 - Gregorio Galante