• WebUiDocumentPasswordDialogJS - web UI dialog that allows to set the password of document. Dialog occurs when secured document is loading.
• WebUiPrintImagesSettingsPanelJS - web UI dialog that allows to print images, which are shown in image viewer. Dialog occurs when "Print images" button is clicked.
• WebImageViewerSettingsDialogJS - web UI dialog that allows to view and edit the image viewer settings. Dialog occurs when "Image viewer settings" button is clicked.
• WebThumbnailViewerSettingsDialogJS - web UI dialog that allows to view and edit the thumbnail viewer settings. Dialog occurs when "Thumbnail viewer settings" button is clicked.
• WebRotateImageWithAnnotationsDialogJS - web UI dialog that allows to rotate focused image with annotations. Dialog occurs when "Rotate image with annotations" button is clicked.
• WebPdfRedactionMarkAppearanceDialogJS - web UI dialog that allows to view and edit the PDF redaction mark appearance. Dialog occurs when "PDF redaction mark appearance" button is clicked.
• WebImageSelectionDialogJS - web UI dialog that allows to select images, which are shown in image viewer. Dialog occurs when "Mark full pages for redaction" button is clicked.

1. "Standard" dialogs, which are based on Bootstrap

Ready-to-use "standard" dialogs, which are based on Bootstrap, are stored in Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js file.
If "standard" Bootstrap dialogs must be used in web document viewer, web application must have:

• link to the CSS-file of Bootstrap, for example:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/lib/bootstrap/dist/css/bootstrap.css">
  

• link to the jQuery and Bootstrap libraries, for example:
  
  • HTML

  <script src="~/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>
  <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
  

• link to the Vintasoft.Imaging.js, Vintasoft.Imaging.DocumentViewer.js, Vintasoft.Imaging.Dialogs.Bootstrap.js and Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js files, for example:
  
  • HTML

  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <script src="~/js/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.DocumentViewer.css">
  <script src="~/js/Vintasoft.Imaging.Dialogs.Bootstrap.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.DocumentViewer.Dialogs.Bootstrap.js" type="text/javascript"></script>
  

Dialog appearance can be customized using Bootstrap CSS.

Here is screenshot of "standard" "Password dialog", which is based on Bootstrap:

2. "Standard" dialogs, which are based on jQuery UI

Ready-to-use "standard" dialogs, which are based on jQuery UI, are stored in Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js file.
If "standard" jQueryUI dialogs must be used in web document viewer, web application must have:

• link to the CSS-file of jQuery UI, for example:
  
  • HTML

  <link rel="stylesheet" type="text/css" href="~/js/jquery-ui-css/jquery-ui.min.css">
  

• link to the jQuery and jQuery UI libraries, for example:
  
  • HTML

  <script src="~/js/jquery-3.3.1.min.js" type="text/javascript"></script>
  <script src="~/js/jquery-ui.min.js" type="text/javascript"></script>
  

• link to the Vintasoft.Imaging.js, Vintasoft.Imaging.DocumentViewer.js, Vintasoft.Imaging.Dialogs.jQueryUI.js and Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js files, for example:
  
  • HTML

  <script src="~/js/Vintasoft.Imaging.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.css">
  <script src="~/js/Vintasoft.Imaging.DocumentViewer.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="~/js/Vintasoft.Imaging.DocumentViewer.css">
  <script src="~/js/Vintasoft.Imaging.Dialogs.jQueryUI.js" type="text/javascript"></script>
  <script src="~/js/Vintasoft.Imaging.DocumentViewer.Dialogs.jQueryUI.js" type="text/javascript"></script>
  

Dialog appearance can be customized using jQuery UI CSS.

Here is screenshot of "standard" "Password dialog", which is based on jQuery UI:

3. Custom "standard" dialogs

If ready-to-use "standard" Bootstrap and jQuery UI dialogs are not suitable for your UI or task, it is possible to use custom "standard" dialogs in web document viewer.

If it is necessary to create custom dialog for another UI library, it is recommended to create dialog as a wrapper around ready-to-use UI panel (WebUiDocumentPasswordPanelJS, WebUiPrintImagesSettingsPanelJS, WebUiImageViewerSettingsPanelJS, WebUiThumbnailViewerSettingsPanelJS, WebUiRotateImageWithAnnotationsPanelJS, WebUiPdfRedactionMarkAppearancePanelJS, WebUiImageSelectionPanelJS). In this case it is not necessary to implement logic, which is related with dialog (for example, print images) because panel already contains all necessary logic.

