lato_cms 3.0.2 → 3.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 527556e5bf27156bab801e7f0c23c53f9ac9e0565d051da5a0fa1c9500954357
-  data.tar.gz: dfcbcca5925d763f06d2043e497e128d84d3fcd200059990f9cb8fc1718699cc
+  metadata.gz: 319316314172ac5393d5d560741b331e00a8570fe476090f607cf3c583addce4
+  data.tar.gz: c8566ef62e7af5280fd4627a376d79b1dabbef383eeb365d7f3720ad9b3d5dba
 SHA512:
-  metadata.gz: 37384b79131f97266d82434b290a2bdd3ce4b844d1bf9c63bb6363f4877cfa8379ebe1d1fb4ffe2f6bcbc2a00cc69b8e13124b6e9fa9293025ab98606a4690e4
-  data.tar.gz: e9ce262f6bbfc70a07554edba5e18ffe9f1c028250da9f6ac5a5b7962977b2f408222e8fddd2eb949f4d48fb1bf2d319c420b1f76ccf3d0675d6a1e39d80c5bb
+  metadata.gz: 6be7fac9bc254c30c2302b9bdd8351c7e20809b0a1f39cfaad773c74d82ead10bd7db204816f02ca86809eb46f03afb98ecbe516e474ad93a7a7cc2e01b7c9c8
+  data.tar.gz: 139e9d97bacf5cb8eb36542674c84483c4296964359799440689fc604a0705449c0e48531ad286d961569a115cef5b5fbdb2d2fd0ca08441a5e33f01ea939f43

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

