lato_cms 3.0.0 → 3.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 508aae768bf2679d04559b46cf39e353f3279e959e527045586f042c80dfb0ed
-  data.tar.gz: 8e1e8b0e8a45f226ba09d5c32bc183ace111b5e2029c7c62ea5562fd4ac43688
+  metadata.gz: 527556e5bf27156bab801e7f0c23c53f9ac9e0565d051da5a0fa1c9500954357
+  data.tar.gz: dfcbcca5925d763f06d2043e497e128d84d3fcd200059990f9cb8fc1718699cc
 SHA512:
-  metadata.gz: e7d17de34c1292366c754ff952e4197f40a4107aa7137cae4ae6f587a3411c78be834bba87133102872955539036e2cefd90261728fcbc874755395abe9d6a27
-  data.tar.gz: 8cc1b2d80143483f2ef2f2204b18d63f0f96434a4fc24a0f762aa1e8adc7693137346273aac1b27e6c3306f790a51da90803c437a55cc6c4961457c20bf1ab36
+  metadata.gz: 37384b79131f97266d82434b290a2bdd3ce4b844d1bf9c63bb6363f4877cfa8379ebe1d1fb4ffe2f6bcbc2a00cc69b8e13124b6e9fa9293025ab98606a4690e4
+  data.tar.gz: e9ce262f6bbfc70a07554edba5e18ffe9f1c028250da9f6ac5a5b7962977b2f408222e8fddd2eb949f4d48fb1bf2d319c420b1f76ccf3d0675d6a1e39d80c5bb

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

@@ -32,6 +32,10 @@ export default class extends Controller {
 
       if (response.ok) {
         this.showStatus('Fields saved successfully', 'success')
+        form.dispatchEvent(new CustomEvent('lato-cms:fields-save-success', {
+          bubbles: true,
+          detail: { success: true, data }
+        }))
         this.refreshPreview()
       } else {
         const errorMsg = data.errors?.map(e => `${e.field_id}: ${e.errors.join(', ')}`).join('; ') || 'Failed to save fields'

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

@@ -0,0 +1,203 @@
+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()
+  }
+
+  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()
+      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)
+  }
+
+  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()
+  }
+
+  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="btn btn-sm btn-outline-danger" data-action="lato-cms-file-field#remove">
+        <i class="bi bi-trash me-1"></i>${this.removeLabel}
+      </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())
+      return
+    }
+
+    this.listTarget.innerHTML = ''
+    field.attachments.forEach(attachment => {
+      this.listTarget.appendChild(this.buildExistingItem(attachment))
+    })
+  }
+
+  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="btn btn-sm btn-outline-danger" data-action="lato-cms-file-field#remove">
+        <i class="bi bi-trash me-1"></i>${this.removeLabel}
+      </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
+  }
+}

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

