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-06-17 21:18:51 +00:00
|
|
|
"text!./todo-dialog.html",
|
2016-07-07 21:30:45 +00:00
|
|
|
"../../src/api/objects/object-utils",
|
2016-05-27 22:31:54 +00:00
|
|
|
"zepto"
|
2016-07-07 21:30:45 +00:00
|
|
|
], function (todoTemplate, taskTemplate, toolbarTemplate, dialogTemplate, utils, $) {
|
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-08-20 02:10:06 +00:00
|
|
|
this.tasks = domainObject.tasks;
|
2016-05-28 00:08:04 +00:00
|
|
|
this.filterValue = "all";
|
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
this.setTaskStatus = this.setTaskStatus.bind(this);
|
|
|
|
this.selectTask = this.selectTask.bind(this);
|
2016-07-07 21:30:45 +00:00
|
|
|
|
2016-08-25 20:25:54 +00:00
|
|
|
<<<<<<< HEAD
|
2016-08-20 02:10:06 +00:00
|
|
|
this.mutableObject = mct.Objects.getMutable(domainObject);
|
|
|
|
this.mutableObject.on('tasks', this.updateTasks.bind(this));
|
2016-08-25 20:25:54 +00:00
|
|
|
=======
|
2016-07-07 21:30:45 +00:00
|
|
|
//If anything on object changes, re-render view
|
|
|
|
this.mutableObject.on("*", this.objectChanged);
|
|
|
|
};
|
|
|
|
|
2016-06-17 18:16:08 +00:00
|
|
|
TodoView.prototype.show = function (container) {
|
2016-07-07 21:30:45 +00:00
|
|
|
var self = this;
|
2016-06-17 21:21:37 +00:00
|
|
|
this.destroy();
|
|
|
|
|
2016-08-11 22:29:46 +00:00
|
|
|
self.$els = $(todoTemplate);
|
|
|
|
self.$buttons = {
|
|
|
|
all: self.$els.find('.example-todo-button-all'),
|
|
|
|
incomplete: self.$els.find('.example-todo-button-incomplete'),
|
|
|
|
complete: self.$els.find('.example-todo-button-complete')
|
|
|
|
};
|
2016-06-17 18:16:08 +00:00
|
|
|
|
2016-08-11 22:29:46 +00:00
|
|
|
$(container).empty().append(self.$els);
|
2016-08-25 20:25:54 +00:00
|
|
|
>>>>>>> origin/api-tutorials
|
2016-06-17 21:21:37 +00:00
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
this.$el = $(todoTemplate);
|
|
|
|
this.$emptyMessage = this.$el.find('.example-no-tasks');
|
|
|
|
this.$taskList = this.$el.find('.example-todo-task-list');
|
|
|
|
this.$el.on('click', '[data-filter]', this.updateFilter.bind(this));
|
|
|
|
this.$el.on('change', 'li', this.setTaskStatus.bind(this));
|
|
|
|
this.$el.on('click', '.example-task-description', this.selectTask.bind(this));
|
2016-07-22 20:56:45 +00:00
|
|
|
|
2016-08-25 20:25:54 +00:00
|
|
|
<<<<<<< HEAD
|
2016-08-20 02:10:06 +00:00
|
|
|
this.updateSelection = this.updateSelection.bind(this);
|
|
|
|
mct.selection.on('change', this.updateSelection);
|
|
|
|
}
|
2016-07-22 20:56:45 +00:00
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
TodoView.prototype.show = function (container) {
|
|
|
|
$(container).empty().append(this.$el);
|
|
|
|
this.render();
|
2016-08-25 20:25:54 +00:00
|
|
|
=======
|
2016-08-11 22:29:46 +00:00
|
|
|
self.initialize();
|
|
|
|
self.objectChanged(this.domainObject);
|
2016-07-22 20:56:45 +00:00
|
|
|
|
2016-08-11 22:29:46 +00:00
|
|
|
mct.selection.on('change', self.render);
|
2016-08-25 20:25:54 +00:00
|
|
|
>>>>>>> origin/api-tutorials
|
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.destroy = function () {
|
2016-08-20 02:10:06 +00:00
|
|
|
this.mutableObject.stopListening();
|
|
|
|
mct.selection.off('change', this.updateSelection);
|
|
|
|
};
|
|
|
|
|
|
|
|
TodoView.prototype.updateSelection = function (selection) {
|
|
|
|
if (selection && selection.length) {
|
|
|
|
this.selection = selection[0].index;
|
|
|
|
} else {
|
|
|
|
this.selection = -1;
|
2016-06-17 21:21:37 +00:00
|
|
|
}
|
2016-08-20 02:10:06 +00:00
|
|
|
this.render();
|
2016-06-17 18:16:08 +00:00
|
|
|
};
|
2016-05-28 00:08:04 +00:00
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
TodoView.prototype.updateTasks = function (tasks) {
|
|
|
|
this.tasks = tasks;
|
2016-05-28 00:08:04 +00:00
|
|
|
this.render();
|
|
|
|
};
|
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
TodoView.prototype.updateFilter = function (e) {
|
|
|
|
this.filterValue = $(e.target).data('filter');
|
|
|
|
this.render();
|
|
|
|
};
|
2016-08-18 17:38:16 +00:00
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
TodoView.prototype.setTaskStatus = function (e) {
|
|
|
|
var $checkbox = $(e.target);
|
|
|
|
var taskIndex = $checkbox.data('taskIndex');
|
|
|
|
var completed = !!$checkbox.prop('checked');
|
|
|
|
this.tasks[taskIndex].completed = completed;
|
|
|
|
this.mutableObject.set('tasks[' + taskIndex + '].checked', completed);
|
2016-05-28 00:08:04 +00:00
|
|
|
};
|
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
TodoView.prototype.selectTask = function (e) {
|
|
|
|
var taskIndex = $(e.target).data('taskIndex');
|
|
|
|
mct.selection.clear();
|
|
|
|
mct.selection.select({index: taskIndex});
|
|
|
|
};
|
|
|
|
|
|
|
|
TodoView.prototype.getFilteredTasks = function () {
|
|
|
|
return this.tasks.filter({
|
2016-05-28 00:08:04 +00:00
|
|
|
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;
|
|
|
|
}
|
2016-08-20 02:10:06 +00:00
|
|
|
}[this.filterValue]);
|
|
|
|
};
|
2016-05-28 00:08:04 +00:00
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
TodoView.prototype.render = function () {
|
|
|
|
var filteredTasks = this.getFilteredTasks();
|
|
|
|
this.$emptyMessage.toggle(filteredTasks.length === 0);
|
|
|
|
this.$taskList.empty();
|
|
|
|
filteredTasks
|
|
|
|
.forEach(function (task) {
|
|
|
|
var $taskEl = $(taskTemplate),
|
|
|
|
taskIndex = this.tasks.indexOf(task);
|
|
|
|
$taskEl.find('.example-task-checked')
|
|
|
|
.prop('checked', task.completed)
|
|
|
|
.attr('data-task-index', taskIndex);
|
|
|
|
$taskEl.find('.example-task-description')
|
|
|
|
.text(task.description)
|
|
|
|
.toggleClass('selected', taskIndex === this.selection)
|
|
|
|
.attr('data-task-index', taskIndex);
|
|
|
|
|
|
|
|
this.$taskList.append($taskEl);
|
|
|
|
}, this);
|
2016-05-28 00:08:04 +00:00
|
|
|
};
|
|
|
|
|
2016-06-17 18:43:18 +00:00
|
|
|
function TodoToolbarView(domainObject) {
|
2016-08-20 02:10:06 +00:00
|
|
|
this.tasks = domainObject.tasks;
|
2016-08-18 17:38:16 +00:00
|
|
|
this.mutableObject = mct.Objects.getMutable(domainObject);
|
2016-08-20 02:10:06 +00:00
|
|
|
|
|
|
|
this.handleSelectionChange = this.handleSelectionChange.bind(this);
|
|
|
|
|
|
|
|
this.mutableObject.on('tasks', this.updateTasks.bind(this));
|
|
|
|
mct.selection.on('change', this.handleSelectionChange);
|
|
|
|
this.$el = $(toolbarTemplate);
|
|
|
|
this.$remove = this.$el.find('.example-remove');
|
|
|
|
this.$el.on('click', '.example-add', this.addTask.bind(this));
|
|
|
|
this.$el.on('click', '.example-remove', this.removeTask.bind(this));
|
2016-06-17 18:43:18 +00:00
|
|
|
}
|
|
|
|
|
2016-08-20 02:10:06 +00:00
|
|
|
TodoToolbarView.prototype.updateTasks = function (tasks) {
|
|
|
|
this.tasks = tasks;
|
|
|
|
};
|
|
|
|
|
|
|
|
TodoToolbarView.prototype.addTask = function () {
|
|
|
|
var $dialog = $(dialogTemplate),
|
|
|
|
view = {
|
|
|
|
show: function (container) {
|
|
|
|
$(container).append($dialog);
|
|
|
|
},
|
|
|
|
destroy: function () {}
|
|
|
|
};
|
|
|
|
|
|
|
|
mct.dialog(view, "Add a Task").then(function () {
|
|
|
|
var description = $dialog.find('input').val();
|
|
|
|
this.tasks.push({description: description});
|
|
|
|
this.mutableObject.set('tasks', this.tasks);
|
|
|
|
}.bind(this));
|
|
|
|
};
|
|
|
|
|
|
|
|
TodoToolbarView.prototype.removeTask = function () {
|
|
|
|
if (this.selection >= 0) {
|
|
|
|
this.tasks.splice(this.selection, 1);
|
|
|
|
this.mutableObject.set('tasks', this.tasks);
|
|
|
|
mct.selection.clear();
|
|
|
|
this.render();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2016-06-17 18:43:18 +00:00
|
|
|
TodoToolbarView.prototype.show = function (container) {
|
2016-07-07 21:30:45 +00:00
|
|
|
var self = this;
|
|
|
|
this.destroy();
|
2016-08-25 20:25:54 +00:00
|
|
|
this.$els = $(toolbarTemplate);
|
2016-08-20 02:10:06 +00:00
|
|
|
this.render();
|
2016-08-25 20:25:54 +00:00
|
|
|
$(container).append(this.$els);
|
2016-08-20 02:10:06 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
TodoToolbarView.prototype.render = function () {
|
2016-08-25 20:25:54 +00:00
|
|
|
var self = this;
|
|
|
|
var $els = this.$els;
|
2016-07-07 21:30:45 +00:00
|
|
|
|
2016-08-11 22:29:46 +00:00
|
|
|
self.mutableObject = mct.Objects.getMutable(this.domainObject);
|
2016-07-07 21:30:45 +00:00
|
|
|
|
2016-08-11 22:29:46 +00:00
|
|
|
var $add = $els.find('a.example-add');
|
|
|
|
var $remove = $els.find('a.example-remove');
|
2016-07-07 21:30:45 +00:00
|
|
|
|
2016-08-11 22:29:46 +00:00
|
|
|
$add.on('click', function () {
|
|
|
|
var $dialog = $(dialogTemplate),
|
|
|
|
view = {
|
|
|
|
show: function (container) {
|
|
|
|
$(container).append($dialog);
|
|
|
|
},
|
|
|
|
destroy: function () {}
|
|
|
|
};
|
2016-07-07 21:30:45 +00:00
|
|
|
|
2016-08-11 23:04:26 +00:00
|
|
|
new mct.Dialog(view, "Add a Task").show().then(function () {
|
2016-08-11 22:29:46 +00:00
|
|
|
var description = $dialog.find('input').val();
|
|
|
|
var tasks = self.mutableObject.get('tasks');
|
|
|
|
tasks.push({ description: description });
|
|
|
|
self.mutableObject.set('tasks', tasks);
|
2016-07-07 21:30:45 +00:00
|
|
|
});
|
2016-06-17 20:51:15 +00:00
|
|
|
});
|
2016-08-11 22:29:46 +00:00
|
|
|
$remove.on('click', function () {
|
|
|
|
var index = mct.selection.selected()[0].index;
|
|
|
|
if (index !== undefined) {
|
|
|
|
var tasks = self.mutableObject.get('tasks').filter(function (t, i) {
|
|
|
|
return i !== index;
|
|
|
|
});
|
|
|
|
self.mutableObject.set("tasks", tasks);
|
|
|
|
self.mutableObject.set("selected", undefined);
|
|
|
|
mct.selection.clear();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
self.$remove = $remove;
|
|
|
|
self.handleSelectionChange();
|
|
|
|
mct.selection.on('change', self.handleSelectionChange);
|
2016-06-17 18:43:18 +00:00
|
|
|
};
|
|
|
|
|
2016-07-07 21:30:45 +00:00
|
|
|
TodoToolbarView.prototype.handleSelectionChange = function () {
|
|
|
|
var selected = mct.selection.selected();
|
|
|
|
if (this.$remove) {
|
|
|
|
this.$remove.toggle(selected.length > 0);
|
|
|
|
}
|
2016-08-20 02:10:06 +00:00
|
|
|
this.render();
|
2016-07-07 21:30:45 +00:00
|
|
|
};
|
2016-06-17 18:43:18 +00:00
|
|
|
|
2016-07-07 21:30:45 +00:00
|
|
|
TodoToolbarView.prototype.destroy = function () {
|
|
|
|
mct.selection.off('change', this.handleSelectionChange);
|
2016-08-20 02:10:06 +00:00
|
|
|
this.mutableObject.stopListening();
|
2016-06-17 18:43:18 +00:00
|
|
|
};
|
|
|
|
|
2016-05-27 20:17:16 +00:00
|
|
|
mct.type('example.todo', todoType);
|
2016-07-20 20:46:03 +00:00
|
|
|
mct.view(mct.regions.main, {
|
|
|
|
view: function (domainObject) {
|
|
|
|
return new TodoView(domainObject);
|
|
|
|
},
|
|
|
|
canView: todoType.check.bind(todoType)
|
2016-06-17 17:53:56 +00:00
|
|
|
});
|
2016-07-20 20:46:03 +00:00
|
|
|
|
|
|
|
mct.view(mct.regions.toolbar, {
|
|
|
|
view: function (domainObject) {
|
|
|
|
return new TodoToolbarView(domainObject);
|
|
|
|
},
|
|
|
|
canView: todoType.check.bind(todoType)
|
2016-06-17 18:43:18 +00:00
|
|
|
});
|
2016-05-27 20:17:16 +00:00
|
|
|
|
|
|
|
return mct;
|
|
|
|
};
|
|
|
|
});
|