maglevcms 2.0.0.beta1 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 82bc9958b22dec5a92e3f9e3fab438418f666479d868e9196c6c96fe350d082c
-  data.tar.gz: 975cf8a2f8b11ce2c2f3cfad7c38ba7db2c7ab351d1e5a83a1f563e903a9def2
+  metadata.gz: f5927f846b9b6ff6238c335be6238e4d6a6f821ff938f703d3e52c371059d3c3
+  data.tar.gz: 6e7293b7cfd56fb7ed7c95571a08b8fa9b27bb6837175926d9ac24e51133d337
 SHA512:
-  metadata.gz: 8a5ec523921178fdbecbec37ff7ddccab1fc9f1e26fd6d1fd270b7bf231ab28af1b111a7ecfc71b132abdce46f39ff785bc6630d6c98925c106bc266c6432037
-  data.tar.gz: 52b7d06da150eb80b06ec8006fa5960f8e77543cd7d054786a19d4875fed86b50946e2820567b402455df561b25fb1302e5e3a7be1adfa7b8f4b8b8d75dad417
+  metadata.gz: 2d800cf00c89cec1d2bc92b8106eb2bff7fc42db0abfbb80e528df13ab72133211ab6b6ccec6e27ad6bbf293cdc100c058c99ed17f67f0881532cc5756e0767a
+  data.tar.gz: aba0b9aaf8a65f6119a23e3f15e618ad657832fc9bbf0f20cad4bef1a72355b4fe7085948c86a5453a46723f8f13aff06fdcbf2732c4bafd42b04ea0b4ed64c1

data/app/frontend/editor/components/section-highlighter/index.vue

@@ -73,11 +73,11 @@ export default {
   methods: {
     onPreviewScroll(event) {      
       this.isScrolling = true
-      this.boundingRect = event.detail.boundingRect      
+      this.boundingRect = event.detail.boundingRect
       this.waitUntilScrollingDone()
     },
     onEndPreviewScrolling() {
-      this.isScrolling = false 
+      this.isScrolling = false
       this.applyStyle(this.boundingRect)
     },
     applyStyle(boundingRect) {

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

@@ -9,7 +9,11 @@
     </template>
 
     <template v-slot:slide-pane>
-      <transition name="slide" mode="out-in">
+      <transition
+        name="slide"
+        mode="out-in"
+        v-on:before-enter="beforeEnter"
+        v-on:after-enter="afterEnter">
         <router-view name="slide-pane" />
       </transition>
     </template>
@@ -26,5 +30,13 @@ import SidebarNav from '@/components/sidebar-nav/index.vue'
 export default {
   name: 'AppLayout',
   components: { Layout, HeaderNav, SidebarNav },
+  methods: {
+    beforeEnter() {
+      this.services.livePreview.simulateFakeScroll()
+    },
+    afterEnter() {
+      this.services.livePreview.pingSection(this.currentSection?.id)
+    },
+  },
 }
 </script>

data/app/frontend/editor/services/live-preview.js

@@ -26,6 +26,12 @@ export const removeSection = (sectionId) => {
   postMessage('section:remove', { sectionId })
 }
 
+export const pingSection = (sectionId) => {
+  if (!sectionId) return
+  postMessage('section:ping', { sectionId })
+}
+
+
 // === Block related actions ===
 export const addBlock = (content, section, sectionBlock) => {
   postMessage('block:add', { content, section, sectionBlock })
@@ -43,6 +49,10 @@ export const removeBlock = (content, section, sectionBlockId) => {
   postMessage('block:remove', { content, section, sectionBlockId })
 }
 
+export const simulateFakeScroll = () => {
+  notifyScrolling(null)
+}
+
 // === Other actions ===
 
 export const updateStyle = (content, style) => {
@@ -113,7 +123,7 @@ const openSettingPane = (name, params) => {
   })
 }
 
-const notifyScrolling = (boundingRect) => {
+export const notifyScrolling = (boundingRect) => {
   const event = new CustomEvent('maglev:preview:scroll', {
     detail: { boundingRect },
   })

data/app/frontend/live-preview-client/iframe-decorator.js

@@ -62,8 +62,9 @@ const selectHoveredSectionAtStartup = (previewDocument, stickySectionIds) => {
   setTimeout(() => {
     const section = previewDocument.querySelector('[data-maglev-section-id]:hover')
 
-    if (section)
-      onSectionHovered(previewDocument, section, stickySectionIds)    
+    if (section) {
+      onSectionHovered(previewDocument, section, stickySectionIds, true)
+    }
   }, 200)
 }
 
@@ -116,10 +117,10 @@ const listenScrolling = (previewDocument) => {
   addEventListener(previewDocument, 'scroll', scrollNotifier)
 }
 
-const onSectionHovered = (previewDocument, el, stickySectionIds) => {
+const onSectionHovered = (previewDocument, el, stickySectionIds, force = false) => {
   const sectionId = el.dataset.maglevSectionId
 
-  if (hoveredSectionId !== sectionId) {
+  if (hoveredSectionId !== sectionId || force) {
     postMessage('section:hover', {
       sectionId,
       sectionRect: el.getBoundingClientRect(),

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

@@ -21,6 +21,7 @@ export const listenMessages = () => {
       case 'section:move':
       case 'section:update':
       case 'section:remove':
+      case 'section:ping':
       case 'block:add':
       case 'block:move':
       case 'block:update':

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

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { debounce } from './utils'
 import runScripts from './run-scripts'
+import { postMessage } from './message'
 
 const parentDocument = window.parent.document
 const previewDocument = window.document
@@ -21,6 +22,7 @@ const start = () => {
   window.addEventListener('maglev:section:move', moveSections)
   window.addEventListener('maglev:section:update', updateSection)
   window.addEventListener('maglev:section:remove', removeSection)
+  window.addEventListener('maglev:section:ping', pingSection)
   window.addEventListener('maglev:block:add', replaceSection)
   window.addEventListener('maglev:block:move', replaceSection)
   window.addEventListener('maglev:block:update', updateBlock)
@@ -71,10 +73,18 @@ const updateSection = (event) => {
 const removeSection = (event) => {
   const { sectionId } = event.detail
   const selector = `[data-maglev-section-id='${sectionId}']`
-  let element = previewDocument.querySelector(selector)
+  const element = previewDocument.querySelector(selector)
   element.remove()
 }
 
+const pingSection = (event) => {
+  const { sectionId } = event.detail
+  const selector = `[data-maglev-section-id='${sectionId}']`
+  const element = previewDocument.querySelector(selector)
+  // hack to force the highlighter bar to be updated with the correct dimensions
+  postMessage('scroll', { boundingRect: element.getBoundingClientRect() })
+}
+
 // === Block related actions ===
 
 const updateBlock = (event) => {

data/lib/maglev/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Maglev
-  VERSION = '2.0.0.beta1'
+  VERSION = '2.0.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maglevcms
 version: !ruby/object:Gem::Version
-  version: 2.0.0.beta1
+  version: 2.0.0
 platform: ruby
 authors:
 - Didier Lafforgue