etheropt.github.io/layout.js at master · williamfeng323/etheropt.github.io · GitHub

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
$(function(){
  var config = {
    settings:{
        hasHeaders: true,
        constrainDragToContainer: true,
        reorderEnabled: false,
        selectionEnabled: true,
        popoutWholeStack: false,
        blockedPopoutsThrowError: true,
        closePopoutsOnUnload: true,
        showPopoutIcon: false,
        showMaximiseIcon: false,
        showCloseIcon: false
    },
    content: [
      {
        type: 'row',
        content:[
          {
            type: 'column',
            width: 60,
            content: [
              {
                type: 'stack',
                height: 55,
                content:[
                  {
                    type: 'component',
                    componentName: 'layout',
                    isClosable: false,
                    title:'Market',
                    componentState: { id: 'market_container', type: 'ejs' }
                  },
                  {
                    type: 'component',
                    componentName: 'layout',
                    isClosable: false,
                    title:'Guides',
                    componentState: { id: 'guides', type: 'ejs' }
                  }
                ]
              },
              {
                type: 'stack',
                content: [
                  {
                    type: 'component',
                    componentName: 'layout',
                    isClosable: false,
                    title:'Trade log',
                    componentState: { id: 'events', type: 'ejs' }
                  },
                  {
                    type: 'component',
                    componentName: 'layout',
                    isClosable: false,
                    title:'My orders',
                    componentState: { id: 'orders', type: 'ejs' }
                  },
                ]
              },
              {
                type: 'component',
                componentName: 'layout',
                isClosable: false,
                title:'Notification log',
                componentState: { id: 'notifications', type: 'ejs' }
              }
            ]
          },
          {
            type: 'column',
            content:[
              {
                type: 'stack',
                content:[
                  {
                    type: 'component',
                    componentName: 'layout',
                    isClosable: false,
                    title:'Etheropt',
                    componentState: { id: 'introduction', type: 'ejs' }
                  },
                  {
                    type: 'component',
                    componentName: 'layout',
                    isClosable: false,
                    title:'Connection',
                    componentState: { id: 'connection', type: 'ejs' }
                  },
                  {
                    type: 'component',
                    componentName: 'layout',
                    isClosable: false,
                    title:'Create expiration',
                    componentState: { id: 'create_expiration', type: 'ejs' }
                  }
                ]
              },
              {
                type: 'component',
                componentName: 'layout',
                isClosable: false,
                title:'Chart',
                componentState: { id: 'chart', type: 'ejs' }
              }
            ]
          }
        ]
      }
    ]
  };

  myLayout = new GoldenLayout( config, $('#layout-container') );
  myLayout.registerComponent( 'layout', function( container, state ){
    if (state.type=='ejs') {
      var html = new EJS({url: 'templates/'+state.id+'.ejs'}).render(state.data);
      container.getElement().html( html );
    }
  });
  myLayout.init();
});