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
|
define.class('$server/composition', function(require, $ui$, screen, view, label, $widgets$, jsviewer){
this.render = function(){
return [
screen(
view({
bgcolor:'#eee',
padding:10,
flex:1,
flexdirection:'column',
classconstr: Config({type:Function, persist:false}),
init:function() {
this.screen.locationhash = function(event){
if (event.value.path) {
require
.async(event.value.path)
.then(function(module){
this._classconstr = module;
this.emit('classconstr', module)
}.bind(this))
}
}.bind(this)
},
wrapcode:true,
render:function() {
var res = [];
var parseDoc = require('$system/parse/jsdocgen').parseDoc;
var class_doc = parseDoc(this.classconstr);
if (class_doc && class_doc.examples) {
for (var i = 0;i< class_doc.examples.length;i++){
var example = class_doc.examples[i];
var name = example.name;
name = name.split(/(?=[A-Z])/).join(" ");
res.push(label({fgcolor:'#333', text:name, bgcolor:NaN}));
res.push(
view({flexdirection:'row', flex:1, bgcolor:NaN},
view({flex:1.5, padding:7, flexdirection:"column", bgcolor:NaN},
label({flex:0, fgcolor:'#666', bgcolor:NaN, text:"Code", fontsize:12, margin:vec4(0,0,0,5)}),
jsviewer({flex:1, wrap:this.wrapcode, overflow:'scroll', source:example.examplefunc.toString(), fontsize:12, bgcolor:"#000030", multiline: true})
),
view({flex:1, padding:7, flexdirection:"column", bgcolor:NaN},
label({flex:0, fgcolor:'#666', bgcolor:NaN, text:"Live demo", fontsize:12, margin:vec4(10,0,0,5)}),
view({flex:1, flexdirection:"column", alignitems:'flex-start', margin:vec4(10,0,0,0), bgcolor:"#aaa", overflow:'scroll'},
example.examplefunc())
)
)
);
if (i < class_doc.examples.length - 1) {
res.push(view({bgcolor:'#999', height:1, margin:vec4(0, 10, 0, 10)}))
}
}
}
return res;
}
})
)
]}
});
|