extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-08 09:05:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Convert et2_radiobox to TS

Browse Source
This commit is contained in:
Hadi Nategh 2020-01-23 15:14:46 +01:00
parent 00086e37b2
commit c7b04a666c
4 changed files with 896 additions and 425 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
api/js/etemplate/et2_widget_number.js
View File

@ -115,6 +115,35 @@ var et2_number = /** @class */ (function (_super_1) {
this.input.attr("max", this.max); this.input.attr("max", this.max);
} }
}; };
et2_number._attributes = {
"value": {
"type": "float"
},
// Override default width, numbers are usually shorter
"size": {
"default": 5
},
"min": {
"name": "Minimum",
"type": "integer",
"default": et2_no_init,
"description": "Minimum allowed value"
},
"max": {
"name": "Maximum",
"type": "integer",
"default": et2_no_init,
"description": "Maximum allowed value"
},
"precision": {
// TODO: Implement this in some nice way other than HTML5's step attribute
"name": "Precision",
"type": "integer",
"default": et2_no_init,
"description": "Allowed precision - # of decimal places",
"ignore": true
}
};
return et2_number; return et2_number;
}(et2_widget_textbox_1.et2_textbox)); }(et2_widget_textbox_1.et2_textbox));
et2_core_widget_1.et2_register_widget(et2_number, ["int", "integer", "float"]); et2_core_widget_1.et2_register_widget(et2_number, ["int", "integer", "float"]);
@ -135,6 +164,18 @@ var et2_number_ro = /** @class */ (function (_super_1) {
} }
this._super.call(this, _value); this._super.call(this, _value);
}; };
et2_number_ro._attributes = {
min: { ignore: true },
max: { ignore: true },
precision: {
name: "Precision",
type: "integer",
default: et2_no_init,
description: "Allowed precision - # of decimal places",
ignore: true
},
value: { type: "float" }
};
return et2_number_ro; return et2_number_ro;
}(et2_textbox_ro)); }(et2_textbox_ro));
et2_core_widget_1.et2_register_widget(et2_number_ro, ["int_ro", "integer_ro", "float_ro"]); et2_core_widget_1.et2_register_widget(et2_number_ro, ["int_ro", "integer_ro", "float_ro"]);

4
api/js/etemplate/et2_widget_number.ts
View File

