maglevcms 1.0.0.rc1

data/app/javascript/editor/services/inline-editing.js

@@ -0,0 +1,403 @@
+import * as axios from 'axios'
+import router from '@/router'
+import store from '@/store'
+import { debounce, isBlank } from '@/utils'
+
+let listeners = []
+let hoveredSectionId = null
+
+const addEventListener = (target, type, listener, capture) => {
+  listeners.push({ target, type, listener })
+  target.addEventListener(type, listener, capture)
+}
+
+// const removeEventListeners = () => {
+//   listeners.forEach(({ target, type, listener }) => {
+//     target.removeEventListener(type, listener)
+//   })
+// }
+
+const getElementType = (el) => {
+  return el.dataset.maglevSectionId ? 'section' : 'setting'
+}
+
+const disableLinks = (previewDocument) => {
+  addEventListener(previewDocument.body, 'click', (event) => {
+    const link = event.target.closest('a')
+    if (link && !isBlank(link.href)) {
+      event.stopPropagation() & event.preventDefault()
+      return false
+    }
+  })
+}
+
+const listen = (previewDocument, eventType, handler) => {
+  const capture = eventType === 'mouseenter' || eventType === 'mouseleave'
+  addEventListener(
+    previewDocument.body,
+    eventType,
+    (event) => {
+      if (event.target === previewDocument) return
+
+      let sectionElement = event.target.closest('[data-maglev-section-id]')
+      let settingElement = event.target.closest('[data-maglev-id]')
+      let el = settingElement || sectionElement
+
+      // not related to maglev element, no need to continue
+      if (!el) return
+
+      if (eventType === 'mouseleave') {
+        if (settingElement) {
+          if (settingElement != event.target) return
+        } else {
+          if (sectionElement != event.target) return
+          // special case: hovering the section-highlighter component from the parent document
+          const rect = sectionElement.getBoundingClientRect()
+          const scrollX = previewDocument.defaultView.scrollX
+          const scrollY = previewDocument.defaultView.scrollY
+          if (
+            event.pageX > rect.left + scrollX &&
+            event.pageX < rect.right + scrollX &&
+            event.pageY > rect.top + scrollY &&
+            event.pageY < rect.bottom + scrollY
+          )
+            return
+        }
+      }
+
+      handler(el, getElementType(el), event)
+    },
+    capture,
+  )
+}
+
+const listenScrolling = (previewDocument) => {
+  let mouseX = 0
+  let mouseY = 0
+
+  addEventListener(previewDocument, 'mousemove', (e) => {
+    mouseX = e.clientX
+    mouseY = e.clientY
+  })
+
+  addEventListener(previewDocument, 'scroll', () => {
+    const el = previewDocument
+      .elementFromPoint(mouseX, mouseY)
+      .closest('[data-maglev-section-id]')
+
+    if (!previewDocument.ticking && el) {
+      previewDocument.ticking = true
+      const event = new CustomEvent('maglev:preview:scroll', {
+        detail: { boundingRect: el.getBoundingClientRect() },
+      })
+      window.dispatchEvent(event)
+    }
+  })
+}
+
+const onSectionHovered = (el) => {
+  // console.log('onSectionHovered', el.dataset.maglevSectionId)
+  const sectionId = el.dataset.maglevSectionId
+  if (hoveredSectionId !== sectionId) {
+    store.dispatch('hoverSection', { el, sectionId })
+    hoveredSectionId = sectionId
+  }
+}
+
+const onSectionLeft = () => {
+  // console.log('onSectionLeft')
+  store.dispatch('leaveSection')
+  hoveredSectionId = null
+}
+
+const onSettingHovered = (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 onSettingLeft = (el) => {
+  el.style.boxShadow = 'none'
+}
+
+const onSettingClicked = (el, event) => {
+  const fragments = el.dataset.maglevId.split('.')
+  // console.log('select', el.dataset.maglevId, fragments, router)
+
+  event.stopPropagation() & event.preventDefault()
+
+  let route = { params: { settingId: fragments[1] }, hash: '#content' }
+
+  // is it a section or a block setting?
+  const isSectionBlock = !!el.closest('[data-maglev-block-id]')
+
+  // console.log(isSectionBlock, el.closest('[data-maglev-block-id]'))
+
+  if (isSectionBlock) {
+    route.name = 'editSectionBlockSetting'
+    route.params.sectionBlockId = fragments[0]
+  } else {
+    route.name = 'editSectionSetting'
+    route.params.sectionId = fragments[0]
+  }
+
+  router.push(route).catch((err) => {
+    if (err.name !== 'NavigationDuplicated') throw err
+  })
+}
+
+const setupEvents = (previewDocument) => {
+  // mousescroll
+  listenScrolling(previewDocument)
+
+  // mouseenter
+  listen(previewDocument, 'mouseenter', (el, type) => {
+    switch (type) {
+      case 'section':
+        return onSectionHovered(el)
+      case 'setting':
+        return onSettingHovered(el)
+      default:
+        break
+    }
+  })
+
+  // mouseleave
+  listen(previewDocument, 'mouseleave', (el, type) => {
+    switch (type) {
+      case 'section':
+        return onSectionLeft(el)
+      case 'setting':
+        return onSettingLeft(el)
+      default:
+        break
+    }
+  })
+
+  // click
+  listen(previewDocument, 'click', (el, type, event) => {
+    switch (type) {
+      case 'setting':
+        return onSettingClicked(el, event)
+      default:
+        break
+    }
+  })
+
+  // click on links
+  disableLinks(previewDocument)
+}
+
+export const setup = (previewDocument) => {
+  previewDocument.head.insertAdjacentHTML(
+    'beforeend',
+    `<style type="text/css">:root { --maglev-editor-outline-color: ${store.state.editorSettings.primaryColor}; }</style>`,
+  )
+  setupEvents(previewDocument)
+}
+
+export const getMinTop = (previewDocument, hoveredSection, sections) => {
+  if (!hoveredSection) return null
+  const sectionId = sections.find(
+    (section) => section.viewportFixedPosition,
+  )?.id
+  if (!sectionId || hoveredSection.sectionId === sectionId) return null
+  const selector = `[data-maglev-section-id='${sectionId}']`
+  const element = previewDocument.querySelector(selector)
+  if (!element) return null
+  return element.offsetHeight
+}
+
+const insertSectionInDOM = (previewDocument, element, insertAt) => {
+  switch (insertAt) {
+    case 'top': {
+      const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
+      parentNode.prepend(element)
+      break
+    }
+    case 'bottom':
+    case undefined:
+    case null:
+    case '': {
+      const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
+      parentNode.appendChild(element)
+      break
+    }
+    default: {
+      const selector = `[data-maglev-section-id='${insertAt}']`
+      const pivotElement = previewDocument.querySelector(selector)
+      pivotElement.parentNode.insertBefore(element, pivotElement.nextSibling)
+    }
+  }
+}
+
+const updatePreviewDocument = (previewDocument, content, section, insertAt) => {
+  console.log('refreshPreviewDocument', content)
+
+  const attributes = {
+    pageSections: JSON.stringify([
+      content.pageSections.find((s) => s.id == section.id), // no need to render the other sections
+    ]),
+  }
+
+  axios.post(previewDocument.location.href, attributes).then(({ data }) => {
+    let parser = new DOMParser()
+    const doc = parser.parseFromString(data, 'text/html')
+
+    // NOTE: Instructions to refresh the whole document
+    // removeEventListeners()
+    // previewDocument.querySelector('body').replaceWith(doc.querySelector('body'))
+    // setupEvents(previewDocument)
+
+    const selector = `[data-maglev-section-id='${section.id}']`
+    const sourceElement = doc.querySelector(selector)
+    let targetElement = previewDocument.querySelector(selector)
+
+    if (!sourceElement)
+      throw new Error(
+        `Maglev section ${section.id} not generated by the server`,
+      )
+
+    if (targetElement) {
+      targetElement.replaceWith(sourceElement)
+    } else {
+      insertSectionInDOM(previewDocument, sourceElement, insertAt)
+      targetElement = previewDocument.querySelector(selector)
+    }
+    targetElement.scrollIntoView(true)
+  })
+}
+
+const debouncedUpdatePreviewDocument = debounce(updatePreviewDocument, 300)
+
+const updateSectionTextSetting = (previewDocument, section, change) => {
+  const selector = `[data-maglev-id='${section.id}.${change.settingId}']`
+  const settings = previewDocument.querySelectorAll(selector)
+
+  console.log(
+    'updateSectionTextSetting',
+    settings,
+    settings.length,
+    `${section.id}.${change.settingId}`,
+  )
+
+  settings.forEach(($el) => {
+    $el.innerHTML = change.value
+  })
+
+  return settings.length > 0
+}
+
+export const updateSectionSetting = (
+  previewDocument,
+  content,
+  section,
+  sectionBlock,
+  change,
+) => {
+  console.log('updateSectionSetting', change)
+
+  if (!change) {
+    debouncedUpdatePreviewDocument(previewDocument, content, section)
+    return
+  }
+
+  let source = sectionBlock || section
+  let foundSetting = false
+  switch (change.settingType) {
+    case 'text':
+      foundSetting = updateSectionTextSetting(previewDocument, source, change)
+      break
+    case 'link':
+      if (change.settingOptions.withText && change.value)
+        foundSetting = updateSectionTextSetting(previewDocument, source, {
+          ...change,
+          value: change.value.text,
+          settingId: `${change.settingId}.text`,
+        })
+      break
+    case 'image':
+    case 'checkbox':
+    case 'color':
+    case 'select':
+      foundSetting = false
+      break
+    default:
+      console.log(
+        'inlineEditing.updateSectionSetting',
+        'unknown type',
+        change.settingType,
+      )
+      break
+  }
+
+  if (!foundSetting)
+    debouncedUpdatePreviewDocument(previewDocument, content, section)
+}
+
+export const addSection = (previewDocument, content, section, insertAt) => {
+  debouncedUpdatePreviewDocument(previewDocument, content, section, insertAt)
+}
+
+export const removeSection = (previewDocument, sectionId) => {
+  const selector = `[data-maglev-section-id='${sectionId}']`
+  let element = previewDocument.querySelector(selector)
+  element.remove()
+}
+
+export const updateMoveSection = (
+  previewDocument,
+  sectionId,
+  targetSectionId,
+  direction,
+) => {
+  console.log('updateMoveSection', sectionId, targetSectionId, direction)
+
+  const sectionElement = previewDocument.querySelector(
+    `[data-maglev-section-id='${sectionId}']`,
+  )
+  const targetSectionElement = previewDocument.querySelector(
+    `[data-maglev-section-id='${targetSectionId}']`,
+  )
+
+  if (direction === 'up')
+    targetSectionElement.parentNode.insertBefore(
+      sectionElement,
+      targetSectionElement,
+    )
+  else
+    targetSectionElement.parentNode.insertBefore(
+      sectionElement,
+      targetSectionElement.nextSibling,
+    )
+
+  // scroll to the new placement of the section
+  sectionElement.scrollIntoView(true)
+}
+
+export const previewStyle = (previewDocument, content, style) => {
+  const attributes = {
+    pageSections: JSON.stringify(content.pageSections),
+    style: JSON.stringify(style),
+  }
+
+  axios.post(previewDocument.location.href, attributes).then(({ data }) => {
+    let parser = new DOMParser()
+    const doc = parser.parseFromString(data, 'text/html')
+
+    // update the CSS variables
+    const selector = '#maglev-style'
+    const sourceElement = doc.querySelector(selector)
+    let targetElement = previewDocument.querySelector(selector)
+
+    if (sourceElement) {
+      targetElement.replaceWith(sourceElement)
+    }
+  })
+}

data/app/javascript/editor/services/page.js

@@ -0,0 +1,107 @@
+import {
+  normalize as coreNormalize,
+  denormalize as coreDenormalize,
+  schema,
+} from 'normalizr'
+import { pick } from '@/utils'
+
+export const BLOCK_SCHEMA = new schema.Entity('blocks')
+export const SECTION_SCHEMA = new schema.Entity('sections', {
+  blocks: [BLOCK_SCHEMA],
+})
+export const PAGE_SCHEMA = new schema.Entity('page', {
+  sections: [SECTION_SCHEMA],
+})
+
+export const SETTING_ATTRIBUTES = [
+  'title',
+  'path',
+  'visible',
+  'seoTitle',
+  'ogTitle',
+  'ogDescription',
+  'ogImageUrl',
+  'metaDescription',
+  'lockVersion',
+]
+
+export default (api) => ({
+  isIndex: (page) => {
+    return page.path === 'index' || page.path === '/index'
+  },
+
+  build: () => {
+    return {
+      title: '',
+      path: '',
+      visible: true,
+      seoTitle: '',
+      metaDescription: '',
+    }
+  },
+
+  findAll: (filters) => {
+    console.log('[PageService] Fetching all the pages', filters)
+    const options = { params: filters || {} }
+
+    const sort = (pages) => {
+      return pages.sort((a, b) => {
+        if (a.path === 'index') return -1
+        if (b.path === 'index') return 1
+        return a.title.localeCompare(b.title)
+      })
+    }
+
+    return api.get('/pages', options).then(({ data }) => sort(data))
+  },
+
+  findById: (site, id) => {
+    if (id === 'index') id = site.homePageId
+
+    const safeId = String(id).replace('/', '%2F')
+
+    console.log('[PageService] Fetching page by id', safeId)
+
+    return api.get(`/pages/${safeId}`).then(({ data }) => data)
+  },
+
+  create: (attributes) => {
+    console.log('[PageService] Creating page', attributes)
+    return api.post(`/pages`, { page: attributes })
+  },
+
+  update: (id, attributes, siteAttributes) => {
+    console.log('[PageService] Updating page #', id)
+    return api.put(`/pages/${id}`, { page: attributes, site: siteAttributes })
+  },
+
+  updateSettings: (id, attributes) => {
+    console.log('[PageService] Updating page settings #', id)
+    return api.put(`/pages/${id}`, {
+      page: pick(attributes, ...SETTING_ATTRIBUTES),
+    })
+  },
+
+  setVisible: (id, visible) => {
+    console.log('[PageService] Setting page visible setting #', id)
+    return api.put(`/pages/${id}`, { page: { visible } })
+  },
+
+  clone: (id) => {
+    console.log('[PageService] Cloning page #', id)
+    return api.post(`/pages/${id}/clones`, {})
+  },
+
+  destroy: (id) => {
+    console.log('[PageService] Destroying page #', id)
+    return api.destroy(`/pages/${id}`)
+  },
+
+  normalize: (page) => {
+    return coreNormalize(page, PAGE_SCHEMA)
+  },
+
+  denormalize: (page, entities) => {
+    return coreDenormalize(page, PAGE_SCHEMA, entities)
+  },
+})

data/app/javascript/editor/services/section.js

@@ -0,0 +1,180 @@
+import { isBlank, uuid8, camelize } from '@/utils'
+import { normalize as coreNormalize } from 'normalizr'
+import { SECTION_SCHEMA } from './page'
+
+const NUMBER_OF_DEFAULT_BLOCKS = 3
+
+export const calculateMovingIndices = (sectionIds, sectionId, direction) => {
+  if (direction !== 'up' && direction !== 'down') return false
+
+  const fromIndex = sectionIds.indexOf(sectionId)
+  const toIndex = fromIndex + (direction === 'up' ? -1 : 1)
+
+  if (toIndex < 0 || toIndex > sectionIds.length - 1) return false
+
+  return { fromIndex, toIndex }
+}
+
+export const canBeAddedToPage = (newSectionDefinition, sections) => {
+  if (!newSectionDefinition.singleton) return true
+  return !sections.some((section) => newSectionDefinition.id === section.type)
+}
+
+export const normalize = (section) => {
+  return coreNormalize(section, SECTION_SCHEMA)
+}
+
+export const build = (definition, site) => {
+  const type = definition.id
+  const siteSection = site.sections.find(
+    (siteSection) => siteSection.type === type,
+  )
+  let settings, blocks
+
+  if (definition.siteScoped && !isBlank(siteSection)) {
+    settings = [].concat(siteSection.settings || [])
+    blocks = [].concat(siteSection.blocks || [])
+  } else {
+    settings = buildSettings(definition, definition.sample?.settings)
+    blocks = buildBlocks(definition)
+  }
+
+  return { id: uuid8(), type, settings, blocks }
+}
+
+export const getSettings = (definition, advanced) => {
+  const { settings } = definition
+  if (isBlank(settings)) return []
+  return settings.filter((setting) => {
+    const settingAdvanced = setting.options.advanced
+    return (advanced && settingAdvanced) || (!advanced && !settingAdvanced)
+  })
+}
+
+export const filterSettings = (settings, content) => {
+  return settings.filter((setting) => {
+    return (
+      !setting.options.if ||
+      content.find(({ id }) => id === setting.options.if)?.value
+    )
+  })
+}
+
+export const buildDefaultBlock = (blockType, { blocks: definitions }) => {
+  if (isBlank(definitions)) return null
+  let definition =
+    definitions.find((definition) => definition.type === blockType) ||
+    definitions[0]
+  return {
+    id: uuid8(),
+    type: definition.type,
+    settings: buildSettings(definition),
+  }
+}
+
+const buildSettings = (definition, sampleContent) => {
+  return definition.settings.map((setting) =>
+    buildSetting(
+      setting,
+      sampleContent ? sampleContent[camelize(setting.id)] : null,
+    ),
+  )
+}
+
+const buildSetting = (setting, sampleContent) => {
+  let value = sampleContent ?? setting.default
+  switch (setting.type) {
+    case 'image':
+      value = typeof value === 'string' ? { url: value } : {}
+      break
+    case 'link':
+      value =
+        typeof value === 'string' ? { linkType: 'url', href: value } : value
+      break
+  }
+  return { id: setting.id, value }
+}
+
+const buildBlocks = (definition) => {
+  if (!definition.sample?.blocks) return buildDefaultBlocks(definition)
+
+  let blockIds = {}
+
+  definition.sample.blocks.forEach((blockSample) => {
+    buildBlock(definition.blocks, blockSample, blockIds)
+  })
+
+  return Object.values(blockIds).filter((block) => block)
+}
+
+const buildBlock = (blockDefinitions, blockSample, blockIds, parentId) => {
+  const block = coreBuildBlock(blockDefinitions, blockSample, parentId)
+  if (!block) return
+  blockIds[block.id] = block
+
+  if (!blockSample.children) return
+
+  blockSample.children.forEach((childBlockSample) => {
+    buildBlock(blockDefinitions, childBlockSample, blockIds, block.id)
+  })
+}
+
+const coreBuildBlock = (blockDefinitions, blockSample, parentId) => {
+  let definition = blockDefinitions.find(
+    (definition) => definition.type === blockSample.type,
+  )
+  if (!definition) return null
+
+  let block = {
+    id: uuid8(),
+    type: definition.type,
+    settings: buildSettings(definition, blockSample.settings),
+  }
+
+  if (parentId) block.parentId = parentId
+
+  return block
+}
+
+const buildDefaultBlocks = (definition) => {
+  if (isBlank(definition.blocks)) return []
+  let blocks = []
+
+  Array.from({ length: NUMBER_OF_DEFAULT_BLOCKS }, () =>
+    blocks.push(buildDefaultBlock(null, definition)),
+  )
+  return blocks
+}
+
+export const getBlockLabel = (block, definition, index) => {
+  let label, image
+  definition.settings.forEach((setting) => {
+    const value = block.settings.find(
+      (contentSetting) => contentSetting.id === setting.id,
+    )?.value
+    switch (setting.type) {
+      case 'text':
+        if (!label) {
+          label = value
+          if (setting.options.html) {
+            let doc = new DOMParser().parseFromString(value, 'text/html')
+            label = doc.body.textContent
+          }
+        }
+        break
+      case 'image':
+        if (!image) {
+          image = value?.url
+        }
+        break
+      case 'link':
+        if (!label && !isBlank(value?.text)) {
+          label = value.text
+        }
+        break
+      default:
+        break
+    }
+  })
+  return [isBlank(label) ? `${definition.name} #${index}` : label, image]
+}

data/app/javascript/editor/services/site.js

@@ -0,0 +1,21 @@
+export default (api) => ({
+  find: async (locally) => {
+    // NOTE: we save a request to the API by attaching the site to the Window object
+    if (locally) return window.site
+
+    console.log('[SiteService] Fetching current site')
+
+    return api.get(`/site`).then(({ data }) => data)
+  },
+  updateStyle(style) {
+    return api.put(`/style`, { site: { style } }).then((response) => {
+      return response.headers['lock-version']
+    })
+  },
+  publish() {
+    return api.post(`/publication`).then(({ data }) => data)
+  },
+  getLastPublication() {
+    return api.get(`/publication`).then(({ data }) => data)
+  },
+})