# Class: WebViewer

#### WebViewer(options, viewerElement)

  Creates a WebViewer instance and embeds it on the HTML page.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `options` | object | ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `annotationUser` | string | <optional> | Guest | Name of the user for annotations
  `config` | string | <optional> |  | URL path to a custom JavaScript for customizations
  `css` | string | <optional> |  | URL path to a custom CSS file for customizations
  `disabledElements` | Array.<string> | <optional> |  | List of data-elements to be disabled in UI
  `enableAnnotations` | boolean | <optional> | true | Enable annotations feature
  `enableAzureWorkaround` | boolean | <optional> | false | Enable workaround of the issue in Azure related to range requests
  `enableFilePicker` | boolean | <optional> | false | Enable file picker feature
  `enableMeasurement` | boolean | <optional> | false | Enable measurement tools
  `enableRedaction` | boolean | <optional> | false | Enable redaction tool
  `extension` | string | <optional> |  | Extension of the document to be loaded
  `forceClientSideInit` | boolean | <optional> | false | If set to true then when loading a document using WebViewer Server the document will always switch to client only rendering allowing page manipulation and the full API to be used.
  `fullAPI` | boolean | <optional> | false | Enable PDFNet.js library functions
  `initialDoc` | string | <optional> |  | URL path to a document to load on startup
  `isAdminUser` | boolean | <optional> | false | Set user permission to admin
  `isReadOnly` | boolean | <optional> | false | Set user permission to read-only
  `licenseKey` | string |  |  | License key for viewing documents
  `mobileRedirect` | boolean | <optional> | true | Whether the mobile viewer should redirect to a new window or not
  `path` | boolean | <optional> | 'WebViewer/lib' | Path to the WebViewer lib folder
  `preloadWorker` | string | <optional> |  | Type of workers to be preloaded. Accepts `pdf`|`office`|`all`.
  `ui` | string | <optional> | default | Type of UI to be used
  `workerTransportPromise` | object | <optional> |  | ###### Properties
  Name | Type | Argument | Description
  --- | --- | --- | ---
  `pdf` | function | <optional> | Promise that resolves to a PDF worker
  `office` | function | <optional> | Promise that resolves to an office worker
  `viewerElement` | HTMLElement | DOM element that will contain WebViewer

  ##### Returns:

  A promise resolved with WebViewer instance.

  Type
    Promise

  ##### Examples

      // 5.1 and after
      WebViewer({
        licenseKey: 'YOUR_LICENSE_KEY'
      }, document.getElementById('viewer'))
        .then(function(instance) {
          var docViewer = instance.docViewer;
          var annotManager = instance.annotManager;
          // call methods from instance, docViewer and annotManager as needed

          // you can also access major namespaces from the instancs as follows:
          // var Tools = instance.Tools;
          // var Annotations = instance.Annotations;
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer({
        l: 'YOUR_LICENSE_KEY'
      }, viewerElement);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;
        var annotManager = docViewer.getAnnotationManager();
        // call methods from instance, docViewer and annotManager as needed

        // you can also access major namespaces from the iframe window as follows:
        // var iframeWindow = document.querySelector('iframe').contentWindow;
        // var Tools = iframeWindow.Tools;
        // var Annotations = iframeWindow.Annotations;
      });

### Classes

Header

### Members

#### Actions

  Actions namespace

  See:
    - Actions

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var Actions = instance.Actions;
              // Actions.SomeClass
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var viewerIframe = document.querySelector('iframe');
            var Actions = viewerIframe.contentWindow.Actions;
            // Actions.SomeClass
          });

#### Annotations

  Annotations namespace

  See:
    - Annotations

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var Annotations = instance.Annotations;
              // Annotations.SomeClass
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var viewerIframe = document.querySelector('iframe');
            var Annotations = viewerIframe.contentWindow.Annotations;
            // Annotations.SomeClass
          });

#### annotManager

  AnnotationManager instance

  See:
    - CoreControls.AnnotationManager

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var annotManager = instance.annotManager;
              // annotManager.someAPI();
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var instance = viewer.getInstance();
            var docViewer = instance.docViewer;
            var annotManager = docViewer.getAnnotationManager();
            // annotManager.someAPI();
          });

#### CoreControls

  CoreControls namespace

  See:
    - CoreControls

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var CoreControls = instance.CoreControls;
              // CoreControls.someAPI();
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var viewerIframe = document.querySelector('iframe');
            var CoreControls = viewerIframe.contentWindow.CoreControls;
            // CoreControls.someAPI();
          });

#### docViewer

  DocumentViewer instance

  See:
    - CoreControls.DocumentViewer

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var docViewer = instance.docViewer;
              // docViewer.someAPI();
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var instance = viewer.getInstance();
            var docViewer = instance.docViewer;
            // docViewer.someAPI();
          });

#### FitMode

  Contains all posible modes for fitting/zooming pages to the viewer. The behavior may vary depending on the LayoutMode.

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `FitPage` | string | A fit mode where the zoom level is fixed to the width or height of the page, whichever is smaller.
  `FitWidth` | string | A fit mode where the zoom level is fixed to the width of the page.
  `Zoom` | string | A fit mode where the zoom level is not fixed.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var FitMode = instance.FitMode;
          instance.setFitMode(FitMode.FitWidth);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var FitMode = instance.FitMode;
        instance.setFitMode(FitMode.FitWidth);
      });