@ -23,7 +23,7 @@ import {ClassWithAttributes} from "./et2_core_inheritance";
*/ */
class et2_number extends et2_textbox class et2_number extends et2_textbox
{ {
static readonly _attributes: { static readonly _attributes : any = {
"value": { "value": {
"type": "float" "type": "float"
}, },
@ -160,7 +160,7 @@ et2_register_widget(et2_number, ["int", "integer", "float"]);
*/ */
class et2_number_ro extends et2_textbox_ro class et2_number_ro extends et2_textbox_ro
{ {
static readonly _attributes: { static readonly _attributes : any = {
min: { ignore: true}, min: { ignore: true},
max: { ignore: true}, max: { ignore: true},
precision: { precision: {

809
api/js/etemplate/et2_widget_radiobox.js
View File

@ -1,3 +1,4 @@
"use strict";
/** /**
* EGroupware eTemplate2 - JS Radiobox object * EGroupware eTemplate2 - JS Radiobox object
* *
@ -9,12 +10,28 @@
* @copyright Nathan Gray 2011 * @copyright Nathan Gray 2011
* @version $Id$ * @version $Id$
*/ */
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/*egw:uses /*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js; /vendor/bower-asset/jquery/dist/jquery.js;
et2_core_inputWidget; et2_core_inputWidget;
*/ */
var et2_core_inputWidget_1 = require("./et2_core_inputWidget");
var et2_core_inheritance_1 = require("./et2_core_inheritance");
var et2_core_widget_1 = require("./et2_core_widget");
var et2_core_valueWidget_1 = require("./et2_core_valueWidget");
/** /**
* Class which implements the "radiobox" XET-Tag * Class which implements the "radiobox" XET-Tag
* *
@ -24,431 +41,377 @@
* *
* @augments et2_inputWidget * @augments et2_inputWidget
*/ */
var et2_radiobox = (function(){ "use strict"; return et2_inputWidget.extend( var et2_radiobox = /** @class */ (function (_super) {
{ __extends(et2_radiobox, _super);
attributes: { /**
"set_value": { * Constructor
"name": "Set value", *
"type": "string", * @memberOf et2_radiobox
"default": "true", */
"description": "Value when selected" function et2_radiobox(_parent, _attrs, _child) {
}, var _this = _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_radiobox._attributes, _child || {})) || this;
"ro_true": { _this.legacyOptions = ["set_value", "ro_true", "ro_false"];
"name": "Read only selected", _this.input = null;
"type": "string", _this.id = "";
"default": "x", _this.createInputWidget();
"description": "What should be displayed when readonly and selected" return _this;
}, }
"ro_false": { et2_radiobox.prototype.transformAttributes = function (_attrs) {
"name": "Read only unselected", _super.prototype.transformAttributes.call(this, _attrs);
"type": "string", var readonly = this.getArrayMgr('readonlys').getEntry(this.id);
"default": "", if (readonly && readonly.hasOwnProperty(_attrs.set_value)) {
"description": "What should be displayed when readonly and not selected" _attrs.readonly = readonly[_attrs.set_value];
} }
}, };
et2_radiobox.prototype.createInputWidget = function () {
legacyOptions: ["set_value", "ro_true", "ro_false"], this.input = jQuery(document.createElement("input"))
.val(this.options.set_value)
/** .attr("type", "radio")
* Constructor .attr("disabled", this.options.readonly);
* this.input.addClass("et2_radiobox");
* @memberOf et2_radiobox this.setDOMNode(this.input[0]);
*/ };
init: function() { /**
this._super.apply(this, arguments); * Overwritten to set different DOM level ids by appending set_value
*
this.input = null; * @param _id
this.id = ""; */
et2_radiobox.prototype.set_id = function (_id) {
this.createInputWidget(); _super.prototype.set_id.call(this, _id);
}, this.dom_id = this.dom_id.replace('[]', '') + '-' + this.options.set_value;
transformAttributes: function(_attrs) { if (this.input)
this._super.apply(this, arguments); this.input.attr('id', this.dom_id);
var readonly = this.getArrayMgr('readonlys').getEntry(this.id); };
if(readonly && readonly.hasOwnProperty(_attrs.set_value)) /**
{ * Default for radio buttons is label after button
_attrs.readonly = readonly[_attrs.set_value]; *
} * @param _label String New label for radio button. Use %s to locate the radio button somewhere else in the label
}, */
et2_radiobox.prototype.set_label = function (_label) {
createInputWidget: function() { if (_label.length > 0 && _label.indexOf('%s') == -1) {
this.input = jQuery(document.createElement("input")) _label = '%s' + _label;
.val(this.options.set_value) }
.attr("type", "radio") _super.prototype.set_label.call(this, _label);
.attr("disabled", this.options.readonly); };
/**
this.input.addClass("et2_radiobox"); * Override default to match against set/unset value AND iterate over all siblings with same id
*
this.setDOMNode(this.input[0]); * @param {string} _value
}, */
et2_radiobox.prototype.set_value = function (_value) {
/** this.getRoot().iterateOver(function (radio) {
* Overwritten to set different DOM level ids by appending set_value if (radio.id == this.id) {
* radio.input.prop('checked', _value == radio.options.set_value);
* @param _id }
*/ }, this, et2_radiobox);
set_id: function(_id) };
{ /**
this._super.apply(this, arguments); * Override default to iterate over all siblings with same id
*
this.dom_id = this.dom_id.replace('[]', '')+'-'+this.options.set_value; * @return {string}
if (this.input) this.input.attr('id', this.dom_id); */
}, et2_radiobox.prototype.getValue = function () {
var val = this.options.value; // initial value, when form is loaded
/** var values = [];
* Default for radio buttons is label after button this.getRoot().iterateOver(function (radio) {
* values.push(radio.options.set_value);
* @param _label String New label for radio button. Use %s to locate the radio button somewhere else in the label if (radio.id == this.id && radio.input && radio.input.prop('checked')) {
*/ val = radio.options.set_value;
set_label: function(_label) { }
if(_label.length > 0 && _label.indexOf('%s')==-1) }, this, et2_radiobox);
{ return val && val.indexOf(values) ? val : null;
_label = '%s'+_label; };
} /**
this._super.apply(this, [_label]); * Overridden from parent so if it's required, only 1 in a group needs a value
}, *
* @param {array} messages
/** * @returns {Boolean}
* Override default to match against set/unset value AND iterate over all siblings with same id */
* et2_radiobox.prototype.isValid = function (messages) {
* @param {string} _value var ok = true;
*/ // Check for required
set_value: function(_value) if (this.options && this.options.needed && !this.options.readonly && !this.disabled &&
{ (this.getValue() == null || this.getValue().valueOf() == '')) {
this.getRoot().iterateOver(function(radio) if (jQuery.isEmptyObject(this.getInstanceManager().getValues(this.getInstanceManager().widgetContainer)[this.id.replace('[]', '')])) {
{ messages.push(this.egw().lang('Field must not be empty !!!'));
if (radio.id == this.id) ok = false;
{ }
radio.input.prop('checked', _value == radio.options.set_value); }
} return ok;
}, this, et2_radiobox); };
}, et2_radiobox._attributes = {
"set_value": {
/** "name": "Set value",
* Override default to iterate over all siblings with same id "type": "string",
* "default": "true",
* @return {string} "description": "Value when selected"
*/ },
getValue: function() "ro_true": {
{ "name": "Read only selected",
var val = this.options.value; // initial value, when form is loaded "type": "string",
var values = []; "default": "x",
this.getRoot().iterateOver(function(radio) "description": "What should be displayed when readonly and selected"
{ },
values.push(radio.options.set_value); "ro_false": {
if (radio.id == this.id && radio.input && radio.input.prop('checked')) "name": "Read only unselected",
{ "type": "string",
val = radio.options.set_value; "default": "",
} "description": "What should be displayed when readonly and not selected"
}, this, et2_radiobox); }
};
return val && val.indexOf(values) ? val : null; return et2_radiobox;
}, }(et2_core_inputWidget_1.et2_inputWidget));
et2_core_widget_1.et2_register_widget(et2_radiobox, ["radio"]);
/**
* Overridden from parent so if it's required, only 1 in a group needs a value
*
* @param {array} messages
* @returns {Boolean}
*/
isValid: function(messages) {
var ok = true;
// Check for required
if (this.options && this.options.needed && !this.options.readonly && !this.disabled &&
(this.getValue() == null || this.getValue().valueOf() == ''))
{
if(jQuery.isEmptyObject(this.getInstanceManager().getValues(this.getInstanceManager().widgetContainer)[this.id.replace('[]', '')]))
{
messages.push(this.egw().lang('Field must not be empty !!!'));
ok = false;
}
}
return ok;
}
});}).call(this);
et2_register_widget(et2_radiobox, ["radio"]);
/** /**
* @augments et2_valueWidget * @augments et2_valueWidget
*/ */
var et2_radiobox_ro = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM], var et2_radiobox_ro = /** @class */ (function (_super) {
{ __extends(et2_radiobox_ro, _super);
attributes: { /**
"set_value": { * Constructor
"name": "Set value", *
"type": "string", * @memberOf et2_radiobox_ro
"default": "true", */
"description": "Value when selected" function et2_radiobox_ro(_parent, _attrs, _child) {
}, var _this =
"ro_true": { // Call the inherited constructor
"name": "Read only selected", _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_radiobox_ro._attributes, _child || {})) || this;
"type": "string", _this.legacyOptions = ["set_value", "ro_true", "ro_false"];
"default": "x", _this.value = "";
"description": "What should be displayed when readonly and selected" _this.span = null;
}, _this.span = jQuery(document.createElement("span"))
"ro_false": { .addClass("et2_radiobox");
"name": "Read only unselected", _this.setDOMNode(_this.span[0]);
"type": "string", return _this;
"default": "", }
"description": "What should be displayed when readonly and not selected" /**
}, * Override default to match against set/unset value
"label": { *
"name": "Label", * @param {string} _value
"default": "", */
"type": "string" et2_radiobox_ro.prototype.set_value = function (_value) {
} this.value = _value;
}, if (_value == this.options.set_value) {
this.span.text(this.options.ro_true);
legacyOptions: ["set_value", "ro_true", "ro_false"], }
else {
/** this.span.text(this.options.ro_false);
* Constructor }
* };
* @memberOf et2_radiobox_ro et2_radiobox_ro.prototype.set_label = function (_label) {
*/ // no label for ro radio, we show label of checked option as content
init: function() { };
this._super.apply(this, arguments); /**
* Code for implementing et2_IDetachedDOM
this.value = ""; *
this.span = jQuery(document.createElement("span")) * @param {array} _attrs
.addClass("et2_radiobox"); */
et2_radiobox_ro.prototype.getDetachedAttributes = function (_attrs) {
this.setDOMNode(this.span[0]); // Show label in nextmatch instead of just x
}, this.options.ro_true = this.options.label;
_attrs.push("value");
/** };
* Override default to match against set/unset value et2_radiobox_ro.prototype.getDetachedNodes = function () {
* return [this.span[0]];
* @param {string} _value };
*/ et2_radiobox_ro.prototype.setDetachedAttributes = function (_nodes, _values) {
set_value: function(_value) { this.span = jQuery(_nodes[0]);
this.value = _value; this.set_value(_values["value"]);
if(_value == this.options.set_value) { };
this.span.text(this.options.ro_true); et2_radiobox_ro._attributes = {
} else { "set_value": {
this.span.text(this.options.ro_false); "name": "Set value",
} "type": "string",
}, "default": "true",
"description": "Value when selected"
set_label: function(_label) { },
// no label for ro radio, we show label of checked option as content "ro_true": {
}, "name": "Read only selected",
"type": "string",
/** "default": "x",
* Code for implementing et2_IDetachedDOM "description": "What should be displayed when readonly and selected"
* },
* @param {array} _attrs "ro_false": {
*/ "name": "Read only unselected",
getDetachedAttributes: function(_attrs) "type": "string",
{ "default": "",
// Show label in nextmatch instead of just x "description": "What should be displayed when readonly and not selected"
this.options.ro_true = this.options.label; },
_attrs.push("value"); "label": {
}, "name": "Label",
"default": "",
getDetachedNodes: function() "type": "string"
{ }
return [this.span[0]]; };
}, return et2_radiobox_ro;
}(et2_core_valueWidget_1.et2_valueWidget));
setDetachedAttributes: function(_nodes, _values) et2_core_widget_1.et2_register_widget(et2_radiobox_ro, ["radio_ro"]);
{
this.span = jQuery(_nodes[0]);
this.set_value(_values["value"]);
}
});}).call(this);
et2_register_widget(et2_radiobox_ro, ["radio_ro"]);
/** /**
* A group of radio buttons * A group of radio buttons
* *
* @augments et2_valueWidget * @augments et2_valueWidget
*/ */
var et2_radioGroup = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM], var et2_radioGroup = /** @class */ (function (_super) {
{ __extends(et2_radioGroup, _super);
attributes: { /**
"label": { * Constructor
"name": "Label", *
"default": "", * @param parent
"type": "string", * @param attrs
"description": "The label is displayed above the list of radio buttons. 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).", * @memberOf et2_radioGroup
"translate": true */
}, function et2_radioGroup(_parent, _attrs, _child) {
"value": { var _this =
"name": "Value", // Call the inherited constructor
"type": "string", _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_radioGroup._attributes, _child || {})) || this;
"default": "true", _this.createNamespace = false;
"description": "Value for each radio button" _this.node = null;
}, _this.value = null;
"ro_true": { _this.node = jQuery(document.createElement("div"))
"name": "Read only selected", .addClass("et2_vbox")
"type": "string", .addClass("et2_box_widget");
"default": "x", if (_this.options.needed) {
"description": "What should be displayed when readonly and selected" // This isn't strictly allowed, but it works
}, _this.node.attr("required", "required");
"ro_false": { }
"name": "Read only unselected", _this.setDOMNode(_this.node[0]);
"type": "string", // The supported widget classes array defines a whitelist for all widget
"default": "", // classes or interfaces child widgets have to support.
"description": "What should be displayed when readonly and not selected" _this.supportedWidgetClasses = [et2_radiobox, et2_radiobox_ro];
}, return _this;
"options": { }
"name": "Radio options", et2_radioGroup.prototype.set_value = function (_value) {
"type": "any", this.value = _value;
"default": {}, for (var i = 0; i < this._children.length; i++) {
"description": "Options for radio buttons. Should be {value: label, ...}" var radio = this._children[i];
}, radio.set_value(_value);
"needed": { }
"name": "Required", };
"default": false, et2_radioGroup.prototype.getValue = function () {
"type": "boolean", return jQuery("input:checked", this.getDOMNode()).val();
"description": "If required, the user must select one of the options before the form can be submitted" };
} /**
}, * Set a bunch of radio buttons
*
createNamespace: false, * @param {object} _options object with value: label pairs
*/
/** et2_radioGroup.prototype.set_options = function (_options) {
* Constructor // Call the destructor of all children
* for (var i = this._children.length - 1; i >= 0; i--) {
* @param parent this._children[i].free();
* @param attrs }
* @memberOf et2_radioGroup this._children = [];
*/ // create radio buttons for each option
init: function(parent, attrs) { for (var key in _options) {
this._super.apply(this, arguments); var attrs = {
this.node = jQuery(document.createElement("div")) // Add index so radios work properly
.addClass("et2_vbox") "id": (this.options.readonly ? this.id : this.id + "[" + "]"),
.addClass("et2_box_widget"); set_value: key,
if(this.options.needed) label: _options[key],
{ ro_true: this.options.ro_true,
// This isn't strictly allowed, but it works ro_false: this.options.ro_false,
this.node.attr("required","required"); readonly: this.options.readonly
} };
this.setDOMNode(this.node[0]); if (typeof _options[key] === 'object' && _options[key].label) {
attrs.set_value = _options[key].value;
// The supported widget classes array defines a whitelist for all widget attrs.label = _options[key].label;
// classes or interfaces child widgets have to support. }
this.supportedWidgetClasses = [et2_radiobox,et2_radiobox_ro]; // Can't have a required readonly, it will warn & be removed later, so avoid the warning
}, if (attrs.readonly === false) {
attrs['needed'] = this.options.needed;
set_value: function(_value) { }
this.value = _value; et2_createWidget("radio", attrs, this);
for (var i = 0; i < this._children.length; i++) }
{ this.set_value(this.value);
var radio = this._children[i]; };
radio.set_value(_value); /**
} * Set a label on the group of radio buttons
}, *
* @param {string} _value
getValue: function() { */
return jQuery("input:checked", this.getDOMNode()).val(); et2_radioGroup.prototype.set_label = function (_value) {
}, // Abort if ther was no change in the label
if (_value == this.label) {
/** return;
* Set a bunch of radio buttons }
* if (_value) {
* @param {object} _options object with value: label pairs // Create the label container if it didn't exist yet
*/ if (this._labelContainer == null) {
set_options: function(_options) { this._labelContainer = jQuery(document.createElement("label"));
// Call the destructor of all children this.getSurroundings().insertDOMNode(this._labelContainer[0]);
for (var i = this._children.length - 1; i >= 0; i--) }
{ // Clear the label container.
this._children[i].free(); this._labelContainer.empty();
} // Create the placeholder element and set it
this._children = []; var ph = document.createElement("span");
// create radio buttons for each option this.getSurroundings().setWidgetPlaceholder(ph);
for(var key in _options) this._labelContainer
{ .append(document.createTextNode(_value))
var attrs = { .append(ph);
// Add index so radios work properly }
"id": (this.options.readonly ? this.id : this.id + "[" + "]"), else {
set_value: key, // Delete the labelContainer from the surroundings object
label: _options[key], if (this._labelContainer) {
ro_true: this.options.ro_true, this.getSurroundings().removeDOMNode(this._labelContainer[0]);
ro_false: this.options.ro_false, }
readonly: this.options.readonly this._labelContainer = null;
}; }
if(typeof _options[key] === 'object' && _options[key].label) };
{ /**
attrs.set_value = _options[key].value; * Code for implementing et2_IDetachedDOM
attrs.label = _options[key].label; * This doesn't need to be implemented.
} * Individual widgets are detected and handled by the grid, but the interface is needed for this to happen
// Can't have a required readonly, it will warn & be removed later, so avoid the warning *
if(attrs.readonly === false) * @param {object} _attrs
{ */
attrs.needed = this.options.needed; et2_radioGroup.prototype.getDetachedAttributes = function (_attrs) {
} };
var radio = et2_createWidget("radio", attrs, this); et2_radioGroup.prototype.getDetachedNodes = function () {
} return [this.getDOMNode()];
this.set_value(this.value); };
}, et2_radioGroup.prototype.setDetachedAttributes = function (_nodes, _values) {
};
/** et2_radioGroup._attributes = {
* Set a label on the group of radio buttons "label": {
* "name": "Label",
* @param {string} _value "default": "",
*/ "type": "string",
set_label: function(_value) { "description": "The label is displayed above the list of radio buttons. 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).",
// Abort if ther was no change in the label "translate": true
if (_value == this.label) },
{ "value": {
return; "name": "Value",
} "type": "string",
"default": "true",
if (_value) "description": "Value for each radio button"
{ },
// Create the label container if it didn't exist yet "ro_true": {
if (this._labelContainer == null) "name": "Read only selected",
{ "type": "string",
this._labelContainer = jQuery(document.createElement("label")); "default": "x",
this.getSurroundings().insertDOMNode(this._labelContainer[0]); "description": "What should be displayed when readonly and selected"
} },
"ro_false": {
// Clear the label container. "name": "Read only unselected",
this._labelContainer.empty(); "type": "string",
"default": "",
// Create the placeholder element and set it "description": "What should be displayed when readonly and not selected"
var ph = document.createElement("span"); },
this.getSurroundings().setWidgetPlaceholder(ph); "options": {
"name": "Radio options",
this._labelContainer "type": "any",
.append(document.createTextNode(_value)) "default": {},
.append(ph); "description": "Options for radio buttons. Should be {value: label, ...}"
} },
else "needed": {
{ "name": "Required",
// Delete the labelContainer from the surroundings object "default": false,
if (this._labelContainer) "type": "boolean",
{ "description": "If required, the user must select one of the options before the form can be submitted"
this.getSurroundings().removeDOMNode(this._labelContainer[0]); }
} };
this._labelContainer = null; return et2_radioGroup;
} }(et2_core_valueWidget_1.et2_valueWidget));
},
/**
* Code for implementing et2_IDetachedDOM
* This doesn't need to be implemented.
* Individual widgets are detected and handled by the grid, but the interface is needed for this to happen
*
* @param {object} _attrs
*/
getDetachedAttributes: function(_attrs)
{
},
getDetachedNodes: function()
{
return [this.getDOMNode()];
},
setDetachedAttributes: function(_nodes, _values)
{
}
});}).call(this);
// No such tag as 'radiogroup', but it needs something // No such tag as 'radiogroup', but it needs something
et2_register_widget(et2_radioGroup, ["radiogroup"]); et2_core_widget_1.et2_register_widget(et2_radioGroup, ["radiogroup"]);
//# sourceMappingURL=et2_widget_radiobox.js.map

