# # Sidebar 组件

## # 示例代码

### # 基础示例

    <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 宽度

    <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"
        }
    }

### # 展开和折叠 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 按钮提示信息

将鼠标悬停在 button 上，以显示工具提示信息。

    <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"
        }
    }

### # 使用 JavaScript 动态插入一个 sidebar 面板

    <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 组件模板

模板示例：

    <!-- 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>

`sidebar` 组件模板属性：

属性 | 描述 | 类型 | 默认值 | 版本
--- | --- | --- | --- | ---
open | 扩展状态 | `boolean` | `false` | 7.0.0
width | 如果展开的 Sidebar 的宽度大于或等于1，则将作为像素值，如果小于1，则将其作为比例值乘以 `window.innerwidth` 来进行计算，这样可以实现宽度自适应 | `number` | `310`px | 7.0.0

`sidebar-panel` 属性：

属性 | 描述 | 类型 | 默认值 | 版本
--- | --- | --- | --- | ---
title | 展开的 sidebar-panel 顶部显示的字符串 | `string` | `''` | 7.0.0
active | 是否激活 sidebar-panel | `boolean` | `false` | 7.0.0

### # Sidebar 对象属性

`sidebar` 对象属性:

属性 | 描述 | 类型
--- | --- | ---
disabled | 是否禁用 sidebar | `boolean`
isVisible | sidebar 是否可见 | `boolean`
status | 三种状态： `'SidebarComponent.STATUS_COLLAPSED'` `'SidebarComponent.STATUS_COLLAPSED_TOTALLY'` `'SidebarComponent.STATUS_EXPANDED'` | `string`

`sidebar-panel` 对象属性：

属性 | 描述 | 类型
--- | --- | ---
disabled | 是否禁用 sidebar-panel | `boolean`
isVisible | sidebar-panel 是否可见 | `boolean`
isActive | sidebar-panel 是否处于活动状态 | `boolean`

### # 方法

`sidebar` 方法:

方法 | 描述 | 版本
--- | --- | ---
isCollapsed(): boolean | 如果其状态不等于`sidebarcomponent.status_expanded`，则返回 true | 7.0.0
expand(width: number): void | 扩展 sidebar | 7.0.0
collapse(): void | 隐藏 sidebar-panel，同时 sidebar buttons 可见 | 7.0.0
collapseTotally(): void | 隐藏 sidebar-panel，同时sidebar buttons 不可见 | 7.0.0

`sidebar-panel` 方法：

方法 | 描述 | 版本
--- | --- | ---
disable(): void | 禁用 sidebar-panel。一旦禁用，则不能被激活 | 7.0
enable(): void | 启用 sidebar-panel | 7.0
show(): void | 显示隐藏的 sidebar-panel | 7.0
hide(): void | 隐藏 sidebar-panel | 7.0
destroy(): void | 销毁 sidebar-panel | 7.0

## # 事件

`Sidebar` 事件：

事件名称 | 描述 | 示例 | 版本
--- | --- | --- | ---
`COMPONENT_EVENTS.EXPAND` | 当扩展 sidebar 时触发 | `sidebar.on(COMPONENT_EVENTS.EXPAND, () => void)` | 7.0.0
`COMPONENT_EVENTS.COLLAPSE` | 当收缩 sidebar 时触发 | `sidebar.on(COMPONENT_EVENTS.COLLAPSE, () => void)` | 7.0.0

`Sidebar-panel` 事件：

事件名称 | 描述 | 示例 | 版本
--- | --- | --- | ---
active | 当激活 sidebar-panel 时触发 | `sidebarPanel.on('active', () => {})` | 7.0.0
deactive | 当停用 sidebar-panel 时触发 | `sidebarPanel.on('deactive', () => {})` | 7.0.0
shown | 当显示 sidebar-panel 时触发 | `sidebarPanel.on('shown', () => {})` | 7.0.0
hidden | 当隐藏 sidebar-panel 时触发 | `sidebarPanel.on('hidden', () => {})` | 7.0.0