1 /**

     2  * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).

     3  * All rights reserved.

     4  * This component and the accompanying materials are made available

     5  * under the terms of the License "Eclipse Public License v1.0"

     6  * which accompanies this distribution, and is available

     7  * at the URL "http://www.eclipse.org/legal/epl-v10.html".

     8  *

     9  * Initial Contributors:

    10  * Nokia Corporation - initial contribution.

    11  * 

    12  * Contributors:

    13  * 

    14  * Description:

    15  * 

    16  */

    17 

    18 ///////////////////////////////////////////////////////////////////////////////

    19 // The SelectionMenu class implements a single or multi selection control

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

    21 

    22 // Constructor.

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

    24     if (id != UI_NO_INIT_ID) {

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

    26     }

    27 }

    28 

    29 // SelectionMenu inherits from SelectionControl.

    30 SelectionMenu.prototype = new SelectionControl(UI_NO_INIT_ID);

    31 

    32 // Reference to the peer HTML element.

    33 SelectionControl.prototype.peerElement = null;

    34 

    35 // Array for tracking option elements.

    36 SelectionMenu.prototype.optionElements = null;

    37 

    38 // Initializer - called from constructor.

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

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

    41     

    42     // call superclass initializer

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

    44     

    45     // create the control

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

    47     this.peerElement.multiple = multipleSelection;

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

    49     

    50     // init option elements array

    51     this.optionElements = [];

    52     

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

    54     this.updateOptionElements();

    55     

    56     // bind event listeners

    57     var self = this;

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

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

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

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

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

    63 };

    64 

    65 // Returns the enabled state.

    66 SelectionMenu.prototype.isEnabled = function() {

    67     return !this.peerElement.disabled;

    68 };

    69 

    70 // Sets the enabled state.

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

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

    73     this.peerElement.disabled = !enabled;

    74 };

    75 

    76 // Sets the focused state for the control.

    77 // Note: This may not always succeed.

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

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

    80     if (focused) {

    81         this.peerElement.focus();

    82     } else {

    83         this.peerElement.blur();

    84     }

    85 };

    86 

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

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

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

    90 // in a multiple selection control.

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

    92     // call superclass setSelected()

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

    94     

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

    96     // on the corresponding option element

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

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

    99     }

   100 };

   101 

   102 // Sets the options in the control.

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

   104     // call superclass setOptions()

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

   106     this.updateOptionElements();

   107 };

   108 

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

   110 SelectionMenu.prototype.updateOptionElements = function() {

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

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

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

   114     }

   115     

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

   117     // properly configured option element for each option

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

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

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

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

   122         }

   123         

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

   125         var option = this.options[i];

   126         var optionElement = this.optionElements[i];

   127         

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

   129         // peer select element

   130         optionElement.text = option.text;

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

   132         this.peerElement.appendChild(optionElement);

   133     }

   134     

   135     // update the style

   136     this.updateStyleFromState();    

   137 };

   138 

   139 // Callback for selection change events.

   140 SelectionMenu.prototype.selectionChanged = function() {

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

   142     

   143     // update the selected options array or reference

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

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

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

   147             if (this.multipleSelection) {

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

   149             } else {

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

   151                 break;

   152             }

   153         }

   154     }

   155     

   156     // notify event listeners

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

   158 };

   159 

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

   161 SelectionMenu.prototype.updateStyleFromState = function() {

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

   163     

   164     // determine the state name

   165     var stateName = this.getStyleStateName();

   166     

   167     // set element class names

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

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

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

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

   172     

   173     // set select and option element class names

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

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

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

   177         var option = this.optionElements[i];

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

   179     }

   180 };