On Page Preview Panel

[muzzwood]

This adds the option to have an "on page" preview panel instead of opening the preview in a new browser window.

The user can choose between an on page preview panel that opens on the right, and pushes the resource page over to the left, or as an overlay that slides in from the right and covers part of the resource form.

There's also the option to set a refresh interval where the panel will automatically update every N seconds. The default is 5.
Set it to 0 to turn it off.

There's also a setting to have the preview panel already opened when the page is loaded, or disable that to manually open the panel.

[Copilot]

Pull request overview

This PR adds an inline “Preview Panel” mode to MagicPreview in the MODX manager (overlay or on-page column), including configurable auto-refresh and initial open-on-load behavior, as an alternative to the existing popup window preview.

Changes:

• Introduces new manager-side JS modules to orchestrate preview behavior and render/operate the panel UI (including resizing and breakpoint controls).
• Adds new system settings (with ExtJS combo xtypes) and lexicon strings for preview mode, layout, auto-refresh interval, and panel behavior.
• Updates the preview processor to use a deterministic key so the client can skip iframe reloads when the underlying form data hasn’t changed.

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
core/components/magicpreview/templates/preview.tpl	Minor JS formatting change.
core/components/magicpreview/processors/resource/PreviewTrait.php	Switches preview cache key generation to deterministic hashing.
core/components/magicpreview/lexicon/en/default.inc.php	Adds new panel/UI strings and setting descriptions.
core/components/magicpreview/lexicon/de/default.inc.php	Adds new panel/UI strings and setting descriptions; updates existing translations.
core/components/magicpreview/lexicon/da/default.inc.php	Adds new panel/UI strings and setting descriptions; updates existing translations.
core/components/magicpreview/elements/plugins/magicpreview.plugin.php	Injects manager config + loads new JS modules; adds settings-page JS loader; adds early CSS workaround.
core/components/magicpreview/docs/changelog.txt	Adds 1.6.0 changelog entry for panel mode/features.
core/components/magicpreview/controllers/preview.class.php	Removes unused manager preview JS include; keeps preview page self-contained.
assets/components/magicpreview/js/window.js	New module to manage popup preview window lifecycle.
assets/components/magicpreview/js/preview.js	New orchestrator: button injection, submissions, mode switching, auto-refresh, auto-preview.
assets/components/magicpreview/js/panel.js	New module implementing the preview side panel UI/behavior.
assets/components/magicpreview/js/combo.js	Registers ExtJS combo xtypes for new system settings.
assets/components/magicpreview/css/mgr.css	Adds manager UI styling for the panel and merged buttons.
_build/events/events.magicpreview.php	Adds OnManagerPageBeforeRender plugin event registration.
_build/data/settings.php	Adds new system settings for preview mode/layout/auto-refresh/panel extended.
_bootstrap/index.php	Ensures OnManagerPageBeforeRender event is attached during bootstrap.

Comments suppressed due to low confidence (1)

core/components/magicpreview/elements/plugins/magicpreview.plugin.php:73

• The inline Ext.onReady callback uses an arrow function. Combined with the ES2020 syntax in the new JS files, this can break compatibility with older browsers commonly used with the MODX manager. Use ES5-compatible syntax here (function() { ... }) to avoid parse errors.

            $modx->controller->addHtml('
                <script>
                    Ext.onReady(() => {
                        Ext.getBody().addClass("' . $versionCls . '");
                    });
                </script>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.