lato_cms 3.0.1 → 3.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce57b3c62b4c5ad59c91a5ec2f01e0eb958bfd5244097e2df0b7210f625e1a0e
-  data.tar.gz: b6304761ec5116b821b75660140fdab9002a6a8e13b68923e0df77ace2fb53d0
+  metadata.gz: 527556e5bf27156bab801e7f0c23c53f9ac9e0565d051da5a0fa1c9500954357
+  data.tar.gz: dfcbcca5925d763f06d2043e497e128d84d3fcd200059990f9cb8fc1718699cc
 SHA512:
-  metadata.gz: 997c72993680123c414c978e5291ffb511f7c7b19f728c23aa8535e84c226002ee7a2a950e07513f48b7840a79db55ee0c7ef9f0319e1dd2f62f44a70c957e51
-  data.tar.gz: a11ae95caf80c3d4ceacb798f5515da2ca6f0448d1f1c859d8ed5819112adde51b5035e829f03d6791c7308b229a3880d83d09bc30fc74df216035f58f102422
+  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

@@ -8,6 +8,15 @@ export default class extends Controller {
   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() {
@@ -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/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;

data/app/controllers/lato_cms/pages_controller.rb

@@ -90,7 +90,7 @@ module LatoCms
       respond_to do |format|
         if errors.empty?
           format.html { redirect_to lato_cms.pages_show_path(@page), notice: t('lato_cms.fields_saved') }
-          format.json { render json: { message: t('lato_cms.fields_saved') } }
+          format.json { render json: { message: t('lato_cms.fields_saved'), fields: @page.fields.reload.map(&:as_json) } }
         else
           error_messages = errors.map { |e| "#{e[:field_id]}: #{e[:errors].join(', ')}" }.join('; ')
           format.html { redirect_to lato_cms.pages_show_path(@page), alert: error_messages }
@@ -193,10 +193,12 @@ module LatoCms
 
     def assign_field_value(field, field_type, field_data)
       case field_type
-      when 'file', 'image'
+      when 'file'
         field.save if field.new_record?
-        attach_field_files(field, field_data)
-        remove_field_files(field, field_data)
+        assign_file_field_files(field, field_data)
+      when 'image'
+        field.save if field.new_record?
+        replace_field_image(field, field_data)
       when 'gallery'
         field.save if field.new_record?
         attach_field_files(field, field_data)
@@ -219,6 +221,19 @@ module LatoCms
       Array(field_data[:files]).compact.each { |file| field.files.attach(file) }
     end
 
+    def assign_file_field_files(field, field_data)
+      if field.field_settings['multiple'] != true && field_data[:files].present?
+        new_file = Array(field_data[:files]).compact.first
+        return unless new_file
+
+        field.files.each(&:purge)
+        field.files.attach(new_file)
+      else
+        attach_field_files(field, field_data)
+        remove_field_files(field, field_data)
+      end
+    end
+
     def remove_field_files(field, field_data)
       return unless field_data[:remove_file_ids].present?
 
@@ -227,6 +242,18 @@ module LatoCms
       end
     end
 
+    def replace_field_image(field, field_data)
+      if field_data[:files].present?
+        new_file = Array(field_data[:files]).compact.first
+        return unless new_file
+
+        field.files.each(&:purge)
+        field.files.attach(new_file)
+      else
+        remove_field_files(field, field_data)
+      end
+    end
+
     def create_params
       params.require(:page).permit(:title, :locale)
     end

data/app/models/lato_cms/page_field.rb

@@ -78,6 +78,7 @@ module LatoCms
     def as_json(_options = {})
       result = {
         id: id,
+        persisted_field_id: field_id,
         field_id: base_field_id,
         field_type: field_type,
         field_name: field_name,
@@ -87,7 +88,9 @@ module LatoCms
       }
 
       case field_type
-      when 'file', 'image'
+      when 'file'
+        result[:attachments] = files.map { |f| attachment_as_json(f) }
+      when 'image'
         attached = files.first
         result[:attachments] = attached ? [attachment_as_json(attached)] : []
       when 'gallery'
@@ -109,6 +112,7 @@ module LatoCms
         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)
       }
     end

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

