maglevcms 1.0.0 → 1.1.0

data/app/{javascript → frontend}/editor/store/actions/section.js

@@ -1,4 +1,4 @@
-import { isBlank } from '@/utils'
+import { isBlank } from '@/misc/utils'
 
 export default (services) => ({
   fetchSection({ commit, state: { sections } }, id) {
@@ -13,54 +13,43 @@ export default (services) => ({
     commit('SET_HOVERED_SECTION', null)
   },
   addSection(
-    { commit, getters, state: { site, previewDocument } },
+    { commit, getters, state: { site } },
     { sectionDefinition, insertAt },
   ) {
     if (sectionDefinition.insertAt) insertAt = sectionDefinition.insertAt
     const section = services.section.build(sectionDefinition, site)
     commit('ADD_SECTION', { section, insertAt })
     commit('TOUCH_SECTION', section.id)
-    services.inlineEditing.addSection(
-      previewDocument,
-      getters.content,
-      section,
-      insertAt,
-    )
+    services.livePreview.addSection(getters.content, section, insertAt)
     return section
   },
-  removeSection({ commit, state: { previewDocument } }, sectionId) {
+  removeSection({ commit }, sectionId) {
     commit('REMOVE_SECTION', sectionId)
-    services.inlineEditing.removeSection(previewDocument, sectionId)
+    services.livePreview.removeSection(sectionId)
   },
-  updateSectionContent(
-    { commit, getters, state: { previewDocument, section } },
-    change,
-  ) {
+  updateSectionContent({ commit, getters, state: { section } }, change) {
     commit('UPDATE_SECTION_CONTENT', change)
     commit('TOUCH_SECTION', section.id)
-    services.inlineEditing.updateSectionSetting(
-      previewDocument,
+    services.livePreview.updateSection(
       getters.content,
-      section,
-      null,
+      getters.denormalizedSection,
       change,
     )
   },
   moveSection(
     {
       commit,
+      getters,
       state: {
-        previewDocument,
         page: { sections },
       },
     },
     { from, to },
   ) {
-    // console.log('moveSection', from, sections[from], 'to', sections[to], to)
     if (isBlank(from) || isBlank(to)) return
     commit('MOVE_HOVERED_SECTION', { fromIndex: from, toIndex: to })
-    services.inlineEditing.updateMoveSection(
-      previewDocument,
+    services.livePreview.moveSection(
+      getters.content,
       sections[from],
       sections[to],
       from < to ? 'down' : 'up',

data/app/{javascript → frontend}/editor/store/actions/site.js

@@ -21,12 +21,8 @@ export default (services) => ({
     dispatch('loadPublishButtonState')
     setInterval(() => dispatch('loadPublishButtonState'), 5000)
   },
-  previewStyle({ commit, getters, state: { previewDocument } }, newStyle) {
+  previewStyle({ commit, getters }, newStyle) {
     commit('SET_STYLE', newStyle)
-    services.inlineEditing.previewStyle(
-      previewDocument,
-      getters.content,
-      newStyle,
-    )
+    services.livePreview.updateStyle(getters.content, newStyle)
   },
 })

data/app/{javascript → frontend}/editor/store/default-state.js

@@ -1,7 +1,6 @@
 export default {
   device: 'desktop',
   previewReady: false,
-  previewDocument: null,
   site: null,
   style: null,
   locale: null,

data/app/{javascript → frontend}/editor/store/getters.js

@@ -18,6 +18,9 @@ export default (services) => ({
       }
     })
   },
+  stickySectionList: ({}, { sectionList }) => {
+    return sectionList.filter((section) => section.viewportFixedPosition)
+  },
   defaultPageAttributes: ({ page }) => {
     if (page.translated) return {}
     return { title: page.title, path: page.path }
@@ -41,6 +44,13 @@ export default (services) => ({
       siteSections: hasModifiedSiteScopedSections ? siteSections : [],
     }
   },
+  denormalizedSection: ({ page, sections, sectionBlocks, section }) => {
+    const pageContent = services.page.denormalize(page, {
+      sections,
+      blocks: sectionBlocks,
+    })
+    return pageContent.sections.find((s) => s.id == section.id)
+  },
   sectionContent: ({ section }) => {
     return section ? [...section.settings] : null
   },

data/app/{javascript → frontend}/editor/store/mutations.js

@@ -1,15 +1,19 @@
-import { arraymove, pick, omitEmpty } from '@/utils'
+import { arraymove, pick, omitEmpty } from '@/misc/utils'
 import { SETTING_ATTRIBUTES as PAGE_SETTING_ATTRIBUTES } from '@/services/page'
 
 export default (services) => ({
   SET_DEVICE(state, value) {
     state.device = value
   },
-  SET_PREVIEW_DOCUMENT(state, previewDocument) {
+  MARK_PREVIEW_AS_READY(state) {
     state.hoveredSection = null
     state.section = null
-    state.previewReady = !!previewDocument
-    state.previewDocument = previewDocument
+    state.previewReady = true
+  },
+  RESET_PREVIEW(state) {
+    state.hoveredSection = null
+    state.section = null
+    state.previewReady = false
   },
   SET_EDITOR_SETTINGS(state, editorSettings) {
     state.editorSettings = editorSettings

data/app/{javascript → frontend}/editor/views/content-pane.vue

@@ -34,9 +34,9 @@
 </template>
 
 <script>
-import Layout from '@/layouts/slide-pane'
-import SectionPane from '@/components/section-pane'
-import SectionBlockPane from '@/components/section-block-pane'
+import Layout from '@/layouts/slide-pane.vue'
+import SectionPane from '@/components/section-pane/index.vue'
+import SectionBlockPane from '@/components/section-block-pane/index.vue'
 
 export default {
   name: 'ContentPane',

data/app/{javascript → frontend}/editor/views/page-preview.vue

@@ -74,9 +74,9 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
+import { mapState } from 'vuex'
 import TransformationMixin from '@/mixins/preview-transformation'
-import SectionHighlighter from '@/components/section-highlighter'
+import SectionHighlighter from '@/components/section-highlighter/index.vue'
 
 export default {
   name: 'PagePreview',
@@ -132,19 +132,8 @@ export default {
     },
   },
   methods: {
-    ...mapActions(['setPreviewDocument']),
     onIframeLoaded() {
-      const newUrl = new URL(
-        this.$refs['iframe'].contentWindow.document.location.href,
-      )
-
-      if (this.currentPage.previewUrl !== newUrl.pathname) {
-        this.setPreviewDocument(null)
-        this.$refs['iframe'].src = this.currentPage.previewUrl
-        return false
-      }
-
-      this.setPreviewDocument(this.$refs['iframe'].contentDocument)
+      this.services.livePreview.start(this.$refs['iframe'])
     },
   },
   watch: {

data/app/{javascript → frontend}/editor/views/pages/edit.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script>
-import Layout from '@/layouts/slide-pane'
-import EditPage from '@/components/page/edit'
+import Layout from '@/layouts/slide-pane.vue'
+import EditPage from '@/components/page/edit.vue'
 
 export default {
   name: 'EditPageView',

data/app/{javascript → frontend}/editor/views/pages/index.vue

@@ -28,9 +28,9 @@
 </template>
 
 <script>
-import Layout from '@/layouts/slide-pane'
-import PageList from '@/components/page/list'
-import NewPageModal from '@/components/page/new'
+import Layout from '@/layouts/slide-pane.vue'
+import PageList from '@/components/page/list/index.vue'
+import NewPageModal from '@/components/page/new.vue'
 
 export default {
   name: 'PageListView',

data/app/{javascript → frontend}/editor/views/sections/add-pane.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script>
-import Layout from '@/layouts/slide-pane'
-import ThemeSectionList from '@/components/theme-section-list'
+import Layout from '@/layouts/slide-pane.vue'
+import ThemeSectionList from '@/components/theme-section-list/index.vue'
 
 export default {
   name: 'SectionListPane',

data/app/{javascript → frontend}/editor/views/sections/list-pane.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script>
-import Layout from '@/layouts/slide-pane'
-import SectionList from '@/components/section-list'
+import Layout from '@/layouts/slide-pane.vue'
+import SectionList from '@/components/section-list/index.vue'
 
 export default {
   name: 'SectionListPane',

data/app/{javascript → frontend}/editor/views/slide-pane.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Layout from '@/layouts/slide-pane'
+import Layout from '@/layouts/slide-pane.vue'
 
 export default {
   name: 'SlidePane1',

data/app/{javascript → frontend}/editor/views/slide-pane2.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Layout from '@/layouts/slide-pane'
+import Layout from '@/layouts/slide-pane.vue'
 
 export default {
   name: 'SlidePane2',

data/app/{javascript → frontend}/editor/views/style/edit-pane.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import Layout from '@/layouts/slide-pane'
-import StylePane from '@/components/style-pane'
+import Layout from '@/layouts/slide-pane.vue'
+import StylePane from '@/components/style-pane/index.vue'
 
 export default {
   name: 'SectionListPane',

data/app/frontend/entrypoints/admin.js

@@ -0,0 +1,3 @@
+console.log('Maglev admin ⚡️')
+
+import {} from '~/admin'

data/app/frontend/entrypoints/editor.js

@@ -0,0 +1,8 @@
+console.log('Maglev Editor ⚡️')
+
+import Editor from '~/editor/main'
+import '~/editor/design/application.scss'
+
+document.addEventListener('DOMContentLoaded', () => {
+  Editor.start()
+})

data/app/frontend/entrypoints/live-preview-client.js

@@ -0,0 +1,6 @@
+import Client from '~/live-preview-client/index'
+
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('Maglev Live Preview 🚀')
+  Client.start()
+})

data/app/frontend/entrypoints/live-preview-rails-client.js

@@ -0,0 +1,9 @@
+import Client from '~/live-preview-client/index'
+import RailsClient from '~/live-preview-client/rails'
+
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('[Rails] Maglev Live Preview 🚀')
+  if (Client.start()) {
+    RailsClient.start()
+  }
+})

data/app/frontend/live-preview-client/iframe-decorator.js

@@ -0,0 +1,196 @@
+import { postMessage } from './message'
+import { debounce, isBlank } from './utils'
+
+// keep track of the current hovered section
+let listeners = []
+let hoveredSectionId = null
+
+export const start = (config) => {
+  const previewDocument = window.document
+
+  // set the primary color
+  previewDocument.head.insertAdjacentHTML(
+    'beforeend',
+    `<style type="text/css">:root { --maglev-editor-outline-color: ${config.primaryColor}; }</style>`,
+  )
+
+  // mousescroll
+  listenScrolling(previewDocument)
+
+  // mouseenter
+  listen(previewDocument, 'mouseenter', (el, type) => {
+    switch (type) {
+      case 'section':
+        return onSectionHovered(previewDocument, el, config.stickySectionIds)
+      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)
+}
+
+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
+  })
+
+  const debouncedScrollNotifier = debounce(() => {
+    const el = previewDocument
+      .elementFromPoint(mouseX, mouseY)
+      ?.closest('[data-maglev-section-id]')
+
+    if (el) postMessage('scroll', { boundingRect: el.getBoundingClientRect() })
+  }, 10)
+
+  addEventListener(previewDocument, 'scroll', debouncedScrollNotifier)
+}
+
+const onSectionHovered = (previewDocument, el, stickySectionIds) => {
+  const sectionId = el.dataset.maglevSectionId
+  if (hoveredSectionId !== sectionId) {
+    postMessage('section:hover', {
+      sectionId,
+      sectionRect: el.getBoundingClientRect(),
+      sectionOffsetTop: getMinTop(previewDocument, sectionId, stickySectionIds),
+    })
+    hoveredSectionId = sectionId
+  }
+}
+
+const getMinTop = (previewDocument, currentSectionId, stickySectionIds) => {
+  for (var i = 0; i < stickySectionIds.length; i++) {
+    const sectionId = stickySectionIds[i]
+    if (sectionId === currentSectionId) return 0 // hovering a sticky section!
+
+    const selector = `[data-maglev-section-id='${sectionId}']`
+    const stickyElement = previewDocument.querySelector(selector)
+
+    if (stickyElement) return stickyElement.offsetHeight // found sticky element found
+  }
+  return 0
+}
+
+const onSectionLeft = () => {
+  postMessage('section:leave')
+  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) => {
+  event.stopPropagation() & event.preventDefault()
+
+  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'
+
+  postMessage(`${prefix}:setting:clicked`, {
+    [`${prefix}Id`]: fragments[0],
+    settingId: fragments[1],
+  })
+}
+
+const addEventListener = (target, type, listener, capture) => {
+  listeners.push({ target, type, listener })
+  target.addEventListener(type, listener, capture)
+}
+
+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 getElementType = (el) => {
+  return el.dataset.maglevSectionId ? 'section' : 'setting'
+}

data/app/frontend/live-preview-client/index.js

@@ -0,0 +1,12 @@
+import { listenMessages } from './message'
+
+const start = () => {
+  if (window.location === window.parent.location) {
+    console.log('🚨 not in the Maglev editor')
+    return false
+  }
+  listenMessages()
+  return true
+}
+
+export default { start }

data/app/frontend/live-preview-client/message.js

@@ -0,0 +1,46 @@
+import { start as decorateIframe } from './iframe-decorator'
+
+const mainWindow = window.parent
+
+export const listenMessages = () => {
+  window.addEventListener('message', ({ data: { type, ...data } }) => {
+    // a message MUST have a type
+    if (!type) return
+
+    switch (type) {
+      case 'config':
+        decorateIframe({
+          primaryColor: data.primaryColor,
+          stickySectionIds: data.stickySectionIds,
+        })
+
+        // we answer back we're ready!
+        postMessage('ready', { message: "👋, I'm a Maglev site and I'm ready" })
+        break
+      case 'section:add':
+      case 'section:move':
+      case 'section:update':
+      case 'section:remove':
+      case 'block:add':
+      case 'block:move':
+      case 'block:update':
+      case 'block:remove':
+      case 'style:update':
+        triggerEvent(type, data)
+        break
+      default:
+        console.log('[maglev][iframe] unknown message type', type)
+        break
+    }
+  })
+}
+
+export const postMessage = (type, data) => {
+  mainWindow.postMessage({ type, ...(data || {}) }, '*')
+}
+
+// local event
+const triggerEvent = (type, data) => {
+  const event = new CustomEvent(`maglev:${type}`, { detail: data })
+  window.dispatchEvent(event)
+}