maglevcms 1.0.0.rc1

data/app/javascript/editor/mixins/grouped-dropdowns.js

@@ -0,0 +1,17 @@
+export default {
+  data() {
+    return { currentDropdown: null }
+  },
+  methods: {
+    onDropdownToggle(dropdown) {
+      if (
+        dropdown.open &&
+        this.currentDropdown &&
+        dropdown !== this.currentDropdown
+      ) {
+        this.currentDropdown.close()
+      }
+      this.currentDropdown = dropdown
+    },
+  },
+}

data/app/javascript/editor/mixins/index.js

@@ -0,0 +1 @@
+import './global'

data/app/javascript/editor/mixins/preview-transformation.js

@@ -0,0 +1,60 @@
+import { vueWindowSizeMixin } from 'vue-window-size'
+
+export default {
+  mixins: [vueWindowSizeMixin],
+  computed: {
+    previewLeftPadding() {
+      return this.currentSection ? this.calculatePreviewLeftPadding() : 0
+    },
+    previewPaneMaxWidth() {
+      const sectionPaneWidth =
+        document.querySelector('.slide-pane')?.offsetWidth || 0
+      console.log('previewPaneMaxWidth', this.windowWidth, sectionPaneWidth)
+      return this.windowWidth - sectionPaneWidth
+    },
+    previewScaleRatio() {
+      if (!this.mustPreviewScale()) return 1
+      const sidebarWidth = document.querySelector(
+        '.content-area > aside',
+      ).offsetWidth
+      const sectionPaneWidth = document.querySelector('.slide-pane').offsetWidth
+      return (
+        (this.windowWidth - sectionPaneWidth) /
+        (this.windowWidth - sidebarWidth)
+      )
+    },
+    hasEnoughWidthForTablet() {
+      return (
+        this.isTabletDevice &&
+        this.previewPaneMaxWidth > this.deviceWidthMap.tablet
+      )
+    },
+    hasEnoughWidthForMobile() {
+      return (
+        this.isMobileDevice &&
+        this.previewPaneMaxWidth > this.deviceWidthMap.mobile
+      )
+    },
+  },
+  methods: {
+    calculatePreviewLeftPadding() {
+      const sidebarWidth =
+        document.querySelector('.content-area > aside')?.offsetWidth || 0
+      const sectionPaneWidth =
+        document.querySelector('.slide-pane')?.offsetWidth || 0
+      return sectionPaneWidth - sidebarWidth
+    },
+    mustPreviewScale() {
+      // case: the section / block pane is not opened
+      if (!this.currentSection) 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 // desktop device
+    },
+  },
+}

data/app/javascript/editor/plugins/event-bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+export const ModalBus = new Vue()

data/app/javascript/editor/plugins/filters.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import i18n from '@/plugins/i18n.js'
+import { numberToHumanSize, truncate, formatPath } from '@/utils'
+
+Vue.filter('numberToHumanSize', (size) => numberToHumanSize(size, i18n))
+Vue.filter('truncate', truncate)
+Vue.filter('formatPath', formatPath)

data/app/javascript/editor/plugins/i18n.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import messages from '@/locales'
+
+Vue.use(VueI18n)
+
+const AVAILABLE_LOCALES = ['en', 'fr']
+var locale = 'en'
+
+if (document.documentElement.lang) {
+  // fetch the local from the HTML tag
+  locale = document.documentElement.lang
+} else {
+  // try to fetch the browser locale
+  const language = navigator.languages[0]
+  if (language) {
+    locale = language.split('-')[0]
+    if (AVAILABLE_LOCALES.indexOf(locale) === -1) locale = null
+  }
+}
+
+const i18n = new VueI18n({
+  locale,
+  fallbackLocale: AVAILABLE_LOCALES[0],
+  messages,
+})
+
+export default i18n

data/app/javascript/editor/plugins/index.js

@@ -0,0 +1,3 @@
+import './i18n'
+import './tooltip'
+import './filters'

data/app/javascript/editor/plugins/tooltip.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VTooltip from 'v-tooltip'
+
+Vue.use(VTooltip)

data/app/javascript/editor/router/index.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import routes from './routes'
+import store from '@/store'
+
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+  mode: 'history',
+  base: window.baseUrl,
+  routes,
+})
+
+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
+  next()
+})
+
+export default router

data/app/javascript/editor/router/routes/base.js

@@ -0,0 +1,53 @@
+import AppLayout from '@/layouts/app'
+import PagePreview from '@/views/page-preview'
+import SlidePane from '@/views/slide-pane'
+import SlidePane2 from '@/views/slide-pane2'
+import pageRoutes from './page'
+import sectionRoutes from './section'
+import sectionBlockRoutes from './section-block'
+import styleRoutes from './style'
+
+export default [
+  {
+    path: '/',
+    name: 'home',
+    redirect: '/index',
+  },
+  {
+    path: '/:locale/:pageId',
+    component: AppLayout,
+    children: [
+      {
+        path: '',
+        name: 'editPage',
+        components: {
+          default: PagePreview,
+        },
+        props: { default: true },
+      },
+      {
+        path: 'foo-test',
+        name: 'test',
+        components: {
+          default: PagePreview,
+          'slide-pane': SlidePane,
+        },
+        props: { default: true },
+        meta: { hidingSidebar: true },
+      },
+      {
+        path: 'foo-test2',
+        name: 'test2',
+        components: {
+          default: PagePreview,
+          'slide-pane': SlidePane2,
+        },
+        props: { default: true },
+      },
+      ...pageRoutes,
+      ...sectionRoutes,
+      ...sectionBlockRoutes,
+      ...styleRoutes,
+    ],
+  },
+]