#### iframeWindow

  WebViewer iframe window object

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var iframeWindow = instance.iframeWindow;
              // iframeWindow.SomeNamespace
              // iframeWindow.document.querySelector('.some-element');
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var viewerIframe = document.querySelector('iframe');
            var iframeWindow = viewerIframe.contentWindow;
            // iframeWindow.SomeNamespace
            // iframeWindow.document.querySelector('.some-element');
          });

#### LayoutMode

  Contains string enums for all layouts for WebViewer. They are used to dictate how pages are placed within the viewer.

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `Single` | string | Only the current page will be visible.
  `Continuous` | string | All pages are visible in one column.
  `Facing` | string | Up to two pages will be visible.
  `FacingContinuous` | string | All pages visible in two columns.
  `FacingCover` | string | All pages visible in two columns, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)
  `FacingCoverContinuous` | string | All pages visible, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var LayoutMode = instance.LayoutMode;
          instance.setLayoutMode(LayoutMode.Single);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var LayoutMode = instance.LayoutMode;
        instance.setLayoutMode(LayoutMode.Single);
      });

#### PartRetrievers

  PartRetrievers namespace

  See:
    - PartRetrievers

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var PartRetrievers = intance.PartRetrievers;
              // PartRetrievers.SomeClass
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var viewerIframe = document.querySelector('iframe');
            var PartRetrievers = viewerIframe.contentWindow.CoreControls.PartRetrievers;
            // PartRetrievers.SomeClass
          });

#### PDFNet

  PDFNet namespace

  See:
    - PDFNet

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var PDFNet = instance.PDFNet;
              // PDFNet.someAPI();
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var viewerIframe = document.querySelector('iframe');
            var PDFNet = viewerIframe.contentWindow.PDFNet;
            // PDFNet.someAPI();
          });

#### Tools

  Tools namespace

  See:
    - Tools

  ##### Examples

      // 5.1 and after
          WebViewer(...)
            .then(function(instance) {
              var Tools = instance.Tools;
              // Tools.SomeClass
            });

      // 4.0 ~ 5.0
          var viewerElement = document.getElementById('viewer');
          var viewer = new PDFTron.WebViewer(...);

          viewerElement.addEventListener('ready', function() {
            var viewerIframe = document.querySelector('iframe');
            var Tools = viewerIframe.contentWindow.Tools;
            // Tools.SomeClass
          });

### Methods

#### addSearchListener(searchListener)

  Adds a listener function to be called when search is completed.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `searchListener` | WebViewer~searchListener | Callback function that will be triggered when search completed

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          function searchListener(searchValue, options, results) {
            console.log(searchValue, options, results);
          };

          instance.addSearchListener(searchListener);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var searchListener = function(searchValue, options, results) {
          console.log(searchValue, options, results);
        };

        instance.addSearchListener(searchListener);
      });

#### addSortStrategy(sortStrategy)

  Adds a sorting strategy in notes panel.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `sortStrategy` | object | Sorting strategy that will be used to sort notes ###### Properties
  Name | Type | Description
  --- | --- | ---
  `name` | string | Name of the strategy, which will be shown in notes panel's dropdown
  `getSortedNotes` | WebViewer~getSortedNotes | Function that takes unsorted notes (annotations) and returns them sorted
  `shouldRenderSeparator` | WebViewer~shouldRenderSeparator | Function that returns when a separator should be rendered
  `getSeparatorContent` | WebViewer~getSeparatorContent | Function that returns the content of a separator

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var mySortStrategy = {
            name: 'annotationType',
            getSortedNotes: function(notes) {
              return notes.sort(function(a ,b) {
                if (a.Subject < b.Subject) return -1;
                if (a.Subject > b.Subject) return 1;
                if (a.Subject === b.Subject) return 0;
              });
            },
            shouldRenderSeparator: function(prevNote, currNote) {
              return prevNote.Subject !== currNote.Subject;
            },
            getSeparatorContent: function(prevNote, currNote) {
              return currNote.Subject;
            }
          };

          instance.addSortStrategy(mySortStrategy);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var mySortStrategy = {
          name: 'annotationType',
          getSortedNotes: function(notes) {
            return notes.sort(function(a ,b) {
              if (a.Subject < b.Subject) return -1;
              if (a.Subject > b.Subject) return 1;
              if (a.Subject === b.Subject) return 0;
            })
          },
          shouldRenderSeparator: function(prevNote, currNote) {
            return prevNote.Subject !== currNote.Subject;
          },
          getSeparatorContent: function(prevNote, currNote) {
            return currNote.Subject;
          }
        };

        instance.addSortStrategy(mySortStrategy);
      });

#### closeDocument()

  Closes the document that's currently opened.

  ##### Returns:

  A promise resolved after document is closed.

  Type
    Promise

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            setTimeout(function() {
              instance.closeDocument().then(function() {
                console.log('Document is closed');
              });
            }, 3000);
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          setTimeout(function() {
            instance.closeDocument().then(function() {
              console.log('Document is closed');
            });
          }, 3000);
        });
      });

#### closeElements(dataElements)

  Sets visibility states of the elements to be hidden. Note that closeElements works only for panel/overlay/popup/modal elements.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `dataElements` | Array.<string> | Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // closes (hides) text popup and left panel in the UI
          instance.closeElements([ 'menuOverlay', 'leftPanel' ]);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // closes (hides) text popup and left panel in the UI
        instance.closeElements([ 'menuOverlay', 'leftPanel' ]);
      });

