closeElements function of webviewer.UI is not working as expected

Technical Support WebViewer
1

WebViewer Version: 10.11.0

Do you have an issue with a specific file(s)? closeElements
Can you reproduce using one of our samples or online demos? no
Are you using the WebViewer server? yes
Does the issue only happen on certain browsers? no
Is your issue related to a front-end framework? yes
Is your issue related to annotations? yes

We are trying to selectAnnotation from core.annotationmanager then close the dataelement annotationpopup.
So we used the closeElements property of webviewer.UI to close annotationpopup.
But we still see the popup available.
So we wanted to know if their is any change in implementation of closeElement .

2

Hello @ashishbarai,

Thank you for posting on our forum.

If I understand correctly, your desired workflow is to programmatically select an annotation without the annotation popup appearing? If not, feel free to correct me.

If so, we recommend disabling the element using the disableElements() API. This will prevent the popup from appearing when you select the annotations. This can always be reenabled via "instance.UI.enableElements(['annotationpopup]);". You can find the API doc here: Apryse WebViewer Namespace: UI

If this does not fit your intended workflow, please provide the exact code snippet used to close the annotation popup as well as a demo video of the behavior you are describing, highlighting expected vs. actual behavior.

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

3

Hello @jromanocarlsen

When i try to use the disable element i see the annotationpopup elements is getting hidden but as per our requirement we are to use close elements because using close element i see we dont have to manually enable element.
So i want to ask if any difference is their in their working.

Another point i want to mention is i am facing this issue while trying to select highlighted word.

I will mention the steps to reproduce the issue

  1. I went to the demo of pdftron provided with existing document.
  2. I select any text in the document.
  3. I highlight the text using the icon available in the popup.

Issue faced

  1. When i click on the popup i see a tooltip appear for comment which i think should only appear when i hover over the icon as it is for others buttons.
  2. When i start to scroll up and down i see the popup appear and disappear which i think is an issue.
4

Hello @ashishbarai,

Regarding the other issues you are facing regarding popup, please submit a new post on our forum to help other users who may have a similar issue find the resolution more efficiently.

The difference between closeElements and disableElements is that closeElements would set the visibility states of the elements to be hidden, while disableElements would remove the elements from the DOM entirely.

How are you trying to close the annotationPopup? In what context are you calling closeElements? Testing on our latest release (Version 10.12), I was able to successfully hide annotation popup by using the following:

instance.UI.addEventListener('visibilityChanged', (e) => {
    console.log(e.detail);
    if (e.detail.element === 'annotationPopup' && e.detail.isVisible === true) {
      console.log('annotationPopup is visible');
      instance.UI.closeElements(['annotationPopup']);
    }
  });

Let me know if this code snippet works for you!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

5

Hello @jromanocarlsen
We are using

instance.UI.closeElements([‘annotationPopup’]);

to close the element but it looks like some other event might be getting called which is reopening the popup.

The code snippet which you have shared above seems to be working but I wanted to know if we can call this evenlistener through some custom methods and not globally all the time.

Regards

6

Hello @ashishbarai,

Thank you for the information. Glad to hear the code snippet is working for you.

If I understand correctly, you are wondering if the code snippet I provided could be called through a method or some event to prevent this behavior from occurring all the time? Please let me know if I’ve misunderstood.

If this the case, this can definitely be done. You can place this event listener within a callback function for a button click, another event, or some other condition that you can set. You can also remove the event listener via removeEventListener. You can find the API doc here: Apryse WebViewer Namespace: UI

Let me know if you need further clarification.

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.