data/app/javascript/editor/router/routes/index.js

@@ -0,0 +1,3 @@
+import base from './base'
+
+export default [].concat(base)

data/app/javascript/editor/router/routes/page.js

@@ -0,0 +1,30 @@
+import PagePreview from '@/views/page-preview'
+import PageList from '@/views/pages/index'
+import EditPage from '@/views/pages/edit'
+
+export default [
+  {
+    path: '__pages',
+    name: 'listPages',
+    components: {
+      default: PagePreview,
+      'slide-pane': PageList,
+    },
+    props: {
+      'slide-pane': true,
+      default: true,
+    },
+  },
+  {
+    path: 'editSettings',
+    name: 'editPageSettings',
+    components: {
+      default: PagePreview,
+      'slide-pane': EditPage,
+    },
+    props: {
+      'slide-pane': true,
+      default: true,
+    },
+  },
+]

data/app/javascript/editor/router/routes/section-block.js

@@ -0,0 +1,29 @@
+import PagePreview from '@/views/page-preview'
+import ContentPane from '@/views/content-pane'
+
+export default [
+  {
+    path: 'sectionBlock/:sectionBlockId',
+    name: 'editSectionBlock',
+    components: {
+      default: PagePreview,
+      'slide-pane': ContentPane,
+    },
+    props: {
+      'slide-pane': true,
+      default: true,
+    },
+    meta: { hidingSidebar: true },
+    children: [
+      {
+        path: 'setting/:settingId',
+        name: 'editSectionBlockSetting',
+        components: {
+          default: PagePreview,
+          'slide-pane': ContentPane,
+        },
+        meta: { hidingSidebar: true },
+      },
+    ],
+  },
+]

data/app/javascript/editor/router/routes/section.js

@@ -0,0 +1,67 @@
+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'
+
+export default [
+  {
+    path: 'add-section',
+    name: 'addSection',
+    components: {
+      default: PagePreview,
+      'slide-pane': SectionAddPane,
+    },
+    props: {
+      'slide-pane': true,
+      default: true,
+    },
+  },
+  {
+    path: 'add-section/:sectionId',
+    name: 'addSectionAfter',
+    components: {
+      default: PagePreview,
+      'slide-pane': SectionAddPane,
+    },
+    props: {
+      'slide-pane': true,
+      default: true,
+    },
+  },
+  {
+    path: 'sections',
+    name: 'listSections',
+    components: {
+      default: PagePreview,
+      'slide-pane': SectionListPane,
+    },
+    props: {
+      'slide-pane': true,
+      default: true,
+    },
+  },
+  {
+    path: 'section/:sectionId',
+    name: 'editSection',
+    components: {
+      default: PagePreview,
+      'slide-pane': ContentPane,
+    },
+    props: {
+      'slide-pane': true,
+      default: true,
+    },
+    meta: { hidingSidebar: true },
+    children: [
+      {
+        path: 'setting/:settingId',
+        name: 'editSectionSetting',
+        components: {
+          default: PagePreview,
+          'slide-pane': ContentPane,
+        },
+        meta: { hidingSidebar: true },
+      },
+    ],
+  },
+]

data/app/javascript/editor/router/routes/style.js

@@ -0,0 +1,17 @@
+import PagePreview from '@/views/page-preview'
+import EditStylePane from '@/views/style/edit-pane'
+
+export default [
+  {
+    path: '__style',
+    name: 'editStyle',
+    components: {
+      default: PagePreview,
+      'slide-pane': EditStylePane,
+    },
+    props: {
+      'slide-pane': true,
+      default: true,
+    },
+  },
+]

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

@@ -0,0 +1,38 @@
+import buildService from '../page'
+import MockedServices from '@/spec/__mocks__/services'
+import { page } from '@/spec/__mocks__/page'
+
+describe('PageService', () => {
+  let service = null
+
+  beforeEach(() => {
+    service = buildService(MockedServices.api)
+  })
+
+  describe('#normalize', () => {
+    it('takes a Page object and normalize it into entities', () => {
+      const output = service.normalize(page)
+      expect(output.result).toEqual(1)
+      expect(Object.keys(output.entities.sections)).toStrictEqual([
+        'GrYZW-VP',
+        '8hKSujtd',
+        'xM6f-kyh',
+      ])
+      expect(Object.keys(output.entities.blocks)).toStrictEqual([
+        'RiEo8C3f',
+        'P1fGieWs',
+        'sDo-Dg85',
+        'K-C_zRcH',
+        'fNIEuzF0',
+        'UVGOFAI5',
+        'K3Xotn7f',
+        'Pst6WyU0',
+      ])
+      expect(output.entities.page['1'].sections).toStrictEqual([
+        'GrYZW-VP',
+        '8hKSujtd',
+        'xM6f-kyh',
+      ])
+    })
+  })
+})

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