#### disableAnnotations()

  Disables annotations feature, affecting the annotation visibility and elements related to annotations.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disableAnnotations();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disableAnnotations();
      });

#### disableDownload()

  Disables download feature, affecting the Download button in menu overlay.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disableDownload();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disableDownload();
      });

#### disableElements(dataElements)

  Unmount multiple elements in the DOM. Note that this ONLY removes the DOM elements without disabling related features.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `dataElements` | Array.<string> | Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // remove left panel and left panel button from the DOM
          instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // remove left panel and left panel button from the DOM
        instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
      });

#### disableFilePicker()

  Disables file picker feature, affecting the Open files button in menu overlay and shortcut to open local files (ctrl/cmd + o).

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disableFilePicker();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disableFilePicker();
      });

#### disableLocalStorage()

  Disables localStorage feature, preventing tool styles from being saved to localStorage after changed.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disableLocalStorage();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disableLocalStorage();
      });

#### disableMeasurement()

  Disables measurement feature, affecting any elements related to measurement tools.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disableMeasurement();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disableMeasurement();
      });

#### disableNotesPanel()

  Disables notes panel feature, affecting any elements related to notes panel.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disableNotesPanel();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disableNotesPanel();
      });

#### disablePrint()

  Disables print feature, affecting the Print button in menu overlay and shortcut to print (ctrl/cmd + p).

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disablePrint();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disablePrint();
      });

#### disableRedaction()

  Disables redaction feature, affecting any elements related to redaction.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disableRedaction();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disableRedaction();
      });

#### disableTextSelection()

  Disables text to be selected in the document.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.disableTextSelection();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.disableTextSelection();
      });

#### disableTools( [toolNames])

  Disable multiple tools.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `toolNames` | Array.<string> | <optional> | all tools | Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be disabled.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // disable sticky annotation tool and free text tool
          instance.disableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // disable sticky annotation tool and free text tool
        instance.disableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
      });

#### downloadPdf( [includeAnnotations])

  Downloads the pdf document with or without annotations added by WebViewer UI.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `includeAnnotations` | boolean | <optional> | true | Whether or not to include annotations added by WebViewer UI.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            // download pdf without annotations added by WebViewer UI
            instance.downloadPdf(false);
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          // download pdf without annotations added by WebViewer UI
          instance.downloadPdf(false);
        });
      });

#### enableAnnotations()

  Enables annotations feature, affecting the annotation visibility and elements related to annotations.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enableAnnotations();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enableAnnotations();
      });

#### enableDownload()

  Enables download feature, affecting the Download button in menu overlay.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enableDownload();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enableDownload();
      });

#### enableElements(dataElements)

  Remount the hidden elements in the DOM.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `dataElements` | Array.<string> | Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // remove left panel and left panel button from the DOM
          instance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // remove left panel and left panel button from the DOM
        instance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
      });

#### enableFilePicker()

  Enables file picker feature, affecting the Open files button in menu overlay and shortcut to open local files (ctrl/cmd + o).

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enableFilePicker();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enableFilePicker();
      });

#### enableLocalStorage()

  Enables localStorage feature, tool styles will be saved to localStorage after changed.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enableLocalStorage();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enableLocalStorage();
      });

#### enableMeasurement()

  Enables measurement feature, affecting any elements related to measurement tools.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enableMeasurement();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enableMeasurement();
      });

#### enableNotesPanel()

  Enables notes panel feature, affecting any elements related to notes panel.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enableNotesPanel();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enableNotesPanel();
      });

#### enablePrint()

  Enables print feature, affecting the Print button in menu overlay and shortcut to print (ctrl/cmd + p).

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enablePrint();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enablePrint();
      });

#### enableRedaction()

  Enables redaction feature, affecting any elements related to redaction.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enableRedaction();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enableRedaction();
      });

#### enableTextSelection()

  Enables text to be selected in the document.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.enableTextSelection();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.enableTextSelection();
      });

#### enableTools( [toolNames])

  Enable multiple tools.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `toolNames` | Array.<string> | <optional> | all tools | Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be enabled.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // enable sticky annotation tool and free text tool
          instance.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // enable sticky annotation tool and free text tool
        instance.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
      });

#### focusNote(annotationId)

  Focuses a note input field for the annotation. If the notes panel is closed, it is automatically opened before focusing.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `annotationId` | string | Id of an annotation.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var annotManager = instance.annotManager;

          annotManager.on('annotationChanged', function(e, annotations, action) {
            annotations.forEach(function(annotation) {
              // Focus the note when annotation is created
              if (action === 'add' && annotation.Listable) {
                instance.focusNote(annotation.Id); // note it is a capital i
              }
            });
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var annotManager = instance.docViewer.getAnnotationManager();

        annotManager.on('annotationChanged', function(e, annotations, action) {
          annotations.forEach(function(annotation) {
            // Focus the note when annotation is created
            if (action === 'add' && annotation.Listable) {
              instance.focusNote(annotation.Id); // note it is a capital i
            }
          });
        });
      });

#### getAnnotationUser()

  Return the current username.

  ##### Returns:

  Current username

  Type
    string

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          console.log(instance.getAnnotationUser());
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        console.log(instance.getAnnotationUser());
      });

#### getCurrentPageNumber()

  Return the current page number (1-indexed) of the document loaded in the WebViewer.

  ##### Returns:

  Current page number (1-indexed)

  Type
    number

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            console.log(instance.getCurrentPageNumber());
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          console.log(instance.getCurrentPageNumber());
        });
      });

