MODX Community

Fix ref-target for resource previews?

Hello everybody!

Is it possible to define a fix ref-target for the resource previews? Problem: when I do a couple of changes and testings on my web pages, after a while there are thousands of openend tabs in my browser. So I would like to target the output to a defined (= always the same) browser tab resp. browser window.

Thanks for your reply - yours: “ejomi”

You would probably have to change this line in the file /manager/assets/modext/sections/resource/update.js and add a name-parameter.

YES - this works - many thanks!
To grant absolute freedom you may use my little extension below. For this you must first add two new keys to the system settings to define the target name (or not) and to decide if this window should be always focused (or not).

Here my little “extension” which must be placed in the “update.js” arround line #51.:

// Flexible option to have the resource view in a fixed browser window / browser tab (or not):
if (typeof MODx.config.resource_view_target !== 'undefined' && MODx.config.resource_view_target != "") {
    // For this, you must create a new Text-Key named "resource_view_target" with the desired window name:
    var viewwnd = window.open(this.config.preview_url, MODx.config.resource_view_target);
    // To force the focus to this named window, you must create another new Yes/No-Key named "resource_view_focus" and set it to "YES"
    // (NOTE: Older FF-Versions < V.69 ignore the focus statement for tabs - in nower days this problem should be solved):
    if (typeof MODx.config.resource_view_focus !== 'undefined' && MODx.config.resource_view_focus == 1) viewwnd.focus();
} else {
    // Standard behavior (= show the resource always in a new blank window resp. new tab):
    window.open(this.config.preview_url);
}

Have fun!

Hmpf - I can’t find the button “solved” for this thread - how to do?

Greetings from Dresden (Saxonia): ejomi

… by the way - I have an additional question to this point: is it possible to view the draft version of a resource while working on it? (MODX shows always the stored version of the web-pages even when changed the template but not finaly saved).
Thanks in advance for your reply.
Yours: ejomi

Bob Rays Stagecoach can allow you to see staged versions of a resource before it goes live.

https://docs.modx.com/current/en/extras/stagecoach/index

Docs: https://bobsguides.com/stagecoach-tutorial.html

or https://modmore.com/extras/magicpreview/

Thanks a lot for your responds!

“StageCoach” doesn’t really achieve the target while it creates a duplicated version (= the “stage”) of the regarding Resource that will replace the original page at a specified date. You may define a faraway date (let’s say 10 years from now) for the “stages” to be sure, that they where not published in present time. With this setting you have a great playground for testing lots of different versions of all your pages in the same web site. It’s a nice feature but - as I said - it doesn’t fit the functionality of draft preview,

“Magic Preview” is more appropriate because it serves what I was looking for: a real preview of the current Resource draft before final saving. Here my experiences until now:

  1. The Download of “Magic Preview” is only possible after signing in to “ModMore” via the obscure “Package Provider” with a special API-Key. However - dig trough it - the package is free! My recommendation: You should save a copy of the downloaded package “magicpreview-1.0.1-pl.transport.zip” somewhere on your local device for having the ability to re-install this pack also on other MODX-distributions.

  2. “Magic Preview” doesn’t work with PHP versions < 7.0 so you need (and should anyway!) upgrade older systems.

  3. The header section in the preview window decreases the presentation area of the web page and serves different screen resolutions which is IMHO absolute needless. Nowadays this can easily be done via modern browser options! So you may delete (or comment out) in MODXROOT/core/components/magicpreview/templates/preview.tpl the whole <div class="mmmp-c-container__inner"> range around line#14 to line#43. Then you should delete the event handler around line#77 to line#99 too (it’s not needed anymore and makes the preview a bit faster). At least you may also delete the border style of the preview frame. This element doesn’t belong to your original page design and manipulates the real “look and feel” of your current web page. See CSS-class ".mmmp-c-frame__inner" within the "preview.css".

  4. The action button of “magic Preview” has a fixed caption. To make “Magic Preview” multilingual you should change MODXROOT/manager/assets/components/magicpreview/js/preview.js around line#12 like this:
    //text: ‘Preview’, // <- this is a fixed text - not good!
    text: _(‘preview’), // <- this comes from the …/lexicon/LANGCODE/default.inc.php - good!

  5. Inside the action bar of the resource panel you have beside the standard button “View” an additional “Preview”- which is IMHO overloaded. My little adoption below for the a.m. “preview.js” replaces just the old “view” button with the new “review” button. The function depends on a new system key named "magicpreview_replace_commonview", so you can switch it on or off as you like it. For this change line#12 in the “preview.js”

with the following code:

// Possibility to replace the common "view" button via a new system key named "magicpreview_replace_commonview":
var btnsubst = false; // <- Result flag for a possible button substitute.
// If the system key is set, loop through all buttons and lookup the common "view" button: 
if (typeof MODx.config.magicpreview_replace_commonview !== 'undefined' && MODx.config.magicpreview_replace_commonview == 1) {
  for (var i = 1; i < btns.length; i++) {
    if (btns[i].id == "modx-abtn-preview") {
      // Replace the common "view" button with the new "preview" button:
      btns.splice(i, 1,{
        text: _('preview'),
        id: 'modx-abtn-real-preview',
        handler: this.mpPreview,
        scope: this
      });
      // Set the result flag:
      btnsubst = true;
      break;
    }
  }
}
// Standard behavior - just insert a new button "preview" into the action bar:
if (!btnsubst) {
  btns.splice(2, 0, {
    text: _('preview'),
      id: 'modx-abtn-real-preview',
      handler: this.mpPreview,
      scope: this
  });
}

“Magic Preview” with the above implementations is quite comfortable for me.

  1. There is still a problem left and I hope, somebody can help: if you want to leave a page with unsaved changes the browser recognizes those changes and shows a warn message - very good! “Magic Preview” disturbs this behavior somehow, so there is no warning any more when you have made changes to your page before which are still not saved. Any ideas? (Maybe I have to trigger a “change” event manually??)

There seemed to be other solutions provided by the company “extras.io”. They offer two packages named “Preview” and “Workflow”. Problem: both plugins are fee required (99,- resp. 299,- GBP plus TAX) thus I didn’t test them. May be they are worth the money - does somebody know more about?

Sooo - that’s my state of the art. I still don’t know how to close this thread as “solved” - can please somebody tell me how?

Thank’s in advace, yours: ejomi

Thank you for this….