# # Sidebar Component

## # Code examples

### # Basic example

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="btn-container">
                    <xbutton @controller="custom:SidebarActionController" action="collapse">collapse</xbutton>
                    <xbutton @controller="custom:SidebarActionController" action="collpase.totally">collapse totally</xbutton>
                    <xbutton @controller="custom:SidebarActionController" action="expand">expand</xbutton>
                    <xbutton @controller="custom:SidebarActionController" action="active.layers">active layers panel</xbutton>
                    <xbutton @controller="custom:SidebarActionController" action="active.bookmark">active bookmark panel</xbutton>
                </div>
                <div class="fv__ui-body">
                    <sidebar name="my-sidebar">
                        <sidebar-panel name="sidebar-layers" icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                        <sidebar-panel name="sidebar-bookmark" active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                    </sidebar>
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .btn-container {
            display: flex;
            padding: 10px 0;
        }
        .btn-container>.fv__ui-button + .fv__ui-button {
            margin-left: 20px;
        }
    </style>
    <script>
        UIExtension.PDFUI.module('custom', [])
        .controller('SidebarActionController', {
            handle: function() {
                var action = this.component.getAttribute('action');
                var sidebar = this.getComponentByName('my-sidebar');
                switch(action) {
                    case 'collapse':
                        sidebar.collapse();
                        break;
                    case 'collpase.totally':
                        sidebar.collapseTotally();
                        break;
                    case 'expand':
                        sidebar.expand();
                        break;
                    case 'active.layers':
                        sidebar.getComponentByName('sidebar-layers').active();
                        break;
                    case 'active.bookmark':
                        sidebar.getComponentByName('sidebar-bookmark').active();
                        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>

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

### # Sidebar width

    <html>
        <template id="layout-template">
            <webpdf>
                <p> Use a fixed pixel value as the initial width <p>
                <div>
                    <sidebar width="500" open>
                        <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                        <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                    </sidebar>
                </div>
                <p> Use the scale value of window.innerWidth as the initial width </p>
                <div>
                    <sidebar width="0.5" open>
                        <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                        <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                    </sidebar>
                </div>
                <div class="hide">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <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"
        }
    }

### # Expand and collapse sidebar

    <html>
        <template id="layout-template">
            <webpdf>
                <p>Expand sidebar by default</p>
                <div>
                    <sidebar open>
                        <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                        <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                    </sidebar>
                </div>
                <p>Collapse sidebar by default/p>
                <div>
                    <sidebar>
                        <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                        <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                    </sidebar>
                </div>
                <div class="hide">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <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"
        }
    }

### # Sidebar buttons' tooltip

Hover your mouse over a button to show the tooltip.

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <sidebar open>
                        <sidebar-panel @tooltip tooltip-title="Layers sidebar panel" tooltip-placement="right" icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                        <sidebar-panel @tooltip tooltip-title="Bookmark sidebar panel" tooltip-placement="right" active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                    </sidebar>
                </div>
                <div class="hide">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <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"
        }
    }

### # Dynamically insert a sidebar panel using JavaScript

    <html>
        <template id="layout-template">
            <webpdf>
                <div>
                    <xbutton @controller="custom:InsertSidebarController">Add sidebar panel</xbutton>
                </div>
                <div>
                    <sidebar open name="sidebar-component-name">
                        <sidebar-panel @tooltip tooltip-title="Layers sidebar panel" tooltip-placement="right" icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
                        <sidebar-panel @tooltip tooltip-title="Bookmark sidebar panel" tooltip-placement="right" active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
                    </sidebar>
                </div>
                <div class="hide">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <script>
        UIExtension.PDFUI.module('custom', [])
            .controller('InsertSidebarController', {
                mounted: function() {
                    this.count = 0;
                },
                handle: function() {
                    if(this.count >= 3) {
                        return;
                    }
                    this.count++;
                    this.getPDFUI().getComponentByName('sidebar-component-name')
                    .then(sidebar => {
                        sidebar.append(
                            '<sidebar-panel icon-class="fv__icon-sidebar-bookmark" title="Dynamic sidebar panel"></sidebar-panel>'
                        );
                    })
                }
            });
        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: 300px"
        }
    }

