lato_cms 3.2.4 → 3.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f4512bf98553bdc298352f97641aeef70356dcc448862a84816ed64ec4df3d3b
-  data.tar.gz: 7d7e190cf8997e7c9d6fcd94f7dc1570d9d939312b71a5caaa6cc2eadba697a3
+  metadata.gz: cdc7dae92de55a7a6e1e1290ee957bbf0b63fdf16404524c3f1803bd68123d0e
+  data.tar.gz: 1bc853f4846e25c41db7bddc0d53ac55f05699a06cf97a221abf6b7573458a7e
 SHA512:
-  metadata.gz: e4bbfabdce312042bba9014b34a8ff1423a1dccd84e0798700f334d2836f7cda389a8ce15c04faca2188229271e30e74b1b6044222e1a0735960e875c5c68206
-  data.tar.gz: 0f8191d661b29ce420e8ab5657511fe5c3d0af82ce0c60bd6ee11d695b86c2c27735c5d6b4ad806b9df149b46f1423e63512996e0eb99655c51da31fdac8a39f
+  metadata.gz: 0117c7af5986170ce154bee821263a5ac8da6759d71a8fd682624e59b84d31a4f368d15d8c12d05549cd38d08baee38aa5a09550cad85a2bfaf9e30071baa50a
+  data.tar.gz: f18ef5c8dcaf4c2a3e2cd66e031bd2853eca12e69fc9aab6afcbe93989a90de362948317a526a45c08fe0ba38a647220505f95282e7e2b1910bc32c864386ca0

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

