holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- Reading readonly properties

Browse Source 
- Added system for readonlys: Readonly is passed in constructor as third parameter. If a widget class is registerd with "[type]_ro" (see et2_textbox for example) this one is created
- Added new 'valueWidget' base class which introduces the 'value' attribute and implements auto loading from the content array
- Implemented readonly attribute for buttons and textboxes
This commit is contained in:
Andreas Stöckel 2011-08-16 12:31:18 +00:00
parent 697a113171
commit 41787c36f3
15 changed files with 398 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

452
etemplate/js/et2_arrayMgr.js
View File

@ -10,233 +10,277 @@
* @version $Id$
*/
/*egw:uses
et2_inheritance;
*/
"use strict";
function et2_arrayMgr(_data, _parentMgr)
{
if (typeof _parentMgr == "undefined")
{
_parentMgr = null;
}
var et2_arrayMgr = Class.extend({
// Copy the parent manager which is needed to access relative data when
// being in a relative perspective of the manager
this.parentMgr = _parentMgr;
splitIds: true,
// Hold a reference to the data
if (typeof _data == "undefined" || !_data)
{
et2_debug("error", "Invalid data passed to content array manager!");
_data = {};
}
this.data = _data;
// Holds information about the current perspective
this.perspectiveData = {
"owner": null,
"key": null,
"col": 0,
"row": 0
}
}
/**
* Returns the root content array manager object
*/
et2_arrayMgr.prototype.getRoot = function()
{
if (this.parentMgr != null)
{
return this.parentMgr.getRoot();
}
return this;
}
et2_arrayMgr.prototype.getValueForID = function(_id)
{
if (typeof this.data[_id] != "undefined")
{
return this.data[_id];
}
return null;
}
/**
* Returns the path to this content array manager perspective as an array
* containing the key values
*
* @param _path is used internally, do not supply it manually.
*/
et2_arrayMgr.prototype.getPath = function(_path)
{
if (typeof _path == "undefined")
{
_path = [];
}
if (this.perspectiveData.key != null)
{
_path.push(this.perspectiveData.key);
}
if (this.parentMgr != null)
{
this.parentMgr.getPath(_path);
}
return _path;
}
/**
* Get array entry is the equivalent to the boetemplate get_array function.
* It returns a reference to the (sub) array with the given key. This also works
* for keys using the ETemplate referencing scheme like a[b][c]
*
* @param _key is the string index, may contain sub-indices like a[b]
* @param _referenceInto if true none-existing sub-arrays/-indices get created
* to be returned as reference, else false is returned. Defaults to false
* @param _skipEmpty returns false if _key is not present in this content array.
* Defaults to false.
*/
et2_arrayMgr.prototype.getEntry = function(_key, _referenceInto,
_skipEmpty)
{
if (typeof _referenceInto == "undefined")
{
_referenceInto = false;
}
if (typeof _skipEmpty == "undefined")
{
_skipEmpty = false;
}
// Parse the given key by removing the "]"-chars and splitting at "["
var indexes = _key.replace(/]/g,'').split('[');
var entry = this.data;
for (var i = 0; i < indexes.length; i++)
{
// Abort if the current entry is not an object (associative array) and
// we should descend further into it.
var isObject = entry instanceof Object;
if (!isObject && !_referenceInto)
init: function(_data, _parentMgr) {
if (typeof _parentMgr == "undefined")
{
return false;
_parentMgr = null;
}
// Check whether the entry actually exists
var idx = indexes[i];
if (_skipEmpty && (!isObject || typeof entry[idx] == "undefined"))
// Copy the parent manager which is needed to access relative data when
// being in a relative perspective of the manager
this.parentMgr = _parentMgr;
// Hold a reference to the data
if (typeof _data == "undefined" || !_data)
{
return false;
et2_debug("error", "Invalid data passed to content array manager!");
_data = {};
}
entry = entry[idx];
}
this.data = _data;
return entry;
}
/**
* Equivaltent to the boetemplate::expand_name function.
*
* Expands variables inside the given identifier to their values inside the
* content array.
*/
et2_arrayMgr.prototype.expandName = function(_ident)
{
// Check whether the identifier refers to an index in the content array
var is_index_in_content = _ident.charAt(0) == '@';
// Check whether "$" occurs in the given identifier
var pos_var = _ident.indexOf('$');
if (pos_var >= 0)
{
// TODO
}
if (is_index_in_content)
{
// If an additional "@" is specified, this means that we have to return
// the entry from the root element
if (_ident.charAt(1) == '@')
{
_ident = this.getRoot().getEntry(_ident.substr(2));
// Holds information about the current perspective
this.perspectiveData = {
"owner": null,
"key": null,
"col": 0,
"row": 0
}
else
},
/**
* Returns the root content array manager object
*/
getRoot : function() {
if (this.parentMgr != null)
{
_ident = this.getEntry(_ident.substr(1));
}
}
return _ident;
}
et2_arrayMgr.prototype.parseBoolExpression = function(_expression)
{
// If the first char of the expression is a '!' this means, that the value
// is to be negated.
if (_expression.charAt(0) == '!')
{
return !this.parseBoolExpression(_expression.substr(1));
}
// Split the expression at a possible "="
var parts = _expression.split('=');
// Expand the first value
var val = this.expandName(parts[0]);
// If a second expression existed, test that one
if (typeof parts[1] != "undefined")
{
// Expand the second value
var checkVal = this.expandName(parts[1]);
// Values starting with / are treated as regular expression. It is
// checked whether the first value matches the regular expression
if (checkVal.charAt(0) == '/')
{
return (new RegExp(checkVal.substr(1, checkVal.length - 2)))
.match(val) ? true : false;
return this.parentMgr.getRoot();
}
// Otherwise check for simple equality
return val == checkVal;
}
return this;
},
return val != '' && (typeof val != "string" || val.toLowerCase() != "false");
}
getValueForID : function(_id) {
if (typeof this.data[_id] != "undefined")
{
return this.data[_id];
}
et2_arrayMgr.prototype.openPerspective = function(_owner, _root, _col, _row)
{
// Get the root node
var root = typeof _root == "string" ? this.data[_root] :
(_root == null ? this.data : _root);
return null;
},
// Create a new content array manager with the given root
var mgr = new et2_arrayMgr(root, this);
/**
* Returns the path to this content array manager perspective as an array
* containing the key values
*
* @param _path is used internally, do not supply it manually.
*/
getPath : function(_path) {
if (typeof _path == "undefined")
{
_path = [];
}
// Set the owner
mgr.perspectiveData.owner = _owner;
if (this.perspectiveData.key != null)
{
_path.push(this.perspectiveData.key);
}
// Set the root key
if (typeof _root == "string")
if (this.parentMgr != null)
{
this.parentMgr.getPath(_path);
}
return _path;
},
/**
* Get array entry is the equivalent to the boetemplate get_array function.
* It returns a reference to the (sub) array with the given key. This also works
* for keys using the ETemplate referencing scheme like a[b][c]
*
* @param _key is the string index, may contain sub-indices like a[b]
* @param _referenceInto if true none-existing sub-arrays/-indices get created
* to be returned as reference, else false is returned. Defaults to false
* @param _skipEmpty returns false if _key is not present in this content array.
* Defaults to false.
*/
getEntry : function(_key, _referenceInto, _skipEmpty) {
if (typeof _referenceInto == "undefined")
{
_referenceInto = false;
}
if (typeof _skipEmpty == "undefined")
{
_skipEmpty = false;
}
// Parse the given key by removing the "]"-chars and splitting at "["
var indexes = [_key];
if (this.splitIds)
{
indexes = _key.replace(/]/g,'').split('[');
}
var entry = this.data;
for (var i = 0; i < indexes.length; i++)
{
// Abort if the current entry is not an object (associative array) and
// we should descend further into it.
var isObject = entry instanceof Object;
if (!isObject && !_referenceInto)
{
return null;
}
// Check whether the entry actually exists
var idx = indexes[i];
if (_skipEmpty && (!isObject || typeof entry[idx] == "undefined"))
{
return null;
}
entry = entry[idx];
}
return entry;
},
/**
* Equivaltent to the boetemplate::expand_name function.
*
* Expands variables inside the given identifier to their values inside the
* content array.
*/
expandName : function(_ident) {
// Check whether the identifier refers to an index in the content array
var is_index_in_content = _ident.charAt(0) == '@';
// Check whether "$" occurs in the given identifier
var pos_var = _ident.indexOf('$');
if (pos_var >= 0)
{
// TODO
}
if (is_index_in_content)
{
// If an additional "@" is specified, this means that we have to return
// the entry from the root element
if (_ident.charAt(1) == '@')
{
_ident = this.getRoot().getEntry(_ident.substr(2));
}
else
{
_ident = this.getEntry(_ident.substr(1));
}
}
return _ident;
},
parseBoolExpression: function(_expression) {
// If the first char of the expression is a '!' this means, that the value
// is to be negated.
if (_expression.charAt(0) == '!')
{
return !this.parseBoolExpression(_expression.substr(1));
}
// Split the expression at a possible "="
var parts = _expression.split('=');
// Expand the first value
var val = this.expandName(parts[0]);
// If a second expression existed, test that one
if (typeof parts[1] != "undefined")
{
// Expand the second value
var checkVal = this.expandName(parts[1]);
// Values starting with / are treated as regular expression. It is
// checked whether the first value matches the regular expression
if (checkVal.charAt(0) == '/')
{
return (new RegExp(checkVal.substr(1, checkVal.length - 2)))
.match(val) ? true : false;
}
// Otherwise check for simple equality
return val == checkVal;
}
return val != '' && (typeof val != "string" || val.toLowerCase() != "false");
},
openPerspective: function(_owner, _root, _col, _row)
{
mgr.perspectiveData.key = _root;
// Get the root node
var root = typeof _root == "string" ? this.data[_root] :
(_root == null ? this.data : _root);
// Create a new content array manager with the given root
var mgr = new et2_arrayMgr(root, this);
// Set the owner
mgr.perspectiveData.owner = _owner;
// Set the root key
if (typeof _root == "string")
{
mgr.perspectiveData.key = _root;
}
// Set the _col and _row parameter
if (typeof _col != "undefined" && typeof _row != "undefined")
{
mgr.perspectiveData.col = _col;
mgr.perspectiveData.row = _row;
}
return mgr;
}
// Set the _col and _row parameter
if (typeof _col != "undefined" && typeof _row != "undefined")
{
mgr.perspectiveData.col = _col;
mgr.perspectiveData.row = _row;
});
var et2_readonlysArrayMgr = et2_arrayMgr.extend({
splitIds: false,
isReadOnly: function(_id, _attr, _parent) {
var entry = null;
if (_id != null)
{
entry = this.getEntry(_id);
}
// Let the array entry override the read only attribute entry
if (typeof entry != "undefined" && !(entry instanceof Object))
{
return entry;
}
// If the attribute is set, return that
if (typeof _attr != "undefined" && _attr !== null)
{
return et2_evalBool(_attr);
}
// Otherwise take into accounf whether the parent is readonly
if (typeof _parent != "undefined" && _parent)
{
return true;
}
// Otherwise return the default value
return (typeof this.getEntry("__ALL__") != "undefined");
}
return mgr;
}
});

16
etemplate/js/et2_button.js
View File

@ -37,17 +37,21 @@ var et2_button = et2_baseWidget.extend(et2_IInput, {
}
},
init: function(_parent) {
init: function(_parent, _type, _readonly) {
this._super.apply(this, arguments);
this.label = "";
this.clicked = false;
this.btn = null;
this.btn = $j(document.createElement("button"))
.addClass("et2_button")
.click(this, function(e) {e.data.buttonClick()});
if (!_readonly)
{
this.btn = $j(document.createElement("button"))
.addClass("et2_button")
.click(this, function(e) {e.data.buttonClick()});
this.setDOMNode(this.btn[0]);
this.setDOMNode(this.btn[0]);
}
},
buttonClick: function() {
@ -65,7 +69,7 @@ var et2_button = et2_baseWidget.extend(et2_IInput, {
},
set_label: function(_value) {
if (_value != this.value)
if (this.btn)
{
this.label = _value;

5
etemplate/js/et2_common.js
View File

@ -87,6 +87,11 @@ var et2_typeDefaults = {
"any": null
};
function et2_evalBool(_val)
{
return _val ? true : false;
}
/**
* Checks whether the given value is of the given type. Strings are converted
* into the corresponding type. The (converted) value is returned. All supported

18
etemplate/js/et2_description.js
View File

@ -88,23 +88,17 @@ var et2_description = et2_baseWidget.extend({
this.setDOMNode(this.span[0]);
},
set_value: function(_value, _force) {
if (_value != this.value || _force)
{
this.value = _value;
set_value: function(_value) {
this.value = _value;
this.span.text(_value);
}
this.span.text(_value);
},
set_font_style: function(_value) {
if (_value != this.font_style)
{
this.font_style = _value;
this.font_style = _value;
this.span.toggleClass("et2_bold", _value.indexOf("b") >= 0);
this.span.toggleClass("et2_italic", _value.indexOf("i") >= 0);
}
this.span.toggleClass("et2_bold", _value.indexOf("b") >= 0);
this.span.toggleClass("et2_italic", _value.indexOf("i") >= 0);
}
});

2
etemplate/js/et2_grid.js
View File

@ -48,6 +48,8 @@ var et2_grid = et2_DOMWidget.extend({
// Delete all references to cells or widgets
this.cells = null;
this.managementArray = null;
this.table = null;
this.tbody = null;
},
_initCells: function(_colData, _rowData) {

2
etemplate/js/et2_inheritance.js
View File

@ -314,7 +314,7 @@
}
else
{
et2_error("error", this, "Attribute '" + _name + "' does not exist!");
et2_debug("error", this, "Attribute '" + _name + "' does not exist!");
}
}

28
etemplate/js/et2_inputWidget.js
View File

@ -14,7 +14,7 @@
/*egw:uses
jquery.jquery;
et2_baseWidget;
et2_valueWidget;
*/
/**
@ -43,16 +43,7 @@ var et2_IInput = new Interface({
* interface. When derriving from this class, call setDOMNode with an input
* DOMNode.
*/
var et2_inputWidget = et2_baseWidget.extend(et2_IInput, {
attributes: {
"value": {
"name": "Value",
"description": "The value of the widget",
"type": "string",
"default": et2_no_init
}
},
var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
init: function() {
this._super.apply(this, arguments);
@ -60,21 +51,6 @@ var et2_inputWidget = et2_baseWidget.extend(et2_IInput, {
this._oldValue = "";
},
loadingFinished: function() {
this._super.call(this, arguments);
if (this.id != "")
{
// Set the value for this element
var contentMgr = this.getArrayMgr("content");
var val = contentMgr.getValueForID(this.id);
if (val !== null)
{
this.set_value(val);
}
}
},
set_value: function(_value) {
this._oldValue = _value;

35
etemplate/js/et2_textbox.js
View File

@ -15,6 +15,7 @@
/*egw:uses
jquery.jquery;
et2_inputWidget;
et2_valueWidget;
*/
/**
@ -71,3 +72,37 @@ var et2_textbox = et2_inputWidget.extend({
et2_register_widget(et2_textbox, ["textbox", "int", "float"]);
/**
* et2_textbox_ro is the dummy readonly implementation of the textbox.
*/
var et2_textbox_ro = et2_valueWidget.extend({
/**
* Ignore all more advanced attributes.
*/
attributes: {
"multiline": {
"ignore": true
}
},
init: function() {
this._super.apply(this, arguments);
this.value = "";
this.span = $j(document.createElement("span"))
.addClass("et2_textbox_ro");
this.setDOMNode(this.span[0]);
},
set_value: function(_value) {
this.value = _value;
this.span.text(_value);
}
});
et2_register_widget(et2_textbox_ro, ["textbox_ro", "int_ro", "float_ro"]);

50
etemplate/js/et2_valueWidget.js Normal file
View File

@ -0,0 +1,50 @@
/**
* eGroupWare eTemplate2 - JS widget class with value attribute and auto loading
*
* @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$
*/
/*egw:uses
jquery.jquery;
et2_baseWidget;
*/
/**
* et2_valueWidget is the base class for et2_inputWidget - valueWidget introduces
* the "value" attribute and automatically loads it from the "content" array
* after loading from XML.
*/
var et2_valueWidget = et2_baseWidget.extend({
attributes: {
"value": {
"name": "Value",
"description": "The value of the widget",
"type": "string",
"default": et2_no_init
}
},
loadingFinished: function() {
this._super.call(this, arguments);
if (this.id != "")
{
// Set the value for this element
var contentMgr = this.getArrayMgr("content");
var val = contentMgr.getValueForID(this.id);
if (val !== null)
{
this.setAttribute("value", val)
}
}
}
});

28
etemplate/js/et2_widget.js
View File

@ -74,6 +74,14 @@ var et2_widget = Class.extend({
*/
"type": {
"ignore": true
},
/**
* Ignore the readonly tag by default - its also read by the
* "createElementFromNode" function.
*/
"readonly": {
"ignore": true
}
},
@ -92,7 +100,7 @@ var et2_widget = Class.extend({
* @param _type is the node name with which the widget has been created. This
* is usefull if a single widget class implements multiple XET-Node widgets.
*/
init: function(_parent, _type) {
init: function(_parent, _type, _readonly) {
if (typeof _type == "undefined")
{
@ -115,6 +123,7 @@ var et2_widget = Class.extend({
this._children = [];
this.type = _type;
this.readonly = _readonly;
// The supported widget classes array defines a whitelist for all widget
// classes or interfaces child widgets have to support.
@ -164,7 +173,7 @@ var et2_widget = Class.extend({
}
// Create the copy
var copy = new (this.constructor)(_parent, _type);
var copy = new (this.constructor)(_parent, _type, this.readonly);
// Assign this element to the copy
copy.assign(this);
@ -374,13 +383,24 @@ var et2_widget = Class.extend({
_nodeName = _node.nodeName.toLowerCase();
}
// Check whether a widget with the given type is registered.
// Get the constructor for that widget
var constructor = typeof et2_registry[_nodeName] == "undefined" ?
et2_placeholder : et2_registry[_nodeName];
// Check whether the widget is marked as readonly and whether a special
// readonly type (suffixed with "_ro") is registered
var readonly = this.getArrayMgr("readonlys").isReadOnly(
_node.getAttribute("id"), _node.getAttribute("readonly"), this.readonly);
et2_debug("log", _node.getAttribute("id"), readonly);
if (readonly && typeof et2_registry[_nodeName + "_ro"] != "undefined")
{
constructor = et2_registry[_nodeName + "_ro"];
}
// Creates the new widget, passes this widget as an instance and
// passes the widgetType. Then it goes on loading the XML for it.
var widget = new constructor(this, _nodeName)
var widget = new constructor(this, _nodeName, readonly);
widget.loadFromXML(_node);
// Call the "loadFinished" function of the widget

8
etemplate/js/etemplate2.js
View File

@ -86,7 +86,13 @@ etemplate2.prototype._createArrayManagers = function(_data)
// Create an array manager object for each part of the _data array.
for (var key in _data)
{
result[key] = new et2_arrayMgr(_data[key]);
switch (key) {
case "readonlys":
result[key] = new et2_readonlysArrayMgr(_data[key]);
break;
default:
result[key] = new et2_arrayMgr(_data[key]);
}
}
return result;

3
etemplate/js/test/et2_test_expressions.json
View File

@ -6,6 +6,9 @@ var expression_test_data = {
},
"display_text": "false",
"textbox": "This is the outer textbox."
},
"readonlys": {
"__ALL__": true
}
};

2
etemplate/js/test/et2_test_expressions.xet
View File

@ -3,7 +3,7 @@
<template id="test">
<vbox>
<description disabled="!@@display_text" value="Dies ist nur ein test!" />
<textbox id="textbox" />
<textbox id="textbox" value="Test"/>
</vbox>
</template>
<textbox id="textbox" />

5
etemplate/js/test/et2_test_timesheet_edit.json
View File

@ -3,7 +3,7 @@ var timesheet_data = {
"ts_id":"1",
"ts_project":null,
"ts_title":"Test geschrieben",
"ts_description":null,
"ts_description":"This is just a test description",
"ts_start":1307030400,
"ts_duration":"150",
"ts_quantity":"2.5",
@ -69,7 +69,8 @@ var timesheet_data = {
"ts_owner":true,
"tabs":{
"customfields":true
}
},
"ts_description": true
}
}

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

@ -10,6 +10,7 @@
<script src="../et2_widget.js"></script>
<script src="../et2_DOMWidget.js"></script>
<script src="../et2_baseWidget.js"></script>
<script src="../et2_valueWidget.js"></script>
<script src="../et2_inputWidget.js"></script>
<script src="../et2_template.js"></script>
<script src="../et2_description.js"></script>