New UI: LeftPanel toggle event missing

138 views
Skip to first unread message

sbi

unread,
Nov 5, 2018, 11:39:07 AM11/5/18
to PDFTron WebViewer
Hello,

we are currently migrating our expansive customizations of the old WebViewer UI to the new UI within WebViewer 4.0.
While doing so we noticed that the event for reacting to visibility changes of the left panel seems to be missing in the new UI.

Previously we used sidePanelVisibilityChanged to react to the user opening/closing the left panel. Is there a way to do this in the new code that we have overlooked?

Justin Jung

unread,
Nov 7, 2018, 1:59:45 PM11/7/18
to pdfnet-w...@googlegroups.com
Hi Sascha,

The new UI has a different set of APIs for UI interactions. To check visibility of an element, you can use isElementOpen function (https://www.pdftron.com/documentation/web/guides/ui/apis#iselementopen).
For example, to check if leftPanel is open (visible),

var myWebViewer = new PDFTron.WebViewer({ ... }, viewerElement);
viewerElement.addEventListener('ready', function() {
  var viewerInstance = myWebViewer.getInstance();
  var isLeftPanelOpen = viewerInstance.isElementOpen('leftPanel');
  console.log(isLeftPanelOpen);
});

Justin Jung
Software Developer
PDFTron Systems Inc.

sbi

unread,
Nov 8, 2018, 4:19:59 AM11/8/18
to PDFTron WebViewer
Hi Justin,

thanks for your response and help.
The problem with this is that we need to react to the user opening the panel so simply checking isElementOpen once is not enough.
So we would need something along the lines of an 'elementVisibilityChanged' Event which is triggered when openElement, closeElement or toggleElement is called and tells us which element was changed.

Or is there another solution for this?

Config.$document.on('sidePanelVisibilityChanged', function (event, showSidebar) {
    if (showSidebar) {
        Config.scrollToActiveThumb();
    }
});

This was the code we used before to scroll the thumbnails sidebar to the thumbnail of the currently displayed page upon opening the side panel.

Justin Jung

unread,
Nov 13, 2018, 1:03:08 PM11/13/18
to pdfnet-w...@googlegroups.com
Hi Sascha,

I think the event was delete in the process of migrating from jQuery to React/Redux. For now, you would have to change the source file.
For example, you could add something like this to openElement and closeElement functions inside exposedActions.js,

const event = new CustomEvent('visibilityChanged', { detail: { dataElement, isVisible: true } });
document.dispatchEvent(event);

and listen to the event from the config file:

document.addEventListener('visibilityChanged', e => {
  const { dataElement, isVisible } = e.detail;
  console.log(dataElement, isVisible);
});

or from outside of the iframe:

document.querySelector('iframe').contentDocument.addEventListener('visibilityChanged', e => {
  const { dataElement, isVisible } = e.detail;
  console.log(dataElement, isVisible);
});

sbi

unread,
Nov 15, 2018, 4:34:15 AM11/15/18
to PDFTron WebViewer
Hi Justin,

thanks for the help. I filed a pull request on the ui repo to add this to the viewer: https://github.com/PDFTron/webviewer-ui/pull/47
Could you have a look if it is mergeable?

Justin Jung

unread,
Nov 17, 2018, 9:01:33 AM11/17/18
to pdfnet-w...@googlegroups.com
Hi Sascha,

Thank you for the pull request! It's awesome to get contributions from our users :)
To merge it into master, I think we could clean up closeElement and openElement functions a little more.
I'll post the details in the PR thread.

sbi

unread,
Nov 20, 2018, 11:43:39 AM11/20/18
to PDFTron WebViewer
Hi Justin,

thanks for the feedback on my PR. I updated it according to your suggestions. Please let me know if there is something else I should change.

Justin Jung

unread,
Dec 21, 2018, 3:33:00 PM12/21/18
to PDFTron WebViewer
As a reference, the PR has been merged and now you can listen to visibilityChanged event as follows:

// outside of iframe
document
.querySelector('iframe').contentWindow.addEventListener('visibilityChanged', function(e) {
    console
.log(e.detail)
});


// in config.js
window
.addEventListener('visibilityChanged', function(e) {
    console
.log(e.detail)
});

Reply all
Reply to author
Forward
0 new messages