#### getFitMode()

  Return the current fit mode of the WebViewer.

  ##### Returns:

  Current fit mode

  Type
    CoreControls.ReaderControl#FitMode

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            console.log(instance.getFitMode());
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          console.log(instance.getFitMode());
        });
      });

#### getLayoutMode()

  Return the current layout mode of the WebViewer.

  ##### Returns:

  Current layout mode

  Type
    CoreControls.ReaderControl#LayoutMode

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            console.log(instance.getLayoutMode());
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          console.log(instance.getLayoutMode());
        });
      });

#### getPageCount()

  Return the total number of pages of the document loaded in the WebViewer.

  ##### Returns:

  Total number of pages

  Type
    number

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            console.log(instance.getPageCount());
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          console.log(instance.getPageCount());
        });
      });

#### getToolMode()

  Return the current tool object.

  ##### Returns:

  Instance of the current tool

  Type
    Tools

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          console.log(instance.getToolMode().name, instance.getToolMode());
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        console.log(instance.getToolMode().name, instance.getToolMode());
      });

#### getZoomLevel()

  Return the current zoom level

  ##### Returns:

  Zoom level (0 ~ 1)

  Type
    number

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            console.log(instance.getZoomLevel());
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          console.log(instance.getZoomLevel());
        });
      });

#### goToFirstPage()

  Go to the first page of the document. Makes the document viewer display the first page of the document.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.goToFirstPage();
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.goToFirstPage();
        });
      });

#### goToLastPage()

  Go to the last page of the document. Makes the document viewer display the last page of the document.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.goToLastPage();
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.goToLastPage();
        });
      });

#### goToNextPage()

  Go to the next page of the document. Makes the document viewer display the next page of the document.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.goToNextPage();
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.goToNextPage();
        });
      });

#### goToPrevPage()

  Go to the previous page of the document. Makes the document viewer display the previous page of the document.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.goToPrevPage();
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.goToPrevPage();
        });
      });

#### isAdminUser()

  Returns whether the current user is admin.

  ##### Returns:

  Whether the user is admin.

  Type
    boolean

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          console.log(instance.isAdminUser());
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        console.log(instance.isAdminUser());
      });

#### isElementDisabled(dataElement)

  Returns whether the element is disabled.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `dataElement` | string | data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

  ##### Returns:

  Whether the element is disabled.

  Type
    boolean

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          console.log(instance.isElementDisabled('leftPanel'));
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        console.log(instance.isElementDisabled('leftPanel'));
      });

#### isElementOpen(dataElement)

  Returns whether the element is open.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `dataElement` | string | data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

  ##### Returns:

  Whether the element is open.

  Type
    boolean

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          console.log(instance.isElementOpen('leftPanel'));
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        console.log(instance.isElementOpen('leftPanel'));
      });

#### isMobileDevice()

  Returns if the current browser is on a mobile device.

  ##### Returns:

  Whether the current browser is on a mobile device.

  Type
    boolean

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          console.log(instance.isMobileDevice());
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        console.log(instance.isMobileDevice());
      });

#### isReadOnly()

  Returns whether the current mode is read only.

  ##### Returns:

  Whether the current mode is read only.

  Type
    boolean

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          console.log(instance.isReadOnly());
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        console.log(instance.isReadOnly());
      });

#### isToolDisabled(toolName)

  Returns whether the tool is disabled.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `toolName` | string | Name of the tool, either from tool names list or the name you registered your custom tool with.

  ##### Returns:

  Whether the tool is disabled.

  Type
    boolean

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          console.log(instance.isToolDisabled());
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        console.log(instance.isToolDisabled());
      });

#### loadDocument(documentPath, options)

  Load a document inside WebViewer UI.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `documentPath` | string | File | Path to the document OR File object if opening local file.
  `options` | object | Additional options ###### Properties
  Name | Type | Description
  --- | --- | ---
  `documentId` | string | Unique id of the document.
  `filename` | string | Filename of the document, which is used when downloading the PDF.
  `customHeaders` | object | An object custom HTTP headers to use when retrieving the document from the specified url.
  `withCredentials` | boolean | Whether or not cross-site requests should be made using credentials.
  `password` | string | A string that will be used to as the password to load a password protected document.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.loadDocument('https://www.pdftron.com/downloads/pl/test.pdf', {
            documentId: '1',
            filename: 'sample-1.pdf'
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.loadDocument('https://www.pdftron.com/downloads/pl/test.pdf', {
          documentId: '1',
          filename: 'sample-1.pdf'
        });
      });

#### openElements(dataElements)

  Sets visibility states of the elements to be visible. Note that openElements works only for panel/overlay/popup/modal elements.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `dataElements` | Array.<string> | Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // opens (shows) text popup and annotation popup in the UI
          instance.openElements([ 'menuOverlay', 'leftPanel' ]);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // opens (shows) text popup and annotation popup in the UI
        instance.openElements([ 'menuOverlay', 'leftPanel' ]);
      });

#### print()

  Print the current document.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.print();
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.print();
        });
      });

