-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (120 loc) · 3.42 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Dmitry Sharabin" />
<title>Mavo • TodoMVC</title>
<script src="https://dev.mavo.io/dist/mavo.es5.min.js"></script>
<link rel="stylesheet" href="https://dev.mavo.io/dist/mavo.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<section
mv-app="todoapp"
mv-bar="none"
mv-storage="local"
mv-autosave="3"
mv-source="#data"
class="todoapp mv-autoedit"
>
<header class="header">
<h1>todos</h1>
<form
mv-action="set(newTodo, newTodo.trim()), if(newTodo != '', add(newTodo, todo) & set(newTodo, ''))"
>
<input
property="newTodo"
class="new-todo"
placeholder="What needs to be done?"
autofocus
/>
</form>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section hidden="[count(todo) = 0]" class="main">
<input
property="toggleAll"
id="toggle-all"
class="toggle-all"
type="checkbox"
checked="[todoLeft = 0]"
/>
<label for="toggle-all" mv-action="set(done, !toggleAll)">
Mark all as complete
</label>
<ul class="todo-list">
<li
mv-multiple="todo"
class="[if(done, 'completed')]"
hidden="[(done and activeFilter = 'active') or (!done and activeFilter = 'completed')]"
>
<div class="view">
<input property="done" class="toggle" type="checkbox" />
<label property="text">Taste JavaScript</label>
<button class="destroy" mv-action="delete(todo)"></button>
</div>
</li>
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer hidden="[count(todo) = 0]" class="footer">
<meta property="todoDone" content="[count(todo where done)]" />
<meta property="todoLeft" content="[count(todo where !done)]" />
<!-- This should be `0 items left` by default -->
<span class="todo-count">
<strong mv-value="todoLeft">0</strong>
[if(todoLeft = 1, 'item', 'items')] left
</span>
<meta property="activeFilter" content="all" mv-storage="none" />
<ul class="filters">
<li>
<a
class="[if(activeFilter = 'all', 'selected')]"
mv-action="set(activeFilter, 'all')"
>All</a
>
</li>
<li>
<a
class="[if(activeFilter = 'active', 'selected')]"
mv-action="set(activeFilter, 'active')"
>Active</a
>
</li>
<li>
<a
class="[if(activeFilter = 'completed', 'selected')]"
mv-action="set(activeFilter, 'completed')"
>Completed</a
>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button
hidden="[todoDone = 0]"
class="clear-completed"
mv-action="delete(todo where done)"
>
Clear completed
</button>
</footer>
</section>
<footer class="info">
<p>Click to edit a todo</p>
<p>Created by <a href="https://d12n.me/">Dmitry Sharabin</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<div id="data" hidden>
{
"todo": [
{ "text": "Taste JavaScript", "done": true },
{ "text": "Code furiously", "done": true },
{ "text": "Promote Mavo", "done": false },
{ "text": "Give talks", "done": false },
{ "text": "Write tutorials", "done": true },
{ "text": "Have a life!", "done": false }
]
}
</div>
</body>
</html>