Customize Popups ​

The popups in WebViewer UI are small floating menus.

Currently, WebViewer has a text popup that appears after the selected text in the document.

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({
      name: 'customButton',
      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({
      name: 'customButton',
      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([{
      name: 'customButton',
      type: 'actionButton',
      img: 'path/to/image',
      onClick: () => console.log('clicked 1')
    }, {
      type: 'divider'
    },
    {
      name: 'customButton',
      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([]);
  });