--- /dev/null
+/*\r
+© Copyright 2008 Nokia Corporation. All rights reserved.\r
+\r
+IMPORTANT: The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia\r
+Corporation (“Nokia”) in consideration of your agreement to the following terms. Your use, installation\r
+and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If\r
+you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example\r
+Widget files.\r
+\r
+In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia\r
+grants you a personal, non-exclusive license, under Nokia’s copyrights in the WRTKit and Example\r
+Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,\r
+CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60\r
+Widgets.\r
+\r
+If you redistribute the WRTKit and Example files, you must retain this entire notice in all such\r
+redistributions of the WRTKit and Example files.\r
+\r
+You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products\r
+that include the WRTKit and Example files without the prior written explicit agreement with Nokia.\r
+Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by\r
+Nokia herein, including but not limited to any patent rights that may be infringed by your products that\r
+incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files\r
+may be incorporated.\r
+\r
+The WRTKit and Example files are provided on an "AS IS" basis. NOKIA MAKES NO\r
+WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED\r
+WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A\r
+PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION\r
+ALONE OR IN COMBINATION WITH YOUR PRODUCTS.\r
+\r
+IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR\r
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF\r
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS\r
+INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR\r
+DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY\r
+OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,\r
+EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\r
+\r
+*/\r
+\r
+///////////////////////////////////////////////////////////////////////////////\r
+// The SelectionList class implements a single or multi selection control\r
+// that lets users select one or more options from a list of options.\r
+\r
+// Constructor.\r
+function SelectionList(id, caption, options, multipleSelection, selected) {\r
+ if (id != UI_NO_INIT_ID) {\r
+ this.init(id, caption, options, multipleSelection, selected);\r
+ }\r
+}\r
+\r
+// SelectionList inherits from SelectionControl.\r
+SelectionList.prototype = new SelectionControl(UI_NO_INIT_ID);\r
+\r
+// Root element for options.\r
+SelectionList.prototype.optionListElement = null;\r
+\r
+// Array for tracking option elements.\r
+SelectionList.prototype.optionElements = null;\r
+\r
+// Tracking for currently focused option; null if none.\r
+SelectionList.prototype.focusedOption = null;\r
+\r
+// Enabled status.\r
+SelectionList.prototype.enabled = false;\r
+\r
+// Initializer - called from constructor.\r
+SelectionList.prototype.init = function(id, caption, options, multipleSelection, selected) {\r
+ uiLogger.debug("SelectionList.init(" + id + ", " + caption + ", " + options + ", " + multipleSelection + ", " + selected + ")");\r
+ \r
+ // call superclass initializer\r
+ SelectionControl.prototype.init.call(this, id, caption, options, multipleSelection, selected);\r
+ \r
+ // create option list element\r
+ this.optionListElement = document.createElement("div");\r
+ this.controlElement.appendChild(this.optionListElement);\r
+ \r
+ // the control defaults to enabled\r
+ this.enabled = true;\r
+ \r
+ // init option element arrays\r
+ this.optionElements = [];\r
+ \r
+ // update the option elements to match the options in this control\r
+ this.updateOptionElements();\r
+}\r
+\r
+// Returns the enabled state.\r
+SelectionList.prototype.isEnabled = function() {\r
+ return this.enabled;\r
+}\r
+\r
+// Sets the enabled state.\r
+SelectionList.prototype.setEnabled = function(enabled) {\r
+ uiLogger.debug("SelectionList.setEnabled(" + enabled + ")");\r
+ // switch the state and update the the control\r
+ this.enabled = enabled;\r
+ this.updateOptionElements();\r
+}\r
+\r
+// Sets the focused state for the control.\r
+// Note: This may not always succeed.\r
+SelectionList.prototype.setFocused = function(focused) {\r
+ uiLogger.debug("SelectionList.setFocused(" + focused + ")");\r
+ if (this.enabled && this.optionElements.length > 0) {\r
+ if (focused) {\r
+ this.optionElements[0].link.focus();\r
+ } else {\r
+ this.optionElements[0].link.blur();\r
+ }\r
+ }\r
+}\r
+\r
+// Sets the currently selected options. Pass a single option in a single selection\r
+// control or an array of selected controls in a multiple selection control. To\r
+// deselect all options pass null in a single selection control and an empty array\r
+// in a multiple selection control.\r
+SelectionList.prototype.setSelected = function(selected) {\r
+ // call superclass setSelected()\r
+ SelectionControl.prototype.setSelected.call(this, selected);\r
+ this.updateStyleFromState();\r
+}\r
+\r
+// Sets the options in the control.\r
+SelectionList.prototype.setOptions = function(options) {\r
+ // call superclass setOptions()\r
+ SelectionControl.prototype.setOptions.call(this, options);\r
+ this.updateOptionElements();\r
+}\r
+\r
+// Updates the option elements for the control element.\r
+SelectionList.prototype.updateOptionElements = function() {\r
+ uiLogger.debug("SelectionControl.updateOptionElements()");\r
+ \r
+ // start by removing all current options from the option list element\r
+ while (this.optionListElement.firstChild != null) {\r
+ this.optionListElement.removeChild(this.optionListElement.firstChild);\r
+ }\r
+ \r
+ // iterate through the options and add (and possibly create) a\r
+ // properly configured option element for each option\r
+ for (var i = 0; i < this.options.length; i++) {\r
+ // get the option and option element we're working on\r
+ var option = this.options[i];\r
+ \r
+ // option, link and text elements for this option\r
+ var optionElement;\r
+ var optionLinkElement;\r
+ var optionTextElement;\r
+ \r
+ // get the elements\r
+ if (i == this.optionElements.length) {\r
+ // we need to create a new option element...\r
+ optionElement = document.createElement("div");\r
+ \r
+ // ...and a new option link element...\r
+ optionLinkElement = document.createElement("a");\r
+ optionLinkElement.href = "JavaScript:void(0)";\r
+ \r
+ // ...and a new option text element\r
+ optionTextElement = document.createElement("span");\r
+ \r
+ // hook up event listeners to the element\r
+ var self = this;\r
+ optionLinkElement.addEventListener("focus", function(event) { self.optionFocusStateChanged(event, true); }, false);\r
+ optionLinkElement.addEventListener("blur", function(event) { self.optionFocusStateChanged(event, false); }, false);\r
+ optionElement.addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false);\r
+ optionElement.addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false);\r
+ optionElement.addEventListener("mousedown", function(event) {\r
+ self.optionClicked(event)\r
+ event.stopPropagation();\r
+ event.preventDefault();\r
+ }, true);\r
+ optionElement.addEventListener("keydown", function(event) {\r
+ // center and enter trigger the action\r
+ if (event.keyCode == 0 || event.keyCode == 13) {\r
+ self.optionClicked(event)\r
+ event.stopPropagation();\r
+ event.preventDefault();\r
+ }\r
+ }, true);\r
+ \r
+ // add the elements to the option element array\r
+ this.optionElements.push({ option: optionElement, link: optionLinkElement, text: optionTextElement });\r
+ } else {\r
+ // we already have ready elements so we'll reuse them\r
+ optionElement = this.optionElements[i].option;\r
+ optionLinkElement = this.optionElements[i].link;\r
+ optionTextElement = this.optionElements[i].text;\r
+ \r
+ // remove the option link element from its current parent - if any\r
+ if (optionLinkElement.parentNode != null) {\r
+ optionLinkElement.parentNode.removeChild(optionLinkElement);\r
+ }\r
+ \r
+ // remove the option text element from its current parent - if any\r
+ if (optionTextElement.parentNode != null) {\r
+ optionTextElement.parentNode.removeChild(optionTextElement);\r
+ }\r
+ }\r
+ \r
+ // set the option text\r
+ optionTextElement.innerHTML = option.text;\r
+ \r
+ // hook up the option to the control\r
+ if (this.enabled) {\r
+ // add the option link element to the option element\r
+ optionElement.appendChild(optionLinkElement);\r
+ // add the text element to the option element\r
+ optionLinkElement.appendChild(optionTextElement);\r
+ } else {\r
+ // add the text element directly to the control element\r
+ optionElement.appendChild(optionTextElement);\r
+ }\r
+ // add the option element to the option list element\r
+ this.optionListElement.appendChild(optionElement);\r
+ }\r
+ \r
+ // update the style\r
+ this.updateStyleFromState();\r
+}\r
+\r
+// Callback for focus state change events.\r
+SelectionList.prototype.optionFocusStateChanged = function(event, focused) {\r
+ uiLogger.debug("SelectionControl.optionFocusStateChanged()");\r
+ \r
+ // get the event source option\r
+ var option = null;\r
+ var optionElement = null;\r
+ for (var i = 0; i < this.optionElements.length; i++) {\r
+ optionElement = this.optionElements[i];\r
+ if (optionElement.link == event.currentTarget) {\r
+ option = this.options[i];\r
+ break;\r
+ }\r
+ }\r
+ \r
+ // remember the focused option; or null if none is focused\r
+ if (focused) {\r
+ this.focusedOption = option;\r
+ } else {\r
+ this.focusedOption = null;\r
+ }\r
+ \r
+ // call the superclass focus state change handler\r
+ this.focusStateChanged(focused);\r
+}\r
+\r
+// Callback for clicks.\r
+SelectionList.prototype.optionClicked = function(event) {\r
+ uiLogger.debug("SelectionControl.optionClicked()");\r
+ \r
+ // bail out if we're not enabled\r
+ if (!this.enabled) {\r
+ return false;\r
+ }\r
+ \r
+ // get the changed option\r
+ var option = null;\r
+ var optionElement = null;\r
+ for (var i = 0; i < this.optionElements.length; i++) {\r
+ optionElement = this.optionElements[i];\r
+ if (optionElement.option == event.currentTarget) {\r
+ option = this.options[i];\r
+ break;\r
+ }\r
+ }\r
+ \r
+ // make sure the option is focused\r
+ optionElement.link.focus();\r
+ \r
+ // toggle the selection\r
+ if (this.multipleSelection) {\r
+ // iterate through the selected options and see if this\r
+ // option is selected. if not then add it to the selection.\r
+ // if it already is selected then them remove it.\r
+ var found = false;\r
+ for (var i = 0; i < this.selected.length; i++) {\r
+ if (this.selected[i] == option) {\r
+ // remove from selected set\r
+ found = true;\r
+ this.selected.splice(i, 1);\r
+ break;\r
+ }\r
+ }\r
+ if (!found) {\r
+ // add to the selected set\r
+ this.selected.push(option);\r
+ }\r
+ } else {\r
+ // update the selected option\r
+ this.selected = option;\r
+ }\r
+ \r
+ // update the style\r
+ this.updateStyleFromState();\r
+ \r
+ // notify event listeners\r
+ this.fireEvent(this.createEvent("SelectionChanged", this.getSelected()));\r
+}\r
+\r
+// Resets the state tracking for focus and hover.\r
+// Override this in subclasses as required to implement the state reset.\r
+SelectionList.prototype.resetFocusState = function() {\r
+ uiLogger.debug("SelectionList.resetFocusState()");\r
+ this.hovering = false;\r
+ this.focused = false;\r
+ this.focusedOption = null;\r
+ this.updateStyleFromState();\r
+}\r
+\r
+// Updates the style of the control to reflects the state of the control.\r
+SelectionList.prototype.updateStyleFromState = function() {\r
+ uiLogger.debug("SelectionList.updateStyleFromState()");\r
+ \r
+ // determine the state name\r
+ var stateName = this.getStyleStateName();\r
+ \r
+ // set element class names\r
+ this.setClassName(this.rootElement, "Control");\r
+ this.setClassName(this.controlElement, "ControlElement");\r
+ this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName);\r
+ this.setClassName(this.captionElement, "ControlCaption ControlCaption" + stateName);\r
+ \r
+ // set option list and option class names\r
+ this.setClassName(this.optionListElement, "SelectionList SelectionList" + stateName);\r
+ for (var i = 0; i < this.options.length; i++) {\r
+ var option = this.options[i];\r
+ \r
+ // get the option and option text elements for this option\r
+ var optionElement = this.optionElements[i].option;\r
+ var optionTextElement = this.optionElements[i].text;\r
+ \r
+ // figure out the option state\r
+ var optionStateName = this.isSelected(option) ? "Checked" : "Unchecked";\r
+ if (!this.enabled) {\r
+ optionStateName += "Disabled";\r
+ } else if (this.focusedOption == option) {\r
+ optionStateName += "Focus";\r
+ } else {\r
+ optionStateName += "Normal";\r
+ }\r
+ \r
+ // set option element class names\r
+ if (this.multipleSelection) {\r
+ this.setClassName(optionElement, "SelectionListOptionMulti SelectionListOptionMulti" + optionStateName);\r
+ } else {\r
+ this.setClassName(optionElement, "SelectionListOptionSingle SelectionListOptionSingle" + optionStateName);\r
+ }\r
+ \r
+ // set option text class names\r
+ this.setClassName(optionTextElement, "SelectionListOptionText SelectionListOptionText" + stateName);\r
+ }\r
+}\r
projects / ptas / blobdiff