Customize page context menu

This guide will present you a list of component name of the built-in page context menu, show you how to remove one of menu items through fragments and templates, add or insert new user items, and how to hide the menu via the fragments and viewerUI.

Page context menu items

The context menu is named as fv--page-contextmenu. It contains the following items:

• fv--contextmenu-item-full-screen
• fv--contextmenu-item-select-text-image
• fv--contextmenu-item-select-annotation
• fv--contextmenu-item-hand-tool
• fv--contextmenu-item-marquee-zoom
• fv--contextmenu-item-zoom-actual-size
• fv--contextmenu-item-zoom-fitpage
• fv--contextmenu-item-zoom-fitwidth
• fv--contextmenu-item-zoom-fitvisible
• fv--contextmenu-item-rotate-right
• fv--contextmenu-item-rotate-left
• fv--contextmenu-item-print
• fv--contextmenu-item-file-property

Removing a menu item

The item in the target field will be deleted when the sample code below is executed.

new PDFUI({
    appearance: UIExtension.appearances.AdaptiveAppearance.extend({
        getDefaultFragments: function() {
            // the other options ...
            return [{
                target: "fv--contextmenu-item-zoom-actual-size",
                action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE
            }]
        }
    })
});

Replacing a menu item

The item in the target field will be replaced when the sample code below is executed.

new UIExtension.PDFUI({
    appearance: UIExtension.appearances.AdaptiveAppearance.extend({
        getDefaultFragments: function() {
            // the other options ...
            return [{
                target: "fv--contextmenu-item-zoom-actual-size",
                action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
                template: `<contextmenu-item name="custom-contextmenu-item">customize contextmenu item</contextmenu-item>`,
                config: [{
                    target: "custom-contextmenu-item",
                    callback: function() {
                        alert("contextmenu item clicked!");
                    }
                }]
            }]
        }
    })
});

Inserting a new item

A new item defined in the template will be added after the item in the target when the sample code below is executed.

new UIExtension.PDFUI({
    appearance: UIExtension.appearances.AdaptiveAppearance.extend({
        getDefaultFragments: function() {
            // the other options ...
            return [{
                target: "fv--contextmenu-item-zoom-actual-size",
                action: UIExtension.UIConsts.FRAGMENT_ACTION.AFTER,
                template: `<contextmenu-item name="custom-contextmenu-item">customize contextmenu item</contextmenu-item>`,
                config: [
                    {
                    target: "custom-contextmenu-item",
                    callback: function() {
                        alert("contextmenu item clicked!");
                    }
                    }
                ]
            }]
        }
    })
});

Hiding the context menu or items

You can use one of the following approaches to achieve the hiding.

1. Configuring a class method in fragments to force the hiding action.

   new UIExtension.PDFUI({
       appearance: UIExtension.appearances.AdaptiveAppearance.extend({
            getDefaultFragments: function() {
                // the other options ...
                return [{
                        target: "fv--page-contextmenu",
                        config: {
                            cls: "fv__ui-force-hide"
                        }
                }]
            }
        })
   });
   

The effect of this method is that there is no response following the right-clicking.

1. Customizing viewUI

   new PDFUI({
     viewerOptions: {
       viewerUI: new (class extends UIExtension.XViewerUI {
         createContextMenu(owner, anchor, config) {
           switch (owner) {
             case PDFViewCtrl.STATE_HANDLER_NAMES.STATE_HANDLER_HAND:
             case PDFViewCtrl.STATE_HANDLER_NAMES
               .STATE_HANDLER_SELECT_ANNOTATION:
               return;
           }
           return super.createContextMenu(owner, anchor, config);
         }
       })()
     }
   });
   

This method will hide the built-in menu when a right-clicking occurs, but present the browser default menu.

Showing a customized context menu

You should overwrite the viewerUI to show your own context menu.

new UIExtension.PDFUI({
  viewerOptions: {
    viewerUI: new (class extends UIExtension.XViewerUI {
      createContextMenu(owner, anchor, config) {
        switch (owner) {
          case PDFViewCtrl.STATE_HANDLER_NAMES.STATE_HANDLER_HAND:
          case PDFViewCtrl.STATE_HANDLER_NAMES
            .STATE_HANDLER_SELECT_ANNOTATION:
            return new (class extends PDFViewCtrl.IContextMenu {
              constructor() {
                super();
                this.initContextmenu();
              }
              destroy() {
                $(anchor).contextMenu("destroy");
              }
              showAt(x, y) {
                $(anchor).contextMenu();
              }
              disable() {
                super.disable();
                $(anchor).contextMenu("destroy");
              }
              enable() {
                super.enable();
                this.initContextmenu();
              }
              initContextmenu() {
                //The code example below requires referencing in order Jquery libraries including contextMenu.min.css, jquery.min.js and contextMenu.min.js.
                $(anchor).contextMenu({
                  selector: config.selector,
                  items: [
                    {
                      name: 'show "Hello World"',
                      callback: function() {
                        alert("Hello world");
                      }
                    },
                    {
                      name: 'show "How do your do!"',
                      callback: function() {
                        alert("How do you do!");
                      }
                    }
                  ]
                });
              }
            })();
        }
        return super.createContextMenu(owner, anchor, config);
      }
    })()
  }
});