lato_cms 3.0.13 → 3.1.0

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'
-  }
-}

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

@@ -1,169 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["input", "newPreview", "newPreviewContainer", "newPreviewName", "newPreviewSize", "currentContainer", "currentImage", "removedNotice"]
-
-  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)
-  }
-
-  preview() {
-    const file = this.inputTarget.files[0]
-    if (!file || !file.type.startsWith('image/')) return
-
-    const reader = new FileReader()
-    reader.onload = ({ target }) => {
-      this.newPreviewTarget.src = target.result
-      this.newPreviewTarget.alt = file.name
-      this.newPreviewNameTarget.textContent = file.name
-      this.newPreviewSizeTarget.textContent = `(${this.humanSize(file.size)})`
-      this.newPreviewContainerTarget.classList.remove('d-none')
-      this.undo()
-      if (this.hasCurrentContainerTarget) this.currentContainerTarget.classList.add('d-none')
-    }
-    reader.readAsDataURL(file)
-  }
-
-  removeNew() {
-    this.inputTarget.value = ''
-    this.newPreviewTarget.src = ''
-    this.newPreviewTarget.alt = ''
-    this.newPreviewNameTarget.textContent = ''
-    this.newPreviewSizeTarget.textContent = ''
-    this.newPreviewContainerTarget.classList.add('d-none')
-    if (this.hasCurrentContainerTarget) this.currentContainerTarget.classList.remove('d-none')
-  }
-
-  remove() {
-    if (!this.hasCurrentContainerTarget) return
-
-    this.currentContainerTarget.classList.add('lato-cms-file-field__item--removing')
-    this.removedNoticeTarget.classList.remove('d-none')
-    this.ensureRemoveInput()
-    this.syncRequired()
-  }
-
-  undo() {
-    if (!this.hasCurrentContainerTarget) return
-
-    this.currentContainerTarget.classList.remove('lato-cms-file-field__item--removing')
-    this.removedNoticeTarget.classList.add('d-none')
-    this.removeInput?.remove()
-    this.removeInput = null
-    this.syncRequired()
-  }
-
-  // The file input only has to be required while no attachment survives the next
-  // save: a persisted attachment (not marked for removal) already satisfies the
-  // field, so keeping `required` on the emptied input would block every re-save.
-  syncRequired() {
-    const hasActiveAttachment = this.hasCurrentContainerTarget &&
-      !this.currentContainerTarget.classList.contains('lato-cms-file-field__item--removing')
-    this.inputTarget.required = this.fieldRequired && !hasActiveAttachment
-  }
-
-  ensureRemoveInput() {
-    if (this.removeInput) return
-
-    const input = document.createElement('input')
-    input.type = 'hidden'
-    input.name = this.inputTarget.name.replace(/\[files\]\[\]$/, '[remove_file_ids][]')
-    input.value = this.currentContainerTarget.dataset.attachmentId
-    this.element.appendChild(input)
-    this.removeInput = input
-  }
-
-  afterSave(event) {
-    if (!event.detail.success) return
-
-    this.inputTarget.value = ''
-    this.removeInput = null
-    const field = this.findSavedField(event.detail.data?.fields || [])
-    if (!field) return
-
-    const attachment = field.attachments[0]
-    this.element.querySelector('[data-lato-cms-image-field-target="currentContainer"]')?.remove()
-    this.newPreviewContainerTarget.classList.add('d-none')
-
-    if (attachment) {
-      this.element.insertBefore(this.buildCurrentContainer(attachment), this.newPreviewContainerTarget)
-    }
-    this.syncRequired()
-  }
-
-  findSavedField(fields) {
-    return fields.find(field => {
-      return field.persisted_field_id === this.fieldId || field.field_id === this.fieldId
-    })
-  }
-
-  buildCurrentContainer(attachment) {
-    const container = document.createElement('div')
-    container.className = 'lato-cms-file-field__item lato-cms-image-field__item'
-    container.dataset.latoCmsImageFieldTarget = 'currentContainer'
-    container.dataset.attachmentId = attachment.id
-    container.innerHTML = `
-      <div class="lato-cms-image-field__preview">
-        <img src="${attachment.url}" class="lato-cms-image-field__thumb" data-lato-cms-image-field-target="currentImage" alt="${this.escapeHtml(attachment.filename)}">
-      </div>
-      <div class="lato-cms-file-field__info">
-        <i class="bi bi-image"></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-image-field#remove">
-        <i class="bi bi-trash"></i>
-      </button>
-      <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>
-        <button type="button" class="btn btn-link btn-sm p-0" data-action="lato-cms-image-field#undo">
-          ${this.undoLabel}
-        </button>
-      </div>
-    `
-    return container
-  }
-
-  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 fieldId() {
-    return this.element.dataset.fieldId
-  }
-
-  get fieldRequired() {
-    return this.element.dataset.fieldRequired === 'true'
-  }
-
-  get removeLabel() {
-    return this.element.dataset.removeLabel || 'Remove'
-  }
-
-  get removePendingLabel() {
-    return this.element.dataset.removePendingLabel || 'Image will be removed on save'
-  }
-
-  get undoLabel() {
-    return this.element.dataset.undoLabel || 'Undo'
-  }
-}