@@ -2,12 +2,21 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["grid", "fileInput", "emptyMsg"]
-  static values = { fieldId: String }
+  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() {
@@ -42,7 +51,7 @@ export default class extends Controller {
     if (attachmentId) {
       const input = document.createElement('input')
       input.type = 'hidden'
-      input.name = `fields[${this.fieldIdValue}][remove_file_ids][]`
+      input.name = `${this.inputNamePrefixValue}[remove_file_ids][]`
       input.value = attachmentId
       this.element.appendChild(input)
     } else if (fileUid) {
@@ -96,7 +105,7 @@ export default class extends Controller {
       if (!id) return
       const input = document.createElement('input')
       input.type = 'hidden'
-      input.name = `fields[${this.fieldIdValue}][order][]`
+      input.name = `${this.inputNamePrefixValue}[order][]`
       input.value = id
       input.setAttribute('data-gallery-order-input', '')
       this.element.appendChild(input)
@@ -124,7 +133,7 @@ export default class extends Controller {
     div.dataset.fileUid = fileUid || ''
     div.draggable = true
     div.className = 'lato-cms-gallery-field__item'
-    div.setAttribute('data-action', 'dragstart->gallery-field#onDragStart dragend->gallery-field#onDragEnd')
+    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">
@@ -133,4 +142,27 @@ export default class extends Controller {
     `
     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()
+  }
+
+  findSavedField(fields) {
+    return fields.find(field => {
+      return field.persisted_field_id === this.fieldIdValue || field.field_id === this.fieldIdValue
+    })
+  }
 }

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

@@ -1,7 +1,16 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["input", "newPreview", "newPreviewContainer", "currentContainer", "currentImage", "removeCheck"]
+  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]
@@ -10,15 +19,135 @@ export default class extends Controller {
     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)
   }
 
-  toggleRemove() {
-    if (!this.hasCurrentImageTarget) return
-    const removing = this.removeCheckTarget.checked
-    this.currentImageTarget.style.opacity = removing ? '0.3' : ''
-    this.currentImageTarget.style.outline = removing ? '2px solid var(--bs-danger)' : ''
+  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-image-field--removing')
+    this.removedNoticeTarget.classList.remove('d-none')
+    this.ensureRemoveInput()
+  }
+
+  undo() {
+    if (!this.hasCurrentContainerTarget) return
+
+    this.currentContainerTarget.classList.remove('lato-cms-image-field--removing')
+    this.removedNoticeTarget.classList.add('d-none')
+    this.removeInput?.remove()
+    this.removeInput = null
+  }
+
+  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)
+    }
+  }
+
+  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="btn btn-sm btn-outline-danger" data-action="lato-cms-image-field#remove">
+        <i class="bi bi-trash me-1"></i>${this.removeLabel}
+      </button>
+      <div class="lato-cms-image-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 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'
   }
 }

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

@@ -0,0 +1,33 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['items', 'template', 'item', 'position', 'orderInput']
+
+  add () {
+    const itemId = window.crypto.randomUUID()
+    const html = this.templateTarget.innerHTML
+      .replaceAll('NEW_RECORD', itemId)
+      .replaceAll('NEW_INDEX', this.itemTargets.length.toString())
+
+    this.itemsTarget.insertAdjacentHTML('beforeend', html)
+    this.refresh()
+  }
+
+  remove (event) {
+    const item = event.currentTarget.closest('[data-lato-cms-repeater-target="item"]')
+    if (!item) return
+
+    item.remove()
+    this.refresh()
+  }
+
+  refresh () {
+    this.itemTargets.forEach((item, index) => {
+      const position = item.querySelector('[data-lato-cms-repeater-target="position"]')
+      if (position) position.textContent = index + 1
+
+      const orderInput = item.querySelector('[data-lato-cms-repeater-target="orderInput"]')
+      if (orderInput) orderInput.value = item.dataset.repeaterItemId
+    })
+  }
+}

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

@@ -142,13 +142,99 @@ body.lato-cms-advanced-editor--open {
   }
 }
 
+// ── File field ─────────────────────────────────────────────────────────────────
+.lato-cms-file-field__item {
+  align-items: center;
+  background: #fff;
+  border: 1px solid rgba(33, 37, 41, 0.12);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(33, 37, 41, 0.04);
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  margin-bottom: 0.6rem;
+  min-height: 56px;
+  padding: 0.65rem 0.75rem;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+
+  &:hover {
+    border-color: rgba(13, 110, 253, 0.25);
+    box-shadow: 0 3px 10px rgba(33, 37, 41, 0.07);
+  }
+}
+
+.lato-cms-file-field__info {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  min-width: 0;
+  flex: 1;
+
+  > span:first-of-type {
+    overflow-wrap: anywhere;
+  }
+
+  > .bi {
+    color: var(--bs-secondary);
+    font-size: 1rem;
+  }
+}
+
+.lato-cms-file-field__removed {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.lato-cms-file-field__item--removing {
+  background: rgba(220, 53, 69, 0.06);
+  border-color: rgba(220, 53, 69, 0.35);
+  box-shadow: none;
+
+  .lato-cms-file-field__info,
+  .lato-cms-image-field__preview,
+  > .btn {
+    display: none;
+  }
+}
+
+.lato-cms-file-field__item--new {
+  background: rgba(25, 135, 84, 0.04);
+  border-color: rgba(25, 135, 84, 0.45);
+
+  .badge {
+    font-weight: 500;
+  }
+}
+
 // ── Image field ────────────────────────────────────────────────────────────────
+.lato-cms-image-field__item {
+  align-items: stretch;
+}
+
+.lato-cms-image-field__preview {
+  align-items: center;
+  align-self: center;
+  background: var(--bs-light);
+  border: 1px solid rgba(33, 37, 41, 0.08);
+  border-radius: 6px;
+  display: flex;
+  flex: 0 0 auto;
+  height: 64px;
+  justify-content: center;
+  overflow: hidden;
+  width: 64px;
+}
+
 .lato-cms-image-field__thumb {
-  max-width: 200px;
-  max-height: 200px;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
   display: block;
-  transition: opacity 0.15s, outline 0.15s;
+  transition: opacity 0.15s, filter 0.15s;
 }
 
 .lato-cms-image-field__remove-btn {
@@ -158,6 +244,7 @@ body.lato-cms-advanced-editor--open {
   width: 22px;
   height: 22px;
   border-radius: 50%;
+  border: 0;
   background: rgba(220, 53, 69, 0.85);
   color: #fff;
   display: flex;
@@ -172,6 +259,23 @@ 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;