Customize Popups

The popups in WebViewer UI are small floating menus.

Currently, there are 4 types of popups in WebViewer UI that support customization:

• Text popup: appears after the selected text in the document.

• Annotation popup: appears after selecting the annotation.

• Crop page popup: appears after the selected capture area.

• Content editor popup: appears after selecting the content editing block.

There are a number of ways you may want to customize Popups. To name a few:

• Adding items
• Modifying items
• Deleting items

The WebViewer UI provides APIS to easily handle each of these cases and more.

Get items

The unique identifier of the items in the popup can be retrieved using the getItems API. It returns an array of objects where each object contains a key that denotes the dataElement.

ComPDFKitViewer.init(...)
  .then(instance => {
    instance.UI.textPopup.getItems();
  });

Add items

Adding new items can be done using the add API. The type of items to add can be found in the header item API。

Add new items at the beginning of the popup

To add new items at beginning of the popup, do not provide a second parameter to the add function.

ComPDFKitViewer.init(...)
  .then(instance => {
    instance.UI.textPopup.add({
      type: 'actionButton',
      img: 'path/to/image',
      onClick: () => console.log(instance.Core.getSelectedText())
    });
  });

Add new items at a specific location in the popup

There are 2 ways to do this:

• If you know the specific element you want it to be after then you can provide a valid dataElement string as a second parameter. This will insert the new item(s) after the specified data element.
• If you know the index where you want to add it (for example as the last button) then you can get the list of data elements in the popup using the getItems API. Then retrieve the data element from the item at that index.

ComPDFKitViewer.init(...)
  .then(instance => {
    // insert after the last element in the popup
    const textPopupItems = instance.UI.textPopup.getItems();
    const lastItem = textPopupItems[textPopupItems.length - 1];

    instance.UI.textPopup.add({
      type: 'actionButton',
      img: 'path/to/image',
      onClick: () => console.log('clicked')
    }, lastItem.dataElement);
  });

Modify items

Existing items can be modified using update API.

Replace existing items

ComPDFKitViewer.init(...)
  .then(instance => {
    instance.UI.textPopup.update([{
      type: 'actionButton',
      img: 'path/to/image',
      onClick: () => console.log('clicked 1')
    }, {
      type: 'divider'
    },
    {
      type: 'actionButton',
      img: 'path/to/image',
      onClick: () => console.log('clicked 2')
    }]);
  });

Update ordering of items in the popup

ComPDFKitViewer.init(...)
  .then(instance => {
    const textPopupItems = instance.UI.textPopup.getItems().reverse();
  });

Delete items

1. Hide elements in the popup by using disableElements API。
2. Replace items with empty arrays by using the update API. This is equivalent to deleting all items.

ComPDFKitViewer.init(...)
  .then(instance => {
    // Hide elements using disableElements.
    instance.UI.disableElements('copyTextButton');

    // Delete elements using update.
    instance.UI.textPopup.update([]);
  });