[Dynapi-Widgetdev] Events Lists and that ...

[Alain M. <ala...@em...>]

Yeah, I had a problem with lists the first app I tried to write, one list would catch the other's select message.

This 'should' fix it ... but it *may* introduce new bugs of its own ... your mileage may vary!

You may notice that in for the 'afterSelect' functionality I have used setTimeout to call the 'external' function. The reason for this is because of my application which needs to do a fair amount of processing at that point, and for some reason this processing holds DynAPI back from redawing the screen even though it is the last statement in the method!


Al.

/*
   DynAPI Distribution
   FastList Class
    This Class is VERY similar to the standard FastList Class, however it is a 
    LOT faster to create and has slightly better performance when running.
    It also has the ability to create horizontal lists.
     NB: the listItem does NOT inherit from the Label class for speed of 
      execution ... the theory goes that less EventListeners = better performance

   The DynAPI Distribution is distributed under the terms of the GNU LGPL license.

   Requirements:
	dynapi.api [dynlayer, dyndocument, browser, events]
*/

function FastListItem(text,value){
	this.DynLayer = DynLayer;
	this.DynLayer();
	this.value = value;
	this.deselectable = true;
	this.isMouseOver = false;
	this.selected = false;
	this.index=-1

	this.wrap = false;
	this.padding = 4;
	this.align = 'left';
	this.itemStyle = {};
	this.itemStyle.font = {};
	this.itemStyle.font.family="arial";
	this.itemStyle.font.size="2";
	this.itemStyle.font.color = "#000000";
	this.pWidth = false;
	this.pHeight = false;
	this.setText(text);
	this.addEventListener(FastListItem.listevents);
	// Ns6 hack
	this.first = true
}
FastListItem.prototype = new DynLayer();

FastListItem.listevents = new EventListener();
FastListItem.listevents.onmouseover = function (e) {
	e.cancelBrowserEvent();
	var o = e.getSource();
	o.list.listMouseOver(o.index)
};
FastListItem.listevents.onmouseout = function (e) {
	e.cancelBrowserEvent();
	var o = e.getSource();
	o.list.listMouseOut(o.index)
};
FastListItem.listevents.onmousedown = function (e) {
	e.cancelBrowserEvent();
	var o = e.getSource();
	o.setSelected(!o.selected);
};
FastListItem.listevents.oncreate = function(e) {
	var o = e.getSource();
	if (o.created&&(is.ie||is.dom)) {
		o.css.cursor="hand";
	}
};
FastListItem.listevents.onmouseup = function(e) {
	e.cancelBrowserEvent();
	// This is needed because since mousedown are cancelled, NS4 does not generate its own 'click' event
	if(is.ns4) {
		var ne = new DynMouseEvent(e)
		ne.type = 'click'
		e.getSource().invokeEvent('click',ne)
	}
};
FastListItem.listevents.onresize = function(e) {
	var o = e.getSource();
	if (o.created) {
		if(is.ns&&o.wrap) o.setText(o.text)
		if(is.ns6&&o.first) {o.first=false;return}
		o.pack((o.getWidth()==null)||(o.wrap&&o.pWidth),o.getHeight()==null||o.pHeight)
	}
};

