Customize the page context menu

This section lists built-in page context menu component names and explains how to remove, add, or insert items with fragments and templates, and how to hide menus with fragments or viewerUI.

Page context menu items

The page context menu is named fv--page-contextmenu. It includes:

• 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

Remove menu items

The example below removes the targeted menu item.

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
            }]
        }
    })
});

Replace menu items

The example below replaces the targeted menu item.

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!");
                    }
                }]
            }]
        }
    })
});

Insert menu items

The example below inserts a new item after the target.

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!");
                        }
                    }
                ]
            }]
        }
    })
});

Hide the context menu or menu items

Use one of the following approaches.

1. Force-hide via a class in fragments.

   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 context menu will not respond.

2. Customize viewerUI

   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 hides the built-in menu on right-click and shows the browser default menu.

Show a custom context menu

Override viewerUI to show your own 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);
            }
        })()
    }
});