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