#### registerTool(properties [, annotationConstructor])

  Registers tool in the document viewer tool mode map, and adds a button object to be used in the header. See Customizing tools to learn how to make a tool.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `properties` | object |  | Tool properties. ###### Properties
  Name | Type | Argument | Description
  --- | --- | --- | ---
  `toolName` | string |  | Name of the tool.
  `toolObject` | Tools |  | Instance of the tool.
  `buttonImage` | string |  | Path to an image or base64 data for the tool button.
  `buttonName` | string | <optional> | Name of the tool button that will be used in data-element.
  `buttonGroup` | string | <optional> | Group of the tool button belongs to.
  `tooltip` | string | <optional> | Tooltip of the tool button.
  `annotationConstructor` | function | <optional> | The constructor function for the annotation that will be created by the registered tool.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // assume myCustomTool and myCustomAnnotation are already defined
          var myTool = {
            toolName: 'MyTool',
            toolObject: myCustomTool,
            buttonImage: 'path/to/image',
            buttonName: 'myToolButton',
            buttonGroup: 'miscTools',
            tooltip: 'MyTooltip'
          };

          instance.registerTool(myTool, myCustomAnnotation);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        // assume myCustomTool and myCustomAnnotation are already defined
        var myTool = {
          toolName: 'MyTool',
          toolObject: myCustomTool,
          buttonImage: 'path/to/image',
          buttonName: 'myToolButton',
          buttonGroup: 'miscTools',
          tooltip: 'MyTooltip'
        };

        instance.registerTool(myTool, myCustomAnnotation);
      });

#### removeSearchListener(listener)

  Removes the search listener function.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `listener` | searchListener | Search listener function that was added.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          function searchListener(searchValue, options, results) {
            console.log(searchValue, options, results);
          };

          instance.addSearchListener(searchListener);
          instance.removeSearchListener(searchListener);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var searchListener = function(searchValue, options, results) {
          console.log(searchValue, options, results);
        };

        instance.addSearchListener(searchListener);
        instance.removeSearchListener(searchListener);
      });

#### rotateClockwise()

  Rotates the document in the WebViewer clockwise.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.rotateClockwise();
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.rotateClockwise();
        });
      });

#### rotateCounterClockwise()

  Rotates the document in the WebViewer counter-clockwise.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.rotateCounterClockwise();
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.rotateCounterClockwise();
        });
      });

#### searchText(searchValue [, options])

  Searches the current page for the texts matching searchValue.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `searchValue` | string |  | The text value to look for.
  `options` | object | <optional> | Search options. ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `caseSensitive` | boolean | <optional> | false | Search with matching cases.
  `wholeWord` | boolean | <optional> | false | Search whole words only.
  `wildcard` | boolean | <optional> | false | Search a string with a wildcard *. For example, *viewer.
  `regex` | boolean | <optional> | false | Search for a regex string. For example, www(.*)com.
  `searchUp` | boolean | <optional> | false | Search up the document (backwards).
  `ambientString` | boolean | <optional> | false | Get the ambient string in the result.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.searchText('test', {
              caseSensitive: true,
              wholeWord: true
            });
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.searchText('test', {
            caseSensitive: true,
            wholeWord: true
          });
        });
      });

#### searchTextFull(searchValue [, options])

  Searches the full document for the texts matching searchValue.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `searchValue` | string |  | The text value to look for.
  `options` | object | <optional> | Search options. ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `caseSensitive` | boolean | <optional> | false | Search with matching cases.
  `wholeWord` | boolean | <optional> | false | Search whole words only.
  `wildcard` | boolean | <optional> | false | Search a string with a wildcard *. For example, *viewer.
  `regex` | boolean | <optional> | false | Search for a regex string. For example, www(.*)com.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.searchTextFull('test', {
              wholeWord: true
            });
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.searchTextFull('test', {
            wholeWord: true
          });
        });
      });

#### setActiveHeaderGroup(headerGroup)

  Sets a header group to be rendered in the Header element. This API comes useful when replacing the entire header items in small screens.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `headerGroup` | string | Name of the header group to be rendered. Default WebViewer UI has two header groups: default and tools.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setActiveHeaderGroup('tools'); // switch to tools header
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setActiveHeaderGroup('tools'); // switch to tools header
      });

#### setActiveLeftPanel(dataElement)

  Sets a panel to be active in the leftPanel element. Note that this API does not include opening the leftPanel.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `dataElement` | string | Name of the panel to be active in leftPanel. Default WebViewer UI has three panel options: thumbnailsPanel, outlinesPanel and notesPanel.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // open left panel
          instance.openElements([ 'leftPanel' ]);
          // view outlines panel
          instance.setActiveLeftPanel('outlinesPanel');
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // open left panel
        instance.openElements([ 'leftPanel' ]);
        // view outlines panel
        instance.setActiveLeftPanel('outlinesPanel');
      });

#### setAdminUser(isAdmin)

  Sets the current user to be admin or not. Admin users have permission to edit/delete any annotations, including the ones they didn't create.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `isAdmin` | boolean | Whether or not to set the current user to be an admin.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setAdminUser(true); // sets the current user to be an admin
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setAdminUser(true); // sets the current user to be an admin
      });

#### setAnnotationUser(username)

  Sets name of the current user

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `username` | string | Username to be used for current user.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setAnnotationUser('Guest-1');
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setAnnotationUser('Guest-1');
      });

#### setCurrentPageNumber(pageNumber)

  Sets the current page number (1-indexed) of the document loaded in the WebViewer.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `pageNumber` | number | The page number (1-indexed) of the document to set.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.setCurrentPageNumber(2);
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.setCurrentPageNumber(2);
        });
      });

