Apryse WebViewer

Interface: PageManipulationOverlay

UI. PageManipulationOverlay

A class which contains PageManipulationOverlay APIs.

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

Methods

add(operations [, dataElementToInsertAfter])

Adds page manipulation operations to the overlay. If a dataElement parameter is provided, the new operations will be added after that element. Otherwise, they will be added at the beginning.
Parameters:
Name Type Argument Description
operations Array.<UI.PageManipulationOverlay.PageManipulationSection> Array of sections to be added, each with its individual operations.
dataElementToInsertAfter string <optional>
 The data element of the item to insert after. Can be 'pageRotationControls', 'pageManipulationControls', 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 PageManipulationOverlay instance for chaining.
Type
UI.PageManipulationOverlay
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.pageManipulationOverlay.add([
      {
        type: 'customPageOperation',
        header: 'Custom options',
        dataElement: 'customPageOperations',
        operations: [
          {
            title: 'Alert me of selected thumbnail page numbers',
            img: '/path-to-image',
            onClick: (selectedPageNumbers) => {
              alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
            },
            dataElement: 'customPageOperationButton',
          }
        ]
      },
      { type: 'divider' }
    ]);
  });

disableOpeningByRightClick()

Disables the Page Manipulation Overlay from opening through right-click on thumbnails
See:
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.pageManipulationOverlay.disableOpeningByRightClick();
  });

enableOpeningByRightClick()

Enables the Page Manipulation Overlay to open through right-click on thumbnails.
See:
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.pageManipulationOverlay.enableOpeningByRightClick();
  });

getItems()

Returns the current array of items in the PageManipulationOverlay
Returns:
The current page manipulation sections in the overlay
Type
Array.<UI.PageManipulationOverlay.PageManipulationSection>
Example
WebViewer(...)
  .then(function(instance) {
    const items = instance.UI.pageManipulationOverlay.getItems();
    console.log('Current page manipulation items:', items);
  });

update(operations)

Replaces all operations in the PageManipulationOverlay with a new list of operations. To update an individual item, use UI.updateElement.
Parameters:
Name Type Description
operations Array.<UI.PageManipulationOverlay.PageManipulationSection> The list of page manipulation sections that will be rendered in the overlay. If not provided, the overlay will be cleared.
See:
Returns:
The PageManipulationOverlay instance for chaining.
Type
UI.PageManipulationOverlay
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.pageManipulationOverlay.update([
      {
        type: 'customPageOperation',
        header: 'Print Operations',
        dataElement: 'customPageOperations',
        operations: [
          {
            title: 'Print page',
            img: 'icon-header-print-line',
            onClick: (selectedPageNumbers) => {
              console.log('Printing pages:', selectedPageNumbers);
            },
            dataElement: 'printThumbnailPage',
          }
        ]
      },
      { type: 'divider' },
      {
        type: 'customPageOperation',
        header: 'Alert Operations',
        dataElement: 'customPageOperations-2',
        operations: [
          {
            title: 'Alert me',
            img: 'icon-header-print-line',
            onClick: (selectedPageNumbers) => {
              alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
            },
            dataElement: 'alertPage',
          }
        ]
      }
    ]);
  });

Type Definitions

PageManipulationSection

Type:
  • Object
Properties:
Name Type Argument Description
type string The type of section. Use 'customPageOperation' for custom operations or 'divider' for separators.
header string <optional>
 Header text to be displayed in the UI for this section. Required if type is 'customPageOperation'.
dataElement string <optional>
 Unique data element identifier. Required if type is 'customPageOperation'.
operations Array.<UI.PageManipulationOverlay.PageOperation> <optional>
 The operations that will be available under this section. Required if type is 'customPageOperation'.

PageOperation

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