PDFTron 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(PageManipulationSection [, dataElementToInsertAfter])

Adds an array of page manipulation operations to the default operations. If passed a dataElement parameter, it will add the new operations after this element. Otherwise, they will be appended to the start of the existing list of operations.
Parameters:
Name Type Argument Description
PageManipulationSection Array.<UI.PageManipulationOverlay.PageManipulationSection> Array of sections to be added, each with its individual operations. See example below.
dataElementToInsertAfter 'pageRotationControls' | 'pageManipulationControls' <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.PageManipulationOverlay
Example
// Each object in the operations array shall consist of the following:
    {
      type: 'customPageOperation', // Required type of 'customPageOperation'
      header: 'Custom options', // Header to be displayed in the UI
      dataElement: 'customPageOperations', // Unique dataElement
      // Each new section can have one more more operations.
      // The onClick handler for each operation gets passed an array of the currently selected
      // thumbnail page numbers.
      operations: [
        {
          title: 'Alert me of selected thumbnail page numbers',
          img: '/path-to-image',
          onClick: (selectedPageNumbers) => {
            alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
          },
          dataElement: 'customPageOperationButton', // Each operation must have a dataElement
        }
      ]
    }
     // Additionally, to add dividers you can include this in the operations array:
    { type: 'divider' }
    // Example:
    WebViewer(...)
      .then(function (instance) {
        instance.UI.pageManipulationOverlay.add([
          {
            type: 'customPageOperation',
            header: 'Custom options',
            dataElement: 'customPageOperations',
            operations: [
              {
                title: 'Alert me',
                img: '/path-to-image',
                onClick: (selectedPageNumbers) => {
                  alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
                },
                dataElement: 'customPageOperationButton',
              }
            ]
          },
          { type: 'divider' }
        ]);
      });

disableOpeningByRightClick()

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

enableOpeningByRightClick()

Enables the Page Manipulation Overlay opening through right-click.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.pageManipulationOverlay.enableOpeningByRightClick();
  });

getItems()

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

update(PageManipulationSection)

Update all the operations in the PageManipulationOverlay, essentially replacing them with a new list of operations. To update an individual item, use updateElement
Parameters:
Name Type Description
PageManipulationSection Array.<UI.PageManipulationOverlay.PageManipulationSection> The list of PageManipulationSections that will be rendered in the PageManipulation overlay. See the add documentation for an example.
Returns:
The instance of itself
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) => {
                  alert(`Selected thumbnail 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 Description
type string Required type of 'customPageOperation'
header string Header to be displayed in the UI for this section
dataElement string Unique dataElement
operations Array.<UI.PageManipulationOverlay.PageOperation> the operations that will be available under this section

PageOperation

Type:
  • object
Properties:
Name Type Description
title string Title to be displayed for the operation
img string path to imge 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