FastListItem.prototype.setSelected = function(b) {
	if (this.selected==b || !this.deselectable) return;
	this.selected=b;
	if (b) {
		this.setBgColor(this.itemStyle.bgColorSelect);
		this.list.select(this)
	}
	else {
		this.setBgColor(this.isMouseOver?this.itemStyle.bgColorRoll:this.itemStyle.bgcolor)
		this.list.deselect(this)
	}
};
FastListItem.prototype.setColors = function(bg,bgr,bgs,tn) {
    var s = this.itemStyle;
	s.bgcolor = bg||'#eeeeee';
	s.bgColorRoll = bgr||'#cccccc';
	s.bgColorSelect = bgs||'lightblue';
	s.font.textColor = tn||'#000000';
	this.setBgColor(s.bgcolor);
	this.setText(this.text);
};
FastListItem.prototype.getValue = function() {
	return this.value;
};
FastListItem.prototype.setText = function(text) {
	this.text = text || '';
	var width = this.wrap? 'width='+this.w : '';
	var wrap = this.wrap? '':'nowrap';
	var t1 = '<table '+width+' cellpadding='+this.padding+' cellspacing=0 border=0><td align="'+this.align+'" '+wrap+'><font size="'+this.itemStyle.font.size+'" face="'+this.itemStyle.font.family+'" color="';
	var t2 = '">'+this.text+'</font></td></table>';
	this.textHTML = t1+this.itemStyle.font.color+t2;

	this.setHTML(this.textHTML);
};
FastListItem.prototype.pack = function(bWidth,bHeight) {
	if (!bWidth && bWidth!=false) bWidth=true;
	if (!bHeight && bHeight!=false) bHeight=true;
	this.pWidth = bWidth;
	this.pHeight = bHeight;
	var w = bWidth? this.getContentWidth() : this.w;
	var h = bHeight? this.getContentHeight() : this.h;
	if (this.created) this.setSize(w,h,false);
};


function FastList(){
	this.DynLayer=DynLayer;
	this.DynLayer();
	this.multiMode = false;
	this.items = [];
	this.addEventListener(FastList.listener);
	/*default style*/
	this.listStyle = {};
	this.listStyle.borders = 1;
	this.listStyle.spacing = 1;
	this.listStyle.bg = "#eeeeee";
	this.listStyle.bgRoll = "#cccccc";
	this.listStyle.bgSelect = "lightblue";
	this.listStyle.textNormal = "#000000";
	this.totalHeight = this.listStyle.borders;
	this.overIndex = -1;
	this.setVertical();
}
FastList.prototype = new DynLayer();

FastList.listener = new EventListener()
FastList.listener.oncreate = function(e){
    var o = e.getSource();
	o.arrangeItems();
};
FastList.listener.afterSelect = function(e){
    var o = e.getSource();
	o.afterSelect();
};

FastList.prototype.setVertical = function() {
	this.vertical = true;
	this.horizontal = false;
};
FastList.prototype.setHorizontal = function() {
	this.vertical = false;
	this.horizontal = true;
};
FastList.prototype.add = function(text,value){
	var i = new FastListItem(text,value);
	i.list = this;
	var ls = this.listStyle;
	i.setColors(ls.bg,ls.bgRoll,ls.bgSelect,ls.textNormal);
	i.index=this.items.length
	this.items[this.items.length] = i;
	this.addChild(i);
};
FastList.prototype.arrangeItems = function(){
	if (this.vertical) {
		this.totalHeight = this.listStyle.borders;
		for (var i=0;i<this.items.length;i++){
			this.items[i].moveTo(this.listStyle.borders,this.totalHeight);
			this.items[i].setWidth(this.w-this.listStyle.borders*2);
			this.totalHeight = this.totalHeight+this.items[i].h+this.listStyle.spacing;	
		}
		this.setHeight(this.totalHeight-this.listStyle.spacing+this.listStyle.borders);
	} else {
		this.totalWidth = this.listStyle.borders;
		for (var i=0;i<this.items.length;i++){
			this.items[i].moveTo(this.totalWidth,this.listStyle.borders);
			this.items[i].setHeight(this.h-this.listStyle.borders*2);
			this.totalWidth = this.totalWidth+this.items[i].w+this.listStyle.spacing;	
		}
		this.setWidth(this.totalWidth-this.listStyle.spacing+this.listStyle.borders);
	}
};
FastList.prototype.remove = function(item){
	var i = this.getIndexOf(item);
	if (i==-1) return;
	this.items[i].deleteFromParent();
	Methods.removeFromArray(this.items,item);
	if (this.selectedIndex==i){
		this.selectedIndex=-1;
		this.selectedItem=null;
	}
};
FastList.prototype.removeAll = function(){
	for (var i=this.items.length-1; i>-1; i--) {
		this.items[i].removeFromParent();
	}
	delete this.items
	this.items=[];
	this.selectedIndex=-1;
	this.selectedItem=null;
};
FastList.prototype.origSetWidth = DynLayer.prototype.setWidth;
FastList.prototype.setWidth = function(w){
	this.origSetWidth(w);
	if (this.vertical) {
		for (var i=0;i<this.items.length;i++){
			this.items[i].setWidth(w-this.listStyle.borders*2);
		}
	}
};
FastList.prototype.origSetHeight = DynLayer.prototype.setHeight;
FastList.prototype.setHeight = function(w){
	this.origSetHeight(w);
	if (!this.vertical) {
		for (var i=0;i<this.items.length;i++){
			this.items[i].setHeight(w-this.listStyle.borders*2);
		}
	}
};
FastList.prototype.getIndexOf = function(item){
	for (var i=0;i<this.items.length;i++){
		if (this.items[i]==item) return i;
	}
	return -1;
};
FastList.prototype.afterSelect = function() {};
FastList.prototype.select = function(item){
	var oldSelectedIndex=this.selectedIndex
	this.selectedIndex = this.getIndexOf(item);
	this.selectedItem = item;
	if (!this.multiMode) { // APM - 04/04/01 - Unset the previously selected index
		if (oldSelectedIndex > -1) this.items[oldSelectedIndex].setSelected(false);
	}
	setTimeout(this.afterSelect,1);
};
FastList.prototype.selectIndex = function (i) {
	this.items[i].setSelected(true);
};
FastList.prototype.deselect = function(item){
	if (this.selectedItem == item){
		this.selectedItem = null;
		this.selectedIndex = -1;
	}
};
FastList.prototype.deselectAll = function(){
	for (var i=0;i<this.items.length;i++) {
		if (this.items[i].selected) this.items[i].setSelected(false);
	}
};
	
