Page MenuHomeCode
Files F390693

SortList.js
No OneTemporary
Actions

SortList.js
View Options

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
}
});
}

File Metadata

Mime Type
text/plain
Expires
Sat, Feb 22, 15:27 (1 h, 4 m ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
26518
Default Alt Text
SortList.js (5 KB)

Event Timeline