maglevcms 1.1.5 → 1.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1592154952ea460b1a251f422ff5c2a195671024b1dc7cff35244eb0f22121bc
-  data.tar.gz: '09969af10aa25986f2df6c5ce062f57889489befcc9bbd3d6c122a4fc7d70aba'
+  metadata.gz: f0d746d7653900e39f4c0a7b45ba3503a5688d37cc45f242943f7187729f607f
+  data.tar.gz: 4d5a6ff5eab5449ada366810c2ffedbde9466600faf1d30c8c4b6c906db24510
 SHA512:
-  metadata.gz: f3937431f0c1da7bfed8238baf1f1179145b128537ebe82184a99ed659aeaf01b523c836c926cb87800e61cfd21ae119b35eecdde85ace9cb3d10f6d8ddf43d7
-  data.tar.gz: a44cf3da138c61c43cdabd1be26c0253242cc3bfeb817bb59d65952ef716c55527138fcba2b76525d19523f8ff4fa8a6cebe095e9fe50154386415aa6b22fd03
+  metadata.gz: 6395309dbf50aed228ef2143e48bc4fb34f3184f715d9b70b478487567c56485483253b8e66a951a512e592917732be376815f78591a6fc02fae3e730bede303
+  data.tar.gz: 7fd1217aae956ca2b19228fe83c815f9905e18020047db71feccb15c20662ff1b720d9af2dd54874e0217e7ed0f2ef90235e49444c130b6bac24d7b27f92c715

data/app/controllers/concerns/maglev/fetchers_concern.rb

@@ -27,7 +27,7 @@ module Maglev
 
     def fetch_maglev_page
       @fetch_maglev_page ||= maglev_services.fetch_page.call(
-        path: params[:path],
+        path: maglev_page_path_from_params,
         locale: content_locale,
         default_locale: default_content_locale,
         fallback_to_default_locale: fallback_to_default_locale
@@ -72,6 +72,18 @@ module Maglev
       fetch_maglev_page
     end
 
+    def maglev_page_path_from_params
+      maglev_page_path_segments.join('/')
+    end
+
+    def maglev_page_path_segments
+      # we drop the path after the "_" segment
+      params[:path].split('/').reduce([]) do |memo, segment|
+        return memo if segment == '_'
+        memo.push(segment)
+      end
+    end
+
     def maglev_page_sections
       fetch_maglev_page_sections
     end

data/app/frontend/admin/controllers/iframe_controller.js

@@ -9,7 +9,7 @@ export default class extends Controller {
 
         if (height < 200) height = 200
 
-        this.element.style.height = `${height}px`  
+        this.element.style.height = `${height}px`
       }, 500)
     })
   }

data/app/frontend/editor/components/header-nav/index.vue

@@ -2,7 +2,7 @@
   <nav class="h-full w-full">
     <div
       class="flex items-center justify-between h-full w-full animate-pulse"
-      v-if="!currentPage"
+      v-if="isLoading"
     >
       <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
       <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
@@ -92,6 +92,9 @@ export default {
     PreviewToggler,
   },
   computed: {
+    isLoading() {
+      return !this.currentSite || !this.currentPage
+    },
     isListPagesActive() {
       return this.$route.name === 'listPages'
     },

data/app/frontend/editor/components/kit/icon.vue

@@ -3,10 +3,9 @@
     v-bind:is="icon"
     v-bind="$attrs"
     viewBox="0 0 24 24"
-    :width="size"
-    :height="size"
     class="fill-current"
     :class="{ 'animate-spin': spin, 'animate-bounce': bounce }"
+    :style="{ width: size, height: size }"
   ></component>
 </template>
 

data/app/frontend/editor/components/kit/simple-select.vue

@@ -8,8 +8,12 @@
         v-model="selectedOption"
         class="block w-full mt-1 py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring placeholder-gray-500"
       >
-        <option v-for="option in selectOptions" :key="option" :value="option">
-          {{ option }}
+        <option
+          v-for="(option, index) in selectOptions"
+          :key="index"
+          :value="getOptionValue(option)"
+        >
+          {{ getOptionLabel(option) }}
         </option>
       </select>
     </div>
@@ -40,5 +44,13 @@ export default {
       },
     },
   },
+  methods: {
+    getOptionLabel(option) {
+      return typeof option === 'object' ? option.label : option
+    },
+    getOptionValue(option) {
+      return typeof option === 'object' ? option.value : option
+    },
+  },
 }
 </script>

data/app/frontend/editor/layouts/default.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="h-full">
     <header class="flex h-16 border-b border-gray-200">
