maglevcms 2.1.0 → 3.0.0.beta2

data/app/assets/javascripts/maglev/editor/controllers/app/page_preview_controller.js

@@ -0,0 +1,163 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["loading", "iframeWrapper", "iframe"]
+  
+  connect() {
+    this.setupTransformations()
+    this.numberOfSections = null
+  }
+
+  disconnect() {
+    this.teardownTransformations()
+  }
+
+  // --- device management ---
+  changeDevice(event) {
+    this.element.dataset.device = event.detail.device
+    this.calculateTransformations()
+  }
+
+  isTabletDevice() {
+    return this.element.dataset.device === 'tablet'
+  }
+
+  isMobileDevice() {
+    return this.element.dataset.device === 'mobile'
+  }
+
+  // called when the user is being redirected to a new page in the editor (another Maglev page OR in a different locale) 
+  // It displays the splash screen (the loading message). Required for a good UX.
+  startLoading() {
+    this.element.classList.remove('is-loaded')   
+    this.element.classList.remove('is-empty') 
+  }
+
+  // called when the Maglev client JS lib has been fully loaded on the iframe
+  clientReady(event) {
+    const { numberOfSections } = event.detail
+
+    this.element.classList.add('is-loaded')
+    this.numberOfSections = numberOfSections    
+    this.updateEmptyMessageState()
+  }
+
+  removeEmptyMessage() {
+    this.numberOfSections = (this.numberOfSections ?? 0) + 1
+    this.updateEmptyMessageState()
+  }
+
+  // called when the user navigates to a new page in the editor (another Maglev page OR in a different locale) 
+  detectUrlChange() {
+    const currentPath = new URL(this.iframeTarget.src).pathname
+    const newPath = document.querySelector('meta[name=page-preview-url]').content
+
+    if (currentPath !== newPath) {
+      this.startLoading()
+      this.iframeTarget.src = newPath
+    } else {
+      this.element.classList.add('is-loaded')
+      this.updateEmptyMessageState()
+    }
+  }
+
+  updateEmptyMessageState() {
+    if (this.numberOfSections === 0) {
+      this.element.classList.add('is-empty')
+    } else {
+      this.element.classList.remove('is-empty')
+    }
+  }
+
+  // --- Transformation utilities ---
+
+  setupTransformations() {
+    this.calculateTransformations = this.calculateTransformations.bind(this)
+    this.ro = new ResizeObserver(this.calculateTransformations)
+    
+    const sidebar = this.appLayoutSidebar
+    const pageLayout = document.querySelector('#page-layout')
+    if (sidebar) this.ro.observe(this.appLayoutSidebar())
+    if (pageLayout) this.ro.observe(pageLayout)
+    this.ro.observe(document.documentElement)
+
+    // Recompute on page layout toggles / VT renders
+    addEventListener("turbo:render", this.calculateTransformations)
+    addEventListener("turbo:before-render", this.calculateTransformations)
+
+    this.calculateTransformations()
+  }
+
+  teardownTransformations() {
+    this.ro?.disconnect()
+    removeEventListener("turbo:render", this.calculateTransformations)
+    removeEventListener("turbo:before-render", this.calculateTransformations)
+  }
+
+  expandedPageLayout() {
+    return document.querySelector('#page-layout[data-expanded]')
+  }
+
+  appLayoutSidebar() {
+    return document.querySelector('#app-layout-sidebar')
+  }
+
+  previewMaxWidth() {
+    return window.innerWidth - (this.expandedPageLayout()?.offsetWidth || 0)
+  }
+
+  appLayoutSidebarWidth() {
+    return this.appLayoutSidebar()?.offsetWidth || 0
+  }
+
+  hasExpandedPageLayout() {
+    return !!this.expandedPageLayout()
+  }
+
+  hasEnoughWidthForTablet() {
+    return this.isTabletDevice() && this.previewMaxWidth() > 1024
+  }
+  
+  hasEnoughWidthForMobile() {
+    return this.isMobileDevice() && this.previewMaxWidth() > 375
+  }
+
+  calculateTransformations() {
+    const scaleRatio = this.calculateScaleRatio()
+
+    // console.log('calculateTransformations 🍔', this.calculateTransformX(), this.calculateScaleRatio())
+    document.body.style.setProperty('--page-preview-transform-x', `${this.calculateTransformX()}px`)
+    document.body.style.setProperty('--page-preview-scale-ratio', `${scaleRatio}`)
+    
+    if (this.expandedPageLayout() && scaleRatio === 1) {
+      document.body.style.setProperty('--page-preview-width', `${this.previewMaxWidth()}px`)
+    } else {
+      document.body.style.setProperty('--page-preview-width', '100%')
+    }
+
+    // mainly used for the section toolbars
+    this.dispatch('scale-ratio-updated', { detail: {  value: scaleRatio } })
+  }
+
+  calculateTransformX() {
+    if (!this.hasExpandedPageLayout()) return 0
+    return this.expandedPageLayout().offsetWidth - this.appLayoutSidebarWidth()
+  }
+
+  calculateScaleRatio() {
+    if (!this.mustApplyScale()) return 1
+    return this.previewMaxWidth() / (window.innerWidth - this.appLayoutSidebarWidth())
+  }
+
+  mustApplyScale() {
+    if (!this.hasExpandedPageLayout()) return false
+
+     // case: there is enough width for the tablet viewport, no need to scale down
+     if (this.hasEnoughWidthForTablet()) return false
+
+     // case: there is enough width for the mobile viewport, no need to scale down
+     if (this.hasEnoughWidthForMobile()) return false
+
+    return true
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/app/preview_notification_center_controller.js

@@ -0,0 +1,151 @@
+import { Controller } from "@hotwired/stimulus"
+import { isSamePath } from"maglev-controllers/utils"
+
+export default class extends Controller { 
+  static targets = ["iframe"]
+  static values = {
+    sectionPath: String,
+    sectionBlockPath: String
+  }
+
+  connect() {
+    this.isClientReady = false
+    this.clientReadyCallbacks = []    
+  }
+
+  // called when the iframe DOM is loaded
+  sendConfig(event) {
+    const { primaryColor, stickySectionIds } = event.params
+    this.postMessage('config', {
+      primaryColor,
+      stickySectionIds,
+    })
+  }
+
+  // called when the Maglev client JS lib has been fully loaded on the iframe
+  clientReady(event) {
+    this.isClientReady = true
+    this.processClientReadyCallbacks()
+  }
+
+  // called by the iframe when the user clicks on a setting of a section or a section block
+  editSection(event) {
+    console.log('[PreviewNotificationCenter][editSection]', event.detail)
+    const { sectionId, sectionBlockId, settingId } = event.detail
+    const pathTemplate = sectionBlockId ? this.sectionBlockPathValue : this.sectionPathValue
+    const path = `${pathTemplate}#${settingId}`.replace(':section_id', sectionId).replace(':section_block_id', sectionBlockId)
+    
+    if (isSamePath(path)) {
+      window.location.hash = settingId
+    } else {
+      Turbo.visit(path)
+    }
+  }
+
+  editSectionBlock(event) {
+    console.log('[PreviewNotificationCenter][editSectionBlock]', event.detail)
+    const { sectionId, sectionBlockId } = event.detail
+    const pathTemplate = this.sectionBlockPathValue
+    const path = `${pathTemplate}#${sectionBlockId}`.replace(':section_id', sectionId).replace(':section_block_id', sectionBlockId)
+    Turbo.visit(path)
+  }
+  
+  // === SECTIONS ===
+
+  addSection(event) {
+    console.log('addSection', event.detail.fetchResponse.response.headers.get('X-Section-Id'), event.detail.fetchResponse.response.headers.get('X-Section-Position'))
+    const sectionId = event.detail.fetchResponse.response.headers.get('X-Section-Id')
+    const position = event.detail.fetchResponse.response.headers.get('X-Section-Position')
+    this.postMessage('section:add', { sectionId, insertAt: parseInt(position) })
+  }
+
+  deleteSection(event) {
+    console.log('deleteSection', event.params)
+    const { sectionId } = event.params
+    this.postMessage('section:remove', { sectionId  })
+  }
+
+  moveSection(event) {
+    console.log('moveSection 💨💨💨', event.detail)
+    const { oldIndex, newIndex } = event.detail
+    this.postMessage('section:move', { oldIndex, newIndex })
+  }
+
+  updateSection(event) {
+    console.log('updateSection 🧼🧼🧼', event.detail)
+    const { sectionId  } = event.detail
+    this.postMessage('section:update', { sectionId })
+  }
+
+  checkSectionLockVersion(event) {
+    console.log('checkSectionLockVersion 🕵🏻‍♂️🕵🏻‍♂️🕵🏻‍♂️', event)
+    const { sectionId, lockVersion } = event.detail
+    this.postMessage('section:checkLockVersion', { sectionId, lockVersion })
+  }
+
+  pingSection(event) {
+    console.log('pingSection 🏓🏓🏓', event.detail, this.isClientReady)
+    const { sectionId } = event.detail
+    this.postMessageWhenClientReady('section:ping', { sectionId })
+  }
+  
+  // === SECTION BLOCKS ===
+
+  addSectionBlock(event) {
+    console.log('addSectionBlock ➕➕➕', event.params)
+    const { sectionId } = event.params
+    this.postMessage('block:add', { sectionId })
+  }
+
+  deleteSectionBlock(event) {
+    console.log('deleteSectionBlock 🗑️🗑️🗑️', event.params)
+    const { sectionId, sectionBlockId } = event.params
+    this.postMessage('block:remove', { sectionId, sectionBlockId })
+  }
+
+  moveSectionBlocks(event) {
+    console.log('moveSectionBlocks 💨💨💨', event.params)
+    const sectionId = event.params.sectionId
+    const { oldItemId: sectionBlockId, newItemId: targetSectionBlockId, direction } = event.detail    
+    this.postMessage('block:move', { sectionId, sectionBlockId, targetSectionBlockId, direction })
+  }
+
+  pingSectionBlock(event) {
+    console.log('pingSectionBlock 🏓🏓🏓', event.detail)
+    const { sectionBlockId } = event.detail
+    this.postMessageWhenClientReady('block:ping', { sectionBlockId })
+  }
+
+  // === SETTINGS ===
+
+  updateSetting(event) {
+    const { sourceId, change } = event.detail
+    this.postMessage('setting:update', { sourceId, change })
+  }
+
+  // === STYLE ===
+
+  updateStyle(event) {
+    const { style } = event.detail
+    this.postMessage('style:update', { style })
+  }
+
+  // === UTILS ===
+
+  postMessage(type, data) {
+    this.iframeTarget.contentWindow.postMessage({ type: `maglev:${type}`, ...(data || {}) }, '*')
+  }
+
+  postMessageWhenClientReady(type, data) {
+    if (this.isClientReady) {
+      this.postMessage(type, data)
+    } else {
+      this.clientReadyCallbacks.push({ type, data })
+    }
+  }
+
+  processClientReadyCallbacks() {
+    this.clientReadyCallbacks.forEach(({ type, data }) => this.postMessage(type, data))
+    this.clientReadyCallbacks = []
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/app/setting_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = { 
+    settingId: String, 
+    settingType: String,
+    coreControllerName: String
+  }
+
+  connect() {
+    console.log('[Editor::Setting] connect', this.settingIdValue)
+
+    if (window.location.hash) {
+      // dirty way to wait for the underlying controller to be connected
+      setTimeout(() => this.focus(), 100)
+    }
+  }
+
+  change(event) {
+    console.log('[Editor::Setting] change', event.detail)
+    this.dispatch('change', { 
+      detail: {         
+        settingId: this.settingIdValue,
+        settingType: this.settingTypeValue,
+        value: event.detail.value
+      }
+    })
+  }
+
+  focus() {
+    const settingId = window.location.hash.replace('#', '')
+    
+    if (settingId !== this.settingIdValue || !this.hasCoreControllerNameValue) return
+
+    const coreController = this.application.getControllerForElementAndIdentifier(
+      this.element.querySelector(`[data-controller=${this.coreControllerNameValue}]`),
+      this.coreControllerNameValue
+    )
+
+    if (coreController) coreController.focus()
+  }      
+}

data/app/assets/javascripts/maglev/editor/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

data/app/assets/javascripts/maglev/editor/controllers/index.js

@@ -0,0 +1,3 @@
+import 'maglev-controllers/shared'
+import 'maglev-controllers/uikit'
+import 'maglev-controllers/app'

data/app/assets/javascripts/maglev/editor/controllers/shared/auto_save_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect() {
+    this._handleChange = this.handleChange.bind(this)
+    this.element.addEventListener('change', this._handleChange)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('change', this._handleChange)
+  }
+
+  handleChange() {
+    this.element.requestSubmit()
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/broken_image_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  connect() {
+    this._handleError = this.handleError.bind(this)
+    this.element.addEventListener('error', this._handleError)
+  }
+
+  disconnect() {
+    this.element.removeEventListener('error', this._handleError);
+  }
+
+  handleError() {
+    this.element.classList.add('hidden')
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/copy_to_clipboard_controller.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['text', 'success']
+  static values = {
+    source: String,
+  }
+
+  copy() {
+    this.clean()
+
+    this.textTarget.classList.add('hidden')
+    this.successTarget.classList.remove('hidden')
+
+    if (navigator.clipboard) {
+      navigator.clipboard.writeText(this.sourceValue)
+    } else {
+      console.log('Clipboard API not supported or unavailable.')
+    }
+    
+    this.timeout = setTimeout(() => {
+      this.successTarget.classList.add('hidden')
+      this.textTarget.classList.remove('hidden')
+    }, 2000)
+  }
+
+  disconnect() {
+    this.clean()
+  }
+
+  clean() {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/disappearance_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+class DisappearanceController extends Controller {
+  static values = { 
+    after: Number // in seconds
+  }
+
+  connect() {
+    if (this.afterValue <= 0) return
+
+    this.timeout = setTimeout(() => {
+      this.element.remove()
+    }, this.afterValue * 1000)
+  }
+
+  disconnect() {
+    if (this.timeout) clearTimeout(this.timeout)
+  }
+}
+
+export default DisappearanceController

data/app/assets/javascripts/maglev/editor/controllers/shared/dispatcher_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    eventName: String,
+    payload: Object
+  }
+
+  trigger() {
+    this.dispatch(this.eventNameValue, { detail: this.payloadValue })
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/form_refresh_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.refreshInput = document.createElement('input')
+    this.refreshInput.type = 'hidden'
+    this.refreshInput.name = 'refresh'
+    this.element.appendChild(this.refreshInput)
+  }
+
+  refresh(event) {
+    this.refreshInput.value = '1'
+    this.element.requestSubmit()
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/index.js

@@ -0,0 +1,27 @@
+import { application } from  "maglev-controllers/application"
+
+import DisappearanceController from "maglev-controllers/shared/disappearance_controller"
+import MaxLengthController from "maglev-controllers/shared/max_length_controller"
+import CopyToClipboardController from "maglev-controllers/shared/copy_to_clipboard_controller"
+import TransitionController from "maglev-controllers/shared/transition_controller"
+import DispatcherController from "maglev-controllers/shared/dispatcher_controller"
+import PreventSamePathController from "maglev-controllers/shared/prevent_same_path"
+import SortableController from "maglev-controllers/shared/sortable_controller"
+import BrokenImageController from "maglev-controllers/shared/broken_image_controller"
+import AutoSaveController from "maglev-controllers/shared/auto_save_controller"
+import FormRefreshController from "maglev-controllers/shared/form_refresh_controller"
+import ReloadPageController from "maglev-controllers/shared/reload_page_controller"
+import SubmitButtonController from "maglev-controllers/shared/submit_button_controller"
+
+application.register("disappearance", DisappearanceController)
+application.register("max-length", MaxLengthController)
+application.register("copy-to-clipboard", CopyToClipboardController)
+application.register("transition", TransitionController)
+application.register("dispatcher", DispatcherController)
+application.register("prevent-same-path", PreventSamePathController)
+application.register("sortable", SortableController)
+application.register("broken-image", BrokenImageController)
+application.register("auto-save", AutoSaveController)
+application.register("form-refresh", FormRefreshController)
+application.register("reload-page", ReloadPageController)
+application.register("submit-button", SubmitButtonController)

data/app/assets/javascripts/maglev/editor/controllers/shared/max_length_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from '@hotwired/stimulus'
+import { useDebounce } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['input', 'counter']
+  static values = {
+    threshold: Number,
+    thresholdClass: String,
+    defaultClass: String
+  }
+  static debounces = ['updateCounter']
+
+  connect() {
+    useDebounce(this)
+    this._updateCounter = this.updateCounter.bind(this)
+    this.inputTarget.addEventListener('keyup', this._updateCounter)
+    this.updateCounter()
+  }
+
+  disconnect() {
+    this.inputTarget.removeEventListener('keyup', this._updateCounter)
+  }
+
+  updateCounter() {
+    const isOverThreshold = this.inputTarget.value.length > this.thresholdValue
+    this.counterTarget.textContent = `${this.inputTarget.value.length} / ${this.thresholdValue}`
+    this.counterTarget.classList.toggle(this.thresholdClassValue, isOverThreshold)
+    this.counterTarget.classList.toggle(this.defaultClassValue, !isOverThreshold)
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/prevent_same_path.js

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus'
+import { isSamePath } from"maglev-controllers/utils"
+
+export default class extends Controller {
+  connect() {
+    this._onClick = this.onClick.bind(this)
+    this.element.addEventListener("click", this._onClick)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this._onClick)
+  }
+
+  onClick(event) {
+    if (isSamePath(event.currentTarget.href)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/reload_page_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  reload() {
+    window.location.reload()
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/shared/sortable_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+import { Sortable, Plugins } from "@shopify/draggable"
+
+export default class extends Controller {
+  static targets = ["sortableForm"]
+  static values = { path: String, scope: String }
+
+  connect() {
+    this.draggableName = this.scopeValue ? `item-${this.scopeValue}` : 'item'
+    const handleName = this.scopeValue ? `handle-${this.scopeValue}` : 'handle'
+
+    this.sortable = new Sortable(this.element, {
+      draggable: `[data-sortable-target="${this.draggableName}"]`,
+      handle: `[data-sortable-target="${handleName}"]`,
+      classes: {
+        'container:dragging': ['is-dragging'],
+        'mirror': ['shadow-md'],
+        'source:dragging': ['opacity-50'],
+      },
+      mirror: {
+        appendTo: this.element,
+        constrainDimensions: true,
+      },
+      plugins: [Plugins.SortAnimation],
+      swapAnimation: {
+        duration: 200,
+        easingFunction: 'ease-in-out',
+      },
+    });
+
+    const _emitEvent = this.emitEvent.bind(this)
+    const _persist = this.persist.bind(this)
+    
+    this.sortable.on('sortable:stop', _emitEvent)
+    this.sortable.on('drag:stopped', _persist)
+  }
+
+  disconnect() {
+    this.sortable.destroy()
+  }
+
+  emitEvent(event) {
+    // optimistic UI update
+    const { oldIndex, newIndex } = event.data    
+    this.dispatch('drag-stopped', { detail: { oldIndex, newIndex } })
+  }
+
+  persist() {
+    // persisting the new order in DB
+    this.itemTargets().forEach(item => {  
+      const hiddenField = document.createElement('input')
+      hiddenField.type = 'hidden'
+      hiddenField.name = 'item_ids[]'
+      hiddenField.value = item.dataset.itemId
+      this.sortableFormTarget.appendChild(hiddenField)
+    })
+
+    this.sortableFormTarget.requestSubmit()
+  }
+
+  itemTargets() {
+    return this.element.querySelectorAll(`[data-sortable-target="${this.draggableName}"]`)
+  }
+}