Apryse 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(menuItems [, dataElementToInsertAfter])

Adds menu items to the thumbnail control menu. If a dataElement parameter is provided, the new items will be added after that element. Otherwise, they will be added at the beginning.
Parameters:
Name Type Argument Description
menuItems Array.<UI.ThumbnailControlMenu.MenuItem> Array of menu items to be added
dataElementToInsertAfter string <optional>
 The data element of the item to insert after. Can be 'thumbRotateClockwise', 'thumbDelete', or a custom data element. If not provided, items will be added at the beginning. Call getItems to see existing items and their data elements.
Returns:
The ThumbnailControlMenu instance for chaining
Type
UI.ThumbnailControlMenu
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.thumbnailControlMenu.add([
      {
        title: 'Alert me',
        img: 'data:image/png;base64,...',
        onClick: (selectedPageNumbers) => {
          alert(`Selected thumbnails: ${selectedPageNumbers}`);
        },
        dataElement: 'alertMeDataElement',
      },
    ]);
  });

getItems()

Returns the current array of items in the ThumbnailControlMenu
Returns:
The current menu items in the thumbnail control menu
Type
Array.<UI.ThumbnailControlMenu.MenuItem>
Example
WebViewer(...)
  .then(function(instance) {
    const items = instance.UI.thumbnailControlMenu.getItems();
    console.log('Current thumbnail control menu items:', items);
  });

update(menuItems)

Replaces all items in the ThumbnailControlMenu with a new list of menu items. To update an individual item, use UI.updateElement.
Parameters:
Name Type Description
menuItems Array.<UI.ThumbnailControlMenu.MenuItem> The list of menu items that will be rendered in the thumbnail control menu. If not provided, the menu will be cleared.
See:
Returns:
The ThumbnailControlMenu instance for chaining
Type
UI.ThumbnailControlMenu
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.thumbnailControlMenu.update([
      {
        title: 'Alert me',
        img: 'data:image/png;base64,...',
        onClick: (selectedPageNumbers) => {
          console.log('Selected thumbnails:', selectedPageNumbers);
        },
        dataElement: 'alertMeDataElement',
      },
    ]);
  });

Type Definitions

MenuItem

Type:
  • Object
Properties:
Name Type Description
title string Title to be displayed for the menu item
img string Path to the image to be used as an icon for the menu item
onClick function Click handler function that receives an array of selected page numbers as a parameter
dataElement string Unique data element identifier for this menu item