# # Contextmenu component

## # Code examples

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="fv__ui-body">
                    <sidebar open>
                        <sidebar-panel icon-class="fv__icon-sidebar-comment-list" @controller="custom:CustomController" title="Contextmenu component sample">
                            <text>Right click here to show contextmenu</text>
                        </sidebar-panel>
                    </sidebar>
                    <viewer></viewer>
                </div>
                <template>
                    <contextmenu name="fv--custom-contextmenu">
                        <contextmenu-item @controller="custom:AlertDialogController">Click to show a alert</contextmenu-item>
                        <contextmenu-item>Click to do nothing</contextmenu-item>
                        <contextmenu-separator></contextmenu-separator>
                        <contextmenu-item icon-class="fv__icon-comment-item-menu-copy">Copy</contextmenu-item>
                        <contextmenu-item icon-class="fv__icon-comment-item-menu-delete">Delete</contextmenu-item>
                    </contextmenu>
                </template>
            </webpdf>
        </template>
    </html>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .controller('AlertDialogController', {
                handle: function() {
                    this.getPDFUI().alert('Hello World');
                }
            })
            .controller('CustomController', {
                mounted: function() {
                    this.component.active();
                    var element = this.component.getContainerElement();
                    var contextmenu = this.getComponentByName('fv--custom-contextmenu');
                    var rect = element.getBoundingClientRect();
                    contextmenu.showAt(rect.left + rect.width/2, rect.top + rect.height / 2);
                    element.addEventListener('contextmenu', function(e) {
                        contextmenu.showAt(e.clientX, e.clientY);
                        e.preventDefault();
                    });
                }
            });
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

    {
        "iframeOptions": {
            "style": "height: 500px"
        }
    }

## # API

### # Contextmenu component template

Template example:

    <contextmenu name="fv--custom-contextmenu">
        <contextmenu-item >Click to show a alert</contextmenu-item>
        <contextmenu-item>Click to do nothing</contextmenu-item>
        <contextmenu-separator></contextmenu-separator>
        <contextmenu-item icon-class="fv__icon-comment-item-menu-copy">Copy</contextmenu-item>
        <contextmenu-item icon-class="fv__icon-comment-item-menu-delete">Delete</contextmenu-item>
    </contextmenu>

### # Methods

Contextmenu methods

Method | Description | Version
--- | --- | ---
showAt(x: number, y: number):void | Shows on the specified coordinates, where the x and y axes are relative to the browser viewport . | 7.2.0

For more information, you may check layer component.

Contextmenun item method:

For details, you may check xbutton component.

## # Events

Contextmenu events are same as layer component.