Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9748774

Browse files
committed
add example todomvc
1 parentd1e8bfc commit9748774

File tree

12 files changed

+392
-0
lines changed

12 files changed

+392
-0
lines changed

‎examples/todomvc/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#TodoMVC App
2+
3+
This app is based onhttps://todomvc.com and contains an implementation of it.
4+
5+
Go into this folder___examples/todomvc/___ and install the dependencies from the command line:
6+
```bash
7+
npm install
8+
```
9+
10+
Compile templates:
11+
```bash
12+
npm run compile
13+
```
14+
15+
Start Webserver:
16+
```bash
17+
npm run server
18+
```
19+
20+
Open your browser and go to the URL displayed in the console`http://localhost:8080`.

‎examples/todomvc/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<htmllang="en">
3+
<head>
4+
<metacharset="utf-8">
5+
<metaname="viewport"content="width=device-width, initial-scale=1">
6+
<title>Mikado • TodoMVC</title>
7+
<linkrel="stylesheet"href="node_modules/todomvc-common/base.css">
8+
<linkrel="stylesheet"href="node_modules/todomvc-app-css/index.css">
9+
<scriptsrc="node_modules/todomvc-common/base.js"async></script>
10+
<scripttype="module"src="js/main.js"async></script>
11+
</head>
12+
<body><!----></body>
13+
</html>

‎examples/todomvc/js/app.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
importMikadofrom"../node_modules/mikado/dist/mikado.bundle.module.min.js";
2+
importtpl_appfrom"../template/app.js";
3+
4+
// optionally enable event cache when complex event delegation was used
5+
// like forwarding the event target to as custom root
6+
Mikado.eventCache=true;
7+
8+
// get saved data from local storage
9+
exportconsttodos=JSON.parse(localStorage.getItem("todos"))||[];
10+
11+
// create the app view instance, also
12+
// mount the app view to a render destination target
13+
exportconstapp=newMikado(tpl_app,{
14+
mount:document.body,
15+
recycle:true,
16+
cache:true
17+
});
18+
19+
// the initial render is triggered by the controller withing "main.js"
20+
// accordingly to the requested url location

‎examples/todomvc/js/controller.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import{app,todos}from"./app.js";
2+
3+
// an application controller connecting the
4+
// routes and the app view by also applying logic
5+
6+
exportdefaultfunction(route,target){
7+
8+
if(route){
9+
10+
if(target){
11+
12+
window.location.hash=route;
13+
}
14+
15+
route=route.substring(2);
16+
}
17+
18+
app.state.filter=route||"all";
19+
updateApp();
20+
}
21+
22+
app.state.is_visible=function(data){
23+
24+
constfilter=app.state.filter;
25+
26+
returnfilter==="all"||
27+
(filter==="completed"&&data.completed)||
28+
(filter==="active"&&!data.completed)
29+
};
30+
31+
exportfunctionupdateApp(){
32+
33+
app.state.left=filterBy("active").length;
34+
app.state.completed=todos.length-app.state.left;
35+
app.render({ todos});
36+
37+
localStorage.setItem("todos",JSON.stringify(todos));
38+
}
39+
40+
functionfilterBy(filter){
41+
42+
returnfilter==="all"
43+
?todos
44+
:todos.filter(item=>item.completed===(filter==="completed"));
45+
}

‎examples/todomvc/js/helper.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
exportfunction$(query,ctx){
2+
3+
return(ctx||document).querySelector(query);
4+
}
5+
6+
exportfunction$$(query,ctx){
7+
8+
return(ctx||document).querySelectorAll(query);
9+
}

‎examples/todomvc/js/main.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// import routes to apply listener
2+
import"./route.js";
3+
importcontrollerfrom"./controller.js";
4+
5+
// assign app controller to the location listener + run once
6+
(window.onpopstate=function(){
7+
controller(location.hash);
8+
})();

