1 |
|
2 |
|
3 |
|
4 | import {
|
5 | ITranslator,
|
6 | nullTranslator,
|
7 | TranslationBundle
|
8 | } from '@jupyterlab/translation';
|
9 | import { AccordionPanel, Panel, PanelLayout, Widget } from '@lumino/widgets';
|
10 | import { AccordionToolbar } from './accordiontoolbar';
|
11 | import { Toolbar } from './toolbar';
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | export class SidePanel extends Widget {
|
21 | constructor(options: SidePanel.IOptions = {}) {
|
22 | super();
|
23 | const layout = (this.layout = new PanelLayout());
|
24 | this.addClass('jp-SidePanel');
|
25 |
|
26 | const trans = (this._trans = (options.translator || nullTranslator).load(
|
27 | 'jupyterlab'
|
28 | ));
|
29 |
|
30 | if (options.header) {
|
31 | this.addHeader(options.header);
|
32 | }
|
33 |
|
34 | const content = (this._content =
|
35 | options.content ??
|
36 | new AccordionPanel({
|
37 | ...options,
|
38 | layout: AccordionToolbar.createLayout(options)
|
39 | }));
|
40 | content.node.setAttribute('role', 'region');
|
41 | content.node.setAttribute('aria-label', trans.__('side panel content'));
|
42 | content.addClass('jp-SidePanel-content');
|
43 | layout.addWidget(content);
|
44 |
|
45 | if (options.toolbar) {
|
46 | this.addToolbar(options.toolbar);
|
47 | }
|
48 | }
|
49 |
|
50 | |
51 |
|
52 |
|
53 | get content(): Panel {
|
54 | return this._content;
|
55 | }
|
56 |
|
57 | |
58 |
|
59 |
|
60 | get header(): Panel {
|
61 | if (!this._header) {
|
62 | this.addHeader();
|
63 | }
|
64 | return this._header;
|
65 | }
|
66 |
|
67 | |
68 |
|
69 |
|
70 |
|
71 |
|
72 | get toolbar(): Toolbar {
|
73 | if (!this._toolbar) {
|
74 | this.addToolbar();
|
75 | }
|
76 | return this._toolbar;
|
77 | }
|
78 |
|
79 | |
80 |
|
81 |
|
82 | get widgets(): ReadonlyArray<Widget> {
|
83 | return this.content.widgets;
|
84 | }
|
85 |
|
86 | |
87 |
|
88 |
|
89 |
|
90 |
|
91 | addWidget(widget: Toolbar.IWidgetToolbar): void {
|
92 | this.content.addWidget(widget);
|
93 | }
|
94 |
|
95 | |
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | insertWidget(index: number, widget: Toolbar.IWidgetToolbar): void {
|
102 | this.content.insertWidget(index, widget);
|
103 | }
|
104 |
|
105 | private addHeader(header?: Panel) {
|
106 | const theHeader = (this._header = header || new Panel());
|
107 | theHeader.addClass('jp-SidePanel-header');
|
108 |
|
109 | (this.layout as PanelLayout).insertWidget(0, theHeader);
|
110 | }
|
111 |
|
112 | private addToolbar(toolbar?: Toolbar) {
|
113 | const theToolbar = (this._toolbar = toolbar ?? new Toolbar());
|
114 | theToolbar.addClass('jp-SidePanel-toolbar');
|
115 | theToolbar.node.setAttribute('role', 'navigation');
|
116 | theToolbar.node.setAttribute(
|
117 | 'aria-label',
|
118 | this._trans.__('side panel actions')
|
119 | );
|
120 | (this.layout as PanelLayout).insertWidget(
|
121 | (this.layout as PanelLayout).widgets.length - 1,
|
122 | theToolbar
|
123 | );
|
124 | }
|
125 |
|
126 | protected _content: Panel;
|
127 | protected _header: Panel;
|
128 | protected _toolbar: Toolbar;
|
129 | protected _trans: TranslationBundle;
|
130 | }
|
131 |
|
132 |
|
133 |
|
134 |
|
135 | export namespace SidePanel {
|
136 | |
137 |
|
138 |
|
139 | export interface IOptions extends AccordionPanel.IOptions {
|
140 | |
141 |
|
142 |
|
143 |
|
144 |
|
145 | content?: Panel;
|
146 |
|
147 | |
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 | header?: Panel;
|
154 |
|
155 | |
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 | toolbar?: Toolbar;
|
162 |
|
163 | |
164 |
|
165 |
|
166 | translator?: ITranslator;
|
167 | }
|
168 | }
|