filterselectgroup.js

一套基于开源javascript framework mootools的UI

var FilterSelectGroup = new Class({
    
    options:{
        removeable:true,
        multiple:false,
        filtered_id:0,
        filtered_name:"filtered",
        list_size:10,
        all_buttons:true
    },
    
    initialize:function(all_id,  options){
        this.setOptions(options);
        this.all = $(all_id);

        if(!!this.options.filtered_id){
            // Use existent select list
            this.filtered = $(this.options.filtered_id);
        }else{
            // Create New select list for filtration
            this.filtered = new Element("select").injectInside(this.all.getParent());
            this.filtered.size = this.options.list_size;
            this.filtered.name = this.filtered.id = this.options.filtered_name+"[]";
            if(this.options.multiple){
                this.filtered.multiple=true;
            }
        }

        var self = this;
        this.buttons = {
            add: new Element("input", {
                events:{
                    click: self._add.bind(self)
                },
                value: " >> ",
                type:"button"
            }),
            remove: new Element("input", {
                events:{
                    click: self._remove.bind(self)
                },
                value: " << ",
                type:"button"
            })
        }
        
        if(this.options.all_buttons){
            this.buttons["add all"] = new Element("input",{
                events:{
                    click:self._add_all.bind(self)
                },
                "type":"button",
                "value":" >> All >>"
            });
            this.buttons["remove all"] = new Element("input",{
                events:{
                    click:self._remove_all.bind(self)
                },
                "type":"button",
                "value":" << All <<"
            });
        }
        
        this.buttons["add"].injectBefore(this.filtered);
        this.buttons["remove"].injectBefore(this.filtered);
        this.buttons["add all"].injectBefore(this.filtered);
        this.buttons["remove all"].injectBefore(this.filtered);
    },
    
    _add:function(e){
        var selected = [];
        
        if(this.options.multiple){
            var options = this.all.options;
            for(var i=0;i<options.length;i++){
                if(options[i].selected){
                    selected.push(options[i]);
                }
            }
        }else{
            var index = this.all.selectedIndex;
            if(index>-1){
                selected.push(this.all.options[index]);
            }
        }
        selected = selected.sort(_sort_options);
        selected.each(function(item){
            this.filtered.adopt( this.options.removeable?item:(item.clone()) );
        }.bind(this)); 

        this.fireEvent("onAdd", selected);
    },
    
    _remove:function(e){
        var selected = [];
        if(this.options.multiple){
            var options = this.filtered.options;
            for(var i=0;i<options.length;i++){
                if(options[i].selected){
                    selected.push(options[i]);
                }
            }
        }else{
            var index = this.filtered.selectedIndex;            
            selected.push(this.filtered.options[index]);
        }
        
        selected.each(function(item){
            if(this.options.removeable){
                this.all.adopt(item);
            }else{
                item.remove();
            }
        }.bind(this));
        if(this.options.removeable){
            this.all.sort();
        }
        this.fireEvent("onRemove", selected)
    },

    
    _add_all:function(){
        this.filtered.empty();
        $A(this.all.options).each(function(op){
            this.filtered.adopt( this.options.removeable?op:op.clone());
        }.bind(this));        
    },
    
    _remove_all:function(){
        if(this.options.removeable){
            $A(this.filtered.options).each(function(op){
                this.all.adopt(op);
            }.bind(this));
            return;
        }
        this.filtered.empty();
    }
});

FilterSelectGroup.implement(new Options, new Events);

Element.extend({
    sort:function(){
        if(this.getTag()=="select"){
            var options = $A(this.options).sort(_sort_options);
            options.each(function(opt){
                opt.injectInside(this);
            }.bind(this))
        }
    } 
});


var _sort_options = function(a, b){
    if(a.value>b.value) return 1;
    if(a.value<b.value) return -1;
    return 0;
}