Skip to content

T
todomvc
Commit dface8c5 authored by James Thomas's avatar James Thomas
Browse files
Options

Added item counters and re-factoring.

parent 1630c798
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 31 deletions
todo-example/dojo/TODO
View file @ dface8c5
- Remove use of IDs
- Support local storage using custom Dojo Store - Support local storage using custom Dojo Store
- Editing of existing todos
- Allow checking of completed items
- Use local Dojo JS version - Use local Dojo JS version
todo-example/dojo/css/todos.css
View file @ dface8c5
...@@ -158,7 +158,13 @@ body { ...@@ -158,7 +158,13 @@ body {
*zoom: 1; *zoom: 1;
margin-top: 10px; margin-top: 10px;
color: #777777; color: #777777;
display: none;
} }
#todo-stats.items_present {
display: block;
}
#todo-stats:after { #todo-stats:after {
content: "\0020"; content: "\0020";
display: block; display: block;
...@@ -176,7 +182,14 @@ body { ...@@ -176,7 +182,14 @@ body {
} }
#todo-stats .todo-clear { #todo-stats .todo-clear {
float: right; float: right;
display: none
} }
#todo-stats.items_selected .todo-clear {
display: inline;
}
#todo-stats .todo-clear a { #todo-stats .todo-clear a {
color: #777777; color: #777777;
font-size: 12px; font-size: 12px;
......
todo-example/dojo/index.html
View file @ dface8c5
...@@ -4,44 +4,93 @@ ...@@ -4,44 +4,93 @@
<head> <head>
<title>Dojo</title> <title>Dojo</title>
<style type="text/css"> <style type="text/css">
@import "../../../../../fulldojo1.7Clean3/dijit/themes/claro/claro.css"; @import "/code/dtk/dojotoolkit/dijit/themes/claro/claro.css";
@import "../../../../../fulldojo1.7Clean3/dijit/themes/claro/document.css";
</style> </style>
<link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/> <link href="css/todos.css" media="all" rel="stylesheet" type="text/css"/>
<script data-dojo-config="async:true, parseOnLoad:true" src="/code/dtk/dojotoolkit/dojo/dojo.js"></script> <script data-dojo-config="async:true, parseOnLoad:true" src="/code/dtk/dojotoolkit/dojo/dojo.js"></script>
<script> <script>
require(["dojo/parser", "dojox/mvc", "dojox/mvc/Group", "dojox/mvc/Repeat", "dojox/mvc/Output","dijit/form/CheckBox","dijit/InlineEditBox"], require(["dojo/parser", "dojo/dom-class", "dojox/mvc", "dojox/mvc/Group", "dojox/mvc/Repeat", "dojox/mvc/Output", "dijit/form/CheckBox","dijit/InlineEditBox"],
function (parser, mvc) { function (parser, domClass, mvc, Group, Repeat, Output, CheckBox) {
dojo.declare("dijit.form.BoundCheckBox", [CheckBox], {
_setCheckedAttr: function (checked) {
this.inherited(arguments);
this._watchCallbacks("value", !checked, checked);
},
_getValueAttr: function () {
return this.get("checked");
}
});
var data = { var data = {
todos : [ todos : [
{ content: "First", "isDone" : false }, { content: "First", "isDone" : false },
{ content: "Second", "isDone" : true }, { content: "Second", "isDone" : true },
{ content: "Third", "isDone" : false } { content: "Third", "isDone" : false }
], ],
incomplete: 0,
complete: 0
}; };
model = mvc.newStatefulModel({ data : data }); window.model = mvc.newStatefulModel({ data : data });
window.addToModel = function addToModel (input, event) { for(var i = 0; s = model.todos[i], i < model.todos.length; i++) {
if (event.keyCode !== 13) return; mvc.bindInputs([s.isDone], function () {
window.updateTotalItemsLeft();
});
}
var insert = mvc.newStatefulModel({ "data" : { mvc.bind(model.incomplete, "value", model.complete, "value", function (value) {
content: input.value, isDone: false return this.model.todos.get("length") - value;
} }); });
mvc.bindInputs([model.incomplete], function () {
domClass[model.todos.get("length") ? "add" : "remove" ]("todo-stats", "items_present");
});
mvc.bindInputs([model.complete], function () {
domClass[model.complete.get("value") > 0 ? "add" : "remove" ]("todo-stats", "items_selected");
});
window.updateTotalItemsLeft = function () {
for(var i = 0, left = 0; s = model.todos[i], i < model.todos.length; i++) {
if (!s.isDone.get("value")) {
left++;
}
}
model.incomplete.set("value", left);
};
var addToModel = function (content, isDone) {
var insert = mvc.newStatefulModel({
data: {content: content, isDone: isDone}
});
mvc.bindInputs([insert.isDone], updateTotalItemsLeft);
model.todos.add(model.todos.length, insert); model.todos.add(model.todos.length, insert);
updateTotalItemsLeft();
}
window.addTodoItem = function (input, event) {
if (event.keyCode !== 13) return;
addToModel(input.value, false);
input.value = ""; input.value = "";
} }
window.removeFromModel = function (id) { window.removeFromModel = function (id) {
console.log(id);
model.todos.remove(id); model.todos.remove(id);
window.updateTotalItemsLeft();
} }
window.handleCheckBoxChange = function (current) { window.handleCheckBoxChange = function (current) {
console.log('handleCheckBoxChange value changed current ='+current+" this.index="+this.index); console.log('handleCheckBoxChange value changed current ='+current+" this.index="+this.index);
if(this.binding){ // if(this.binding){
this.binding.set("value",current); // this.binding.set("value",current);
} // }
if(this.index){ if(this.index){
if(current){ if(current){
dojo.addClass("todo"+this.index, 'checkedTodo'); dojo.addClass("todo"+this.index, 'checkedTodo');
...@@ -69,7 +118,7 @@ ...@@ -69,7 +118,7 @@
<div class="content"> <div class="content">
<div id="create-todo"> <div id="create-todo">
<input id="new-todo" placeholder="What needs to be done?" type="text" onkeypress="addToModel(this, event)"/> <input id="new-todo" placeholder="What needs to be done?" type="text" onkeypress="addTodoItem(this, event)"/>
<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span> <span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
</div> </div>
...@@ -77,7 +126,8 @@ ...@@ -77,7 +126,8 @@
<ul id="todo-list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'model.todos'"> <ul id="todo-list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: 'model.todos'">
<li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'"> <li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '${this.index}'">
<div class="todo"> <div class="todo">
<input class="check" data-dojo-type="dijit.form.CheckBox" index="${this.index}" id="isdone${this.index}" data-dojo-props='ref: "isDone", onChange: handleCheckBoxChange' style="display:inline-block" ></input> <input class="check" data-dojo-type="dijit.form.BoundCheckBox" index="${this.index}" id="isdone${this.index}" data-dojo-props='ref: "isDone"' style="display:inline-block" >
</input>
<div class="todo-content dijitInline" data-dojo-type="dijit.InlineEditBox" id="todo${this.index}" <div class="todo-content dijitInline" data-dojo-type="dijit.InlineEditBox" id="todo${this.index}"
data-dojo-props='ref: "content", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'></div> data-dojo-props='ref: "content", editor:"dijit.form.TextBox", autosave:true, width:"420px", style:"width:420px;"'></div>
...@@ -88,7 +138,25 @@ ...@@ -88,7 +138,25 @@
</ul> </ul>
</div> </div>
<div id="todo-stats"></div> <div id="todo-stats">
<span class="todo-count">
<span data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model.incomplete" class="number"></span>
<span class="word">items</span> left.
</span>
<span class="todo-clear">
<a href="#">
Clear
<span class="number-done" data-dojo-type="dojox.mvc.Output" data-dojo-props="ref: model.complete"></span>
completed items
</a>
</span>
</div>
</div> </div>
...@@ -100,18 +168,6 @@ ...@@ -100,18 +168,6 @@
<br /> <br />
<a href="http://jamesthom.as/">James Thomas</a>. <a href="http://jamesthom.as/">James Thomas</a>.
</div> </div>
<!--
<div class="todo">
<div class="display">
<input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<div class="todo-content"></div>
<span class="todo-destroy"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" value="" />
</div>
</div>-->
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7