# 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 button component.

# Events

Contextmenu events are same as layer component.

← Number component viewer component →