Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dojox.widget.SortList"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.

dojo._hasResource["dojox.widget.SortList"] = true;

dojo.provide("dojox.widget.SortList");

dojo.experimental("dojox.widget.SortList"); // level: prototype, designed for dijit.chat.demo

dojo.require("dijit.layout._LayoutWidget");

dojo.require("dijit._Templated");

dojo.declare("dojox.widget.SortList",

	[dijit.layout._LayoutWidget, dijit._Templated],

	{

	// summary: a sortable <ul> with a fixed header for use in dijit.demos.chat

	//	for demonstration purposes only for now. feel free to make API suggestions

	//	or fixes.

	//

	// title: String

	//	the title in the header

	title: "",

	// heading: String

	//	in the event a parent container is expecting a title="" attribute, set it for the parent

	//	via title, and the title of this widget via heading="" ... assuming you want different

	//	titles for each. eg: TabContainer, AccordionContainer, etc.

	heading: "",

	// descending: Boolean

	//	toggle sort order based on this value.

	descending: true,

	// selected: Array

	//	a list of the selected <li> nodes at any given time.

	selected: null,

	// sortable: Boolean

	//	toggle to enable/disable sorting

	sortable: true,

	// FIXME: this is really simple store support

	store: "",

	key: "name",

	templateString:"<div class=\"sortList\" id=\"${id}\">\n\t\t<div class=\"sortListTitle\" dojoAttachPoint=\"titleNode\">\n\t\t<div class=\"sortListIcon\"></div>\n\t\t<span dojoAttachPoint=\"focusNode\">${title}</span>\n\t\t</div>\n\t\t<div class=\"sortListBodyWrapper\" dojoAttachEvent=\"onmouseover: _set, onmouseout: _unset, onclick:_handleClick\" dojoAttachPoint=\"bodyWrapper\">\n\t\t<ul dojoAttachPoint=\"containerNode\" class=\"sortListBody\"></ul>\n\t</div>\n</div>\n",

	_addItem: function(item){

		var node = document.createElement("li");

		var text = this.store.getValue(item,this.key);

		node.innerHTML = text;

		this.containerNode.appendChild(node);

	},

	postCreate: function(){

		if (this.store){

			// FIXME: is this right?

			this.store = eval(this.store);

			var props = {

				onItem: dojo.hitch(this,"_addItem"),

				onComplete: dojo.hitch(this,"onSort")

			};

			this.store.fetch(props);

		}else{ this.onSort(); }

		this.inherited("postCreate",arguments);

	},

	startup: function(){

		this.inherited("startup",arguments);

		if(this.heading){

			this.setTitle(this.heading); this.title=this.heading;

		}

		// we cheat, and give the browser just enough time so we know our height

		setTimeout(dojo.hitch(this,"resize"),5);

		if (this.sortable){ this.connect(this.titleNode,"onclick", "onSort"); }

	},

	resize: function(){

		// summary: do our additional calculations when resize() is called by or in a parent

		this.inherited("resize",arguments);

		// FIXME:

		// the 10 comes from the difference between the contentBox and calculated height

		// because of badding and border extents. this shouldn't be done this way, a theme change will

		// break it: but we also don't want to run getComputedStyle or dojo.coords() every time resize()

		// is fired.

		var offset = ((this._contentBox.h) - (dojo.style(this.titleNode,"height")))-10;

		this.bodyWrapper.style.height = Math.abs(offset) + "px";

	},

	onSort: function(/* Event */e){

		// summary: sort the data, and style the nodes.

		var arr = dojo.query("li",this.domNode);

		if (this.sortable){

			this.descending = !this.descending;

			dojo.addClass(this.titleNode,((this.descending)?"sortListDesc":"sortListAsc"));

			dojo.removeClass(this.titleNode,((this.descending)?"sortListAsc":"sortListDesc"));

			arr.sort(this._sorter);

			if(this.descending){ arr.reverse(); }

		}

		var i=0;

		dojo.forEach(arr,function(item){

			dojo[(((i++)%2)===0)?"addClass":"removeClass"](item,"sortListItemOdd");

			this.containerNode.appendChild(item);

		},this);

	},

	_set: function(/* Event */e){

		// summary: set hover state

		if (e.target != this.bodyWrapper){

			dojo.addClass(e.target,"sortListItemHover");

		}

	},

	_unset: function(/* Event */e){

		// summary: remove hover state (FIXME: combine with _set?)

		dojo.removeClass(e.target,"sortListItemHover");

	},

	_handleClick: function(/* Event */e){

		// summary: click listener for data portion of widget. toggle selected state

		//	of node, and update this.selected array accordingly

		dojo.toggleClass(e.target,"sortListItemSelected");

		e.target.focus();

		this._updateValues(e.target.innerHTML);

	},

	_updateValues: function(){

		this._selected = dojo.query("li.sortListItemSelected",this.containerNode);

		this.selected = [];

		dojo.forEach(this._selected,function(node){

			this.selected.push(node.innerHTML);

		},this);

		this.onChanged(arguments);

	},

	_sorter: function(a,b){

		// summary: a basic sort function, use query sort, or keep this?

		var aStr = a.innerHTML;

		var bStr = b.innerHTML;

		if(aStr>bStr){ return 1; }

		if(aStr<bStr){ return -1; }

		return 0;

	},

	setTitle: function(/* String */title){

		// summary: Sets the widget title to a String

		this.focusNode.innerHTML = title;

	},

	onChanged: function(){

		// summary: stub function, passes the last changed item, and is fired after current state

	}

});

}