@@ -106,8 +106,8 @@ export default class extends Controller {
         <span class="text-muted small">(${this.humanSize(file.size)})</span>
         <span class="badge bg-success">${this.newBadgeLabel}</span>
       </div>
-      <button type="button" class="btn btn-sm btn-outline-danger" data-action="lato-cms-file-field#remove">
-        <i class="bi bi-trash me-1"></i>${this.removeLabel}
+      <button type="button" class="lato-cms-attachment-field__remove" title="${this.removeLabel}" aria-label="${this.removeLabel}" data-action="lato-cms-file-field#remove">
+        <i class="bi bi-trash"></i>
       </button>
     `
     return item
@@ -150,8 +150,8 @@ export default class extends Controller {
         <span>${this.escapeHtml(attachment.filename)}</span>
         <span class="text-muted small">(${this.humanSize(attachment.byte_size || 0)})</span>
       </div>
-      <button type="button" class="btn btn-sm btn-outline-danger" data-action="lato-cms-file-field#remove">
-        <i class="bi bi-trash me-1"></i>${this.removeLabel}
+      <button type="button" class="lato-cms-attachment-field__remove" title="${this.removeLabel}" aria-label="${this.removeLabel}" data-action="lato-cms-file-field#remove">
+        <i class="bi bi-trash"></i>
       </button>
       <div class="lato-cms-file-field__removed d-none" data-lato-cms-file-field-target="removedNotice">
         <span class="text-danger small">

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

@@ -136,8 +136,8 @@ export default class extends Controller {
     div.setAttribute('data-action', 'dragstart->lato-cms-gallery-field#onDragStart dragend->lato-cms-gallery-field#onDragEnd')
     div.innerHTML = `
       <img src="${src}" class="lato-cms-gallery-field__thumb" alt="">
-      <button type="button" class="lato-cms-gallery-field__remove" data-action="click->lato-cms-gallery-field#remove">
-        <i class="bi bi-x-lg"></i>
+      <button type="button" class="lato-cms-attachment-field__remove lato-cms-gallery-field__remove" title="${this.removeLabel}" aria-label="${this.removeLabel}" data-action="click->lato-cms-gallery-field#remove">
+        <i class="bi bi-trash"></i>
       </button>
     `
     return div
@@ -165,4 +165,8 @@ export default class extends Controller {
       return field.persisted_field_id === this.fieldIdValue || field.field_id === this.fieldIdValue
     })
   }
+
+  get removeLabel() {
+    return this.element.dataset.removeLabel || 'Remove'
+  }
 }

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

@@ -42,7 +42,7 @@ export default class extends Controller {
   remove() {
     if (!this.hasCurrentContainerTarget) return
 
-    this.currentContainerTarget.classList.add('lato-cms-image-field--removing')
+    this.currentContainerTarget.classList.add('lato-cms-file-field__item--removing')
     this.removedNoticeTarget.classList.remove('d-none')
     this.ensureRemoveInput()
   }
@@ -50,7 +50,7 @@ export default class extends Controller {
   undo() {
     if (!this.hasCurrentContainerTarget) return
 
-    this.currentContainerTarget.classList.remove('lato-cms-image-field--removing')
+    this.currentContainerTarget.classList.remove('lato-cms-file-field__item--removing')
     this.removedNoticeTarget.classList.add('d-none')
     this.removeInput?.remove()
     this.removeInput = null
@@ -104,10 +104,10 @@ export default class extends Controller {
         <span>${this.escapeHtml(attachment.filename)}</span>
         <span class="text-muted small">(${this.humanSize(attachment.byte_size || 0)})</span>
       </div>
-      <button type="button" class="btn btn-sm btn-outline-danger" data-action="lato-cms-image-field#remove">
-        <i class="bi bi-trash me-1"></i>${this.removeLabel}
+      <button type="button" class="lato-cms-attachment-field__remove" title="${this.removeLabel}" aria-label="${this.removeLabel}" data-action="lato-cms-image-field#remove">
+        <i class="bi bi-trash"></i>
       </button>
-      <div class="lato-cms-image-field__removed d-none" data-lato-cms-image-field-target="removedNotice">
+      <div class="lato-cms-file-field__removed d-none" data-lato-cms-image-field-target="removedNotice">
         <span class="text-danger small">
           <i class="bi bi-trash me-1"></i>${this.removePendingLabel}
         </span>

data/app/assets/stylesheets/lato_cms/application.scss

@@ -189,6 +189,28 @@ body.lato-cms-advanced-editor--open {
   width: 100%;
 }
 
+.lato-cms-attachment-field__remove {
+  align-items: center;
+  align-self: center;
+  background: #f8d7da;
+  border: 0;
+  border-radius: 50%;
+  color: var(--bs-danger);
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 32px;
+  justify-content: center;
+  padding: 0;
+  transition: background 0.15s, color 0.15s;
+  width: 32px;
+
+  &:hover,
+  &:focus {
+    background: #f1aeb5;
+    color: var(--bs-danger);
+  }
+}
+
 .lato-cms-file-field__item--removing {
   background: rgba(220, 53, 69, 0.06);
   border-color: rgba(220, 53, 69, 0.35);
@@ -196,6 +218,7 @@ body.lato-cms-advanced-editor--open {
 
   .lato-cms-file-field__info,
   .lato-cms-image-field__preview,
+  .lato-cms-attachment-field__remove,
   > .btn {
     display: none;
   }
@@ -259,23 +282,6 @@ body.lato-cms-advanced-editor--open {
   }
 }
 
-.lato-cms-image-field__removed {
-  align-items: center;
-  display: flex;
-  gap: 0.75rem;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.lato-cms-image-field--removing {
-  .lato-cms-image-field__preview,
-  .lato-cms-file-field__info,
-  .lato-cms-image-field__remove-btn,
-  > .btn {
-    display: none;
-  }
-}
-
 .lato-cms-image-field__new-badge {
   position: absolute;
   bottom: 4px;
@@ -318,26 +324,8 @@ body.lato-cms-advanced-editor--open {
 
 .lato-cms-gallery-field__remove {
   position: absolute;
-  top: 3px;
-  right: 3px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: none;
-  background: rgba(220, 53, 69, 0.85);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  padding: 0;
-  cursor: pointer;
-  line-height: 1;
-  transition: background 0.15s;
-
-  &:hover {
-    background: rgb(220, 53, 69);
-  }
+  right: 4px;
+  top: 4px;
 }
 
 .controller-pages-show {

data/app/models/lato_cms/page_field.rb

@@ -92,12 +92,12 @@ module LatoCms
         result[:attachments] = files.map { |f| attachment_as_json(f) }
       when 'image'
         attached = files.first
-        result[:attachments] = attached ? [attachment_as_json(attached)] : []
+        result[:attachments] = attached ? [attachment_as_json(attached, with_variants: true)] : []
       when 'gallery'
         order = value ? (JSON.parse(value) rescue []) : []
         all_files = files.to_a
         ordered = order.any? ? all_files.sort_by { |f| order.index(f.id.to_s) || Float::INFINITY } : all_files
-        result[:attachments] = ordered.map { |f| attachment_as_json(f) }
+        result[:attachments] = ordered.map { |f| attachment_as_json(f, with_variants: true) }
       else
         result[:value] = parsed_value
       end
@@ -107,14 +107,49 @@ module LatoCms
 
     private
 
-    def attachment_as_json(attachment)
-      {
+    def attachment_as_json(attachment, with_variants: false)
+      json = {
         id: attachment.id,
         filename: attachment.filename.to_s,
         content_type: attachment.content_type,
         byte_size: attachment.byte_size,
         url: Rails.application.routes.url_helpers.rails_blob_path(attachment, only_path: true)
       }
+      json[:sizes] = attachment_variant_urls(attachment) if with_variants
+      json
+    end
+
+    # Builds a map of { size_name => variant_url } from the field's `settings.sizes`.
+    # Variants are processed lazily by Active Storage on first request to their URL.
+    def attachment_variant_urls(attachment)
+      sizes = field_settings['sizes']
+      return {} if sizes.blank? || !sizes.respond_to?(:each_pair) || !attachment.variable?
+
+      url_helpers = Rails.application.routes.url_helpers
+      sizes.each_with_object({}) do |(name, opts), acc|
+        transformation = variant_transformation(opts)
+        next if transformation.blank?
+
+        variant = attachment.variant(transformation)
+        acc[name] = url_helpers.rails_representation_path(variant, only_path: true)
+      end
+    rescue StandardError => e
+      Rails.logger.error("LatoCms: Failed to build image variants for attachment #{attachment.id}: #{e.message}")
+      {}
+    end
+
+    # Maps a size config (width/height/resize) to an Active Storage variant transformation.
+    # resize modes: "limit" (default, scale down only), "fit" (scale to fit), "fill" (crop to exact size).
+    def variant_transformation(opts)
+      opts = {} unless opts.respond_to?(:[])
+      dimensions = [opts['width'] || opts[:width], opts['height'] || opts[:height]]
+      return nil if dimensions.compact.empty?
+
+      case (opts['resize'] || opts[:resize] || 'limit').to_s
+      when 'fill' then { resize_to_fill: dimensions }
+      when 'fit' then { resize_to_fit: dimensions }
+      else { resize_to_limit: dimensions }
+      end
     end
 
     def parse_value

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

@@ -27,8 +27,8 @@
           <span><%= file.blob.filename %></span>
           <span class="text-muted small">(<%= number_to_human_size(file.blob.byte_size) %>)</span>
         </div>
-        <button type="button" class="btn btn-sm btn-outline-danger" data-action="lato-cms-file-field#remove">
-          <i class="bi bi-trash me-1"></i><%= t('lato_cms.field_file_remove') %>
+        <button type="button" class="lato-cms-attachment-field__remove" title="<%= t('lato_cms.field_file_remove') %>" aria-label="<%= t('lato_cms.field_file_remove') %>" data-action="lato-cms-file-field#remove">
+          <i class="bi bi-trash"></i>
         </button>
         <div class="lato-cms-file-field__removed d-none" data-lato-cms-file-field-target="removedNotice">
           <span class="text-danger small">

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

@@ -20,7 +20,7 @@ end %>
   <%= label %><%= ' *' if required %>
 </label>
 
-<div data-controller="lato-cms-gallery-field" data-lato-cms-gallery-field-field-id-value="<%= field_id %>" data-lato-cms-gallery-field-input-name-prefix-value="<%= local_assigns[:input_name_prefix].presence || "fields[#{field_id}]" %>">
+<div data-controller="lato-cms-gallery-field" data-lato-cms-gallery-field-field-id-value="<%= field_id %>" data-lato-cms-gallery-field-input-name-prefix-value="<%= local_assigns[:input_name_prefix].presence || "fields[#{field_id}]" %>" data-remove-label="<%= t('lato_cms.field_file_remove') %>">
   <div class="lato-cms-gallery-field__grid mb-2"
        data-lato-cms-gallery-field-target="grid"
        data-action="dragover->lato-cms-gallery-field#onGridDragOver drop->lato-cms-gallery-field#onGridDrop">
@@ -31,8 +31,8 @@ end %>
            draggable="true"
            data-action="dragstart->lato-cms-gallery-field#onDragStart dragend->lato-cms-gallery-field#onDragEnd">
         <img src="<%= lato_cms_attachment_path(file) %>" class="lato-cms-gallery-field__thumb" alt="<%= file.filename %>">
-        <button type="button" class="lato-cms-gallery-field__remove" data-action="click->lato-cms-gallery-field#remove">
-          <i class="bi bi-x-lg"></i>
+        <button type="button" class="lato-cms-attachment-field__remove lato-cms-gallery-field__remove" title="<%= t('lato_cms.field_file_remove') %>" aria-label="<%= t('lato_cms.field_file_remove') %>" data-action="click->lato-cms-gallery-field#remove">
+          <i class="bi bi-trash"></i>
         </button>
       </div>
     <% end %>

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

@@ -27,10 +27,10 @@
         <span><%= current_file.blob.filename %></span>
         <span class="text-muted small">(<%= number_to_human_size(current_file.blob.byte_size) %>)</span>
       </div>
-      <button type="button" class="btn btn-sm btn-outline-danger" data-action="lato-cms-image-field#remove">
-        <i class="bi bi-trash me-1"></i><%= t('lato_cms.field_image_remove') %>
+      <button type="button" class="lato-cms-attachment-field__remove" title="<%= t('lato_cms.field_image_remove') %>" aria-label="<%= t('lato_cms.field_image_remove') %>" data-action="lato-cms-image-field#remove">
+        <i class="bi bi-trash"></i>
       </button>
-      <div class="lato-cms-image-field__removed d-none" data-lato-cms-image-field-target="removedNotice">
+      <div class="lato-cms-file-field__removed d-none" data-lato-cms-image-field-target="removedNotice">
         <span class="text-danger small">
           <i class="bi bi-trash me-1"></i><%= t('lato_cms.field_image_remove_pending') %>
         </span>
@@ -51,8 +51,8 @@
       <span class="text-muted small" data-lato-cms-image-field-target="newPreviewSize"></span>
       <span class="badge bg-success"><%= t('lato_cms.field_image_new_badge') %></span>
     </div>
-    <button type="button" class="btn btn-sm btn-outline-danger" data-action="lato-cms-image-field#removeNew">
-      <i class="bi bi-trash me-1"></i><%= t('lato_cms.field_image_remove') %>
+    <button type="button" class="lato-cms-attachment-field__remove" title="<%= t('lato_cms.field_image_remove') %>" aria-label="<%= t('lato_cms.field_image_remove') %>" data-action="lato-cms-image-field#removeNew">
+      <i class="bi bi-trash"></i>
     </button>
   </div>
 

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.0.2"
+  VERSION = "3.0.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.0.2
+  version: 3.0.4
 platform: ruby
 authors:
 - Gregorio Galante
@@ -65,6 +65,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: image_processing
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
 description: A Rails engine to manage application users on Lato projects!
 email:
 - me@gregoriogalante.com