自定义页面右键菜单

本章节将展示内置页面右键菜单的组件名称列表，并介绍如何通过 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);
      }
    })()
  }
});