Also it is possible to create "custom" dialog from scratch but in this case it is necessary to implement dialog UI and logic.

3.1. Custom "standard" dialog for image printing

If custom "standard" dialog for image printing must be used, the following steps must be done:

• Create a dialog that allows to print images:
  • Create a panel, which allows to print images, add panel to the web document viewer and render panel as HTML-element:
    
    • JavaScript

    // create panel that allows to print images
    _printImagesSettingsPanel = new Vintasoft.Imaging.DocumentViewer.Panels.WebPrintImagesSettingsPanelJS({ cssClass: "vsdv-dialogContent" });
    // add panel to the web document viewer
    _docViewer.get_Items().addItem(_printImagesSettingsPanel);
    // subscribe to the "beginPrint" and "imagesPreparationFailed" events of panel
    Vintasoft.Shared.subscribeToEvent(_printImagesSettingsPanel, "beginPrint", __printImagesSettingsPanel_beginPrint);
    Vintasoft.Shared.subscribeToEvent(_printImagesSettingsPanel, "imagesPreparationFailed", __printImagesSettingsPanel_imagesPreparationFailed);
    // render panel as HTML-element
    var printImagesSettingsPanelElement = _printImagesSettingsPanel.render(null);
    
    

  • Create dialog and add panel, which is created on previous step, to the dialog:
    
    • JavaScript

    // get div-element that should contain the panel
    var printImagesSettingsPanelDiv = document.getElementById("printImageSettingsPanelDiv");
    // append the panel to the dialog
    printImagesSettingsPanelDiv.appendChild(printImagesSettingsPanelDivElement);
    
    

  • Add "Ok" button to the dialog. If user is clicked "Ok" button, start the image printing:
    
    • JavaScript

    /**
     "OK" button is clicked.
    */
    function okButtonClicked() {
      // start image printing
      _printImagesSettingsPanel.print();
    }
    
    

  • Add "Cancel" button to the dialog. If user is clicked "Cancel" button, abort image printing, if necessary, and close the dialog:
    
    • JavaScript

    /**
     "Cancel" button is clicked.
    */
    public cancelButtonClicked() {
      // abort image printing if necessary
      _printImagesSettingsPanel.abort();
      // close this dialog
      __closeDialog();
    }
    
    

  • If image printing is starting, close the dialog:
    
    • JavaScript

    /**
     Image printing is starting.
    */
    private _printImagesSettingsPanel_beginPrint() {
      // close this dialog
      __closeDialog();
    }
    
    

  • If image printing preparation is failed, close the dialog:
    
    • JavaScript

    /**
     Image printing preparation is failed.
    */
    private _printImagesSettingsPanel_imagesPreparationFailed() {
      // close this dialog
      __closeDialog();
    }
    
    

• Create function that creates custom "Print images" button:
  
  • JavaScript

  /**
   * Creates UI button for image printing.
   */
  function __createPrintImagesButton() {
    // create the button that allows to show a dialog with previously uploaded image files and select image file
    var button = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
      cssClass: "vsdv-printImagesButton",
      title: "Print images",
      localizationId: "printImagesButton",
      onClick: __printImagesButton_clicked
    });
  
    // subscribe to the "activated" event of button
    Vintasoft.Shared.subscribeToEventOnce(button, "activated", function (event, eventArgs) {
      var uiElement = event.target;
      var docViewer = uiElement.get_RootControl();
      var imageViewer = docViewer.get_ImageViewer();
      var images = imageViewer.get_Images();
  
  
      function __updateButtonState() {
        // if image collection contains images, enable the button
        var isEnabled = images.get_Count() > 0;
        uiElement.set_IsEnabled(isEnabled);
      }
  
      function __destroyed(event) {
        // unsubscribe from the "changed" event of image collection of image viewer
        Vintasoft.Shared.unsubscribeFromEvent(images, "changed", __updateButtonState);
      }
  
  
      // subscribe to the "changed" event of image collection of image viewer
      Vintasoft.Shared.subscribeToEvent(images, "changed", __updateButtonState);
      // subscribe to the "destroyed" event of button
      Vintasoft.Shared.subscribeToEventOnce(uiElement, "destroyed", __destroyed);
  
      // update button state
      __updateButtonState();
    });
  
    return button;
  }
  
  

