|
|
|
@ -1,18 +1,23 @@ |
|
|
|
!(function () { |
|
|
|
!(function() { |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* 顶部组件,提供输入框添加todo项目 |
|
|
|
|
|
|
|
* 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中 |
|
|
|
|
|
|
|
*/ |
|
|
|
var ToDoListHeader = BI.inherit(BI.Widget, { |
|
|
|
var ToDoListHeader = BI.inherit(BI.Widget, { |
|
|
|
|
|
|
|
|
|
|
|
props: { |
|
|
|
props: { |
|
|
|
|
|
|
|
// 指定组件的className
|
|
|
|
baseCls: "my-todolist-header" |
|
|
|
baseCls: "my-todolist-header" |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
render: function () { |
|
|
|
render: function() { |
|
|
|
var self = this, o = this.options; |
|
|
|
var self = this, o = this.options; |
|
|
|
return { |
|
|
|
return { |
|
|
|
type: "bi.horizontal_auto", |
|
|
|
type: "bi.horizontal_auto", // 水平居中布局
|
|
|
|
items: [ |
|
|
|
items: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
el: { |
|
|
|
el: { |
|
|
|
type: "bi.left_right_vertical_adapt", |
|
|
|
type: "bi.left_right_vertical_adapt", // 左右垂直居中布局
|
|
|
|
width: 600, |
|
|
|
width: 600, |
|
|
|
height: o.height, |
|
|
|
height: o.height, |
|
|
|
items: { |
|
|
|
items: { |
|
|
|
@ -30,17 +35,21 @@ |
|
|
|
{ |
|
|
|
{ |
|
|
|
el: { |
|
|
|
el: { |
|
|
|
type: "bi.editor", |
|
|
|
type: "bi.editor", |
|
|
|
|
|
|
|
ref: function(_ref) { |
|
|
|
|
|
|
|
self.editor = _ref; |
|
|
|
|
|
|
|
}, |
|
|
|
allowBlank: true, |
|
|
|
allowBlank: true, |
|
|
|
cls: "my-todolist-header-editor", |
|
|
|
cls: "my-todolist-header-editor", |
|
|
|
watermark: "添加ToDo", |
|
|
|
watermark: "添加ToDo", |
|
|
|
width: 300, |
|
|
|
width: 300, |
|
|
|
height: 24, |
|
|
|
height: 24, |
|
|
|
listeners: [ |
|
|
|
listeners: [ |
|
|
|
{ |
|
|
|
{ // 监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
|
|
|
|
eventName: "EVENT_ENTER", |
|
|
|
eventName: "EVENT_ENTER", |
|
|
|
action: function () { |
|
|
|
action: function() { |
|
|
|
|
|
|
|
// 注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
|
|
|
|
self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue()); |
|
|
|
self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue()); |
|
|
|
this.setValue(""); |
|
|
|
self.editor.setValue(""); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
@ -58,15 +67,20 @@ |
|
|
|
ToDoListHeader.EVENT_ADD = "EVENT_ADD"; |
|
|
|
ToDoListHeader.EVENT_ADD = "EVENT_ADD"; |
|
|
|
|
|
|
|
|
|
|
|
BI.shortcut("my.todolist.header", ToDoListHeader); |
|
|
|
BI.shortcut("my.todolist.header", ToDoListHeader); |
|
|
|
})();!(function () { |
|
|
|
})();!(function() { |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* todo项列表 |
|
|
|
|
|
|
|
* |
|
|
|
|
|
|
|
*/ |
|
|
|
var List = BI.inherit(BI.Widget, { |
|
|
|
var List = BI.inherit(BI.Widget, { |
|
|
|
|
|
|
|
|
|
|
|
props: { |
|
|
|
props: { |
|
|
|
|
|
|
|
// 指定组件的className
|
|
|
|
baseCls: "my-todolist-list", |
|
|
|
baseCls: "my-todolist-list", |
|
|
|
text: "正在进行" |
|
|
|
text: "正在进行" |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
render: function () { |
|
|
|
render: function() { |
|
|
|
var self = this, o = this.options; |
|
|
|
var self = this, o = this.options; |
|
|
|
return { |
|
|
|
return { |
|
|
|
type: "bi.vertical", |
|
|
|
type: "bi.vertical", |
|
|
|
@ -91,7 +105,7 @@ |
|
|
|
{ |
|
|
|
{ |
|
|
|
el: { |
|
|
|
el: { |
|
|
|
type: "bi.label", |
|
|
|
type: "bi.label", |
|
|
|
ref: function (_ref) { |
|
|
|
ref: function(_ref) { |
|
|
|
self.count = _ref; |
|
|
|
self.count = _ref; |
|
|
|
}, |
|
|
|
}, |
|
|
|
text: "0" |
|
|
|
text: "0" |
|
|
|
@ -101,78 +115,76 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
}, { |
|
|
|
}, { // 用bi.vertical布局作为列表项的容器.
|
|
|
|
type: "bi.button_group", |
|
|
|
type: "bi.vertical", |
|
|
|
ref: function (_ref) { |
|
|
|
vgap: 10, |
|
|
|
|
|
|
|
ref: function(_ref) { |
|
|
|
self.list = _ref; |
|
|
|
self.list = _ref; |
|
|
|
}, |
|
|
|
}, |
|
|
|
layouts: [ |
|
|
|
items: this._createItems(o.items) |
|
|
|
{ |
|
|
|
|
|
|
|
type: "bi.vertical", |
|
|
|
|
|
|
|
vgap: 10 |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
] |
|
|
|
items: o.items, |
|
|
|
}; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_createItems: function(items) { |
|
|
|
|
|
|
|
var self = this; |
|
|
|
|
|
|
|
return BI.map(items, function(index, item) { |
|
|
|
|
|
|
|
return BI.extend(item, { |
|
|
|
|
|
|
|
type: "bi.multi_select_item", // 节点采用复选节点展示
|
|
|
|
|
|
|
|
selected: item.done, // 已完成的todo项置为选中状态
|
|
|
|
|
|
|
|
disabled: item.done, // 已完成的todo项置为灰化状态
|
|
|
|
listeners: [ |
|
|
|
listeners: [ |
|
|
|
{ |
|
|
|
{ // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件
|
|
|
|
eventName: "EVENT_CHANGE", |
|
|
|
eventName: "EVENT_CHANGE", |
|
|
|
action: function (v) { |
|
|
|
action: function(v) { |
|
|
|
self.fireEvent("EVENT_CHANGE", v); |
|
|
|
self.fireEvent("EVENT_CHANGE", v); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
} |
|
|
|
}); |
|
|
|
] |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_createItems: function (items) { |
|
|
|
|
|
|
|
return BI.createItems(items, this.options.el); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
_setCount: function (count) { |
|
|
|
_setCount: function(count) { |
|
|
|
this.count.setText(count); |
|
|
|
this.count.setText(count); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
populate: function (items) { |
|
|
|
populate: function(items) { |
|
|
|
this.list.populate(this._createItems(items)); |
|
|
|
this.list.populate(this._createItems(items)); |
|
|
|
this._setCount(items.length); |
|
|
|
this._setCount(items.length); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
BI.shortcut("my.todolist.list", List); |
|
|
|
BI.shortcut("my.todolist.list", List); |
|
|
|
})();!(function () { |
|
|
|
})();!(function() { |
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* todolist 组件 |
|
|
|
|
|
|
|
*/ |
|
|
|
var ToDoList = BI.inherit(BI.Widget, { |
|
|
|
var ToDoList = BI.inherit(BI.Widget, { |
|
|
|
|
|
|
|
|
|
|
|
props: { |
|
|
|
props: { |
|
|
|
baseCls: "fine-to-do-list" |
|
|
|
baseCls: "fine-to-do-list" |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
_store: function () { |
|
|
|
// 生命周期函数,在组件创建前
|
|
|
|
return BI.Models.getModel("my.model.todolist"); |
|
|
|
beforeCreate: function() { |
|
|
|
|
|
|
|
// 初始化存储数据
|
|
|
|
|
|
|
|
this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : []; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
watch: { |
|
|
|
render: function() { |
|
|
|
todoList: function (items) { |
|
|
|
|
|
|
|
this.todolist.populate(items); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
doneList: function (items) { |
|
|
|
|
|
|
|
this.donelist.populate(items); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render: function () { |
|
|
|
|
|
|
|
var self = this, o = this.options; |
|
|
|
var self = this, o = this.options; |
|
|
|
return { |
|
|
|
return { |
|
|
|
type: "bi.vtape", |
|
|
|
type: "bi.vtape", // vtape布局,顶部高度固定,下部分列表占满高度
|
|
|
|
items: [ |
|
|
|
items: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
el: { |
|
|
|
el: { |
|
|
|
type: "my.todolist.header", |
|
|
|
type: "my.todolist.header", // 顶部组件
|
|
|
|
listeners: [ |
|
|
|
listeners: [ |
|
|
|
{ |
|
|
|
{ // 监听组件的EVENT_ADD事件,新建todo项
|
|
|
|
eventName: "EVENT_ADD", |
|
|
|
eventName: "EVENT_ADD", |
|
|
|
action: function (v) { |
|
|
|
action: function(v) { |
|
|
|
self.store.addToDo(v); |
|
|
|
self.addToDo(v); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
], |
|
|
|
@ -180,21 +192,22 @@ |
|
|
|
}, |
|
|
|
}, |
|
|
|
height: 40 |
|
|
|
height: 40 |
|
|
|
}, { |
|
|
|
}, { |
|
|
|
type: "bi.horizontal_auto", |
|
|
|
type: "bi.horizontal_auto", // 水平居中布局
|
|
|
|
cls: "bi-background", |
|
|
|
cls: "my-todolist-background", // 添加className
|
|
|
|
items: [ |
|
|
|
items: [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
el: { |
|
|
|
el: { |
|
|
|
type: "my.todolist.list", |
|
|
|
type: "my.todolist.list", // need todo项列表
|
|
|
|
ref: function (_ref) { |
|
|
|
ref: function(_ref) { |
|
|
|
self.todolist = _ref; |
|
|
|
self.todolist = _ref; |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
items: this._getNeedTodoList(), |
|
|
|
text: "正在进行", |
|
|
|
text: "正在进行", |
|
|
|
listeners: [ |
|
|
|
listeners: [ |
|
|
|
{ |
|
|
|
{ // 监听EVENT_CHANGE事件,完成某一项todo
|
|
|
|
eventName: "EVENT_CHANGE", |
|
|
|
eventName: "EVENT_CHANGE", |
|
|
|
action: function (v) { |
|
|
|
action: function(v) { |
|
|
|
self.store.finish(v); |
|
|
|
self.finishTodo(v); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
], |
|
|
|
@ -202,9 +215,10 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
}, { |
|
|
|
}, { |
|
|
|
el: { |
|
|
|
el: { |
|
|
|
type: "my.todolist.list", |
|
|
|
type: "my.todolist.list", // 已经完成的todo项列表
|
|
|
|
text: "已经完成", |
|
|
|
text: "已经完成", |
|
|
|
ref: function (_ref) { |
|
|
|
items: this._getAlreadyDoneList(), |
|
|
|
|
|
|
|
ref: function(_ref) { |
|
|
|
self.donelist = _ref; |
|
|
|
self.donelist = _ref; |
|
|
|
}, |
|
|
|
}, |
|
|
|
width: 600 |
|
|
|
width: 600 |
|
|
|
@ -214,67 +228,57 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
] |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
BI.shortcut("my.todolist", ToDoList); |
|
|
|
|
|
|
|
})(); |
|
|
|
|
|
|
|
!(function () { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ToDoListModel = BI.inherit(Fix.Model, { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
state: function () { |
|
|
|
_updateLocalStorage: function() { |
|
|
|
return { |
|
|
|
localStorage.setItem("fine-todolist", JSON.stringify(this.list)); |
|
|
|
list: [] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: {}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
computed: { |
|
|
|
_getNeedTodoList: function() { |
|
|
|
todoList: function () { |
|
|
|
return BI.filter(this.list, function(index, item) { |
|
|
|
var items = BI.filter(this.model.list, function (index, item) { |
|
|
|
|
|
|
|
return !item.done; |
|
|
|
return !item.done; |
|
|
|
}); |
|
|
|
}); |
|
|
|
return BI.map(items, function (index, item) { |
|
|
|
|
|
|
|
return BI.extend({ |
|
|
|
|
|
|
|
type: "bi.multi_select_item" |
|
|
|
|
|
|
|
}, item); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
doneList: function () { |
|
|
|
|
|
|
|
var items = BI.filter(this.model.list, function (index, item) { |
|
|
|
_getAlreadyDoneList: function() { |
|
|
|
|
|
|
|
return BI.filter(this.list, function(index, item) { |
|
|
|
return item.done; |
|
|
|
return item.done; |
|
|
|
}); |
|
|
|
}); |
|
|
|
return BI.map(items, function (index, item) { |
|
|
|
|
|
|
|
return BI.extend({ |
|
|
|
|
|
|
|
type: "bi.multi_select_item", |
|
|
|
|
|
|
|
selected: true, |
|
|
|
|
|
|
|
disabled: true |
|
|
|
|
|
|
|
}, item); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
actions: { |
|
|
|
/** |
|
|
|
addToDo: function (v) { |
|
|
|
* 添加todo项 |
|
|
|
this.model.list.push({ |
|
|
|
* @param text todo项的内容 |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
addToDo: function(text) { |
|
|
|
|
|
|
|
this.list.push({ |
|
|
|
value: BI.UUID(), |
|
|
|
value: BI.UUID(), |
|
|
|
text: v, |
|
|
|
text: text, |
|
|
|
done: false |
|
|
|
done: false |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
this.todolist.populate(this._getNeedTodoList()); |
|
|
|
|
|
|
|
this._updateLocalStorage(); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
finish: function (v) { |
|
|
|
/** |
|
|
|
BI.some(this.model.list, function (index, item) { |
|
|
|
* 完成某一项todo |
|
|
|
|
|
|
|
* @param v todo项的value |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
finishTodo: function(v) { |
|
|
|
|
|
|
|
BI.some(this.list, function(index, item) { |
|
|
|
if (item.value === v) { |
|
|
|
if (item.value === v) { |
|
|
|
item.done = true; |
|
|
|
item.done = true; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
this.todolist.populate(this._getNeedTodoList()); |
|
|
|
|
|
|
|
this.donelist.populate(this._getAlreadyDoneList()); |
|
|
|
|
|
|
|
this._updateLocalStorage(); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
BI.model("my.model.todolist", ToDoListModel); |
|
|
|
BI.shortcut("my.todolist", ToDoList); |
|
|
|
})(); |
|
|
|
})(); |
|
|
|
!(function () { |
|
|
|
!(function () { |
|
|
|
|
|
|
|
// 将todolist组件挂载到#wrapper上.
|
|
|
|
BI.createWidget({ |
|
|
|
BI.createWidget({ |
|
|
|
type: "my.todolist", |
|
|
|
type: "my.todolist", |
|
|
|
element: "#wrapper" |
|
|
|
element: "#wrapper" |
|
|
|
|
