Add a Listener to a Default Toolbar Item

It’s possible to add a custom event listener to a DOM element that’s part of a default toolbar item. To do this, use one of the public CSS classes as a selector for adding the event listener you need, e.g. for click events.

Imagine a scenario where you want to handle clicks performed on the input that indicates the current page that’s part of the pager toolbar item. That particular inputs gets rerendered every time the current page changes, so you need to add a listener to viewState.currentPageIndex.change events on the PSPDFKit for Web instance to reattach the listeners:

let instance = null;

PSPDFKit.load({
  // Your configuration.
}).then((instance) => {
  function attachListener() {
    instance.contentDocument
      .querySelector(".PSPDFKit-Page-Indicator-Input")
      .addEventListener("click", () => {
        console.log("Click!");
      });
  }

  attachListener();

  instance.addEventListener(
    "viewState.currentPageIndex.change",
    (e) => {
      // Wrap on `setTimeout` to wait for next event loop run.
      setTimeout(() => {
        attachListener();
      });
    }
  );
});

This has been tested with PSPDFKit for Web 2019.5.4.