Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
todomvc
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Eugene Shen
todomvc
Commits
e04ad246
Commit
e04ad246
authored
Jul 12, 2015
by
Arthur Verschaeve
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Update the dart example to `todomvc-app-css@2.0`
This includes the change from ids to classes
parent
ca0d44d1
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
86 additions
and
86 deletions
+86
-86
examples/vanilladart/build/web/dart/app.dart.js
examples/vanilladart/build/web/dart/app.dart.js
+2
-2
examples/vanilladart/build/web/index.html
examples/vanilladart/build/web/index.html
+11
-11
examples/vanilladart/node_modules/todomvc-app-css/index.css
examples/vanilladart/node_modules/todomvc-app-css/index.css
+51
-51
examples/vanilladart/package.json
examples/vanilladart/package.json
+1
-1
examples/vanilladart/web/dart/TodoApp.dart
examples/vanilladart/web/dart/TodoApp.dart
+10
-10
examples/vanilladart/web/index.html
examples/vanilladart/web/index.html
+11
-11
No files found.
examples/vanilladart/build/web/dart/app.dart.js
View file @
e04ad246
...
@@ -4365,7 +4365,7 @@ if(z!=null)try{y=C.xr.kV(z)
...
@@ -4365,7 +4365,7 @@ if(z!=null)try{y=C.xr.kV(z)
J
.
kH
(
y
,
new
Y
.
nv
(
this
))}
catch
(
x
){
H
.
Ru
(
x
)
J
.
kH
(
y
,
new
Y
.
nv
(
this
))}
catch
(
x
){
H
.
Ru
(
x
)
P
.
JS
(
"
Could not load todos form local storage.
"
)}},
P
.
JS
(
"
Could not load todos form local storage.
"
)}},
XY
:
function
(){
var
z
,
y
XY
:
function
(){
var
z
,
y
z
=
document
.
querySelector
(
"
#
new-todo
"
)
z
=
document
.
querySelector
(
"
.
new-todo
"
)
y
=
J
.
Zm
(
z
)
y
=
J
.
Zm
(
z
)
H
.
J
(
new
W
.
O
(
0
,
y
.
Q
,
y
.
a
,
W
.
V
(
new
Y
.
f1
(
this
,
z
)),
y
.
b
),[
H
.
N
(
y
,
0
)]).
Z
()
H
.
J
(
new
W
.
O
(
0
,
y
.
Q
,
y
.
a
,
W
.
V
(
new
Y
.
f1
(
this
,
z
)),
y
.
b
),[
H
.
N
(
y
,
0
)]).
Z
()
y
=
J
.
Vg
(
this
.
c
)
y
=
J
.
Vg
(
this
.
c
)
...
@@ -4429,7 +4429,7 @@ this.XY()
...
@@ -4429,7 +4429,7 @@ this.XY()
var
z
=
H
.
J
(
new
W
.
R
(
window
,
"
hashchange
"
,
!
1
),[
null
])
var
z
=
H
.
J
(
new
W
.
R
(
window
,
"
hashchange
"
,
!
1
),[
null
])
H
.
J
(
new
W
.
O
(
0
,
z
.
Q
,
z
.
a
,
W
.
V
(
new
Y
.
T
(
this
)),
z
.
b
),[
H
.
N
(
z
,
0
)]).
Z
()
H
.
J
(
new
W
.
O
(
0
,
z
.
Q
,
z
.
a
,
W
.
V
(
new
Y
.
T
(
this
)),
z
.
b
),[
H
.
N
(
z
,
0
)]).
Z
()
this
.
xG
()},
this
.
xG
()},
static
:{
P
:
function
(){
var
z
=
new
Y
.
W
(
H
.
J
([],[
Y
.
S
]),
document
.
querySelector
(
"
#todo-list
"
),
document
.
querySelector
(
"
#main
"
),
document
.
querySelector
(
"
#toggle-all
"
),
document
.
querySelector
(
"
#footer
"
),
document
.
querySelector
(
"
#todo-count
"
),
document
.
querySelector
(
"
#clear-completed
"
),
document
.
querySelector
(
"
#filters a[href=
\"
#/
\"
]
"
),
document
.
querySelector
(
"
#filters a[href=
\"
#/active
\"
]
"
),
document
.
querySelector
(
"
#
filters a[href=
\"
#/completed
\"
]
"
))
static
:{
P
:
function
(){
var
z
=
new
Y
.
W
(
H
.
J
([],[
Y
.
S
]),
document
.
querySelector
(
"
.todo-list
"
),
document
.
querySelector
(
"
.main
"
),
document
.
querySelector
(
"
.toggle-all
"
),
document
.
querySelector
(
"
.footer
"
),
document
.
querySelector
(
"
.todo-count
"
),
document
.
querySelector
(
"
.clear-completed
"
),
document
.
querySelector
(
"
.filters a[href=
\"
#/
\"
]
"
),
document
.
querySelector
(
"
.filters a[href=
\"
#/active
\"
]
"
),
document
.
querySelector
(
"
.
filters a[href=
\"
#/completed
\"
]
"
))
z
.
Y
()
z
.
Y
()
return
z
}}},
return
z
}}},
T
:{
T
:{
...
...
examples/vanilladart/build/web/index.html
View file @
e04ad246
...
@@ -7,19 +7,19 @@
...
@@ -7,19 +7,19 @@
<link
rel=
"stylesheet"
href=
"../../node_modules/todomvc-app-css/index.css"
>
<link
rel=
"stylesheet"
href=
"../../node_modules/todomvc-app-css/index.css"
>
</head>
</head>
<body>
<body>
<section
id
=
"todoapp"
>
<section
class
=
"todoapp"
>
<header
id
=
"header"
>
<header
class
=
"header"
>
<h1>
todos
</h1>
<h1>
todos
</h1>
<input
id
=
"new-todo"
placeholder=
"What needs to be done?"
autofocus
>
<input
class
=
"new-todo"
placeholder=
"What needs to be done?"
autofocus
>
</header>
</header>
<section
id
=
"main"
>
<section
class
=
"main"
>
<input
id
=
"toggle-all"
type=
"checkbox"
>
<input
class
=
"toggle-all"
type=
"checkbox"
>
<label
for=
"toggle-all"
>
Mark all as complete
</label>
<label
for=
"toggle-all"
>
Mark all as complete
</label>
<ul
id
=
"todo-list"
></ul>
<ul
class
=
"todo-list"
></ul>
</section>
</section>
<footer
id
=
"footer"
>
<footer
class
=
"footer"
>
<span
id
=
"todo-count"
><strong>
0
</strong>
item left
</span>
<span
class
=
"todo-count"
><strong>
0
</strong>
item left
</span>
<ul
id
=
"filters"
>
<ul
class
=
"filters"
>
<li>
<li>
<a
class=
"selected"
href=
"#/"
>
All
</a>
<a
class=
"selected"
href=
"#/"
>
All
</a>
</li>
</li>
...
@@ -30,10 +30,10 @@
...
@@ -30,10 +30,10 @@
<a
href=
"#/completed"
>
Completed
</a>
<a
href=
"#/completed"
>
Completed
</a>
</li>
</li>
</ul>
</ul>
<button
id
=
"clear-completed"
>
Clear completed
</button>
<button
class
=
"clear-completed"
>
Clear completed
</button>
</footer>
</footer>
</section>
</section>
<footer
id
=
"info"
>
<footer
class
=
"info"
>
<p>
Double-click to edit a todo
</p>
<p>
Double-click to edit a todo
</p>
<p>
Created by
<a
href=
"http://mlorber.net"
>
Mathieu Lorber
</a></p>
<p>
Created by
<a
href=
"http://mlorber.net"
>
Mathieu Lorber
</a></p>
<p>
Part of
<a
href=
"http://todomvc.com"
>
TodoMVC
</a></p>
<p>
Part of
<a
href=
"http://todomvc.com"
>
TodoMVC
</a></p>
...
...
examples/vanilladart/node_modules/todomvc-app-css/index.css
View file @
e04ad246
...
@@ -44,7 +44,7 @@ input[type="checkbox"] {
...
@@ -44,7 +44,7 @@ input[type="checkbox"] {
display
:
none
;
display
:
none
;
}
}
#
todoapp
{
.
todoapp
{
background
:
#fff
;
background
:
#fff
;
margin
:
130px
0
40px
0
;
margin
:
130px
0
40px
0
;
position
:
relative
;
position
:
relative
;
...
@@ -52,25 +52,25 @@ input[type="checkbox"] {
...
@@ -52,25 +52,25 @@ input[type="checkbox"] {
0
25px
50px
0
rgba
(
0
,
0
,
0
,
0.1
);
0
25px
50px
0
rgba
(
0
,
0
,
0
,
0.1
);
}
}
#
todoapp
input
::-webkit-input-placeholder
{
.
todoapp
input
::-webkit-input-placeholder
{
font-style
:
italic
;
font-style
:
italic
;
font-weight
:
300
;
font-weight
:
300
;
color
:
#e6e6e6
;
color
:
#e6e6e6
;
}
}
#
todoapp
input
::-moz-placeholder
{
.
todoapp
input
::-moz-placeholder
{
font-style
:
italic
;
font-style
:
italic
;
font-weight
:
300
;
font-weight
:
300
;
color
:
#e6e6e6
;
color
:
#e6e6e6
;
}
}
#
todoapp
input
::input-placeholder
{
.
todoapp
input
::input-placeholder
{
font-style
:
italic
;
font-style
:
italic
;
font-weight
:
300
;
font-weight
:
300
;
color
:
#e6e6e6
;
color
:
#e6e6e6
;
}
}
#
todoapp
h1
{
.
todoapp
h1
{
position
:
absolute
;
position
:
absolute
;
top
:
-155px
;
top
:
-155px
;
width
:
100%
;
width
:
100%
;
...
@@ -83,7 +83,7 @@ input[type="checkbox"] {
...
@@ -83,7 +83,7 @@ input[type="checkbox"] {
text-rendering
:
optimizeLegibility
;
text-rendering
:
optimizeLegibility
;
}
}
#
new-todo
,
.
new-todo
,
.edit
{
.edit
{
position
:
relative
;
position
:
relative
;
margin
:
0
;
margin
:
0
;
...
@@ -104,14 +104,14 @@ input[type="checkbox"] {
...
@@ -104,14 +104,14 @@ input[type="checkbox"] {
font-smoothing
:
antialiased
;
font-smoothing
:
antialiased
;
}
}
#
new-todo
{
.
new-todo
{
padding
:
16px
16px
16px
60px
;
padding
:
16px
16px
16px
60px
;
border
:
none
;
border
:
none
;
background
:
rgba
(
0
,
0
,
0
,
0.003
);
background
:
rgba
(
0
,
0
,
0
,
0.003
);
box-shadow
:
inset
0
-2px
1px
rgba
(
0
,
0
,
0
,
0.03
);
box-shadow
:
inset
0
-2px
1px
rgba
(
0
,
0
,
0
,
0.03
);
}
}
#
main
{
.
main
{
position
:
relative
;
position
:
relative
;
z-index
:
2
;
z-index
:
2
;
border-top
:
1px
solid
#e6e6e6
;
border-top
:
1px
solid
#e6e6e6
;
...
@@ -121,7 +121,7 @@ label[for='toggle-all'] {
...
@@ -121,7 +121,7 @@ label[for='toggle-all'] {
display
:
none
;
display
:
none
;
}
}
#
toggle-all
{
.
toggle-all
{
position
:
absolute
;
position
:
absolute
;
top
:
-55px
;
top
:
-55px
;
left
:
-12px
;
left
:
-12px
;
...
@@ -131,50 +131,50 @@ label[for='toggle-all'] {
...
@@ -131,50 +131,50 @@ label[for='toggle-all'] {
border
:
none
;
/* Mobile Safari */
border
:
none
;
/* Mobile Safari */
}
}
#
toggle-all
:before
{
.
toggle-all
:before
{
content
:
'❯'
;
content
:
'❯'
;
font-size
:
22px
;
font-size
:
22px
;
color
:
#e6e6e6
;
color
:
#e6e6e6
;
padding
:
10px
27px
10px
27px
;
padding
:
10px
27px
10px
27px
;
}
}
#
toggle-all
:checked:before
{
.
toggle-all
:checked:before
{
color
:
#737373
;
color
:
#737373
;
}
}
#
todo-list
{
.
todo-list
{
margin
:
0
;
margin
:
0
;
padding
:
0
;
padding
:
0
;
list-style
:
none
;
list-style
:
none
;
}
}
#
todo-list
li
{
.
todo-list
li
{
position
:
relative
;
position
:
relative
;
font-size
:
24px
;
font-size
:
24px
;
border-bottom
:
1px
solid
#ededed
;
border-bottom
:
1px
solid
#ededed
;
}
}
#
todo-list
li
:last-child
{
.
todo-list
li
:last-child
{
border-bottom
:
none
;
border-bottom
:
none
;
}
}
#
todo-list
li
.editing
{
.
todo-list
li
.editing
{
border-bottom
:
none
;
border-bottom
:
none
;
padding
:
0
;
padding
:
0
;
}
}
#
todo-list
li
.editing
.edit
{
.
todo-list
li
.editing
.edit
{
display
:
block
;
display
:
block
;
width
:
506px
;
width
:
506px
;
padding
:
13px
17px
12px
17px
;
padding
:
13px
17px
12px
17px
;
margin
:
0
0
0
43px
;
margin
:
0
0
0
43px
;
}
}
#
todo-list
li
.editing
.view
{
.
todo-list
li
.editing
.view
{
display
:
none
;
display
:
none
;
}
}
#
todo-list
li
.toggle
{
.
todo-list
li
.toggle
{
text-align
:
center
;
text-align
:
center
;
width
:
40px
;
width
:
40px
;
/* auto, since non-WebKit browsers doesn't support input styling */
/* auto, since non-WebKit browsers doesn't support input styling */
...
@@ -188,15 +188,15 @@ label[for='toggle-all'] {
...
@@ -188,15 +188,15 @@ label[for='toggle-all'] {
appearance
:
none
;
appearance
:
none
;
}
}
#
todo-list
li
.toggle
:after
{
.
todo-list
li
.toggle
:after
{
content
:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>')
;
content
:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>')
;
}
}
#
todo-list
li
.toggle
:checked:after
{
.
todo-list
li
.toggle
:checked:after
{
content
:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>')
;
content
:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>')
;
}
}
#
todo-list
li
label
{
.
todo-list
li
label
{
white-space
:
pre
;
white-space
:
pre
;
word-break
:
break-word
;
word-break
:
break-word
;
padding
:
15px
60px
15px
15px
;
padding
:
15px
60px
15px
15px
;
...
@@ -206,12 +206,12 @@ label[for='toggle-all'] {
...
@@ -206,12 +206,12 @@ label[for='toggle-all'] {
transition
:
color
0.4s
;
transition
:
color
0.4s
;
}
}
#
todo-list
li
.completed
label
{
.
todo-list
li
.completed
label
{
color
:
#d9d9d9
;
color
:
#d9d9d9
;
text-decoration
:
line-through
;
text-decoration
:
line-through
;
}
}
#
todo-list
li
.destroy
{
.
todo-list
li
.destroy
{
display
:
none
;
display
:
none
;
position
:
absolute
;
position
:
absolute
;
top
:
0
;
top
:
0
;
...
@@ -226,27 +226,27 @@ label[for='toggle-all'] {
...
@@ -226,27 +226,27 @@ label[for='toggle-all'] {
transition
:
color
0.2s
ease-out
;
transition
:
color
0.2s
ease-out
;
}
}
#
todo-list
li
.destroy
:hover
{
.
todo-list
li
.destroy
:hover
{
color
:
#af5b5e
;
color
:
#af5b5e
;
}
}
#
todo-list
li
.destroy
:after
{
.
todo-list
li
.destroy
:after
{
content
:
'×'
;
content
:
'×'
;
}
}
#
todo-list
li
:hover
.destroy
{
.
todo-list
li
:hover
.destroy
{
display
:
block
;
display
:
block
;
}
}
#
todo-list
li
.edit
{
.
todo-list
li
.edit
{
display
:
none
;
display
:
none
;
}
}
#
todo-list
li
.editing
:last-child
{
.
todo-list
li
.editing
:last-child
{
margin-bottom
:
-1px
;
margin-bottom
:
-1px
;
}
}
#
footer
{
.
footer
{
color
:
#777
;
color
:
#777
;
padding
:
10px
15px
;
padding
:
10px
15px
;
height
:
20px
;
height
:
20px
;
...
@@ -254,7 +254,7 @@ label[for='toggle-all'] {
...
@@ -254,7 +254,7 @@ label[for='toggle-all'] {
border-top
:
1px
solid
#e6e6e6
;
border-top
:
1px
solid
#e6e6e6
;
}
}
#
footer
:before
{
.
footer
:before
{
content
:
''
;
content
:
''
;
position
:
absolute
;
position
:
absolute
;
right
:
0
;
right
:
0
;
...
@@ -269,16 +269,16 @@ label[for='toggle-all'] {
...
@@ -269,16 +269,16 @@ label[for='toggle-all'] {
0
17px
2px
-6px
rgba
(
0
,
0
,
0
,
0.2
);
0
17px
2px
-6px
rgba
(
0
,
0
,
0
,
0.2
);
}
}
#
todo-count
{
.
todo-count
{
float
:
left
;
float
:
left
;
text-align
:
left
;
text-align
:
left
;
}
}
#
todo-count
strong
{
.
todo-count
strong
{
font-weight
:
300
;
font-weight
:
300
;
}
}
#
filters
{
.
filters
{
margin
:
0
;
margin
:
0
;
padding
:
0
;
padding
:
0
;
list-style
:
none
;
list-style
:
none
;
...
@@ -287,11 +287,11 @@ label[for='toggle-all'] {
...
@@ -287,11 +287,11 @@ label[for='toggle-all'] {
left
:
0
;
left
:
0
;
}
}
#
filters
li
{
.
filters
li
{
display
:
inline
;
display
:
inline
;
}
}
#
filters
li
a
{
.
filters
li
a
{
color
:
inherit
;
color
:
inherit
;
margin
:
3px
;
margin
:
3px
;
padding
:
3px
7px
;
padding
:
3px
7px
;
...
@@ -300,17 +300,17 @@ label[for='toggle-all'] {
...
@@ -300,17 +300,17 @@ label[for='toggle-all'] {
border-radius
:
3px
;
border-radius
:
3px
;
}
}
#
filters
li
a
.selected
,
.
filters
li
a
.selected
,
#
filters
li
a
:hover
{
.
filters
li
a
:hover
{
border-color
:
rgba
(
175
,
47
,
47
,
0.1
);
border-color
:
rgba
(
175
,
47
,
47
,
0.1
);
}
}
#
filters
li
a
.selected
{
.
filters
li
a
.selected
{
border-color
:
rgba
(
175
,
47
,
47
,
0.2
);
border-color
:
rgba
(
175
,
47
,
47
,
0.2
);
}
}
#
clear-completed
,
.
clear-completed
,
html
#
clear-completed
:active
{
html
.
clear-completed
:active
{
float
:
right
;
float
:
right
;
position
:
relative
;
position
:
relative
;
line-height
:
20px
;
line-height
:
20px
;
...
@@ -319,11 +319,11 @@ html #clear-completed:active {
...
@@ -319,11 +319,11 @@ html #clear-completed:active {
position
:
relative
;
position
:
relative
;
}
}
#
clear-completed
:hover
{
.
clear-completed
:hover
{
text-decoration
:
underline
;
text-decoration
:
underline
;
}
}
#
info
{
.
info
{
margin
:
65px
auto
0
;
margin
:
65px
auto
0
;
color
:
#bfbfbf
;
color
:
#bfbfbf
;
font-size
:
10px
;
font-size
:
10px
;
...
@@ -331,17 +331,17 @@ html #clear-completed:active {
...
@@ -331,17 +331,17 @@ html #clear-completed:active {
text-align
:
center
;
text-align
:
center
;
}
}
#
info
p
{
.
info
p
{
line-height
:
1
;
line-height
:
1
;
}
}
#
info
a
{
.
info
a
{
color
:
inherit
;
color
:
inherit
;
text-decoration
:
none
;
text-decoration
:
none
;
font-weight
:
400
;
font-weight
:
400
;
}
}
#
info
a
:hover
{
.
info
a
:hover
{
text-decoration
:
underline
;
text-decoration
:
underline
;
}
}
...
@@ -350,16 +350,16 @@ html #clear-completed:active {
...
@@ -350,16 +350,16 @@ html #clear-completed:active {
Can't use it globally since it destroys checkboxes in Firefox
Can't use it globally since it destroys checkboxes in Firefox
*/
*/
@media
screen
and
(
-webkit-min-device-pixel-ratio
:
0
)
{
@media
screen
and
(
-webkit-min-device-pixel-ratio
:
0
)
{
#
toggle-all
,
.
toggle-all
,
#
todo-list
li
.toggle
{
.
todo-list
li
.toggle
{
background
:
none
;
background
:
none
;
}
}
#
todo-list
li
.toggle
{
.
todo-list
li
.toggle
{
height
:
40px
;
height
:
40px
;
}
}
#
toggle-all
{
.
toggle-all
{
-webkit-transform
:
rotate
(
90deg
);
-webkit-transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
-webkit-appearance
:
none
;
-webkit-appearance
:
none
;
...
@@ -368,11 +368,11 @@ html #clear-completed:active {
...
@@ -368,11 +368,11 @@ html #clear-completed:active {
}
}
@media
(
max-width
:
430px
)
{
@media
(
max-width
:
430px
)
{
#
footer
{
.
footer
{
height
:
50px
;
height
:
50px
;
}
}
#
filters
{
.
filters
{
bottom
:
10px
;
bottom
:
10px
;
}
}
}
}
examples/vanilladart/package.json
View file @
e04ad246
...
@@ -2,6 +2,6 @@
...
@@ -2,6 +2,6 @@
"private"
:
true
,
"private"
:
true
,
"dependencies"
:
{
"dependencies"
:
{
"todomvc-common"
:
"^1.0.0"
,
"todomvc-common"
:
"^1.0.0"
,
"todomvc-app-css"
:
"^
1
.0.0"
"todomvc-app-css"
:
"^
2
.0.0"
}
}
}
}
examples/vanilladart/web/dart/TodoApp.dart
View file @
e04ad246
...
@@ -3,16 +3,16 @@ part of todomvc;
...
@@ -3,16 +3,16 @@ part of todomvc;
class
TodoApp
{
class
TodoApp
{
List
<
TodoWidget
>
todoWidgets
=
new
List
<
TodoWidget
>();
List
<
TodoWidget
>
todoWidgets
=
new
List
<
TodoWidget
>();
Element
todoListElement
=
querySelector
(
'
#
todo-list'
);
Element
todoListElement
=
querySelector
(
'
.
todo-list'
);
Element
mainElement
=
querySelector
(
'
#
main'
);
Element
mainElement
=
querySelector
(
'
.
main'
);
InputElement
checkAllCheckboxElement
=
querySelector
(
'
#
toggle-all'
);
InputElement
checkAllCheckboxElement
=
querySelector
(
'
.
toggle-all'
);
Element
footerElement
=
querySelector
(
'
#
footer'
);
Element
footerElement
=
querySelector
(
'
.
footer'
);
Element
countElement
=
querySelector
(
'
#
todo-count'
);
Element
countElement
=
querySelector
(
'
.
todo-count'
);
Element
clearCompletedElement
=
querySelector
(
'
#
clear-completed'
);
Element
clearCompletedElement
=
querySelector
(
'
.
clear-completed'
);
Element
showAllElement
=
querySelector
(
'
#
filters a[href="#/"]'
);
Element
showAllElement
=
querySelector
(
'
.
filters a[href="#/"]'
);
Element
showActiveElement
=
querySelector
(
'
#
filters a[href="#/active"]'
);
Element
showActiveElement
=
querySelector
(
'
.
filters a[href="#/active"]'
);
Element
showCompletedElement
=
Element
showCompletedElement
=
querySelector
(
'
#
filters a[href="#/completed"]'
);
querySelector
(
'
.
filters a[href="#/completed"]'
);
TodoApp
()
{
TodoApp
()
{
initLocalStorage
();
initLocalStorage
();
...
@@ -36,7 +36,7 @@ class TodoApp {
...
@@ -36,7 +36,7 @@ class TodoApp {
}
}
void
initElementEventListeners
()
{
void
initElementEventListeners
()
{
InputElement
newTodoElement
=
querySelector
(
'
#
new-todo'
);
InputElement
newTodoElement
=
querySelector
(
'
.
new-todo'
);
newTodoElement
.
onKeyDown
.
listen
((
KeyboardEvent
e
)
{
newTodoElement
.
onKeyDown
.
listen
((
KeyboardEvent
e
)
{
if
(
e
.
keyCode
==
KeyCode
.
ENTER
)
{
if
(
e
.
keyCode
==
KeyCode
.
ENTER
)
{
...
...
examples/vanilladart/web/index.html
View file @
e04ad246
...
@@ -7,19 +7,19 @@
...
@@ -7,19 +7,19 @@
<link
rel=
"stylesheet"
href=
"../../node_modules/todomvc-app-css/index.css"
>
<link
rel=
"stylesheet"
href=
"../../node_modules/todomvc-app-css/index.css"
>
</head>
</head>
<body>
<body>
<section
id
=
"todoapp"
>
<section
class
=
"todoapp"
>
<header
id
=
"header"
>
<header
class
=
"header"
>
<h1>
todos
</h1>
<h1>
todos
</h1>
<input
id
=
"new-todo"
placeholder=
"What needs to be done?"
autofocus
>
<input
class
=
"new-todo"
placeholder=
"What needs to be done?"
autofocus
>
</header>
</header>
<section
id
=
"main"
>
<section
class
=
"main"
>
<input
id
=
"toggle-all"
type=
"checkbox"
>
<input
class
=
"toggle-all"
type=
"checkbox"
>
<label
for=
"toggle-all"
>
Mark all as complete
</label>
<label
for=
"toggle-all"
>
Mark all as complete
</label>
<ul
id
=
"todo-list"
></ul>
<ul
class
=
"todo-list"
></ul>
</section>
</section>
<footer
id
=
"footer"
>
<footer
class
=
"footer"
>
<span
id
=
"todo-count"
><strong>
0
</strong>
item left
</span>
<span
class
=
"todo-count"
><strong>
0
</strong>
item left
</span>
<ul
id
=
"filters"
>
<ul
class
=
"filters"
>
<li>
<li>
<a
class=
"selected"
href=
"#/"
>
All
</a>
<a
class=
"selected"
href=
"#/"
>
All
</a>
</li>
</li>
...
@@ -30,10 +30,10 @@
...
@@ -30,10 +30,10 @@
<a
href=
"#/completed"
>
Completed
</a>
<a
href=
"#/completed"
>
Completed
</a>
</li>
</li>
</ul>
</ul>
<button
id
=
"clear-completed"
>
Clear completed
</button>
<button
class
=
"clear-completed"
>
Clear completed
</button>
</footer>
</footer>
</section>
</section>
<footer
id
=
"info"
>
<footer
class
=
"info"
>
<p>
Double-click to edit a todo
</p>
<p>
Double-click to edit a todo
</p>
<p>
Created by
<a
href=
"http://mlorber.net"
>
Mathieu Lorber
</a></p>
<p>
Created by
<a
href=
"http://mlorber.net"
>
Mathieu Lorber
</a></p>
<p>
Part of
<a
href=
"http://todomvc.com"
>
TodoMVC
</a></p>
<p>
Part of
<a
href=
"http://todomvc.com"
>
TodoMVC
</a></p>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment