extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-28 01:29:05 +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;
},
isAttached: function() {
return this.parentNode != null;
},
/**
* Set the parent DOM node of this element. If another parent node is already
* 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.statustext = "";
this._labelContainer = null;
this._widgetPlaceholder = null;
this._tooltipElem = null;
},
destroy: function() {
this._super.apply(this, arguments);
this.node = null;
},
detatchFromDOM: function() {
// Detach this node from the tooltip node
if (this._tooltipElem)
@ -69,7 +78,7 @@ var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, {
},
attachToDOM: function() {
this._super.apply(this,arguments);
this._super.apply(this, arguments);
// Update the 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)."
}
},
init: function() {
this._super.apply(this, arguments);
this._oldValue = "";
this._labelContainer = null;
this._widgetPlaceholder = null;
},
destroy: function() {
this._super.apply(this, arguments);
this._labelContainer = null;
this._widgetPlaceholder = null;
},
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);
$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) {
if(_label != this.label)
set_label: function(_value) {
// 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);
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>");
this.detatchFromDOM();
}
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() {
return this.getValue();
getDOMNode: function(_sender) {
if (_sender == this && this._labelContainer)
{
return this._labelContainer;
}
return this._super.apply(this, arguments);
},
getInputNode: function() {
return this.node;
},
get_value: function() {
return this.getValue();
},
getValue: function() {
var node = this.getInputNode();
if (node)

4
etemplate/js/et2_selectbox.js
View File

@ -66,7 +66,7 @@ var et2_selectbox = et2_inputWidget.extend({
this.input = null;
},
parseArrayMgrAttrs: function(_attrs) {
transformAttributes: function(_attrs) {
// Try to find the options inside the "sel-options" array
_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
getDOMNode: function(_sender) {
if (_sender != this._parent && _sender != this)
if (_sender != 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);
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
// parameter
this.parseArrayMgrAttrs(_attrs);
this.transformAttributes(_attrs);
}
// Create a local copy of the options object
@ -430,7 +430,7 @@ var et2_widget = Class.extend({
}
},
parseArrayMgrAttrs: function() {
transformAttributes: function() {
},
createElementFromNode: function(_node) {

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

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