Configure toolsOverlay popup

PDF.js Express Version 8.0.1

Detailed description of issue
Hello, we’re looking to configure the toolsOverlay for AnnotationCreateRubberStamp tools.

Currently, we have remove all standard stamp, and create our own custom stamps. The first custom stamp is auto selecteded, but the user must click on the custom button to have access to the other stamps.
Ideally, we’re looking to have the same interface as standard Stamp, but for our custom stamp ( and remove all possibilities to the user to create their own stamps ).

Is there a way to auto select a submenu in the toolsOverlay, and customizing it ? (In this case, removing the delete buttons, the ‘custom Stamps’ buttons, and the add stamps button ) ?

Or just create our own toolsOverlay, and use it instead of the default one ?

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:

Ideally, we’re looking for something like that:
example

Hi Benjamin,

You can disable elements with the disableElements API

For what you want to do that would look something like this:

instance.UI.disableElements([ 'standardStampPanelButton', 'customStampPanel' ]);

Howerver there is no dataElement on the delete stamp button so you may want to add a custom css file and set the icon to display: none PDF.js Express Viewer Style Customization (Color & CSS) | Documentation

so in your css file you would have something like:

.stamp-row .icon{
   display: none
}

and for setting the default tab you can use the setSelectedTab API like so:

  instance.UI.setSelectedTab('rubberStampTab', 'customStampPanelButton');

Cheers,
Dustin

2 Likes

Hi Driley,

Your code almost did the trick.

For the CSS part I had to do the following:

.rubber-stamp-overlay .stamp-row .icon,
.rubber-stamp-overlay .stamp-row-content.add-btn,
.rubber-stamp-overlay .tab-list {
  display: none;
}

.rubber-stamp-overlay .stamp-row-content {
  width: 100%;
}

And the js part:

  instance.UI.setSelectedTab('rubberStampTab', 'customStampPanelButton');
  instance.UI.disableElements(['standardStampPanelButton']);

Thank you for the help !

Cheers,
Benjamin

1 Like