‎examples/todomvc/js/route.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
importMikadofrom"../node_modules/mikado/dist/mikado.bundle.module.min.js";
2+
import{todos}from"./app.js";
3+
import{updateApp}from"./controller.js";
4+
import{$}from"./helper.js";
5+
6+
/**@enum {Number} */
7+
constKEYS={ENTER:13,ESC:27};
8+
9+
Mikado.route("new-todo",function(target,event){
10+
11+
switch(event.which||event.keyCode){
12+
13+
caseKEYS.ENTER:
14+
15+
constvalue=target.value.trim();
16+
17+
if(value){
18+
19+
todos.push({
20+
"id":todos.length,
21+
"title":value,
22+
"completed":false
23+
});
24+
25+
updateApp();
26+
}
27+
28+
//fallthrough:
29+
30+
caseKEYS.ESC:
31+
32+
target.value="";
33+
}
34+
})
35+
36+
.route("enter-edit-mode",function(target,event){
37+
38+
constinput=$("input.edit",target);
39+
constself=event.target;
40+
41+
Mikado.setClass(target,"editing");
42+
input.value=Mikado.getText(self);
43+
input.focus();
44+
})
45+
46+
.route("edit",function(target,event){
47+
48+
switch(event.which||event.keyCode||KEYS.ESC){
49+
50+
caseKEYS.ENTER:
51+
52+
constindex=Mikado.getAttribute(target,"data-index");
53+
constself=event.target;
54+
constvalue=self.value.trim();
55+
56+
// when empty or changed
57+
if(!value||todos[index].title!==value){
58+
59+
if(value){
60+
61+
todos[index].title=value;
62+
}
63+
else{
64+
65+
todos.splice(index,1);
66+
}
67+
68+
updateApp();
69+
}
70+
71+
//fallthrough:
72+
73+
caseKEYS.ESC:
74+
75+
Mikado.setClass(target,"");
76+
}
77+
})
78+
79+
.route("update-state",function(target,event){
80+
81+
constindex=Mikado.getAttribute(target,"data-index");
82+
todos[index].completed=event.target.checked;
83+
updateApp();
84+
})
85+
86+
.route("clear-completed",function(){
87+
88+
for(leti=0;i<todos.length;i++){
89+
90+
todos[i].completed&&
91+
todos.splice(i--,1);
92+
}
93+
94+
updateApp();
95+
})
96+
97+
.route("toggle-all",function(target){
98+
99+
todos.forEach(todo=>todo.completed=target.checked);
100+
updateApp();
101+
})
102+
103+
.route("delete",function(target){
104+
105+
constindex=Mikado.getAttribute(target,"data-index");
106+
todos.splice(index,1);
107+
updateApp();
108+
});

‎examples/todomvc/package-lock.json‎

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎examples/todomvc/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"private":true,
3+
"scripts": {
4+
"compile":"npx mikado-compile template/ --compact --force --module",
5+
"server":"node task/server.js"
6+
},
7+
"dependencies": {
8+
"mikado":"^0.8.227",
9+
"todomvc-app-css":"^2.4.3",
10+
"todomvc-common":"^1.0.5"
11+
}
12+
}

‎examples/todomvc/task/server.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
consthttp=require("http");
2+
consturl=require("url");
3+
constfs=require("fs");
4+
constpath=require("path");
5+
constbaseDir=path.resolve(__dirname+"/../");
6+
7+
consthttpServer=http.createServer((request,response)=>{
8+
9+
constparsedUrl=url.parse(request.url,true);
10+
constpathName=parsedUrl.pathname+(request.url.endsWith("/") ?"index.html" :"");
11+
12+
// Get the contentType based on the file extension
13+
constresponseContentType=getContentType(pathName);
14+
// Set the "Content-Type" in response header
15+
response.setHeader("Content-Type",responseContentType);
16+
17+
fs.readFile(baseDir+pathName,function(error,data){
18+
19+
if(error){
20+
21+
console.error(error);
22+
response.writeHead(404);
23+
response.end("404 - File Not Found");
24+
}
25+
else{
26+
27+
response.writeHead(200);
28+
response.end(data);
29+
}
30+
});
31+
});
32+
33+
/**@enum {string} */
34+
constmimeTypes={
35+
".html":"text/html",
36+
".jgp":"image/jpeg",
37+
".css":"text/css",
38+
".svg":"image/svg",
39+
".js":"text/javascript",
40+
".png":"image/png",
41+
".ico":"image/x-icon"
42+
};
43+
44+
// Get the content type for a given path
45+
constgetContentType=pathName=>{
46+
// Set the default content type
47+
letcontentType="application/octet-stream";
48+
49+
// Set the contentType based on mime type
50+
for(constkeyinmimeTypes){
51+
52+
if(newRegExp("\\"+key+"(\\?|$)").test(pathName)){
53+
54+
contentType=mimeTypes[key];
55+
}
56+
}
57+
returncontentType;
58+
};
59+
60+
functioninit(port,host){
61+
62+
httpServer.listen(port,function(){
63+
64+
console.log(`\x1b[32m%s\x1b[0m`,`Server is running at http://${host}:${port}`);
65+
});
66+
}
67+
68+
init(8080,"localhost");

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp