lato_cms 3.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 508aae768bf2679d04559b46cf39e353f3279e959e527045586f042c80dfb0ed
+  data.tar.gz: 8e1e8b0e8a45f226ba09d5c32bc183ace111b5e2029c7c62ea5562fd4ac43688
+SHA512:
+  metadata.gz: e7d17de34c1292366c754ff952e4197f40a4107aa7137cae4ae6f587a3411c78be834bba87133102872955539036e2cefd90261728fcbc874755395abe9d6a27
+  data.tar.gz: 8cc1b2d80143483f2ef2f2204b18d63f0f96434a4fc24a0f762aa1e8adc7693137346273aac1b27e6c3306f790a51da90803c437a55cc6c4961457c20bf1ab36

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Gregorio Galante
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,67 @@
+# Lato CMS
+
+Manage application content on Lato projects.
+
+## Installation
+Add required dependencies to your application's Gemfile:
+
+```ruby
+# Use lato as application panel
+gem "lato"
+gem "lato_cms"
+```
+
+Install gem and run required tasks:
+
+```bash
+$ bundle
+$ rails lato_cms:install:application
+$ rails lato_cms:install:migrations
+$ rails db:migrate
+```
+
+Mount lato users routes on the **config/routes.rb** file:
+
+```ruby
+Rails.application.routes.draw do
+  mount LatoCms::Engine => "/lato-users"
+  # ....
+end
+```
+
+Import Lato Scss on **app/assets/stylesheets/application.scss** file:
+```scss
+@import 'lato_cms/application';
+
+// ....
+```
+
+Import Lato Users Js on **app/javascript/application.js** file:
+```js
+import "lato_cms/application";
+
+// ....
+```
+
+## Development
+
+Clone repository, install dependencies, run migrations and start:
+
+```shell
+$ git clone https://github.com/Lato-GAM/lato_cms
+$ cd lato_cms
+$ bundle
+$ rails db:migrate
+$ rails db:seed
+$ foreman start -f Procfile.dev
+```
+
+## Publish
+
+```shell
+$ ruby ./bin/publish.rb
+```
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+require "bundler/gem_tasks"

data/app/assets/config/lato_cms_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../stylesheets/lato_cms .css
+//= link_tree ../javascripts/lato_cms .js

data/app/assets/javascripts/lato_cms/application.js

@@ -0,0 +1 @@
+console.log("Lato Users JS loaded");

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

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["row", "previewCol", "editorCol", "toggleBtn", "collapseBtn", "reopenBtn"]
+
+  isActive = false
+  isSidebarOpen = true
+
+  // ─── Toggle advanced mode ────────────────────────────────────────────────────
+
+  toggle() {
+    this.isActive ? this.deactivate() : this.activate()
+  }
+
+  activate() {
+    this.isActive = true
+    this.isSidebarOpen = true
+
+    this.rowTarget.classList.add('lato-cms-advanced-editor__row--active')
+    document.body.classList.add('lato-cms-advanced-editor--open')
+
+    this.toggleBtnTarget.title = 'Exit advanced editor'
+    this.toggleBtnTarget.querySelector('i').className = 'bi bi-fullscreen-exit'
+    this.collapseBtnTarget.classList.remove('d-none')
+    this.editorColTarget.classList.remove('lato-cms-advanced-editor__editor-col--collapsed')
+    this.reopenBtnTarget.hidden = true
+
+    this._escHandler = (e) => { if (e.key === 'Escape') this.deactivate() }
+    document.addEventListener('keydown', this._escHandler)
+  }
+
+  deactivate() {
+    this.isActive = false
+    this.isSidebarOpen = true
+
+    this.rowTarget.classList.remove('lato-cms-advanced-editor__row--active')
+    document.body.classList.remove('lato-cms-advanced-editor--open')
+
+    this.toggleBtnTarget.title = 'Advanced editor'
+    this.toggleBtnTarget.querySelector('i').className = 'bi bi-fullscreen'
+    this.collapseBtnTarget.classList.add('d-none')
+    this.editorColTarget.classList.remove('lato-cms-advanced-editor__editor-col--collapsed')
+    this.reopenBtnTarget.hidden = true
+
+    document.removeEventListener('keydown', this._escHandler)
+  }
+
+  // ─── Toggle sidebar within advanced mode ─────────────────────────────────────
+
+  toggleSidebar() {
+    if (!this.isActive) return
+
+    this.isSidebarOpen = !this.isSidebarOpen
+    this.editorColTarget.classList.toggle('lato-cms-advanced-editor__editor-col--collapsed', !this.isSidebarOpen)
+    this.reopenBtnTarget.hidden = this.isSidebarOpen
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "hex"]
+
+  update() {
+    this.hexTarget.textContent = this.inputTarget.value.toUpperCase()
+  }
+}

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

@@ -0,0 +1,60 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect () {
+    this.handleShown = this.handleShown.bind(this)
+    this.handleHidden = this.handleHidden.bind(this)
+
+    this.element.addEventListener('shown.bs.collapse', this.handleShown)
+    this.element.addEventListener('hidden.bs.collapse', this.handleHidden)
+
+    window.requestAnimationFrame(() => {
+      this.broadcastInitiallyOpenComponent()
+    })
+  }
+
+  disconnect () {
+    this.element.removeEventListener('shown.bs.collapse', this.handleShown)
+    this.element.removeEventListener('hidden.bs.collapse', this.handleHidden)
+  }
+
+  handleShown (event) {
+    this.broadcastForCollapse(event.target)
+  }
+
+  handleHidden () {
+    this.broadcastClosedComponent()
+  }
+
+  broadcastInitiallyOpenComponent () {
+    const openCollapse = this.element.querySelector('.accordion-collapse.show')
+    if (!openCollapse) return
+
+    this.broadcastForCollapse(openCollapse)
+  }
+
+  broadcastForCollapse (collapseElement) {
+    const templateComponentId = collapseElement.dataset.templateComponentId
+    const componentId = collapseElement.dataset.componentId
+
+    if (!templateComponentId) return
+
+    document.dispatchEvent(new CustomEvent('lato-cms:component-change', {
+      detail: {
+        id: templateComponentId,
+        templateComponentId,
+        componentId
+      }
+    }))
+  }
+
+  broadcastClosedComponent () {
+    document.dispatchEvent(new CustomEvent('lato-cms:component-change', {
+      detail: {
+        id: null,
+        templateComponentId: null,
+        componentId: null
+      }
+    }))
+  }
+}

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

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["submitBtn", "status"]
+
+  connect() {
+    this.element.addEventListener("submit", this.handleSubmit.bind(this))
+  }
+
+  async handleSubmit(event) {
+    event.preventDefault()
+
+    const form = this.element
+    const submitBtn = this.submitBtnTarget
+    const originalHTML = submitBtn.innerHTML
+
+    submitBtn.disabled = true
+    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Saving...'
+
+    try {
+      const formData = new FormData(form)
+      const response = await fetch(form.action, {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'Accept': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
+        }
+      })
+
+      const data = await response.json()
+
+      if (response.ok) {
+        this.showStatus('Fields saved successfully', 'success')
+        this.refreshPreview()
+      } else {
+        const errorMsg = data.errors?.map(e => `${e.field_id}: ${e.errors.join(', ')}`).join('; ') || 'Failed to save fields'
+        this.showStatus(errorMsg, 'danger')
+      }
+    } catch (error) {
+      this.showStatus('An error occurred while saving', 'danger')
+    } finally {
+      submitBtn.disabled = false
+      submitBtn.innerHTML = originalHTML
+    }
+  }
+
+  refreshPreview() {
+    const iframe = document.querySelector('[data-lato-cms-page-preview-target="iframe"]')
+    if (iframe && iframe.src) {
+      const url = new URL(iframe.src)
+      url.searchParams.set('_t', Date.now())
+      iframe.src = url.toString()
+      this.broadcastOpenComponent()
+    }
+  }
+
+  broadcastOpenComponent() {
+    const openCollapse = document.querySelector('#components-accordion .accordion-collapse.show')
+    if (!openCollapse) return
+
+    const templateComponentId = openCollapse.dataset.templateComponentId
+    if (!templateComponentId) return
+
+    document.dispatchEvent(new CustomEvent('lato-cms:component-change', {
+      detail: {
+        id: templateComponentId,
+        templateComponentId,
+        componentId: openCollapse.dataset.componentId
+      }
+    }))
+  }
+
+  showStatus(message, type) {
+    if (!this.hasStatusTarget) return
+
+    clearTimeout(this._statusTimeout)
+
+    const isSuccess = type === 'success'
+    const icon = isSuccess ? 'bi-check-circle-fill' : 'bi-exclamation-circle-fill'
+    const color = isSuccess ? 'text-success' : 'text-danger'
+
+    this.statusTarget.innerHTML = `
+      <span class="d-inline-flex align-items-center gap-1 small ${color} lato-cms-component-form__status">
+        <i class="bi ${icon}"></i>${message}
+      </span>`
+
+    if (isSuccess) {
+      this._statusTimeout = setTimeout(() => {
+        const msg = this.statusTarget.querySelector('.lato-cms-component-form__status')
+        if (msg) msg.classList.add('lato-cms-component-form__status--fade')
+        setTimeout(() => { this.statusTarget.innerHTML = '' }, 400)
+      }, 3000)
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ['checkbox', 'stateLabel', 'stateIcon', 'stateWrapper', 'fieldsContainer', 'status']
+  static values = {
+    activeLabel: String,
+    inactiveLabel: String,
+    savingLabel: String,
+    savedLabel: String,
+    errorLabel: String
+  }
+
+  async toggle (event) {
+    event.preventDefault()
+
+    const form = event.currentTarget
+    const formData = new FormData(form)
+    const checkbox = this.checkboxTarget
+    const enabled = checkbox.checked
+
+    checkbox.disabled = true
+    if (this.hasStatusTarget) {
+      this.statusTarget.innerHTML = ''
+    }
+
+    try {
+      const response = await fetch(form.action, {
+        method: form.method.toUpperCase(),
+        body: formData,
+        headers: {
+          Accept: 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.content
+        }
+      })
+
+      if (!response.ok) {
+        throw new Error('toggle failed')
+      }
+
+      this.updateVisualState(enabled)
+      if (this.hasStatusTarget) {
+        this.statusTarget.innerHTML = ''
+      }
+    } catch (_error) {
+      checkbox.checked = !enabled
+      this.updateVisualState(!enabled)
+      this.showStatus(this.errorLabelValue, 'danger')
+    } finally {
+      checkbox.disabled = false
+    }
+  }
+
+  updateVisualState (enabled) {
+    if (this.hasStateLabelTarget) {
+      this.stateLabelTarget.textContent = enabled ? this.activeLabelValue : this.inactiveLabelValue
+    }
+
+    if (this.hasStateIconTarget) {
+      this.stateIconTarget.className = enabled ? 'bi bi-eye' : 'bi bi-eye-slash'
+    }
+
+    if (this.hasStateWrapperTarget) {
+      this.stateWrapperTarget.classList.toggle('text-success', enabled)
+      this.stateWrapperTarget.classList.toggle('text-muted', !enabled)
+    }
+
+    const fieldsContainer = this.hasFieldsContainerTarget
+      ? this.fieldsContainerTarget
+      : this.element.querySelector('[data-lato-cms-component-toggle-target="fieldsContainer"]')
+
+    if (fieldsContainer) {
+      fieldsContainer.classList.toggle('d-none', !enabled)
+    }
+  }
+
+  showStatus (message, type) {
+    if (!this.hasStatusTarget) return
+
+    const colorClass = type === 'success' ? 'text-success' : (type === 'danger' ? 'text-danger' : 'text-muted')
+    this.statusTarget.innerHTML = `<span class="small ${colorClass}">${message}</span>`
+
+    if (type === 'success') {
+      clearTimeout(this._statusTimeout)
+      this._statusTimeout = setTimeout(() => {
+        this.statusTarget.innerHTML = ''
+      }, 2000)
+    }
+  }
+}

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

@@ -0,0 +1,136 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["grid", "fileInput", "emptyMsg"]
+  static values = { fieldId: String }
+
+  dragging = null
+  newFileMap = new Map()
+  nextUid = 0
+
+  // ─── 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()
+  }
+
+  // ─── 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 = `fields[${this.fieldIdValue}][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()
+  }
+
+  // ─── 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 = `fields[${this.fieldIdValue}][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)
+  }
+
+  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->gallery-field#onDragStart dragend->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">
+        <i class="bi bi-x-lg"></i>
+      </button>
+    `
+    return div
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "newPreview", "newPreviewContainer", "currentContainer", "currentImage", "removeCheck"]
+
+  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.newPreviewContainerTarget.classList.remove('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)' : ''
+  }
+}

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

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "status"]
+
+  connect() {
+    this.validate()
+  }
+
+  validate() {
+    const value = this.inputTarget.value.trim()
+    if (!value) {
+      this.statusTarget.textContent = ""
+      this.statusTarget.className = "form-text"
+      return
+    }
+
+    try {
+      JSON.parse(value)
+      this.statusTarget.textContent = "Valid JSON"
+      this.statusTarget.className = "form-text text-success"
+    } catch (e) {
+      this.statusTarget.textContent = "Invalid JSON: " + e.message
+      this.statusTarget.className = "form-text text-danger"
+    }
+  }
+}