maglevcms 1.0.0.rc1

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

@@ -0,0 +1,91 @@
+export default (services) => ({
+  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,
+        viewportFixedPosition: !!sectionDefinition.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 : [],
+    }
+  },
+  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/javascript/editor/store/index.js

@@ -0,0 +1,28 @@
+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('setLocale', window.locale)
+
+if (store.state.editorSettings.sitePublishable)
+  store.dispatch('pollLastPublication')
+
+export default store

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

@@ -0,0 +1,183 @@
+import { arraymove, pick, omitEmpty } from '@/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) {
+    state.hoveredSection = null
+    state.section = null
+    state.previewReady = !!previewDocument
+    state.previewDocument = previewDocument
+  },
+  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/javascript/editor/utils.js

@@ -0,0 +1,127 @@
+export const isBlank = (object) => {
+  return (
+    object === undefined ||
+    object === null ||
+    (typeof object === 'string' && object.length === 0) ||
+    (typeof object === 'object' && object.length === 0)
+  )
+}
+
+export const camelize = (str) => {
+  return str
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase())
+}
+
+export const numberToHumanSize = (size, i18n) => {
+  if (isBlank(size)) return null
+
+  let number, unit
+  if (size < 1024) (number = size), (unit = 'byte')
+  else if (size < 1024.0 * 1024.0)
+    (number = (size / 1024.0).toFixed(2).replace('.00', '')), (unit = 'kb')
+  else if (size < 1024.0 * 1024.0 * 1024.0)
+    (number = (size / 1024.0 / 1024.0).toFixed(2)), (unit = 'mb')
+  else (number = (size / 1024.0 / 1024.0 / 1024.0).toFixed(2)), (unit = 'gb')
+
+  let translatedUnit = i18n.tc(
+    `support.human.storageUnits.units.${unit}`,
+    number,
+  )
+
+  return i18n.t(`support.human.storageUnits.format`, {
+    number,
+    unit: translatedUnit,
+  })
+}
+
+export const debounce = (fn, time) => {
+  let timeoutId
+  function wrapper(...args) {
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null
+      fn(...args)
+    }, time)
+  }
+  return wrapper
+}
+
+export const arraymove = (array, fromIndex, toIndex) => {
+  let newArray = [...array]
+  var element = array[fromIndex]
+  newArray.splice(fromIndex, 1)
+  newArray.splice(toIndex, 0, element)
+  return newArray
+}
+
+export const uuid = (length) => {
+  let charset =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_'
+  let i
+  let result = ''
+  if (window.crypto && window.crypto.getRandomValues) {
+    let values = new Uint32Array(length)
+    window.crypto.getRandomValues(values)
+    for (i = 0; i < length; i++) {
+      result += charset[values[i] % charset.length]
+    }
+    return result
+  } else
+    throw new Error(
+      "Your browser is too old and can't generate secure random numbers",
+    )
+}
+
+export const uuid8 = () => uuid(8)
+
+export const truncate = (value, limit) => {
+  if (value.length > limit) {
+    value = value.substring(0, limit - 3) + '...'
+  }
+  return value
+}
+
+// Like pick of Lodash but without the Lodash dependency
+export const pick = (obj, ...args) => ({
+  ...args.reduce((res, key) => ({ ...res, [key]: obj[key] }), {}),
+})
+
+// Remove undefined values from an object
+export const omitEmpty = (obj) =>
+  Object.keys(obj).forEach((key) => obj[key] === undefined && delete obj[key])
+
+export const hexToRgb = (hex) => {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim())
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null
+}
+
+// Static pages have absolute path ("/something") but regular pages have no leading slash
+export const formatPath = (path) => {
+  return path[0] === '/' ? path : `/${path}`
+}
+
+// https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
+export const deepMerge = (target, source) => {
+  const result = { ...target, ...source }
+  const keys = Object.keys(result)
+
+  for (const key of keys) {
+    const tprop = target[key]
+    const sprop = source[key]
+    //if two objects are in conflict
+    if (typeof tprop == 'object' && typeof sprop == 'object') {
+      result[key] = deepMerge(tprop, sprop)
+    }
+  }
+
+  return result
+}

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

@@ -0,0 +1,105 @@
+<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"
+        >
+          <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'
+import SectionPane from '@/components/section-pane'
+import SectionBlockPane from '@/components/section-block-pane'
+
+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.currentSectionDefinition?.name
+    },
+    sectionBlockTitle() {
+      return (
+        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>