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
b8fb8864
Commit
b8fb8864
authored
Feb 24, 2014
by
Daniel Hug
Committed by
Sindre Sorhus
Feb 25, 2014
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
More VanillaJS app improvements - closes #863
parent
5c1a0455
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
119 additions
and
108 deletions
+119
-108
vanilla-examples/vanillajs/js/app.js
vanilla-examples/vanillajs/js/app.js
+5
-6
vanilla-examples/vanillajs/js/controller.js
vanilla-examples/vanillajs/js/controller.js
+87
-73
vanilla-examples/vanillajs/js/helpers.js
vanilla-examples/vanillajs/js/helpers.js
+6
-1
vanilla-examples/vanillajs/js/model.js
vanilla-examples/vanillajs/js/model.js
+1
-1
vanilla-examples/vanillajs/js/store.js
vanilla-examples/vanillajs/js/store.js
+15
-22
vanilla-examples/vanillajs/js/view.js
vanilla-examples/vanillajs/js/view.js
+5
-5
No files found.
vanilla-examples/vanillajs/js/app.js
View file @
b8fb8864
/*global app */
/*global app
, $on
*/
(
function
()
{
'
use strict
'
;
...
...
@@ -17,10 +17,9 @@
var
todo
=
new
Todo
(
'
todos-vanillajs
'
);
window
.
addEventListener
(
'
load
'
,
function
()
{
function
setView
()
{
todo
.
controller
.
setView
(
document
.
location
.
hash
);
}.
bind
(
this
));
window
.
addEventListener
(
'
hashchange
'
,
function
()
{
todo
.
controller
.
setView
(
document
.
location
.
hash
);
}.
bind
(
this
));
}
$on
(
window
,
'
load
'
,
setView
);
$on
(
window
,
'
hashchange
'
,
setView
);
})();
vanilla-examples/vanillajs/js/controller.js
View file @
b8fb8864
...
...
@@ -9,40 +9,41 @@
* @param {object} view The view instance
*/
function
Controller
(
model
,
view
)
{
this
.
model
=
model
;
this
.
view
=
view
;
var
that
=
this
;
that
.
model
=
model
;
that
.
view
=
view
;
th
is
.
view
.
bind
(
'
newTodo
'
,
function
(
title
)
{
th
is
.
addItem
(
title
);
}
.
bind
(
this
)
);
th
at
.
view
.
bind
(
'
newTodo
'
,
function
(
title
)
{
th
at
.
addItem
(
title
);
});
th
is
.
view
.
bind
(
'
itemEdit
'
,
function
(
item
)
{
th
is
.
editItem
(
item
.
id
);
}
.
bind
(
this
)
);
th
at
.
view
.
bind
(
'
itemEdit
'
,
function
(
item
)
{
th
at
.
editItem
(
item
.
id
);
});
th
is
.
view
.
bind
(
'
itemEditDone
'
,
function
(
item
)
{
th
is
.
editItemSave
(
item
.
id
,
item
.
title
);
}
.
bind
(
this
)
);
th
at
.
view
.
bind
(
'
itemEditDone
'
,
function
(
item
)
{
th
at
.
editItemSave
(
item
.
id
,
item
.
title
);
});
th
is
.
view
.
bind
(
'
itemEditCancel
'
,
function
(
item
)
{
th
is
.
editItemCancel
(
item
.
id
);
}
.
bind
(
this
)
);
th
at
.
view
.
bind
(
'
itemEditCancel
'
,
function
(
item
)
{
th
at
.
editItemCancel
(
item
.
id
);
});
th
is
.
view
.
bind
(
'
itemRemove
'
,
function
(
item
)
{
th
is
.
removeItem
(
item
.
id
);
}
.
bind
(
this
)
);
th
at
.
view
.
bind
(
'
itemRemove
'
,
function
(
item
)
{
th
at
.
removeItem
(
item
.
id
);
});
th
is
.
view
.
bind
(
'
itemToggle
'
,
function
(
item
)
{
th
is
.
toggleComplete
(
item
.
id
,
item
.
completed
);
}
.
bind
(
this
)
);
th
at
.
view
.
bind
(
'
itemToggle
'
,
function
(
item
)
{
th
at
.
toggleComplete
(
item
.
id
,
item
.
completed
);
});
th
is
.
view
.
bind
(
'
removeCompleted
'
,
function
()
{
th
is
.
removeCompletedItems
();
}
.
bind
(
this
)
);
th
at
.
view
.
bind
(
'
removeCompleted
'
,
function
()
{
th
at
.
removeCompletedItems
();
});
th
is
.
view
.
bind
(
'
toggleAll
'
,
function
(
status
)
{
th
is
.
toggleAll
(
status
.
completed
);
}
.
bind
(
this
)
);
th
at
.
view
.
bind
(
'
toggleAll
'
,
function
(
status
)
{
th
at
.
toggleAll
(
status
.
completed
);
});
}
/**
...
...
@@ -61,27 +62,30 @@
* todo-list
*/
Controller
.
prototype
.
showAll
=
function
()
{
this
.
model
.
read
(
function
(
data
)
{
this
.
view
.
render
(
'
showEntries
'
,
data
);
}.
bind
(
this
));
var
that
=
this
;
that
.
model
.
read
(
function
(
data
)
{
that
.
view
.
render
(
'
showEntries
'
,
data
);
});
};
/**
* Renders all active tasks
*/
Controller
.
prototype
.
showActive
=
function
()
{
this
.
model
.
read
({
completed
:
false
},
function
(
data
)
{
this
.
view
.
render
(
'
showEntries
'
,
data
);
}.
bind
(
this
));
var
that
=
this
;
that
.
model
.
read
({
completed
:
false
},
function
(
data
)
{
that
.
view
.
render
(
'
showEntries
'
,
data
);
});
};
/**
* Renders all completed tasks
*/
Controller
.
prototype
.
showCompleted
=
function
()
{
this
.
model
.
read
({
completed
:
true
},
function
(
data
)
{
this
.
view
.
render
(
'
showEntries
'
,
data
);
}.
bind
(
this
));
var
that
=
this
;
that
.
model
.
read
({
completed
:
true
},
function
(
data
)
{
that
.
view
.
render
(
'
showEntries
'
,
data
);
});
};
/**
...
...
@@ -89,35 +93,39 @@
* object and it'll handle the DOM insertion and saving of the new item.
*/
Controller
.
prototype
.
addItem
=
function
(
title
)
{
var
that
=
this
;
if
(
title
.
trim
()
===
''
)
{
return
;
}
th
is
.
model
.
create
(
title
,
function
()
{
th
is
.
view
.
render
(
'
clearNewTodo
'
);
th
is
.
_filter
(
true
);
}
.
bind
(
this
)
);
th
at
.
model
.
create
(
title
,
function
()
{
th
at
.
view
.
render
(
'
clearNewTodo
'
);
th
at
.
_filter
(
true
);
});
};
/*
* Triggers the item editing mode.
*/
Controller
.
prototype
.
editItem
=
function
(
id
)
{
this
.
model
.
read
(
id
,
function
(
data
)
{
this
.
view
.
render
(
'
editItem
'
,
{
id
:
id
,
title
:
data
[
0
].
title
});
}.
bind
(
this
));
var
that
=
this
;
that
.
model
.
read
(
id
,
function
(
data
)
{
that
.
view
.
render
(
'
editItem
'
,
{
id
:
id
,
title
:
data
[
0
].
title
});
});
};
/*
* Finishes the item editing mode successfully.
*/
Controller
.
prototype
.
editItemSave
=
function
(
id
,
title
)
{
var
that
=
this
;
if
(
title
.
trim
())
{
th
is
.
model
.
update
(
id
,
{
title
:
title
},
function
()
{
th
is
.
view
.
render
(
'
editItemDone
'
,
{
id
:
id
,
title
:
title
});
}
.
bind
(
this
)
);
th
at
.
model
.
update
(
id
,
{
title
:
title
},
function
()
{
th
at
.
view
.
render
(
'
editItemDone
'
,
{
id
:
id
,
title
:
title
});
});
}
else
{
th
is
.
removeItem
(
id
);
th
at
.
removeItem
(
id
);
}
};
...
...
@@ -125,9 +133,10 @@
* Cancels the item editing mode.
*/
Controller
.
prototype
.
editItemCancel
=
function
(
id
)
{
this
.
model
.
read
(
id
,
function
(
data
)
{
this
.
view
.
render
(
'
editItemDone
'
,
{
id
:
id
,
title
:
data
[
0
].
title
});
}.
bind
(
this
));
var
that
=
this
;
that
.
model
.
read
(
id
,
function
(
data
)
{
that
.
view
.
render
(
'
editItemDone
'
,
{
id
:
id
,
title
:
data
[
0
].
title
});
});
};
/**
...
...
@@ -138,24 +147,26 @@
* storage
*/
Controller
.
prototype
.
removeItem
=
function
(
id
)
{
this
.
model
.
remove
(
id
,
function
()
{
this
.
view
.
render
(
'
removeItem
'
,
id
);
}.
bind
(
this
));
var
that
=
this
;
that
.
model
.
remove
(
id
,
function
()
{
that
.
view
.
render
(
'
removeItem
'
,
id
);
});
th
is
.
_filter
();
th
at
.
_filter
();
};
/**
* Will remove all completed items from the DOM and storage.
*/
Controller
.
prototype
.
removeCompletedItems
=
function
()
{
this
.
model
.
read
({
completed
:
true
},
function
(
data
)
{
var
that
=
this
;
that
.
model
.
read
({
completed
:
true
},
function
(
data
)
{
data
.
forEach
(
function
(
item
)
{
th
is
.
removeItem
(
item
.
id
);
}
.
bind
(
this
)
);
}
.
bind
(
this
)
);
th
at
.
removeItem
(
item
.
id
);
});
});
th
is
.
_filter
();
th
at
.
_filter
();
};
/**
...
...
@@ -168,15 +179,16 @@
* @param {boolean|undefined} silent Prevent re-filtering the todo items
*/
Controller
.
prototype
.
toggleComplete
=
function
(
id
,
completed
,
silent
)
{
this
.
model
.
update
(
id
,
{
completed
:
completed
},
function
()
{
this
.
view
.
render
(
'
elementComplete
'
,
{
var
that
=
this
;
that
.
model
.
update
(
id
,
{
completed
:
completed
},
function
()
{
that
.
view
.
render
(
'
elementComplete
'
,
{
id
:
id
,
completed
:
completed
});
}
.
bind
(
this
)
);
});
if
(
!
silent
)
{
th
is
.
_filter
();
th
at
.
_filter
();
}
};
...
...
@@ -185,13 +197,14 @@
* Just pass in the event object.
*/
Controller
.
prototype
.
toggleAll
=
function
(
completed
)
{
this
.
model
.
read
({
completed
:
!
completed
},
function
(
data
)
{
var
that
=
this
;
that
.
model
.
read
({
completed
:
!
completed
},
function
(
data
)
{
data
.
forEach
(
function
(
item
)
{
th
is
.
toggleComplete
(
item
.
id
,
completed
,
true
);
}
.
bind
(
this
)
);
}
.
bind
(
this
)
);
th
at
.
toggleComplete
(
item
.
id
,
completed
,
true
);
});
});
th
is
.
_filter
();
th
at
.
_filter
();
};
/**
...
...
@@ -199,16 +212,17 @@
* number of todos.
*/
Controller
.
prototype
.
_updateCount
=
function
()
{
this
.
model
.
getCount
((
function
(
todos
)
{
this
.
view
.
render
(
'
updateElementCount
'
,
todos
.
active
);
this
.
view
.
render
(
'
clearCompletedButton
'
,
{
var
that
=
this
;
that
.
model
.
getCount
(
function
(
todos
)
{
that
.
view
.
render
(
'
updateElementCount
'
,
todos
.
active
);
that
.
view
.
render
(
'
clearCompletedButton
'
,
{
completed
:
todos
.
completed
,
visible
:
todos
.
completed
>
0
});
th
is
.
view
.
render
(
'
toggleAll
'
,
{
checked
:
todos
.
completed
===
todos
.
total
});
th
is
.
view
.
render
(
'
contentBlockVisibility
'
,
{
visible
:
todos
.
total
>
0
});
})
.
bind
(
this
))
;
th
at
.
view
.
render
(
'
toggleAll
'
,
{
checked
:
todos
.
completed
===
todos
.
total
});
th
at
.
view
.
render
(
'
contentBlockVisibility
'
,
{
visible
:
todos
.
total
>
0
});
});
};
/**
...
...
vanilla-examples/vanillajs/js/helpers.js
View file @
b8fb8864
...
...
@@ -10,6 +10,11 @@
return
(
scope
||
document
).
querySelectorAll
(
selector
);
};
// addEventListener wrapper:
window
.
$on
=
function
(
target
,
type
,
callback
,
useCapture
)
{
target
.
addEventListener
(
type
,
callback
,
!!
useCapture
);
};
// Register events on elements that may or may not exist yet:
// $live('div a', 'click', function (event) {});
window
.
$live
=
(
function
()
{
...
...
@@ -31,7 +36,7 @@
return
function
(
selector
,
event
,
handler
)
{
if
(
!
eventRegistry
[
event
])
{
eventRegistry
[
event
]
=
[];
document
.
documentElement
.
addEventListener
(
event
,
dispatchEvent
,
true
);
window
.
$on
(
document
.
documentElement
,
event
,
dispatchEvent
,
true
);
}
eventRegistry
[
event
].
push
({
...
...
vanilla-examples/vanillajs/js/model.js
View file @
b8fb8864
...
...
@@ -68,7 +68,7 @@
* @param {function} callback The callback to fire when the update is complete.
*/
Model
.
prototype
.
update
=
function
(
id
,
data
,
callback
)
{
this
.
storage
.
save
(
id
,
data
,
callback
);
this
.
storage
.
save
(
data
,
callback
,
id
);
};
/**
...
...
vanilla-examples/vanillajs/js/store.js
View file @
b8fb8864
...
...
@@ -11,22 +11,19 @@
* real life you probably would be making AJAX calls
*/
function
Store
(
name
,
callback
)
{
var
data
;
var
dbName
;
callback
=
callback
||
function
()
{};
dbName
=
this
.
_dbName
=
name
;
this
.
_dbName
=
name
;
if
(
!
localStorage
[
dbN
ame
])
{
data
=
{
if
(
!
localStorage
[
n
ame
])
{
var
data
=
{
todos
:
[]
};
localStorage
[
dbN
ame
]
=
JSON
.
stringify
(
data
);
localStorage
[
n
ame
]
=
JSON
.
stringify
(
data
);
}
callback
.
call
(
this
,
JSON
.
parse
(
localStorage
[
dbN
ame
]));
callback
.
call
(
this
,
JSON
.
parse
(
localStorage
[
n
ame
]));
}
/**
...
...
@@ -50,13 +47,12 @@
var
todos
=
JSON
.
parse
(
localStorage
[
this
.
_dbName
]).
todos
;
callback
.
call
(
this
,
todos
.
filter
(
function
(
todo
)
{
var
match
=
true
;
for
(
var
q
in
query
)
{
if
(
query
[
q
]
!==
todo
[
q
])
{
match
=
false
;
return
false
;
}
}
return
match
;
return
true
;
}));
};
...
...
@@ -74,33 +70,30 @@
* Will save the given data to the DB. If no item exists it will create a new
* item, otherwise it'll simply update an existing item's properties
*
* @param {number} id An optional param to enter an ID of an item to update
* @param {object} data The data to save back into the DB
* @param {object} updateData The data to save back into the DB
* @param {function} callback The callback to fire after saving
* @param {number} id An optional param to enter an ID of an item to update
*/
Store
.
prototype
.
save
=
function
(
id
,
updateData
,
callback
)
{
Store
.
prototype
.
save
=
function
(
updateData
,
callback
,
id
)
{
var
data
=
JSON
.
parse
(
localStorage
[
this
.
_dbName
]);
var
todos
=
data
.
todos
;
callback
=
callback
||
function
()
{};
// If an ID was actually given, find the item and update each property
if
(
typeof
id
!==
'
object
'
)
{
if
(
id
)
{
for
(
var
i
=
0
;
i
<
todos
.
length
;
i
++
)
{
if
(
todos
[
i
].
id
==
id
)
{
for
(
var
x
in
updateData
)
{
todos
[
i
][
x
]
=
updateData
[
x
];
if
(
todos
[
i
].
id
==
=
id
)
{
for
(
var
key
in
updateData
)
{
todos
[
i
][
key
]
=
updateData
[
key
];
}
break
;
}
}
localStorage
[
this
.
_dbName
]
=
JSON
.
stringify
(
data
);
callback
.
call
(
this
,
JSON
.
parse
(
localStorage
[
this
.
_dbName
]).
todos
);
}
else
{
callback
=
updateData
;
updateData
=
id
;
// Generate an ID
updateData
.
id
=
new
Date
().
getTime
();
...
...
vanilla-examples/vanillajs/js/view.js
View file @
b8fb8864
/*global qs, qsa, $parent, $live */
/*global qs, qsa, $
on, $
parent, $live */
(
function
(
window
)
{
'
use strict
'
;
...
...
@@ -135,7 +135,7 @@
View
.
prototype
.
_itemId
=
function
(
element
)
{
var
li
=
$parent
(
element
,
'
li
'
);
return
li
.
dataset
.
id
;
return
parseInt
(
li
.
dataset
.
id
,
10
)
;
};
View
.
prototype
.
_bindItemEditDone
=
function
(
handler
)
{
...
...
@@ -173,17 +173,17 @@
View
.
prototype
.
bind
=
function
(
event
,
handler
)
{
var
that
=
this
;
if
(
event
===
'
newTodo
'
)
{
that
.
$newTodo
.
addEventListener
(
'
change
'
,
function
()
{
$on
(
that
.
$newTodo
,
'
change
'
,
function
()
{
handler
(
that
.
$newTodo
.
value
);
});
}
else
if
(
event
===
'
removeCompleted
'
)
{
that
.
$clearCompleted
.
addEventListener
(
'
click
'
,
function
()
{
$on
(
that
.
$clearCompleted
,
'
click
'
,
function
()
{
handler
();
});
}
else
if
(
event
===
'
toggleAll
'
)
{
that
.
$toggleAll
.
addEventListener
(
'
click
'
,
function
()
{
$on
(
that
.
$toggleAll
,
'
click
'
,
function
()
{
handler
({
completed
:
this
.
checked
});
});
...
...
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