# 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

#### Search results