maglevcms 2.0.0 → 3.0.0.beta1

data/app/assets/config/maglev_manifest.js

@@ -1 +1,8 @@
 //= link_directory ../stylesheets/maglev .css
+
+//= link_tree ../../../vendor/javascript .js
+//= link_tree ../../components .js
+//= link_tree ../javascripts/maglev .js
+
+//= link maglev/favicon.svg
+//= link maglev/logo.svg

data/app/assets/javascripts/maglev/client/dom-operations.js

@@ -0,0 +1,282 @@
+import { debounce, postMessageToEditor } from 'maglev-client/utils'
+import runScripts from 'maglev-client/run-scripts'
+
+const parentDocument = window.parent.document
+const previewDocument = window.document
+const csrfParam =
+  window.location !== window.parent.location
+    ? {
+        [parentDocument
+          .querySelector("meta[name='csrf-param']")
+          .getAttribute('content')]: parentDocument
+          .querySelector("meta[name='csrf-token']")
+          .getAttribute('content'),
+      }
+    : {}
+
+export const start = () => {
+  // Within a Rails site, no need to remove the event listeners
+  window.addEventListener('maglev:section:add', addSection)
+  window.addEventListener('maglev:section:move', moveSections)
+  window.addEventListener('maglev:section:update', updateSection)
+  window.addEventListener('maglev:section:remove', removeSection)
+  window.addEventListener('maglev:section:checkLockVersion', checkSectionLockVersion)
+  window.addEventListener('maglev:section:ping', pingSection)
+  window.addEventListener('maglev:block:add', replaceSection)
+  window.addEventListener('maglev:block:move', replaceSection)
+  window.addEventListener('maglev:block:remove', replaceSection)
+  window.addEventListener('maglev:block:ping', pingSectionBlock)
+  window.addEventListener('maglev:setting:update', updateSetting)
+
+  window.addEventListener('maglev:style:update', updateStyle)
+}
+
+// === Section related actions ===
+
+const addSection = (event) => {
+  const { sectionId, insertAt } = event.detail
+  debouncedUpdatePreviewDocument({ sectionId, insertAt, scrollToSection: true })
+}
+
+const moveSections = (event) => {
+  const { oldIndex, newIndex } = event.detail
+
+  const direction = oldIndex < newIndex ? 'down' : 'up'
+
+  const sectionElement = previewDocument.querySelector(
+    `[data-maglev-section-id]:nth-child(${oldIndex + 1})`,
+  )
+  const targetSectionElement = previewDocument.querySelector(
+    `[data-maglev-section-id]:nth-child(${newIndex + 1})`,
+  )
+
+  if (direction === 'up')
+    targetSectionElement.parentNode.insertBefore(
+      sectionElement,
+      targetSectionElement,
+    )
+  else
+    targetSectionElement.parentNode.insertBefore(
+      sectionElement,
+      targetSectionElement.nextSibling,
+    )
+
+  // scroll to the new placement of the section
+  scrollToSectionOrBlock(sectionElement)
+}
+
+const updateSection = (event) => {
+  const { sectionId } = event.detail
+  debouncedUpdatePreviewDocument({ sectionId })
+}
+
+const removeSection = (event) => {
+  const { sectionId } = event.detail
+  const selector = `[data-maglev-section-id='${sectionId}']`
+  const element = previewDocument.querySelector(selector)
+  element.remove()
+}
+
+const checkSectionLockVersion = (event) => {
+  const { sectionId, lockVersion } = event.detail
+  console.log('[DOM Operations] checkSectionLockVersion', event)
+  const section = previewDocument.querySelector(`[data-maglev-section-id='${sectionId}']`)
+  const localLockVersion = section?.getAttribute('data-maglev-section-lock-version')
+  if (lockVersion !== localLockVersion && lockVersion !== '') {
+    debouncedUpdatePreviewDocument({ sectionId })
+  }
+}
+
+const pingSection = (event) => {
+  const { sectionId } = event.detail
+  const selector = `[data-maglev-section-id='${sectionId}']`
+  const sectionElement = previewDocument.querySelector(selector)
+  if (sectionElement) {
+    scrollToSectionOrBlock(sectionElement)
+  }
+}
+
+// === Block related actions ===
+
+const replaceSection = (event) => {
+  const { sectionId } = event.detail
+  debouncedUpdatePreviewDocument({ sectionId })
+}
+
+const pingSectionBlock = (event) => {
+  const { sectionBlockId } = event.detail
+  const selector = `[data-maglev-block-id='${sectionBlockId}']`
+  const blockElement = previewDocument.querySelector(selector)
+  if (blockElement) {
+    scrollToSectionOrBlock(blockElement)
+  }
+}
+
+// === Other actions ===
+
+const updateSetting = (event) => {
+  const { sectionId, sourceId, change } = event.detail
+
+  let foundSetting = false
+  
+  switch (change.settingType) {
+    case 'text':
+      foundSetting = updateTextSetting(sourceId, change)
+      break
+    case 'link':
+      foundSetting = updateLinkSetting(sourceId, change)
+      break
+    default:
+      // ok, we can't cherry-pick the modification so we have to refresh the whole section
+      break
+  }
+
+  // if we couldn't find the setting, we have to refresh the whole section
+  // so we send a message to the editor to refresh the whole section
+  postMessageToEditor('setting:updated', { 
+    sectionId, 
+    sourceId, 
+    change,
+    updated: foundSetting
+  })
+}
+
+const updateStyle = async (event) => {
+  const { style } = event.detail
+
+  const doc = await getUpdatedDoc({
+    style: JSON.stringify(style),
+  })
+
+  // update the CSS variables
+  const selector = '#maglev-style'
+  const sourceElement = doc.querySelector(selector)
+  let targetElement = previewDocument.querySelector(selector)
+
+  if (sourceElement) {
+    targetElement.replaceWith(sourceElement)
+  }
+}
+
+// === Helpers ===
+
+// const legacyUpdateSetting = (source, change) => {
+//   switch (change.settingType) {
+//     case 'text':
+//       return updateTextSetting(source.id, change)
+//     case 'link':
+//       if (change.settingOptions.withText && change.value)
+//         return updateTextSetting(source.id, {
+//           ...change,
+//           value: change.value.text,
+//           settingId: `${change.settingId}.text`,
+//         })
+//       break
+//     default:
+//       // ok, we can't cherry-pick the modification so we have to refresh the whole section
+//       break
+//   }
+//   return false
+// }
+
+const updateTextSetting = (sourceId, change) => {
+  console.log('[DOM Operations] updateTextSetting', sourceId, change)
+  const selector = `[data-maglev-id='${sourceId}.${change.settingId}']`
+  const settings = previewDocument.querySelectorAll(selector)
+  settings.forEach(($el) => ($el.innerHTML = change.value))
+  return settings.length > 0
+}
+
+const updateLinkSetting = (sourceId, change) => {
+  console.log('updateLinkSetting', sourceId, change)
+}
+
+const updatePreviewDocument = async ({ sectionId, insertAt = undefined, scrollToSection = false }) => {
+  console.log('[DOM Operations] updatePreviewDocument', sectionId, insertAt, scrollToSection)
+
+  const doc = await getUpdatedDoc({ section_id: sectionId })
+
+  // NOTE: Instructions to refresh the whole document
+  // removeEventListeners()
+  // previewDocument.querySelector('body').replaceWith(doc.querySelector('body'))
+  // setupEvents(previewDocument)
+
+  const selector = `[data-maglev-section-id='${sectionId}']`
+  const sourceElement = doc.querySelector(selector)
+  let targetElement = previewDocument.querySelector(selector)
+
+  if (!sourceElement)
+    throw new Error(`Maglev section ${sectionId} not generated by the server`)
+
+  if (targetElement) {
+    targetElement.replaceWith(sourceElement)
+  } else {
+    insertSectionInDOM(sourceElement, insertAt)
+    targetElement = previewDocument.querySelector(selector)
+  }
+
+  runScripts(sourceElement)
+
+  if (scrollToSection)
+    scrollToSectionOrBlock(targetElement)
+}
+
+const debouncedUpdatePreviewDocument = debounce(updatePreviewDocument, 150)
+
+const insertSectionInDOM = (element, insertAt) => {
+  switch (insertAt) {
+    case 'top':
+    case 0: {
+      const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
+      parentNode.prepend(element)
+      break
+    }
+    case -1:
+    case 'bottom':    
+    case undefined:
+    case null:
+    case '': {      
+      const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
+      parentNode.appendChild(element)
+      break
+    }
+    default: {
+      const selector = `[data-maglev-dropzone] > [data-maglev-section-id]:nth-child(${insertAt})`
+      const pivotElement = previewDocument.querySelector(selector)
+      pivotElement.parentNode.insertBefore(element, pivotElement.nextSibling)
+    }
+  }
+}
+
+const getUpdatedDoc = async (attributes) => {
+  const response = await fetch(previewDocument.location.href, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+    body: JSON.stringify({
+      ...attributes,
+      ...csrfParam,
+    }),
+  })
+  
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`)
+  }
+  
+  const data = await response.text()
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(data, 'text/html')
+  return doc
+}
+
+const scrollToSectionOrBlock = (element) => {
+  const previewWindow = previewDocument.defaultView
+  const scrollY = previewWindow.scrollY || 0
+  const elementTop = element.getBoundingClientRect().top + scrollY
+  previewWindow.scrollTo({
+    top: elementTop,
+    behavior: 'smooth',
+  })
+}

data/app/{frontend/live-preview-client → assets/javascripts/maglev/client}/iframe-decorator.js

@@ -1,9 +1,9 @@
-import { postMessage } from './message'
-import { debounce, isBlank } from './utils'
+import { isBlank, postMessageToEditor } from 'maglev-client/utils'
 
 // keep track of the current hovered section
 let listeners = []
 let hoveredSectionId = null
+let lastCursorPosition = { x: 0, y: 0 }
 
 export const start = (config) => {
   const previewDocument = window.document
@@ -15,13 +15,15 @@ export const start = (config) => {
   )
 
   // mousescroll
-  listenScrolling(previewDocument)
+  listenScrolling(previewDocument, config.stickySectionIds)
 
   // mouseenter
   listen(previewDocument, 'mouseenter', (el, type) => {
     switch (type) {
       case 'section':
         return onSectionHovered(previewDocument, el, config.stickySectionIds)
+      case 'block':
+        return onBlockHovered(el)
       case 'setting':
         return onSettingHovered(el)
       default:
@@ -34,6 +36,8 @@ export const start = (config) => {
     switch (type) {
       case 'section':
         return onSectionLeft(el)
+      case 'block':
+        return onBlockLeft(el)
       case 'setting':
         return onSettingLeft(el)
       default:
@@ -46,11 +50,19 @@ export const start = (config) => {
     switch (type) {
       case 'setting':
         return onSettingClicked(el, event)
+      case 'block':
+        return onBlockClicked(el, event)
       default:
         break
     }
   })
 
+  // pointer move
+  addEventListener(previewDocument, 'pointermove', (event) => {
+    lastCursorPosition.x = event.pageX
+    lastCursorPosition.y = event.pageY
+  }, { passive: true })
+
   // click on links
   disableLinks(previewDocument)
 
@@ -77,8 +89,9 @@ const listen = (previewDocument, eventType, handler) => {
       if (event.target === previewDocument) return
 
       let sectionElement = event.target.closest('[data-maglev-section-id]')
+      let blockElement = event.target.closest('[data-maglev-block-id]')
       let settingElement = event.target.closest('[data-maglev-id]')
-      let el = settingElement || sectionElement
+      let el = settingElement || blockElement || sectionElement
 
       // not related to maglev element, no need to continue
       if (!el) return
@@ -86,6 +99,8 @@ const listen = (previewDocument, eventType, handler) => {
       if (eventType === 'mouseleave') {
         if (settingElement) {
           if (settingElement != event.target) return
+        }else if (blockElement) {
+          if (blockElement != event.target) return
         } else {
           if (sectionElement != event.target) return
           // special case: hovering the section-highlighter component from the parent document
@@ -108,10 +123,21 @@ const listen = (previewDocument, eventType, handler) => {
   )
 }
 
-const listenScrolling = (previewDocument) => {
+const listenScrolling = (previewDocument, stickySectionIds) => {
+  let endOfScrollingTimeout = null
+
   const scrollNotifier = () => {
     const el = previewDocument.querySelector('[data-maglev-section-id]:hover')
-    if (el) postMessage('scroll', { boundingRect: el.getBoundingClientRect() })
+    if (el) postMessageToEditor('scroll')
+
+    if (endOfScrollingTimeout) clearTimeout(endOfScrollingTimeout)
+      
+    endOfScrollingTimeout = setTimeout(() => {
+      const el = sectionUnderPoint(previewDocument, lastCursorPosition.x, lastCursorPosition.y)
+      if (el) {
+        onSectionHovered(previewDocument, el, stickySectionIds, true)
+      }
+    }, 400)
   }
 
   addEventListener(previewDocument, 'scroll', scrollNotifier)
@@ -121,7 +147,7 @@ const onSectionHovered = (previewDocument, el, stickySectionIds, force = false)
   const sectionId = el.dataset.maglevSectionId
 
   if (hoveredSectionId !== sectionId || force) {
-    postMessage('section:hover', {
+    postMessageToEditor('section:hover', {
       sectionId,
       sectionRect: el.getBoundingClientRect(),
       sectionOffsetTop: getMinTop(previewDocument, sectionId, stickySectionIds),
@@ -144,10 +170,26 @@ const getMinTop = (previewDocument, currentSectionId, stickySectionIds) => {
 }
 
 const onSectionLeft = () => {
-  postMessage('section:leave')
+  postMessageToEditor('section:leave')
   hoveredSectionId = null
 }
 
+const onBlockHovered = (el) => {
+  if (!el) return null
+  el.style.outline = '2px solid transparent'
+  el.style.outlineOffset = '2px'
+  el.style.boxShadow = '0 0 0 2px var(--maglev-editor-outline-color)'
+  if (
+    !el.style.borderRadius &&
+    window.getComputedStyle(el).borderRadius === '0px'
+  )
+    el.style.borderRadius = '2px'
+}
+
+const onBlockLeft = (el) => {
+  el.style.boxShadow = 'none'
+}
+
 const onSettingHovered = (el) => {
   if (!el) return null
   el.style.outline = '2px solid transparent'
@@ -169,16 +211,38 @@ const onSettingClicked = (el, event) => {
 
   const fragments = el.dataset.maglevId.split('.')
 
-  // is it a section or a block setting?
-  const isSectionBlock = !!el.closest('[data-maglev-block-id]')
-  const prefix = isSectionBlock ? 'sectionBlock' : 'section'
+  const section = el.closest('[data-maglev-section-id]')
+  const sectionId = section.dataset.maglevSectionId
+  const sectionBlock = el.closest('[data-maglev-block-id]')
+  const sectionBlockId = sectionBlock?.dataset?.maglevBlockId
+  const prefix = sectionBlockId ? 'sectionBlock' : 'section'
 
-  postMessage(`${prefix}:setting:clicked`, {
-    [`${prefix}Id`]: fragments[0],
+  postMessageToEditor(`${prefix}:setting:clicked`, {
+    sectionId,
+    sectionBlockId,
     settingId: fragments[1],
   })
 }
 
+const onBlockClicked = (el, event) => {
+  event.stopPropagation() & event.preventDefault()
+  const section = el.closest('[data-maglev-section-id]')
+  const sectionId = section.dataset.maglevSectionId
+  const sectionBlockId = el.dataset.maglevBlockId
+
+  postMessageToEditor(`sectionBlock:clicked`, { sectionId, sectionBlockId })
+}
+
+const sectionUnderPoint = (previewDocument, x, y) =>{
+  // Get the z-stack at the pointer
+  const stack = previewDocument.elementsFromPoint(x, y)
+
+  // Prefer: ignore toolbars in the stack
+  const section = stack.find(el => el.matches?.('[data-maglev-section-id]'))
+
+  return section || null
+}
+
 const addEventListener = (target, type, listener, capture) => {
   listeners.push({ target, type, listener })
   target.addEventListener(type, listener, capture)
@@ -195,5 +259,7 @@ const disableLinks = (previewDocument) => {
 }
 
 const getElementType = (el) => {
-  return el.dataset.maglevSectionId ? 'section' : 'setting'
-}
+  if (el.dataset.maglevBlockId) return 'block'
+  if (el.dataset.maglevSectionId) return 'section'
+  return 'setting'
+}

data/app/{frontend/live-preview-client/message.js → assets/javascripts/maglev/client/incoming-messages.js}

@@ -1,13 +1,14 @@
-import { start as decorateIframe } from './iframe-decorator'
+import { start as decorateIframe } from 'maglev-client/iframe-decorator'
+import { postMessageToEditor } from 'maglev-client/utils'
 
-const mainWindow = window.parent
-
-export const listenMessages = () => {
+export const start = () => {
   window.addEventListener('message', ({ data: { type, ...data } }) => {
     // a message MUST have a type
     if (!type) return
 
-    switch (type) {
+    const internalType = type.replace('maglev:', '')
+
+    switch (internalType) {
       case 'config':
         decorateIframe({
           primaryColor: data.primaryColor,
@@ -15,17 +16,22 @@ export const listenMessages = () => {
         })
 
         // we answer back we're ready!
-        postMessage('ready', { message: "👋, I'm a Maglev site and I'm ready" })
+        postMessageToEditor('ready', { 
+          message: "👋, I'm a Maglev site and I'm ready",
+          numberOfSections: window.document.querySelectorAll('[data-maglev-section-id]').length
+        })
         break
       case 'section:add':
       case 'section:move':
       case 'section:update':
       case 'section:remove':
       case 'section:ping':
+      case 'section:checkLockVersion':
       case 'block:add':
       case 'block:move':
-      case 'block:update':
       case 'block:remove':
+      case 'block:ping':
+      case 'setting:update':
       case 'style:update':
         triggerEvent(type, data)
         break
@@ -36,12 +42,8 @@ export const listenMessages = () => {
   })
 }
 
-export const postMessage = (type, data) => {
-  mainWindow.postMessage({ type, ...(data || {}) }, '*')
-}
-
 // local event
 const triggerEvent = (type, data) => {
-  const event = new CustomEvent(`maglev:${type}`, { detail: data })
+  const event = new CustomEvent(type, { detail: data })
   window.dispatchEvent(event)
 }

data/app/assets/javascripts/maglev/client/index.js

@@ -0,0 +1,26 @@
+import { start as startListeningEvents } from 'maglev-client/dom-operations'
+import { start as startListeningMessages } from 'maglev-client/incoming-messages'
+
+const initializeClient = () => {
+  console.log('Maglev Client v2 🚆')
+
+  // no need to start the client when the site is being visited outside the editor
+  // (shouldn't happen, but just in case)
+  if (window.location === window.parent.location) return
+
+  // messages sent from the editor to the client and transformed into local events
+  startListeningMessages() 
+
+  // listen local events (converted from messages) and process them
+  startListeningEvents()  
+
+  console.log('Maglev Client v2 ✅')
+}
+
+// Check if document is already ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initializeClient)
+} else {
+  // Document is already ready, initialize immediately
+  initializeClient()
+}

data/app/{frontend/live-preview-client → assets/javascripts/maglev/client}/utils.js

@@ -20,3 +20,7 @@ export const debounce = (fn, time) => {
   }
   return wrapper
 }
+
+export const postMessageToEditor = (type, data) => {
+  window.parent.dispatchEvent(new CustomEvent(`client:${type}`, { detail: data || {} }))
+}

data/app/assets/javascripts/maglev/editor/controllers/app/forms/section_form_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from '@hotwired/stimulus'
+import { useDebounce } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['lockVersion']
+  static values = { sectionId: String, sectionBlockId: String, sectionLockVersion: String }
+
+  static debounces = ['afterSettingUpdate']
+
+  connect() {
+    useDebounce(this)    
+    this.sourceId = this.sectionBlockIdValue !== '' ?  this.sectionBlockIdValue : this.sectionIdValue
+    requestAnimationFrame(() => {
+      this.dispatch('connected', { bubbles: true, detail: { 
+        sectionId: this.sectionIdValue, 
+          sectionBlockId: this.sectionBlockIdValue, 
+          lockVersion: this.sectionLockVersionValue } 
+        })
+    })
+  }
+
+  onSettingChange(event) {
+    console.log('[SectionForm::onSettingChange]', this.sourceId , event.detail)
+    const { detail: { settingType, settingId, value } } = event
+    this.dispatch('updateSetting', { detail: {
+        sourceId: this.sourceId,
+        change: { settingType, settingId, value }
+      }
+    })
+  }
+
+  onPersist(event) {
+    console.log('[SectionForm::onPersist]', event.detail, typeof event.detail)
+    this.lockVersionTarget.value = event.detail.lockVersion
+  }
+
+  async afterSettingUpdate(event) {
+    console.log('[SectionForm::afterSettingUpdate] 🙌🙌', event.detail)
+    await this.element.requestSubmit()
+    
+    if (!event.detail.updated) {
+      // we couldn't update the content just by modifying the DOM, so we have to refresh the whole section
+      this.dispatch('updateSection', { detail: { sectionId: this.sectionIdValue } })
+    }
+  }
+}

data/app/assets/javascripts/maglev/editor/controllers/app/forms/style_form_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = { style: Array }
+
+  update(event) {
+    console.log('[StyleForm] update', event.detail, this.styleValue)
+
+    const newStyle = this.styleValue
+    newStyle.forEach(style => {
+      if (style.id === event.detail.settingId) {
+        style.value = event.detail.value
+      }
+    })
+    this.styleValue = newStyle
+
+    this.dispatch('onUpdate', { detail: { style: newStyle } })
+  }
+}

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

@@ -0,0 +1,15 @@
+import { application } from  "maglev-controllers/application"
+
+import PagePreviewController from "maglev-controllers/app/page_preview_controller"
+import PreviewNotificationCenterController from "maglev-controllers/app/preview_notification_center_controller"
+
+import EditorSectionFormController from "maglev-controllers/app/forms/section_form_controller"
+import EditorStyleFormController from "maglev-controllers/app/forms/style_form_controller"
+import EditorSettingController from "maglev-controllers/app/setting_controller"
+
+application.register("editor-page-preview", PagePreviewController)
+application.register("editor-preview-notification-center", PreviewNotificationCenterController)
+
+application.register("editor-section-form", EditorSectionFormController)
+application.register("editor-style-form", EditorStyleFormController)
+application.register("editor-setting", EditorSettingController)