lato_cms 3.0.12 → 3.1.0

data/lib/lato_cms/config.rb

@@ -3,7 +3,7 @@ module LatoCms
   # This class contains the default configuration of the engine.
   ##
   class Config
-    attr_accessor :locales, :templates_path, :admin_roles
+    attr_accessor :locales, :templates_path, :admin_roles, :llm_api_url, :llm_model, :llm_api_key
 
     def initialize
       @locales = [:en]
@@ -15,6 +15,17 @@ module LatoCms
       # `operator` has read/edit access; `admin` also manages pages
       # (create, update, delete) and translation links.
       @admin_roles = { none: 0, operator: 1, admin: 2 }
+
+      # Optional OpenAI-compatible endpoint used to auto-generate alt text
+      # for uploaded images (see LatoCms::Media#generate_alt_text!). All
+      # three must be set for the feature to activate; unset by default.
+      @llm_api_url = nil
+      @llm_model = nil
+      @llm_api_key = nil
+    end
+
+    def llm_configured?
+      llm_api_url.present? && llm_model.present? && llm_api_key.present?
     end
   end
 end

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.0.12"
+  VERSION = "3.1.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.0.12
+  version: 3.1.0
 platform: ruby
 authors:
 - Gregorio Galante
@@ -79,6 +79,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '1.2'
+- !ruby/object:Gem::Dependency
+  name: ruby-vips
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
 description: A Rails engine to manage application users on Lato projects!
 email:
 - me@gregoriogalante.com
@@ -96,26 +110,40 @@ files:
 - app/assets/javascripts/lato_cms/controllers/lato_cms_component_accordion_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_component_form_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_component_toggle_controller.js
-- app/assets/javascripts/lato_cms/controllers/lato_cms_file_field_controller.js
-- app/assets/javascripts/lato_cms/controllers/lato_cms_gallery_field_controller.js
-- app/assets/javascripts/lato_cms/controllers/lato_cms_image_field_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_json_field_controller.js
+- app/assets/javascripts/lato_cms/controllers/lato_cms_media_field_controller.js
+- app/assets/javascripts/lato_cms/controllers/lato_cms_media_picker_controller.js
+- app/assets/javascripts/lato_cms/controllers/lato_cms_media_reorder_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_page_preview_controller.js
+- app/assets/javascripts/lato_cms/controllers/lato_cms_reload_on_modal_close_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_repeater_controller.js
 - app/assets/javascripts/lato_cms/controllers/lato_cms_text_field_controller.js
-- app/assets/javascripts/lato_cms/controllers/lato_cms_video_field_controller.js
 - app/assets/stylesheets/lato_cms/application.scss
 - app/controllers/lato_cms/api/pages_controller.rb
 - app/controllers/lato_cms/application_controller.rb
+- app/controllers/lato_cms/media_controller.rb
 - app/controllers/lato_cms/pages_controller.rb
 - app/helpers/lato_cms/application_helper.rb
+- app/helpers/lato_cms/media_helper.rb
 - app/helpers/lato_cms/pages_helper.rb
 - app/jobs/lato_cms/application_job.rb
+- app/jobs/lato_cms/export_sitemap_csv_job.rb
+- app/jobs/lato_cms/generate_alt_text_job.rb
 - app/jobs/lato_cms/generate_video_poster_job.rb
+- app/jobs/lato_cms/translate_component_fields_job.rb
 - app/mailers/lato_cms/application_mailer.rb
+- app/models/lato_cms/llm_client.rb
+- app/models/lato_cms/media.rb
 - app/models/lato_cms/page.rb
 - app/models/lato_cms/page_field.rb
+- app/models/lato_cms/page_field_media.rb
 - app/models/lato_cms/template_manager.rb
+- app/views/lato_cms/media/_form_create.html.erb
+- app/views/lato_cms/media/_form_update.html.erb
+- app/views/lato_cms/media/create.html.erb
+- app/views/lato_cms/media/index.html.erb
+- app/views/lato_cms/media/picker_action.html.erb
+- app/views/lato_cms/media/update.html.erb
 - app/views/lato_cms/pages/_component_accordion.html.erb
 - app/views/lato_cms/pages/_fields_editor.html.erb
 - app/views/lato_cms/pages/_form_create.html.erb
@@ -132,6 +160,8 @@ files:
 - app/views/lato_cms/pages/fields/_gallery.html.erb
 - app/views/lato_cms/pages/fields/_image.html.erb
 - app/views/lato_cms/pages/fields/_json.html.erb
+- app/views/lato_cms/pages/fields/_media_field.html.erb
+- app/views/lato_cms/pages/fields/_media_item.html.erb
 - app/views/lato_cms/pages/fields/_multiselect.html.erb
 - app/views/lato_cms/pages/fields/_number.html.erb
 - app/views/lato_cms/pages/fields/_select.html.erb
