forked from extern/egroupware
First run at TS for valueWidget
This commit is contained in:
parent
e8d6f41e05
commit
a28dffd5cc
@ -1,3 +1,4 @@
|
||||
"use strict";
|
||||
/**
|
||||
* EGroupware eTemplate2 - JS widget class with value attribute and auto loading
|
||||
*
|
||||
@ -9,12 +10,26 @@
|
||||
* @copyright Stylite 2011
|
||||
* @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
|
||||
/vendor/bower-asset/jquery/dist/jquery.js;
|
||||
et2_core_baseWidget;
|
||||
/vendor/bower-asset/jquery/dist/jquery.js;
|
||||
et2_core_baseWidget;
|
||||
*/
|
||||
|
||||
require("./et2_core_baseWidget");
|
||||
require("./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
|
||||
@ -22,111 +37,91 @@
|
||||
*
|
||||
* @augments et2_baseWidget
|
||||
*/
|
||||
var et2_valueWidget = (function(){ "use strict"; return et2_baseWidget.extend(
|
||||
{
|
||||
attributes: {
|
||||
"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: function(_attrs) {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
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: function(_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"))
|
||||
.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;
|
||||
}
|
||||
});}).call(this);
|
||||
|
||||
var et2_valueWidget = /** @class */ (function (_super) {
|
||||
__extends(et2_valueWidget, _super);
|
||||
function et2_valueWidget() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @memberOf et2_valueWidget
|
||||
* @param _attrs
|
||||
*/
|
||||
et2_valueWidget.prototype.transformAttributes = function (_attrs) {
|
||||
_super.prototype.transformAttributes.call(this, _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;
|
||||
}
|
||||
}
|
||||
};
|
||||
et2_valueWidget.prototype.set_label = function (_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;
|
||||
};
|
||||
et2_valueWidget._attributes = {
|
||||
"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",
|
||||
"default": et2_no_init
|
||||
}
|
||||
};
|
||||
return et2_valueWidget;
|
||||
}(et2_baseWidget));
|
||||
|
137
api/js/etemplate/et2_core_valueWidget.ts
Normal file
137
api/js/etemplate/et2_core_valueWidget.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user