快速搭建fineui开发环境。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

287 lines
11 KiB

6 years ago
!(function() {
/**
* 顶部组件,提供输入框添加todo项目
* 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
*/
6 years ago
var ToDoListHeader = BI.inherit(BI.Widget, {
props: {
6 years ago
// 指定组件的className
6 years ago
baseCls: "my-todolist-header"
},
6 years ago
render: function() {
6 years ago
var self = this, o = this.options;
return {
6 years ago
type: "bi.horizontal_auto", // 水平居中布局
6 years ago
items: [
{
el: {
6 years ago
type: "bi.left_right_vertical_adapt", // 左右垂直居中布局
6 years ago
width: 600,
height: o.height,
items: {
left: [
{
el: {
type: "bi.label",
cls: "my-todolist-title",
text: "FineUI ToDoList",
height: o.height
}
}
],
right: [
{
el: {
type: "bi.editor",
6 years ago
ref: function(_ref) {
self.editor = _ref;
},
6 years ago
allowBlank: true,
cls: "my-todolist-header-editor",
watermark: "添加ToDo",
width: 300,
height: 24,
listeners: [
6 years ago
{ // 监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
6 years ago
eventName: "EVENT_ENTER",
6 years ago
action: function() {
// 注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
6 years ago
self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
6 years ago
self.editor.setValue("");
6 years ago
}
}
]
}
}
]
}
}
}
]
};
}
});
ToDoListHeader.EVENT_ADD = "EVENT_ADD";
BI.shortcut("my.todolist.header", ToDoListHeader);
6 years ago
})();!(function() {
/**
* todo项列表
*
*/
6 years ago
var List = BI.inherit(BI.Widget, {
props: {
6 years ago
// 指定组件的className
6 years ago
baseCls: "my-todolist-list",
text: "正在进行"
},
6 years ago
render: function() {
6 years ago
var self = this, o = this.options;
return {
type: "bi.vertical",
items: [
{
el: {
type: "bi.vertical_adapt",
height: 40,
items: [
{
type: "bi.label",
cls: "my-todolist-list-text",
textAlign: "left",
text: o.text,
width: 580
}, {
type: "bi.center_adapt",
cls: "my-todolist-list-count-container",
width: 20,
height: 20,
items: [
{
el: {
type: "bi.label",
6 years ago
ref: function(_ref) {
6 years ago
self.count = _ref;
},
text: "0"
}
}
]
}
]
}
6 years ago
}, { // 用bi.vertical布局作为列表项的容器.
type: "bi.vertical",
vgap: 10,
ref: function(_ref) {
6 years ago
self.list = _ref;
},
6 years ago
items: this._createItems(o.items)
6 years ago
}
]
};
},
6 years ago
_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: [
{ // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件
eventName: "EVENT_CHANGE",
action: function(v) {
self.fireEvent("EVENT_CHANGE", v);
}
}
]
});
});
6 years ago
},
6 years ago
_setCount: function(count) {
6 years ago
this.count.setText(count);
},
6 years ago
populate: function(items) {
6 years ago
this.list.populate(this._createItems(items));
this._setCount(items.length);
}
});
BI.shortcut("my.todolist.list", List);
6 years ago
})();!(function() {
/**
* todolist 组件
*/
6 years ago
var ToDoList = BI.inherit(BI.Widget, {
props: {
baseCls: "fine-to-do-list"
},
6 years ago
// 生命周期函数,在组件创建前
beforeCreate: function() {
// 初始化存储数据
this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
6 years ago
},
6 years ago
render: function() {
6 years ago
var self = this, o = this.options;
return {
6 years ago
type: "bi.vtape", // vtape布局,顶部高度固定,下部分列表占满高度
6 years ago
items: [
{
el: {
6 years ago
type: "my.todolist.header", // 顶部组件
6 years ago
listeners: [
6 years ago
{ // 监听组件的EVENT_ADD事件,新建todo项
6 years ago
eventName: "EVENT_ADD",
6 years ago
action: function(v) {
self.addToDo(v);
6 years ago
}
}
],
height: 40
},
height: 40
}, {
6 years ago
type: "bi.horizontal_auto", // 水平居中布局
cls: "my-todolist-background", // 添加className
6 years ago
items: [
{
el: {
6 years ago
type: "my.todolist.list", // need todo项列表
ref: function(_ref) {
6 years ago
self.todolist = _ref;
},
6 years ago
items: this._getNeedTodoList(),
6 years ago
text: "正在进行",
listeners: [
6 years ago
{ // 监听EVENT_CHANGE事件,完成某一项todo
6 years ago
eventName: "EVENT_CHANGE",
6 years ago
action: function(v) {
self.finishTodo(v);
6 years ago
}
}
],
width: 600
}
}, {
el: {
6 years ago
type: "my.todolist.list", // 已经完成的todo项列表
6 years ago
text: "已经完成",
6 years ago
items: this._getAlreadyDoneList(),
ref: function(_ref) {
6 years ago
self.donelist = _ref;
},
width: 600
}
}
]
}
]
};
6 years ago
},
6 years ago
6 years ago
_updateLocalStorage: function() {
localStorage.setItem("fine-todolist", JSON.stringify(this.list));
},
6 years ago
6 years ago
_getNeedTodoList: function() {
return BI.filter(this.list, function(index, item) {
return !item.done;
});
6 years ago
},
6 years ago
_getAlreadyDoneList: function() {
return BI.filter(this.list, function(index, item) {
return item.done;
});
6 years ago
},
6 years ago
/**
* 添加todo项
* @param text todo项的内容
*/
addToDo: function(text) {
this.list.push({
value: BI.UUID(),
text: text,
done: false
});
this.todolist.populate(this._getNeedTodoList());
this._updateLocalStorage();
},
6 years ago
6 years ago
/**
* 完成某一项todo
* @param v todo项的value
*/
finishTodo: function(v) {
BI.some(this.list, function(index, item) {
if (item.value === v) {
item.done = true;
}
});
this.todolist.populate(this._getNeedTodoList());
this.donelist.populate(this._getAlreadyDoneList());
this._updateLocalStorage();
6 years ago
}
});
6 years ago
BI.shortcut("my.todolist", ToDoList);
6 years ago
})();
6 years ago
!(function () {
6 years ago
// 将todolist组件挂载到#wrapper上.
6 years ago
BI.createWidget({
type: "my.todolist",
element: "#wrapper"
});
})();