1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
/* eslint no-param-reassign: ["error",
{ "props": true, "ignorePropertyModificationsFor": ["container"] }] */
import { GoldenLayout } from 'golden-layout';
const config = {
settings: {
showPopoutIcon: false,
showCloseIcon: false,
},
dimensions: {
minItemHeight: 40,
},
content: [{
type: 'row',
content: [{
type: 'column',
width: 40,
content: [{
type: 'component',
isClosable: false,
componentName: 'template',
title: 'Game',
componentState: { id: 'client_wrapper' },
}],
},
{
type: 'column',
content: [{
type: 'row',
height: 65,
content: [{
type: 'stack',
content: [{
type: 'component',
isClosable: false,
title: 'Main',
componentName: 'template',
componentState: { id: 'mainmenu' },
},
{
type: 'component',
isClosable: false,
title: 'Log',
componentName: 'template',
componentState: { id: 'log' },
}],
},
{
type: 'component',
title: 'Music',
width: 30,
componentName: 'template',
componentState: { id: 'music' },
}],
},
{
type: 'row',
content: [{
type: 'component',
title: 'Server chat',
componentName: 'template',
componentState: { id: 'ooc' },
}],
}],
}],
}],
};
const golden = new GoldenLayout();
golden.registerComponentFactoryFunction('template', (container, componentState) => {
const template = document.querySelector(`#${componentState.id}`);
container.element.innerHTML = template.innerHTML;
});
golden.loadLayout(config);
|
