Detect toolbarGroup mode

Technical Support
1

PDF.js Express Version
8.1

Detailed description of issue
I’m looking for a way to detect which toolbarGroup the user is currently looking at, or add an event listener for when the user changes toolbar groups and get it that way.

Expected behaviour
When the document loads detect which toolbar group view is active, and or add an event listener for its change.

Code snippet

instance.UI.getToolbarGroup();
or
documentViewer.addEventListener('toolbarGroupChanged');
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 Andy,

Unfortunately, there are no APIs to this. However, I put in a request to add this API and we should hopefully have it ready in the next minor release! In the meantime here are some possible workarounds.

This one is the least elegant solution. What we do is every time the tool mode changes (happens when changing the header group) look for the header ribbon that has the class active and get it’s data-element, this is the active header groups name. This doesn’t work when clicking view, most likely cause the tool mode doesn’t get set, so you could all just look for all click events on the viewer and see if the header group has changed too.

  docViewer.on('documentLoaded', () => {
    const getCurrentHeaderGroup = () => {
      const groupButtons = instance.iframeWindow.document.querySelector(".ribbon-group.active");
      return groupButtons?.dataset.element;
    }
    let currentHeaderGroup = getCurrentHeaderGroup();
    docViewer.on('toolModeUpdated', () => {
      // instance.iframeWindow.addEventListener('click', () => {
      setTimeout(()=> {
        const newGroup = getCurrentHeaderGroup();
        if(newGroup !== currentHeaderGroup) {
          currentHeaderGroup = newGroup;
          console.log('group updated to: ', newGroup)
        }
      },0)

    })
  });

(note the setTimeout is used because toolModeUpdated is called before changing the header group)

Solution number 2
You can implement the changes that we will be hopefully releasing soon ourselves, by forking our UI Advanced Customization with PDF.js Express Viewer | Documentation
Add to the end of the function setToolbarGroup in src/redux/action/exposedActions webviewer-ui/exposedActions.js at 03c6e5359baae2946fd2eb30a3e371635f738baf · PDFTron/webviewer-ui · GitHub
this:
fireEvent('headerGroupChanged', toolbarGroup);

Then you’ll be able to use it like so:

  instance.iframeWindow.addEventListener('headerGroupChanged', (e) => {
    console.log({e});
  })

Cheers,
Dustin

1 Like
4

Hey Dustin thank you, I think I’ll wait for the release just to make my own life easier :slight_smile:

If you could please ping me here when it’s added.

Thanks!

1 Like
5

@driley Hey Dustin, any ETA on this release?

6

Hi Andy,

Thank you for your patience. I have received approval for this feature request, and it will be in our next minor release, which should hopefully be released sometime this week.

Dustin

7

Yes! You made me very happy as it will be in time of our own release. Thanks!

8

Hi Andy,

Just pinging you to let you know that 8.1.1 has been released and includes the API for detecting toolbarGroupChanged

you can use it like so:

  instance.iframeWindow.addEventListener('toolbarGroupChanged', e => {
    console.log({e});
  })

edit: Above is v7 syntax, here is v8 syntax:

    const { Core } = instance;
    const { documentViewer } = Core;
    documentViewer.addEventListener('toolbarGroupChanged', (e) => {
      console.log({e});
    });

Dustin

9

Nice!! Going to update and test it out. Thanks.

10

Okay perfect, I did think something looked strange about it. But it’s working for my use case. Much appreciated!

11

Hm strange it works when targeting instance.iframeWindow but not when using documentViewer.