-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
100 lines (95 loc) · 2.65 KB
/
index.html
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My app</title>
<style>
BODY {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
</style>
</head>
<body>
<h1 style="margin: 1em 20px;">basis.js theme switch demo</h1>
<script src="lib/basis/src/basis.js" basis-config=""></script>
<script>
// template switching
(function(){
var changeThemeHandler = function(){
var theme = 'base';
if (window.innerWidth < 640)
theme = 'mobile';
basis.require('basis.template').setTheme(theme);
};
window.addEventListener('resize', changeThemeHandler, true);
changeThemeHandler();
})();
</script>
<script>
basis.require('basis.devpanel');
basis.require('basis.ui');
basis.require('basis.l10n');
basis.require('basis.template');
basis.require('basis.ui.button');
//
// setup themes and l10n
//
basis.l10n.setCultureList('en-US ru-RU');
basis.template.define({
layout: basis.resource('./templates/base/layout.tmpl'),
list: basis.resource('./templates/base/list.tmpl'),
item: basis.resource('./templates/base/item.tmpl')
});
basis.template.theme('mobile').define({
list: basis.resource('./templates/mobile/list.tmpl'),
item: basis.resource('./templates/mobile/item.tmpl'),
'basis.ui.button.Button': basis.resource('./templates/mobile/button.tmpl')
});
//
// build an interface
//
var dict = basis.l10n.dictionary('./dict.l10n');
var clickmeButton = new basis.ui.button.Button({
caption: dict.token('clickme'),
click: function(){
alert(this.caption.value);
}
});
var showAMagickButton = new basis.ui.button.Button({
caption: dict.token('showAMagick'),
click: function(){
alert(this.caption.value);
}
});
var list = new basis.ui.Node({
template: basis.template.get('list'),
selection: true,
childClass: {
template: basis.template.get('item'),
binding: {
name: 'data:',
company: 'data:',
email: 'data:',
phone: 'data:',
address: 'data:',
about: 'data:'
}
},
childNodes: basis.data.wrap(basis.require('./data/contacts.json'))
});
var app = new basis.ui.Node({
container: document.body,
template: basis.template.get('layout'),
binding: {
clickmeButton: clickmeButton,
showAMagickButton: showAMagickButton,
list: list
}
});
</script>
</body>
</html>