Add a listener to a PDF toolbar item | Nutrient

To add a custom event listener to a default toolbar item’s DOM element, use the public CSS classes in a selector to find the element. Then add your listener, such as a click listener, to it.

To handle clicks on the page number input of the pager toolbar item, start from the page indicator, which is the element with the .PSPDFKit-Page-Indicator class. The page number input has no public class of its own, so the sample below matches it as input inside .PSPDFKit-Page-Indicator. The sample adds the listener to instance.contentDocument instead of the input, so the listener keeps working when the viewer replaces the input:

NutrientViewer.load({
  // Your configuration.
}).then((instance) => {
  instance.contentDocument.addEventListener("click", (event) => {
    if (
      event.target &&
      event.target.matches(".PSPDFKit-Page-Indicator input")
    ) {
      console.log("Click!");
    }
  });
});

This approach works for the input but not for the main toolbar’s default buttons, such as the pager’s next button. Clicks on those buttons don’t reach instance.contentDocument.

With the default pager toolbar item, the page number input appears when the viewport is at least 1,280 pixels wide. In narrower viewports, the page indicator shows the current page and the page count as text, without an input. When the viewport size crosses that width, the viewer replaces the input, and the listener handles clicks on the new one. To show the input at every viewport width, replace pager with pager-expanded in your toolbar items. For more information, see configuring pager toolbar display behavior.

This has been tested with Nutrient Web SDK 1.25.0.