author | Eugene Ostroukhov <eugeneo@symbian.org> |
Fri, 05 Feb 2010 11:54:28 -0800 | |
changeset 102 | 30e0796f3ebb |
parent 73 | c56c874eef47 |
child 210 | 0f7abfd6ae62 |
permissions | -rw-r--r-- |
73 | 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 ContentPanel class is a control for displaying content. The panel |
|
44 |
// can be expanded and collapsed. |
|
45 |
||
46 |
// Constructor. |
|
47 |
function ContentPanel(id, caption, content, foldable, expanded) { |
|
48 |
if (id != UI_NO_INIT_ID) { |
|
49 |
this.init(id, caption, content, foldable, expanded); |
|
50 |
} |
|
51 |
} |
|
52 |
||
53 |
// ContentPanel inherits from Control. |
|
54 |
ContentPanel.prototype = new Control(UI_NO_INIT_ID); |
|
55 |
||
56 |
// The element hierarchy in a content panel is as follows: |
|
57 |
// |
|
58 |
// rootElement |
|
59 |
// assemblyElement |
|
60 |
// captionElement |
|
61 |
// foldToggleElement |
|
62 |
// captionLinkElement |
|
63 |
// captionTextElement |
|
64 |
// contentElement |
|
65 |
// |
|
66 |
// captionTextElement is moved under foldToggleElement if disabled |
|
67 |
// or captionElement if not foldable |
|
68 |
||
69 |
// The fold toggle element used for folding content panels. |
|
70 |
ContentPanel.prototype.foldToggleElement = null; |
|
71 |
||
72 |
// The caption link element of this control. |
|
73 |
ContentPanel.prototype.captionLinkElement = null; |
|
74 |
||
75 |
// The caption text element of this control. |
|
76 |
ContentPanel.prototype.captionTextElement = null; |
|
77 |
||
78 |
// The content element of this control. |
|
79 |
ContentPanel.prototype.contentElement = null; |
|
80 |
||
81 |
// The foldable state of this control. |
|
82 |
ContentPanel.prototype.foldable = false; |
|
83 |
||
84 |
// The expanded state of this control. |
|
85 |
ContentPanel.prototype.expanded = false; |
|
86 |
||
87 |
// Enabled status. |
|
88 |
ContentPanel.prototype.enabled = false; |
|
89 |
||
90 |
// Initializer - called from constructor. |
|
91 |
ContentPanel.prototype.init = function(id, caption, content, foldable, expanded) { |
|
92 |
uiLogger.debug("ContentPanel.init(" + id + ", " + caption + ", " + content + ", " + foldable + ", " + expanded + ")"); |
|
93 |
||
94 |
// call superclass initializer |
|
95 |
Control.prototype.init.call(this, id, caption); |
|
96 |
||
97 |
// the control defaults to enabled |
|
98 |
this.enabled = true; |
|
99 |
||
100 |
// create caption text element |
|
101 |
this.captionTextElement = document.createElement("span"); |
|
102 |
||
103 |
// disconnect the control element |
|
104 |
this.assemblyElement.removeChild(this.controlElement); |
|
105 |
||
106 |
// set the foldable state |
|
107 |
this.foldable = foldable; |
|
108 |
||
109 |
// is this a foldable content panel? |
|
110 |
if (foldable) { |
|
111 |
// create fold toggle element |
|
112 |
this.foldToggleElement = document.createElement("div"); |
|
113 |
this.captionElement.appendChild(this.foldToggleElement); |
|
114 |
||
115 |
// create caption link and add to caption element |
|
116 |
this.captionLinkElement = document.createElement("a"); |
|
117 |
this.captionLinkElement.href = "JavaScript:void(0)"; |
|
118 |
this.foldToggleElement.appendChild(this.captionLinkElement); |
|
119 |
||
120 |
// add the text element to the link element |
|
121 |
this.captionLinkElement.appendChild(this.captionTextElement); |
|
122 |
||
123 |
// bind event listeners |
|
124 |
var self = this; |
|
125 |
this.captionLinkElement.addEventListener("focus", function() { self.focusStateChanged(true); }, false); |
|
126 |
this.captionLinkElement.addEventListener("blur", function() { self.focusStateChanged(false); }, false); |
|
127 |
this.foldToggleElement.addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false); |
|
128 |
this.foldToggleElement.addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false); |
|
129 |
this.foldToggleElement.addEventListener("mousedown", function(event) { |
|
130 |
self.captionClicked(); |
|
131 |
event.stopPropagation(); |
|
132 |
event.preventDefault(); |
|
133 |
}, true); |
|
134 |
this.foldToggleElement.addEventListener("keydown", function(event) { |
|
135 |
// center and enter trigger the action |
|
136 |
if (event.keyCode == 0 || event.keyCode == 13) { |
|
137 |
self.captionClicked(); |
|
138 |
event.stopPropagation(); |
|
139 |
event.preventDefault(); |
|
140 |
} |
|
141 |
}, true); |
|
142 |
||
143 |
this.expanded = expanded; |
|
144 |
} else { |
|
145 |
// since this is not a foldable panel the content should be expanded |
|
146 |
this.expanded = true; |
|
147 |
||
148 |
// add the text element directly to the caption element |
|
149 |
this.captionElement.appendChild(this.captionTextElement); |
|
150 |
} |
|
151 |
||
152 |
// create content element |
|
153 |
this.contentElement = document.createElement("div"); |
|
154 |
this.contentElement.style.display = this.expanded ? "block" : "none"; |
|
155 |
this.rootElement.appendChild(this.contentElement); |
|
156 |
||
157 |
// set caption, content and expanded state |
|
158 |
this.setCaption(caption); |
|
159 |
this.setContent(content); |
|
160 |
||
161 |
// update style |
|
162 |
this.updateStyleFromState(); |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
163 |
}; |
73 | 164 |
|
165 |
// Returns the enabled state. |
|
166 |
ContentPanel.prototype.isEnabled = function() { |
|
167 |
return this.enabled; |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
168 |
}; |
73 | 169 |
|
170 |
// Sets the enabled state. |
|
171 |
ContentPanel.prototype.setEnabled = function(enabled) { |
|
172 |
uiLogger.debug("ContentPanel.setEnabled(" + enabled + ")"); |
|
173 |
||
174 |
// bail out early if there is no change in state |
|
175 |
if (this.enabled == enabled) { |
|
176 |
return; |
|
177 |
} |
|
178 |
||
179 |
// set the enabled state |
|
180 |
this.enabled = enabled; |
|
181 |
||
182 |
// is this a foldable content? |
|
183 |
if (this.foldable) { |
|
184 |
// the caption link must be disabled |
|
185 |
if (this.enabled) { |
|
186 |
// diabled -> enabled |
|
187 |
this.foldToggleElement.removeChild(this.captionTextElement); |
|
188 |
this.foldToggleElement.appendChild(this.captionLinkElement); |
|
189 |
this.captionLinkElement.appendChild(this.captionTextElement); |
|
190 |
} else { |
|
191 |
// enabled -> diabled |
|
192 |
this.captionLinkElement.removeChild(this.captionTextElement); |
|
193 |
this.foldToggleElement.removeChild(this.captionLinkElement); |
|
194 |
this.foldToggleElement.appendChild(this.captionTextElement); |
|
195 |
} |
|
196 |
} |
|
197 |
||
198 |
// update style |
|
199 |
this.updateStyleFromState(); |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
200 |
}; |
73 | 201 |
|
202 |
// Returns the caption; null if none. |
|
203 |
ContentPanel.prototype.getCaption = function() { |
|
204 |
return this.caption; |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
205 |
}; |
73 | 206 |
|
207 |
// Sets the caption; null if none. |
|
208 |
ContentPanel.prototype.setCaption = function(caption) { |
|
209 |
// bail out if the caption text element has not been created |
|
210 |
// this is to prevent the superclass init calling this before |
|
211 |
// we've initialized our custom caption |
|
212 |
if (this.captionTextElement == null) |
|
213 |
return; |
|
214 |
||
215 |
uiLogger.debug("ContentPanel.setCaption(" + caption + ")"); |
|
216 |
||
217 |
// set the display style |
|
218 |
this.captionElement.style.display = (caption == null) ? "none" : "block"; |
|
219 |
||
220 |
// set the caption |
|
221 |
this.caption = caption; |
|
222 |
this.captionTextElement.innerHTML = (caption == null) ? "" : caption; |
|
223 |
||
224 |
// update style |
|
225 |
this.updateStyleFromState(); |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
226 |
}; |
73 | 227 |
|
228 |
// Returns the content. |
|
229 |
ContentPanel.prototype.getContent = function() { |
|
230 |
return this.contentElement.innerHTML; |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
231 |
}; |
73 | 232 |
|
233 |
// Sets the content. |
|
234 |
ContentPanel.prototype.setContent = function(content) { |
|
235 |
uiLogger.debug("ContentPanel.setContent(" + content + ")"); |
|
236 |
this.contentElement.innerHTML = (content == null) ? "" : content; |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
237 |
}; |
73 | 238 |
|
239 |
// Returns the focusable state for the control. |
|
240 |
ContentPanel.prototype.isFocusable = function() { |
|
241 |
// a content panel is focusable if it's foldable and enabled |
|
242 |
return (this.foldable && this.enabled); |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
243 |
}; |
73 | 244 |
|
245 |
// Sets the focused state for the control. |
|
246 |
// Note: This may not always succeed. |
|
247 |
ContentPanel.prototype.setFocused = function(focused) { |
|
248 |
uiLogger.debug("ContentPanel.setFocused(" + focused + ")"); |
|
249 |
if (this.enabled && this.foldable) { |
|
250 |
if (focused) { |
|
251 |
this.captionLinkElement.focus(); |
|
252 |
} else { |
|
253 |
this.captionLinkElement.blur(); |
|
254 |
} |
|
255 |
} |
|
256 |
// note that this.focused gets set as a result of focusStateChanged() being called |
|
257 |
// rather than setting it explicitly here |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
258 |
}; |
73 | 259 |
|
260 |
// Returns the expanded state. |
|
261 |
ContentPanel.prototype.isExpanded = function() { |
|
262 |
return this.expanded; |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
263 |
}; |
73 | 264 |
|
265 |
// Sets the expanded state. |
|
266 |
ContentPanel.prototype.setExpanded = function(expanded) { |
|
267 |
uiLogger.debug("ContentPanel.setExpanded(" + expanded + ")"); |
|
268 |
||
269 |
// make sure only foldable content panels are folded |
|
270 |
if (!this.foldable) { |
|
271 |
uiLogger.warn("Cannot fold a non-foldable content panel!"); |
|
272 |
return; |
|
273 |
} |
|
274 |
||
275 |
this.expanded = expanded; |
|
276 |
if (this.expanded) { |
|
277 |
// expand |
|
278 |
this.contentElement.style.display = "block"; |
|
279 |
||
280 |
// find out control top and bottom |
|
281 |
var controlTop = this.getAbsoluteTop(this.rootElement); |
|
282 |
var controlHeight = this.rootElement.clientHeight; |
|
283 |
var controlBottom = controlTop + controlHeight; |
|
284 |
||
285 |
// find out the viewport top and bottom |
|
286 |
var viewportTop = window.scrollY; |
|
287 |
var viewportHeight = window.innerHeight; |
|
288 |
var viewportBottom = viewportTop + viewportHeight; |
|
289 |
||
290 |
// make sure the control is positioned so that it can be seen |
|
291 |
var overflow = controlBottom - viewportBottom; |
|
292 |
if (overflow > 0) { |
|
293 |
// there's overflow so we need to scroll to get the control |
|
294 |
// into the viewport - however not so far that the control |
|
295 |
// goes past the viewport top. |
|
296 |
var distanceToTop = controlTop - viewportTop; |
|
297 |
var scrollAmount = Math.min(overflow, distanceToTop); |
|
298 |
window.scrollBy(0, scrollAmount); |
|
299 |
} |
|
300 |
} else { |
|
301 |
// collapse |
|
302 |
this.contentElement.style.display = "none"; |
|
303 |
} |
|
304 |
||
305 |
// notify event listeners |
|
306 |
this.fireEvent(this.createEvent("ExpandedStateChanged", this.expanded)); |
|
307 |
||
308 |
// update the style |
|
309 |
this.updateStyleFromState(); |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
310 |
}; |
73 | 311 |
|
312 |
// Returns the absolute position (y) of the given element. |
|
313 |
ContentPanel.prototype.getAbsoluteTop = function(element) { |
|
314 |
// traverse from element to root and add top-offset |
|
315 |
// for each element we find on the way |
|
316 |
var absTop = 0; |
|
317 |
while (element != null) { |
|
318 |
absTop += element.offsetTop; |
|
319 |
element = element.offsetParent; |
|
320 |
} |
|
321 |
return absTop; |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
322 |
}; |
73 | 323 |
|
324 |
// Callback for when the caption is clicked. |
|
325 |
ContentPanel.prototype.captionClicked = function() { |
|
326 |
uiLogger.debug("ContentPanel.captionClicked()"); |
|
327 |
||
328 |
// if we're enabled then a click results toggling the expanded state |
|
329 |
if (this.enabled) { |
|
330 |
// focus when clicked |
|
331 |
if (!this.focused) { |
|
332 |
this.captionLinkElement.focus(); |
|
333 |
} |
|
334 |
||
335 |
// toggle the expanded state |
|
336 |
this.setExpanded(!this.expanded); |
|
337 |
} |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
338 |
}; |
73 | 339 |
|
340 |
// Updates the style of the control to reflects the state of the control. |
|
341 |
ContentPanel.prototype.updateStyleFromState = function() { |
|
342 |
uiLogger.debug("ContentPanel.updateStyleFromState()"); |
|
343 |
||
344 |
// determine the state name |
|
345 |
var stateName = this.getStyleStateName(); |
|
346 |
||
347 |
// set root element class name |
|
348 |
this.setClassName(this.rootElement, "Control"); |
|
349 |
||
350 |
// set the control assembly class names |
|
351 |
this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName); |
|
352 |
||
353 |
if (this.foldable) { |
|
354 |
// foldable content panel |
|
355 |
this.setClassName(this.captionElement, "ContentPanelCaptionFoldable"); |
|
356 |
this.setClassName(this.foldToggleElement, "ContentPanelFoldToggle ContentPanelFoldToggle" + (this.expanded ? "Expanded" : "Collapsed")); |
|
357 |
} else { |
|
358 |
// non-folding |
|
359 |
this.setClassName(this.captionElement, "ContentPanelCaptionNonFoldable"); |
|
360 |
} |
|
361 |
||
362 |
// set the content caption text class names |
|
363 |
this.setClassName(this.captionTextElement, "ContentPanelCaptionText ContentPanelCaptionText" + stateName); |
|
364 |
||
365 |
// set the content element class names |
|
366 |
this.setClassName(this.contentElement, "ContentPanelContent"); |
|
102
30e0796f3ebb
Warnings in new projects were fixed
Eugene Ostroukhov <eugeneo@symbian.org>
parents:
73
diff
changeset
|
367 |
}; |