|
1 /* |
|
2 � Copyright 2008 Nokia Corporation. All rights reserved. |
|
3 |
|
4 IMPORTANT: The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia |
|
5 Corporation (�Nokia�) in consideration of your agreement to the following terms. Your use, installation |
|
6 and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If |
|
7 you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example |
|
8 Widget files. |
|
9 |
|
10 In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia |
|
11 grants you a personal, non-exclusive license, under Nokia�s copyrights in the WRTKit and Example |
|
12 Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML, |
|
13 CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60 |
|
14 Widgets. |
|
15 |
|
16 If you redistribute the WRTKit and Example files, you must retain this entire notice in all such |
|
17 redistributions of the WRTKit and Example files. |
|
18 |
|
19 You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products |
|
20 that include the WRTKit and Example files without the prior written explicit agreement with Nokia. |
|
21 Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by |
|
22 Nokia herein, including but not limited to any patent rights that may be infringed by your products that |
|
23 incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files |
|
24 may be incorporated. |
|
25 |
|
26 The WRTKit and Example files are provided on an "AS IS" basis. NOKIA MAKES NO |
|
27 WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED |
|
28 WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A |
|
29 PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION |
|
30 ALONE OR IN COMBINATION WITH YOUR PRODUCTS. |
|
31 |
|
32 IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR |
|
33 CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
|
34 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
|
35 INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR |
|
36 DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY |
|
37 OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE, |
|
38 EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
|
39 |
|
40 */ |
|
41 |
|
42 /////////////////////////////////////////////////////////////////////////////// |
|
43 // The NavigationButton class implements a button control for use in |
|
44 // navigational contexts in menu-style UIs. |
|
45 |
|
46 // Constructor. |
|
47 function NavigationButton(id, image, text, titleBar) { |
|
48 if (id != UI_NO_INIT_ID) { |
|
49 this.init(id, image, text, titleBar); |
|
50 } |
|
51 } |
|
52 |
|
53 // NavigationButton inherits from ActionControl. |
|
54 NavigationButton.prototype = new ActionControl(UI_NO_INIT_ID); |
|
55 |
|
56 // Button table element. |
|
57 NavigationButton.prototype.tableElement = null; |
|
58 |
|
59 // Button table row element. |
|
60 NavigationButton.prototype.tableRowElement = null; |
|
61 |
|
62 // Button table left cell element. |
|
63 NavigationButton.prototype.tableLeftCellElement = null; |
|
64 |
|
65 // Button table right cell element. |
|
66 NavigationButton.prototype.tableRightCellElement = null; |
|
67 |
|
68 // Button image element. |
|
69 NavigationButton.prototype.imageElement = null; |
|
70 |
|
71 // Button link element. |
|
72 NavigationButton.prototype.linkElement = null; |
|
73 |
|
74 // Button text element. |
|
75 NavigationButton.prototype.textElement = null; |
|
76 |
|
77 // Button table element. |
|
78 NavigationButton.prototype.titleBar = false; |
|
79 |
|
80 |
|
81 // Initializer - called from constructor. |
|
82 NavigationButton.prototype.init = function(id, image, text, titleBar) { |
|
83 uiLogger.debug("NavigationButton.init(" + id + ", " + image + ", " + text + ")"); |
|
84 |
|
85 // call superclass initializer |
|
86 ActionControl.prototype.init.call(this, id, null); |
|
87 |
|
88 if ( titleBar != undefined ) { |
|
89 this.titleBar = titleBar; |
|
90 } |
|
91 // remove caption element |
|
92 this.assemblyElement.removeChild(this.captionElement); |
|
93 |
|
94 // construct the button |
|
95 this.buttonElement = document.createElement("div"); |
|
96 this.tableElement = document.createElement("table"); |
|
97 this.tableRowElement = document.createElement("tr"); |
|
98 this.tableLeftCellElement = document.createElement("td"); |
|
99 this.tableRightCellElement = document.createElement("td"); |
|
100 this.imageElement = null; |
|
101 this.linkElement = document.createElement("a"); |
|
102 this.linkElement.href = "JavaScript:void(0)"; |
|
103 this.textElement = document.createElement("span"); |
|
104 this.tableElement.appendChild(this.tableRowElement); |
|
105 this.tableRowElement.appendChild(this.tableLeftCellElement); |
|
106 this.tableRowElement.appendChild(this.tableRightCellElement); |
|
107 this.tableRightCellElement.appendChild(this.linkElement); |
|
108 this.linkElement.appendChild(this.textElement); |
|
109 this.buttonElement.appendChild(this.tableElement); |
|
110 this.controlElement.appendChild(this.buttonElement); |
|
111 |
|
112 // set the image and text |
|
113 this.setImage(image); |
|
114 this.setText(text); |
|
115 |
|
116 // bind event listeners |
|
117 this.bindActionControlListeners(); |
|
118 |
|
119 // update the style |
|
120 this.updateStyleFromState(); |
|
121 } |
|
122 |
|
123 // Sets the enabled state. |
|
124 NavigationButton.prototype.setEnabled = function(enabled) { |
|
125 uiLogger.debug("NavigationButton.setEnabled(" + enabled + ")"); |
|
126 |
|
127 // bail out early if there is no change in state |
|
128 if (this.enabled == enabled) { |
|
129 return; |
|
130 } |
|
131 |
|
132 // set the enabled state |
|
133 this.enabled = enabled; |
|
134 |
|
135 if (this.enabled) { |
|
136 // diabled -> enabled |
|
137 this.tableRightCellElement.removeChild(this.textElement); |
|
138 this.tableRightCellElement.appendChild(this.linkElement); |
|
139 this.linkElement.appendChild(this.textElement); |
|
140 } else { |
|
141 // enabled -> diabled |
|
142 this.linkElement.removeChild(this.textElement); |
|
143 this.tableRightCellElement.removeChild(this.linkElement); |
|
144 this.tableRightCellElement.appendChild(this.textElement); |
|
145 } |
|
146 |
|
147 // update the style |
|
148 this.updateStyleFromState(); |
|
149 } |
|
150 |
|
151 // Returns the button image (URL); null if none. |
|
152 NavigationButton.prototype.getImage = function() { |
|
153 return (this.imageElement != null) ? this.imageElement.src : null; |
|
154 } |
|
155 |
|
156 // Sets the button image (URL); null if none. |
|
157 NavigationButton.prototype.setImage = function(image) { |
|
158 uiLogger.debug("NavigationButton.setImage(" + image + ")"); |
|
159 |
|
160 if (image == null) { |
|
161 // remove image - if any |
|
162 if (this.imageElement != null) { |
|
163 this.tableLeftCellElement.removeChild(this.imageElement); |
|
164 } |
|
165 } else { |
|
166 // default to not append image element |
|
167 var append = false; |
|
168 |
|
169 // create image element if one doesn't exist |
|
170 if (this.imageElement == null) { |
|
171 this.imageElement = document.createElement("img"); |
|
172 this.imageElement.setAttribute("id", "wrtnavimg"); |
|
173 this.imageElement.style.width = "auto"; |
|
174 append = true; |
|
175 } |
|
176 |
|
177 this.imageElement.src = image; |
|
178 |
|
179 // append the image element to the left cell? |
|
180 if (append) { |
|
181 this.tableLeftCellElement.appendChild(this.imageElement); |
|
182 } |
|
183 } |
|
184 } |
|
185 |
|
186 // Returns the button text. |
|
187 NavigationButton.prototype.getText = function() { |
|
188 return this.textElement.innerHTML; |
|
189 } |
|
190 |
|
191 // Sets the button text. |
|
192 NavigationButton.prototype.setText = function(text) { |
|
193 uiLogger.debug("NavigationButton.setText(" + text + ")"); |
|
194 this.textElement.innerHTML = (text == null) ? "" : text;; |
|
195 } |
|
196 |
|
197 // Updates the style of the control to reflects the state of the control. |
|
198 NavigationButton.prototype.updateStyleFromState = function() { |
|
199 uiLogger.debug("NavigationButton.updateStyleFromState()"); |
|
200 |
|
201 // determine the state name |
|
202 var stateName = this.getStyleStateName(); |
|
203 |
|
204 if (this.titleBar) { |
|
205 // set root element class name |
|
206 this.setClassName(this.rootElement, "TitleBarControl"); |
|
207 } |
|
208 else { |
|
209 // set root element class name |
|
210 this.setClassName(this.rootElement, "Control"); |
|
211 } |
|
212 // set the control assembly class names |
|
213 this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName); |
|
214 |
|
215 // control element |
|
216 this.setClassName(this.controlElement, "ControlElement NavigationButtonControlElement"); |
|
217 |
|
218 // set the button table class names |
|
219 this.setClassName(this.buttonElement, "NavigationButton"); |
|
220 this.setClassName(this.tableElement, "NavigationButtonTable"); |
|
221 this.setClassName(this.tableRowElement, "NavigationButtonRow"); |
|
222 this.setClassName(this.tableLeftCellElement, "NavigationButtonImageCell"); |
|
223 this.setClassName(this.tableRightCellElement, "NavigationButtonTextCell"); |
|
224 |
|
225 // set image class names |
|
226 if (this.imageElement) { |
|
227 this.setClassName(this.imageElement, "NavigationButtonImage"); |
|
228 } |
|
229 |
|
230 // set the button text class name |
|
231 this.setClassName(this.textElement, "NavigationButtonText NavigationButtonText" + stateName); |
|
232 } |