maglevcms 2.0.0 → 3.0.0.beta1

data/app/frontend/editor/mixins/global.js

@@ -1,140 +0,0 @@
-import Vue from 'vue'
-import { mapState, mapActions } from 'vuex'
-import { ModalBus } from '@/plugins/event-bus'
-import services from '@/services'
-import { isBlank } from '@/misc/utils'
-
-Vue.mixin({
-  computed: {
-    ...mapState(['device', 'previewReady']),
-    services() {
-      return services
-    },
-    isSitePublishable() {
-      return this.$store.state.editorSettings.sitePublishable
-    },
-    currentSite() {
-      return this.$store.state.site
-    },
-    currentI18nScope() {
-      return `themes.${this.currentTheme.id}`
-    },
-    currentStyle() {
-      return this.$store.state.style
-    },
-    currentStyleI18nScope() {
-      return `${this.currentI18nScope}.style`
-    },
-    currentLocale() {
-      return this.$store.state.locale
-    },
-    currentPage() {
-      return this.$store.state.page
-    },
-    isCurrentPageIndex() {
-      return this.services.page.isIndex(this.currentPage)
-    },
-    currentTheme() {
-      return this.$store.state.theme
-    },
-    currentSection() {
-      return this.$store.state.section
-    },
-    currentSectionI18nScope() {
-      return `${this.currentI18nScope}.sections.${this.currentSection.type}`
-    },
-    currentSectionList() {
-      return this.$store.getters.sectionList
-    },
-    currentSectionContent() {
-      return this.$store.getters.sectionContent
-    },
-    currentSectionDefinition() {
-      return this.$store.state.sectionDefinition
-    },
-    currentSectionSettings() {
-      return this.$store.getters.sectionSettings(false)
-    },
-    currentSectionAdvancedSettings() {
-      return this.$store.getters.sectionSettings(true)
-    },
-    currentSectionBlocks() {
-      return this.$store.getters.sectionBlocks
-    },
-    currentSectionBlock() {
-      return this.$store.state.sectionBlock
-    },
-    currentSectionBlockI18nScope() {
-      return `${this.currentSectionI18nScope}.blocks.${this.currentSectionBlock.type}`
-    },
-    currentSectionBlockIndex() {
-      return this.$store.getters.sectionBlockIndex
-    },
-    currentSectionBlockContent() {
-      return this.$store.getters.sectionBlockContent
-    },
-    currentSectionBlockDefinition() {
-      return this.$store.state.sectionBlockDefinition
-    },
-    currentSectionBlockSettings() {
-      return this.$store.getters.sectionBlockSettings(false)
-    },
-    currentSectionBlockAdvancedSettings() {
-      return this.$store.getters.sectionBlockSettings(true)
-    },
-    currentPageDefaultAttributes() {
-      return this.$store.getters.defaultPageAttributes
-    },
-    hasMultipleLocales() {
-      return this.$store.state.site.locales.length > 1
-    },
-    currentContent() {
-      return this.$store.getters.content
-    },
-    isDesktopDevice() {
-      return this.device === 'desktop'
-    },
-    isMobileDevice() {
-      return this.device === 'mobile'
-    },
-    isTabletDevice() {
-      return this.device === 'tablet'
-    },
-    deviceWidthMap() {
-      return {
-        mobile: 375,
-        tablet: 1024,
-      }
-    },
-  },
-  methods: {
-    ...mapActions([
-      'setDevice',
-      'setLocale',
-      'fetchSite',
-      'fetchPage',
-      'fetchSection',
-      'fetchSectionBlock',
-      'setCurrentPageSettings',
-    ]),
-    isBlank(value) {
-      return isBlank(value)
-    },
-    openModal({ title, component, props, listeners, closeOnClick }) {
-      ModalBus.$emit('open', {
-        title,
-        component,
-        props,
-        listeners,
-        closeOnClick,
-      })
-    },
-    closeModal() {
-      ModalBus.$emit('close')
-    },
-    $st(key) {
-      // console.log('$st', key, this.$te(key) ? this.$t(key) : null)
-      return this.$te(key) ? this.$t(key) : null
-    },
-  },
-})

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

