New UI: LeftPanel toggle event missing

[sbi]

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]

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]

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]

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]

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]

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]

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]

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