#### setCustomNoteFilter(filterAnnotation)

  Filter the annotations shown in the notes panel

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `filterAnnotation` | WebViewer~filterAnnotation | Function that takes an annotation and returns if the annotation(note) should be shown in the notes panel.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // only show annotations that are created by John
          instance.setCustomNoteFilter(function(annotation) {
            return annotation.Author === 'John';
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // only show annotations that are created by John
        instance.setCustomNoteFilter(function(annotation) {
          return annotation.Author === 'John';
        });
      });

#### setCustomPanel(options)

  Adds a custom panel in left panel

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `options` | object | ###### Properties
  Name | Type | Description
  --- | --- | ---
  `tab` | object | Tab options. ###### Properties
  Name | Type | Description
  --- | --- | ---
  `dataElement` | string | data-element for tab.
  `title` | string | Tooltip for tab.
  `img` | string | Url for an image.
  `panel` | object | Panel options. ###### Properties
  Name | Type | Description
  --- | --- | ---
  `dataElement` | string | data-element for panel.
  `render` | WebViewer~renderCustomPanel | Function that returns panel element.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var myCustomPanel = {
            tab:{
              dataElement: 'customPanelTab',
              title: 'customPanelTab',
              img: 'https://www.pdftron.com/favicon-32x32.png',
            },
            panel: {
              dataElement: 'customPanel',
              render: function() {
                var div = document.createElement('div');
                div.innerHTML = 'Hello World';
                return div;
              }
            }
          };

          instance.setCustomPanel(myCustomPanel);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var myCustomPanel = {
          tab:{
            dataElement: 'customPanelTab',
            title: 'customPanelTab',
            img: 'https://www.pdftron.com/favicon-32x32.png',
          },
          panel: {
            dataElement: 'customPanel',
            render: function() {
              const div = document.createElement('div');
              div.innerHTML = 'Hello World';
              return div;
            }
          }
        };

        instance.setCustomPanel();
      });

#### setFitMode(fitMode)

  Sets the fit mode of the viewer.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `fitMode` | CoreControls.ReaderControl#FitMode | Whether or not to set the current user to be an admin.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;
          var FitMode = instance.FitMode;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.setFitMode(FitMode.FitWidth);
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;
        var FitMode = instance.FitMode;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.setFitMode(FitMode.FitWidth);
        });
      });

#### setHeaderItems(headerCallback)

  Customize header. Refer to Customizing header for details.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `headerCallback` | WebViewer~headerCallback | Callback function to perform different operations on the header.

  ##### Examples

      // 5.1 and after
      // Adding save annotations button
      WebViewer(...)
        .then(function(instance) {
          instance.setHeaderItems(function(header) {
            var myCustomButton = {
              type: 'actionButton',
              img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
              onClick: function() {
                instance.saveAnnotations();
              }
            }

            header.push(myCustomButton);
          });
        });

      // 4.0 ~ 5.0
      // Adding save annotations button
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setHeaderItems(function(header) {
          var myCustomButton = {
            type: 'actionButton',
            img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
            onClick: function() {
              instance.saveAnnotations();
            }
          };

          header.push(myCustomButton);
        });
      });

      // 5.1 and after
      // Removing existing buttons
      WebViewer(...)
        .then(function(instance) {
          instance.setHeaderItems(function(header) {
            var items = header.getItems().slice(9, -3);
            header.update(items);
          });
        });

      // 4.0 ~ 5.0
      // Removing existing buttons
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setHeaderItems(function(header) {
          var items = header.getItems().slice(9, -3);
          header.update(items);
        });
      });

      // 5.1 and after
      // Appending logo and shifting existing buttons to the right
      WebViewer(...)
        .then(function(instance) {
          instance.setHeaderItems(function(header) {
            header.delete(9);
            header.unshift({
              type: 'customElement',
              render: function() {
                var logo = document.createElement('img');
                logo.src = 'https://www.pdftron.com/downloads/logo.svg';
                logo.style.width = '200px';
                logo.style.marginLeft = '10px';
                logo.style.cursor = 'pointer';
                logo.onclick = function() {
                  window.open('https://www.pdftron.com', '_blank');
                }
                return logo;
              }
            }, {
              type: 'spacer'
            });
          });
        });

      // 4.0 ~ 5.0
      // Removing existing buttons
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setHeaderItems(function(header) {
          header.delete(9);
          header.unshift({
            type: 'customElement',
            render: function() {
              var logo = document.createElement('img');
              logo.src = 'https://www.pdftron.com/downloads/logo.svg';
              logo.style.width = '200px';
              logo.style.marginLeft = '10px';
              logo.style.cursor = 'pointer';
              logo.onclick = function() {
                window.open('https://www.pdftron.com', '_blank');
              }
              return logo;
            }
          }, {
            type: 'spacer'
          });
        });
      });

#### setIconColor(toolName, colorPalette)

  Sets the color palette that will be used as a tool button's icon color.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `toolName` | string | Name of the tool, either from tool names list or the name you registered your custom tool with.
  `colorPalette` | string | The palette which will be used as a tool button's icon color. One of 'text', 'border' and 'fill'.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          // sets the color in fill palette to be used as freetext tool button's icon color
          // by default freetext tool button will use the color in text palette as its icon color
          instance.setIconColor('AnnotationCreateFreeText', 'fill')
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();

        // sets the color in fill palette to be used as freetext tool button's icon color
        // by default freetext tool button will use the color in text palette as its icon color
        instance.setIconColor('AnnotationCreateFreeText', 'fill')
      });