@@ -123,8 +123,12 @@ export default class extends Controller {
   }
 
   previewMarkup (item) {
+    // Mirrors the server-rendered tile: with a poster nothing but that image is
+    // fetched until the admin hits play (a freshly uploaded video has none yet,
+    // its poster job runs in the background).
     if (this.kindValue === 'video') {
-      return `<video controls preload="metadata" class="lato-cms-media-field__player" src="${item.url}"></video>`
+      const poster = item.posterUrl || ''
+      return `<video controls preload="${poster ? 'none' : 'metadata'}" poster="${poster}" class="lato-cms-media-field__player" src="${item.url}"></video>`
     }
     if (item.thumbnailUrl || item.url) {
       return `<img src="${item.thumbnailUrl || item.url}" class="lato-cms-media-field__thumb">`

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

@@ -6,8 +6,16 @@ export default class extends Controller {
   connect () {
     this.handleComponentChange = this.handleComponentChange.bind(this)
     this.handleIframeLoad = this.handleIframeLoad.bind(this)
+    this.handleMorph = this.handleMorph.bind(this)
 
     document.addEventListener('lato-cms:component-change', this.handleComponentChange)
+    // Actions that re-render the editor server-side (cloning a component from
+    // another locale, editing the page settings) redirect back to this same
+    // URL, which Turbo treats as a page refresh and applies by morphing. Morph
+    // leaves an unchanged <iframe> exactly as it is — the element is never
+    // recreated, so the preview kept showing pre-clone content until a manual
+    // reload. The refresh is asked for explicitly here.
+    document.addEventListener('turbo:morph', this.handleMorph)
 
     if (this.hasIframeTarget) {
       this.iframeTarget.addEventListener('load', this.handleIframeLoad)
@@ -26,6 +34,7 @@ export default class extends Controller {
 
   disconnect () {
     document.removeEventListener('lato-cms:component-change', this.handleComponentChange)
+    document.removeEventListener('turbo:morph', this.handleMorph)
 
     if (this.hasIframeTarget) {
       this.iframeTarget.removeEventListener('load', this.handleIframeLoad)
@@ -109,6 +118,10 @@ export default class extends Controller {
     this.postActiveComponent()
   }
 
+  handleMorph () {
+    this.refresh()
+  }
+
   syncInitiallyOpenComponent () {
     const openCollapse = document.querySelector('#components-accordion .accordion-collapse.show')
     if (!openCollapse) return

data/app/controllers/lato_cms/media_controller.rb

@@ -10,6 +10,7 @@ module LatoCms
       # "Unused" = no page field references it at all: the only media that can
       # be deleted, so it's worth being able to list just those.
       media = media.where.missing(:page_field_media) if params[:usage] == 'unused'
+      media = media.missing_translation(params[:missing]) if LatoCms::Media::TRANSLATABLE_ATTRIBUTES.include?(params[:missing])
 
       @media = lato_index_collection(
         media.order(created_at: :desc),

data/app/controllers/lato_cms/pages_controller.rb

@@ -114,7 +114,12 @@ module LatoCms
       respond_to do |format|
         if errors.empty?
           format.html { redirect_to lato_cms.pages_show_path(@page), notice: t('lato_cms.fields_saved') }
-          format.json { render json: { message: t('lato_cms.fields_saved'), fields: @page.fields.reload.map(&:as_json) } }
+          # Only the saved component's fields: the editor repaints its media
+          # fields from this list, matching them by persisted field id, which is
+          # unique within a component but not across the page (two components
+          # can both have an "image" field). Handing it the whole page let a
+          # field adopt another component's media, and the next save stored it.
+          format.json { render json: { message: t('lato_cms.fields_saved'), fields: @page.fields.reload.select { |field| field.template_component_id == template_component_id.to_s }.map(&:as_json) } }
         else
           error_messages = errors.map { |e| "#{e[:field_id]}: #{e[:errors].join(', ')}" }.join('; ')
           format.html { redirect_to lato_cms.pages_show_path(@page), alert: error_messages }

data/app/models/lato_cms/media.rb

@@ -45,6 +45,26 @@ module LatoCms
 
     scope :of_type, ->(type) { where(media_type: type) if type.present? }
 
+    # Media missing `attribute` (alt_text or title) in at least one configured
+    # locale — the ones worth going back to fill in. Alt text exists only for
+    # images, so that filter is scoped to them; a title is editable on every
+    # media type.
+    #
+    # Filtered in Ruby rather than SQL: the translations live as a JSON blob in
+    # a text column, and "blank in one locale" is not a predicate any adapter
+    # can express without guessing at that serialization (a stored empty string
+    # counts as missing too). Only the id and the one column are loaded.
+    scope :missing_translation, ->(attribute) {
+      attribute = attribute.to_s
+      next none unless TRANSLATABLE_ATTRIBUTES.include?(attribute)
+
+      candidates = attribute == "alt_text" ? where(media_type: "image") : all
+      locales = LatoCms.config.locales
+      incomplete = candidates.select(:id, attribute).reject { |media| locales.all? { |locale| media.public_send(attribute, locale).present? } }
+
+      candidates.where(id: incomplete.map(&:id))
+    }
+
     # Hook picked up by lato's `lato_index_collection` in place of its generic
     # search, whose SQL leaves column names unqualified. The Spaces association
     # joins lato_spaces_groups, which also has a `name` column, so that generic

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

@@ -7,7 +7,9 @@
       <%= 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>
+    <%# Poster first, video bytes only on play (see the media field tile). %>
+    <video controls preload="<%= media.poster_url ? 'none' : 'metadata' %>" poster="<%= media.poster_url %>"
+      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">

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

@@ -1,12 +1,21 @@
 <%= lato_page_head t('lato_cms.media_index_title'), [{ label: t('lato_cms.media_index_title') }] %>
 
 <div class="card">
-  <div class="card-header d-flex gap-2">
-    <%= link_to lato_cms.media_path, class: "btn btn-sm #{params[:usage].blank? ? 'btn-primary' : 'btn-outline-secondary'}" do %>
-      <i class="bi bi-images me-1"></i><%= t('lato_cms.media_filter_all') %>
-    <% end %>
-    <%= link_to lato_cms.media_path(usage: 'unused'), class: "btn btn-sm #{params[:usage] == 'unused' ? 'btn-primary' : 'btn-outline-secondary'}" do %>
-      <i class="bi bi-unlink me-1"></i><%= t('lato_cms.media_filter_unused') %>
+  <%# Mutually exclusive shortcuts to the media worth acting on: the ones that
+      can be deleted, and the ones still missing a translation. %>
+  <% filters = [
+       { label: t('lato_cms.media_filter_all'), icon: 'bi-images', params: {} },
+       { label: t('lato_cms.media_filter_unused'), icon: 'bi-unlink', params: { usage: 'unused' } }
+     ] + LatoCms::Media::TRANSLATABLE_ATTRIBUTES.map do |attribute|
+       { label: t("lato_cms.media_filter_missing_#{attribute}"), icon: 'bi-translate', params: { missing: attribute } }
+     end %>
+  <% current = { usage: params[:usage].presence, missing: params[:missing].presence }.compact %>
+
+  <div class="card-header d-flex flex-wrap gap-2">
+    <% filters.each do |filter| %>
+      <%= link_to lato_cms.media_path(filter[:params]), class: "btn btn-sm #{filter[:params] == current ? 'btn-primary' : 'btn-outline-secondary'}" do %>
+        <i class="bi <%= filter[:icon] %> me-1"></i><%= filter[:label] %>
+      <% end %>
     <% end %>
   </div>
   <div class="card-body">

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

@@ -11,34 +11,39 @@
   <%# Two columns from lg up (preview left, data right), stacked below: the
       preview is the thing you look at first, the metadata the thing you read
       next to it. %>
-  <div class="card-body row g-4">
-    <div class="col-lg-5">
-      <%= render 'lato_cms/media/preview', media: @media %>
-    </div>
+  <div class="card-body">
+    <%# The row stays inside the card body: `row` carries a negative top margin
+        for its gutters, which on the body itself ate the card's own padding
+        and pushed the preview against the header. %>
+    <div class="row g-4">
+      <div class="col-lg-5">
+        <%= render 'lato_cms/media/preview', media: @media %>
+      </div>
 
-    <dl class="col-lg-7 row mb-0">
-      <dt class="col-sm-3"><%= LatoCms::Media.human_attribute_name(:name) %></dt>
-      <dd class="col-sm-9"><%= @media.name %></dd>
+      <dl class="col-lg-7 row mb-0">
+        <dt class="col-sm-3"><%= LatoCms::Media.human_attribute_name(:name) %></dt>
+        <dd class="col-sm-9"><%= @media.name %></dd>
 
-      <dt class="col-sm-3"><%= t('lato_cms.media_type_label') %></dt>
-      <dd class="col-sm-9"><%= lato_cms_media_media_type(@media) %></dd>
+        <dt class="col-sm-3"><%= t('lato_cms.media_type_label') %></dt>
+        <dd class="col-sm-9"><%= lato_cms_media_media_type(@media) %></dd>
 
-      <%# Alt text is image-only, mirroring the edit form. Both are translatable:
+        <%# Alt text is image-only, mirroring the edit form. Both are translatable:
           one row per configured locale, blanks included, so a missing
           translation is visible instead of just absent. %>
-      <% attributes = @media.image? ? LatoCms::Media::TRANSLATABLE_ATTRIBUTES : %w[title] %>
-      <% attributes.each do |attribute| %>
-        <dt class="col-sm-3"><%= t("lato_cms.media_#{attribute}") %></dt>
-        <dd class="col-sm-9">
-          <% LatoCms.config.locales.each do |locale| %>
-            <div class="d-flex gap-2">
-              <span class="badge bg-secondary align-self-start"><%= locale.to_s.upcase %></span>
-              <span><%= @media.public_send(attribute, locale).presence || content_tag(:span, '—', class: 'text-muted') %></span>
-            </div>
-          <% end %>
-        </dd>
-      <% end %>
-    </dl>
+        <% attributes = @media.image? ? LatoCms::Media::TRANSLATABLE_ATTRIBUTES : %w[title] %>
+        <% attributes.each do |attribute| %>
+          <dt class="col-sm-3"><%= t("lato_cms.media_#{attribute}") %></dt>
+          <dd class="col-sm-9">
+            <% LatoCms.config.locales.each do |locale| %>
+              <div class="d-flex gap-2">
+                <span class="badge bg-secondary align-self-start"><%= locale.to_s.upcase %></span>
+                <span><%= @media.public_send(attribute, locale).presence || content_tag(:span, '—', class: 'text-muted') %></span>
+              </div>
+            <% end %>
+          </dd>
+        <% end %>
+      </dl>
+    </div>
   </div>
 </div>
 

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

@@ -104,10 +104,20 @@
                 <% page_field = component_fields.find { |f| f.field_id == field_id } %>
 
                 <div class="mb-3">
+                  <%# The dom id prefix carries the template component: every
+                      component of the page is rendered at once, and two of them
+                      can expose the same field id (a template mounting one
+                      component twice, or two components both calling their
+                      image field "image"). Without it they shared input ids —
+                      and, for media fields, the picker frame id the selection
+                      event is correlated by, so a media picked in one component
+                      landed in the other as well. Input *names* stay
+                      component-agnostic: each form posts its own component. %>
                   <%= lato_cms_render_field(
                       field_id: field_id,
                       field_config: field_config,
-                      page_field: page_field
+                      page_field: page_field,
+                      dom_id_prefix: "fields_#{tc[:template_component_id]}_#{field_id}"
                     ) %>
                 </div>
               <% end %>

data/app/views/lato_cms/pages/fields/_media_item.html.erb

@@ -8,7 +8,13 @@
        data-action="dragstart->lato-cms-media-reorder#onDragStart dragend->lato-cms-media-reorder#onDragEnd"
      <% end %>>
   <% if kind == 'video' %>
-    <video controls preload="metadata" class="lato-cms-media-field__player" src="<%= media.url %>"></video>
+    <%# With a poster the browser fetches nothing but that image until the admin
+        hits play: a page can hold many video fields, and preloading metadata
+        for each one meant every video file was requested just to open the
+        editor (enough of them and the players stall before they ever start).
+        Without a poster there's nothing else to show, so metadata it is. %>
+    <video controls preload="<%= media.poster_url ? 'none' : 'metadata' %>" poster="<%= media.poster_url %>"
+      class="lato-cms-media-field__player" src="<%= media.url %>"></video>
   <% elsif media.thumbnail_url %>
     <img src="<%= media.thumbnail_url %>" class="lato-cms-media-field__thumb" alt="<%= media.alt_text %>">
   <% else %>

data/config/locales/en.yml

@@ -127,6 +127,8 @@ en:
     media_usages_title: Used in
     media_filter_all: All
     media_filter_unused: Unused
+    media_filter_missing_alt_text: Missing alt text
+    media_filter_missing_title: Missing title
     media_summary_title: Media details
     media_type_label: Type
     media_update_tab_details: Details

data/config/locales/it.yml

@@ -127,6 +127,8 @@ it:
     media_usages_title: Utilizzato in
     media_filter_all: Tutti
     media_filter_unused: Senza utilizzi
+    media_filter_missing_alt_text: Senza alt text
+    media_filter_missing_title: Senza title
     media_summary_title: Dettagli media
     media_type_label: Tipo
     media_update_tab_details: Dettagli

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.2.4"
+  VERSION = "3.2.6"
 end

metadata

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