Detect toolbarGroup mode

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

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:

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

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