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 SelectionMenu class implements a single or multi selection control

    44 // that lets users select one or more options from a menu.

    45 

    46 // Constructor.

    47 function SelectionMenu(id, caption, options, multipleSelection, selected) {

    48     if (id != UI_NO_INIT_ID) {

    49         this.init(id, caption, options, multipleSelection, selected);

    50     }

    51 }

    52 

    53 // SelectionMenu inherits from SelectionControl.

    54 SelectionMenu.prototype = new SelectionControl(UI_NO_INIT_ID);

    55 

    56 // Reference to the peer HTML element.

    57 SelectionControl.prototype.peerElement = null;

    58 

    59 // Array for tracking option elements.

    60 SelectionMenu.prototype.optionElements = null;

    61 

    62 // Initializer - called from constructor.

    63 SelectionMenu.prototype.init = function(id, caption, options, multipleSelection, selected) {

    64     uiLogger.debug("SelectionMenu.init(" + id + ", " + caption + ", " + options + ", " + multipleSelection + ", " + selected + ")");

    65     

    66     // call superclass initializer

    67     SelectionControl.prototype.init.call(this, id, caption, options, multipleSelection, selected);

    68     

    69     // create the control

    70     this.peerElement = document.createElement("select");

    71     this.peerElement.multiple = multipleSelection;

    72     this.controlElement.appendChild(this.peerElement);

    73     

    74     // init option elements array

    75     this.optionElements = [];

    76     

    77     // update the option elements to match the options in this control

    78     this.updateOptionElements();

    79     

    80     // bind event listeners

    81     var self = this;

    82     this.peerElement.addEventListener("focus", function() { self.focusStateChanged(true); }, false);

    83     this.peerElement.addEventListener("blur", function() { self.focusStateChanged(false); }, false);

    84     this.peerElement.addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false);

    85     this.peerElement.addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false);

    86     this.peerElement.addEventListener("change", function() { self.selectionChanged(); }, false);

    87 }

    88 

    89 // Returns the enabled state.

    90 SelectionMenu.prototype.isEnabled = function() {

    91     return !this.peerElement.disabled;

    92 }

    93 

    94 // Sets the enabled state.

    95 SelectionMenu.prototype.setEnabled = function(enabled) {

    96     uiLogger.debug("SelectionMenu.setEnabled(" + enabled + ")");

    97     this.peerElement.disabled = !enabled;

    98 }

    99 

   100 // Sets the focused state for the control.

   101 // Note: This may not always succeed.

   102 SelectionMenu.prototype.setFocused = function(focused) {

   103     uiLogger.debug("SelectionMenu.setFocused(" + focused + ")");

   104     if (focused) {

   105         this.peerElement.focus();

   106     } else {

   107         this.peerElement.blur();

   108     }

   109 }

   110 

   111 // Sets the currently selected options. Pass a single option in a single selection

   112 // control or an array of selected controls in a multiple selection control. To

   113 // deselect all options pass null in a single selection control and an empty array

   114 // in a multiple selection control.

   115 SelectionMenu.prototype.setSelected = function(selected) {

   116     // call superclass setSelected()

   117     SelectionControl.prototype.setSelected.call(this, selected);

   118     

   119     // iterate through the options and set the selected state

   120     // on the corresponding option element

   121     for (var i = 0; i < this.options.length; i++) {

   122         this.optionElements[i].selected = this.isSelected(this.options[i]);

   123     }

   124 }

   125 

   126 // Sets the options in the control.

   127 SelectionMenu.prototype.setOptions = function(options) {

   128     // call superclass setOptions()

   129     SelectionControl.prototype.setOptions.call(this, options);

   130     this.updateOptionElements();

   131 }

   132 

   133 // Updates the option elements for the peer select element.

   134 SelectionMenu.prototype.updateOptionElements = function() {

   135     // start by removing all current options from the select element

   136     while (this.peerElement.firstChild != null) {

   137         this.peerElement.removeChild(this.peerElement.firstChild);

   138     }

   139     

   140     // iterate through the options and add (and possibly create) a

   141     // properly configured option element for each option

   142     for (var i = 0; i < this.options.length; i++) {

   143         // do we need to create a new option element?

   144         if (i == this.optionElements.length) {

   145             this.optionElements.push(document.createElement("option"));

   146         }

   147         

   148         // get the option and option element we're working on

   149         var option = this.options[i];

   150         var optionElement = this.optionElements[i];

   151         

   152         // set the state for this option element and add it to the

   153         // peer select element

   154         optionElement.text = option.text;

   155         optionElement.selected = this.isSelected(option);

   156         this.peerElement.appendChild(optionElement);

   157     }

   158     

   159     // update the style

   160     this.updateStyleFromState();    

   161 }

   162 

   163 // Callback for selection change events.

   164 SelectionMenu.prototype.selectionChanged = function() {

   165     uiLogger.debug("SelectionControl.selectionChanged()");

   166     

   167     // update the selected options array or reference

   168     this.selected = (this.multipleSelection) ? [] : null;

   169     for (var i = 0; i < this.options.length; i++) {

   170         if (this.optionElements[i].selected) {

   171             if (this.multipleSelection) {

   172                 this.selected.push(this.options[i]);

   173             } else {

   174                 this.selected = this.options[i];

   175                 break;

   176             }

   177         }

   178     }

   179     

   180     // notify event listeners

   181     this.fireEvent(this.createEvent("SelectionChanged", this.getSelected()));

   182 }

   183 

   184 // Updates the style of the control to reflects the state of the control.

   185 SelectionMenu.prototype.updateStyleFromState = function() {

   186     uiLogger.debug("SelectionMenu.updateStyleFromState()");

   187     

   188     // determine the state name

   189     var stateName = this.getStyleStateName();

   190     

   191     // set element class names

   192     this.setClassName(this.rootElement, "Control");

   193     this.setClassName(this.controlElement, "ControlElement");

   194     this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName);

   195     this.setClassName(this.captionElement, "ControlCaption ControlCaption" + stateName);

   196     

   197     // set select and option element class names

   198     var peerStateName = this.isEnabled() ? stateName : "Disabled";

   199     this.setClassName(this.peerElement, "SelectionMenu SelectionMenu" + peerStateName);

   200     for (var i = 0; i < this.options.length; i++) {

   201         var option = this.optionElements[i];

   202         this.setClassName(option, "SelectionMenuOption SelectionMenuOption" + peerStateName);

   203     }

   204 }