maglevcms 2.1.0 → 3.0.0.beta2

data/app/frontend/editor/store/default-state.js

@@ -1,27 +0,0 @@
-export default {
-  device: 'desktop',
-  previewReady: false,
-  site: null,
-  style: null,
-  locale: null,
-  theme: null,
-  page: null,
-  section: null,
-  sectionDefinition: null,
-  hoveredSection: null,
-  sectionBlock: null,
-  sectionBlockDefinition: null,
-  sections: {},
-  sectionBlocks: {},
-  editorSettings: {},
-  touchedSections: [],
-  ui: {
-    saveButtonState: 'default',
-    publishButtonState: {
-      status: null,
-      label: null,
-    },
-    openErrorModal: false,
-    errorModalType: null,
-  },
-}

data/app/frontend/editor/store/getters.js

@@ -1,113 +0,0 @@
-import { isBlank } from '@/misc/utils'
-
-export default (services) => ({
-  currentPagePath: ({ page }) => {
-    const nakedPath = page.liveUrl.startsWith('http') ? new URL(page.liveUrl).pathname : page.liveUrl
-    return page.path === 'index' ? `${nakedPath}/index`.replace('//', '/') : nakedPath
-  },
-  currentPageUrl: ({ page }) => {
-    if (page.liveUrl.startsWith('http')) return page.liveUrl
-    return new URL(page.liveUrl, location.origin).toString()
-  },
-  sectionList: (
-    { page, sections, sectionBlocks },
-    { sectionDefinition: getSectiondefinition },
-  ) => {
-    const pageContent = services.page.denormalize(page, {
-      sections,
-      blocks: sectionBlocks,
-    })
-    if (!pageContent?.sections) return []
-    return pageContent.sections.map((sectionContent) => {
-      const sectionDefinition = getSectiondefinition(sectionContent)
-      return {
-        id: sectionContent.id,
-        type: sectionContent['type'],
-        name: sectionDefinition.name,
-        label: services.section.getSectionLabel(sectionContent, sectionDefinition),
-        viewportFixedPosition: !!sectionDefinition.viewportFixedPosition,
-      }
-    })
-  },
-  stickySectionList: (_, { sectionList }) => {
-    return sectionList.filter((section) => section.viewportFixedPosition)
-  },
-  defaultPageAttributes: ({ page }) => {
-    if (page.translated) return {}
-    return { title: page.title, path: page.path }
-  },
-  content: (
-    { page, sections, sectionBlocks, touchedSections },
-    { sectionDefinition: getSectiondefinition },
-  ) => {
-    const pageContent = services.page.denormalize(page, {
-      sections,
-      blocks: sectionBlocks,
-    })
-
-    const siteSections = pageContent.sections.filter(
-      (sectionContent) => getSectiondefinition(sectionContent).siteScoped,
-    )
-    const hasModifiedSiteScopedSections = siteSections.some(
-      (sectionContent) => touchedSections.indexOf(sectionContent.id) !== -1,
-    )
-    return {
-      pageSections: pageContent.sections,
-      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
-  },
-  sectionDefinition:
-    ({ theme }) =>
-    (sectionContent) => {
-      return theme.sections.find(
-        (definition) => definition['id'] === sectionContent['type']
-      )
-    },
-  sectionSettings:
-    ({ sectionDefinition }) =>
-    (advanced) => {
-      return services.section.getSettings(sectionDefinition, advanced)
-    },
-  sectionBlocks: ({ sectionBlocks, section, sectionDefinition }) => {
-    if (!section) return []
-    return section.blocks
-      .map((id) => {
-        const sectionBlock = sectionBlocks[id]
-        const definition = sectionDefinition.blocks.find(
-          (def) => def.type === sectionBlock.type,
-        )
-        return definition ? sectionBlock : null
-      })
-      .filter((b) => b)
-  },
-  sectionBlockLabel:
-    ({ sectionDefinition }) =>
-    (sectionBlock, index) => {
-      const definition = sectionDefinition.blocks.find(
-        (def) => def.type === sectionBlock.type,
-      )
-      return services.section.getBlockLabel(sectionBlock, definition, index)
-    },
-  sectionBlockIndex: ({ section, sectionBlock }) => {
-    // console.log(section.blocks, sectionBlock)
-    return sectionBlock ? section.blocks.indexOf(sectionBlock.id) + 1 : null
-  },
-  sectionBlockContent: ({ sectionBlock }) => {
-    return sectionBlock ? [...sectionBlock.settings] : null
-  },
-  sectionBlockSettings:
-    ({ sectionBlockDefinition }) =>
-    (advanced) => {
-      return services.section.getSettings(sectionBlockDefinition, advanced)
-    },
-})

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

@@ -1,29 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import defaultState from './default-state'
-import buildActions from './actions'
-import buildMutations from './mutations'
-import buildGetters from './getters'
-import services from '@/services'
-
-Vue.use(Vuex)
-
-const store = new Vuex.Store({
-  strict: process.env.NODE_ENV !== 'production',
-  state: { ...defaultState },
-  mutations: buildMutations(services),
-  actions: buildActions(services),
-  getters: buildGetters(services),
-  modules: {},
-})
-
-store.dispatch('fetchEditorSettings')
-store.dispatch('fetchSite', true)
-store.dispatch('setTheme', window.theme)
-store.dispatch('setPage', window.page)
-store.dispatch('setLocale', window.locale)
-
-if (store.state.editorSettings.sitePublishable)
-  store.dispatch('pollLastPublication')
-
-export default store

data/app/frontend/editor/store/mutations.js

@@ -1,187 +0,0 @@
-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
-  },
-  MARK_PREVIEW_AS_READY(state) {
-    state.hoveredSection = null
-    state.section = null
-    state.previewReady = true
-  },
-  RESET_PREVIEW(state) {
-    state.hoveredSection = null
-    state.section = null
-    state.previewReady = false
-  },
-  SET_EDITOR_SETTINGS(state, editorSettings) {
-    state.editorSettings = editorSettings
-  },
-  SET_SITE(state, site) {
-    state.site = site
-  },
-  SET_STYLE(state, style) {
-    state.style = style
-  },
-  SET_LOCALE(state, locale) {
-    state.locale = locale
-  },
-  SET_THEME(state, theme) {
-    state.theme = theme
-  },
-  SET_PAGE(state, page) {
-    const { entities } = services.page.normalize(page)
-    state.page = entities.page[page.id]
-    state.sections = { ...state.sections, ...entities.sections }
-    state.sectionBlocks = { ...state.sectionBlocks, ...entities.blocks }
-    state.hoveredSection = null
-  },
-  SET_PAGE_SETTINGS(state, page) {
-    const attributes = pick(page, ...PAGE_SETTING_ATTRIBUTES)
-    omitEmpty(attributes)
-    state.page = { ...state.page, ...attributes }
-  },
-  SET_SECTION(state, section) {
-    if (section) {
-      const sectionDefinition = state.theme.sections.find(
-        (definition) => definition['id'] === section['type'],
-      )
-      state.section = { ...section }
-      state.sectionDefinition = { ...sectionDefinition }
-    } else state.section = state.sectionDefinition = null
-  },
-  SET_HOVERED_SECTION(state, hoveredSection) {
-    if (!hoveredSection) {
-      state.hoveredSection = null
-    } else {
-      const section = state.sections[hoveredSection.sectionId]
-      const definition = state.theme.sections.find(
-        (definition) => definition['id'] === section['type'],
-      )
-      state.hoveredSection = {
-        ...hoveredSection,
-        name: definition.name,
-        definition,
-      }
-    }
-  },
-  UPDATE_SECTION_CONTENT(state, change) {
-    let updatedSection = { ...state.section }
-    let newContent = { id: change.settingId, value: change.value }
-    let contentIndex = updatedSection.settings.findIndex(
-      (content) => content.id === newContent.id,
-    )
-
-    if (contentIndex === -1) updatedSection.settings.push(newContent)
-    else updatedSection.settings[contentIndex] = newContent
-
-    state.sections[state.section.id] = updatedSection
-    state.section = updatedSection
-  },
-  ADD_SECTION(state, { section, insertAt }) {
-    const {
-      entities: { sections, blocks },
-    } = services.section.normalize(section)
-    state.sections = { ...state.sections, [section.id]: sections[section.id] }
-    state.sectionBlocks = { ...state.sectionBlocks, ...blocks } // hmmm???
-    const updatedPage = { ...state.page }
-
-    switch (insertAt) {
-      case 'top':
-        updatedPage.sections.unshift(section.id)
-        break
-      case 'bottom':
-      case undefined:
-      case null:
-      case '':
-        updatedPage.sections.push(section.id)
-        break
-      default:
-        updatedPage.sections.splice(
-          updatedPage.sections.indexOf(insertAt) + 1,
-          0,
-          section.id,
-        )
-    }
-
-    state.page = updatedPage
-  },
-  REMOVE_SECTION(state, sectionId) {
-    state.page.sections.splice(state.page.sections.indexOf(sectionId), 1)
-  },
-  MOVE_HOVERED_SECTION(state, { fromIndex, toIndex }) {
-    state.page.sections = arraymove(state.page.sections, fromIndex, toIndex)
-  },
-  SET_SECTION_BLOCK(state, sectionBlock) {
-    state.sectionBlock = sectionBlock
-    state.sectionBlockDefinition = state.sectionDefinition.blocks.find(
-      (definition) => definition.type === sectionBlock.type,
-    )
-  },
-  ADD_SECTION_BLOCK(state, sectionBlock) {
-    state.sectionBlocks = {
-      ...state.sectionBlocks,
-      [sectionBlock.id]: sectionBlock,
-    }
-    const updatedSection = { ...state.sections[state.section.id] }
-    updatedSection.blocks.push(sectionBlock.id)
-    state.sections = { ...state.sections, [updatedSection.id]: updatedSection }
-    state.section = updatedSection
-  },
-  REMOVE_SECTION_BLOCK(state, sectionBlockId) {
-    const updatedSection = { ...state.sections[state.section.id] }
-    const index = updatedSection.blocks.indexOf(sectionBlockId)
-    updatedSection.blocks.splice(index, 1)
-    state.sections = { ...state.sections, [updatedSection.id]: updatedSection }
-    state.section = updatedSection
-  },
-  SORT_SECTION_BLOCKS(state, list) {
-    const sections = { ...state.sections }
-    sections[state.section.id].blocks = list.map((block) => block.id)
-    // in case we deal with a tree structure, update the parentId attribute only
-    list.forEach(
-      (block) => (state.sectionBlocks[block.id].parentId = block.parentId),
-    )
-    state.section = { ...sections[state.section.id] }
-    state.sections = sections
-  },
-  UPDATE_SECTION_BLOCK_CONTENT(state, change) {
-    let updatedBlock = { ...state.sectionBlocks[state.sectionBlock.id] }
-    let newContent = { id: change.settingId, value: change.value }
-    let contentIndex = updatedBlock.settings.findIndex(
-      (content) => content.id === newContent.id,
-    )
-
-    if (contentIndex === -1) updatedBlock.settings.push(newContent)
-    else updatedBlock.settings[contentIndex] = newContent
-
-    state.sectionBlocks[state.sectionBlock.id] = updatedBlock
-    state.sectionBlock = updatedBlock
-  },
-  TOUCH_SECTION(state, sectionId) {
-    if (state.touchedSections.indexOf(sectionId) === -1) {
-      const newArray = [...state.touchedSections]
-      newArray.push(sectionId)
-      state.touchedSections = newArray
-    }
-  },
-  RESET_TOUCHED_SECTIONS(state) {
-    state.touchedSections = []
-  },
-  // === UI ===
-  SET_PUBLISH_BUTTON_STATE(state, newButton) {
-    state.ui.publishButtonState = newButton
-  },
-  SET_SAVE_BUTTON_STATE(state, buttonState) {
-    state.ui.saveButtonState = buttonState
-  },
-  OPEN_ERROR_MODAL(state, errorType) {
-    state.ui.openErrorModal = true
-    state.ui.errorModalType = errorType
-  },
-  CLEAR_ERROR_MODAL(state) {
-    state.ui.openErrorModal = false
-    state.ui.errorModalType = null
-  },
-})

