# # Layer component

Layer is a floating box component, which is typically used to implement dialogs, tooltips, context menus, and some other components that need to float on other elements.

## # Code examples

### # Getting started

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="flex-container">
                    <xbutton action="show-layer" @controller="custom:ShowHideLayerController">Click to show layer</xbutton>
                    <xbutton action="hide-layer" @controller="custom:ShowHideLayerController">Click to hide layer</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
                <template>
                    <layer name="my-layer" class="center">
                        <text>Hello! I'm a layer component!</text>
                    </layer>
                </template>
            </webpdf>
        </template>
    </html>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .controller('ShowHideLayerController', {
                handle: function() {
                    const layer = this.getComponentByName('my-layer');
                    const action = this.component.getAttribute('action');
                    switch(action) {
                        case 'show-layer':
                            layer.show();
                            break;
                        case 'hide-layer':
                            layer.hide();
                            break;
                    }
                }
            });
        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>

### # Create a layer with header

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="flex-container">
                    <xbutton target-layer="my-layer" @controller="custom:ShowLayerController">Click to show layer</xbutton>
                    <xbutton target-layer="my-layer-2" @controller="custom:ShowLayerController">Click to show layer with custom header</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
                <template>
                    <layer name="my-layer" class="center my-layer">
                        <layer-header title="Layer Title" icon-class="fv__icon-toolbar-print"></layer-header>
                    </layer>
                    <layer name="my-layer-2" class="center my-layer">
                        <div class="my-custom-layer-header">
                            <i class="fv__icon-toolbar-print"></i>
                            <h2>Custom layer header</h2>
                        </div>
                    </layer>
                </template>
            </webpdf>
        </template>
    </html>
    <style>
        .my-layer {
            width: 400px;
            height: 300px;
        }
        .my-custom-layer-header {
            display: flex;
            align-items: center;
        }
        .my-custom-layer-header i{
            display: inline-block;
            width: 32px;
            height: 32px;
        }
        .my-custom-layer-header h2 {
            flex: 1;
            margin: 0 0 0 1em;
        }
        .flex-container {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .controller('ShowLayerController', {
                handle: function() {
                    const layerName = this.component.getAttribute('target-layer')
                    const layer = this.getComponentByName(layerName);
                    layer.show();
                }
            });
        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"
        }
    }

### # Create a draggable layer

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
                <template>
                    <layer name="my-layer1" class="center my-layer" visible>
                        <layer-header @draggable="{type:'parent'}" title="Click header area to drag" icon-class="fv__icon-toolbar-print"></layer-header>
                    </layer>
                    <layer name="my-layer2" class="center my-layer" @draggable visible>
                        <layer-header title="Click anywhere on the box to drag" icon-class="fv__icon-toolbar-print"></layer-header>
                    </layer>
                </template>
            </webpdf>
        </template>
    </html>
    <style>
        .my-layer {
            width: 400px;
            height: 300px;
        }
        .flex-container {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <script>
        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"
        }
    }

### # Create a modal layer

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="flex-container">
                    <xbutton @controller="custom:ShowLayer1Controller">Click to show modal layer 1</xbutton>
                    <xbutton @controller="custom:ShowLayer2Controller">Click to show modal layer 2</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
                <template>
                    <layer name="my-layer-1" class="center my-layer" modal backdrop>
                        <layer-header title="Modal layer with backdrop" icon-class="fv__icon-toolbar-print"></layer-header>
                    </layer>
                    <layer name="my-layer-2" class="center my-layer" modal>
                        <layer-header title="Modal layer without backdrop" icon-class="fv__icon-toolbar-print"></layer-header>
                    </layer>
                </template>
            </webpdf>
        </template>
    </html>
    <style>
        .my-layer {
            width: 400px;
            height: 300px;
        }
        .flex-container {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .controller('ShowLayer1Controller', {
                handle: function() {
                    const layer = this.getComponentByName('my-layer-1');
                    layer.show();
                }
            })
            .controller('ShowLayer2Controller', {
                handle: function() {
                    const layer = this.getComponentByName('my-layer-2');
                    layer.show();
                }
            });
        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"
        }
    }

### # Specify a parent node for the layer component

By default, the layer DOM nodes are appended to the end of the root component when the layer is displayed. This may cause the layer DOM hierarchy to display incorrectly in some cases. To avoid this problem, you can specify where to insert the layer DOM when calling `show()`. Here is the code example:

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="flex-container">
                    <xbutton action="show-layer" @controller="custom:ShowHideLayerController">Click to show layer</xbutton>
                    <xbutton action="hide-layer" @controller="custom:ShowHideLayerController">Click to hide layer</xbutton>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
                <template>
                    <layer name="my-layer" class="center">
                        <text>Hello! I'm a layer component!</text>
                    </layer>
                </template>
            </webpdf>
        </template>
    </html>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between;
        }
    </style>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .controller('ShowHideLayerController', {
                handle: function() {
                    const layer = this.getComponentByName('my-layer');
                    const action = this.component.getAttribute('action');
                    switch(action) {
                        case 'show-layer':
                            layer.show(document.body); // The layer will be appended to `document.body` when it is displayed.
                            break;
                        case 'hide-layer':
                            layer.hide();
                            break;
                    }
                }
            });
        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>

## # API

### # Layer component template

Template example:

    <layer class="center" visible modal backdrop>
        <layer-header title="" icon-class="fv__icon-toolbar-print"></layer-header>
    </layer>

The `<layer>`component template properties:

Property | Description | Type | Default value | Version
--- | --- | --- | --- | ---
visible | Whether make the layer visible | `boolean` | `false` | 7.0.0
modal | Whether it is a modal box | `boolean` | `false` | 7.0.0
backdrop | Whether the modal box uses a black translucent background | `boolean` | `false` | 7.0.0
class="center" | Center layer | `--` | `--` | 7.0.0
class="centerv" | Vertically center layer | `--` | `--` | 7.0.0
class="centerh" | Horizontally center layer | `--` | `--` | 7.0.0
class="left" | Show the layer on the left | `--` | `--` | 7.0.0
class="right" | Show the layer on the right | `--` | `--` | 7.0.0
class="top" | Show the layer on the top | `--` | `--` | 7.0.0
class="bottom" | Show the layer on the bottom | `--` | `--` | 7.0.0

The `<layer-header>`component template properties :

Property | Description | Type | Default value | Version
--- | --- | --- | --- | ---
title | Title contents | `string` | `''` | 7.0.0
icon-class | Title icon | `string` | `''` | 7.0.0

### # Methods

Method | Description | Version
--- | --- | ---
show(appendTo: HTMLElement): void | Append the layer components to a specified DOM node, and show. | 7.0.0
open(appendTo: HTMLElement): void | Function same as show() | 7.0.0
hide(): void | Hide layer | 7.0.0
close(): void | Hide and destroy layer | 7.0.0

## # Events

Name | Description | Sample | Version
--- | --- | --- | ---
shown | Triggered after the layer displays | layer.on('shown', () => void) | 7.0.0
hidden | Triggered after the layer is hidden | layer.on('hidden', () => void) | 7.0.0
closed | Triggered after the layer is hidden and destroyed | layer.on('closed', () => void) | 7.0.0