lato_cms 3.0.13 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1b3de7e40dab4ee5574179d52307473705c2b084aa7a2a76d03dcd0fb0f3cef
-  data.tar.gz: 70cfbb74343f62265a02f93d8998d92995b8332f8bc16e9671b3ab4af63ef70b
+  metadata.gz: fe4976c31eee3bc5137206d66037755baf19825e152a1c37a4be32e5b715dd6d
+  data.tar.gz: a209a52cb918989ce0179da4c902e3f4f71f0bb0843b6c4e7fac83c8b901424c
 SHA512:
-  metadata.gz: '054983638f6a1454267a5d7eed3574152eac784a03ff1905c357a42bcd3fa5a3093b4591a8308008925f2b1612e7eb2eeccf2b58916a6080550156bc1414540d'
-  data.tar.gz: 1767c5b3550717035094aa78c755bc8b0531cbec89d430421334c91e9fe2b96b9d0c9b9c5735e52fdd582906b82846d55cce21002b7ec32ad8de6aaac034a415
+  metadata.gz: 469fa040c5c8ea3b04d630c1d664e0ff2db92a418089852eb2252c57899da646325c76969b4389dd219f20ff96c3f679b0581548107e19a354e9f47977bde3bd
+  data.tar.gz: 7638ec4ca940ab161bb361ec69fff832fb3950ab814dd656d3f4dabe422cafdf6b91ebff1962949dfcd89e86fd269d2bde9d95d17fff3f1a25eb16a36dc9413b

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

@@ -0,0 +1,143 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Generic controller for image/video/file/gallery fields backed by the Media
+// library (replaces the old per-type native-upload controllers). Holds the
+// selected media id(s) in hidden input(s) and renders a preview; the actual
+// picking happens in a modal driven by lato_cms_media_picker_controller.js,
+// which writes the selection back here via a `lato-cms:media-selected`
+// event correlated by this field's own turbo-frame id.
+export default class extends Controller {
+  static targets = ['grid', 'addTile', 'validationAnchor']
+  static values = { kind: String, multiple: Boolean, frameId: String, hiddenName: String, fieldId: String }
+
+  connect () {
+    this.onMediaSelected = this.onMediaSelected.bind(this)
+    this.afterSave = this.afterSave.bind(this)
+
+    document.addEventListener('lato-cms:media-selected', this.onMediaSelected)
+    this.form = this.element.closest('form')
+    this.form?.addEventListener('lato-cms:fields-save-success', this.afterSave)
+  }
+
+  disconnect () {
+    document.removeEventListener('lato-cms:media-selected', this.onMediaSelected)
+    this.form?.removeEventListener('lato-cms:fields-save-success', this.afterSave)
+  }
+
+  // Opens the picker in an overlay. Reuses the same pool of pre-rendered
+  // Bootstrap modals the shared `lato-action` mechanism uses, but drives it
+  // directly instead of going through that controller's trigger convention:
+  // that convention opens a frame by hoping Turbo notices it was just
+  // inserted before driving a full-page visit off the link's plain href,
+  // and loses that race for this link (verified: it was navigating to a
+  // separate page instead of showing an overlay). Setting the frame's `src`
+  // explicitly is Turbo's documented, non-racy way to trigger a frame fetch.
+  openPicker (event) {
+    event.preventDefault()
+
+    const link = event.currentTarget
+    const modal = Array.from(document.querySelectorAll('[data-lato-action-target="modal"]'))
+      .find(el => !el.classList.contains('show'))
+    if (!modal) return
+
+    const body = modal.querySelector('[data-lato-action-target="modalBody"]')
+    const title = modal.querySelector('[data-lato-action-target="modalTitle"]')
+    const dialog = modal.querySelector('[data-lato-action-target="modalDialog"]')
+
+    body.innerHTML = `
+      <turbo-frame id="${this.frameIdValue}">
+        <div class="placeholder-glow"><span class="placeholder placeholder-lg col-12"></span></div>
+      </turbo-frame>`
+    title.textContent = link.dataset.actionTitle || ''
+    dialog.classList.remove('modal-sm', 'modal-md', 'modal-lg', 'modal-xl')
+    dialog.classList.add(`modal-${link.dataset.actionSize || 'md'}`)
+
+    window.bootstrap.Modal.getOrCreateInstance(modal).show()
+    body.querySelector('turbo-frame').src = link.href
+  }
+
+  onMediaSelected (event) {
+    if (event.detail.frameId !== this.frameIdValue) return
+
+    if (!this.multipleValue) {
+      this.itemTiles().forEach(tile => tile.remove())
+    }
+    event.detail.items.forEach(item => this.appendItem(item))
+
+    this.syncEmptyAndValidation()
+  }
+
+  remove (event) {
+    event.currentTarget.closest('.lato-cms-media-field__item')?.remove()
+    this.syncEmptyAndValidation()
+  }
+
+  afterSave (event) {
+    if (!event.detail.success) return
+
+    const field = (event.detail.data?.fields || []).find(
+      f => f.persisted_field_id === this.fieldIdValue || f.field_id === this.fieldIdValue
+    )
+    if (!field) return
+
+    this.itemTiles().forEach(tile => tile.remove())
+    field.attachments.forEach(attachment => this.appendItem({
+      id: attachment.media_id,
+      name: attachment.name,
+      thumbnailUrl: attachment.url,
+      url: attachment.url,
+      posterUrl: attachment.poster_url
+    }))
+    this.syncEmptyAndValidation()
+  }
+
+  appendItem (item) {
+    if (!item || this.gridTarget.querySelector(`[data-media-id="${item.id}"]`)) return
+
+    const wrapper = document.createElement('div')
+    wrapper.className = 'lato-cms-media-field__tile lato-cms-media-field__item'
+    wrapper.dataset.mediaId = item.id
+    if (this.multipleValue) {
+      wrapper.draggable = true
+      wrapper.dataset.action = 'dragstart->lato-cms-media-reorder#onDragStart dragend->lato-cms-media-reorder#onDragEnd'
+      wrapper.setAttribute('data-lato-cms-media-reorder-target', 'item')
+    }
+
+    wrapper.innerHTML = `
+      ${this.previewMarkup(item)}
+      <div class="lato-cms-media-field__overlay">
+        <span class="lato-cms-media-field__name">${item.name}</span>
+      </div>
+      <button type="button" class="lato-cms-media-field__remove" data-action="lato-cms-media-field#remove">
+        <i class="bi bi-x-lg"></i>
+      </button>
+      <input type="hidden" name="${this.hiddenNameValue}" value="${item.id}">`
+
+    this.gridTarget.insertBefore(wrapper, this.addTileTarget)
+  }
+
+  previewMarkup (item) {
+    if (this.kindValue === 'video') {
+      return `<video muted preload="metadata" class="lato-cms-media-field__player" src="${item.url}"></video>
+        <i class="bi bi-play-circle-fill lato-cms-media-field__badge"></i>`
+    }
+    if (item.thumbnailUrl || item.url) {
+      return `<img src="${item.thumbnailUrl || item.url}" class="lato-cms-media-field__thumb">`
+    }
+    return '<div class="lato-cms-media-field__icon"><i class="bi bi-paperclip"></i></div>'
+  }
+
+  itemTiles () {
+    return Array.from(this.gridTarget.querySelectorAll('.lato-cms-media-field__item'))
+  }
+
+  syncEmptyAndValidation () {
+    const hasItems = this.itemTiles().length > 0
+
+    if (!this.multipleValue) this.addTileTarget.classList.toggle('d-none', hasItems)
+    if (this.hasValidationAnchorTarget) {
+      this.validationAnchorTarget.value = hasItems ? '1' : ''
+      this.validationAnchorTarget.required = this.element.dataset.fieldRequired === 'true' && !hasItems
+    }
+  }
+}

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