#### setLanguage(language)

  Set the language of WebViewer UI.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `language` | string | The language WebViewer UI will use. By default, following languages are supported: en, zh_cn, fr.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setLanguage('fr'); // set the language to French
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setLanguage('fr'); // set the language to French
      });

#### setLayoutMode(layoutMode)

  Sets the layout mode of the viewer.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `layoutMode` | CoreControls.ReaderControl#LayoutMode | Layout mode of WebViewer.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;
          var LayoutMode = instance.LayoutMode;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.setLayoutMode(LayoutMode.FacingContinuous);
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;
        var LayoutMode = instance.LayoutMode;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.setLayoutMode(LayoutMode.FacingContinuous);
        });
      });

#### setMaxZoomLevel(zoomLevel)

  Sets the maximum zoom level allowed by the UI. Default is 9999%.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `zoomLevel` | string | number | Zoom level in either number or percentage.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setMaxZoomLevel('150%'); // or setMaxZoomLevel(1.5)
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setMaxZoomLevel('150%'); // or setMaxZoomLevel(1.5)
      });

#### setMinZoomLevel(zoomLevel)

  Sets the minimum zoom level allowed by the UI. Default is 5%.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `zoomLevel` | string | number | Zoom level in either number or percentage.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setMinZoomLevel('10%'); // or setMinZoomLevel(0.1)
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setMinZoomLevel('10%'); // or setMinZoomLevel(0.1)
      });

#### setNoteDateFormat(format)

  Sets the format for displaying the date when a note is create/modified. A list of formats can be found dayjs API.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `format` | string | The format of date to display

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setNoteDataFormat('DD.MM.YYYY HH:MM');
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setNoteDataFormat('DD.MM.YYYY HH:MM');
      });

#### setPageLabels(pageLabels)

  Sets page labels that will be displayed in UI. You may want to use this API if the document's page labels start with characters/numbers other than 1.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `pageLabels` | Array.<string> | Page labels that will be displayed in UI.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.setPageLabels(['i', 'ii', 'iii', '4', '5']); // assume a document has 5 pages
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;

        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.setPageLabels(['i', 'ii', 'iii', '4', '5']); // assume a document has 5 pages
        });
      });

#### setPrintQuality(quality)

  Sets the print quality. Higher values are higher quality but takes longer to complete and use more memory. The viewer's default quality is 1.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `quality` | number | The quality of the document to print

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setPrintQuality(2);
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setPrintQuality(2);
      });

#### setReadOnly(isReadOnly)

  Sets the WebViewer UI to be a read only mode. In read only mode, users cannot create/edit annotations.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `isReadOnly` | boolean | Whether or not to set the WebViewer UI to be in in read only mode.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setReadOnly(true); // sets the viewer to read only mode
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setReadOnly(true); // sets the viewer to read only mode
      });

#### setSortStrategy(sortStrategy)

  Sets a sorting algorithm in NotesPanel.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `sortStrategy` | string | Name of the algorithm. By default, there are two algorithm options: position and time.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setSortStrategy('time'); // sort notes by time
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setSortStrategy('time'); // sort notes by time
      });

#### setSwipeOrientation(swipeOrientation)

  Sets the swipe orientation between pages of WebViewer UI on mobile devices. Default is horizontal.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `swipeOrientation` | string | The swipe orientation to navigate between pages. Available orientations are: horizontal, vertical and both.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setSwipeOrientation('vertical'); // set the swipe orientation to vertical.
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setSwipeOrientation('vertical'); // set the swipe orientation to vertical.
      });

#### setTheme(theme)

  Sets the theme of Webviewer UI. Please note that this does not work in IE11.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `theme` | string | object | Either theme object or predefined string. Predefined strings are 'default' and 'dark'. ###### Properties
  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `primary` | string | <optional> | #FFFFFF | Background color for the header, modals, overlays, etc.
  `secondary` | string | <optional> | #F5F5F5 | ackground color for panels and the document container.
  `border` | string | <optional> | #CDCDCD | Border color for different components.
  `buttonHover` | string | <optional> | #F6F6F6 | Background color for hovering on a button.
  `buttonActive` | string | <optional> | #F0F0F0 | Background color for an active button.
  `text` | string | <optional> | #333333 | Text color.
  `icon` | string | <optional> | #757575 | Icon color.
  `iconActive` | string | <optional> | #757575 | Icon color when button is active.

  ##### Examples

      // 5.1 and after
      // Using an object
      WebViewer(...)
        .then(function(instance) {
          instance.setTheme({
            primary: '#2C2B3A',
            secondary: '#4D4C5F',
            border: '#555555',
            buttonHover: '#686880',
            buttonActive: '#686880',
            text: '#FFFFFF',
            icon: '#FFFFFF',
            iconActive: '#FFFFFF'
          });
        });

      // 4.0 ~ 5.0
      // Using an object
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setTheme({
          primary: '#2C2B3A',
          secondary: '#4D4C5F',
          border: '#555555',
          buttonHover: '#686880',
          buttonActive: '#686880',
          text: '#FFFFFF',
          icon: '#FFFFFF',
          iconActive: '#FFFFFF'
        });
      });

      // 5.1 and after
      // Using predefined string
      WebViewer(...)
        .then(function(instance) {
          instance.setTheme('dark');
        });

      // 4.0 ~ 5.0
      // Using predefined string
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setTheme('dark');
      });

