-
Notifications
You must be signed in to change notification settings - Fork 0
/
todo.js
74 lines (68 loc) · 2.5 KB
/
todo.js
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
// Onload
$(function() {
window.todo_model = {}, window.todo_presenter = new Mmvp();
var presenter_dom_identifier = "#viewpen";
// Setup User Interface Callbacks
(function ui_callbacks() {
// Remove Todo Button
$(document).on("click", "button.remove", function(ev) {
delete todo_model[$(ev.target).parent().attr('id')];
todo_presenter.sync(todo_model);
});
// Checkmark Todo
$(document).on("click", "input[type='checkbox']", function(ev) {
var is_checked = $(ev.target).is(":checked");
todo_model[$(ev.target).parent().attr("id")]['checked'] = is_checked;
todo_presenter.sync(todo_model);
});
// Add a New Todo
var item_add_counter = 0;
$("input").on("keypress", function(ev) {
if (ev.which == 13) {
todo_model[item_add_counter++] = {
text : $("input[type='text']").val(),
checked : false
};
$("input").val("");
todo_presenter.sync(todo_model);
}
});
})();
// Setup Presenter Callbacks
todo_presenter.set_action({
empty : function() {
$("#items-container").remove();
var no_items_el = $("<div id='no-items'>");
no_items_el.append("<h4>No Items!</h4>").append("<p>Hint: Add a new item.</p>");
$(presenter_dom_identifier).append(no_items_el);
no_items_el.animate({opacity : 1 }, 300, 'ease-in');
},
populate : function() {
$("#no-items").remove();
$(presenter_dom_identifier).append("<div id='items-container'>");
},
add : function(new_model_key, new_model_value) {
var checked = new_model_value == true ? "checked" : "";
var new_div_el = $("<div>");
var checkbox = $("<input type='checkbox'>");
checkbox.attr("checked", (checked ? "" : null));
var span = $("<span>").text(new_model_value.text);
var remove_btn = $("<button class='remove'>").html("–");
new_div_el.attr('id', new_model_key).append(checkbox, span, remove_btn);
$("#items-container").prepend(new_div_el);
new_div_el.animate({ opacity: 1 }, 300, 'ease-in');
},
remove : function(key_of_removed_item) {
$("#" + key_of_removed_item).remove();
},
update : function(key_of_updated_model, updated_model_value) {
if (updated_model_value.checked) {
$("#" + key_of_updated_model).addClass("strikethrough");
} else {
$("#" + key_of_updated_model).removeClass("strikethrough");
}
}
});
// Initialize Mmvp Todo Presenter
todo_presenter.initialize();
});