/
tabbar.hsp
96 lines (91 loc) · 2.55 KB
/
tabbar.hsp
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
var klass = require("hsp/klass");
var TabCtrl = klass({
attributes: {
label: { type: "template" },
body: { type: "template", defaultContent: true }
},
$init:function(parent) {
if (!this.selected) {
// as parent.$init() is called before this $init()
// selected may be already set (to true in this case)
this.selected=false;
}
}
});
var TabBarCtrl = klass({
attributes: {
"class": { type: "string" },
"selection": { type: "int", defaultValue: 0, binding: "2-way" }
},
elements: {
"tab": { type: "component", controller: TabCtrl }
},
$init: function() {
this.select(this.selection);
},
select: function(idx) {
if (this.selectedTab && idx===this.selection) {
return;
}
// unselect previous tab
if (this.selection>=0 && this.selection<this.content.length) {
this.content[this.selection].selected=false;
}
// select new tab
if (idx>=0 && idx<this.content.length) {
this.selection=idx;
var tab=this.content[idx];
tab.selected=true;
this.selectedTab=tab;
}
}
});
{template tabbar using ctrl:TabBarCtrl}
<div class="x-tabbar">
<nav class="x-tabs">
{foreach idx, tab in ctrl.content}
{if tab.selected}
<span class="x-tab x-tab-selected">
<#tab.label/>
</span>
{else}
<a class="x-tab" onclick="{ctrl.select(idx)}">
<#tab.label/>
</a>
{/if}
{if !tab_islast}
// separator
{/if}
{/foreach}
</nav>
<div class="x-tab-content">
<#ctrl.selectedTab.body />
</div>
</div>
{/template}
{template test}
{let showSubTabs=false, selection1=0, selection2=0}
<#tabbar selection="{selection1}">
<@tab label="Tab A">
{if showSubTabs}
<#tabbar selection="{selection2}">
<@tab label="Tab 1">Sub tab 1</@tab>
<@tab label="Tab 2">Sub tab 2</@tab>
</#tabbar>
{else}
Tab A content...
{/if}
</@tab>
<@tab label="Tab B">Tab B content...</@tab>
<@tab label="Tab C">Tab C content...</@tab>
</#tabbar>
<label for="cb1">
<input id="cb1" type="checkbox" model="{showSubTabs}"/>
Show nested tabs in tab A
</label>
{/template}
// Needed by the playground application.
// Update it, but do not remove it!
module.exports = {
template: test
};