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

First run at TS for valueWidget

Browse Source
This commit is contained in:
nathangray 2020-01-21 04:15:46 -07:00 committed by Hadi Nategh
parent 659c8b0e68
commit 988dbbc8da
2 changed files with 244 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

219
api/js/etemplate/et2_core_valueWidget.js
View File

@ -1,3 +1,4 @@
"use strict";
/** /**
* EGroupware eTemplate2 - JS widget class with value attribute and auto loading * EGroupware eTemplate2 - JS widget class with value attribute and auto loading
* *
@ -9,12 +10,26 @@
* @copyright Stylite 2011 * @copyright Stylite 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_baseWidget; et2_core_baseWidget;
*/ */
require("./et2_core_baseWidget");
require("./et2_core_common");
/** /**
* et2_valueWidget is the base class for et2_inputWidget - valueWidget introduces * et2_valueWidget is the base class for et2_inputWidget - valueWidget introduces
* the "value" attribute and automatically loads it from the "content" array * the "value" attribute and automatically loads it from the "content" array
@ -22,111 +37,91 @@
* *
* @augments et2_baseWidget * @augments et2_baseWidget
*/ */
var et2_valueWidget = (function(){ "use strict"; return et2_baseWidget.extend( var et2_valueWidget = /** @class */ (function (_super) {
{ __extends(et2_valueWidget, _super);
attributes: { function et2_valueWidget() {
"label": { return _super !== null && _super.apply(this, arguments) || this;
"name": "Label", }
"default": "", /**
"type": "string", *
"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).", *
"translate": true * @memberOf et2_valueWidget
}, * @param _attrs
"value": { */
"name": "Value", et2_valueWidget.prototype.transformAttributes = function (_attrs) {
"description": "The value of the widget", _super.prototype.transformAttributes.call(this, _attrs);
"type": "rawstring", // no html-entity decoding if (this.id) {
"default": et2_no_init // Set the value for this element
} var contentMgr = this.getArrayMgr("content");
}, if (contentMgr != null) {
var val = contentMgr.getEntry(this.id, false, true);
/** if (val !== null) {
* _attrs["value"] = val;
* }
* @memberOf et2_valueWidget }
* @param _attrs // Check for already inside namespace
*/ if (this.createNamespace && this.getArrayMgr("content").perspectiveData.owner == this) {
transformAttributes: function(_attrs) { _attrs["value"] = this.getArrayMgr("content").data;
this._super.apply(this, arguments); }
}
if (this.id) };
{ et2_valueWidget.prototype.set_label = function (_value) {
// Set the value for this element // Abort if there was no change in the label
var contentMgr = this.getArrayMgr("content"); if (_value == this.label) {
if (contentMgr != null) { return;
var val = contentMgr.getEntry(this.id,false,true); }
if (val !== null) if (_value) {
{ // Create the label container if it didn't exist yet
_attrs["value"] = val; if (this._labelContainer == null) {
} this._labelContainer = jQuery(document.createElement("label"))
} .addClass("et2_label");
// Check for already inside namespace this.getSurroundings().insertDOMNode(this._labelContainer[0]);
if(this.createNamespace && this.getArrayMgr("content").perspectiveData.owner == this) }
{ // Clear the label container.
_attrs["value"] = this.getArrayMgr("content").data; this._labelContainer.empty();
} // Create the placeholder element and set it
var ph = document.createElement("span");
} this.getSurroundings().setWidgetPlaceholder(ph);
}, // Split the label at the "%s"
var parts = et2_csvSplit(_value, 2, "%s");
set_label: function(_value) { // Update the content of the label container
// Abort if ther was no change in the label for (var i = 0; i < parts.length; i++) {
if (_value == this.label) if (parts[i]) {
{ this._labelContainer.append(document.createTextNode(parts[i]));
return; }
} if (i == 0) {
this._labelContainer.append(ph);
if (_value) }
{ }
// Create the label container if it didn't exist yet // add class if label is empty
if (this._labelContainer == null) this._labelContainer.toggleClass('et2_label_empty', !_value || !parts[0]);
{ }
this._labelContainer = jQuery(document.createElement("label")) else {
.addClass("et2_label"); // Delete the labelContainer from the surroundings object
this.getSurroundings().insertDOMNode(this._labelContainer[0]); if (this._labelContainer) {
} this.getSurroundings().removeDOMNode(this._labelContainer[0]);
}
// Clear the label container. this._labelContainer = null;
this._labelContainer.empty(); }
// Update the surroundings in order to reflect the change in the label
// Create the placeholder element and set it this.getSurroundings().update();
var ph = document.createElement("span"); // Copy the given value
this.getSurroundings().setWidgetPlaceholder(ph); this.label = _value;
};
// Split the label at the "%s" et2_valueWidget._attributes = {
var parts = et2_csvSplit(_value, 2, "%s"); "label": {
"name": "Label",
// Update the content of the label container "default": "",
for (var i = 0; i < parts.length; i++) "type": "string",
{ "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).",
if (parts[i]) "translate": true
{ },
this._labelContainer.append(document.createTextNode(parts[i])); "value": {
} "name": "Value",
if (i == 0) "description": "The value of the widget",
{ "type": "rawstring",
this._labelContainer.append(ph); "default": et2_no_init
} }
} };
return et2_valueWidget;
// add class if label is empty }(et2_baseWidget));
this._labelContainer.toggleClass('et2_label_empty', !_value || !parts[0]);
}
else
{
// Delete the labelContainer from the surroundings object
if (this._labelContainer)
{
this.getSurroundings().removeDOMNode(this._labelContainer[0]);
}
this._labelContainer = null;
}
// Update the surroundings in order to reflect the change in the label
this.getSurroundings().update();
// Copy the given value
this.label = _value;
}
});}).call(this);

137
api/js/etemplate/et2_core_valueWidget.ts Normal file
View File

@ -0,0 +1,137 @@
/**
* 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
/vendor/bower-asset/jquery/dist/jquery.js;
et2_core_baseWidget;
*/
import './et2_core_baseWidget'
import './et2_core_common';
/**
* 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.
*
* @augments et2_baseWidget
*/
class et2_valueWidget extends et2_baseWidget
{
static readonly _attributes : any = {
"label": {
"name": "Label",
"default": "",
"type": "string",
"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).",
"translate": true
},
"value": {
"name": "Value",
"description": "The value of the widget",
"type": "rawstring", // no html-entity decoding
"default": et2_no_init
}
};
/**
*
*
* @memberOf et2_valueWidget
* @param _attrs
*/
transformAttributes(_attrs : object)
{
super.transformAttributes(_attrs);
if (this.id)
{
// Set the value for this element
var contentMgr = this.getArrayMgr("content");
if (contentMgr != null) {
var val = contentMgr.getEntry(this.id,false,true);
if (val !== null)
{
_attrs["value"] = val;
}
}
// Check for already inside namespace
if(this.createNamespace && this.getArrayMgr("content").perspectiveData.owner == this)
{
_attrs["value"] = this.getArrayMgr("content").data;
}
}
}
set_label(_value)
{
// Abort if there 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"))
.addClass("et2_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);
// Split the label at the "%s"
var parts = et2_csvSplit(_value, 2, "%s");
// Update the content of the label container
for (var i = 0; i < parts.length; i++)
{
if (parts[i])
{
this._labelContainer.append(document.createTextNode(parts[i]));
}
if (i == 0)
{
this._labelContainer.append(ph);
}
}
// add class if label is empty
this._labelContainer.toggleClass('et2_label_empty', !_value || !parts[0]);
}
else
{
// Delete the labelContainer from the surroundings object
if (this._labelContainer)
{
this.getSurroundings().removeDOMNode(this._labelContainer[0]);
}
this._labelContainer = null;
}
// Update the surroundings in order to reflect the change in the label
this.getSurroundings().update();
// Copy the given value
this.label = _value;
}
}