@@ -1,7 +1,7 @@
 <% label = field_config['name'] || field_id.humanize %>
 <% required = field_config['required'] == true %>
 <% settings = field_config['settings'] || {} %>
-<% multiple = settings['multiple'] != false %>
+<% multiple = settings['multiple'] == true %>
 <% accept = settings['accept'] %>
 <% files_input_name = lato_cms_field_input_name(field_id, 'files', input_name_prefix: local_assigns[:input_name_prefix], multiple: true) %>
 <% remove_input_name = lato_cms_field_input_name(field_id, 'remove_file_ids', input_name_prefix: local_assigns[:input_name_prefix], multiple: true) %>
@@ -11,22 +11,44 @@
   <%= label %><%= ' *' if required %>
 </label>
 
-<% if page_field&.files&.attached? %>
-  <div class="mb-2">
+<div data-controller="lato-cms-file-field"
+     data-field-id="<%= field_id %>"
+     data-lato-cms-file-field-multiple-value="<%= multiple %>"
+     data-new-badge-label="<%= t('lato_cms.field_file_new_badge') %>"
+     data-remove-label="<%= t('lato_cms.field_file_remove') %>"
+     data-remove-pending-label="<%= t('lato_cms.field_file_remove_pending') %>"
+     data-undo-label="<%= t('lato_cms.field_file_remove_undo') %>">
+  <div class="mb-2" data-lato-cms-file-field-target="list">
+  <% if page_field&.files&.attached? %>
     <% page_field.files.each do |file| %>
-      <div class="form-check mb-1 p-2 ps-4 bg-light rounded">
-        <input type="checkbox" class="form-check-input" name="<%= remove_input_name %>" value="<%= file.id %>" id="remove_file_<%= file.id %>">
-        <label class="form-check-label small" for="remove_file_<%= file.id %>">
-          <i class="bi bi-paperclip me-1"></i><%= file.blob.filename %> (<%= number_to_human_size(file.blob.byte_size) %>) — <span class="text-danger"><%= t('lato_cms.field_file_remove') %></span>
-        </label>
+      <div class="lato-cms-file-field__item" data-lato-cms-file-field-target="item" data-attachment-id="<%= file.id %>">
+        <div class="lato-cms-file-field__info">
+          <i class="bi bi-paperclip"></i>
+          <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>
+        <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><%= t('lato_cms.field_file_remove_pending') %>
+          </span>
+          <button type="button" class="btn btn-link btn-sm p-0" data-action="lato-cms-file-field#undo">
+            <%= t('lato_cms.field_file_remove_undo') %>
+          </button>
+        </div>
       </div>
     <% end %>
+  <% end %>
   </div>
-<% end %>
 
-<input type="file"
-  class="form-control"
-  name="<%= files_input_name %>"
-  id="<%= input_id %>"
-  <%= 'multiple' if multiple %>
-  <% if accept %>accept="<%= accept %>"<% end %>>
+  <input type="file"
+    class="form-control"
+    name="<%= files_input_name %>"
+    id="<%= input_id %>"
+    data-lato-cms-file-field-target="input"
+    data-action="change->lato-cms-file-field#addFiles"
+    <%= 'multiple' if multiple %>
+    <% if accept %>accept="<%= accept %>"<% end %>>
+</div>

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

@@ -11,24 +11,49 @@
   <%= label %><%= ' *' if required %>
 </label>
 
-<div data-controller="lato-cms-image-field">
+<div data-controller="lato-cms-image-field"
+     data-field-id="<%= field_id %>"
+     data-new-badge-label="<%= t('lato_cms.field_image_new_badge') %>"
+     data-remove-label="<%= t('lato_cms.field_image_remove') %>"
+     data-remove-pending-label="<%= t('lato_cms.field_image_remove_pending') %>"
+     data-undo-label="<%= t('lato_cms.field_file_remove_undo') %>">
   <% if current_file %>
