Jump to content
bernhard

RockIframe - Splitscreen preview for PW backend

Recommended Posts

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'));
});

img

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;

  • Like 13

Share this post


Link to post
Share on other sites
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?

  • Like 1

Share this post


Link to post
Share on other sites

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");
});

img

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...