data/app/frontend/editor/views/content-pane.vue

@@ -1,109 +0,0 @@
-<template>
-  <layout
-    :title="title"
-    :overflowY="false"
-    :max-width-pane="isMaxWidthPane"
-    :with-pre-title="isSectionBlockVersion"
-  >
-    <template v-slot:pre-title v-if="isSectionBlockReady">
-      <p class="text-gray-600 hover:text-gray-900">
-        <router-link
-          :to="{
-            name: 'editSection',
-            params: { sectionId: currentSection.id },
-            hash: '#blocks',
-          }"
-          class="flex items-center"
-        >
-          <uikit-icon name="arrow-drop-left" />
-          <span class="text-xs">{{ sectionTitle }}</span>
-        </router-link>
-      </p>
-    </template>
-
-    <section-pane :settingId="settingId" v-if="isSectionReady" />
-    <section-block-pane :settingId="settingId" v-if="isSectionBlockReady" />
-
-    <div
-      class="mt-4 mx-4 text-lg rounded h-64 bg-gray-200 animate-pulse"
-      v-if="!isSectionReady && !isSectionBlockReady"
-    >
-      &nbsp;
-    </div>
-  </layout>
-</template>
-
-<script>
-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',
-  components: { Layout, SectionPane, SectionBlockPane },
-  props: {
-    sectionId: { type: String, default: undefined },
-    sectionBlockId: { type: String, default: undefined },
-    settingId: { type: String, default: undefined },
-  },
-  computed: {
-    title() {
-      if (this.isSectionReady) return this.sectionTitle
-      else if (this.isSectionBlockReady) return this.sectionBlockTitle
-      else return null
-    },
-    sectionTitle() {
-      return (
-        this.$st(`${this.currentSectionI18nScope}.name`) ||
-        this.currentSectionDefinition?.name
-      )
-    },
-    sectionBlockTitle() {
-      return (
-        this.$st(`${this.currentSectionI18nScope}.blocks.label`) ||
-        this.currentSectionBlockDefinition?.name +
-          ' ' +
-          `#${this.currentSectionBlockIndex}`
-      )
-    },
-    isSectionReady() {
-      return this.sectionId && this.currentSection
-    },
-    isSectionBlockVersion() {
-      return !!this.sectionBlockId
-    },
-    isSectionBlockReady() {
-      return this.isSectionBlockVersion && this.currentSectionBlock
-    },
-    isMaxWidthPane() {
-      return !!this.currentSectionDefinition?.maxWidthPane
-    },
-    reactiveKey() {
-      return [!!this.currentPage, !!this.previewReady, this.$route.path].join(
-        '-',
-      )
-    },
-  },
-  destroyed() {
-    this.fetchSection(null)
-  },
-  methods: {
-    async fetch() {
-      if (this.sectionBlockId) await this.fetchSectionBlock(this.sectionBlockId)
-      else if (this.sectionId) await this.fetchSection(this.sectionId)
-
-      if (!this.currentSection && !this.currentSectionBlock)
-        this.$router.push({ name: 'editPage' })
-    },
-  },
-  watch: {
-    reactiveKey: {
-      immediate: true,
-      handler() {
-        if (!this.currentPage || !this.previewReady) return // wait for the page to be loaded
-        this.fetch()
-      },
-    },
-  },
-}
-</script>