@@ -0,0 +1,32 @@
+import * as service from '../section'
+import {
+  simpleContentSection,
+  navContentSection,
+} from '@/spec/__mocks__/section'
+
+describe('SectionService', () => {
+  describe('#normalize', () => {
+    it('takes a Section object and normalize it into entities', () => {
+      const output = service.normalize(simpleContentSection)
+      // console.log(JSON.stringify(output))
+      expect(output.result).toEqual('NEW-CONTENT-1')
+      expect(Object.keys(output.entities.sections)).toStrictEqual([
+        'NEW-CONTENT-1',
+      ])
+    })
+    it('takes a Section object with blocks and normalize it into entities', () => {
+      const output = service.normalize(navContentSection)
+      // console.log(JSON.stringify(output))
+      expect(output.result).toEqual('NEW-NAV-CONTENT-1')
+      expect(Object.keys(output.entities.sections)).toStrictEqual([
+        'NEW-NAV-CONTENT-1',
+      ])
+      expect(Object.keys(output.entities.blocks)).toStrictEqual([
+        'RiEo8C3f',
+        'P1fGieWs',
+        'sDo-Dg85',
+        'K-C_zRcH',
+      ])
+    })
+  })
+})

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

@@ -0,0 +1,40 @@
+import * as axios from 'axios'
+import camelcaseObjectDeep from 'camelcase-object-deep'
+
+let siteHandle = null
+let locale = null
+
+export const setSiteHandle = (handle) => (siteHandle = handle)
+export const setLocale = (newLocale) => (locale = newLocale)
+
+const token = document.querySelector('[name=csrf-token]').content
+axios.defaults.headers.common['X-CSRF-TOKEN'] = token
+
+const api = axios.create({
+  baseURL: window.apiBaseUrl,
+  timeout: 50000,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json',
+  },
+  transformResponse(data) {
+    // camelcase in JS
+    // console.log('[DEBUG] API response', data)
+    return data ? camelcaseObjectDeep(JSON.parse(data)) : {}
+    // return data ? JSON.parse(data) : {} // LEGACY
+  },
+})
+
+api.interceptors.request.use(
+  (config) => {
+    config.headers['X-MAGLEV-SITE-HANDLE'] = siteHandle
+    config.headers['X-MAGLEV-LOCALE'] = locale
+    return config
+  },
+  (error) => Promise.reject(error),
+)
+
+export const get = api.get
+export const post = api.post
+export const put = api.put
+export const destroy = api.delete

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

@@ -0,0 +1,26 @@
+export const encodeToTree = (blocks, parentId) => {
+  return blocks
+    .filter((block) => block.parentId === parentId)
+    .map((block) => ({
+      sectionBlock: { ...block },
+      children: encodeToTree(blocks, block.id),
+    }))
+}
+
+export const decodeTree = (tree, parentId) => {
+  return tree
+    .map((treeNode) => {
+      return [].concat(
+        { ...treeNode.sectionBlock, parentId },
+        decodeTree(treeNode.children, treeNode.sectionBlock.id),
+      )
+    })
+    .flat()
+}
+
+export const filterRoot = (blockDefinitions, content) => {
+  return blockDefinitions.filter((block) => {
+    const count = content.filter(({ type }) => block.type === type).length
+    return block.root && (block.limit === -1 || block.limit > count)
+  })
+}

data/app/javascript/editor/services/collection-item.js

@@ -0,0 +1,12 @@
+export default (api) => ({
+  findAll: (collectionId, filters) => {
+    console.log(
+      `[CollectionItem] Fetching all the items of ${collectionId}`,
+      filters,
+    )
+    const options = { params: filters || {} }
+    return api
+      .get(`/collections/${collectionId}`, options)
+      .then(({ data }) => data)
+  },
+})

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

@@ -0,0 +1,23 @@
+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)
+  },
+
+  find: (id) => {
+    return api.get(`/assets/${id}`).then(({ data }) => data)
+  },
+
+  destroy: (id) => {
+    return api.destroy(`/assets/${id}`).then(({ data }) => data)
+  },
+
+  create: (attributes) => {
+    let formData = new FormData()
+    Object.entries(attributes).forEach(([key, value]) =>
+      formData.append(`asset[${key}]`, value),
+    )
+    return api.post('/assets', formData)
+  },
+})

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

@@ -0,0 +1,21 @@
+import * as api from './api'
+import buildSiteService from './site'
+import * as theme from './theme'
+import buildPageService from './page'
+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'
+
+export default {
+  api,
+  site: buildSiteService(api),
+  theme,
+  page: buildPageService(api),
+  section,
+  block,
+  image: buildImageService(api),
+  inlineEditing,
+  collectionItem: buildCollectionItemService(api),
+}