• Register created function in WebUiElementsFactoryJS as function that must create button with identifier "printImagesButton".
  
  • JavaScript

  // override the "Print images" button in web UI elements factory
  Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("printImagesButton", __createPrintImagesButton);
  
  

• Show custom dialog when custom "Print images" button is clicked:
  
  • JavaScript

  /**
   * "Print images" button is clicked.
   */
  function __printImagesButton_clicked(event, uiElement) {
    var docViewer = uiElement.get_RootControl();
    if (docViewer != null) {
      var dlg = new PrintImagesDialog(docViewer);
      dlg.open();
    }
  }
  
  

3.2. Custom "standard" dialog for thumbnail viewer settings

If custom "standard" dialog for thumbnail viewer settings must be used, the following steps must be done:

• Create custom dialog that gets thumbnail viewer and allows to change settings of thumbnail viewer.
• Create function that creates custom "Thumbnail viewer settings" button:
  
  • JavaScript

  /**
   * Creates UI button for showing thumbnail viewer settings dialog.
   */
  function __createThumbnailViewerSettingsButton() {
    // create the button that allows to show a dialog with image viewer settings
    return new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
      cssClass: "vsdv-thumbnailViewerSettingsButton",
      title: "Show Thumbnail Viewer Settings",
      localizationId: "thumbnailViewerSettingsButton",
      onClick: __thumbnailViewerSettingsButton_clicked
    });
  }
  
  

• Register created function in WebUiElementsFactoryJS as function that must create button with identifier "thumbnailViewerSettingsButton":
  
  • JavaScript

  // override the "Thumbnail viewer settings" button in web UI elements factory
  Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("thumbnailViewerSettingsButton", __createThumbnailViewerSettingsButton);
  
  

• Show custom dialog when custom "Thumbnail viewer settings" button is clicked:
  • JavaScript

  /**
   * "Show Thumbnail Viewer Settings" button is clicked.
   */
  function __thumbnailViewerSettingsButton_clicked(event, uiElement) {
    var docViewer = uiElement.get_RootControl();
    if (docViewer != null) {
      var thumbnailViewer = docViewer.get_ThumbnailViewer();
      if (thumbnailViewer != null) {
        var dlg = new ThumbnailViewerSettingsDialog(thumbnailViewer);
        dlg.open();
      }
    }
  }
  
  

3.3. Custom "standard" dialog for rotating image with annotations

If custom "standard" dialog for rotating image with annotations must be used, the following steps can be done:

• Create a dialog that allows to rotate image with annotations:
  • Create a panel, which allows to rotate image with annotations, add panel to the web document viewer and render panel as HTML-element:
    
    • JavaScript

    // create panel that allows to rotate image with annotations
    var rotateImageWithAnnotationsPanel = new Vintasoft.Imaging.DocumentViewer.Panels.WebUiRotateImageWithAnnotationsPanelJS({ cssClass: "vsdv-dialogContent" });
    // add panel to the web document viewer
    docViewer.get_Items().addItem(rotateImageWithAnnotationsPanel);
    // render panel as HTML-element
    var rotateImageWithAnnotationsPanelElement = rotateImageWithAnnotationsPanel.render(null);
    
    

  • Create dialog and add panel, which is created on previous step, to the dialog:
    
    • JavaScript

    // get div-element that should contain the panel
    var rotateImageWithAnnotationsPanelDiv = document.getElementById("rotateImageWithAnnotationsPanelDiv");
    // append the panel to the dialog
    rotateImageWithAnnotationsPanelDiv.appendChild(rotateImageWithAnnotationsPanelElement);
    
    

  • Add "Ok" and "Cancel" buttons to the dialog.Dialog must call the "rotate" function of panel if user is clicked "Ok" button:
    • JavaScript

    // rotate image with annotations using WebUiRotateImageWithAnnotationsPanelJS.rotate function
    rotateImageWithAnnotationsPanel.rotate();
    
    

