2 � Copyright 2008 Nokia Corporation. All rights reserved.
\r
4 IMPORTANT: The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia
\r
5 Corporation (�Nokia�) in consideration of your agreement to the following terms. Your use, installation
\r
6 and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If
\r
7 you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example
\r
10 In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia
\r
11 grants you a personal, non-exclusive license, under Nokia�s copyrights in the WRTKit and Example
\r
12 Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,
\r
13 CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60
\r
16 If you redistribute the WRTKit and Example files, you must retain this entire notice in all such
\r
17 redistributions of the WRTKit and Example files.
\r
19 You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products
\r
20 that include the WRTKit and Example files without the prior written explicit agreement with Nokia.
\r
21 Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by
\r
22 Nokia herein, including but not limited to any patent rights that may be infringed by your products that
\r
23 incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files
\r
24 may be incorporated.
\r
26 The WRTKit and Example files are provided on an "AS IS" basis. NOKIA MAKES NO
\r
27 WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED
\r
28 WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A
\r
29 PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION
\r
30 ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
\r
32 IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR
\r
33 CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
\r
34 SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
\r
35 INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR
\r
36 DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY
\r
37 OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,
\r
38 EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
\r
42 ///////////////////////////////////////////////////////////////////////////////
\r
43 // The SelectionMenu class implements a single or multi selection control
\r
44 // that lets users select one or more options from a menu.
\r
47 function SelectionMenu(id, caption, options, multipleSelection, selected) {
\r
48 if (id != UI_NO_INIT_ID) {
\r
49 this.init(id, caption, options, multipleSelection, selected);
\r
53 // SelectionMenu inherits from SelectionControl.
\r
54 SelectionMenu.prototype = new SelectionControl(UI_NO_INIT_ID);
\r
56 // Reference to the peer HTML element.
\r
57 SelectionControl.prototype.peerElement = null;
\r
59 // Array for tracking option elements.
\r
60 SelectionMenu.prototype.optionElements = null;
\r
62 // Initializer - called from constructor.
\r
63 SelectionMenu.prototype.init = function(id, caption, options, multipleSelection, selected) {
\r
64 uiLogger.debug("SelectionMenu.init(" + id + ", " + caption + ", " + options + ", " + multipleSelection + ", " + selected + ")");
\r
66 // call superclass initializer
\r
67 SelectionControl.prototype.init.call(this, id, caption, options, multipleSelection, selected);
\r
69 // create the control
\r
70 this.peerElement = document.createElement("select");
\r
71 this.peerElement.multiple = multipleSelection;
\r
72 this.controlElement.appendChild(this.peerElement);
\r
74 // init option elements array
\r
75 this.optionElements = [];
\r
77 // update the option elements to match the options in this control
\r
78 this.updateOptionElements();
\r
80 // bind event listeners
\r
82 this.peerElement.addEventListener("focus", function() { self.focusStateChanged(true); }, false);
\r
83 this.peerElement.addEventListener("blur", function() { self.focusStateChanged(false); }, false);
\r
84 this.peerElement.addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false);
\r
85 this.peerElement.addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false);
\r
86 this.peerElement.addEventListener("change", function() { self.selectionChanged(); }, false);
\r
89 // Returns the enabled state.
\r
90 SelectionMenu.prototype.isEnabled = function() {
\r
91 return !this.peerElement.disabled;
\r
94 // Sets the enabled state.
\r
95 SelectionMenu.prototype.setEnabled = function(enabled) {
\r
96 uiLogger.debug("SelectionMenu.setEnabled(" + enabled + ")");
\r
97 this.peerElement.disabled = !enabled;
\r
100 // Sets the focused state for the control.
\r
101 // Note: This may not always succeed.
\r
102 SelectionMenu.prototype.setFocused = function(focused) {
\r
103 uiLogger.debug("SelectionMenu.setFocused(" + focused + ")");
\r
105 this.peerElement.focus();
\r
107 this.peerElement.blur();
\r
111 // Sets the currently selected options. Pass a single option in a single selection
\r
112 // control or an array of selected controls in a multiple selection control. To
\r
113 // deselect all options pass null in a single selection control and an empty array
\r
114 // in a multiple selection control.
\r
115 SelectionMenu.prototype.setSelected = function(selected) {
\r
116 // call superclass setSelected()
\r
117 SelectionControl.prototype.setSelected.call(this, selected);
\r
119 // iterate through the options and set the selected state
\r
120 // on the corresponding option element
\r
121 for (var i = 0; i < this.options.length; i++) {
\r
122 this.optionElements[i].selected = this.isSelected(this.options[i]);
\r
126 // Sets the options in the control.
\r
127 SelectionMenu.prototype.setOptions = function(options) {
\r
128 // call superclass setOptions()
\r
129 SelectionControl.prototype.setOptions.call(this, options);
\r
130 this.updateOptionElements();
\r
133 // Updates the option elements for the peer select element.
\r
134 SelectionMenu.prototype.updateOptionElements = function() {
\r
135 // start by removing all current options from the select element
\r
136 while (this.peerElement.firstChild != null) {
\r
137 this.peerElement.removeChild(this.peerElement.firstChild);
\r
140 // iterate through the options and add (and possibly create) a
\r
141 // properly configured option element for each option
\r
142 for (var i = 0; i < this.options.length; i++) {
\r
143 // do we need to create a new option element?
\r
144 if (i == this.optionElements.length) {
\r
145 this.optionElements.push(document.createElement("option"));
\r
148 // get the option and option element we're working on
\r
149 var option = this.options[i];
\r
150 var optionElement = this.optionElements[i];
\r
152 // set the state for this option element and add it to the
\r
153 // peer select element
\r
154 optionElement.text = option.text;
\r
155 optionElement.selected = this.isSelected(option);
\r
156 this.peerElement.appendChild(optionElement);
\r
159 // update the style
\r
160 this.updateStyleFromState();
\r
163 // Callback for selection change events.
\r
164 SelectionMenu.prototype.selectionChanged = function() {
\r
165 uiLogger.debug("SelectionControl.selectionChanged()");
\r
167 // update the selected options array or reference
\r
168 this.selected = (this.multipleSelection) ? [] : null;
\r
169 for (var i = 0; i < this.options.length; i++) {
\r
170 if (this.optionElements[i].selected) {
\r
171 if (this.multipleSelection) {
\r
172 this.selected.push(this.options[i]);
\r
174 this.selected = this.options[i];
\r
180 // notify event listeners
\r
181 this.fireEvent(this.createEvent("SelectionChanged", this.getSelected()));
\r
184 // Updates the style of the control to reflects the state of the control.
\r
185 SelectionMenu.prototype.updateStyleFromState = function() {
\r
186 uiLogger.debug("SelectionMenu.updateStyleFromState()");
\r
188 // determine the state name
\r
189 var stateName = this.getStyleStateName();
\r
191 // set element class names
\r
192 this.setClassName(this.rootElement, "Control");
\r
193 this.setClassName(this.controlElement, "ControlElement");
\r
194 this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName);
\r
195 this.setClassName(this.captionElement, "ControlCaption ControlCaption" + stateName);
\r
197 // set select and option element class names
\r
198 var peerStateName = this.isEnabled() ? stateName : "Disabled";
\r
199 this.setClassName(this.peerElement, "SelectionMenu SelectionMenu" + peerStateName);
\r
200 for (var i = 0; i < this.options.length; i++) {
\r
201 var option = this.optionElements[i];
\r
202 this.setClassName(option, "SelectionMenuOption SelectionMenuOption" + peerStateName);
\r