openmct/tutorials/todo/todo.js

129 lines
4.0 KiB
JavaScript
Raw Normal View History

2016-05-27 22:31:54 +00:00
define([
"text!./todo.html",
"text!./todo-task.html",
2016-06-17 18:43:18 +00:00
"text!./todo-toolbar.html",
2016-05-27 22:31:54 +00:00
"zepto"
2016-06-17 18:43:18 +00:00
], function (todoTemplate, taskTemplate, toolbarTemplate, $) {
2016-05-27 22:31:54 +00:00
/**
* @param {mct.MCT} mct
*/
2016-05-27 20:17:16 +00:00
return function todoPlugin(mct) {
var todoType = new mct.Type({
metadata: {
label: "To-Do List",
glyph: "2",
description: "A list of things that need to be done."
},
initialize: function (model) {
2016-05-27 23:46:06 +00:00
model.tasks = [
{ description: "This is a task." }
];
2016-05-27 20:17:16 +00:00
},
creatable: true
});
2016-05-28 00:08:04 +00:00
function TodoView(domainObject) {
2016-06-17 18:16:08 +00:00
this.domainObject = domainObject;
2016-05-28 00:08:04 +00:00
this.filterValue = "all";
2016-06-17 18:16:08 +00:00
}
2016-05-28 00:08:04 +00:00
2016-06-17 18:16:08 +00:00
TodoView.prototype.show = function (container) {
this.$els = $(todoTemplate);
2016-05-28 00:08:04 +00:00
this.$buttons = {
2016-06-17 18:16:08 +00:00
all: this.$els.find('.example-todo-button-all'),
incomplete: this.$els.find('.example-todo-button-incomplete'),
complete: this.$els.find('.example-todo-button-complete')
2016-05-28 00:08:04 +00:00
};
2016-06-17 18:16:08 +00:00
$(container).empty().append(this.$els);
2016-05-28 00:08:04 +00:00
this.initialize();
2016-06-17 18:16:08 +00:00
this.render();
};
2016-05-28 00:08:04 +00:00
2016-06-17 18:16:08 +00:00
TodoView.prototype.destroy = function () {
};
2016-05-28 00:08:04 +00:00
TodoView.prototype.setFilter = function (value) {
this.filterValue = value;
this.render();
};
TodoView.prototype.initialize = function () {
Object.keys(this.$buttons).forEach(function (k) {
this.$buttons[k].on('click', this.setFilter.bind(this, k));
}, this);
};
TodoView.prototype.render = function () {
2016-06-17 18:16:08 +00:00
var $els = this.$els;
var domainObject = this.domainObject;
2016-05-28 00:08:04 +00:00
var tasks = domainObject.getModel().tasks;
var $message = $els.find('.example-message');
var $list = $els.find('.example-todo-task-list');
var $buttons = this.$buttons;
var filters = {
all: function () {
return true;
2016-05-27 22:49:16 +00:00
},
2016-05-28 00:08:04 +00:00
incomplete: function (task) {
return !task.completed;
2016-05-27 22:49:16 +00:00
},
2016-05-28 00:08:04 +00:00
complete: function (task) {
return task.completed;
}
};
var filterValue = this.filterValue;
2016-05-27 22:31:54 +00:00
2016-05-28 00:08:04 +00:00
Object.keys($buttons).forEach(function (k) {
$buttons[k].toggleClass('selected', filterValue === k);
});
tasks = tasks.filter(filters[filterValue]);
2016-05-27 23:55:10 +00:00
2016-05-28 00:08:04 +00:00
$list.empty();
tasks.forEach(function (task, index) {
var $taskEls = $(taskTemplate);
var $checkbox = $taskEls.find('.example-task-checked');
$checkbox.prop('checked', task.completed);
$taskEls.find('.example-task-description')
.text(task.description);
2016-05-27 23:55:10 +00:00
2016-05-28 00:08:04 +00:00
$checkbox.on('change', function () {
var checked = !!$checkbox.prop('checked');
mct.verbs.mutate(domainObject, function (model) {
model.tasks[index].completed = checked;
2016-05-27 22:49:16 +00:00
});
2016-05-28 00:08:04 +00:00
});
2016-05-27 22:49:16 +00:00
2016-05-28 00:08:04 +00:00
$list.append($taskEls);
2016-05-27 22:49:16 +00:00
});
2016-05-28 00:08:04 +00:00
$message.toggle(tasks.length < 1);
};
2016-06-17 18:43:18 +00:00
function TodoToolbarView(domainObject) {
this.domainObject = domainObject;
}
TodoToolbarView.prototype.show = function (container) {
$(container).append($(toolbarTemplate));
};
TodoToolbarView.prototype.destroy = function () {
};
2016-05-27 20:17:16 +00:00
mct.type('example.todo', todoType);
2016-06-17 17:53:56 +00:00
mct.view(mct.regions.main, function (domainObject) {
return todoType.check(domainObject) && new TodoView(domainObject);
});
2016-06-17 18:43:18 +00:00
mct.view(mct.regions.toolbar, function (domainObject) {
return todoType.check(domainObject) && new TodoToolbarView(domainObject);
});
2016-05-27 20:17:16 +00:00
return mct;
};
});