+      <router-link
+        v-if="currentSite && currentPage && currentLocale"
+        :to="{
+          name: 'editPage',
+          params: { locale: currentLocale, pageId: pageId },
+        }"
+        class="w-16 h-full flex justify-center items-center border-r border-gray-200"
+      >
+        <img v-bind:src="logoUrl" class="w-2/4" />
+      </router-link>
       <div
         class="w-16 h-full flex justify-center items-center border-r border-gray-200"
+        v-else
       >
         <img v-bind:src="logoUrl" class="w-2/4" />
       </div>
+
       <div class="flex flex-grow items-center h-full">
         <slot name="header"> [Layout] Default header </slot>
       </div>
@@ -31,6 +43,9 @@ export default {
     logoUrl() {
       return this.$store.state.editorSettings.logoUrl
     },
+    pageId() {
+      return this.currentPage.pathHash[this.currentLocale]
+    },
   },
 }
 </script>

data/app/frontend/editor/misc/utils.js

@@ -125,3 +125,17 @@ export const deepMerge = (target, source) => {
 
   return result
 }
+
+export const hasChanged = (newObject, oldObject, property) => {
+  return (
+    !!oldObject[property] &&
+    !!newObject[property] &&
+    oldObject[property] !== newObject[property]
+  )
+}
+
+export const hasAnyChanged = (newObject, oldObject, ...properties) => {
+  return properties.some((property) =>
+    hasChanged(newObject, oldObject, property),
+  )
+}

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

@@ -2,6 +2,7 @@ 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)
 
@@ -12,8 +13,29 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  if (to.params.pageId !== from.params.pageId && from.params.pageId)
-    store.dispatch('resetPreview') // force the display of the loader
+  // 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()
 })
 

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

@@ -25,6 +25,12 @@ export default [
         },
         props: { default: true },
       },