@@ -1,17 +0,0 @@
-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/frontend/editor/mixins/index.js

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

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

@@ -1,59 +0,0 @@
-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
-      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/frontend/editor/plugins/event-bus.js

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

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

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

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

@@ -1,13 +0,0 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-import messages from '@/locales'
-
-Vue.use(VueI18n)
-
-const i18n = new VueI18n({
-  locale: window.uiLocale,
-  fallbackLocale: 'en',
-  messages,
-})
-
-export default i18n

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

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

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

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

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

@@ -1,41 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import routes from './routes'
-import store from '@/store'
-import { hasAnyChanged } from '@/misc/utils'
-
-Vue.use(VueRouter)
-
-const router = new VueRouter({
-  mode: 'history',
-  base: window.baseUrl,
-  routes,
-})
-
-router.beforeEach((to, from, next) => {
-  // The router hasn't found a component to display so get back
-  // to the screen without any UI drawer opened.
-  if (to.matched.length === 0)
-    return next({
-      name: 'editPage',
-      params: {
-        pageId: store.state.page.pathHash[store.state.locale],
-        locale: store.state.locale,
-      },
-    })
-
-  // When an user wants to edit another page or to edit the current page
-  // in a different locale, the router detects it and dispatch the new
-  // page information to the Vuex store.
-  // Important: we don't do that at startup because we already have the current page
-  // and locale in the state.
-  if (hasAnyChanged(to.params, from.params, 'pageId', 'locale'))
-    store.dispatch('editPage', {
-      id: to.params.pageId,
-      locale: to.params.locale,
-    })
-
-  next()
-})
-
-export default router

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

@@ -1,59 +0,0 @@
-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'
-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: '/:locale/:pageId/_',
-    component: AppLayout,
-    children: [
-      {
-        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/frontend/editor/router/routes/index.js

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

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

@@ -1,30 +0,0 @@
-import PagePreview from '@/views/page-preview.vue'
-import PageList from '@/views/pages/index.vue'
-import EditPage from '@/views/pages/edit.vue'
-
-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/frontend/editor/router/routes/section-block.js

@@ -1,29 +0,0 @@
-import PagePreview from '@/views/page-preview.vue'
-import ContentPane from '@/views/content-pane.vue'
-
-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/frontend/editor/router/routes/section.js

@@ -1,67 +0,0 @@
-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 [
-  {
-    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/frontend/editor/router/routes/style.js

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

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

@@ -1,38 +0,0 @@
-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/frontend/editor/services/__tests__/section.spec.js

@@ -1,39 +0,0 @@
-import * as service from '../section'
-import {
-  simpleContentSection,
-  navContentSection,
-} from '@/spec/__mocks__/section'
-import { theme } from '@/spec/__mocks__/theme'
-
-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',
-      ])
-    })
-  })
-  describe('#getSectionLabel', () => {
-    it('returns the label of the section', () => {
-      const label = service.getSectionLabel(simpleContentSection, theme.sections[0])
-      expect(label).toEqual('preTitle')
-    })
-  })
-})

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

@@ -1,40 +0,0 @@
-import axios from 'axios'
-import { camelizeKeys } from '@/misc/utils'
-
-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) {
-    // for "security" (even if the Rails API already camelcases the JSON),
-    // we also camelcase the response in the Editor.
-    // console.log('[DEBUG] API response', data)
-    return data ? camelizeKeys(JSON.parse(data)) : {}
-  },
-})
-
-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/frontend/editor/services/block.js

@@ -1,26 +0,0 @@
-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/frontend/editor/services/collection-item.js

@@ -1,20 +0,0 @@
-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)
-  },
-  findOne: (collectionId, id) => {
-    console.log(
-      `[CollectionItem] Fetching the item ${id} of ${collectionId}`,
-    )
-    return api
-      .get(`/collections/${collectionId}/${id}`)
-      .then(({ data }) => data)
-  },
-})