PDFTron WebViewer

Class: MultiPageManipulationControls

UI. MultiPageManipulationControls

new MultiPageManipulationControls()

A class which contains MultiPageManipulationControls APIs.

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

Methods

add(pageManipulationSections [, 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
pageManipulationSections Array.<UI.MultiPageManipulationControls.PageManipulationSection> Array of sections to be added, each with its individual operations. See example below.
dataElementToInsertAfter 'leftPanelPageTabsRotate' | 'leftPanelPageTabsOperations' | 'leftPanelPageTabsMore' <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 to the left. You can call getItems to get existing items and their dataElements.
Returns:
The instance itself
Type
UI.MultiPageManipulationControls
Example
// An example of the operation object is shown below.
   // Additionally, to add dividers you can include this in the operations array:
    { type: 'divider' }
    // Example:
    WebViewer(...)
      .then(function (instance) {
        instance.UI.multiPageManipulationControls.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' }
        ]);
      });

getItems()

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

update(pageManipulationSections)

Update all the operations in the MultiPageManipulationControls, essentially replacing them with a new list of operations. To update an individual item, use updateElement
Parameters:
Name Type Description
pageManipulationSections Array.<UI.MultiPageManipulationControls.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.MultiPageManipulationControls
Example
WebViewer(...)
      .then(function (instance) {
        instance.UI.multiPageManipulationControls.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' or 'divider'.
header string Header to be displayed in the UI for this section
dataElement string Unique dataElement
operations Array.<UI.MultiPageManipulationControls.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 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