• Create function that creates custom "Rotate image with annotations" button:
  
  • JavaScript

  /**
   * Creates UI button that shows dialog for rotation of image with annotations.
   */
  function __createRotateImageWithAnnotationsButton() {
    // create the button that allows to show a dialog with previously uploaded image files and select image file
    var button = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
      cssClass: "vsdv-rotateImageWithAnnotations",
      title: "Rotate image with annotations",
      localizationId: "rotateImageWithAnnotationsButton",
      onClick: __rotateImageWithAnnotationsButton_clicked
    });
    return button;
  }
  
  

• Register created function in WebUiElementsFactoryJS as function that must create button with identifier "rotateImageWithAnnotationsButton":
  
  • JavaScript

  // override the "Rotate image with annotations" button in web UI elements factory
  Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement('rotateImageWithAnnotationsButton', __createRotateImageWithAnnotationsButton);
  
  

• Show dialog when custom "Rotate image with annotations" button is clicked:
  
  • JavaScript

  /**
   * "Rotate image with annotations" button is clicked.
   */
  function __rotateImageWithAnnotationsButton_clicked(event, uiElement) {
    var docViewer = uiElement.get_RootControl();
    if (docViewer != null) {
      var dlg = new RotateImageWithAnnotationsDialog(docViewer);
      dlg.open();
    }
  }
  
  

3.4. Custom "standard" dialog for PDF redaction mark appearance

If custom "standard" dialog for PDF redaction mark appearance must be used, the following steps can be done:

• Create a dialog that allows to change appearance of PDF redaction marks:
  • Create a panel, which allows to change appearance of PDF redaction marks, add panel to the web document viewer and render panel as HTML-element:
    
    • JavaScript

    // create panel that allows to change appearance of PDF redaction marks
    var pdfRedactionMarkAppearancePanel = new Vintasoft.Imaging.DocumentViewer.Panels.WebUiPdfRedactionMarkAppearancePanelJS({ cssClass: "vsdv-dialogContent" });
    // add panel to the web document viewer
    docViewer.get_Items().addItem(pdfRedactionMarkAppearancePanel);
    // render panel as HTML-element
    var pdfRedactionMarkAppearancePanelElement = pdfRedactionMarkAppearancePanel.render(null);
    
    

  • Create dialog and add panel, which is created on previous step, to the dialog:
    
    • JavaScript

    // get div-element that should contain the panel
    var pdfRedactionMarkAppearancePanelDiv = document.getElementById("pdfRedactionMarkAppearancePanelDiv");
    // append the panel to the dialog
    pdfRedactionMarkAppearancePanelDiv.appendChild(pdfRedactionMarkAppearancePanelDivElement);
    
    

  • Add "Ok" and "Cancel" buttons to the dialog.
• Create function that creates custom "PDF redaction mark appearance" button:
  
  • JavaScript

  /**
   * Creates UI button that allows to show "PDF redaction mark appearance" dialog.
   */
  function __createPdfRedactionMarkAppearanceButton() {
    // create the button that allows to show a dialog with previously uploaded image files and select image file
    var button = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
      cssClass: "vsdv-pdfRedactionMarkAppearanceButton",
      title: "PDF redaction mark appearance",
      localizationId: "pdfRedactionMarkAppearanceButton",
      onClick: __pdfRedactionMarkAppearanceButton_clicked
    });
    return button;
  }
  
  

• Register created function in WebUiElementsFactoryJS as function that must create button with identifier "pdfRedactionMarkAppearanceButton":
  
  • JavaScript

  // override the "PDF redaction mark appearance" button in web UI elements factory
  Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("pdfRedactionMarkAppearanceButton", __createPdfRedactionMarkAppearanceButton);
  
  

• Show dialog when custom "PDF redaction mark appearance" button is clicked:
  
  • JavaScript

  /**
   * "PDF redaction mark appearance" button is clicked.
   */
  function __pdfRedactionMarkAppearanceButton_clicked(event, uiElement) {
    var docViewer = uiElement.get_RootControl();
    if (docViewer != null) {
      var dlg = new PdfRedactionMarkAppearanceDialog(docViewer);
      dlg.open();
    }
  }