mui.choosebox.js

一套基于开源javascript framework mootools的UI

if(!window["MUI"]) window["MUI"]={};

MUI.ChooseBox = new Class({
    options:{many:false},
    
    initialize:function(title, options){
	this.setOptions(options);
	this.title = title;
	this.list = [];
	this.active = this.options.many?[]:-1;
	this._markDir = false;
    },
    
    render:function(){
	var box = new Element("div", {"class":"mui-choosebox"});
	if(!!window.KeyEvent){
	    window.addEvent("click", function(e){
		box.activated = (box==e.target || box.hasChild(e.target));
	    });
	    window.addEvent("keydown",function(e){
		if(box.activated && (e.which==38||e.which==40)){
		    var evObj = document.createEvent('KeyEvents');
		    evObj.initKeyEvent('keydown', false, false, window, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.keyCode, e.charCode);
		    box.dispatchEvent(evObj);
		}
	    });
	}
	var list = new Element("ul");
	box.adopt(
	    new Element("div", {"class":"mui-choosebox-title"}).appendText(this.title),
	    list
	);
	
	this.list.each(function(item, index){
	    new Element("li").adopt(item).injectInside(list)
		.addEvent("click", function(e){
		    this._chosenIndex = index;
		    this._currentIndex = index;
		    this._itemChosen.pass([new Event(e), this._currentIndex], this)();
		}.bind(this));
	}.bind(this));

	box.addEvent("keydown", function(e){
	    e = new Event(e);
	    var keycode = e.code;
    
	    switch(keycode){
		default: break;
		case 38: // up
		    if(!this.active.contains(this._currentIndex-1)){
			this._markDir = 'up';
		    }
		    if(this._currentIndex>0){
			this._lastIndex=this._currentIndex;
			this._currentIndex--;
		    }
		    this._itemChosen.pass([e, this._currentIndex], this)();
		    break;
		case 40: // down
		    if(!this.active.contains(this._currentIndex+1)){
			this._markDir = 'down';
		    }
		    if(this._currentIndex<(this.list.length-1)){
			this._lastIndex=this._currentIndex;
			this._currentIndex++
		    }
		    this._itemChosen.pass([e, this._currentIndex], this)();
		    break;
	    }		
	}.bind(this));
	return box;
    },
    
    _itemChosen:function(event, index){
	// operate when the user click on Item.
	if(this.options.many){
	    //The user can choose many items
	    if(event.shift){
		switch(event.code){
		    case 38: // up
			if(this._markDir=='up'){
			    this.fireEvent("choose", index);
			    this.active.push(index);
			}else{
			    this.fireEvent("leave", this._lastIndex);
			    this.active.remove(this._lastIndex);
			}
			break;
		    case 40: // down
			if(this._markDir=='down'){
			    this.fireEvent("choose", index);
			    this.active.push(index);
			}else{
			    this.fireEvent("leave", this._lastIndex);
			    this.active.remove(this._lastIndex);
			}
			break;
		    default:
			var last = this.active.getLast();
			var min = Math.min(index, last),
			    max = Math.max(index, last);
			for(var i=min+1;i<=max;i++){
			    if(this.active.contains(i)){
				this.fireEvent("leave", i);
				this.active.remove(i);
			    }else{
				this.fireEvent("choose", i);
				this.active.push(i);
			    }
			}
			break;
		}
		return;
	    }else if(event.control){
		// the user save the last chosen items
		if(this.active.contains(index)){
		    // if the user click on chosen item
		    this.active.remove(index);
		    this.fireEvent("leave", index);
		    return;
		}else{
		    // add item to the active list
		    this.active.push(index);
		}
	    }else{
		// The user choose one item
		this.active.each(function(item){
		    this.fireEvent("leave", item);
		}.bind(this));
		this.active = [index];
	    }
	}else{
	    // The user can choose only one item
	    if(this.active>=0){
		// leave the last active item
		this.fireEvent("leave", this.active);
	    }
	    this.active = index;
	}
	this.fireEvent("choose", index);
    },

    
    getActive:function(){
	var ret;
	if(($type(this.active)=='number') && this.active>=0){
	    ret = [this.list[this.active]];
	}else{
	    ret = [];
	    this.active.each(function(index){
		ret.push(this.list[index])
	    }.bind(this));
	}
	return ret;
    }
});

MUI.ChooseBox.implement(new Events);
MUI.ChooseBox.implement(new Options);