From 09bc77426c0cad985b9eadd5eafcdeeba5cbcd95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20St=C3=B6ckel?= Date: Sun, 21 Aug 2011 13:24:20 +0000 Subject: [PATCH] Selectbox now allows 'option'-widgets inside of it, added hrule widget, added support for 'buttononly' --- etemplate/js/et2_button.js | 11 ++- etemplate/js/et2_hrule.js | 33 ++++++++ etemplate/js/et2_selectbox.js | 84 +++++++++++++++++--- etemplate/js/etemplate2.js | 1 + etemplate/js/test/et2_test_basic_widgets.xet | 43 ++++------ etemplate/js/test/test.css | 12 +++ etemplate/js/test/test_xml.html | 1 + 7 files changed, 145 insertions(+), 40 deletions(-) create mode 100644 etemplate/js/et2_hrule.js diff --git a/etemplate/js/et2_button.js b/etemplate/js/et2_button.js index a3ee5c5605..4c7f5fc0f1 100644 --- a/etemplate/js/et2_button.js +++ b/etemplate/js/et2_button.js @@ -63,9 +63,12 @@ var et2_button = et2_baseWidget.extend(et2_IInput, { } // Submit the form - this.clicked = true; - this.getInstanceManager().submit(); - this.clicked = false; + if (this._type != "buttononly") + { + this.clicked = true; + this.getInstanceManager().submit(); + this.clicked = false; + } }, set_label: function(_value) { @@ -105,5 +108,5 @@ var et2_button = et2_baseWidget.extend(et2_IInput, { }); -et2_register_widget(et2_button, ["button"]); +et2_register_widget(et2_button, ["button", "buttononly"]); diff --git a/etemplate/js/et2_hrule.js b/etemplate/js/et2_hrule.js new file mode 100644 index 0000000000..f3e6521685 --- /dev/null +++ b/etemplate/js/et2_hrule.js @@ -0,0 +1,33 @@ +/** + * eGroupWare eTemplate2 - JS HRule object + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package etemplate + * @subpackage api + * @link http://www.egroupware.org + * @author Andreas Stöckel + * @copyright Stylite 2011 + * @version $Id$ + */ + +"use strict"; + +/*egw:uses + et2_baseWidget; +*/ + +/** + * Class which implements the hrule tag + */ +var et2_hrule = et2_baseWidget.extend({ + + init: function(_parent) { + this._super.apply(this, arguments); + + this.setDOMNode(document.createElement("hr")); + } + +}); + +et2_register_widget(et2_hrule, ["hrule"]); + diff --git a/etemplate/js/et2_selectbox.js b/etemplate/js/et2_selectbox.js index 60615c68bb..e506f41af9 100644 --- a/etemplate/js/et2_selectbox.js +++ b/etemplate/js/et2_selectbox.js @@ -14,7 +14,9 @@ "use strict"; /*egw:uses + lib/tooltip; jquery.jquery; + et2_DOMWidget; et2_inputWidget; */ @@ -40,7 +42,10 @@ var et2_selectbox = et2_inputWidget.extend({ "description": "Textual label for first row, eg: 'All' or 'None'. ID will be ''" }, "select_options": { - "ignore": true // Just include "select_options" here to have it copied from the parseArrayMgrAttrs to the options-object + "type": "any", + "name": "Select options", + "default": {}, + "description": "Internaly used to hold the select options." } }, @@ -49,12 +54,18 @@ var et2_selectbox = et2_inputWidget.extend({ init: function(_parent) { this._super.apply(this, arguments); - // This widget allows no other widgets inside of it - this.supportedWidgetClasses = []; + // Only allow options inside this element + this.supportedWidgetClasses = [et2_option]; this.createInputWidget(); }, + destroy: function() { + this._super.apply(this, arguments); + + this.input = null; + }, + parseArrayMgrAttrs: function(_attrs) { // Try to find the options inside the "sel-options" array _attrs["select_options"] = this.getArrayMgr("sel_options").getValueForID(this.id); @@ -96,17 +107,23 @@ var et2_selectbox = et2_inputWidget.extend({ this.empty_label); } - // Add the select_options - for(var key in this.options.select_options) - { - this._appendOptionElement(key, this.options.select_options[key]); - } - // Set multiselect if(this.options.multiselect) { 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) { + // Add the select_options + for (var key in _options) + { + this._appendOptionElement(key, _options[key]); + } } }); @@ -114,6 +131,55 @@ var et2_selectbox = et2_inputWidget.extend({ et2_register_widget(et2_selectbox, ["menupopup", "listbox", "select-cat", "select-account"]); +/** + * 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." + }, + "width": { + "ignore": true + }, + "height": { + "ignore": true + }, + "align": { + "ignore": true + } + }, + + init: function() { + this._super.apply(this, arguments); + + // Allow no other widgets inside of this one. + this.supportedWidgetClasses = []; + + this.option = $j(document.createElement("option")) + .attr("value", this.options.value); + + this.setDOMNode(this.option[0]); + }, + + destroy: function() { + this._super.apply(this, arguments); + + this.option = null; + }, + + loadContent: function(_data) { + this.option.text(_data); + } + +}); + +et2_register_widget(et2_option, ["option"]); + + /** * Class which just implements the menulist container */ diff --git a/etemplate/js/etemplate2.js b/etemplate/js/etemplate2.js index e61553eb63..a2585c4e0c 100644 --- a/etemplate/js/etemplate2.js +++ b/etemplate/js/etemplate2.js @@ -26,6 +26,7 @@ et2_styles; et2_html; et2_tabs; + et2_hrule; // Requirements for the etemplate2 object et2_xml; diff --git a/etemplate/js/test/et2_test_basic_widgets.xet b/etemplate/js/test/et2_test_basic_widgets.xet index d92fe71bbc..ba2a6982a6 100644 --- a/etemplate/js/test/et2_test_basic_widgets.xet +++ b/etemplate/js/test/et2_test_basic_widgets.xet @@ -13,32 +13,21 @@ - + + + + + + + + - - - - - - + + + + + + + + diff --git a/etemplate/js/test/test.css b/etemplate/js/test/test.css index cfe6cf1e38..6cf975fe2a 100644 --- a/etemplate/js/test/test.css +++ b/etemplate/js/test/test.css @@ -239,3 +239,15 @@ input.invalid { .error p { margin: 0; } + +/** + * hrule widget + */ + +hr { + border-style: none; + border-top: 1px solid silver; + height: 1px; + margin: 10px 0px 10px 0px; +} + diff --git a/etemplate/js/test/test_xml.html b/etemplate/js/test/test_xml.html index b7fedc28b7..90846aa88e 100644 --- a/etemplate/js/test/test_xml.html +++ b/etemplate/js/test/test_xml.html @@ -25,6 +25,7 @@ +