Detect toolbarGroup mode

Technical Support
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