• X edit

    

        
    
    

        

            

                
                
                X
                edit
            
        
        

            All  
            Active  
            Completed  
            Clear completed
        
    

        

// model
brick.services.reg('tasksModel', function () {

    var recordManager = brick.services.get('recordManager')

    var local = localStorage.getItem('tasksModel');

    return new recordManager({
        key: 'id',
        eventPrefix: 'tasksModel',
        broadcast: true
    }).init(local && JSON.parse(local) || []);

});

//controller
brick.reg('tasksCtrl', function (scope) {
    scope = this;
    var tasksModel = brick.services.get('tasksModel')
    var type = 0;

    var render = function (e, msg) {
        var model = type ? type === 1 ? tasksModel.get(false, 'complete') : tasksModel.get(true, 'complete') : tasksModel.get();
        type === 0 && localStorage.setItem('tasksModel', JSON.stringify(model));
        scope.render('task-list', {model:model});
    };

    scope.on('tasksModel.*', render);

    scope.add = function (e) {
        var val = this.value;
        val && tasksModel.add({name: val, id: +new Date, complete: false});
        this.value = '';
    };

    scope.edit = function (e) {
        $(this).parent().find(':text').prop('disabled', false).focus();
    };

    scope.change = function (e) {
        var parent = $(this).parent();
        var id = parent.data('id');
        var complete = parent.find(':checkbox').prop('checked');
        var name = parent.find(':text').attr('disabled', true).val();
        tasksModel.find(id).set({complete: !!complete, name: name});
    };

    scope.remove = function (e, id) {
        tasksModel.find(id*1).remove();
    };

    scope.clear = function (e) {
        tasksModel.find(true, 'complete').remove();
    };

    scope.$elm.find('[ic-tabs=b]').on('ic-tabs.change', function (e, msg) {
        type = msg.activeTab.index() * 1;
        render();
    });

});

        

[ic-tabs=a] {
    border-bottom: solid 1px #D6D6D6;
}

[ic-tabs=a] span {
    display: inline-block;
    padding: 0.5em 2em;
    margin: 0 3px;
    border-radius: 0.3em 0.3em 0 0;
    border: solid 1px #D6D6D6;
    margin-bottom: -1px;
}

[ic-tabs=a] span.active {
    border-bottom: solid 1px #fff;
}

[ic-tabs=b] {
    padding: 15px 0;
}

[ic-tabs=b] .active {
    color: red;
}

.complete {
    text-decoration: line-through;
}

[ic-ctrl=tasksCtrl] li {
    position: relative;
    list-style: none;;
    border-bottom: 1px solid #ededed;
}

[ic-ctrl=tasksCtrl] [type=text] {
    width: 76%;
    padding: 0.5em 2%;
    border: none;
    background: transparent;
    min-width: 20em;
    padding: 0 0.5em;
    border-radius: .2em;
    height: 36px;
    line-height: 36px;
    border: solid 1px #ccd1d9;
}

[ic-ctrl=tasksCtrl] li [type=text] {
    border: solid 1px transparent;
}

[ic-ctrl=tasksCtrl] li [type=text]:focus {
    border: solid 1px #ccd1d9;
}

[ic-ctrl=tasksCtrl] button {
    margin-left: 0.5em;
    position: absolute;
    top: 6px;
    right: 0;
}