377 lines
11 KiB
JavaScript
377 lines
11 KiB
JavaScript
//>>built
|
|
define("dojox/mobile/ListItem", [
|
|
"dojo/_base/array",
|
|
"dojo/_base/connect",
|
|
"dojo/_base/declare",
|
|
"dojo/_base/lang",
|
|
"dojo/dom-class",
|
|
"dojo/dom-construct",
|
|
"dojo/has",
|
|
"./common",
|
|
"./_ItemBase",
|
|
"./TransitionEvent"
|
|
], function(array, connect, declare, lang, domClass, domConstruct, has, common, ItemBase, TransitionEvent){
|
|
|
|
/*=====
|
|
var ItemBase = dojox.mobile._ItemBase;
|
|
=====*/
|
|
|
|
// module:
|
|
// dojox/mobile/ListItem
|
|
// summary:
|
|
// An item of either RoundRectList or EdgeToEdgeList.
|
|
|
|
return declare("dojox.mobile.ListItem", ItemBase, {
|
|
// summary:
|
|
// An item of either RoundRectList or EdgeToEdgeList.
|
|
// description:
|
|
// ListItem represents an item of either RoundRectList or
|
|
// EdgeToEdgeList. There are three ways to move to a different
|
|
// view, moveTo, href, and url. You can choose only one of them.
|
|
|
|
// rightText: String
|
|
// A right-aligned text to display on the item.
|
|
rightText: "",
|
|
|
|
// rightIcon: String
|
|
// An icon to display at the right hand side of the item. The value
|
|
// can be either a path for an image file or a class name of a DOM
|
|
// button.
|
|
rightIcon: "",
|
|
|
|
// rightIcon2: String
|
|
// An icon to display at the left of the rightIcon. The value can
|
|
// be either a path for an image file or a class name of a DOM
|
|
// button.
|
|
rightIcon2: "",
|
|
|
|
|
|
// anchorLabel: Boolean
|
|
// If true, the label text becomes a clickable anchor text. When
|
|
// the user clicks on the text, the onAnchorLabelClicked handler is
|
|
// called. You can override or connect to the handler and implement
|
|
// any action. The handler has no default action.
|
|
anchorLabel: false,
|
|
|
|
// noArrow: Boolean
|
|
// If true, the right hand side arrow is not displayed.
|
|
noArrow: false,
|
|
|
|
// selected: Boolean
|
|
// If true, the item is highlighted to indicate it is selected.
|
|
selected: false,
|
|
|
|
// checked: Boolean
|
|
// If true, a check mark is displayed at the right of the item.
|
|
checked: false,
|
|
|
|
// arrowClass: String
|
|
// An icon to display as an arrow. The value can be either a path
|
|
// for an image file or a class name of a DOM button.
|
|
arrowClass: "mblDomButtonArrow",
|
|
|
|
// checkClass: String
|
|
// An icon to display as a check mark. The value can be either a
|
|
// path for an image file or a class name of a DOM button.
|
|
checkClass: "mblDomButtonCheck",
|
|
|
|
// variableHeight: Boolean
|
|
// If true, the height of the item varies according to its
|
|
// content. In dojo 1.6 or older, the "mblVariableHeight" class was
|
|
// used for this purpose. In dojo 1.7, adding the mblVariableHeight
|
|
// class still works for backward compatibility.
|
|
variableHeight: false,
|
|
|
|
|
|
// rightIconTitle: String
|
|
// An alt text for the right icon.
|
|
rightIconTitle: "",
|
|
|
|
// rightIcon2Title: String
|
|
// An alt text for the right icon2.
|
|
rightIcon2Title: "",
|
|
|
|
|
|
// btnClass: String
|
|
// Deprecated. For backward compatibility.
|
|
btnClass: "",
|
|
|
|
// btnClass2: String
|
|
// Deprecated. For backward compatibility.
|
|
btnClass2: "",
|
|
|
|
// tag: String
|
|
// A name of html tag to create as domNode.
|
|
tag: "li",
|
|
|
|
postMixInProperties: function(){
|
|
// for backward compatibility
|
|
if(this.btnClass){
|
|
this.rightIcon = this.btnClass;
|
|
}
|
|
this._setBtnClassAttr = this._setRightIconAttr;
|
|
this._setBtnClass2Attr = this._setRightIcon2Attr;
|
|
},
|
|
|
|
buildRendering: function(){
|
|
this.domNode = this.srcNodeRef || domConstruct.create(this.tag);
|
|
this.inherited(arguments);
|
|
this.domNode.className = "mblListItem" + (this.selected ? " mblItemSelected" : "");
|
|
|
|
// label
|
|
var box = this.box = domConstruct.create("DIV");
|
|
box.className = "mblListItemTextBox";
|
|
if(this.anchorLabel){
|
|
box.style.cursor = "pointer";
|
|
}
|
|
var r = this.srcNodeRef;
|
|
if(r && !this.label){
|
|
this.label = "";
|
|
for(var i = 0, len = r.childNodes.length; i < len; i++){
|
|
var n = r.firstChild;
|
|
if(n.nodeType === 3 && lang.trim(n.nodeValue) !== ""){
|
|
n.nodeValue = this._cv ? this._cv(n.nodeValue) : n.nodeValue;
|
|
this.labelNode = domConstruct.create("SPAN", {className:"mblListItemLabel"});
|
|
this.labelNode.appendChild(n);
|
|
n = this.labelNode;
|
|
}
|
|
box.appendChild(n);
|
|
}
|
|
}
|
|
if(!this.labelNode){
|
|
this.labelNode = domConstruct.create("SPAN", {className:"mblListItemLabel"}, box);
|
|
}
|
|
if(this.anchorLabel){
|
|
box.style.display = "inline"; // to narrow the text region
|
|
}
|
|
|
|
var a = this.anchorNode = domConstruct.create("A");
|
|
a.className = "mblListItemAnchor";
|
|
this.domNode.appendChild(a);
|
|
a.appendChild(box);
|
|
},
|
|
|
|
startup: function(){
|
|
if(this._started){ return; }
|
|
this.inheritParams();
|
|
var parent = this.getParent();
|
|
if(this.moveTo || this.href || this.url || this.clickable || (parent && parent.select)){
|
|
this._onClickHandle = this.connect(this.anchorNode, "onclick", "onClick");
|
|
}
|
|
this.setArrow();
|
|
|
|
if(domClass.contains(this.domNode, "mblVariableHeight")){
|
|
this.variableHeight = true;
|
|
}
|
|
if(this.variableHeight){
|
|
domClass.add(this.domNode, "mblVariableHeight");
|
|
setTimeout(lang.hitch(this, "layoutVariableHeight"));
|
|
}
|
|
|
|
this.set("icon", this.icon); // _setIconAttr may be called twice but this is necessary for offline instantiation
|
|
if(!this.checked && this.checkClass.indexOf(',') !== -1){
|
|
this.set("checked", this.checked);
|
|
}
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
resize: function(){
|
|
if(this.variableHeight){
|
|
this.layoutVariableHeight();
|
|
}
|
|
},
|
|
|
|
onClick: function(e){
|
|
var a = e.currentTarget;
|
|
var li = a.parentNode;
|
|
if(domClass.contains(li, "mblItemSelected")){ return; } // already selected
|
|
if(this.anchorLabel){
|
|
for(var p = e.target; p.tagName !== this.tag.toUpperCase(); p = p.parentNode){
|
|
if(p.className == "mblListItemTextBox"){
|
|
domClass.add(p, "mblListItemTextBoxSelected");
|
|
setTimeout(function(){
|
|
domClass.remove(p, "mblListItemTextBoxSelected");
|
|
}, has("android") ? 300 : 1000);
|
|
this.onAnchorLabelClicked(e);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
var parent = this.getParent();
|
|
if(parent.select){
|
|
if(parent.select === "single"){
|
|
if(!this.checked){
|
|
this.set("checked", true);
|
|
}
|
|
}else if(parent.select === "multiple"){
|
|
this.set("checked", !this.checked);
|
|
}
|
|
}
|
|
this.select();
|
|
|
|
if (this.href && this.hrefTarget) {
|
|
common.openWindow(this.href, this.hrefTarget);
|
|
return;
|
|
}
|
|
var transOpts;
|
|
if(this.moveTo || this.href || this.url || this.scene){
|
|
transOpts = {moveTo: this.moveTo, href: this.href, url: this.url, scene: this.scene, transition: this.transition, transitionDir: this.transitionDir};
|
|
}else if(this.transitionOptions){
|
|
transOpts = this.transitionOptions;
|
|
}
|
|
|
|
if(transOpts){
|
|
this.setTransitionPos(e);
|
|
return new TransitionEvent(this.domNode,transOpts,e).dispatch();
|
|
}
|
|
},
|
|
|
|
select: function(){
|
|
// summary:
|
|
// Makes this widget in the selected state.
|
|
var parent = this.getParent();
|
|
if(parent.stateful){
|
|
parent.deselectAll();
|
|
}else{
|
|
var _this = this;
|
|
setTimeout(function(){
|
|
_this.deselect();
|
|
}, has("android") ? 300 : 1000);
|
|
}
|
|
domClass.add(this.domNode, "mblItemSelected");
|
|
},
|
|
|
|
deselect: function(){
|
|
// summary:
|
|
// Makes this widget in the deselected state.
|
|
domClass.remove(this.domNode, "mblItemSelected");
|
|
},
|
|
|
|
onAnchorLabelClicked: function(e){
|
|
// summary:
|
|
// Stub function to connect to from your application.
|
|
},
|
|
|
|
layoutVariableHeight: function(){
|
|
var h = this.anchorNode.offsetHeight;
|
|
if(h === this.anchorNodeHeight){ return; }
|
|
this.anchorNodeHeight = h;
|
|
array.forEach([
|
|
this.rightTextNode,
|
|
this.rightIcon2Node,
|
|
this.rightIconNode,
|
|
this.iconNode
|
|
], function(n){
|
|
if(n){
|
|
var t = Math.round((h - n.offsetHeight) / 2);
|
|
n.style.marginTop = t + "px";
|
|
}
|
|
});
|
|
},
|
|
|
|
setArrow: function(){
|
|
// summary:
|
|
// Sets the arrow icon if necessary.
|
|
if(this.checked){ return; }
|
|
var c = "";
|
|
var parent = this.getParent();
|
|
if(this.moveTo || this.href || this.url || this.clickable){
|
|
if(!this.noArrow && !(parent && parent.stateful)){
|
|
c = this.arrowClass;
|
|
}
|
|
}
|
|
if(c){
|
|
this._setRightIconAttr(c);
|
|
}
|
|
},
|
|
|
|
_setIconAttr: function(icon){
|
|
if(!this.getParent()){ return; } // icon may be invalid because inheritParams is not called yet
|
|
this.icon = icon;
|
|
var a = this.anchorNode;
|
|
if(!this.iconNode){
|
|
if(icon){
|
|
var ref = this.rightIconNode || this.rightIcon2Node || this.rightTextNode || this.box;
|
|
this.iconNode = domConstruct.create("DIV", {className:"mblListItemIcon"}, ref, "before");
|
|
}
|
|
}else{
|
|
domConstruct.empty(this.iconNode);
|
|
}
|
|
if(icon && icon !== "none"){
|
|
common.createIcon(icon, this.iconPos, null, this.alt, this.iconNode);
|
|
if(this.iconPos){
|
|
domClass.add(this.iconNode.firstChild, "mblListItemSpriteIcon");
|
|
}
|
|
domClass.remove(a, "mblListItemAnchorNoIcon");
|
|
}else{
|
|
domClass.add(a, "mblListItemAnchorNoIcon");
|
|
}
|
|
},
|
|
|
|
_setCheckedAttr: function(/*Boolean*/checked){
|
|
var parent = this.getParent();
|
|
if(parent && parent.select === "single" && checked){
|
|
array.forEach(parent.getChildren(), function(child){
|
|
child.set("checked", false);
|
|
});
|
|
}
|
|
this._setRightIconAttr(this.checkClass);
|
|
|
|
var icons = this.rightIconNode.childNodes;
|
|
if(icons.length === 1){
|
|
this.rightIconNode.style.display = checked ? "" : "none";
|
|
}else{
|
|
icons[0].style.display = checked ? "" : "none";
|
|
icons[1].style.display = !checked ? "" : "none";
|
|
}
|
|
|
|
domClass.toggle(this.domNode, "mblListItemChecked", checked);
|
|
if(parent && this.checked !== checked){
|
|
parent.onCheckStateChanged(this, checked);
|
|
}
|
|
this.checked = checked;
|
|
},
|
|
|
|
_setRightTextAttr: function(/*String*/text){
|
|
if(!this.rightTextNode){
|
|
this.rightTextNode = domConstruct.create("DIV", {className:"mblListItemRightText"}, this.box, "before");
|
|
}
|
|
this.rightText = text;
|
|
this.rightTextNode.innerHTML = this._cv ? this._cv(text) : text;
|
|
},
|
|
|
|
_setRightIconAttr: function(/*String*/icon){
|
|
if(!this.rightIconNode){
|
|
var ref = this.rightIcon2Node || this.rightTextNode || this.box;
|
|
this.rightIconNode = domConstruct.create("DIV", {className:"mblListItemRightIcon"}, ref, "before");
|
|
}else{
|
|
domConstruct.empty(this.rightIconNode);
|
|
}
|
|
this.rightIcon = icon;
|
|
var arr = (icon || "").split(/,/);
|
|
if(arr.length === 1){
|
|
common.createIcon(icon, null, null, this.rightIconTitle, this.rightIconNode);
|
|
}else{
|
|
common.createIcon(arr[0], null, null, this.rightIconTitle, this.rightIconNode);
|
|
common.createIcon(arr[1], null, null, this.rightIconTitle, this.rightIconNode);
|
|
}
|
|
},
|
|
|
|
_setRightIcon2Attr: function(/*String*/icon){
|
|
if(!this.rightIcon2Node){
|
|
var ref = this.rightTextNode || this.box;
|
|
this.rightIcon2Node = domConstruct.create("DIV", {className:"mblListItemRightIcon2"}, ref, "before");
|
|
}else{
|
|
domConstruct.empty(this.rightIcon2Node);
|
|
}
|
|
this.rightIcon2 = icon;
|
|
common.createIcon(icon, null, null, this.rightIcon2Title, this.rightIcon2Node);
|
|
},
|
|
|
|
_setLabelAttr: function(/*String*/text){
|
|
this.label = text;
|
|
this.labelNode.innerHTML = this._cv ? this._cv(text) : text;
|
|
}
|
|
});
|
|
});
|