PDFTron WebViewer

Interface: ThumbnailControlMenu

UI. ThumbnailControlMenu

A class which contains ThumbnailControlMenu APIs.

⚠ If you want to remove an item in the ThumbnailControlMenu, use disableElements.

Methods

add(MenuItem [, dataElementToInsertAfter])

Adds an array of thumbnail menu buttons to the default menu. If passed a dataElement parameter, it will add the new menu buttons after this element. Otherwise, they will be appended to the start of the existing list of buttons.
Parameters:
Name Type Argument Description
MenuItem Array.<UI.ThumbnailControlMenu.MenuItem> Array of buttons to be added, each with its individual operations. See example below.
dataElementToInsertAfter 'thumbRotateClockwise' | 'thumbDelete' <optional>
 An optional string that determines where in the overlay the new section will be added. If not included, the new page manipulation section will be added at the top. You can call getItems to get existing items and their dataElements.
Returns:
The instance itself
Type
UI.ThumbnailControlMenu
Example
WebViewer(...)
      .then(function (instance) {
        instance.UI.thumbnailControlMenu.add([
          {
            title: 'alertme',
            img: 'data:image/png;base64,...',
            onClick: (selectedPageNumbers) => {
              alert(`Selected thumbnail: ${selectedPageNumbers}`);
            },
            dataElement: 'alertMeDataElement',
          },
        ]);
      })

getItems()

Return the array of items in the ThumbnailControlMenu.
Returns:
Current items in the ThumbnailControlMenu.
Type
Array.<UI.ThumbnailControlMenu.MenuItem>
Example
WebViewer(...)
      .then(function(instance) {
        instance.UI.ThumbnailControlMenu.getItems();
      });

update(MenuItem)

Update all the buttons in the ThumbnailControlMenu, essentially replacing them with a new list of buttons. To update an individual item, use updateElement
Parameters:
Name Type Description
MenuItem Array.<UI.ThumbnailControlMenu.MenuItem> The list of MenuItems that will be rendered in the thumbnail menu overlay. See the add documentation for an example.
Returns:
The instance of itself
Type
UI.ThumbnailControlMenu
Example
WebViewer(...)
      .then(function (instance) {
        instance.UI.thumbnailControlMenu.update([
          {
            title: 'alertme',
            img: 'data:image/png;base64,...',
            onClick: (selectedPageNumbers) => {
              alert(`Selected thumbnail: ${selectedPageNumbers}`);
            },
            dataElement: 'alertMeDataElement',
          },
        ]);
      })

Type Definitions

MenuItem

Type:
  • object
Properties:
Name Type Description
title string Title to be displayed for the operation
img string path to image to be used as an icon for the operation
onClick function onClick handler, which takes as a parameter an array of selected page numbers
dataElement string Unique dataElement for this operation