# # 自定义页面右键菜单

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