extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-28 17:48:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implemented 'label' property for input widgets (nathans code didn't work anymore), renamed 'parseArrayMgrAttrs' to 'transformAttributes'

Browse Source
This commit is contained in:
Andreas Stöckel 2011-08-21 15:22:00 +00:00
parent db9434d8e6
commit 8bc726e1b8
8 changed files with 149 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
etemplate/js/et2_DOMWidget.js
View File

@ -160,6 +160,10 @@ var et2_DOMWidget = et2_widget.extend(et2_IDOMNode, {
return false; return false;
}, },
isAttached: function() {
return this.parentNode != null;
},
/** /**
* Set the parent DOM node of this element. If another parent node is already * Set the parent DOM node of this element. If another parent node is already
* set, this widget removes itself from the DOM tree * set, this widget removes itself from the DOM tree

11
etemplate/js/et2_baseWidget.js
View File

@ -54,9 +54,18 @@ var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, {
this.node = null; this.node = null;
this.statustext = ""; this.statustext = "";
this._labelContainer = null;
this._widgetPlaceholder = null;
this._tooltipElem = null; this._tooltipElem = null;
}, },
destroy: function() {
this._super.apply(this, arguments);
this.node = null;
},
detatchFromDOM: function() { detatchFromDOM: function() {
// Detach this node from the tooltip node // Detach this node from the tooltip node
if (this._tooltipElem) if (this._tooltipElem)
@ -69,7 +78,7 @@ var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, {
}, },
attachToDOM: function() { attachToDOM: function() {
this._super.apply(this,arguments); this._super.apply(this, arguments);
// Update the statustext // Update the statustext
this.set_statustext(this.statustext); this.set_statustext(this.statustext);

106
etemplate/js/et2_inputWidget.js
View File

@ -59,13 +59,47 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
"description": "The label is displayed by default in front (for radiobuttons behind) each widget (if not empty). If you want to specify a different position, use a '%s' in the label, which gets replaced by the widget itself. Eg. '%s Name' to have the label Name behind a checkbox. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables)." "description": "The label is displayed by default in front (for radiobuttons behind) each widget (if not empty). If you want to specify a different position, use a '%s' in the label, which gets replaced by the widget itself. Eg. '%s Name' to have the label Name behind a checkbox. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables)."
} }
}, },
init: function() { init: function() {
this._super.apply(this, arguments); this._super.apply(this, arguments);
this._oldValue = ""; this._oldValue = "";
this._labelContainer = null;
this._widgetPlaceholder = null;
},
destroy: function() {
this._super.apply(this, arguments);
this._labelContainer = null;
this._widgetPlaceholder = null;
}, },
attachToDOM: function() { attachToDOM: function() {
if (this._labelContainer)
{
// Get the DOM Node without the labelContainer - that's why null is
// passed here.
var node = this.getDOMNode(null);
if (node)
{
// Recreate the widget placeholder and return, as the set_label
// function will call attachToDOM again
if (!this._widgetPlaceholder)
{
this.set_label(this.label);
return;
}
// Insert the widget at the position of the placeholder
this._labelContainer.replaceChild(node, this._widgetPlaceholder);
// Set the widgetPlaceholder to null
this._widgetPlaceholder = null;
}
}
this._super.apply(this,arguments); this._super.apply(this,arguments);
$j(this.getInputNode()).attr("novalidate","novalidate"); // Stop browser from getting involved $j(this.getInputNode()).attr("novalidate","novalidate"); // Stop browser from getting involved
@ -110,13 +144,60 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
} }
}, },
set_label: function(_label) { set_label: function(_value) {
if(_label != this.label) // Copy the given value
this.label = _value;
// Detach the current element from the DOM
var attached = this.isAttached();
if (attached)
{ {
this.label = (typeof _label == 'undefined' ? "" : _label); this.detatchFromDOM();
var label = et2_csvSplit(_label, 2, '%s'); }
if(label[0]) $j(this.getInputNode()).before("<span class='et2_label'>"+label[0]+"</span>");
if(label[1]) $j(this.getInputNode()).after("<span class='et2_label'>"+label[1]+"</span>"); if (_value)
{
// Create the label container if it didn't exist yet
if (this._labelContainer == null)
{
this._labelContainer = document.createElement("span");
}
// Clear the label container.
for (;this._labelContainer.childNodes.length > 0;)
{
this._labelContainer.removeChild(this._labelContainer.childNodes[0]);
}
// Create the placeholder element
this._widgetPlaceholder = document.createElement("span");
// Split the label at the "%s"
var parts = et2_csvSplit(_value, 2, "%s");
// Create the content of the label container
for (var i = 0; i < parts.length; i++)
{
if (parts[i])
{
this._labelContainer.appendChild(document.createTextNode(parts[i]));
}
if (i == 0)
{
this._labelContainer.appendChild(this._widgetPlaceholder);
}
}
}
else
{
this._labelContainer = null;
this._widgetPlaceholder = null;
}
// Attach the current element to the DOM again
if (attached)
{
this.attachToDOM();
} }
}, },
@ -133,14 +214,23 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
}, },
get_value: function() { getDOMNode: function(_sender) {
return this.getValue(); if (_sender == this && this._labelContainer)
{
return this._labelContainer;
}
return this._super.apply(this, arguments);
}, },
getInputNode: function() { getInputNode: function() {
return this.node; return this.node;
}, },
get_value: function() {
return this.getValue();
},
getValue: function() { getValue: function() {
var node = this.getInputNode(); var node = this.getInputNode();
if (node) if (node)

4
etemplate/js/et2_selectbox.js
View File

@ -66,7 +66,7 @@ var et2_selectbox = et2_inputWidget.extend({
this.input = null; this.input = null;
}, },
parseArrayMgrAttrs: function(_attrs) { transformAttributes: function(_attrs) {
// Try to find the options inside the "sel-options" array // Try to find the options inside the "sel-options" array
_attrs["select_options"] = this.getArrayMgr("sel_options").getValueForID(this.id); _attrs["select_options"] = this.getArrayMgr("sel_options").getValueForID(this.id);
@ -193,7 +193,7 @@ var et2_menulist = et2_DOMWidget.extend({
// Just pass the parent DOM node through // Just pass the parent DOM node through
getDOMNode: function(_sender) { getDOMNode: function(_sender) {
if (_sender != this._parent && _sender != this) if (_sender != this)
{ {
return this._parent.getDOMNode(this); return this._parent.getDOMNode(this);
} }

2
etemplate/js/et2_valueWidget.js
View File

@ -33,7 +33,7 @@ var et2_valueWidget = et2_baseWidget.extend({
} }
}, },
parseArrayMgrAttrs: function(_attrs) { transformAttributes: function(_attrs) {
this._super.call(this, arguments); this._super.call(this, arguments);
if (this.id != "") if (this.id != "")

4
etemplate/js/et2_widget.js
View File

@ -145,7 +145,7 @@ var et2_widget = Class.extend({
// Add all attributes hidden in the content arrays to the attributes // Add all attributes hidden in the content arrays to the attributes
// parameter // parameter
this.parseArrayMgrAttrs(_attrs); this.transformAttributes(_attrs);
} }
// Create a local copy of the options object // Create a local copy of the options object
@ -430,7 +430,7 @@ var et2_widget = Class.extend({
} }
}, },
parseArrayMgrAttrs: function() { transformAttributes: function() {
}, },
createElementFromNode: function(_node) { createElementFromNode: function(_node) {

60
etemplate/js/test/et2_test_basic_widgets.xet
View File

@ -1,33 +1,35 @@
<?xml version="1.0"?> <?xml version="1.0"?>
<overlay> <overlay>
<!-- Test without template --> <!-- Test without template -->
<description value="This is a label" id="label_value"/> <vbox>
<textbox label="This is a text" id="text_value"/> <description value="This is a label" id="label_value"/>
<textbox label="This is required text" id="text_value" required="true"/> <textbox label="This is a text" id="text_value"/>
<int label="This is an integer" id="integer_value" min="5"/> <textbox label="This is required text" id="text_value" required="true"/>
<textbox type="float" label="This is a float" id="float_value"/> <int label="This is an integer" id="integer_value" min="5"/>
<textbox multiline="true" label="This is a text area" id="text_area_value" rows="3" cols="3"/> <textbox type="float" label="This is a float" id="float_value"/>
<checkbox label="Checkbox %s here" id="checkbox_value"/> <textbox multiline="true" label="This is a text area" id="text_area_value" rows="3" cols="3"/>
<radio label="Radio" id="radio_value"/> <checkbox label="Checkbox %s here" id="checkbox_value"/>
<buttononly label="Button" id="button_value"/> <radio label="Radio" id="radio_value"/>
<hrule label="HR"/> <buttononly label="Button" id="button_value"/>
<image label="Image" src="image_value"/> <hrule label="HR"/>
<menulist> <image label="Image" src="image_value"/>
<menupopup label="Selectbox" id="selectbox_value" options="No value"> <menulist>
<option value="1">Test 1</option> <menupopup label="Selectbox" id="selectbox_value" options="No value">
<option value="2">Test 2</option> <option value="1">Test 1</option>
<option value="3">Test 3</option> <option value="2">Test 2</option>
<option value="4">Test 4</option> <option value="3">Test 3</option>
<option value="5">Test 5</option> <option value="4">Test 4</option>
<option value="6">Test 6</option> <option value="5">Test 5</option>
</menupopup> <option value="6">Test 6</option>
</menulist> </menupopup>
<listbox label="Multiselect" id="multiselect" rows="5"> </menulist>
<option value="1">Test 1</option> <listbox label="Multiselect" id="multiselect" rows="5">
<option value="2">Test 2</option> <option value="1">Test 1</option>
<option value="3">Test 3</option> <option value="2">Test 2</option>
<option value="4">Test 4</option> <option value="3">Test 3</option>
<option value="5">Test 5</option> <option value="4">Test 4</option>
<option value="6" statustext="This is the sixth option">Test 6</option> <option value="5">Test 5</option>
</listbox> <option value="6" statustext="This is the sixth option">Test 6</option>
</listbox>
</vbox>
</overlay> </overlay>

1
etemplate/js/test/test_xml.html
View File

@ -52,6 +52,7 @@
<a href="#" onclick="open_xet('et2_test_basic_widgets.xet');">Basic widgits</a> <a href="#" onclick="open_xet('et2_test_basic_widgets.xet');">Basic widgits</a>
<a href="#" onclick="open_xet('et2_test_expressions.xet', expression_test_data);">Expression test</a> <a href="#" onclick="open_xet('et2_test_expressions.xet', expression_test_data);">Expression test</a>
<a href="#" onclick="open_xet('et2_test_hbox.xet');">HBox test</a> <a href="#" onclick="open_xet('et2_test_hbox.xet');">HBox test</a>
<a href="#" onclick="open_xet('et2_test_label.xet');">Label test</a>
</div> </div>
<div class="header">ETemplate2 container:</div> <div class="header">ETemplate2 container:</div>
<div id="container"></div> <div id="container"></div>