Fix display issues with Vizy fields in Live Preview

verbb · Sep 22, 2022 · 9a56fe4 · 9a56fe4
1 parent d308e22
commit 9a56fe4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/src/web/assets/field/dist/js/main.js b/src/web/assets/field/dist/js/main.js
diff --git a/src/web/assets/field/src/js/components/VizyInput.vue b/src/web/assets/field/src/js/components/VizyInput.vue
@@ -169,11 +169,11 @@ export default {
                 window.addEventListener('resize', this.updateFixedToolbar);
 
                 // Handle the element editor slideout
-                const slideout = document.querySelector('.slideout.element-editor .ee-body');
+                const $slideout = document.querySelector('.slideout.element-editor .ee-body');
 
-                if (slideout) {
-                    slideout.addEventListener('scroll', this.updateFixedToolbarEditor);
-                    slideout.addEventListener('resize', this.updateFixedToolbarEditor);
+                if ($slideout) {
+                    $slideout.addEventListener('scroll', this.updateFixedToolbarEditor);
+                    $slideout.addEventListener('resize', this.updateFixedToolbarEditor);
                 }
 
                 Garnish.on(Craft.Preview, 'open', this.openLivePreviewCallback);
@@ -398,6 +398,14 @@ export default {
 
         openLivePreviewCallback() {
             this.isLivePreview = true;
+
+            // Handle the Live Preview scroll
+            const $livePreview = document.querySelector('.lp-editor-container .lp-editor');
+
+            if ($livePreview) {
+                $livePreview.addEventListener('scroll', this.updateFixedToolbar);
+                $livePreview.addEventListener('resize', this.updateFixedToolbar);
+            }
         },
 
         closeLivePreviewCallback() {
@@ -408,7 +416,7 @@ export default {
             let headerBuffer = document.querySelector('body.fixed-header #header') ? document.querySelector('body.fixed-header #header').offsetHeight : 0;
 
             if (this.isLivePreview) {
-                headerBuffer = document.querySelector('.lp-editor-container header.flex') ? document.querySelector('.lp-editor-container header.flex').offsetHeight : 0;
+                headerBuffer = document.querySelector('.lp-editor-container header.flex') ? document.querySelector('.lp-editor-container header.flex').offsetHeight - parseFloat(window.getComputedStyle(document.querySelector('.lp-editor-container .lp-editor'), null).getPropertyValue('padding-top')) : 0;
             }
 
             // Apply any parent Vizy fields toolbars, otherwise we get multiple toolbar overlaps
@@ -623,4 +631,9 @@ export default {
     white-space: normal;
 }
 
+// Fix Live Preview overlapping
+.lp-editor-container > header {
+    z-index: 100;
+}
+
 </style>
diff --git a/src/web/assets/mix-manifest.json b/src/web/assets/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/field/dist/js/main.js": "/field/dist/js/main.js?id=2cb232cff51f49a3650c",
+    "/field/dist/js/main.js": "/field/dist/js/main.js?id=c86a534b9dd8d0f759e2",
     "/field/dist/css/style.css": "/field/dist/css/style.css?id=4d44c86feaaeeb9b55b0"
 }