Jump to field on click

_bootstrap/index.php

@@ -125,6 +125,20 @@
     ], ['pluginid','event'], false)) {
         echo "Error creating modPluginEvent.\n";
     }
+    if (!createObject('modPluginEvent', [
+        'pluginid' => $vcPlugin->get('id'),
+        'event' => 'OnWebPagePrerender',
+        'priority' => 0,
+    ], ['pluginid','event'], false)) {
+        echo "Error creating modPluginEvent.\n";
+    }
+    if (!createObject('modPluginEvent', [
+        'pluginid' => $vcPlugin->get('id'),
+        'event' => 'ContentBlocks_AfterParse',
+        'priority' => 0,
+    ], ['pluginid','event'], false)) {
+        echo "Error creating modPluginEvent.\n";
+    }
 }
 
 

_build/events/events.magicpreview.php

@@ -7,6 +7,8 @@
     'OnDocFormSave',
     'OnLoadWebDocument',
     'OnManagerPageBeforeRender',
+    'OnWebPagePrerender',
+    'ContentBlocks_AfterParse',
 ];
 
 foreach ($e as $ev) {

assets/components/magicpreview/css/mgr.css

@@ -3,11 +3,17 @@
    ========================================================================== */
 
 /* --------------------------------------------------------------------------
-   Draft banner: notification bar above the resource panel.
-   Appended to #modx-panel-resource-div via plain DOM.
+   Draft banner: fixed notification bar at the top of the viewport.
+   Appended to document.body so it sits outside the ExtJS layout and
+   does not affect resource-panel height calculations.
    -------------------------------------------------------------------------- */
 
 .mmmp-draft-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 200;
     display: flex;
     align-items: center;
     gap: 0.75rem;
@@ -84,6 +90,43 @@
     background: #E4E4E4;
 }
 
+/* In MODX 2 the manager header is ~55px tall; place the banner below it */
+body.magicpreview_modx2 .mmmp-draft-banner {
+    top: 55px;
+}
+
+/* Push the ExtJS layout panels below the banner.
+   CSS handles the top-position shift; relayoutModx() overrides getViewSize()
+   to return a reduced height so the border layout recalculates every inner
+   panel-body height — ensuring nothing is clipped at the bottom.
+   MODX 3 desktop: #modx-header = west icon bar; #modx-split-wrapper = center
+   (the nested border layout that contains the tree + #modx-content). */
+@media (min-width: 641px) {
+    body.magicpreview_modx3:has(.mmmp-draft-banner) #modx-header,
+    body.magicpreview_modx3:has(.mmmp-draft-banner) #modx-split-wrapper,
+    body.magicpreview_modx3:has(.mmmp-draft-banner) #modx-content {
+        top: 45px !important;
+        height: calc(100vh - 45px) !important;
+    }
+}
+
+/* MODX 2: north region stays at 0–55px; banner sits at top: 55px.
+   Shift the west and center panels below the banner (55 + 45 = 100px). */
+body.magicpreview_modx2:has(.mmmp-draft-banner) #modx-leftbar,
+body.magicpreview_modx2:has(.mmmp-draft-banner) #modx-content {
+    top: 100px !important;
+    height: calc(100vh - 100px) !important;
+}
+
+/* Push the preview panel below the banner */
+body:has(.mmmp-draft-banner) .mmmp-panel {
+    top: 45px;
+}
+
+body.magicpreview_modx2:has(.mmmp-draft-banner) .mmmp-panel {
+    top: 100px;
+}
+
 /* Push the fixed-position action buttons below the banner */
 body:has(.mmmp-draft-banner) #modx-action-buttons {
     top: 48px;
@@ -519,3 +562,14 @@ a.mmmp-share-revoke:hover,
 a.mmmp-share-revoke:focus {
     color: #843534;
 }