467
api/js/etemplate/et2_widget_radiobox.ts Normal file
View File

@ -0,0 +1,467 @@
/**
* EGroupware eTemplate2 - JS Radiobox 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
* @copyright Nathan Gray 2011
* @version $Id$
*/
/*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js;
et2_core_inputWidget;
*/
import {et2_inputWidget} from "./et2_core_inputWidget";
import {ClassWithAttributes} from "./et2_core_inheritance";
import {WidgetConfig, et2_register_widget} from "./et2_core_widget";
import {et2_valueWidget} from './et2_core_valueWidget';
/**
* Class which implements the "radiobox" XET-Tag
*
* A radio button belongs to same group by giving all buttons of a group same id!
*
* set_value iterates over all of them and (un)checks them depending on given value.
*
* @augments et2_inputWidget
*/
class et2_radiobox extends et2_inputWidget
{
static readonly _attributes : any = {
"set_value": {
"name": "Set value",
"type": "string",
"default": "true",
"description": "Value when selected"
},
"ro_true": {
"name": "Read only selected",
"type": "string",
"default": "x",
"description": "What should be displayed when readonly and selected"
},
"ro_false": {
"name": "Read only unselected",
"type": "string",
"default": "",
"description": "What should be displayed when readonly and not selected"
}
};
legacyOptions : string[] = ["set_value", "ro_true", "ro_false"];
input : JQuery = null;
id : string = "";
/**
* Constructor
*
* @memberOf et2_radiobox
*/
constructor(_parent, _attrs? : WidgetConfig, _child? : object) {
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_radiobox._attributes, _child || {}));
this.createInputWidget();
}
transformAttributes(_attrs) {
super.transformAttributes(_attrs);
let readonly = this.getArrayMgr('readonlys').getEntry(this.id);
if(readonly && readonly.hasOwnProperty(_attrs.set_value))
{
_attrs.readonly = readonly[_attrs.set_value];
}
}
createInputWidget() {
this.input = jQuery(document.createElement("input"))
.val(this.options.set_value)
.attr("type", "radio")
.attr("disabled", this.options.readonly);
this.input.addClass("et2_radiobox");
this.setDOMNode(this.input[0]);
}
/**
* Overwritten to set different DOM level ids by appending set_value
*
* @param _id
*/
set_id(_id)
{
super.set_id(_id);
this.dom_id = this.dom_id.replace('[]', '')+'-'+this.options.set_value;
if (this.input) this.input.attr('id', this.dom_id);
}
/**
* Default for radio buttons is label after button
*
* @param _label String New label for radio button. Use %s to locate the radio button somewhere else in the label
*/
set_label(_label)
{
if(_label.length > 0 && _label.indexOf('%s')==-1)
{
_label = '%s'+_label;
}
super.set_label(_label);
}
/**
* Override default to match against set/unset value AND iterate over all siblings with same id
*
* @param {string} _value
*/
set_value(_value)
{
this.getRoot().iterateOver(function(radio)
{
if (radio.id == this.id)
{
radio.input.prop('checked', _value == radio.options.set_value);
}
}, this, et2_radiobox);
}
/**
* Override default to iterate over all siblings with same id
*
* @return {string}
*/
getValue()
{
let val = this.options.value; // initial value, when form is loaded
let values = [];
this.getRoot().iterateOver(function(radio)
{
values.push(radio.options.set_value);
if (radio.id == this.id && radio.input && radio.input.prop('checked'))
{
val = radio.options.set_value;
}
}, this, et2_radiobox);
return val && val.indexOf(values) ? val : null;
}
/**
* Overridden from parent so if it's required, only 1 in a group needs a value
*
* @param {array} messages
* @returns {Boolean}
*/
isValid(messages) {
let ok = true;
// Check for required
if (this.options && this.options.needed && !this.options.readonly && !this.disabled &&
(this.getValue() == null || this.getValue().valueOf() == ''))
{
if(jQuery.isEmptyObject(this.getInstanceManager().getValues(this.getInstanceManager().widgetContainer)[this.id.replace('[]', '')]))
{
messages.push(this.egw().lang('Field must not be empty !!!'));
ok = false;
}
}
return ok;
}
}
et2_register_widget(et2_radiobox, ["radio"]);
/**
* @augments et2_valueWidget
*/
class et2_radiobox_ro extends et2_valueWidget implements et2_IDetachedDOM
{
static readonly _attributes : any = {
"set_value": {
"name": "Set value",
"type": "string",
"default": "true",
"description": "Value when selected"
},
"ro_true": {
"name": "Read only selected",
"type": "string",
"default": "x",
"description": "What should be displayed when readonly and selected"
},
"ro_false": {
"name": "Read only unselected",
"type": "string",
"default": "",
"description": "What should be displayed when readonly and not selected"
},
"label": {
"name": "Label",
"default": "",
"type": "string"
}
};
legacyOptions : string[] = ["set_value", "ro_true", "ro_false"];
value : string = "";
span : JQuery = null;
/**
* Constructor
*
* @memberOf et2_radiobox_ro
*/
constructor(_parent, _attrs? : WidgetConfig, _child? : object)
{
// Call the inherited constructor
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_radiobox_ro._attributes, _child || {}));
this.span = jQuery(document.createElement("span"))
.addClass("et2_radiobox");
this.setDOMNode(this.span[0]);
}
/**
* Override default to match against set/unset value
*
* @param {string} _value
*/
set_value(_value) {
this.value = _value;
if(_value == this.options.set_value) {
this.span.text(this.options.ro_true);
} else {
this.span.text(this.options.ro_false);
}
}
set_label(_label) {
// no label for ro radio, we show label of checked option as content
}
/**
* Code for implementing et2_IDetachedDOM
*
* @param {array} _attrs
*/
getDetachedAttributes(_attrs)
{
// Show label in nextmatch instead of just x
this.options.ro_true = this.options.label;
_attrs.push("value");
}
getDetachedNodes()
{
return [this.span[0]];
}
setDetachedAttributes(_nodes, _values)
{
this.span = jQuery(_nodes[0]);
this.set_value(_values["value"]);
}
}
et2_register_widget(et2_radiobox_ro, ["radio_ro"]);
/**
* A group of radio buttons
*
* @augments et2_valueWidget
*/
class et2_radioGroup extends et2_valueWidget implements et2_IDetachedDOM
{
static readonly _attributes : any = {
"label": {
"name": "Label",
"default": "",
"type": "string",
"description": "The label is displayed above the list of radio buttons. 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).",
"translate": true
},
"value": {
"name": "Value",
"type": "string",
"default": "true",
"description": "Value for each radio button"
},
"ro_true": {
"name": "Read only selected",
"type": "string",
"default": "x",
"description": "What should be displayed when readonly and selected"
},
"ro_false": {
"name": "Read only unselected",
"type": "string",
"default": "",
"description": "What should be displayed when readonly and not selected"
},
"options": {
"name": "Radio options",
"type": "any",
"default": {},
"description": "Options for radio buttons. Should be {value: label, ...}"
},
"needed": {
"name": "Required",
"default": false,
"type": "boolean",
"description": "If required, the user must select one of the options before the form can be submitted"
}
};
createNamespace : boolean = false;
node : JQuery = null;
value : any = null;
/**
* Constructor
*
* @param parent
* @param attrs
* @memberOf et2_radioGroup
*/
constructor(_parent, _attrs? : WidgetConfig, _child? : object)
{
// Call the inherited constructor
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_radioGroup._attributes, _child || {}));
this.node = jQuery(document.createElement("div"))
.addClass("et2_vbox")
.addClass("et2_box_widget");
if(this.options.needed)
{
// This isn't strictly allowed, but it works
this.node.attr("required","required");
}
this.setDOMNode(this.node[0]);
// The supported widget classes array defines a whitelist for all widget
// classes or interfaces child widgets have to support.
this.supportedWidgetClasses = [et2_radiobox,et2_radiobox_ro];
}
set_value(_value)
{
this.value = _value;
for (let i = 0; i < this._children.length; i++)
{
let radio = this._children[i];
radio.set_value(_value);
}
}
getValue()
{
return jQuery("input:checked", this.getDOMNode()).val();
}
/**
* Set a bunch of radio buttons
*
* @param {object} _options object with value: label pairs
*/
set_options(_options)
{
// Call the destructor of all children
for (let i = this._children.length - 1; i >= 0; i--)
{
this._children[i].free();
}
this._children = [];
// create radio buttons for each option
for(let key in _options)
{
let attrs = {
// Add index so radios work properly
"id": (this.options.readonly ? this.id : this.id + "[" + "]"),
set_value: key,
label: _options[key],
ro_true: this.options.ro_true,
ro_false: this.options.ro_false,
readonly: this.options.readonly
};
if(typeof _options[key] === 'object' && _options[key].label)
{
attrs.set_value = _options[key].value;
attrs.label = _options[key].label;
}
// Can't have a required readonly, it will warn & be removed later, so avoid the warning
if(attrs.readonly === false)
{
attrs['needed'] = this.options.needed;
}
et2_createWidget("radio", attrs, this);
}
this.set_value(this.value);
}
/**
* Set a label on the group of radio buttons
*
* @param {string} _value
*/
set_label(_value) {
// Abort if ther was no change in the label
if (_value == this.label)
{
return;
}
if (_value)
{
// Create the label container if it didn't exist yet
if (this._labelContainer == null)
{
this._labelContainer = jQuery(document.createElement("label"));
this.getSurroundings().insertDOMNode(this._labelContainer[0]);
}
// Clear the label container.
this._labelContainer.empty();
// Create the placeholder element and set it
var ph = document.createElement("span");
this.getSurroundings().setWidgetPlaceholder(ph);
this._labelContainer
.append(document.createTextNode(_value))
.append(ph);
}
else
{
// Delete the labelContainer from the surroundings object
if (this._labelContainer)
{
this.getSurroundings().removeDOMNode(this._labelContainer[0]);
}
this._labelContainer = null;
}
}
/**
* Code for implementing et2_IDetachedDOM
* This doesn't need to be implemented.
* Individual widgets are detected and handled by the grid, but the interface is needed for this to happen
*
* @param {object} _attrs
*/
getDetachedAttributes(_attrs)
{
}
getDetachedNodes()
{
return [this.getDOMNode()];
}
setDetachedAttributes(_nodes, _values)
{
}
}
// No such tag as 'radiogroup', but it needs something
et2_register_widget(et2_radioGroup, ["radiogroup"]);