/** * eGroupWare eTemplate2 - JS Selectbox object * * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @package etemplate * @subpackage api * @link http://www.egroupware.org * @author Nathan Gray * @author Andreas Stöckel * @copyright Nathan Gray 2011 * @version $Id$ */ "use strict"; /*egw:uses lib/tooltip; jquery.jquery; et2_xml; et2_DOMWidget; et2_inputWidget; */ var et2_selectbox = et2_inputWidget.extend({ attributes: { "multiple": { "name": "multiple", "type": "boolean", "default": false, "description": "Allow selecting multiple options" }, "rows": { "name": "Rows", "type": "any", // Old options put either rows or empty_label in first space "default": 1, "description": "Number of rows to display" }, "empty_label": { "name": "Empty label", "type": "string", "default": "", "description": "Textual label for first row, eg: 'All' or 'None'. ID will be ''" }, "select_options": { "type": "any", "name": "Select options", "default": {}, "description": "Internaly used to hold the select options." } }, legacyOptions: ["rows"], init: function(_parent, _attrs) { this._super.apply(this, arguments); // Only allow options inside this element this.supportedWidgetClasses = [et2_option]; // Legacy options could have row count or empty label in first slot if(typeof _attrs.rows == "string" && isNaN(_attrs.rows)) { this.options.empty_label = _attrs.rows; this.options.rows = 1; } if(this.options.rows > 1) this.options.multiple = true; this.createInputWidget(); }, destroy: function() { this._super.apply(this, arguments); this.input = null; }, transformAttributes: function(_attrs) { this._super.apply(this, arguments); // Try to find the options inside the "sel-options" array _attrs["select_options"] = this.getArrayMgr("sel_options").getValueForID(this.id); // Check whether the options entry was found, if not read it from the // content array. if (_attrs["select_options"] == null) { _attrs["select_options"] = this.getArrayMgr('content') .getValueForID("options-" + this.id) } // Default to an empty object if (_attrs["select_options"] == null) { _attrs["select_options"] = {}; } }, _appendOptionElement: function(_value, _label) { $j(document.createElement("option")) .attr("value", _value) .text(_label) .appendTo(this.input); }, createInputWidget: function() { // Create the base input widget this.input = $j(document.createElement("select")) .addClass("et2_selectbox") .attr("size", this.options.rows); this.setDOMNode(this.input[0]); // Add the empty label if(this.options.empty_label) { this._appendOptionElement("" == this.getValue() ? "selected" : "", this.options.empty_label); } // Set multiple if(this.options.multiple) { this.input.attr("multiple", "multiple"); } }, /** * The set_select_optons function is added, as the select options have to be * added after the "option"-widgets were added to selectbox. */ set_select_options: function(_options) { var root = this; // Add the select_options for (var key in _options) { var attrs = { "value": key }; if (_options[key] instanceof Object) { attrs["label"] = _options[key]["label"] ? _options[key]["label"] : ""; attrs["statustext"] = _options[key]["title"] ? _options[key]["title"] : ""; } else { attrs["label"] = _options[key] } // Create the widget and add it as a child this.addChild(et2_createWidget("option", attrs)); } } }); et2_register_widget(et2_selectbox, ["menupopup", "listbox", "select-cat", "select-account", "select-percent", 'select-priority', 'select-access', 'select-country', 'select-state', 'select-year', 'select-month', 'select-day', 'select-dow', 'select-hour', 'date-houronly', 'select-number', 'select-app', 'select-lang', 'select-bool', 'select-timezone' ]); /** * et2_selectbox_ro is the readonly implementation of the selectbox. */ var et2_selectbox_ro = et2_selectbox.extend({ init: function(_parent, _attrs) { this._super.apply(this, arguments); this.supportedWidgetClasses = []; this.optionValues = {}; }, createInputWidget: function() { this.span = $j(document.createElement("span")) .addClass("et2_selectbox readonly") .text(this.options.empty_label); this.setDOMNode(this.span[0]); }, loadFromXML: function(_node) { // Read the option-tags var options = et2_directChildrenByTagName(_node, "options"); for (var i = 0; i < options.length; i++) { this.optionValues[et2_readAttrWithDefault(options[i], "value", 0)] = { "label": options[i].textContent, "title": et2_readAttrWithDefault(options[i], "title", "") } } }, set_select_options: function(_options) { for (var key in _options) { this.optionValues[key] = _options[key]; } }, set_value: function(_value) { this.value = _value; var option = this.optionValues[_value]; if (option instanceof Object) { this.span.text(option.label); this.set_statustext(option.title); } else { this.span.text(option); } } }); et2_register_widget(et2_selectbox_ro, ["menupopup_ro", "listbox_ro", "select-cat_ro", "select-account_ro", "select-percent_ro", 'select-priority_ro', 'select-access_ro', 'select-country_ro', 'select-state_ro', 'select-year_ro', 'select-month_ro', 'select-day_ro', 'select-dow_ro', 'select-hour_ro', 'date-houronly_ro', 'select-number_ro', 'select-app_ro', 'select-lang_ro', 'select-bool_ro', 'select-timezone_ro' ]); /** * Widget class which represents a single option inside a selectbox */ var et2_option = et2_baseWidget.extend({ attributes: { "value": { "name": "Value", "type": "string", "description": "Value which is sent back to the server when this entry is selected." }, "label": { "name": "Label", "type": "string", "description": "Caption of the option element" }, "width": { "ignore": true }, "height": { "ignore": true }, "align": { "ignore": true } }, init: function() { this._super.apply(this, arguments); // Only allow other options inside of this element this.supportedWidgetClasses = [et2_option]; this.option = $j(document.createElement("option")) .attr("value", this.options.value); if (this.options.label) { this.option.text(this.options.label); } this.setDOMNode(this.option[0]); }, destroy: function() { this._super.apply(this, arguments); this.option = null; }, loadContent: function(_data) { this.option.text(_data); }, /* Doesn't work either with selectboxes set_statustext: function(_value) { this.statustext = _value; this.option.attr("title", _value); }*/ }); et2_register_widget(et2_option, ["option"]); /** * Class which just implements the menulist container */ var et2_menulist = et2_DOMWidget.extend({ init: function() { this._super.apply(this, arguments); this.supportedWidgetClasses = [et2_selectbox, et2_selectbox_ro]; }, // Just pass the parent DOM node through getDOMNode: function(_sender) { if (_sender != this) { return this._parent.getDOMNode(this); } return null; } }); et2_register_widget(et2_menulist, ["menulist"]);