| 1 | define([ |
|---|
| 2 | "dojo/_base/declare", |
|---|
| 3 | "dojo/_base/lang", |
|---|
| 4 | "dojo/_base/window", |
|---|
| 5 | "dojo/dom-class", |
|---|
| 6 | "dojo/dom-construct", |
|---|
| 7 | "dojo/dom-style", |
|---|
| 8 | "dojo/dom-attr", |
|---|
| 9 | "./sniff", |
|---|
| 10 | "./_ItemBase", |
|---|
| 11 | "dojo/has!dojo-bidi?dojox/mobile/bidi/ToolBarButton" |
|---|
| 12 | ], function(declare, lang, win, domClass, domConstruct, domStyle, domAttr, has, ItemBase, BidiToolBarButton){ |
|---|
| 13 | |
|---|
| 14 | // module: |
|---|
| 15 | // dojox/mobile/ToolBarButton |
|---|
| 16 | |
|---|
| 17 | var ToolBarButton = declare(has("dojo-bidi") ? "dojox.mobile.NonBidiToolBarButton" : "dojox.mobile.ToolBarButton", ItemBase, { |
|---|
| 18 | // summary: |
|---|
| 19 | // A button widget which is placed in the Heading widget. |
|---|
| 20 | // description: |
|---|
| 21 | // ToolBarButton is a button which is typically placed in the |
|---|
| 22 | // Heading widget. It is a subclass of dojox/mobile/_ItemBase just |
|---|
| 23 | // like ListItem or IconItem. So, unlike Button, it has basically |
|---|
| 24 | // the same capability as ListItem or IconItem, such as icon |
|---|
| 25 | // support, transition, etc. |
|---|
| 26 | |
|---|
| 27 | // selected: Boolean |
|---|
| 28 | // If true, the button is in the selected state. |
|---|
| 29 | selected: false, |
|---|
| 30 | |
|---|
| 31 | // arrow: [const] String |
|---|
| 32 | // Specifies "right" or "left" to be an arrow button. |
|---|
| 33 | // Note that changing the value of the property after the widget |
|---|
| 34 | // creation has no effect. |
|---|
| 35 | arrow: "", |
|---|
| 36 | |
|---|
| 37 | // light: [const] Boolean |
|---|
| 38 | // If true, this widget produces only a single `<span>` node when it |
|---|
| 39 | // has only an icon or only a label, and has no arrow. In that |
|---|
| 40 | // case, you cannot have both icon and label, or arrow even if you |
|---|
| 41 | // try to set them. |
|---|
| 42 | // Note that changing the value of the property after the widget |
|---|
| 43 | // creation has no effect. |
|---|
| 44 | light: true, |
|---|
| 45 | |
|---|
| 46 | // defaultColor: String |
|---|
| 47 | // CSS class for the default color. |
|---|
| 48 | // Note: If this button has an arrow (typically back buttons on iOS), |
|---|
| 49 | // the class selector used for it is the value of defaultColor + "45". |
|---|
| 50 | // For example, by default the arrow selector is "mblColorDefault45". |
|---|
| 51 | defaultColor: "mblColorDefault", |
|---|
| 52 | |
|---|
| 53 | // selColor: String |
|---|
| 54 | // CSS class for the selected color. |
|---|
| 55 | // Note: If this button has an arrow (typically back buttons on iOS), |
|---|
| 56 | // the class selector used for it is the value of selColor + "45". |
|---|
| 57 | // For example, by default the selected arrow selector is "mblColorDefaultSel45". |
|---|
| 58 | selColor: "mblColorDefaultSel", |
|---|
| 59 | |
|---|
| 60 | /* internal properties */ |
|---|
| 61 | baseClass: "mblToolBarButton", |
|---|
| 62 | |
|---|
| 63 | _selStartMethod: "touch", |
|---|
| 64 | _selEndMethod: "touch", |
|---|
| 65 | |
|---|
| 66 | buildRendering: function(){ |
|---|
| 67 | if(!this.label && this.srcNodeRef){ |
|---|
| 68 | this.label = this.srcNodeRef.innerHTML; |
|---|
| 69 | } |
|---|
| 70 | this.label = lang.trim(this.label); |
|---|
| 71 | this.domNode = (this.srcNodeRef && this.srcNodeRef.tagName === "SPAN") ? |
|---|
| 72 | this.srcNodeRef : domConstruct.create("span"); |
|---|
| 73 | domAttr.set(this.domNode, "role", "button"); |
|---|
| 74 | this.inherited(arguments); |
|---|
| 75 | |
|---|
| 76 | if(this.light && !this.arrow && (!this.icon || !this.label)){ |
|---|
| 77 | this.labelNode = this.tableNode = this.bodyNode = this.iconParentNode = this.domNode; |
|---|
| 78 | domClass.add(this.domNode, this.defaultColor + " mblToolBarButtonBody" + |
|---|
| 79 | (this.icon ? " mblToolBarButtonLightIcon" : " mblToolBarButtonLightText")); |
|---|
| 80 | return; |
|---|
| 81 | } |
|---|
| 82 | |
|---|
| 83 | this.domNode.innerHTML = ""; |
|---|
| 84 | if(this.arrow === "left" || this.arrow === "right"){ |
|---|
| 85 | this.arrowNode = domConstruct.create("span", { |
|---|
| 86 | className: "mblToolBarButtonArrow mblToolBarButton" + |
|---|
| 87 | (this.arrow === "left" ? "Left" : "Right") + "Arrow " + |
|---|
| 88 | (has("ie") < 10 ? "" : (this.defaultColor + " " + this.defaultColor + "45")) |
|---|
| 89 | }, this.domNode); |
|---|
| 90 | domClass.add(this.domNode, "mblToolBarButtonHas" + |
|---|
| 91 | (this.arrow === "left" ? "Left" : "Right") + "Arrow"); |
|---|
| 92 | } |
|---|
| 93 | this.bodyNode = domConstruct.create("span", {className:"mblToolBarButtonBody"}, this.domNode); |
|---|
| 94 | this.tableNode = domConstruct.create("table", {cellPadding:"0",cellSpacing:"0",border:"0"}, this.bodyNode); |
|---|
| 95 | if(!this.label && this.arrow){ |
|---|
| 96 | // The class mblToolBarButtonText is needed for arrow shape too. |
|---|
| 97 | // If the button has a label, the class is set by _setLabelAttr. If no label, do it here. |
|---|
| 98 | this.tableNode.className = "mblToolBarButtonText"; |
|---|
| 99 | } |
|---|
| 100 | |
|---|
| 101 | var row = this.tableNode.insertRow(-1); |
|---|
| 102 | this.iconParentNode = row.insertCell(-1); |
|---|
| 103 | this.labelNode = row.insertCell(-1); |
|---|
| 104 | this.iconParentNode.className = "mblToolBarButtonIcon"; |
|---|
| 105 | this.labelNode.className = "mblToolBarButtonLabel"; |
|---|
| 106 | |
|---|
| 107 | if(this.icon && this.icon !== "none" && this.label){ |
|---|
| 108 | domClass.add(this.domNode, "mblToolBarButtonHasIcon"); |
|---|
| 109 | domClass.add(this.bodyNode, "mblToolBarButtonLabeledIcon"); |
|---|
| 110 | } |
|---|
| 111 | |
|---|
| 112 | domClass.add(this.bodyNode, this.defaultColor); |
|---|
| 113 | }, |
|---|
| 114 | |
|---|
| 115 | startup: function(){ |
|---|
| 116 | if(this._started){ return; } |
|---|
| 117 | |
|---|
| 118 | this.connect(this.domNode, "onkeydown", "_onClick"); // for desktop browsers |
|---|
| 119 | |
|---|
| 120 | this.inherited(arguments); |
|---|
| 121 | if(!this._isOnLine){ |
|---|
| 122 | this._isOnLine = true; |
|---|
| 123 | // retry applying the attribute for which the custom setter delays the actual |
|---|
| 124 | // work until _isOnLine is true. |
|---|
| 125 | this.set("icon", this._pendingIcon !== undefined ? this._pendingIcon : this.icon); |
|---|
| 126 | // Not needed anymore (this code executes only once per life cycle): |
|---|
| 127 | delete this._pendingIcon; |
|---|
| 128 | } |
|---|
| 129 | }, |
|---|
| 130 | |
|---|
| 131 | _onClick: function(e){ |
|---|
| 132 | // summary: |
|---|
| 133 | // Internal handler for click events. |
|---|
| 134 | // tags: |
|---|
| 135 | // private |
|---|
| 136 | if(e && e.type === "keydown" && e.keyCode !== 13){ return; } |
|---|
| 137 | if(this.onClick(e) === false){ return; } // user's click action |
|---|
| 138 | this.defaultClickAction(e); |
|---|
| 139 | }, |
|---|
| 140 | |
|---|
| 141 | onClick: function(/*Event*/ /*===== e =====*/){ |
|---|
| 142 | // summary: |
|---|
| 143 | // User defined function to handle clicks |
|---|
| 144 | // tags: |
|---|
| 145 | // callback |
|---|
| 146 | }, |
|---|
| 147 | |
|---|
| 148 | _setLabelAttr: function(/*String*/text){ |
|---|
| 149 | // summary: |
|---|
| 150 | // Sets the button label text. |
|---|
| 151 | this.inherited(arguments); |
|---|
| 152 | domClass.toggle(this.tableNode, "mblToolBarButtonText", text || this.arrow); // also needed if only arrow |
|---|
| 153 | }, |
|---|
| 154 | |
|---|
| 155 | _setSelectedAttr: function(/*Boolean*/selected){ |
|---|
| 156 | // summary: |
|---|
| 157 | // Makes this widget in the selected or unselected state. |
|---|
| 158 | var replace = function(node, a, b){ |
|---|
| 159 | domClass.replace(node, a + " " + a + "45", b + " " + b + "45"); |
|---|
| 160 | } |
|---|
| 161 | this.inherited(arguments); |
|---|
| 162 | if(selected){ |
|---|
| 163 | domClass.replace(this.bodyNode, this.selColor, this.defaultColor); |
|---|
| 164 | if(!(has("ie") < 10) && this.arrowNode){ |
|---|
| 165 | replace(this.arrowNode, this.selColor, this.defaultColor); |
|---|
| 166 | } |
|---|
| 167 | }else{ |
|---|
| 168 | domClass.replace(this.bodyNode, this.defaultColor, this.selColor); |
|---|
| 169 | if(!(has("ie") < 10) && this.arrowNode){ |
|---|
| 170 | replace(this.arrowNode, this.defaultColor, this.selColor); |
|---|
| 171 | } |
|---|
| 172 | } |
|---|
| 173 | domClass.toggle(this.domNode, "mblToolBarButtonSelected", selected); |
|---|
| 174 | domClass.toggle(this.bodyNode, "mblToolBarButtonBodySelected", selected); |
|---|
| 175 | } |
|---|
| 176 | }); |
|---|
| 177 | return has("dojo-bidi") ? declare("dojox.mobile.ToolBarButton", [ToolBarButton, BidiToolBarButton]) : ToolBarButton; |
|---|
| 178 | }); |
|---|
