binhend 1.1.2 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +2 -2
- package/package.json +1 -1
- package/example_webcomp/public/AnUserInterface.js +0 -0
- package/example_webcomp/public/Link3.js +0 -18
- package/example_webcomp/public/common/InputText.js +0 -74
- package/example_webcomp/public/common/Link.js +0 -18
- package/example_webcomp/public/common/Link2.js +0 -13
- package/example_webcomp/public/index.html +0 -18
- package/example_webcomp/public/index.js +0 -14
- package/example_webcomp/public/layouts/AppMainLayout.js +0 -167
- package/example_webcomp/public/layouts/AppToDos.js +0 -218
- package/example_webcomp/public/layouts/Link.js +0 -18
- package/example_webcomp/public/layouts/PageContent.js +0 -30
- package/example_webcomp/public/layouts/PageHeader.js +0 -72
- package/example_webcomp/public/layouts/ToDoItem.js +0 -38
- package/example_webcomp/public/services/AnyService.js +0 -9
- package/example_webcomp/public/services/ServiceToDos.js +0 -47
- package/example_webcomp/public/styles/ToDoItemStyle.js +0 -45
- package/example_webcomp/public/styles/ToDoItemStyle2.js +0 -10
- package/example_webcomp/public/styles/temp.css +0 -7
- package/example_webcomp/public/styles/todo.css +0 -31
- package/example_webcomp/public/styles/todo.css.js +0 -10
package/index.js
CHANGED
package/package.json
CHANGED
|
File without changes
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Binh.ui(function Link() {
|
|
5
|
-
var { a } = Binh.element();
|
|
6
|
-
|
|
7
|
-
var text = arguments[0];
|
|
8
|
-
var path = arguments[1];
|
|
9
|
-
|
|
10
|
-
var link = a(text).on('click', function() {
|
|
11
|
-
Binh.Router.navigate(path);
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
return link;
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}();
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
!function(){
|
|
4
|
-
|
|
5
|
-
Toto = Binh.service('/services/ServiceToDos.js', function(define, state, http) {
|
|
6
|
-
var todos = state.as('todos');
|
|
7
|
-
|
|
8
|
-
todos.schema(function(resolve) {
|
|
9
|
-
new http(api('get'))
|
|
10
|
-
.get(function(response) {
|
|
11
|
-
resolve(parseResponse(response));
|
|
12
|
-
});
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
function handleResponse(response) {
|
|
16
|
-
todos.set(parseResponse(response));
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function parseResponse(response) {
|
|
20
|
-
var todoitems = [];
|
|
21
|
-
|
|
22
|
-
Object.keys(response).forEach(function(key) {
|
|
23
|
-
var each = response[key];
|
|
24
|
-
todoitems.push({ id: key, text: each.text });
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
return todoitems;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
define('add', function(value) {
|
|
31
|
-
new http(api('add'))
|
|
32
|
-
.body({ text: value })
|
|
33
|
-
.post(handleResponse);
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
define('remove', function(id) {
|
|
37
|
-
new http(api('remove'))
|
|
38
|
-
.body({ id: id })
|
|
39
|
-
.post(handleResponse);
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
function api(relative_url) {
|
|
43
|
-
return 'https://todolist-of-binh.fly.dev/todos/' + relative_url;
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}();
|
|
49
|
-
|
|
50
|
-
var Toto;
|
|
51
|
-
|
|
52
|
-
Binh.ui(function main() {
|
|
53
|
-
// var addTodoItem = Toto.debounce('add', 1500, true);
|
|
54
|
-
|
|
55
|
-
// setTimeout(function() {
|
|
56
|
-
// addTodoItem('over 10kms');
|
|
57
|
-
// }, 10000);
|
|
58
|
-
|
|
59
|
-
var inputbox = input({ type: 'text', placeholder: 'Enter to-do item' });
|
|
60
|
-
|
|
61
|
-
var submit = inputbox.action('submit');
|
|
62
|
-
|
|
63
|
-
inputbox.on('keypress', function (event) {
|
|
64
|
-
if (event.key === "Enter") {
|
|
65
|
-
submit(inputbox.element.value);
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
return inputbox;
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
var input = Binh.el('input');
|
|
73
|
-
|
|
74
|
-
}();
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Binh.ui(function Link() {
|
|
5
|
-
var { a } = Binh.element();
|
|
6
|
-
|
|
7
|
-
var text = arguments[0];
|
|
8
|
-
var path = arguments[1];
|
|
9
|
-
|
|
10
|
-
var link = a(text).on('click', function() {
|
|
11
|
-
Binh.Router.navigate(path);
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
return link;
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}();
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<title>Binh Demo</title>
|
|
5
|
-
<meta charset="utf-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
-
<!-- <link rel="stylesheet" href="/lib/bootstrap.3.4.1.min.css"> -->
|
|
8
|
-
<!-- <link rel="stylesheet" href="style.css"> -->
|
|
9
|
-
<!-- <script src="/lib/jquery.3.5.1.min.js"></script>
|
|
10
|
-
<script src="/lib/bootstrap.3.4.1.min.js"></script> -->
|
|
11
|
-
|
|
12
|
-
<script src="http://localhost:1300/dev/binh.min.js"></script>
|
|
13
|
-
<!-- <script src="https://binhjs.pages.dev/dist/binh.min.js"></script> -->
|
|
14
|
-
<!-- <script src="https://cdn.jsdelivr.net/gh/penciless/binhjs/dist/binh.min.js"></script> -->
|
|
15
|
-
<script src="/index.js"></script>
|
|
16
|
-
</head>
|
|
17
|
-
<body></body>
|
|
18
|
-
</html>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
Binh.script('https://cdn.jsdelivr.net/gh/jquery/jquery@3.5.1/dist/jquery.min.js', function() {
|
|
3
|
-
Binh.link('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css');
|
|
4
|
-
Binh.script('https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js');
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
Binh.Router.onload(function() {
|
|
8
|
-
console.log('#### ON ROUTING !!!');
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
Binh({
|
|
12
|
-
'': '/layouts/AppMainLayout.js',
|
|
13
|
-
'/todos': '/layouts/AppToDos.js'
|
|
14
|
-
});
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
Binh.prequire(['https://code.jquery.com/jquery-3.7.0.min.js'], function() {
|
|
2
|
-
|
|
3
|
-
!function(){
|
|
4
|
-
|
|
5
|
-
PageHeader = Binh.ui('/layouts/PageHeader.js', function PageHeader() {
|
|
6
|
-
// var Link = Binh.ui('/common/Link2.js');
|
|
7
|
-
|
|
8
|
-
var PageHeader = div({ id: 'page-header' });
|
|
9
|
-
|
|
10
|
-
PageHeader(
|
|
11
|
-
div({ class: 'container' })(
|
|
12
|
-
div({ class: 'row' })(
|
|
13
|
-
nav({ class: 'navbar navbar-default' })(
|
|
14
|
-
div({ class: 'container-fluid' })([
|
|
15
|
-
div({ class: 'navbar-header' })(
|
|
16
|
-
a({ class: 'navbar-brand', href: '#' })(
|
|
17
|
-
'Website Name'
|
|
18
|
-
)
|
|
19
|
-
),
|
|
20
|
-
ul({ class: 'nav navbar-nav' })(
|
|
21
|
-
li({ class: 'active' })(
|
|
22
|
-
Link('Home', '/')
|
|
23
|
-
),
|
|
24
|
-
li(
|
|
25
|
-
Link('Abc', '/abc')
|
|
26
|
-
),
|
|
27
|
-
li(
|
|
28
|
-
Link('Haha', '/haha')
|
|
29
|
-
),
|
|
30
|
-
li(
|
|
31
|
-
a('Page 3')
|
|
32
|
-
)
|
|
33
|
-
)
|
|
34
|
-
])
|
|
35
|
-
)
|
|
36
|
-
)
|
|
37
|
-
),
|
|
38
|
-
function (thisEl) {
|
|
39
|
-
setTimeout(function() {
|
|
40
|
-
console.log('>>> Page Header:', thisEl);
|
|
41
|
-
}, 1000);
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
return PageHeader;
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
!function(){
|
|
49
|
-
|
|
50
|
-
Link = Binh.ui('/common/Link.js', function Link() {
|
|
51
|
-
var { a } = Binh.element();
|
|
52
|
-
|
|
53
|
-
var text = arguments[0];
|
|
54
|
-
var path = arguments[1];
|
|
55
|
-
|
|
56
|
-
var link = a(text).on('click', function() {
|
|
57
|
-
Binh.Router.navigate(path);
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
return link;
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}();
|
|
65
|
-
|
|
66
|
-
var Link;
|
|
67
|
-
|
|
68
|
-
}();
|
|
69
|
-
|
|
70
|
-
!function(){
|
|
71
|
-
|
|
72
|
-
PageContent = Binh.ui('/layouts/PageContent.js', function PageContent() {
|
|
73
|
-
var { Router } = Binh;
|
|
74
|
-
|
|
75
|
-
var PageContent = div({ id: 'page-content' });
|
|
76
|
-
|
|
77
|
-
PageContent(
|
|
78
|
-
new Router({
|
|
79
|
-
'': div('default work!'),
|
|
80
|
-
'/abc': div('abc work!'),
|
|
81
|
-
'/haha': trans('haha work!')
|
|
82
|
-
})
|
|
83
|
-
)
|
|
84
|
-
(
|
|
85
|
-
function (thisEl) {
|
|
86
|
-
setTimeout(function() {
|
|
87
|
-
console.log('>>> Page Content:', thisEl);
|
|
88
|
-
}, 1000);
|
|
89
|
-
}
|
|
90
|
-
);
|
|
91
|
-
|
|
92
|
-
return PageContent;
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}();
|
|
97
|
-
|
|
98
|
-
!function(){
|
|
99
|
-
|
|
100
|
-
AnyService = Binh.service('/services/AnyService.js', function AnyService() {
|
|
101
|
-
|
|
102
|
-
});
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}();
|
|
106
|
-
|
|
107
|
-
!function(){
|
|
108
|
-
|
|
109
|
-
Button = Binh.ui('npm://binhjsx/node/ui/button/Button.js', function main() {
|
|
110
|
-
var abutton = button();
|
|
111
|
-
var trigger = abutton.action('trigger');
|
|
112
|
-
|
|
113
|
-
abutton.on('click', trigger);
|
|
114
|
-
abutton.on('touchend', trigger);
|
|
115
|
-
|
|
116
|
-
return abutton;
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}();
|
|
121
|
-
|
|
122
|
-
!function(){
|
|
123
|
-
|
|
124
|
-
Link3 = Binh.ui('', function Link() {
|
|
125
|
-
var { a } = Binh.element();
|
|
126
|
-
|
|
127
|
-
var text = arguments[0];
|
|
128
|
-
var path = arguments[1];
|
|
129
|
-
|
|
130
|
-
var link = a(text).on('click', function() {
|
|
131
|
-
Binh.Router.navigate(path);
|
|
132
|
-
});
|
|
133
|
-
|
|
134
|
-
return link;
|
|
135
|
-
});
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}();
|
|
139
|
-
|
|
140
|
-
var PageHeader, PageContent, AnyService, Button, Link3;
|
|
141
|
-
|
|
142
|
-
Binh.ui(function AppMainLayout() {
|
|
143
|
-
var MainLayout = div({ id: 'app-main-layout' });
|
|
144
|
-
|
|
145
|
-
MainLayout(
|
|
146
|
-
PageHeader,
|
|
147
|
-
PageContent,
|
|
148
|
-
function (thisEl) {
|
|
149
|
-
setTimeout(function() {
|
|
150
|
-
console.log('>>> App Main Layout:', thisEl);
|
|
151
|
-
}, 1000);
|
|
152
|
-
},
|
|
153
|
-
Button()('test this button')
|
|
154
|
-
);
|
|
155
|
-
|
|
156
|
-
return MainLayout;
|
|
157
|
-
});
|
|
158
|
-
|
|
159
|
-
var div = Binh.el('div'),
|
|
160
|
-
nav = Binh.el('nav'),
|
|
161
|
-
ul = Binh.el('ul'),
|
|
162
|
-
li = Binh.el('li'),
|
|
163
|
-
a = Binh.el('a'),
|
|
164
|
-
trans = Binh.el('trans'),
|
|
165
|
-
button = Binh.el('button');
|
|
166
|
-
|
|
167
|
-
});
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
Binh.prequire(['https://code.jquery.com/jquery-3.7.0.min.js'], function() {
|
|
2
|
-
|
|
3
|
-
!function(){
|
|
4
|
-
|
|
5
|
-
PageHeader = Binh.ui('/layouts/PageHeader.js', function PageHeader() {
|
|
6
|
-
// var Link = Binh.ui('/common/Link2.js');
|
|
7
|
-
|
|
8
|
-
var PageHeader = div({ id: 'page-header' });
|
|
9
|
-
|
|
10
|
-
PageHeader(
|
|
11
|
-
div({ class: 'container' })(
|
|
12
|
-
div({ class: 'row' })(
|
|
13
|
-
nav({ class: 'navbar navbar-default' })(
|
|
14
|
-
div({ class: 'container-fluid' })([
|
|
15
|
-
div({ class: 'navbar-header' })(
|
|
16
|
-
a({ class: 'navbar-brand', href: '#' })(
|
|
17
|
-
'Website Name'
|
|
18
|
-
)
|
|
19
|
-
),
|
|
20
|
-
ul({ class: 'nav navbar-nav' })(
|
|
21
|
-
li({ class: 'active' })(
|
|
22
|
-
Link('Home', '/')
|
|
23
|
-
),
|
|
24
|
-
li(
|
|
25
|
-
Link('Abc', '/abc')
|
|
26
|
-
),
|
|
27
|
-
li(
|
|
28
|
-
Link('Haha', '/haha')
|
|
29
|
-
),
|
|
30
|
-
li(
|
|
31
|
-
a('Page 3')
|
|
32
|
-
)
|
|
33
|
-
)
|
|
34
|
-
])
|
|
35
|
-
)
|
|
36
|
-
)
|
|
37
|
-
),
|
|
38
|
-
function (thisEl) {
|
|
39
|
-
setTimeout(function() {
|
|
40
|
-
console.log('>>> Page Header:', thisEl);
|
|
41
|
-
}, 1000);
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
return PageHeader;
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
!function(){
|
|
49
|
-
|
|
50
|
-
Link = Binh.ui('/common/Link.js', function Link() {
|
|
51
|
-
var { a } = Binh.element();
|
|
52
|
-
|
|
53
|
-
var text = arguments[0];
|
|
54
|
-
var path = arguments[1];
|
|
55
|
-
|
|
56
|
-
var link = a(text).on('click', function() {
|
|
57
|
-
Binh.Router.navigate(path);
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
return link;
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}();
|
|
65
|
-
|
|
66
|
-
var Link;
|
|
67
|
-
|
|
68
|
-
}();
|
|
69
|
-
|
|
70
|
-
!function(){
|
|
71
|
-
|
|
72
|
-
InputText = Binh.ui('/common/InputText.js', function main() {
|
|
73
|
-
// var addTodoItem = Toto.debounce('add', 1500, true);
|
|
74
|
-
|
|
75
|
-
// setTimeout(function() {
|
|
76
|
-
// addTodoItem('over 10kms');
|
|
77
|
-
// }, 10000);
|
|
78
|
-
|
|
79
|
-
var inputbox = input({ type: 'text', placeholder: 'Enter to-do item' });
|
|
80
|
-
|
|
81
|
-
var submit = inputbox.action('submit');
|
|
82
|
-
|
|
83
|
-
inputbox.on('keypress', function (event) {
|
|
84
|
-
if (event.key === "Enter") {
|
|
85
|
-
submit(inputbox.element.value);
|
|
86
|
-
}
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
return inputbox;
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
!function(){
|
|
93
|
-
|
|
94
|
-
Toto = Binh.service('/services/ServiceToDos.js');
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}();
|
|
98
|
-
|
|
99
|
-
var Toto;
|
|
100
|
-
|
|
101
|
-
}();
|
|
102
|
-
|
|
103
|
-
!function(){
|
|
104
|
-
|
|
105
|
-
Link = Binh.ui('/layouts/Link.js', function Link() {
|
|
106
|
-
var { a } = Binh.element('a');
|
|
107
|
-
|
|
108
|
-
var text = arguments[0];
|
|
109
|
-
var path = arguments[1];
|
|
110
|
-
|
|
111
|
-
var link = a(text).on('click', function() {
|
|
112
|
-
Binh.Router.navigate(path);
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
return link;
|
|
116
|
-
});
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}();
|
|
120
|
-
|
|
121
|
-
!function(){
|
|
122
|
-
|
|
123
|
-
Dodo = Binh.service('/services/ServiceToDos.js', function(define, state, http) {
|
|
124
|
-
var todos = state.as('todos');
|
|
125
|
-
|
|
126
|
-
todos.schema(function(resolve) {
|
|
127
|
-
new http(api('get'))
|
|
128
|
-
.get(function(response) {
|
|
129
|
-
resolve(parseResponse(response));
|
|
130
|
-
});
|
|
131
|
-
});
|
|
132
|
-
|
|
133
|
-
function handleResponse(response) {
|
|
134
|
-
todos.set(parseResponse(response));
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
function parseResponse(response) {
|
|
138
|
-
var todoitems = [];
|
|
139
|
-
|
|
140
|
-
Object.keys(response).forEach(function(key) {
|
|
141
|
-
var each = response[key];
|
|
142
|
-
todoitems.push({ id: key, text: each.text });
|
|
143
|
-
});
|
|
144
|
-
|
|
145
|
-
return todoitems;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
define('add', function(value) {
|
|
149
|
-
new http(api('add'))
|
|
150
|
-
.body({ text: value })
|
|
151
|
-
.post(handleResponse);
|
|
152
|
-
});
|
|
153
|
-
|
|
154
|
-
define('remove', function(id) {
|
|
155
|
-
new http(api('remove'))
|
|
156
|
-
.body({ id: id })
|
|
157
|
-
.post(handleResponse);
|
|
158
|
-
});
|
|
159
|
-
|
|
160
|
-
function api(relative_url) {
|
|
161
|
-
return 'https://todolist-of-binh.fly.dev/todos/' + relative_url;
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
}();
|
|
167
|
-
|
|
168
|
-
var PageHeader, InputText, Link, Dodo;
|
|
169
|
-
|
|
170
|
-
Binh.ui(function main() {
|
|
171
|
-
var ServiceToDos = Dodo;
|
|
172
|
-
// var PageHeader = Binh.ui('/layouts/PageHeader.js');
|
|
173
|
-
var ToDoItem = Binh.ui('/layouts/ToDoItem.js');
|
|
174
|
-
// var addTodoItem = ServiceToDos.does('add');
|
|
175
|
-
// var addTodoItem = ServiceToDos.debounce('add', 1500); // trailing only
|
|
176
|
-
var addTodoItem = ServiceToDos.debounce('add', 1500, true); // both leading & trailing
|
|
177
|
-
// var addTodoItem = ServiceToDos.debounce('add', 1500, true, true); // leading only
|
|
178
|
-
// var addTodoItem = ServiceToDos.throttle('add', 1500);
|
|
179
|
-
// var addTodoItem = ServiceToDos.once('add', 1500);
|
|
180
|
-
|
|
181
|
-
var inputbox = InputText().when('submit', addTodoItem);
|
|
182
|
-
|
|
183
|
-
var todolist = div({ class: 'todo-items' });
|
|
184
|
-
|
|
185
|
-
todolist.subscribe('todos', function(data) {
|
|
186
|
-
todolist.empty();
|
|
187
|
-
data.forEach(function(datum) {
|
|
188
|
-
todolist(
|
|
189
|
-
ToDoItem(datum).when('remove', ServiceToDos.instant('remove'))
|
|
190
|
-
);
|
|
191
|
-
});
|
|
192
|
-
});
|
|
193
|
-
|
|
194
|
-
var maindiv = div({ class: 'container' });
|
|
195
|
-
var left_section = div({ id: 'left-section' })('left section')(PageHeader);
|
|
196
|
-
var right_section = div({ id: 'right-section' })('right section');
|
|
197
|
-
|
|
198
|
-
maindiv(
|
|
199
|
-
left_section,
|
|
200
|
-
right_section(
|
|
201
|
-
div('To-Do List'),
|
|
202
|
-
inputbox,
|
|
203
|
-
todolist
|
|
204
|
-
)
|
|
205
|
-
);
|
|
206
|
-
|
|
207
|
-
return maindiv;
|
|
208
|
-
});
|
|
209
|
-
|
|
210
|
-
var div = Binh.el('div'),
|
|
211
|
-
span = Binh.el('span'),
|
|
212
|
-
nav = Binh.el('nav'),
|
|
213
|
-
ul = Binh.el('ul'),
|
|
214
|
-
li = Binh.el('li'),
|
|
215
|
-
a = Binh.el('a'),
|
|
216
|
-
input = Binh.el('input');
|
|
217
|
-
|
|
218
|
-
});
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Binh.ui(function Link() {
|
|
5
|
-
var { a } = Binh.element('a');
|
|
6
|
-
|
|
7
|
-
var text = arguments[0];
|
|
8
|
-
var path = arguments[1];
|
|
9
|
-
|
|
10
|
-
var link = a(text).on('click', function() {
|
|
11
|
-
Binh.Router.navigate(path);
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
return link;
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}();
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
Binh.prequire(['https://code.jquery.com/jquery-3.7.0.min.js'], function() {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Binh.ui(function PageContent() {
|
|
5
|
-
var { Router } = Binh;
|
|
6
|
-
|
|
7
|
-
var PageContent = div({ id: 'page-content' });
|
|
8
|
-
|
|
9
|
-
PageContent(
|
|
10
|
-
new Router({
|
|
11
|
-
'': div('default work!'),
|
|
12
|
-
'/abc': div('abc work!'),
|
|
13
|
-
'/haha': trans('haha work!')
|
|
14
|
-
})
|
|
15
|
-
)
|
|
16
|
-
(
|
|
17
|
-
function (thisEl) {
|
|
18
|
-
setTimeout(function() {
|
|
19
|
-
console.log('>>> Page Content:', thisEl);
|
|
20
|
-
}, 1000);
|
|
21
|
-
}
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
return PageContent;
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
var div = Binh.el('div'),
|
|
28
|
-
trans = Binh.el('trans');
|
|
29
|
-
|
|
30
|
-
});
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
!function(){
|
|
4
|
-
|
|
5
|
-
Link = Binh.ui('/common/Link.js', function Link() {
|
|
6
|
-
var { a } = Binh.element();
|
|
7
|
-
|
|
8
|
-
var text = arguments[0];
|
|
9
|
-
var path = arguments[1];
|
|
10
|
-
|
|
11
|
-
var link = a(text).on('click', function() {
|
|
12
|
-
Binh.Router.navigate(path);
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
return link;
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}();
|
|
20
|
-
|
|
21
|
-
var Link;
|
|
22
|
-
|
|
23
|
-
Binh.ui(function PageHeader() {
|
|
24
|
-
// var Link = Binh.ui('/common/Link2.js');
|
|
25
|
-
|
|
26
|
-
var PageHeader = div({ id: 'page-header' });
|
|
27
|
-
|
|
28
|
-
PageHeader(
|
|
29
|
-
div({ class: 'container' })(
|
|
30
|
-
div({ class: 'row' })(
|
|
31
|
-
nav({ class: 'navbar navbar-default' })(
|
|
32
|
-
div({ class: 'container-fluid' })([
|
|
33
|
-
div({ class: 'navbar-header' })(
|
|
34
|
-
a({ class: 'navbar-brand', href: '#' })(
|
|
35
|
-
'Website Name'
|
|
36
|
-
)
|
|
37
|
-
),
|
|
38
|
-
ul({ class: 'nav navbar-nav' })(
|
|
39
|
-
li({ class: 'active' })(
|
|
40
|
-
Link('Home', '/')
|
|
41
|
-
),
|
|
42
|
-
li(
|
|
43
|
-
Link('Abc', '/abc')
|
|
44
|
-
),
|
|
45
|
-
li(
|
|
46
|
-
Link('Haha', '/haha')
|
|
47
|
-
),
|
|
48
|
-
li(
|
|
49
|
-
a('Page 3')
|
|
50
|
-
)
|
|
51
|
-
)
|
|
52
|
-
])
|
|
53
|
-
)
|
|
54
|
-
)
|
|
55
|
-
),
|
|
56
|
-
function (thisEl) {
|
|
57
|
-
setTimeout(function() {
|
|
58
|
-
console.log('>>> Page Header:', thisEl);
|
|
59
|
-
}, 1000);
|
|
60
|
-
}
|
|
61
|
-
);
|
|
62
|
-
|
|
63
|
-
return PageHeader;
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
var div = Binh.el('div'),
|
|
67
|
-
nav = Binh.el('nav'),
|
|
68
|
-
ul = Binh.el('ul'),
|
|
69
|
-
li = Binh.el('li'),
|
|
70
|
-
a = Binh.el('a');
|
|
71
|
-
|
|
72
|
-
}();
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
!function(){
|
|
4
|
-
|
|
5
|
-
ToDoItemStyle2 = Binh.style('/styles/ToDoItemStyle2.js', function anonymous(
|
|
6
|
-
) {
|
|
7
|
-
return "@charset \"utf-8\"; @import url(\"/styles/temp.css\"); /* .btn-remove { color: blue; margin-left: '15px'; } */ @media (min-width: 800px) { .btn-remove { color: red; margin-left: '15px'; } } @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @page { size: 8.5in 9in; margin-top: 4in; }";
|
|
8
|
-
});
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}();
|
|
12
|
-
|
|
13
|
-
var ToDoItemStyle2;
|
|
14
|
-
|
|
15
|
-
Binh.ui(function main(props) {
|
|
16
|
-
// var ToDoItemStyle = Binh.style('/styles/todo.css');
|
|
17
|
-
|
|
18
|
-
var todoitem = div({ style: 'margin: 3px;' });
|
|
19
|
-
var removeToDoItem = todoitem.action('remove');
|
|
20
|
-
|
|
21
|
-
var remove_button = span({ class: 'btn-remove' })('X');
|
|
22
|
-
|
|
23
|
-
remove_button.on('click', function() {
|
|
24
|
-
removeToDoItem(props.id);
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
todoitem(span(props.text), span('-------'), remove_button);
|
|
28
|
-
|
|
29
|
-
// return todoitem.style(ToDoItemStyle);
|
|
30
|
-
// return todoitem.style('styles/todo.css');
|
|
31
|
-
return todoitem.style(ToDoItemStyle2);
|
|
32
|
-
// return todoitem.style(todo);
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
var div = Binh.el('div'),
|
|
36
|
-
span = Binh.el('span');
|
|
37
|
-
|
|
38
|
-
}();
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Binh.service(function(define, state, http) {
|
|
5
|
-
var todos = state.as('todos');
|
|
6
|
-
|
|
7
|
-
todos.schema(function(resolve) {
|
|
8
|
-
new http(api('get'))
|
|
9
|
-
.get(function(response) {
|
|
10
|
-
resolve(parseResponse(response));
|
|
11
|
-
});
|
|
12
|
-
});
|
|
13
|
-
|
|
14
|
-
function handleResponse(response) {
|
|
15
|
-
todos.set(parseResponse(response));
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function parseResponse(response) {
|
|
19
|
-
var todoitems = [];
|
|
20
|
-
|
|
21
|
-
Object.keys(response).forEach(function(key) {
|
|
22
|
-
var each = response[key];
|
|
23
|
-
todoitems.push({ id: key, text: each.text });
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
return todoitems;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
define('add', function(value) {
|
|
30
|
-
new http(api('add'))
|
|
31
|
-
.body({ text: value })
|
|
32
|
-
.post(handleResponse);
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
define('remove', function(id) {
|
|
36
|
-
new http(api('remove'))
|
|
37
|
-
.body({ id: id })
|
|
38
|
-
.post(handleResponse);
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
function api(relative_url) {
|
|
42
|
-
return 'https://todolist-of-binh.fly.dev/todos/' + relative_url;
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}();
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Binh.style(function(css) {
|
|
5
|
-
// css('@charset "utf-8";');
|
|
6
|
-
|
|
7
|
-
css(`@import url("styles/temp.css");`);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
css('.btn-remove', [
|
|
11
|
-
'color: purple;',
|
|
12
|
-
'margin-left: 10px'
|
|
13
|
-
]);
|
|
14
|
-
|
|
15
|
-
css(
|
|
16
|
-
`@media (min-width: 800px) {
|
|
17
|
-
.btn-remove {
|
|
18
|
-
color: red;
|
|
19
|
-
margin-left: '15px';
|
|
20
|
-
}
|
|
21
|
-
}`
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
css(`
|
|
25
|
-
@keyframes slidein {
|
|
26
|
-
from {
|
|
27
|
-
transform: translateX(0%);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
to {
|
|
31
|
-
transform: translateX(100%);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
`);
|
|
35
|
-
|
|
36
|
-
css(`
|
|
37
|
-
@page {
|
|
38
|
-
size: 8.5in 9in;
|
|
39
|
-
margin-top: 4in;
|
|
40
|
-
}
|
|
41
|
-
`);
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}();
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Binh.style(function anonymous(
|
|
5
|
-
) {
|
|
6
|
-
return "@charset \"utf-8\"; @import url(\"/styles/temp.css\"); /* .btn-remove { color: blue; margin-left: '15px'; } */ @media (min-width: 800px) { .btn-remove { color: red; margin-left: '15px'; } } @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @page { size: 8.5in 9in; margin-top: 4in; }";
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}();
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
@charset "utf-8";
|
|
2
|
-
|
|
3
|
-
@import url("/styles/temp.css");
|
|
4
|
-
|
|
5
|
-
/* .btn-remove {
|
|
6
|
-
color: blue;
|
|
7
|
-
margin-left: '15px';
|
|
8
|
-
} */
|
|
9
|
-
|
|
10
|
-
@media (min-width: 800px) {
|
|
11
|
-
|
|
12
|
-
.btn-remove {
|
|
13
|
-
color: red;
|
|
14
|
-
margin-left: '15px';
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@keyframes slidein {
|
|
19
|
-
from {
|
|
20
|
-
transform: translateX(0%);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
to {
|
|
24
|
-
transform: translateX(100%);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
@page {
|
|
29
|
-
size: 8.5in 9in;
|
|
30
|
-
margin-top: 4in;
|
|
31
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
!function(){
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Binh.style(function anonymous(
|
|
5
|
-
) {
|
|
6
|
-
return "@charset \"utf-8\"; @import url(\"/styles/temp.css\"); /* .btn-remove { color: blue; margin-left: '15px'; } */ @media (min-width: 800px) { .btn-remove { color: red; margin-left: '15px'; } } @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @page { size: 8.5in 9in; margin-top: 4in; }";
|
|
7
|
-
});
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}();
|