+
+/* --------------------------------------------------------------------------
+   Click-to-field: brief highlight on the manager field scrolled to from the
+   preview. Transition fades the outline out after the initial flash.
+   -------------------------------------------------------------------------- */
+
+.mmmp-field-highlight {
+    outline: 2px solid hsl(207, 70%, 53%);
+    outline-offset: 3px;
+    transition: outline-color 1.2s ease-out;
+}

assets/components/magicpreview/js/panel.js

@@ -514,15 +514,15 @@
     var _originalGetViewSize = null;
 
     /**
-     * Overrides the ExtJS Viewport's size calculation so its border
-     * layout positions panels within a narrower area, leaving room
-     * for our preview panel on the right.
+     * Overrides the ExtJS Viewport's getViewSize() so the border layout
+     * recalculates within the available space, then calls doLayout() to
+     * cascade setSize()/onResize() through every child panel.
      *
-     * Ext.Viewport always measures document.body, and its getViewSize()
-     * returns window.innerWidth regardless of any CSS width constraints.
-     * We override that method on the Viewport's element so the border
-     * layout reads our reduced width, then call doLayout() to trigger
-     * a full recalculation.
+     * Width is reduced when the on-page preview panel is open (to leave
+     * room for it on the right). Height is reduced when the draft banner
+     * is visible (so the scroll container inside #modx-content is sized
+     * correctly and nothing is clipped behind the banner). Both reductions
+     * are applied together when both are active.
      */
     function relayoutModx() {
         var layout = Ext.getCmp('modx-layout');
@@ -531,18 +531,20 @@
         }
 
         var panelIsOpen = document.body.classList.contains('mmmp-panel-onpage-active');
+        var bannerEl = document.getElementById('mmmp-draft-banner');
+        var bannerH = bannerEl ? bannerEl.offsetHeight : 0;
+        var needsOverride = panelIsOpen || bannerH > 0;
+        var pw = panelIsOpen ? getPanelWidth() : 0;
 
-        if (panelIsOpen) {
+        if (needsOverride) {
             // Store the original on first override
             if (!_originalGetViewSize) {
                 _originalGetViewSize = layout.el.getViewSize.bind(layout.el);
             }
-
-            var pw = getPanelWidth();
             layout.el.getViewSize = function() {
                 return {
                     width: window.innerWidth - pw,
-                    height: window.innerHeight
+                    height: window.innerHeight - bannerH
                 };
             };
         } else if (_originalGetViewSize) {
@@ -553,15 +555,22 @@
 
         // Delay to allow the panel to render and be measurable
         setTimeout(function() {
-            // Re-read panel width now that it's in the DOM
-            if (panelIsOpen) {
-                var pw = getPanelWidth();
+            // Re-read both values now that the DOM has settled
+            var bannerElInner = document.getElementById('mmmp-draft-banner');
+            var bannerHInner = bannerElInner ? bannerElInner.offsetHeight : 0;
+            var panelIsOpenInner = document.body.classList.contains('mmmp-panel-onpage-active');
+            var pwInner = panelIsOpenInner ? getPanelWidth() : 0;
+            var needsOverrideInner = panelIsOpenInner || bannerHInner > 0;
+            if (needsOverrideInner) {
                 layout.el.getViewSize = function() {
                     return {
-                        width: window.innerWidth - pw,
-                        height: window.innerHeight
+                        width: window.innerWidth - pwInner,
+                        height: window.innerHeight - bannerHInner
                     };
                 };
+            } else if (_originalGetViewSize) {
+                delete layout.el.getViewSize;
+                _originalGetViewSize = null;
             }
             layout.doLayout();
         }, 50);
@@ -651,6 +660,13 @@
          * Set the last preview hash.
          * @param {string|null} hash
          */
-        setLastHash: function(hash) { lastHash = hash; }
+        setLastHash: function(hash) { lastHash = hash; },
+
+        /**
+         * Re-run the ExtJS Viewport layout override. Called by preview.js
+         * when the draft banner is shown or hidden so the height reduction
+         * is applied consistently regardless of panel state.
+         */
+        relayout: relayoutModx
     };
 })();