RockIframe - Splitscreen preview for PW backend

[bernhard]

Long time no module ? 

Github: https://github.com/baumrock/RockIframe
Modules Directory: https://processwire.com/modules/rock-iframe/

Problem

Sometimes the editor wants to see a preview of a file while editing a page. For example this can be helpful when digitizing invoices. Regular ProcessWire panels can be used for preview but overlap the page editor so the user has to open and close the panel repeatedly while working.

RockIframe shows a preview of any content that can be rendered in an iframe and keeps the page editor 100% visible to the user.

Usage

Simply call $modules->get('RockIframe')->show('path/to/your/file.pdf') anywhere in the admin to show your data in a sidebar iframe on page load. You can also define a Pagefile(s) object as source of the iframe.

Example

This example shows the first file of the field myfilesfield on the page edit screen of pages having template mypagetemplate:

$wire->addHookAfter("ProcessPageEdit::buildForm", function($event) {
  $page = $event->process->getPage();
  if($page->template !== 'mypagetemplate') return;

  /** @var RockIframe $iframe */
  $iframe = $this->wire->modules->get('RockIframe');
  if($iframe) $iframe->show($page->get('myfilesfield'));
});

Ideas & Notes

PDF preview relies on the browser's capability to preview PDFs. Also at the moment there are no checks which content is thrown to the iframe as source. For images for example we could use https://leafletjs.com/examples/crs-simple/crs-simple.html to enable panning & zooming on the image. For better browsersupport of PDF we could use https://mozilla.github.io/pdf.js/web/viewer.html;

[horst]

3 hours ago, bernhard said:

$iframe = $this->wire->modules->get('RockIframe'); if($iframe) $iframe->show($page->get('myfilesfield'));

Hey @bernhard seems to be a very good timing to me, this release! ?

One question: how would I tell the Iframe to load a page with urlsegments? I don't need to render a file- or imagefield but a sort of external or sibling page that need to be called with an id of the current edited page. Is this possible?

[bernhard]

Glad it helps! That's already possible - I've added an example to the readme:

$wire->addHookAfter("ProcessPageEdit::buildForm", function($event) {
  $page = $event->process->getPage();
  if($page->template !== 'mypagetemplate') return;

  /** @var RockIframe $iframe */
  $iframe = $this->wire->modules->get('RockIframe');
  if($iframe) $iframe->show("http://www.example.com");
});

[bernhard]

Seeing that example it might make more sense to add different options to pw-panel: One showing the panel on top of the background and one pushing the main page to the side while keeping everything visible. That would also make it possible to support mobile devices...

If anybody has time, feel free to improve the module ? ? 

Also if we have any JavaScript experts - I'd love to have the Iframe configurable in its width via mouse drag... no idea how that could be done. At the moment it is set to 40vw.

[dotnetic]

5 hours ago, bernhard said:

Seeing that example it might make more sense to add different options to pw-panel: One showing the panel on top of the background and one pushing the main page to the side while keeping everything visible

That was my first thought

[bernhard]

Maybe someone that is better on the JS/CSS side than I am can come up with a good solution then ?