lato_cms 3.1.3 → 3.1.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c71453863fa3e56037214bc1884c628a66104e331cfd1b13804f2408964d332c
-  data.tar.gz: 47f259f2406ed3913f15220c83395ffb6d8e592013980d278fa7e2649c4103aa
+  metadata.gz: 335542f7d3246d07af36c41b161ab638d26f9f923823d3bedc255a943bac2197
+  data.tar.gz: a36f8acf15e683688a5344090fc7cc023d12b57371411dcbcfaba436f4f04d1a
 SHA512:
-  metadata.gz: cea16a860d7468d42ec2df54e32ecf18c1d923860f77f66ce3fda79548e637d3e436506fc90c1b9b5ea7b3e0641b45146f288a691bc805089a84be47a4afdf86
-  data.tar.gz: 971a5d487ba77d10b7761cf20d976ec38c3ea3fb4bdfc7228a7c626888cb28345894bce7aef71dbca35f40d11f330b1da9b5334dc4334d6587aabb8ec7316051
+  metadata.gz: '04776471890c80fc97fb2ff07dd3b27eaffdc54dbe7273ed5ae7f099a7bed4083fa21c26dc96d460a245ce49741b46076c9dd720cbb7516f3edea34521742759'
+  data.tar.gz: 8730a9ead03c286df9540e72c1ea1eb13ac696c536331b5dad038efa26598bacee29ae1d998243f38536b8efadfa97af9db64c6881e1adb74d5524c13a3a62e0

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/controllers/lato_cms/media_controller.rb

@@ -12,7 +12,7 @@ module LatoCms
         sortable_columns: %i[name media_type created_at],
         searchable_columns: %i[name alt_text],
         default_sort_by: 'created_at|DESC',
-        pagination: 24
+        pagination: 20
       )
     end
 

data/app/models/lato_cms/media.rb

@@ -172,6 +172,21 @@ module LatoCms
       nil
     end
 
+    # Large uncropped variant for the admin detail view, where the 200x200
+    # square thumbnail is too small to actually judge the image. Falls back to
+    # the original blob when the file can't be processed (e.g. SVG).
+    def preview_url
+      return nil unless image? && file.attached?
+      return url unless file.variable?
+
+      Rails.application.routes.url_helpers.rails_representation_path(
+        file.variant(resize_to_limit: [1200, 1200]), only_path: true
+      )
+    rescue StandardError => e
+      Rails.logger.error("LatoCms: Failed to build preview for media #{id}: #{e.message}")
+      url
+    end
+
     # Builds a map of { size_name => variant_url } from a field's `settings.sizes`
     # config. The config is field-owned (different fields can request different
     # crops of the same reused Media); the mechanics live here since Media owns

data/app/views/lato_cms/media/_form_update.html.erb

@@ -5,9 +5,24 @@
     <%= lato_form_notices class: %w[mb-3] %>
     <%= lato_form_errors media, class: %w[mb-3] %>
 
-    <div class="mb-3 d-flex align-items-center gap-2">
-      <%= lato_cms_media_thumb(media, size: 64) %>
-      <span class="text-muted small"><%= media.filename %></span>
+    <%# Preview: images/videos get a large view (the index thumbnail is too small
+        to judge a file by), everything else keeps the small type icon. %>
+    <div class="mb-3">
+      <% if media.image? %>
+        <%= link_to media.url, target: '_blank', rel: 'noopener', title: t('lato_cms.media_open_original'),
+          class: 'd-block bg-light rounded overflow-hidden' do %>
+          <%= image_tag media.preview_url, class: 'd-block mx-auto', style: 'max-width: 100%; max-height: 420px;', alt: media.alt_text %>
+        <% end %>
+      <% elsif media.video? %>
+        <video controls preload="metadata" class="d-block w-100 rounded bg-black" style="max-height: 420px;" src="<%= media.url %>"></video>
+      <% end %>
+
+      <div class="d-flex align-items-center gap-2 mt-2">
+        <% unless media.image? || media.video? %>
+          <%= lato_cms_media_thumb(media, size: 64) %>
+        <% end %>
+        <span class="text-muted small"><%= media.filename %></span>
+      </div>
     </div>
 
     <div class="mb-3">

data/app/views/lato_cms/media/index.html.erb

@@ -16,7 +16,7 @@
           }
         }
       },
-      pagination_options: [12, 24, 48, 96]
+      pagination_options: [10, 20, 50, 100]
     %>
   </div>
 </div>

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/config/locales/en.yml

@@ -99,6 +99,7 @@ en:
     media_create_title: Upload media
     media_create_cta: Upload
     media_update_title: Edit media
+    media_open_original: Open the original file in a new tab
     media_alt_text: Alt text
     media_alt_text_regenerate: Regenerate with AI
     media_alt_text_regenerate_confirm: "This will overwrite the current alt text in every language with a new AI-generated one. Continue?"

data/config/locales/it.yml

@@ -99,6 +99,7 @@ it:
     media_create_title: Carica media
     media_create_cta: Carica
     media_update_title: Modifica media
+    media_open_original: Apri il file originale in una nuova scheda
     media_alt_text: Testo alternativo
     media_alt_text_regenerate: Rigenera con AI
     media_alt_text_regenerate_confirm: "Il testo alternativo attuale in ogni lingua verrà sostituito con uno generato dall'AI. Continuare?"

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.1.3"
+  VERSION = "3.1.5"
 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.5
 platform: ruby
 authors:
 - Gregorio Galante