FastList.prototype.setSelectionMode = function(mode) {
	this.deselectAll();
	this.multiMode = mode;
};
FastList.prototype.setColors = function(bg,bgRoll,bgSelect,textNormal){
    var ls = this.listStyle;
	ls.bg = bg||ls.bg;
	ls.bgRoll = bgRoll||ls.bgRoll;
	ls.bgSelect = bgSelect||ls.bgSelect;
	ls.textNormal = textNormal||ls.textNormal;
	if (this.items.length == 0) return;
	for (var i=0;i<this.items.length;i++) {
		this.items[i].setColors(bg,bgRoll,bgSelect,textNormal);
	}
};
FastList.prototype.getSelectedIndex = function() {
    return this.selectedIndex;
};
FastList.prototype.getSelectedItem = function() {
	return this.selectedItem;
};
FastList.prototype.getSelectedIndexes = function() {
	var a = [];
	for (var i=0;i<this.items.length;i++) if (this.items[i].selected) a[a.length] = i;
	return a;
};
FastList.prototype.setBorders = function(b){
	this.listStyle.borders = b;
};
FastList.prototype.setSpacing = function(b){
	this.listStyle.spacing = b;
};
FastList.prototype.listMouseOver = function (i){
	if (this.overIndex>-1) {
		var o = this.items[this.overIndex]
		if (!o.selected) {
			o.setBgColor(o.itemStyle.bgcolor);
		}
		o.isMouseOver = false;
	}
	var o = this.items[i]
	if (!o.selected) {
		o.setBgColor(o.itemStyle.bgColorRoll);
		o.isMouseOver = true;
	}
	this.overIndex=i
};
FastList.prototype.listMouseOut = function (i){
	if (this.overIndex>-1) {
		var o = this.items[this.overIndex]
		if (!o.selected) {
			o.setBgColor(o.itemStyle.bgcolor);
		}
		o.isMouseOver = false;
	}
	var o = this.items[i]
	if (!o.selected) {
		o.setBgColor(o.itemStyle.bgcolor);
	}
	o.isMouseOver = false;
	this.overIndex=-1
};

-----------------------------------------------
FREE! The World's Best Email Address @email.com
Reserve your name now at http://www.email.com