maglevcms 1.0.0.rc3 → 1.1.0

data/app/{javascript → frontend}/editor/router/index.js

@@ -13,7 +13,7 @@ const router = new VueRouter({
 
 router.beforeEach((to, from, next) => {
   if (to.params.pageId !== from.params.pageId && from.params.pageId)
-    store.dispatch('setPreviewDocument', null) // force the display of the loader
+    store.dispatch('resetPreview') // force the display of the loader
   next()
 })
 

data/app/{javascript → frontend}/editor/router/routes/base.js

@@ -1,7 +1,7 @@
-import AppLayout from '@/layouts/app'
-import PagePreview from '@/views/page-preview'
-import SlidePane from '@/views/slide-pane'
-import SlidePane2 from '@/views/slide-pane2'
+import AppLayout from '@/layouts/app.vue'
+import PagePreview from '@/views/page-preview.vue'
+import SlidePane from '@/views/slide-pane.vue'
+import SlidePane2 from '@/views/slide-pane2.vue'
 import pageRoutes from './page'
 import sectionRoutes from './section'
 import sectionBlockRoutes from './section-block'

data/app/{javascript → frontend}/editor/router/routes/page.js

@@ -1,6 +1,6 @@
-import PagePreview from '@/views/page-preview'
-import PageList from '@/views/pages/index'
-import EditPage from '@/views/pages/edit'
+import PagePreview from '@/views/page-preview.vue'
+import PageList from '@/views/pages/index.vue'
+import EditPage from '@/views/pages/edit.vue'
 
 export default [
   {

data/app/{javascript → frontend}/editor/router/routes/section-block.js

@@ -1,5 +1,5 @@
-import PagePreview from '@/views/page-preview'
-import ContentPane from '@/views/content-pane'
+import PagePreview from '@/views/page-preview.vue'
+import ContentPane from '@/views/content-pane.vue'
 
 export default [
   {

data/app/{javascript → frontend}/editor/router/routes/section.js

@@ -1,7 +1,7 @@
-import PagePreview from '@/views/page-preview'
-import ContentPane from '@/views/content-pane'
-import SectionAddPane from '@/views/sections/add-pane'
-import SectionListPane from '@/views/sections/list-pane'
+import PagePreview from '@/views/page-preview.vue'
+import ContentPane from '@/views/content-pane.vue'
+import SectionAddPane from '@/views/sections/add-pane.vue'
+import SectionListPane from '@/views/sections/list-pane.vue'
 
 export default [
   {

data/app/{javascript → frontend}/editor/router/routes/style.js

@@ -1,5 +1,5 @@
-import PagePreview from '@/views/page-preview'
-import EditStylePane from '@/views/style/edit-pane'
+import PagePreview from '@/views/page-preview.vue'
+import EditStylePane from '@/views/style/edit-pane.vue'
 
 export default [
   {

data/app/{javascript → frontend}/editor/services/image.js

@@ -1,6 +1,5 @@
 export default (api) => ({
   findAll: (page, perPage, query) => {
-    console.log('[ImageService] Fetching all the images, page #', page, query)
     const options = { params: { page, perPage, query, assetType: 'image' } }
     return api.get('/assets', options).then(({ data }) => data)
   },

data/app/{javascript → frontend}/editor/services/index.js

@@ -6,7 +6,7 @@ import buildCollectionItemService from './collection-item'
 import buildImageService from './image'
 import * as section from './section'
 import * as block from './block'
-import * as inlineEditing from './inline-editing'
+import * as livePreview from './live-preview'
 
 export default {
   api,
@@ -16,6 +16,6 @@ export default {
   section,
   block,
   image: buildImageService(api),
-  inlineEditing,
+  livePreview,
   collectionItem: buildCollectionItemService(api),
 }

data/app/frontend/editor/services/live-preview.js

@@ -0,0 +1,121 @@
+import router from '@/router'
+import store from '@/store'
+
+let iframe = null
+
+// === Section related actions ===
+export const addSection = (content, section, insertAt) => {
+  postMessage('section:add', { content, section, insertAt })
+}
+
+export const moveSection = (content, sectionId, targetSectionId, direction) => {
+  postMessage('section:move', {
+    content,
+    sectionId,
+    targetSectionId,
+    direction,
+  })
+}
+
+// the editor modifies the content of a section setting
+export const updateSection = (content, section, change) => {
+  postMessage('section:update', { content, section, change })
+}
+
+export const removeSection = (sectionId) => {
+  postMessage('section:remove', { sectionId })
+}
+
+// === Block related actions ===
+export const addBlock = (content, section, sectionBlock) => {
+  postMessage('block:add', { content, section, sectionBlock })
+}
+
+export const moveBlock = (content, section) => {
+  postMessage('block:move', { content, section })
+}
+
+export const updateBlock = (content, section, sectionBlock, change) => {
+  postMessage('block:update', { content, section, sectionBlock, change })
+}
+
+export const removeBlock = (content, section, sectionBlockId) => {
+  postMessage('block:remove', { content, section, sectionBlockId })
+}
+
+// === Other actions ===
+
+export const updateStyle = (content, style) => {
+  postMessage('style:update', { content, style })
+}
+
+// Start everything
+export const start = (newIframe) => {
+  // keep a reference to the current iframe
+  iframe = newIframe
+
+  // say hi to the iFrame by giving it the configuration
+  postMessage('config', {
+    primaryColor: store.state.editorSettings.primaryColor,
+    stickySectionIds: store.getters.stickySectionList.map(
+      (section) => section.id,
+    ),
+  })
+
+  // treat all the message coming from the iFrame
+  listenMessages()
+}
+
+const listenMessages = () => {
+  window.addEventListener('message', ({ data: { type, ...data } }) => {
+    // a message MUST have a type
+    if (!type) return
+
+    switch (type) {
+      case 'ready':
+        store.dispatch('markPreviewAsReady')
+        break
+      case 'scroll':
+        notifyScrolling(data.boundingRect)
+        break
+      case 'section:hover': {
+        store.dispatch('hoverSection', {
+          sectionId: data.sectionId,
+          sectionRect: data.sectionRect,
+          sectionOffsetTop: data.sectionOffsetTop, //sectionOffsetHeight,
+        })
+        break
+      }
+      case 'section:leave':
+        store.dispatch('leaveSection')
+        break
+      case 'section:setting:clicked':
+        openSettingPane('editSectionSetting', data)
+        break
+      case 'sectionBlock:setting:clicked':
+        openSettingPane('editSectionBlockSetting', data)
+        break
+      default:
+        break
+    }
+  })
+}
+
+const postMessage = (type, data) => {
+  if (!iframe) return null
+  iframe.contentWindow.postMessage({ type, ...(data || {}) }, '*')
+}
+
+const openSettingPane = (name, params) => {
+  let route = { name, params, hash: '#content' }
+  router.push(route).catch((err) => {
+    if (err.name !== 'NavigationDuplicated') throw err
+  })
+}
+
+const notifyScrolling = (boundingRect) => {
+  const event = new CustomEvent('maglev:preview:scroll', {
+    detail: { boundingRect },
+  })
+  window.dispatchEvent(event)
+}

data/app/{javascript → frontend}/editor/services/page.js

@@ -3,7 +3,7 @@ import {
   denormalize as coreDenormalize,
   schema,
 } from 'normalizr'
-import { pick } from '@/utils'
+import { pick } from '@/misc/utils'
 
 export const BLOCK_SCHEMA = new schema.Entity('blocks')
 export const SECTION_SCHEMA = new schema.Entity('sections', {

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

@@ -1,4 +1,4 @@
-import { isBlank, uuid8, camelize } from '@/utils'
+import { isBlank, uuid8, camelize } from '@/misc/utils'
 import { normalize as coreNormalize } from 'normalizr'
 import { SECTION_SCHEMA } from './page'
 

data/app/frontend/editor/spec/__mocks__/services.js

@@ -0,0 +1,83 @@
+import { vi } from 'vitest'
+
+const apiService = {
+  setSiteHandle: vi.fn(),
+  setSiteLocale: vi.fn(),
+  get: vi.fn(),
+  post: vi.fn(),
+  put: vi.fn(),
+  destroy: vi.fn(),
+}
+
+const siteService = {
+  find: vi.fn(),
+}
+
+const themeService = {
+  buildCategories: vi.fn(),
+}
+
+const pageService = {
+  isIndex: vi.fn(),
+  build: vi.fn(),
+  findAll: vi.fn(),
+  findById: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  updateSettings: vi.fn(),
+  setVisible: vi.fn(),
+  clone: vi.fn(),
+  destroy: vi.fn(),
+  normalize: vi.fn(),
+  denormalize: vi.fn(),
+}
+
+const sectionService = {
+  calculateMovingIndices: vi.fn(),
+  canBeAddedToPage: vi.fn(),
+  normalize: vi.fn(),
+  build: vi.fn(),
+  getSettings: vi.fn(),
+  buildDefaultBlock: vi.fn(),
+}
+
+const blockService = {
+  encodeToTree: vi.fn(),
+  decodeTree: vi.fn(),
+}
+
+const imageService = {
+  findAll: vi.fn(),
+  find: vi.fn(),
+  create: vi.fn(),
+  destroy: vi.fn(),
+}
+
+const livePreviewService = {
+  start: vi.fn(),
+  updateStyle: vi.fn(),
+  addSection: vi.fn(),
+  moveSection: vi.fn(),
+  updateSection: vi.fn(),
+  removeSection: vi.fn(),
+  addBlock: vi.fn(),
+  moveBlock: vi.fn(),
+  updateBlock: vi.fn(),
+  removeBlock: vi.fn(),
+}
+
+const collectionItemService = {
+  findAll: vi.fn(),
+}
+
+export default {
+  api: apiService,
+  site: siteService,
+  theme: themeService,
+  page: pageService,
+  section: sectionService,
+  block: blockService,
+  image: imageService,
+  livePreview: livePreviewService,
+  collectionItem: collectionItemService,
+}

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

@@ -1,4 +1,5 @@
 import Vuex from 'vuex'
+import { vi } from 'vitest'
 import { createLocalVue } from '@vue/test-utils'
 import defaultState from '@/store/default-state'
 import buildGetters from '@/store/getters'
@@ -30,7 +31,7 @@ describe('Getters', () => {
 
   describe('#content', () => {
     it('returns the content of the sections for the page', () => {
-      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.page.denormalize = vi.fn(() => page)
       expect(
         store.getters.content.pageSections.map((section) => section.id),
       ).toStrictEqual(['GrYZW-VP', '8hKSujtd', 'xM6f-kyh'])
@@ -40,7 +41,7 @@ describe('Getters', () => {
     })
     it('returns the site content sections since they have been touched', () => {
       store.commit('TOUCH_SECTION', 'GrYZW-VP')
-      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.page.denormalize = vi.fn(() => page)
       expect(
         store.getters.content.pageSections.map((section) => section.id),
       ).toStrictEqual(['GrYZW-VP', '8hKSujtd', 'xM6f-kyh'])
@@ -55,7 +56,7 @@ describe('Getters', () => {
       it('returns the title + path', () => {
         const newNormalizedPage = { ...normalizedPage }
         newNormalizedPage.entities.page['1'].translated = false
-        mockedServices.page.normalize = jest.fn(() => normalizedPage)
+        mockedServices.page.normalize = vi.fn(() => normalizedPage)
         store.commit('SET_PAGE', page)
         expect(store.getters.defaultPageAttributes).toStrictEqual({
           title: 'Home page',
@@ -67,7 +68,7 @@ describe('Getters', () => {
       it('returns an empty object', () => {
         const newNormalizedPage = { ...normalizedPage }
         newNormalizedPage.entities.page['1'].translated = true
-        mockedServices.page.normalize = jest.fn(() => normalizedPage)
+        mockedServices.page.normalize = vi.fn(() => normalizedPage)
         store.commit('SET_PAGE', page)
         expect(store.getters.defaultPageAttributes).toStrictEqual({})
       })
@@ -76,7 +77,7 @@ describe('Getters', () => {
 
   describe('#sectionList', () => {
     it('returns a list of objects (id, type, name, viewportFixedPosition)', () => {
-      mockedServices.page.denormalize = jest.fn(() => page)
+      mockedServices.page.denormalize = vi.fn(() => page)
       expect(store.getters.sectionList).toStrictEqual([
         {
           id: 'GrYZW-VP',

data/app/{javascript → frontend}/editor/store/actions/__tests__/page.spec.js

@@ -1,4 +1,5 @@
 import Vuex from 'vuex'
+import { vi } from 'vitest'
 import { createLocalVue } from '@vue/test-utils'
 import defaultState from '@/store/default-state'
 import buildActions from '@/store/actions'
@@ -32,11 +33,11 @@ describe('Page Actions', () => {
 
   describe('#persistPage', () => {
     it('calls the API with both site and page attributes', async () => {
-      mockedServices.site.find = jest.fn(async () => site)
-      mockedServices.page.normalize = jest.fn(() => normalizedPage)
-      mockedServices.page.denormalize = jest.fn(() => page)
-      mockedServices.page.findById = jest.fn(async () => page)
-      mockedServices.page.update = jest.fn(async () => ({
+      mockedServices.site.find = vi.fn(async () => site)
+      mockedServices.page.normalize = vi.fn(() => normalizedPage)
+      mockedServices.page.denormalize = vi.fn(() => page)
+      mockedServices.page.findById = vi.fn(async () => page)
+      mockedServices.page.update = vi.fn(async () => ({
         response: { status: 200 },
       }))
       store.commit('SET_PAGE', page)
@@ -47,16 +48,18 @@ describe('Page Actions', () => {
           sections: expect.any(Array),
           lockVersion: 1,
         },
-        {},
+        {
+          style: null,
+        },
       )
       expect(store.state.ui.saveButtonState).toEqual('success')
     })
     it('calls the API without the site attributes because no site scoped section has been modified', async () => {
-      mockedServices.site.find = jest.fn(async () => site)
-      mockedServices.page.normalize = jest.fn(() => normalizedPage)
-      mockedServices.page.denormalize = jest.fn(() => page)
-      mockedServices.page.findById = jest.fn(async () => page)
-      mockedServices.page.update = jest.fn(async () => ({
+      mockedServices.site.find = vi.fn(async () => site)
+      mockedServices.page.normalize = vi.fn(() => normalizedPage)
+      mockedServices.page.denormalize = vi.fn(() => page)
+      mockedServices.page.findById = vi.fn(async () => page)
+      mockedServices.page.update = vi.fn(async () => ({
         response: { status: 200 },
       }))
       store.commit('SET_PAGE', page)
@@ -71,6 +74,7 @@ describe('Page Actions', () => {
         {
           sections: expect.any(Array),
           lockVersion: 1,
+          style: null,
         },
       )
       expect(store.state.touchedSections).toEqual([])
@@ -80,7 +84,7 @@ describe('Page Actions', () => {
 
   describe('#setCurrentPageSettings', () => {
     it('does stuff', async () => {
-      mockedServices.page.normalize = jest.fn(() => normalizedPage)
+      mockedServices.page.normalize = vi.fn(() => normalizedPage)
       store.commit('SET_PAGE', page)
       await store.dispatch('setCurrentPageSettings', {
         title: 'UPDATED TITLE',

data/app/{javascript → frontend}/editor/store/actions/__tests__/section-block.spec.js

@@ -1,4 +1,5 @@
 import Vuex from 'vuex'
+import { vi } from 'vitest'
 import { createLocalVue } from '@vue/test-utils'
 import defaultState from '@/store/default-state'
 import buildActions from '@/store/actions'
@@ -36,12 +37,12 @@ describe('SectionBlock Actions', () => {
 
   describe('#addSectionBlock', () => {
     it('marks the current section as touched', async () => {
-      mockedServices.page.normalize = jest.fn(() => normalizedPage)
-      mockedServices.page.denormalize = jest.fn(() => page)
-      mockedServices.section.normalize = jest.fn(
+      mockedServices.page.normalize = vi.fn(() => normalizedPage)
+      mockedServices.page.denormalize = vi.fn(() => page)
+      mockedServices.section.normalize = vi.fn(
         () => normalizedNavContentSection,
       )
-      mockedServices.section.buildDefaultBlock = jest.fn(
+      mockedServices.section.buildDefaultBlock = vi.fn(
         () => navContentSectionBlock,
       )
       store.commit('SET_PAGE', page)
@@ -56,9 +57,9 @@ describe('SectionBlock Actions', () => {
 
   describe('#removeSectionBlock', () => {
     it('marks the current section as touched', async () => {
-      mockedServices.page.normalize = jest.fn(() => normalizedPage)
-      mockedServices.page.denormalize = jest.fn(() => page)
-      mockedServices.section.normalize = jest.fn(
+      mockedServices.page.normalize = vi.fn(() => normalizedPage)
+      mockedServices.page.denormalize = vi.fn(() => page)
+      mockedServices.section.normalize = vi.fn(
         () => normalizedNavContentSection,
       )
       store.commit('SET_PAGE', page)
@@ -70,9 +71,9 @@ describe('SectionBlock Actions', () => {
 
   describe('#sortSectionBlocks', () => {
     it('marks the current section as touched', async () => {
-      mockedServices.page.normalize = jest.fn(() => normalizedPage)
-      mockedServices.page.denormalize = jest.fn(() => page)
-      mockedServices.section.normalize = jest.fn(
+      mockedServices.page.normalize = vi.fn(() => normalizedPage)
+      mockedServices.page.denormalize = vi.fn(() => page)
+      mockedServices.section.normalize = vi.fn(
         () => normalizedNavContentSection,
       )
       store.commit('SET_PAGE', page)
@@ -89,9 +90,9 @@ describe('SectionBlock Actions', () => {
 
   describe('#updateSectionBlockContent', () => {
     it('marks the current section as touched', async () => {
-      mockedServices.page.normalize = jest.fn(() => normalizedPage)
-      mockedServices.page.denormalize = jest.fn(() => page)
-      mockedServices.section.normalize = jest.fn(
+      mockedServices.page.normalize = vi.fn(() => normalizedPage)
+      mockedServices.page.denormalize = vi.fn(() => page)
+      mockedServices.section.normalize = vi.fn(
         () => normalizedNavContentSection,
       )
       store.commit('SET_PAGE', page)

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

@@ -1,4 +1,5 @@
 import Vuex from 'vuex'
+import { vi } from 'vitest'
 import { createLocalVue } from '@vue/test-utils'
 import defaultState from '@/store/default-state'
 import buildActions from '@/store/actions'
@@ -36,10 +37,10 @@ describe('Section Actions', () => {
 
   describe('#addSection', () => {
     it('marks the new section as touched', async () => {
-      mockedServices.section.build = jest.fn(() => simpleContentSection)
-      mockedServices.page.normalize = jest.fn(() => normalizedPage)
-      mockedServices.page.denormalize = jest.fn(() => page)
-      mockedServices.section.normalize = jest.fn(
+      mockedServices.section.build = vi.fn(() => simpleContentSection)
+      mockedServices.page.normalize = vi.fn(() => normalizedPage)
+      mockedServices.page.denormalize = vi.fn(() => page)
+      mockedServices.section.normalize = vi.fn(
         () => normalizedSimpleContentSection,
       )
       store.commit('SET_PAGE', page)

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

@@ -14,14 +14,11 @@ export default (services) => ({
     services.api.setLocale(locale)
     commit('SET_LOCALE', locale)
   },
-  setPreviewDocument({ commit }, previewDocument) {
-    commit('SET_PREVIEW_DOCUMENT', previewDocument)
-    if (previewDocument) {
-      services.inlineEditing.setup(previewDocument)
-    } else {
-      commit('SET_SECTION', null)
-      commit('SET_HOVERED_SECTION', null)
-    }
+  markPreviewAsReady({ commit }) {
+    commit('MARK_PREVIEW_AS_READY')
+  },
+  resetPreview({ commit }) {
+    commit('RESET_PREVIEW')
   },
   fetchEditorSettings({ commit }) {
     commit('SET_EDITOR_SETTINGS', {

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

@@ -1,4 +1,4 @@
-import { isBlank } from '@/utils'
+import { isBlank } from '@/misc/utils'
 
 export default (services) => ({
   // Fetch a page from an id (or a path)
@@ -33,7 +33,7 @@ export default (services) => ({
           style,
         }
 
-    services.page
+    return services.page
       .update(page.id, pageAttributes, siteAttributes)
       .then(() => {
         commit('SET_SAVE_BUTTON_STATE', 'success')

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

@@ -11,7 +11,7 @@ export default (services) => ({
     return sectionBlock
   },
   addSectionBlock(
-    { commit, getters, state: { previewDocument, section, sectionDefinition } },
+    { commit, getters, state: { section, sectionDefinition } },
     { blockType, parentId },
   ) {
     const sectionBlock = services.section.buildDefaultBlock(
@@ -21,52 +21,35 @@ export default (services) => ({
     if (parentId) sectionBlock.parentId = parentId
     commit('ADD_SECTION_BLOCK', sectionBlock)
     commit('TOUCH_SECTION', section.id)
-    services.inlineEditing.updateSectionSetting(
-      previewDocument,
+    services.livePreview.addBlock(
       getters.content,
-      section,
+      getters.denormalizedSection,
       sectionBlock,
-      null,
     )
   },
-  removeSectionBlock(
-    { commit, getters, state: { previewDocument, section } },
-    id,
-  ) {
+  removeSectionBlock({ commit, getters, state: { section } }, id) {
     commit('REMOVE_SECTION_BLOCK', id)
     commit('TOUCH_SECTION', section.id)
-    services.inlineEditing.updateSectionSetting(
-      previewDocument,
+    services.livePreview.removeBlock(
       getters.content,
-      section,
-      null,
-      null,
+      getters.denormalizedSection,
+      id,
     )
   },
-  sortSectionBlocks(
-    { commit, getters, state: { previewDocument, section } },
-    change,
-  ) {
+  sortSectionBlocks({ commit, getters, state: { section } }, change) {
     commit('SORT_SECTION_BLOCKS', change)
     commit('TOUCH_SECTION', section.id)
-    services.inlineEditing.updateSectionSetting(
-      previewDocument,
-      getters.content,
-      section,
-      null,
-      null,
-    )
+    services.livePreview.moveBlock(getters.content, getters.denormalizedSection)
   },
   updateSectionBlockContent(
-    { commit, getters, state: { previewDocument, section, sectionBlock } },
+    { commit, getters, state: { section, sectionBlock } },
     change,
   ) {
     commit('UPDATE_SECTION_BLOCK_CONTENT', change)
     commit('TOUCH_SECTION', section.id)
-    services.inlineEditing.updateSectionSetting(
-      previewDocument,
+    services.livePreview.updateBlock(
       getters.content,
-      section,
+      getters.denormalizedSection,
       sectionBlock,
       change,
     )