#### setToolMode(toolName)

  Sets tool mode.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `toolName` | string | Name of the tool, either from tool names list or the name you registered your custom tool with.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.setToolMode('AnnotationEdit');
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.setToolMode('AnnotationEdit');
      });

#### setZoomLevel(zoomLevel)

  Sets zoom level.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `zoomLevel` | string | number | Zoom level in either number or percentage.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          var docViewer = instance.docViewer;

          // you must have a document loaded when calling this api
          docViewer.on('documentLoaded', function() {
            instance.setZoomLevel('150%'); // or setZoomLevel(1.5)
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        var docViewer = instance.docViewer;
        // you must have a document loaded when calling this api
        docViewer.on('documentLoaded', function() {
          instance.setZoomLevel('150%'); // or setZoomLevel(1.5)
        });
      });

#### showErrorMessage(message)

  Displays the custom error message

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `message` | string | An error message

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.showErrorMessage('My error message');
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.showErrorMessage('My error message');
      });

#### toggleElement(dataElement)

  Toggles a visibility state of the element to be visible/hidden. Note that toggleElement works only for panel/overlay/popup/modal elements.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `dataElement` | string | data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.toggleElement('leftPanel'); // open LeftPanel if it is closed, or vice versa
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.toggleElement('leftPanel'); // open LeftPanel if it is closed, or vice versa
      });

#### toggleFullScreen()

  Toggles full scree mode of the browser.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.toggleFullScreen();
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.toggleFullScreen();
      });

#### unregisterTool(toolName)

  Unregisters tool in the document viewer tool mode map, and removes the button object.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `toolName` | string | Name of the tool, either from tool names list or the name you registered your custom tool with.

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.unregisterTool('MyTool');
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.unregisterTool('MyTool');
      });

#### updateTool(toolName [, properties])

  Update existing tool's properties.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `toolName` | string |  | Name of the tool, either from tool names list or the name you registered your custom tool with.
  `properties` | object | <optional> | Tool properties ###### Properties
  Name | Type | Argument | Description
  --- | --- | --- | ---
  `buttonImage` | string | <optional> | Path to an image or base64 data for the tool button
  `buttonName` | string | <optional> | Name of the tool button that will be used in data-element
  `buttonGroup` | string | <optional> | Group of the tool button belongs to
  `tooltip` | string | <optional> | Tooltip of the tool button

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.updateTool('AnnotationCreateSticky', {
            buttonImage: 'https://www.pdftron.com/favicon-32x32.png'
          });
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.updateTool('AnnotationCreateSticky', {
          buttonImage: 'https://www.pdftron.com/favicon-32x32.png'
        });
      });

#### useEmbeddedPrint( [use])

  Use/not use embedded printing. You may not want to use embedded printing if there are custom annotations in your document.

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `use` | boolean | <optional> | true | Whether or not to use embedded printing

  ##### Examples

      // 5.1 and after
      WebViewer(...)
        .then(function(instance) {
          instance.useEmbeddedPrint(false); // disable embedded printing
        });

      // 4.0 ~ 5.0
      var viewerElement = document.getElementById('viewer');
      var viewer = new PDFTron.WebViewer(...);

      viewerElement.addEventListener('ready', function() {
        var instance = viewer.getInstance();
        instance.useEmbeddedPrint(false); // disable embedded printing
      });

### Type Definitions

#### filterAnnotation(annotation)

  Callback that gets passed to setCustomNoteFilter.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `annotation` | Annotations | Annotation object

  ##### Returns:

  Whether the annotation should be kept.

  Type
    boolean

#### getSeparatorContent(prevNote, currNote, options)

  Callback that gets passed to `sortStrategy.getSeparatorContent` in addSortStrategy.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `prevNote` | Annotation | Previous note (annotation)
  `currNote` | Annotation | Current note (annotation)
  `options` | object | Optional values ###### Properties
  Name | Type | Description
  --- | --- | ---
  `pageLabels` | Array.<string> | List of page label

  ##### Returns:

  Content to be rendered in a separator

  Type
    string | number

#### getSortedNotes(notes)

  Callback that gets passed to `sortStrategy.getSortedNotes` in addSortStrategy.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `notes` | Array.<Annotation> | List of unsorted notes (annotations)

  ##### Returns:

  Sorted notes (annotations)

  Type
    Array.<Annotation>

#### headerCallback(header)

  Callback that gets passed to setHeaderItems.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `header` | CoreControls.ReaderControl.Header | Header instance with helper functions

#### renderCustomPanel()

  Callback that gets passed to `options.panel.render` in setCustomPanel.

  ##### Returns:

  Panel element.

  Type
    HTMLElement

#### searchListener(searchValue, options, results)

  Callback that gets passed to addSearchListener.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `searchValue` | string | Search value
  `options` | object | Search options object, which includes 'caseSensitive', 'wholeWord', 'wildcard' and 'regex'
  `results` | Array.<object> | Search results

#### shouldRenderSeparator(prevNote, currNote)

  Callback that gets passed to `sortStrategy.shouldRenderSeparator` in addSortStrategy.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `prevNote` | Annotation | Previous note (annotation)
  `currNote` | Annotation | Current note (annotation)

  ##### Returns:

  Whether a separator should be rendered or not

  Type
    boolean

#### Search results