@@ -0,0 +1,110 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Modal content loaded via the `lato-action` mechanism (see lato_action_controller.js).
+// Lets the admin browse the Media library or upload a new file, then writes
+// the selection back to whichever field opened this picker by dispatching a
+// `lato-cms:media-selected` event on `document`, correlated by the picker's
+// own turbo-frame id (unique per field instance, even inside a repeater).
+export default class extends Controller {
+  static targets = ['grid', 'item', 'selectedCount', 'confirmButton', 'uploadForm', 'uploadNotice']
+  static values = { multiple: Boolean, selectedLabel: String }
+
+  connect () {
+    this.frameId = this.element.closest('turbo-frame')?.id
+    this.pending = new Map()
+  }
+
+  select (event) {
+    const item = this.buildItemFromElement(event.currentTarget)
+
+    if (!this.multipleValue) {
+      this.dispatchSelection([item])
+      this.closeModal()
+      return
+    }
+
+    if (this.pending.has(item.id)) {
+      this.pending.delete(item.id)
+      event.currentTarget.classList.remove('lato-cms-media-picker__item--selected')
+    } else {
+      this.pending.set(item.id, item)
+      event.currentTarget.classList.add('lato-cms-media-picker__item--selected')
+    }
+
+    this.updateSelectionUi()
+  }
+
+  confirm () {
+    if (this.pending.size === 0) return
+
+    this.dispatchSelection(Array.from(this.pending.values()))
+    this.closeModal()
+  }
+
+  async upload (event) {
+    event.preventDefault()
+
+    const form = event.currentTarget
+    const response = await fetch(form.action, {
+      method: 'POST',
+      headers: { Accept: 'application/json' },
+      body: new FormData(form)
+    })
+    const data = await response.json()
+
+    if (!response.ok) {
+      this.uploadNoticeTarget.innerHTML = `<div class="alert alert-danger">${Object.values(data).flat().join(', ')}</div>`
+      return
+    }
+
+    const item = {
+      id: data.id,
+      name: data.name,
+      thumbnailUrl: data.thumbnail_url,
+      mediaType: data.media_type,
+      url: data.url,
+      posterUrl: data.poster_url
+    }
+
+    if (!this.multipleValue) {
+      this.dispatchSelection([item])
+      this.closeModal()
+      return
+    }
+
+    this.pending.set(item.id, item)
+    this.updateSelectionUi()
+    form.reset()
+    this.uploadNoticeTarget.innerHTML = `<div class="alert alert-success">${item.name}</div>`
+  }
+
+  buildItemFromElement (element) {
+    return {
+      id: element.dataset.mediaId,
+      name: element.dataset.mediaName,
+      thumbnailUrl: element.dataset.mediaThumb,
+      mediaType: element.dataset.mediaType,
+      url: element.dataset.mediaUrl,
+      posterUrl: element.dataset.mediaPosterUrl
+    }
+  }
+
+  dispatchSelection (items) {
+    document.dispatchEvent(new CustomEvent('lato-cms:media-selected', {
+      bubbles: true,
+      detail: { frameId: this.frameId, items }
+    }))
+  }
+
+  updateSelectionUi () {
+    if (this.hasSelectedCountTarget) this.selectedCountTarget.textContent = `${this.pending.size} ${this.selectedLabelValue}`
+    if (this.hasConfirmButtonTarget) this.confirmButtonTarget.disabled = this.pending.size === 0
+  }
+
+  closeModal () {
+    const modalElement = this.element.closest('.modal')
+    if (!modalElement) return
+
+    window.bootstrap.Modal.getInstance(modalElement)?.hide()
+  }
+}

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

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Drag-and-drop reordering for multi-value media fields (gallery, file
+// multiple). Mounted alongside lato_cms_media_field_controller on the same
+// element. Submitted order comes from plain DOM order of the hidden inputs
+// inside the grid, so reordering nodes here is the entire contract — no
+// separate "order" param to keep in sync.
+export default class extends Controller {
+  static targets = ['grid', 'item']
+
+  onDragStart (event) {
+    this.dragging = event.currentTarget
+    this.dragging.classList.add('lato-cms-media-field__item--dragging')
+    event.dataTransfer.effectAllowed = 'move'
+  }
+
+  onDragEnd (event) {
+    event.currentTarget.classList.remove('lato-cms-media-field__item--dragging')
+    this.dragging = null
+  }
+
+  onGridDragOver (event) {
+    event.preventDefault()
+    if (!this.dragging) return
+
+    const target = event.target.closest('.lato-cms-media-field__item')
+    if (!target || target === this.dragging) return
+
+    const rect = target.getBoundingClientRect()
+    const before = (event.clientX - rect.left) < rect.width / 2
+    this.gridTarget.insertBefore(this.dragging, before ? target : target.nextSibling)
+  }
+
+  onGridDrop (event) {
+    event.preventDefault()
+  }
+}

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

@@ -0,0 +1,37 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Refreshes the enclosing turbo-frame (or the whole page) whenever a
+// Bootstrap modal on the page closes. Used after triggering a
+// Lato::Operation (e.g. "Regenerate with AI", "Clone & translate") from a
+// link inside it: the underlying page/frame has no way to know when that
+// background job finishes, so once the admin dismisses the operation's
+// progress modal, refresh so the result is shown without a manual reload.
+//
+// Mounted on an element INSIDE the turbo-frame's content, not on the frame
+// tag itself: when this frame is opened inside a modal, `lato-action`
+// pre-creates a bare `<turbo-frame>` via innerHTML before Turbo fetches
+// into it, and Turbo's frame navigation only replaces that element's
+// children, not its own attributes — a `data-controller` set directly on
+// the frame tag in the fetched content would never actually attach.
+// `closest('turbo-frame')` finds the frame at the time of reload, whether
+// this connected inside a modal-loaded frame or a plain, directly-loaded
+// page (no frame at all, so it falls back to reloading the whole page).
+export default class extends Controller {
+  connect () {
+    this.reload = this.reload.bind(this)
+    document.addEventListener('hidden.bs.modal', this.reload)
+  }
+
+  disconnect () {
+    document.removeEventListener('hidden.bs.modal', this.reload)
+  }
+
+  reload () {
+    const frame = this.element.closest('turbo-frame')
+    if (frame && frame.getAttribute('src')) {
+      frame.reload()
+    } else {
+      window.Turbo.visit(window.location.href)
+    }
+  }
+}