When webviewer-core.min.js is included, click events stop working

Technical Support WebViewer
1

WebViewer Version: 8.6.0

If I include core/webviewer-core.min.js in the page of our application, then mouse click events stop working in a particular case within another 3rd party toolkit being used in our application.

The problem event handler is the one for mousedown which webviewer-core.min.js is listening for on the document. If I manually remove that event handler via chrome dev tools, then my mouse clicks work again.

I’m clutching at straws a bit but is there a way of stopping webviewer-core.min.js adding it’s event handlers? It seems rather odd that it’s adding them at all, given they are only needed when the webviewer is actually shown.

The problem is proving hard to replicate independently or simplistically, but just simply not including webviewer-core.min.js in the page fixes the problem.

I was also wondering, is it possible to get the non-minified version of the pdftron files? This might help me come up with an alternative solution.

2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

3

Hi,

Thank you for contacting us and reporting this issue. Could I get some more information about this issue

  • What is the third party toolkit that is having issue with WebViewer?
  • What is the case that mousedown event stop working? (What are step to reproduce this?)
  • What element (and maybe scope) is the event listener attached to? Is it breaking something inside WebViewer or something else in your project when WebViewer isn’t open (is WebViewer being preloaded or is this happening after it been closed)
    • Would it be possible to get a screenshot of the function the event listener calls?

We don’t normally provide non-minified code to customer (we are more likely to ask for access to customer websites and debug WebViewer minified code on their site). If you have a public site where this issue is happening, you can use the support form below to send us information on how to access it (or post it here if you are ok with the information being public)
Support form

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

4
  • What is the third party toolkit that is having issue with WebViewer?

Its google polymer v2 - Polymer library - Polymer Project.

  • What is the case that mousedown event stop working? (What are step to reproduce this?)

As I said, the problem is proving hard to replicate independently or simplistically, So I don’t have simple replication steps as of now. However, its not that all mouse click events stop working, it appears to be one particular case where an element is reparented to document.body. After that, mouse clicks in particular child elements stop working. I will try to find some time to create a standalone replication but that could take a while.

What element (and maybe scope) is the event listener attached to?

Well it’s an element which is an element in our application. It happens to be a custom element in shadow dom. Its handling the click event via some polymer-specific event binding. It happens to be a dropdown menu, the user can no longer click an item to choose something from the dropdown.

Is it breaking something inside WebViewer or something else in your project when WebViewer isn’t open (is WebViewer being preloaded or is this happening after it been closed)

It’s breaking our application.

  • Would it be possible to get a screenshot of the function the event listener calls?

It’s not as simple as that. The event is handled via some polymer-specific event binding and is down in the guts of polymer handling.

The complexity of the issue is what prompted me to ask, extremely optimistically, if there is a way to switch off webviewer event listeners. To reiterate - it seems rather odd that it’s adding them at all, given they are only needed when the webviewer is actually shown.

5

Hi,

Thank you for the information about your setup. There isn’t a way to switch off WebViewer event listeners (this would cause a lot of issues for WebViewer). WebViewer should be isolated to it own iframe so it shouldn’t be interfering with event listeners outside of that iframe. So something unusual seems to be happening. How are you adding the event listeners that are breaking, are adding them using JavaScript or using Polymer

document.querySelector('#element').addEventListener('mousedown', functionStopWorking)

<example-element on-mousedown="functionStopWorking"></example-element >

Also when are those events being added? Are they added before WebViewer is loaded or after WebViewer is loaded (if after, do they stop working when WebViewer is removed from the DOM)?

We are still investigating this issue and will keep you up to date when we find out more. If you could create a small sample that isolate the problem, it would help a lot.

In the meantime, thank you for your patience.

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

6

It is adding event listeners to the main page.

Using a page containing just this:

<!DOCTYPE html>
<html>
<head>
  <script src='/js/libs/pdftron-8.6.0/webviewer.min.js'></script>
  <script src="/js/libs/pdftron-8.6.0/core/webviewer-core.min.js"></script>
</head>
<body>
</body>
</html>

then webviewer-core.min.js adds event listeners for (at least) mousedown/mouseup/touchstart/touchend/touchcancel.

In un-minified code (i.e. un-minified via the chrome dev tools pretty print button) those are added at line 65966 in webviewer-core.min.js version 8.6.0:

    , function(Aa, ua) {
        ua.a = function() {
            var r = "bubbles touches targetTouches changedTouches ctrlKey metaKey shiftKey".split(" ")
              , pa = "bubbles clientX clientY screenX screenY pageX pageY ctrlKey metaKey shiftKey".split(" ");
            (new (function() {
                function ka() {}
                ka.prototype.init = function() {
                    this.Vt = null;
                    this.Vw = !1;
                    this.jga();
                    document.addEventListener("mousedown", this.TV.bind(this));
                    document.addEventListener("mouseup", this.mk.bind(this));
                    document.addEventListener("touchstart", this.TV.bind(this), {
                        passive: !1
                    });
                    document.addEventListener("touchend", this.mk.bind(this));
                    document.addEventListener("touchcancel", this.Zea.bind(this))
                }

You can also get to the area of code via chrome dev console using:

getEventListeners(document).mousedown[0].listener

and then right-click the shown function and choose “Show function definition”. The added event listeners are just prior to the code shown.

7

Hello,

Thank you for the detailed information. If possible, try to not include the webviewer-core.min.js script. The webviewer.min.js script will fetch the webviewer-core.min.js script and run it inside the iframe. I want to make sure there is a reason for why you are manually including the webviewer-core.min.js script (for example if you are trying preprocess files or show file preview) and if you could resolve this issue by not including that script

The code you posted is part of some polyfill we have, it’s in case users are using IE or an older version of some other browsers. It normally only run inside an iframe and doesn’t cause issues. However since you seem to be importing webviewer-core.min.js in the global scope, it could be interfering with some code in Polymer or some other code. We could add a way to disable the polyfill however this could cause other issues, so it’s not an ideal solution.

I investigated this issue a bit but couldn’t seem to reproduce the issue you’re seeing. Below is a sample project of what I was testing (I mainly added WebViewer to the “shop” sample project that is available)

You mention, that WebViewer was causing issues with a dropdown. What library is that dropdown from (or was it a custom made drop down menu)? If possible, could you take a look to see if you can recreate the issue in that sample project above (and confirm if you are including WebViewer in your project in a similar way, in case that affect the issue showing up )? Thank you

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com