1 |
|
2 |
|
3 | import { caretDownIcon, caretUpIcon } from '@jupyterlab/ui-components';
|
4 | import { Signal } from '@lumino/signaling';
|
5 | import { Panel, PanelLayout, Widget } from '@lumino/widgets';
|
6 |
|
7 |
|
8 |
|
9 |
|
10 | export class Collapse extends Widget {
|
11 | constructor(options) {
|
12 | super(options);
|
13 | this._collapseChanged = new Signal(this);
|
14 | const { widget, collapsed = true } = options;
|
15 | this.addClass('jp-Collapse');
|
16 | this._header = new Widget();
|
17 | this._header.addClass('jp-Collapse-header');
|
18 | this._content = new Panel();
|
19 | this._content.addClass('jp-Collapse-contents');
|
20 | const layout = new PanelLayout();
|
21 | this.layout = layout;
|
22 | layout.addWidget(this._header);
|
23 | layout.addWidget(this._content);
|
24 | this.widget = widget;
|
25 | this.collapsed = collapsed;
|
26 | }
|
27 | |
28 |
|
29 |
|
30 | get widget() {
|
31 | return this._widget;
|
32 | }
|
33 | set widget(widget) {
|
34 | const oldWidget = this._widget;
|
35 | if (oldWidget) {
|
36 | oldWidget.title.changed.disconnect(this._onTitleChanged, this);
|
37 | oldWidget.parent = null;
|
38 | }
|
39 | this._widget = widget;
|
40 | widget.title.changed.connect(this._onTitleChanged, this);
|
41 | this._onTitleChanged(widget.title);
|
42 | this._content.addWidget(widget);
|
43 | }
|
44 | |
45 |
|
46 |
|
47 | get collapsed() {
|
48 | return this._collapsed;
|
49 | }
|
50 | set collapsed(value) {
|
51 | if (value === this._collapsed) {
|
52 | return;
|
53 | }
|
54 | if (value) {
|
55 | this._collapse();
|
56 | }
|
57 | else {
|
58 | this._uncollapse();
|
59 | }
|
60 | }
|
61 | |
62 |
|
63 |
|
64 | get collapseChanged() {
|
65 | return this._collapseChanged;
|
66 | }
|
67 | |
68 |
|
69 |
|
70 | toggle() {
|
71 | this.collapsed = !this.collapsed;
|
72 | }
|
73 | |
74 |
|
75 |
|
76 | dispose() {
|
77 | if (this.isDisposed) {
|
78 | return;
|
79 | }
|
80 |
|
81 | this._header = null;
|
82 | this._widget = null;
|
83 | this._content = null;
|
84 | super.dispose();
|
85 | }
|
86 | |
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 | handleEvent(event) {
|
97 | switch (event.type) {
|
98 | case 'click':
|
99 | this._evtClick(event);
|
100 | break;
|
101 | default:
|
102 | break;
|
103 | }
|
104 | }
|
105 | onAfterAttach(msg) {
|
106 | this._header.node.addEventListener('click', this);
|
107 | }
|
108 | onBeforeDetach(msg) {
|
109 | this._header.node.removeEventListener('click', this);
|
110 | }
|
111 | _collapse() {
|
112 | this._collapsed = true;
|
113 | if (this._content) {
|
114 | this._content.hide();
|
115 | }
|
116 | this._setHeader();
|
117 | this._collapseChanged.emit(void 0);
|
118 | }
|
119 | _uncollapse() {
|
120 | this._collapsed = false;
|
121 | if (this._content) {
|
122 | this._content.show();
|
123 | }
|
124 | this._setHeader();
|
125 | this._collapseChanged.emit(void 0);
|
126 | }
|
127 | _evtClick(event) {
|
128 | this.toggle();
|
129 | }
|
130 | |
131 |
|
132 |
|
133 | _onTitleChanged(sender) {
|
134 | this._setHeader();
|
135 | }
|
136 | _setHeader() {
|
137 | (this._collapsed ? caretUpIcon : caretDownIcon).element({
|
138 | container: this._header.node,
|
139 | label: this._widget.title.label,
|
140 | elementPosition: 'right',
|
141 | height: '28px'
|
142 | });
|
143 | }
|
144 | }
|
145 |
|
\ | No newline at end of file |