171 lines
6.0 KiB
JavaScript
171 lines
6.0 KiB
JavaScript
define("dojox/mobile/ToolBarButton", [
|
|
"dojo/_base/declare",
|
|
"dojo/_base/lang",
|
|
"dojo/_base/window",
|
|
"dojo/dom-class",
|
|
"dojo/dom-construct",
|
|
"dojo/dom-style",
|
|
"./sniff",
|
|
"./_ItemBase"
|
|
], function(declare, lang, win, domClass, domConstruct, domStyle, has, ItemBase){
|
|
|
|
// module:
|
|
// dojox/mobile/ToolBarButton
|
|
|
|
return declare("dojox.mobile.ToolBarButton", ItemBase, {
|
|
// summary:
|
|
// A button widget which is placed in the Heading widget.
|
|
// description:
|
|
// ToolBarButton is a button which is typically placed in the
|
|
// Heading widget. It is a subclass of dojox/mobile/_ItemBase just
|
|
// like ListItem or IconItem. So, unlike Button, it has basically
|
|
// the same capability as ListItem or IconItem, such as icon
|
|
// support, transition, etc.
|
|
|
|
// selected: Boolean
|
|
// If true, the button is in the selected state.
|
|
selected: false,
|
|
|
|
// arrow: String
|
|
// Specifies "right" or "left" to be an arrow button.
|
|
arrow: "",
|
|
|
|
// light: Boolean
|
|
// If true, this widget produces only a single `<span>` node when it
|
|
// has only an icon or only a label, and has no arrow. In that
|
|
// case, you cannot have both icon and label, or arrow even if you
|
|
// try to set them.
|
|
light: true,
|
|
|
|
// defaultColor: String
|
|
// CSS class for the default color.
|
|
// Note: If this button has an arrow (typically back buttons on iOS),
|
|
// the class selector used for it is the value of defaultColor + "45".
|
|
// For example, by default the arrow selector is "mblColorDefault45".
|
|
defaultColor: "mblColorDefault",
|
|
|
|
// selColor: String
|
|
// CSS class for the selected color.
|
|
// Note: If this button has an arrow (typically back buttons on iOS),
|
|
// the class selector used for it is the value of selColor + "45".
|
|
// For example, by default the selected arrow selector is "mblColorDefaultSel45".
|
|
selColor: "mblColorDefaultSel",
|
|
|
|
/* internal properties */
|
|
baseClass: "mblToolBarButton",
|
|
|
|
_selStartMethod: "touch",
|
|
_selEndMethod: "touch",
|
|
|
|
buildRendering: function(){
|
|
if(!this.label && this.srcNodeRef){
|
|
this.label = this.srcNodeRef.innerHTML;
|
|
}
|
|
this.label = lang.trim(this.label);
|
|
this.domNode = (this.srcNodeRef && this.srcNodeRef.tagName === "SPAN") ?
|
|
this.srcNodeRef : domConstruct.create("span");
|
|
this.inherited(arguments);
|
|
|
|
if(this.light && !this.arrow && (!this.icon || !this.label)){
|
|
this.labelNode = this.tableNode = this.bodyNode = this.iconParentNode = this.domNode;
|
|
domClass.add(this.domNode, this.defaultColor + " mblToolBarButtonBody" +
|
|
(this.icon ? " mblToolBarButtonLightIcon" : " mblToolBarButtonLightText"));
|
|
return;
|
|
}
|
|
|
|
this.domNode.innerHTML = "";
|
|
if(this.arrow === "left" || this.arrow === "right"){
|
|
this.arrowNode = domConstruct.create("span", {
|
|
className: "mblToolBarButtonArrow mblToolBarButton" +
|
|
(this.arrow === "left" ? "Left" : "Right") + "Arrow " +
|
|
(has("ie") ? "" : (this.defaultColor + " " + this.defaultColor + "45"))
|
|
}, this.domNode);
|
|
domClass.add(this.domNode, "mblToolBarButtonHas" +
|
|
(this.arrow === "left" ? "Left" : "Right") + "Arrow");
|
|
}
|
|
this.bodyNode = domConstruct.create("span", {className:"mblToolBarButtonBody"}, this.domNode);
|
|
this.tableNode = domConstruct.create("table", {cellPadding:"0",cellSpacing:"0",border:"0"}, this.bodyNode);
|
|
if(!this.label && this.arrow){
|
|
// The class mblToolBarButtonText is needed for arrow shape too.
|
|
// If the button has a label, the class is set by _setLabelAttr. If no label, do it here.
|
|
this.tableNode.className = "mblToolBarButtonText";
|
|
}
|
|
|
|
var row = this.tableNode.insertRow(-1);
|
|
this.iconParentNode = row.insertCell(-1);
|
|
this.labelNode = row.insertCell(-1);
|
|
this.iconParentNode.className = "mblToolBarButtonIcon";
|
|
this.labelNode.className = "mblToolBarButtonLabel";
|
|
|
|
if(this.icon && this.icon !== "none" && this.label){
|
|
domClass.add(this.domNode, "mblToolBarButtonHasIcon");
|
|
domClass.add(this.bodyNode, "mblToolBarButtonLabeledIcon");
|
|
}
|
|
|
|
domClass.add(this.bodyNode, this.defaultColor);
|
|
},
|
|
|
|
startup: function(){
|
|
if(this._started){ return; }
|
|
|
|
this._keydownHandle = this.connect(this.domNode, "onkeydown", "_onClick"); // for desktop browsers
|
|
|
|
this.inherited(arguments);
|
|
if(!this._isOnLine){
|
|
this._isOnLine = true;
|
|
// retry applying the attribute for which the custom setter delays the actual
|
|
// work until _isOnLine is true.
|
|
this.set("icon", this._pendingIcon !== undefined ? this._pendingIcon : this.icon);
|
|
// Not needed anymore (this code executes only once per life cycle):
|
|
delete this._pendingIcon;
|
|
}
|
|
},
|
|
|
|
_onClick: function(e){
|
|
// summary:
|
|
// Internal handler for click events.
|
|
// tags:
|
|
// private
|
|
if(e && e.type === "keydown" && e.keyCode !== 13){ return; }
|
|
if(this.onClick(e) === false){ return; } // user's click action
|
|
this.defaultClickAction(e);
|
|
},
|
|
|
|
onClick: function(/*Event*/ /*===== e =====*/){
|
|
// summary:
|
|
// User defined function to handle clicks
|
|
// tags:
|
|
// callback
|
|
},
|
|
|
|
_setLabelAttr: function(/*String*/text){
|
|
// summary:
|
|
// Sets the button label text.
|
|
this.inherited(arguments);
|
|
domClass.toggle(this.tableNode, "mblToolBarButtonText", text || this.arrow); // also needed if only arrow
|
|
},
|
|
|
|
_setSelectedAttr: function(/*Boolean*/selected){
|
|
// summary:
|
|
// Makes this widget in the selected or unselected state.
|
|
var replace = function(node, a, b){
|
|
domClass.replace(node, a + " " + a + "45", b + " " + b + "45");
|
|
}
|
|
this.inherited(arguments);
|
|
if(selected){
|
|
domClass.replace(this.bodyNode, this.selColor, this.defaultColor);
|
|
if(!has("ie") && this.arrowNode){
|
|
replace(this.arrowNode, this.selColor, this.defaultColor);
|
|
}
|
|
}else{
|
|
domClass.replace(this.bodyNode, this.defaultColor, this.selColor);
|
|
if(!has("ie") && this.arrowNode){
|
|
replace(this.arrowNode, this.defaultColor, this.selColor);
|
|
}
|
|
}
|
|
domClass.toggle(this.domNode, "mblToolBarButtonSelected", selected);
|
|
domClass.toggle(this.bodyNode, "mblToolBarButtonBodySelected", selected);
|
|
}
|
|
});
|
|
});
|