AsapList

AsapList Class

by Oski Krawczyk

HTML

<form id="add"><input type="text" /> <input type="submit" value="Add" /></form>

<h2>Todo</h2>
<ul id="active-todo"></ul>

<h2>Done</h2>
<ul id="done-todo"></ul>

CSS

h2 {
    font-size: 1.3em;
}

ul, li {
}

JavaScript

Element.implement({
    moveTo: function(element) {
        var clone = this.clone();
        clone.inject(element, 'top');
        clone.highlight();
        this.destroy();
    }
});

var AsapList = new Class({

    todo: {
        active: [{
            id: '1',
            title: 'some task'},
        {
            id: '2',
            title: 'some task 2'},
        {
            id: '3',
            title: 'some task 3'}
                    ],
        done: [{
            id: '4',
            title: 'done task'}]
    },

    initialize: function() {
        self = this;
        this.template = '<li data-id="{id}"><input type="checkbox" /> {title} <a href="#">Delete</a></li>';
        this.activeTemplate = '';
        this.doneTemplate = '';
        
        this.element = {
            activeList: document.id('active-todo'),
            doneList: document.id('done-todo'),
            lists: document.getElements('ul')
        };
        
        this.todo.active.each(function(item) {
            this.activeTemplate += this.template.substitute(item);
        }, this);
        this.element.activeList.adopt(Elements.from(this.activeTemplate));
        
        this.todo.done.each(function(item) {
            this.doneTemplate += this.template.substitute(item);
        }, this);
        this.element.doneList.adopt(Elements.from(this.doneTemplate));
        this.element.doneList.getElements('input').each(function(field){
            field.checked = true;
        });
        
        this.setup();
    },

    setup: function() {
        this.moveFromList();
        this.addItem();
    },

    moveFromList: function() {
        this.element.lists.addEvents({
            'change:relay(input)': this.moveItem,
            'click:relay(a)': this.deleteItem
        });
    },

    addItem: function() {
        document.id('add').addEvents({
            submit: function(event) {
                event.stop();
                var itemFrom =...