## # API

### # Sidebar component template

Template example:

    <!-- The width value smaller than 1 means that is a scale value of window.innerWidth -->
    <sidebar open width="500">
        <sidebar-panel icon-class="fv__icon-sidebar-page-manager" title="Layers"></sidebar-panel>
        <sidebar-panel active icon-class="fv__icon-sidebar-bookmark" title="Bookmark"></sidebar-panel>
    </sidebar>

The `sidebar` component template properties:

Property | Decription | Type | Default Value | Version
--- | --- | --- | --- | ---
open | Expand Status | `boolean` | `false` | 7.0.0
width | The width of the expanded Sidebar will be used as pixel value if it is greater than or equal to 1, and will be calculated by multiplying `window.innerwidth` if it is less than 1 | `number` | `310`px | 7.0.0

The `sidebar-panel` properties:

Property | Description | Type | Default value | Version
--- | --- | --- | --- | ---
title | The string show at the top of expanded sidebar-panel | `string` | `''` | 7.0.0
active | If the sidebar-panel is active | `boolean` | `false` | 7.0.0

### # Sidebar object properties

The `sidebar` object properties:

Properties | Description | Type
--- | --- | ---
disabled | If the sidebar is disabled | `boolean`
isVisible | If the sidebar is visible | `boolean`
status | Three status: `'SidebarComponent.STATUS_COLLAPSED'` `'SidebarComponent.STATUS_COLLAPSED_TOTALLY'` `'SidebarComponent.STATUS_EXPANDED'` | `string`

The `sidebar-panel` object properties:

Properties | Description | Type
--- | --- | ---
disabled | If the sidebar-panel is disabled | `boolean`
isVisible | If the sidebar-panel is visible | `boolean`
isActive | If the sidebar-panel is active | `boolean`

### # Methods

The `sidebar` methods:

Method | Description | Version
--- | --- | ---
isCollapsed(): boolean | Return true if the status is not equal to `sidebarcomponent.status_expanded` | 7.0.0
expand(width: number): void | Expand sidebar | 7.0.0
collapse(): void | Hide the sidebar-panel with the sidebar buttons visible | 7.0.0
collapseTotally(): void | Hide the sidebar with the sidebar buttons invisible | 7.0.0

The `sidebar-panel` methods:

Method | Description | Version
--- | --- | ---
disable(): void | Disable sidebar-panel.Once disabled, it cannot be activated | 7.0
enable(): void | Enable sidebar-panel | 7.0
show(): void | Show the hidden sidebar-panel | 7.0
hide(): void | Hide the sidebar-panel | 7.0
destroy(): void | Destroy the sidebar-panel | 7.0

## # Events

The `Sidebar` events:

Event Name | Description | Sample | Version
--- | --- | --- | ---
`COMPONENT_EVENTS.EXPAND` | Triggered when the sidebar is expanded | `sidebar.on(COMPONENT_EVENTS.EXPAND, () => void)` | 7.0.0
`COMPONENT_EVENTS.COLLAPSE` | Triggered when the sidebar is collapsed | `sidebar.on(COMPONENT_EVENTS.COLLAPSE, () => void)` | 7.0.0

The `Sidebar-panel` events:

Event Name | Description | Sample | Version
--- | --- | --- | ---
active | Triggered when the sidebar-panel is activated | `sidebarPanel.on('active', () => {})` | 7.0.0
deactive | Triggered when the sidebar-panel is deactivated | `sidebarPanel.on('deactive', () => {})` | 7.0.0
shown | Triggered when the sidebar-panel is shown | `sidebarPanel.on('shown', () => {})` | 7.0.0
hidden | Triggered when the sidebar-panel is hidden | `sidebarPanel.on('hidden', () => {})` | 7.0.0