Real preview of resources in MODX without saving.
Home Page: https://modmore.com/extras/magicpreview/
Preview is working great across the rest of the site, but on the one section that uses Articles, clicking the Preview button shows nothing. In the console there's the following JS error:
Uncaught TypeError: Cannot read properties of undefined (reading 'formpanel')
at MODx.Component.mpPreview (preview.js?v=1.2.3-pl:22:24)
at S.onClick (ext-all.js:21:426947)
at HTMLSpanElement.I (ext-all.js:21:57750)
which is
mpPreview: function() {
var o = this.config;
if (!o.formpanel) return false; <<< This lineNormally this is an instance of MODx.page.UpdateResource, but on the Article resources it's an instance of MODx.Component.
Can we get a keyboard shortcut for the preview? Maybe shift-ctrl-s or shift-alt-s?
For some reason, on the home page, it doens't work. Does on all other pages?
It would help a lot if the last state of the preview would be saved somewhere so that it can be retrieved later to resume the work.
This way even when you forget to save, your boss wants your attention or your internet drops out you don't loose your work.
Think Fred. Some buttons at the top of the preview pane (which needs more design work) that lets you switch between different screensizes for the preview.
Loading animation goes on forever.
I can't find any errors in my server logs (apache, modsecurity, etc.) or inside the modx manager log.
Browser console is also not giving any feedback.
magicpreview-1.2.1-pl
MODX 3.0.1
Apache/Plesk
The expected usage is that clicking the preview button always focuses the preview tab/window again, but that does not seem to happen in Firefox on Mac. Does work as expected on Chrome.
In the connector, preview.js, and plugin.
Pops up a notice that the resource is locked.
Here's an interesting one.
MODX 2.8.3-pl
PHP 8.0.8
Magic Preview 1.2.1-pl
I've installed Magic Preview and when I click the button on any resource, I get the following error;
PHP Fatal error: Cannot declare class modResourceUpdateProcessor, because the name is already in use in /var/www/core/model/modx/processors/resource/update.class.php on line 0
PHP message: PHP Stack trace:PHP message: PHP
1. {main}() /var/www/assets/components/magicpreview/connector.php:0
2. modConnectorRequest->handleRequest($options = ['processors_path' => '/var/www/core/components/magicpreview/processors/', 'location' => ''])
3. modConnectorRequest->prepareResponse($options = ['processors_path' => '/var/www/core/components/magicpreview/processors/', 'location' => '', 'action' => 'resource/preview-v2'])
4. modConnectorResponse->outputContent($options = ['processors_path' => '/var/www/core/components/magicpreview/processors/', 'location' => '', 'action' => 'resource/preview-v2'])
...
The preview window opens and stays on "Preparing your preview", the resource has the "Please Wait..." overlay and its console shows the HTTP 500 error.
https://community.modx.com/t/how-can-i-preview-my-pages-before-publishing-them/2632/13?u=markh
Will need testing to confirm.
Can we make sure that after refreshing the preview the page shows the same scroll position?
When the multi-lingual plugin Lingua is installed, Magic Preview doesn't provide a preview of the template variables in any of the languages.
PreviewResource is apt, but not very catchy, so would like to rename it before release into something better.
The idea of the flat HTML file was that a window needed to be opened before the preview data was saved. Flat HTML is quick to load.
Now though, the preview page is always shown, so it makes sense to turn it into a proper manager controller with some additional security and processing capabilities.
Requested by Kevin via modmore support:
Add a way to change the breakpoint buttons displayed. This could perhaps be a system setting where a custom template file could be used, and/or a setting specifying breakpoint values.
Also allowing for custom CSS in the preview could be useful.
Expected behavior:
Actual behavior:
After clicking the Preview button, a new window opens with the preview, plus a header with browser widths on the right, and a link on the left that says "Preview for" plus the resource name, which is linked to the Manager URL for that resource. If you click this link, though, a new editing window opens. The window loads the saved version of the page, so it DOES NOT include the edits you're working on. If people click this link and edit, they will lose the edits they were previewing.
Since the Preview window only opens after clicking the Preview button while editing, a better option would be to either link the resource name to a javascript to close the window, or else just have a single link that says "Close Preview" to close the window to go back to the live editing page in MODX.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.