@@ -152,6 +182,9 @@ files:
 - db/migrate/20260323171241_create_lato_cms_page_fields.rb
 - db/migrate/20260705000000_add_translation_group_id_to_lato_cms_pages.rb
 - db/migrate/20260712092241_change_lato_cms_admin_to_lato_cms_admin_role_on_lato_user.rb
+- db/migrate/20260728175413_create_lato_cms_media.rb
+- db/migrate/20260728175414_create_lato_cms_page_field_media.rb
+- db/migrate/20260729120000_change_lato_cms_media_alt_text_to_translations.rb
 - lib/lato_cms.rb
 - lib/lato_cms/config.rb
 - lib/lato_cms/engine.rb

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

@@ -1,225 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["input", "item", "list", "removedNotice"]
-  static values = { multiple: Boolean }
-
-  newFileMap = new Map()
-  nextUid = 0
-
-  connect() {
-    this.afterSave = this.afterSave.bind(this)
-    this.element.closest('form')?.addEventListener('lato-cms:fields-save-success', this.afterSave)
-  }
-
-  disconnect() {
-    this.element.closest('form')?.removeEventListener('lato-cms:fields-save-success', this.afterSave)
-  }
-
-  addFiles() {
-    if (!this.multipleValue) this.prepareSingleReplacement()
-
-    Array.from(this.inputTarget.files).forEach(file => {
-      const uid = `new_${this.nextUid++}`
-      this.newFileMap.set(uid, file)
-      this.listTarget.appendChild(this.buildNewItem(file, uid))
-    })
-
-    this.inputTarget.value = ''
-    this.syncFileInput()
-    this.syncRequired()
-  }
-
-  remove(event) {
-    const item = event.currentTarget.closest('[data-lato-cms-file-field-target="item"]')
-    if (!item) return
-
-    if (item.dataset.fileUid) {
-      this.newFileMap.delete(item.dataset.fileUid)
-      item.remove()
-      this.syncFileInput()
-      if (!this.multipleValue) this.restoreReplacedItems()
-      this.syncRequired()
-      return
-    }
-
-    item.classList.add('lato-cms-file-field__item--removing')
-    item.querySelector('[data-lato-cms-file-field-target="removedNotice"]')?.classList.remove('d-none')
-    this.ensureRemoveInput(item)
-    this.syncRequired()
-  }
-
-  undo(event) {
-    const item = event.currentTarget.closest('[data-lato-cms-file-field-target="item"]')
-    if (!item) return
-
-    item.classList.remove('lato-cms-file-field__item--removing')
-    item.querySelector('[data-lato-cms-file-field-target="removedNotice"]')?.classList.add('d-none')
-    item.querySelector('[data-remove-file-input]')?.remove()
-    this.syncRequired()
-  }
-
-  // The file input only has to be required while nothing survives the next save:
-  // a pending new file or a persisted attachment not marked for removal already
-  // satisfies the field, so keeping `required` would block every re-save (the
-  // form saves via fetch without reload, so the attribute must track state).
-  syncRequired() {
-    const hasActiveAttachment = this.newFileMap.size > 0 ||
-      this.itemTargets.some(item => {
-        return item.dataset.attachmentId && !item.classList.contains('lato-cms-file-field__item--removing')
-      })
-    this.inputTarget.required = this.fieldRequired && !hasActiveAttachment
-  }
-
-  ensureRemoveInput(item) {
-    if (item.querySelector('[data-remove-file-input]')) return
-
-    const input = document.createElement('input')
-    input.type = 'hidden'
-    input.name = this.inputTarget.name.replace(/\[files\]\[\]$/, '[remove_file_ids][]')
-    input.value = item.dataset.attachmentId
-    input.setAttribute('data-remove-file-input', '')
-    item.appendChild(input)
-  }
-
-  syncFileInput() {
-    const dt = new DataTransfer()
-    this.newFileMap.forEach(file => dt.items.add(file))
-    this.inputTarget.files = dt.files
-  }
-
-  prepareSingleReplacement() {
-    this.newFileMap.clear()
-    this.listTarget.querySelectorAll('[data-file-uid]').forEach(item => item.remove())
-    this.itemTargets
-      .filter(item => item.dataset.attachmentId && !item.querySelector('[data-remove-file-input]'))
-      .forEach(item => {
-        item.classList.add('d-none')
-        item.dataset.replacedByNewFile = 'true'
-      })
-  }
-
-  restoreReplacedItems() {
-    if (this.newFileMap.size > 0) return
-
-    this.itemTargets
-      .filter(item => item.dataset.replacedByNewFile === 'true')
-      .forEach(item => {
-        item.classList.remove('d-none')
-        delete item.dataset.replacedByNewFile
-      })
-  }
-
-  buildNewItem(file, uid) {
-    const item = document.createElement('div')
-    item.className = 'lato-cms-file-field__item lato-cms-file-field__item--new'
-    item.dataset.latoCmsFileFieldTarget = 'item'
-    item.dataset.fileUid = uid
-    item.innerHTML = `
-      <div class="lato-cms-file-field__info">
-        <i class="bi bi-paperclip"></i>
-        <span>${this.escapeHtml(file.name)}</span>
-        <span class="text-muted small">(${this.humanSize(file.size)})</span>
-        <span class="badge bg-success">${this.newBadgeLabel}</span>
-      </div>
-      <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
-  }
-
-  afterSave(event) {
-    if (!event.detail.success) return
-
-    this.newFileMap.clear()
-    this.inputTarget.value = ''
-
-    const field = this.findSavedField(event.detail.data?.fields || [])
-    if (!field) {
-      this.itemTargets
-        .filter(item => item.querySelector('[data-remove-file-input]'))
-        .forEach(item => item.remove())
-      this.syncRequired()
-      return
-    }
-
-    this.listTarget.innerHTML = ''
-    field.attachments.forEach(attachment => {
-      this.listTarget.appendChild(this.buildExistingItem(attachment))
-    })
-    this.syncRequired()
-  }
-
-  findSavedField(fields) {
-    return fields.find(field => {
-      return field.persisted_field_id === this.fieldId || field.field_id === this.fieldId
-    })
-  }
-
-  buildExistingItem(attachment) {
-    const item = document.createElement('div')
-    item.className = 'lato-cms-file-field__item'
-    item.dataset.latoCmsFileFieldTarget = 'item'
-    item.dataset.attachmentId = attachment.id
-    item.innerHTML = `
-      <div class="lato-cms-file-field__info">
-        <i class="bi bi-paperclip"></i>
-        <span>${this.escapeHtml(attachment.filename)}</span>
-        <span class="text-muted small">(${this.humanSize(attachment.byte_size || 0)})</span>
-      </div>
-      <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">
-          <i class="bi bi-trash me-1"></i>${this.removePendingLabel}
-        </span>
-        <button type="button" class="btn btn-link btn-sm p-0" data-action="lato-cms-file-field#undo">
-          ${this.undoLabel}
-        </button>
-      </div>
-    `
-    return item
-  }
-
-  humanSize(size) {
-    if (size < 1024) return `${size} B`
-    if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
-    return `${(size / 1024 / 1024).toFixed(1)} MB`
-  }
-
-  escapeHtml(value) {
-    return value.replace(/[&<>"']/g, char => ({
-      '&': '&amp;',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      "'": '&#39;'
-    }[char]))
-  }
-
-  get newBadgeLabel() {
-    return this.element.dataset.newBadgeLabel || 'New'
-  }
-
-  get removeLabel() {
-    return this.element.dataset.removeLabel || 'Remove'
-  }
-
-  get removePendingLabel() {
-    return this.element.dataset.removePendingLabel || 'File will be removed on save'
-  }
-
-  get undoLabel() {
-    return this.element.dataset.undoLabel || 'Undo'
-  }
-
-  get fieldId() {
-    return this.element.dataset.fieldId
-  }
-
-  get fieldRequired() {
-    return this.element.dataset.fieldRequired === 'true'
-  }
-}

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

@@ -1,190 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["grid", "fileInput", "emptyMsg"]
-  static values = { fieldId: String, inputNamePrefix: String }
-
-  dragging = null
-  newFileMap = new Map()
-  nextUid = 0
-
-  connect() {
-    this.afterSave = this.afterSave.bind(this)
-    this.element.closest('form')?.addEventListener('lato-cms:fields-save-success', this.afterSave)
-  }
-
-  disconnect() {
-    this.element.closest('form')?.removeEventListener('lato-cms:fields-save-success', this.afterSave)
-  }
-
-  // ─── File selection ─────────────────────────────────────────────────────────
-
-  addFiles() {
-    Array.from(this.fileInputTarget.files).forEach(file => {
-      if (!file.type.startsWith('image/')) return
-      const uid = `new_${this.nextUid++}`
-      this.newFileMap.set(uid, file)
-
-      const reader = new FileReader()
-      reader.onload = ({ target }) => {
-        const item = this.buildItem(target.result, null, uid)
-        this.gridTarget.appendChild(item)
-        this.updateEmpty()
-        this.updateOrderInputs()
-      }
-      reader.readAsDataURL(file)
-    })
-
-    // Reset input then sync with DataTransfer
-    this.fileInputTarget.value = ''
-    this.syncFileInput()
-    this.syncRequired()
-  }
-
-  // ─── Remove ─────────────────────────────────────────────────────────────────
-
-  remove(event) {
-    const item = event.currentTarget.closest('[data-gallery-item]')
-    if (!item) return
-
-    const { attachmentId, fileUid } = item.dataset
-
-    if (attachmentId) {
-      const input = document.createElement('input')
-      input.type = 'hidden'
-      input.name = `${this.inputNamePrefixValue}[remove_file_ids][]`
-      input.value = attachmentId
-      this.element.appendChild(input)
-    } else if (fileUid) {
-      this.newFileMap.delete(fileUid)
-      this.syncFileInput()
-    }
-
-    item.remove()
-    this.updateEmpty()
-    this.updateOrderInputs()
-    this.syncRequired()
-  }
-
-  // ─── Drag & drop ─────────────────────────────────────────────────────────────
-
-  onDragStart(event) {
-    this.dragging = event.currentTarget
-    event.dataTransfer.effectAllowed = 'move'
-    // Defer class so browser can snapshot the element first
-    requestAnimationFrame(() => event.currentTarget.classList.add('lato-cms-gallery-field__item--dragging'))
-  }
-
-  onDragEnd(event) {
-    event.currentTarget.classList.remove('lato-cms-gallery-field__item--dragging')
-    this.dragging = null
-    this.updateOrderInputs()
-  }
-
-  onGridDragOver(event) {
-    event.preventDefault()
-    if (!this.dragging) return
-
-    const target = event.target.closest('[data-gallery-item]')
-    if (!target || target === this.dragging) return
-
-    const { left, width } = target.getBoundingClientRect()
-    const insertBefore = event.clientX < left + width / 2
-    this.gridTarget.insertBefore(this.dragging, insertBefore ? target : target.nextSibling)
-  }
-
-  onGridDrop(event) {
-    event.preventDefault()
-  }
-
-  // ─── Order inputs ────────────────────────────────────────────────────────────
-
-  updateOrderInputs() {
-    this.element.querySelectorAll('[data-gallery-order-input]').forEach(el => el.remove())
-
-    this.gridTarget.querySelectorAll('[data-gallery-item][data-attachment-id]').forEach(item => {
-      const id = item.dataset.attachmentId
-      if (!id) return
-      const input = document.createElement('input')
-      input.type = 'hidden'
-      input.name = `${this.inputNamePrefixValue}[order][]`
-      input.value = id
-      input.setAttribute('data-gallery-order-input', '')
-      this.element.appendChild(input)
-    })
-  }
-
-  // ─── Helpers ─────────────────────────────────────────────────────────────────
-
-  syncFileInput() {
-    const dt = new DataTransfer()
-    this.newFileMap.forEach(file => dt.items.add(file))
-    this.fileInputTarget.files = dt.files
-  }
-
-  updateEmpty() {
-    if (!this.hasEmptyMsgTarget) return
-    const hasItems = this.gridTarget.querySelector('[data-gallery-item]')
-    this.emptyMsgTarget.classList.toggle('d-none', !!hasItems)
-  }
-
-  // Required enforcement rides on native form validation: the file input is
-  // `visually-hidden` (not display:none) so the browser can focus it and anchor
-  // the validation bubble on the "Add images" button. `required` must be set
-  // only while no image survives the next save — pending files kept in the
-  // input via DataTransfer or surviving grid items satisfy the field.
-  syncRequired() {
-    const hasActiveItem = this.newFileMap.size > 0 ||
-      !!this.gridTarget.querySelector('[data-gallery-item]')
-    this.fileInputTarget.required = this.fieldRequired && !hasActiveItem
-  }
-
-  buildItem(src, attachmentId, fileUid) {
-    const div = document.createElement('div')
-    div.setAttribute('data-gallery-item', '')
-    div.dataset.attachmentId = attachmentId || ''
-    div.dataset.fileUid = fileUid || ''
-    div.draggable = true
-    div.className = 'lato-cms-gallery-field__item'
-    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-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
-  }
-
-  afterSave(event) {
-    if (!event.detail.success) return
-
-    const field = this.findSavedField(event.detail.data?.fields || [])
-    if (!field) return
-
-    this.newFileMap.clear()
-    this.fileInputTarget.value = ''
-    this.element.querySelectorAll('[name$="[remove_file_ids][]"]').forEach(input => input.remove())
-    this.gridTarget.innerHTML = ''
-    field.attachments.forEach(attachment => {
-      this.gridTarget.appendChild(this.buildItem(attachment.url, attachment.id, null))
-    })
-    this.updateEmpty()
-    this.updateOrderInputs()
-    this.syncRequired()
-  }
-
-  findSavedField(fields) {
-    return fields.find(field => {
-      return field.persisted_field_id === this.fieldIdValue || field.field_id === this.fieldIdValue
-    })
-  }
-
-  get removeLabel() {
-    return this.element.dataset.removeLabel || 'Remove'
-  }
-
-  get fieldRequired() {
-    return this.element.dataset.fieldRequired === 'true'
-  }
-}