fineui-start/dist/bundle.js

!(function() {
    /**
     * 顶部组件,提供输入框添加todo项目
     * 布局: bi.horizontal_auto 实现水平居中. bi.left_right_vertical_adapt 实现标题是输入框的靠左靠右垂直居中
     */
    var ToDoListHeader = BI.inherit(BI.Widget, {

        props: {
            //  指定组件的className
            baseCls: "my-todolist-header"
        },

        render: function() {
            var self = this, o = this.options;
            return {
                type: "bi.horizontal_auto",  // 水平居中布局
                items: [
                    {
                        el: {
                            type: "bi.left_right_vertical_adapt",  //  左右垂直居中布局
                            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",
                                            ref: function(_ref) {
                                                self.editor = _ref;
                                            },
                                            allowBlank: true,
                                            cls: "my-todolist-header-editor",
                                            watermark: "添加ToDo",
                                            width: 300,
                                            height: 24,
                                            listeners: [
                                                {  //  监听bi.editor 组件的"EVENT_ENTER"事件(即敲回车),触发事件ToDoListHeader.EVENT_ADD事件并将输入框值置空
                                                    eventName: "EVENT_ENTER",
                                                    action: function() {
                                                        //  注意:在这里this指向的是bi.editor的实例.通过bi.editor的getValue()方法获取输入框输入值.
                                                        self.fireEvent(ToDoListHeader.EVENT_ADD, this.getValue());
                                                        self.editor.setValue("");
                                                    }
                                                }
                                            ]
                                        }
                                    }
                                ]
                            }
                        }
                    }
                ]
            };
        }
    });

    ToDoListHeader.EVENT_ADD = "EVENT_ADD";

    BI.shortcut("my.todolist.header", ToDoListHeader);
})();!(function() {
    /**
     * todo项列表
     *
     */
    var List = BI.inherit(BI.Widget, {

        props: {
            //  指定组件的className
            baseCls: "my-todolist-list",
            text: "正在进行"
        },

        render: function() {
            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",
                                                ref: function(_ref) {
                                                    self.count = _ref;
                                                },
                                                text: "0"
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    }, {  // 用bi.vertical布局作为列表项的容器.
                        type: "bi.vertical",
                        vgap: 10,
                        ref: function(_ref) {
                            self.list = _ref;
                        },
                        items: this._createItems(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: [
                        {  // 为每个todo项添加"EVENT_CHANGE"事件监听,触发组件自身"EVENT_CHANGE"事件
                            eventName: "EVENT_CHANGE",
                            action: function(v) {
                                self.fireEvent("EVENT_CHANGE", v);
                            }
                        }
                    ]
                });
            });
        },

        _setCount: function(count) {
            this.count.setText(count);
        },

        populate: function(items) {
            this.list.populate(this._createItems(items));
            this._setCount(items.length);
        }
    });
    BI.shortcut("my.todolist.list", List);
})();!(function() {
    /**
     * todolist 组件
     */
    var ToDoList = BI.inherit(BI.Widget, {

        props: {
            baseCls: "fine-to-do-list"
        },

        // 生命周期函数,在组件创建前
        beforeCreate: function() {
            //  初始化存储数据
            this.list = localStorage.getItem("fine-todolist") ? JSON.parse(localStorage.getItem("fine-todolist")) : [];
        },

        render: function() {
            var self = this, o = this.options;
            return {
                type: "bi.vtape",  // vtape布局,顶部高度固定,下部分列表占满高度
                items: [
                    {
                        el: {
                            type: "my.todolist.header",  // 顶部组件
                            listeners: [
                                {  // 监听组件的EVENT_ADD事件,新建todo项
                                    eventName: "EVENT_ADD",
                                    action: function(v) {
                                        self.addToDo(v);
                                    }
                                }
                            ],
                            height: 40
                        },
                        height: 40
                    }, {
                        type: "bi.horizontal_auto",  // 水平居中布局
                        cls: "my-todolist-background",  // 添加className
                        items: [
                            {
                                el: {
                                    type: "my.todolist.list",  // need todo项列表
                                    ref: function(_ref) {
                                        self.todolist = _ref;
                                    },
                                    items: this._getNeedTodoList(),
                                    text: "正在进行",
                                    listeners: [
                                        {  // 监听EVENT_CHANGE事件,完成某一项todo
                                            eventName: "EVENT_CHANGE",
                                            action: function(v) {
                                                self.finishTodo(v);
                                            }
                                        }
                                    ],
                                    width: 600
                                }
                            }, {
                                el: {
                                    type: "my.todolist.list",  //  已经完成的todo项列表
                                    text: "已经完成",
                                    items: this._getAlreadyDoneList(),
                                    ref: function(_ref) {
                                        self.donelist = _ref;
                                    },
                                    width: 600
                                }
                            }
                        ]
                    }
                ]
            };
        },

        _updateLocalStorage: function() {
            localStorage.setItem("fine-todolist", JSON.stringify(this.list));
        },

        _getNeedTodoList: function() {
            return BI.filter(this.list, function(index, item) {
                return !item.done;
            });
        },

        _getAlreadyDoneList: function() {
            return BI.filter(this.list, function(index, item) {
                return item.done;
            });
        },

        /**
         * 添加todo项
         * @param text todo项的内容
         */
        addToDo: function(text) {
            this.list.push({
                value: BI.UUID(),
                text: text,
                done: false
            });
            this.todolist.populate(this._getNeedTodoList());
            this._updateLocalStorage();
        },

        /**
         * 完成某一项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();
        }
    });
    BI.shortcut("my.todolist", ToDoList);
})();
!(function () {
    // 将todolist组件挂载到#wrapper上.
    BI.createWidget({
        type: "my.todolist",
        element: "#wrapper"
    });
})();