-    <div class="mb-2" data-lato-cms-image-field-target="currentContainer">
-      <div class="position-relative d-inline-block">
-        <img src="<%= lato_cms_attachment_path(current_file) %>" class="img-thumbnail lato-cms-image-field__thumb" data-lato-cms-image-field-target="currentImage" alt="<%= current_file.filename %>">
-        <label class="lato-cms-image-field__remove-btn" title="<%= t('lato_cms.field_image_remove') %>">
-          <input type="checkbox" class="d-none" name="<%= remove_input_name %>" value="<%= current_file.id %>" data-lato-cms-image-field-target="removeCheck" data-action="change->lato-cms-image-field#toggleRemove">
-          <i class="bi bi-x-lg"></i>
-        </label>
+    <div class="lato-cms-file-field__item lato-cms-image-field__item" data-lato-cms-image-field-target="currentContainer" data-attachment-id="<%= current_file.id %>">
+      <div class="lato-cms-image-field__preview">
+        <img src="<%= lato_cms_attachment_path(current_file) %>" class="lato-cms-image-field__thumb" data-lato-cms-image-field-target="currentImage" alt="<%= current_file.filename %>">
+      </div>
+      <div class="lato-cms-file-field__info">
+        <i class="bi bi-image"></i>
+        <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>
+      <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><%= t('lato_cms.field_image_remove_pending') %>
+        </span>
+        <button type="button" class="btn btn-link btn-sm p-0" data-action="lato-cms-image-field#undo">
+          <%= t('lato_cms.field_file_remove_undo') %>
+        </button>
       </div>
     </div>
   <% end %>
 
-  <div class="mb-2 d-none" data-lato-cms-image-field-target="newPreviewContainer">
-    <div class="position-relative d-inline-block">
-      <img src="" class="img-thumbnail lato-cms-image-field__thumb" data-lato-cms-image-field-target="newPreview" alt="">
-      <span class="badge bg-success lato-cms-image-field__new-badge"><%= t('lato_cms.field_image_new_badge') %></span>
+  <div class="lato-cms-file-field__item lato-cms-file-field__item--new lato-cms-image-field__item d-none" data-lato-cms-image-field-target="newPreviewContainer">
+    <div class="lato-cms-image-field__preview">
+      <img src="" class="lato-cms-image-field__thumb" data-lato-cms-image-field-target="newPreview" alt="">
+    </div>
+    <div class="lato-cms-file-field__info">
+      <i class="bi bi-image"></i>
+      <span data-lato-cms-image-field-target="newPreviewName"></span>
+      <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>
   </div>
 
   <input type="file"

data/config/locales/en.yml

@@ -53,10 +53,14 @@ en:
     fields_component_missing_alert_html: "Component <strong>%{component_id}</strong> not found. The component configuration may have been removed."
     fields_previously_saved_data: "Previously saved data:"
     field_file_remove: Remove
+    field_file_remove_pending: File will be removed on save
+    field_file_remove_undo: Undo
+    field_file_new_badge: New
     field_gallery_empty: No images yet. Add images below.
     field_gallery_add_images: Add images
     field_gallery_drag_to_reorder: Drag to reorder
     field_image_remove: Remove
+    field_image_remove_pending: Image will be removed on save
     field_image_new_badge: New
     field_multiselect_hint: Hold Ctrl/Cmd to select multiple
     field_select_placeholder: "-- Select --"

data/config/locales/it.yml

@@ -53,10 +53,14 @@ it:
     fields_component_missing_alert_html: "Componente <strong>%{component_id}</strong> non trovato. La configurazione del componente potrebbe essere stata rimossa."
     fields_previously_saved_data: "Dati salvati in precedenza:"
     field_file_remove: Rimuovi
+    field_file_remove_pending: Il file verra rimosso al salvataggio
+    field_file_remove_undo: Annulla
+    field_file_new_badge: Nuovo
     field_gallery_empty: Nessuna immagine presente. Aggiungi immagini qui sotto.
     field_gallery_add_images: Aggiungi immagini
     field_gallery_drag_to_reorder: Trascina per riordinare
     field_image_remove: Rimuovi
+    field_image_remove_pending: L'immagine verra rimossa al salvataggio
     field_image_new_badge: Nuovo
     field_multiselect_hint: Tieni premuto Ctrl/Cmd per selezionare piu opzioni
     field_select_placeholder: "-- Seleziona --"

data/lib/lato_cms/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.0.1
+  version: 3.0.2
 platform: ruby
 authors:
 - Gregorio Galante
@@ -82,6 +82,7 @@ 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