自定义页面右键菜单

本章节将展示内置页面右键菜单的组件名称列表，并介绍如何通过 fragments 和 templates 删除菜单项，添加或者插入新的用户菜单项，以及如何通过 fragments 和 viewerUI 隐藏菜单。

页面右键菜单项

右键菜单被命名为 fv--page-contextmenu。其包括以下的菜单项：

• 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

移除菜单项

执行下面的示例代码，target 域中的菜单项将会被删除。

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

替换菜单项

执行下面的示例代码，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.REPLACE,
                template: `<contextmenu-item name="custom-contextmenu-item">customize contextmenu item</contextmenu-item>`,
                config: [{
                    target: "custom-contextmenu-item",
                    callback: function () {
                        alert("contextmenu item clicked!");
                    }
                }]
            }]
        }
    })
});

插入菜单项

执行下面的示例代码，template 中新定义的菜单项将会被添加到 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!");
                        }
                    }
                ]
            }]
        }
    })
});

隐藏右键菜单或者菜单项

您可以使用以下方法中的一种来隐藏右键菜单或者菜单项。

1. 在 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"
                        }
                }]
            }
        })
   });

上述代码的作用是右键菜单没有响应。

1. 自定义 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);
         }
       })()
     }
   });

此方法将在点击右键时隐藏内置菜单，而显示浏览器的默认菜单。

显示自定义右键菜单

您需要重写 viewerUI 来显示自定义的右键菜单。

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