data/app/frontend/editor/views/page-preview.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="relative w-full h-full overflow-y-hidden">
-    <div
-      class="relative w-full h-full origin-top-left transition-all duration-100"
-      :style="dynamicStyle"
-    >
-      <div
-        class="flex h-full w-full justify-center items-center"
-        :style="{ 'padding-left': `${loadingPaddingLeft}` }"
-        v-if="!previewReady"
-      >
-        <p class="animate-bounce duration-200">
-          {{ $t('pagePreview.loading') }}
-        </p>
-      </div>
-
-      <div
-        class="absolute inset-0 flex justify-center items-center"
-        v-if="currentPage"
-      >
-        <div
-          id="iframe-wrapper"
-          class="transition-all duration-100 ease-in-out"
-          :class="{ [deviceClass]: true, hidden: isPageEmpty }"
-          :style="{ opacity: previewReady ? 1 : 0 }"
-        >
-          <iframe
-            class="w-full h-full"
-            :src="currentPage.previewUrl"
-            @load="onIframeLoaded"
-            ref="iframe"
-          >
-          </iframe>
-        </div>
-
-        <div
-          class="transition-all duration-100 ease-in-out"
-          :style="{ opacity: previewReady ? 1 : 0 }"
-          v-if="isPageEmpty && previewReady"
-        >
-          <h2
-            class="text-center text-4xl font-bold"
-            v-if="numberOfLocales === 1"
-          >
-            {{ $t('pagePreview.empty.title.withoutLocale') }}
-          </h2>
-          <i18n
-            path="pagePreview.empty.title.withLocale"
-            tag="h2"
-            class="text-center text-2xl font-bold"
-            v-else
-          >
-            <template v-slot:localeName>
-              <span
-                class="capitalize-first bg-editor-primary bg-opacity-20 px-2"
-                >{{ currentLocaleName }}</span
-              >
-            </template>
-          </i18n>
-
-          <i18n
-            path="pagePreview.empty.message"
-            tag="div"
-            class="flex mt-4 text-gray-600"
-          >
-            <template v-slot:icon>
-              <uikit-icon
-                name="ri-stack-line"
-                size="1.5rem"
-                class="mx-1 text-black"
-              />
-            </template>
-          </i18n>
-        </div>
-      </div>
-    </div>
-    <section-highlighter :hovered-section="hoveredSection" />
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import TransformationMixin from '@/mixins/preview-transformation'
-import SectionHighlighter from '@/components/section-highlighter/index.vue'
-
-export default {
-  name: 'PagePreview',
-  components: { SectionHighlighter },
-  mixins: [TransformationMixin],
-  props: {
-    locale: { type: String, default: null },
-    pageId: { type: String, default: null },
-  },
-  data() {
-    return { loadingPaddingLeft: 0, previewScrollTop: 0 }
-  },
-  mounted() {
-    this.loadingPaddingLeft = `${this.calculatePreviewLeftPadding()}px`
-  },
-  computed: {
-    ...mapState(['hoveredSection']),
-    isPageEmpty() {
-      return this.currentSectionList.length === 0
-    },
-    numberOfLocales() {
-      return this.currentSite.locales.length
-    },
-    currentLocaleName() {
-      return this.currentSite.locales.find(
-        (locale) => locale.prefix === this.currentLocale,
-      ).label
-    },
-    deviceClass() {
-      switch (this.device) {
-        case 'mobile':
-          return 'mobile'
-        case 'tablet':
-          return 'tablet'
-        default:
-          return 'desktop'
-      }
-    },
-    dynamicStyle() {
-      if (this.currentSection) {
-        // not ideal to parse the DOM but we don't see any other methods for now
-        let style = `transform: translateX(${this.previewLeftPadding}px) scale(${this.previewScaleRatio}); height: calc(100% * 1 / 1 / ${this.previewScaleRatio};`
-
-        if (this.previewScaleRatio === 1)
-          style += `width: ${this.previewPaneMaxWidth}px`
-
-        return style
-      } else return ''
-    },
-  },
-  methods: {
-    onIframeLoaded() {
-      this.services.livePreview.start(this.$refs['iframe'])
-    },
-  },
-}
-</script>
-
-<style scoped>
-.mobile {
-  width: 375px;
-  height: 100%;
-  /* max-height: 667px;   */
-}
-
-.tablet {
-  width: 1024px;
-  height: 100%;
-  /* max-height: 1366px;   */
-}
-
-.desktop {
-  width: 100%;
-  height: 100%;
-}
-</style>

data/app/frontend/editor/views/pages/edit.vue

@@ -1,26 +0,0 @@
-<template>
-  <layout :title="$t('page.edit.currentPage.title')" :overflowY="false">
-    <div class="flex flex-col flex-1 pb-4 overflow-y-hidden">
-      <edit-page
-        :page="currentPage"
-        v-if="currentPage"
-        @on-update="updateCurrentPage"
-      />
-    </div>
-  </layout>
-</template>
-
-<script>
-import Layout from '@/layouts/slide-pane.vue'
-import EditPage from '@/components/page/edit.vue'
-
-export default {
-  name: 'EditPageView',
-  components: { Layout, EditPage },
-  methods: {
-    updateCurrentPage(updatedPage) {
-      this.setCurrentPageSettings(updatedPage)
-    },
-  },
-}
-</script>