+    ],
+  },
+  {
+    path: '/:locale/:pageId/_',
+    component: AppLayout,
+    children: [
       {
         path: 'foo-test',
         name: 'test',

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

@@ -4,7 +4,7 @@ import EditPage from '@/views/pages/edit.vue'
 
 export default [
   {
-    path: '__pages',
+    path: 'pages',
     name: 'listPages',
     components: {
       default: PagePreview,

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

@@ -3,7 +3,7 @@ import EditStylePane from '@/views/style/edit-pane.vue'
 
 export default [
   {
-    path: '__style',
+    path: 'style',
     name: 'editStyle',
     components: {
       default: PagePreview,

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

@@ -58,7 +58,7 @@ export default (api) => ({
   findById: (site, id) => {
     if (id === 'index') id = site.homePageId
 
-    const safeId = String(id).replace('/', '%2F')
+    const safeId = String(id).replaceAll('/', '%2F')
 
     console.log('[PageService] Fetching page by id', safeId)
 

data/app/frontend/editor/store/actions/page.js

@@ -1,15 +1,29 @@
 import { isBlank } from '@/misc/utils'
 
 export default (services) => ({
+  // editPage : Action triggered when the user wants to edit another page
+  // or to change the locale of the current page.
+  editPage({ state, commit, dispatch }, { id, locale }) {
+    console.log('editPage', id, locale)
+
+    // display the loader
+    dispatch('resetPreview')
+
+    if (state.locale !== locale) {
+      dispatch('setLocale', locale)
+      Promise.all([dispatch('fetchPage', id), dispatch('fetchSite')])
+    } else dispatch('fetchPage', id)
+  },
+
+  // Set page
+  setPage({ commit }, page) {
+    commit('SET_PAGE', page)
+  },
   // Fetch a page from an id (or a path)
-  fetchPage({ commit, state: { site } }, id) {
-    setTimeout(
-      () =>
-        services.page
-          .findById(site, id)
-          .then((page) => commit('SET_PAGE', page)),
-      100,
-    )
+  async fetchPage({ commit, state: { site } }, id) {
+    return services.page
+      .findById(site, id)
+      .then((page) => commit('SET_PAGE', page))
   },
   // Persist the content of a page (including or not the site content)
   async persistPage({

data/app/frontend/editor/store/actions/site.js

@@ -1,6 +1,6 @@
 export default (services) => ({
-  fetchSite({ commit }, locally) {
-    services.site.find(locally).then((site) => {
+  async fetchSite({ commit }, locally) {
+    return services.site.find(locally).then((site) => {
       const { style, ...rawSite } = site
       services.api.setSiteHandle(site.handle)
       commit('SET_SITE', rawSite)

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

@@ -19,6 +19,7 @@ const store = new Vuex.Store({
 
 store.dispatch('fetchEditorSettings')
 store.dispatch('fetchSite', true)
+store.dispatch('setPage', window.page)
 store.dispatch('setTheme', window.theme)
 store.dispatch('setLocale', window.locale)
 

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

@@ -94,10 +94,6 @@ export default {
   },
   computed: {
     ...mapState(['hoveredSection']),
-    fullpath() {
-      // TODO: why here? why not in the App.vue instead?
-      return [this.locale, this.pageId]
-    },
     isPageEmpty() {
       return this.currentSectionList.length === 0
     },
@@ -136,19 +132,6 @@ export default {
       this.services.livePreview.start(this.$refs['iframe'])
     },
   },
-  watch: {
-    fullpath: {
-      immediate: true,
-      handler(newFullpath, oldFullpath) {
-        const [newLocale, newPageId] = newFullpath
-        const [oldLocale, oldPageId] = oldFullpath || []
-        if ((newLocale !== oldLocale || newPageId !== oldPageId) && newPageId) {
-          this.setLocale(newLocale)
-          Promise.all([this.fetchPage(newPageId), this.fetchSite()])
-        }
-      },
-    },
-  },
 }
 </script>
 

data/app/frontend/live-preview-client/rails.js

@@ -1,5 +1,6 @@
 import * as axios from 'axios'
 import { debounce } from './utils'
+import runScripts from './run-scripts'
 
 const parentDocument = window.parent.document
 const previewDocument = window.document
@@ -165,6 +166,8 @@ const updatePreviewDocument = async (content, section, insertAt) => {
     targetElement = previewDocument.querySelector(selector)
   }
 
+  runScripts(targetElement)
+
   targetElement.scrollIntoView(true)
 }
 

data/app/frontend/live-preview-client/run-scripts.js

@@ -0,0 +1,73 @@
+export default function(element) {
+  var scripts;
+
+  // Get the scripts
+  scripts = element.getElementsByTagName("script");
+
+  // Run them in sequence (remember NodeLists are live)
+  continueLoading();
+
+  function continueLoading() {
+    var script, newscript;
+
+    // While we have a script to load...
+    while (scripts.length) {
+      // Get it and remove it from the DOM
+      script = scripts[0];
+      script.parentNode.removeChild(script);
+
+      // Create a replacement for it
+      newscript = document.createElement('script');
+
+      // External?
+      if (script.src) {
+        // Yes, we'll have to wait until it's loaded before continuing
+        newscript.onerror = continueLoadingOnError;
+        newscript.onload = continueLoadingOnLoad;
+        newscript.onreadystatechange = continueLoadingOnReady;
+        newscript.src = script.src;
+      }
+      else {
+        // No, we can do it right away
+        newscript.text = script.text;
+      }
+
+      // Start the script
+      document.documentElement.appendChild(newscript);
+
+      // If it's external, wait for callback
+      if (script.src) {
+        return;
+      }
+    }
+
+    // All scripts loaded
+    newscript = undefined;
+
+    // Callback on most browsers when a script is loaded
+    function continueLoadingOnLoad() {
+      // Defend against duplicate calls
+      if (this === newscript) {
+        continueLoading();
+      }
+    }
+
+    // Callback on most browsers when a script fails to load
+    function continueLoadingOnError() {
+      // Defend against duplicate calls
+      if (this === newscript) {
+        continueLoading();
+      }
+    }
+
+    // Callback on IE when a script's loading status changes
+    function continueLoadingOnReady() {
+
+      // Defend against duplicate calls and check whether the
+      // script is complete (complete = loaded or error)
+      if (this === newscript && this.readyState === "complete") {
+        continueLoading();
+      }
+    }
+  }
+}

data/app/models/maglev/section/setting.rb

@@ -31,7 +31,11 @@ class Maglev::Section::Setting
   end
 
   def build_default_link_content(default)
-    default.is_a?(String) ? { link_type: 'url', href: default } : { link_type: 'url', href: '#' }.merge(default)
+    if default.is_a?(String)
+      { text: 'Link', link_type: 'url', href: default }
+    else
+      { text: 'Link', link_type: 'url', href: '#' }.merge(default)
+    end
   end
 
   def build_default_checkbox_content(default)

data/app/views/maglev/api/pages/_show.json.jbuilder

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+json.sections services.get_page_sections.call(page: page)
+
+json.key_format! camelize: :lower
+json.deep_format_keys!
+
+json.id    page.id
+json.title page.title || page.default_title
+json.path  page.path || page.default_path
+json.path_hash page.path_hash
+json.visible page.visible
+
+json.seo_title page.seo_title
+json.meta_description page.meta_description
+json.og_title page.og_title
+json.og_description page.og_description
+json.og_image_url page.og_image_url
+
+json.preview_url services.get_page_fullpath.call(page: page, preview_mode: true, locale: content_locale)
+json.live_url services.get_page_fullpath.call(page: page, preview_mode: false, locale: content_locale)
+json.section_names services.get_page_section_names.call(page: page)
+json.lock_version page.lock_version
+json.translated page.path.present?

data/app/views/maglev/api/pages/show.json.jbuilder

@@ -1,24 +1,3 @@
 # frozen_string_literal: true
 
-json.sections services.get_page_sections.call(page: @page)
-
-json.key_format! camelize: :lower
-json.deep_format_keys!
-
-json.id    @page.id
-json.title @page.title || @page.default_title
-json.path  @page.path || @page.default_path
-json.path_hash @page.path_hash
-json.visible @page.visible
-
-json.seo_title @page.seo_title
-json.meta_description @page.meta_description
-json.og_title @page.og_title
-json.og_description @page.og_description
-json.og_image_url @page.og_image_url
-
-json.preview_url services.get_page_fullpath.call(page: @page, preview_mode: true, locale: content_locale)
-json.live_url services.get_page_fullpath.call(page: @page, preview_mode: false, locale: content_locale)
-json.section_names services.get_page_section_names.call(page: @page)
-json.lock_version @page.lock_version
-json.translated @page.path.present?
+json.partial!('show', page: @page)

data/app/views/maglev/editor/show.html.erb

@@ -12,6 +12,7 @@
     window.leaveUrl = <%= site_leave_editor_path.to_json.html_safe %>;
     window.apiBaseUrl = <%= h api_base_path.to_json.html_safe %>;
     window.site = <%= h render(partial: 'maglev/api/sites/show', formats: :json, locals: { site: maglev_site, home_page_id: maglev_home_page_id }).html_safe %>;
+    window.page = <%= h render(partial: 'maglev/api/pages/show', formats: :json, locals: { page: maglev_page }).html_safe %>;
     window.theme = <%= h render(partial: 'maglev/api/themes/show', formats: :json, locals: { theme: maglev_theme }).html_safe %>;
     window.logoUrl = <%= editor_logo_url.to_json.html_safe %>;
     window.primaryColor = <%= editor_primary_hex_color.to_json.html_safe %>;

data/config/routes.rb

@@ -42,7 +42,7 @@ Maglev::Engine.routes.draw do
 
   # Editor + Preview
   get 'editor', to: 'editor#show', as: :base_editor
-  get 'editor/:locale/(*something)', to: 'editor#show', as: :editor
+  get 'editor/:locale/(*path)', to: 'editor#show', as: :editor
   get 'leave_editor', to: 'editor#destroy', as: :leave_editor
   get 'preview/(*path)', to: 'page_preview#index',
                          defaults: { path: 'index', rendering_mode: :editor },

data/lib/generators/maglev/section_generator.rb

@@ -109,7 +109,7 @@ module Maglev
         when 'text' then label
         when 'image' then '"/theme/image-placeholder.jpg"'
         when 'checkbox' then true
-        when 'link' then '"#"'
+        when 'link' then '{ text: "Link", url: "#" }'
         when 'color' then '#E5E7EB'
         when 'radio', 'select' then 'option_1'
         when 'icon' then 'default-icon-class'

data/lib/generators/maglev/templates/section/app/theme/sections/%category%/%file_name%.yml.tt

@@ -30,6 +30,8 @@ settings:
   # html: true
   # line_break: true
   # nb_rows: 5
+  <%- when 'link' -%>
+  with_text: true
   <%- when 'select', 'radio' -%>
   options:
   - label: Option 1
@@ -59,6 +61,8 @@ blocks: <%- if blocks.blank? -%>[]
     # html: true
     # line_break: true
     # nb_rows: 5
+    <%- when 'link' -%>
+    with_text: true
     <%- when 'select', 'radio' -%>
     options:
     - label: Option 1

data/lib/maglev/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Maglev
-  VERSION = '1.1.5'
+  VERSION = '1.1.6'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: maglevcms
 version: !ruby/object:Gem::Version
-  version: 1.1.5
+  version: 1.1.6
 platform: ruby
 authors:
 - Didier Lafforgue
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-11-20 00:00:00.000000000 Z
+date: 2022-11-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jbuilder
@@ -692,6 +692,7 @@ files:
 - app/frontend/live-preview-client/index.js
 - app/frontend/live-preview-client/message.js
 - app/frontend/live-preview-client/rails.js
+- app/frontend/live-preview-client/run-scripts.js
 - app/frontend/live-preview-client/utils.js
 - app/helpers/maglev/admin/sections/previews_helper.rb
 - app/helpers/maglev/admin/themes_helper.rb
@@ -761,6 +762,7 @@ files:
 - app/views/maglev/api/assets/show.json.jbuilder
 - app/views/maglev/api/collection_items/_show.json.jbuilder
 - app/views/maglev/api/collection_items/index.json.jbuilder
+- app/views/maglev/api/pages/_show.json.jbuilder
 - app/views/maglev/api/pages/index.json.jbuilder
 - app/views/maglev/api/pages/show.json.jbuilder
 - app/views/maglev/api/sites/_show.json.jbuilder