some fixes for valueWidget

api/js/etemplate/et2_core_baseWidget.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
  * EGroupware eTemplate2 - JS Widget base class
  *
@@ -7,13 +8,30 @@
  * @link http://www.egroupware.org
  * @author Andreas Stöckel
  */
-
+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;
     lib/tooltip;
     et2_core_DOMWidget;
 */
-
+//import { ClassWithAttributes } from './et2_core_inheritance';
+require("./et2_core_interfaces");
+require("./et2_core_common");
+var et2_core_DOMWidget_1 = require("./et2_core_DOMWidget");
+var et2_core_inheritance_1 = require("./et2_core_inheritance");
 /**
  * Class which manages the DOM node itself. The simpleWidget class is derrived
  * from et2_DOMWidget and implements the getDOMNode function. A setDOMNode
@@ -21,9 +39,204 @@
  *
  * @augments et2_DOMWidget
  */
-var et2_baseWidget = (function(){ "use strict"; return et2_DOMWidget.extend(et2_IAligned,
+var et2_baseWidget = /** @class */ (function (_super) {
-{
+    __extends(et2_baseWidget, _super);
-	attributes: {
+    /**
+     * Constructor
+     */
+    function et2_baseWidget(_parent, _attrs, _child) {
+        var _this = 
+        // Call the inherited constructor
+        _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_core_DOMWidget_1.et2_DOMWidget._attributes, _child || {})) || this;
+        _this.align = 'left';
+        _this.node = null;
+        _this.statustext = '';
+        _this._messageDiv = null;
+        _this._tooltipElem = null;
+        return _this;
+    }
+    et2_baseWidget.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this.node = null;
+        this._messageDiv = null;
+    };
+    /**
+     * The setMessage function can be used to attach a small message box to the
+     * widget. This is e.g. used to display validation errors or success messages
+     *
+     * @param _text is the text which should be displayed as a message
+     * @param _type is an css class which is attached to the message box.
+     * 	Currently available are "hint", "success" and "validation_error", defaults
+     * 	to "hint"
+     * @param _floating if true, the object will be in one row with the element,
+     * 	defaults to true
+     * @param _prepend if set, the message is displayed behind the widget node
+     * 	instead of before. Defaults to false.
+     */
+    et2_baseWidget.prototype.showMessage = function (_text, _type, _floating, _prepend) {
+        // Preset the parameters
+        if (typeof _type == "undefined") {
+            _type = "hint";
+        }
+        if (typeof _floating == "undefined") {
+            _floating = true;
+        }
+        if (typeof _prepend == "undefined") {
+            _prepend = false;
+        }
+        var surr = this.getSurroundings();
+        // Remove the message div from the surroundings before creating a new
+        // one
+        this.hideMessage(false, true);
+        // Create the message div and add it to the "surroundings" manager
+        this._messageDiv = jQuery(document.createElement("div"))
+            .addClass("message")
+            .addClass(_type)
+            .addClass(_floating ? "floating" : "")
+            .text(_text.valueOf() + "");
+        // Decide whether to prepend or append the div
+        if (_prepend) {
+            surr.prependDOMNode(this._messageDiv[0]);
+        }
+        else {
+            surr.appendDOMNode(this._messageDiv[0]);
+        }
+        surr.update();
+    };
+    /**
+     * The hideMessage function can be used to hide a previously shown message.
+     *
+     * @param _fade if true, the message div will fade out, otherwise the message
+     * 	div is removed immediately. Defaults to true.
+     * @param _noUpdate is used internally to prevent an update of the surroundings
+     * 	manager.
+     */
+    et2_baseWidget.prototype.hideMessage = function (_fade, _noUpdate) {
+        if (typeof _fade == "undefined") {
+            _fade = true;
+        }
+        if (typeof _noUpdate == "undefined") {
+            _noUpdate = false;
+        }
+        // Remove the message from the surroundings manager and remove the
+        // reference to it
+        if (this._messageDiv != null) {
+            var surr = this.getSurroundings();
+            var self = this;
+            var messageDiv = this._messageDiv;
+            self._messageDiv = null;
+            var _done = function () {
+                surr.removeDOMNode(messageDiv[0]);
+                // Update the surroundings manager
+                if (!_noUpdate) {
+                    surr.update();
+                }
+            };
+            // Either fade out or directly call the function which removes the div
+            if (_fade) {
+                messageDiv.fadeOut("fast", _done);
+            }
+            else {
+                _done();
+            }
+        }
+    };
+    et2_baseWidget.prototype.detachFromDOM = function () {
+        // Detach this node from the tooltip node
+        if (this._tooltipElem) {
+            this.egw().tooltipUnbind(this._tooltipElem);
+            this._tooltipElem = null;
+        }
+        // Remove the binding to the click handler
+        if (this.node) {
+            jQuery(this.node).unbind("click.et2_baseWidget");
+        }
+        return _super.prototype.detachFromDOM.call(this);
+    };
+    et2_baseWidget.prototype.attachToDOM = function () {
+        var ret = _super.prototype.attachToDOM.call(this);
+        // Add the binding for the click handler
+        if (this.node) {
+            jQuery(this.node).bind("click.et2_baseWidget", this, function (e) {
+                return e.data.click.call(e.data, e, this);
+            });
+            if (typeof this.onclick == 'function')
+                jQuery(this.node).addClass('et2_clickable');
+        }
+        // Update the statustext
+        this.set_statustext(this.statustext);
+        return ret;
+    };
+    et2_baseWidget.prototype.setDOMNode = function (_node) {
+        if (_node != this.node) {
+            // Deatch the old node from the DOM
+            this.detachFromDOM();
+            // Set the new DOM-Node
+            this.node = _node;
+            // Attatch the DOM-Node to the tree
+            return this.attachToDOM();
+        }
+        return false;
+    };
+    et2_baseWidget.prototype.getDOMNode = function (_sender) {
+        return this.node;
+    };
+    et2_baseWidget.prototype.getTooltipElement = function () {
+        return this.getDOMNode(this);
+    };
+    /**
+     * Click handler calling custom handler set via onclick attribute to this.onclick
+     *
+     * @param _ev
+     * @returns
+     */
+    et2_baseWidget.prototype.click = function (_ev) {
+        if (typeof this.onclick == 'function') {
+            // Make sure function gets a reference to the widget, splice it in as 2. argument if not
+            var args = Array.prototype.slice.call(arguments);
+            if (args.indexOf(this) == -1)
+                args.splice(1, 0, this);
+            return this.onclick.apply(this, args);
+        }
+        return true;
+    };
+    et2_baseWidget.prototype.set_statustext = function (_value) {
+        // Tooltip should not be shown in mobile view
+        if (egwIsMobile())
+            return;
+        // Don't execute the code below, if no tooltip will be attached/detached
+        if (_value == "" && !this._tooltipElem) {
+            return;
+        }
+        // allow statustext to contain multiple translated sub-strings eg: {Firstname}.{Lastname}
+        if (_value.indexOf('{') !== -1) {
+            var egw = this.egw();
+            _value = _value.replace(/{([^}]+)}/g, function (str, p1) {
+                return egw.lang(p1);
+            });
+        }
+        this.statustext = _value;
+        //Get the domnode the tooltip should be attached to
+        var elem = jQuery(this.getTooltipElement());
+        if (elem) {
+            //If a tooltip is already attached to the element, remove it first
+            if (this._tooltipElem) {
+                this.egw().tooltipUnbind(this._tooltipElem);
+                this._tooltipElem = null;
+            }
+            if (_value && _value != '') {
+                this.egw().tooltipBind(elem, _value, this.options.statustext_html);
+                this._tooltipElem = elem;
+            }
+        }
+    };
+    et2_baseWidget.prototype.set_align = function (_value) {
+        this.align = _value;
+    };
+    et2_baseWidget.prototype.get_align = function () {
+        return this.align;
+    };
+    et2_baseWidget._attributes = {
         "statustext": {
             "name": "Tooltip",
             "type": "string",
@@ -48,380 +261,97 @@ var et2_baseWidget = (function(){ "use strict"; return et2_DOMWidget.extend(et2_
             "default": et2_no_init,
             "description": "JS code which is executed when the element is clicked."
         }
-	},
-
-	/**
-	 * Constructor
-	 *
-	 * @memberOf et2BaseWidget
-	 */
-	init: function() {
-		this.align = "left";
-
-		this._super.apply(this, arguments);
-
-		this.node = null;
-		this.statustext = "";
-		this._messageDiv = null;
-		this._tooltipElem = null;
-	},
-
-	destroy: function() {
-		this._super.apply(this, arguments);
-
-		this.node = null;
-		this._messageDiv = null;
-	},
-
-	/**
-	 * The setMessage function can be used to attach a small message box to the
-	 * widget. This is e.g. used to display validation errors or success messages
-	 *
-	 * @param _text is the text which should be displayed as a message
-	 * @param _type is an css class which is attached to the message box.
-	 * 	Currently available are "hint", "success" and "validation_error", defaults
-	 * 	to "hint"
-	 * @param _floating if true, the object will be in one row with the element,
-	 * 	defaults to true
-	 * @param _prepend if set, the message is displayed behind the widget node
-	 * 	instead of before. Defaults to false.
-	 */
-	showMessage: function(_text, _type, _floating, _prepend) {
-
-		// Preset the parameters
-		if (typeof _type == "undefined")
-		{
-			_type = "hint";
-		}
-
-		if (typeof _floating == "undefined")
-		{
-			_floating = true;
-		}
-
-		if (typeof _prepend == "undefined")
-		{
-			_prepend = false;
-		}
-
-		var surr = this.getSurroundings();
-
-		// Remove the message div from the surroundings before creating a new
-		// one
-		this.hideMessage(false, true);
-
-		// Create the message div and add it to the "surroundings" manager
-		this._messageDiv = jQuery(document.createElement("div"))
-			.addClass("message")
-			.addClass(_type)
-			.addClass(_floating ? "floating" : "")
-			.text(_text.valueOf() + "");
-
-		// Decide whether to prepend or append the div
-		if (_prepend)
-		{
-			surr.prependDOMNode(this._messageDiv[0]);
-		}
-		else
-		{
-			surr.appendDOMNode(this._messageDiv[0]);
-		}
-
-		surr.update();
-	},
-
-	/**
-	 * The hideMessage function can be used to hide a previously shown message.
-	 *
-	 * @param _fade if true, the message div will fade out, otherwise the message
-	 * 	div is removed immediately. Defaults to true.
-	 * @param _noUpdate is used internally to prevent an update of the surroundings
-	 * 	manager.
-	 */
-	hideMessage: function(_fade, _noUpdate) {
-		if (typeof _fade == "undefined")
-		{
-			_fade = true;
-		}
-
-		if (typeof _noUpdate == "undefined")
-		{
-			_noUpdate = false;
-		}
-
-		// Remove the message from the surroundings manager and remove the
-		// reference to it
-		if (this._messageDiv != null)
-		{
-			var surr = this.getSurroundings();
-			var self = this;
-			var messageDiv = this._messageDiv;
-			self._messageDiv = null;
-
-			var _done = function() {
-				surr.removeDOMNode(messageDiv[0]);
-
-				// Update the surroundings manager
-				if (!_noUpdate)
-				{
-					surr.update();
-				}
     };
-
+    return et2_baseWidget;
-			// Either fade out or directly call the function which removes the div
+}(et2_core_DOMWidget_1.et2_DOMWidget));
-			if (_fade)
+exports.et2_baseWidget = et2_baseWidget;
-			{
-				messageDiv.fadeOut("fast", _done);
-			}
-			else
-			{
-				_done();
-			}
-		}
-	},
-
-	detachFromDOM: function() {
-		// Detach this node from the tooltip node
-		if (this._tooltipElem)
-		{
-			this.egw().tooltipUnbind(this._tooltipElem);
-			this._tooltipElem = null;
-		}
-
-		// Remove the binding to the click handler
-		if (this.node)
-		{
-			jQuery(this.node).unbind("click.et2_baseWidget");
-		}
-
-		this._super.apply(this, arguments);
-	},
-
-	attachToDOM: function() {
-		this._super.apply(this, arguments);
-
-		// Add the binding for the click handler
-		if (this.node)
-		{
-			jQuery(this.node).bind("click.et2_baseWidget", this, function(e) {
-				return e.data.click.call(e.data, e, this);
-			});
-			if (typeof this.onclick == 'function') jQuery(this.node).addClass('et2_clickable');
-		}
-
-		// Update the statustext
-		this.set_statustext(this.statustext);
-	},
-
-	setDOMNode: function(_node) {
-		if (_node != this.node)
-		{
-			// Deatch the old node from the DOM
-			this.detachFromDOM();
-
-			// Set the new DOM-Node
-			this.node = _node;
-
-			// Attatch the DOM-Node to the tree
-			return this.attachToDOM();
-		}
-
-		return false;
-	},
-
-	getDOMNode: function() {
-		return this.node;
-	},
-
-	getTooltipElement: function() {
-		return this.getDOMNode(this);
-	},
-
-	/**
-	 * Click handler calling custom handler set via onclick attribute to this.onclick
-	 *
-	 * @param _ev
-	 * @returns
-	 */
-	click: function(_ev) {
-		if(typeof this.onclick == 'function')
-		{
-			// Make sure function gets a reference to the widget, splice it in as 2. argument if not
-			var args = Array.prototype.slice.call(arguments);
-			if(args.indexOf(this) == -1) args.splice(1, 0, this);
-
-			return this.onclick.apply(this, args);
-		}
-
-		return true;
-	},
-
-	set_statustext: function(_value) {
-		// Tooltip should not be shown in mobile view
-		if (egwIsMobile()) return;
-		// Don't execute the code below, if no tooltip will be attached/detached
-		if (_value == "" && !this._tooltipElem)
-		{
-			return;
-		}
-
-		// allow statustext to contain multiple translated sub-strings eg: {Firstname}.{Lastname}
-		if (_value.indexOf('{') !== -1)
-		{
-			var egw = this.egw();
-			_value = _value.replace(/{([^}]+)}/g, function(str,p1)
-			{
-				return egw.lang(p1);
-			});
-		}
-
-		this.statustext = _value;
-
-		//Get the domnode the tooltip should be attached to
-		var elem = jQuery(this.getTooltipElement());
-
-		if (elem)
-		{
-			//If a tooltip is already attached to the element, remove it first
-			if (this._tooltipElem)
-			{
-				this.egw().tooltipUnbind(this._tooltipElem);
-				this._tooltipElem = null;
-			}
-
-			if (_value && _value != '')
-			{
-				this.egw().tooltipBind(elem, _value, this.options.statustext_html);
-				this._tooltipElem = elem;
-			}
-		}
-	},
-
-	set_align: function(_value) {
-		this.align = _value;
-	},
-
-	get_align: function(_value) {
-		return this.align;
-	}
-
-});}).call(this);
-
 /**
  * Simple container object
- *
- * @augments et2_baseWidget
  */
-var et2_container = (function(){ "use strict"; return et2_baseWidget.extend(
+var et2_container = /** @class */ (function (_super) {
-{
+    __extends(et2_container, _super);
     /**
      * Constructor
-	 *
-	 * @memberOf et2_container
      */
-	init: function() {
+    function et2_container(_parent, _attrs, _child) {
-		this._super.apply(this, arguments);
+        // Call the inherited constructor
-
+        return _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_core_DOMWidget_1.et2_DOMWidget._attributes, _child || {})) || this;
-		this.setDOMNode(document.createElement("div"));
+    }
-	},
-
     /**
      * The destroy function destroys all children of the widget, removes itself
      * from the parents children list.
      * Overriden to not try to remove self from parent, as that's not possible.
      */
-	destroy: function() {
+    et2_container.prototype.destroy = function () {
         // Call the destructor of all children
-		for (var i = this._children.length - 1; i >= 0; i--)
+        for (var i = this._children.length - 1; i >= 0; i--) {
-		{
+            this._children[i].destroy();
-			this._children[i].free();
         }
-
         // Free the array managers if they belong to this widget
-		for (var key in this._mgrs)
+        for (var key in this._mgrs) {
-		{
+            if (this._mgrs[key] && this._mgrs[key].owner == this) {
-			if (this._mgrs[key] && this._mgrs[key].owner == this)
+                this._mgrs[key].destroy();
-			{
-				this._mgrs[key].free();
             }
         }
-	}
+    };
-});}).call(this);
+    return et2_container;
-
+}(et2_baseWidget));
 /**
  * Container object for not-yet supported widgets
  *
  * @augments et2_baseWidget
  */
-var et2_placeholder = (function(){ "use strict"; return et2_baseWidget.extend([et2_IDetachedDOM],
+var et2_placeholder = /** @class */ (function (_super) {
-{
+    __extends(et2_placeholder, _super);
     /**
      * Constructor
-	 *
-	 * @memberOf et2_placeholder
      */
-	init: function() {
+    function et2_placeholder(_parent, _attrs, _child) {
-		this._super.apply(this, arguments);
+        var _this = 
-
+        // Call the inherited constructor
-		// The attrNodes object will hold the DOM nodes which represent the
+        _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_core_DOMWidget_1.et2_DOMWidget._attributes, _child || {})) || this;
-		// values of this object
+        _this.visible = false;
-		this.attrNodes = {};
+        _this.attrNodes = {};
-
-		this.visible = false;
-
         // Create the placeholder div
-		this.placeDiv = jQuery(document.createElement("span"))
+        _this.placeDiv = jQuery(document.createElement("span"))
             .addClass("et2_placeholder");
-
         var headerNode = jQuery(document.createElement("span"))
-			.text(this._type || "")
+            .text(_this.getType() || "")
             .addClass("et2_caption")
-			.appendTo(this.placeDiv);
+            .appendTo(_this.placeDiv);
-
         var attrsCntr = jQuery(document.createElement("span"))
-			.appendTo(this.placeDiv)
+            .appendTo(_this.placeDiv)
             .hide();
-
+        headerNode.click(_this, function (e) {
-		headerNode.click(this, function(e) {
             e.data.visible = !e.data.visible;
-			if (e.data.visible)
+            if (e.data.visible) {
-			{
                 attrsCntr.show();
             }
-			else
+            else {
-			{
                 attrsCntr.hide();
             }
         });
-
+        for (var key in _this.options) {
-		for (var key in this.options)
+            if (typeof _this.options[key] != "undefined") {
-		{
+                if (typeof _this.attrNodes[key] == "undefined") {
-			if (typeof this.options[key] != "undefined")
+                    _this.attrNodes[key] = jQuery(document.createElement("span"))
-			{
-				if (typeof this.attrNodes[key] == "undefined")
-				{
-					this.attrNodes[key] = jQuery(document.createElement("span"))
                         .addClass("et2_attr");
-					attrsCntr.append(this.attrNodes[key]);
+                    attrsCntr.append(_this.attrNodes[key]);
                 }
-
+                _this.attrNodes[key].text(key + "=" + _this.options[key]);
-				this.attrNodes[key].text(key + "=" + this.options[key]);
             }
         }
-
+        _this.setDOMNode(_this.placeDiv[0]);
-		this.setDOMNode(this.placeDiv[0]);
+        return _this;
-	},
+    }
-
+    et2_placeholder.prototype.getDetachedAttributes = function (_attrs) {
-	getDetachedAttributes: function(_attrs) {
         _attrs.push("value");
-	},
+    };
-
+    et2_placeholder.prototype.getDetachedNodes = function () {
-	getDetachedNodes: function() {
         return [this.placeDiv[0]];
-	},
+    };
-
+    et2_placeholder.prototype.setDetachedAttributes = function (_nodes, _values) {
-	setDetachedAttributes: function(_nodes, _values) {
         this.placeDiv = jQuery(_nodes[0]);
-	}
+    };
-});}).call(this);
+    return et2_placeholder;
-
+}(et2_baseWidget));

api/js/etemplate/et2_core_baseWidget.ts

@@ -28,7 +28,7 @@ import { et2_widget, et2_createWidget, et2_register_widget, WidgetConfig } from
  *
  * @augments et2_DOMWidget
  */
-class et2_baseWidget extends et2_DOMWidget implements et2_IAligned
+export class et2_baseWidget extends et2_DOMWidget implements et2_IAligned
 {
 	static readonly _attributes: any = {
 		"statustext": {

api/js/etemplate/et2_core_valueWidget.js

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
     /vendor/bower-asset/jquery/dist/jquery.js;
     et2_core_baseWidget;
 */
-require("./et2_core_baseWidget");
+var et2_core_baseWidget_1 = require("./et2_core_baseWidget");
 require("./et2_core_common");
 /**
  * et2_valueWidget is the base class for et2_inputWidget - valueWidget introduces
@@ -40,7 +40,10 @@ require("./et2_core_common");
 var et2_valueWidget = /** @class */ (function (_super) {
     __extends(et2_valueWidget, _super);
     function et2_valueWidget() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.label = '';
+        _this._labelContainer = null;
+        return _this;
     }
     /**
      *
@@ -124,4 +127,5 @@ var et2_valueWidget = /** @class */ (function (_super) {
         }
     };
     return et2_valueWidget;
-}(et2_baseWidget));
+}(et2_core_baseWidget_1.et2_baseWidget));
+exports.et2_valueWidget = et2_valueWidget;

api/js/etemplate/et2_core_valueWidget.ts

@@ -15,7 +15,7 @@
 	et2_core_baseWidget;
 */
 
-import './et2_core_baseWidget'
+import { et2_baseWidget } from './et2_core_baseWidget'
 import './et2_core_common';
 
 /**
@@ -25,7 +25,7 @@ import './et2_core_common';
  *
  * @augments et2_baseWidget
  */
-class et2_valueWidget extends et2_baseWidget
+export class et2_valueWidget extends et2_baseWidget
 {
 	static readonly _attributes : any = {
 		"label": {
@@ -43,6 +43,9 @@ class et2_valueWidget extends et2_baseWidget
 		}
 	};
 
+	label: string = '';
+	private _labelContainer: JQuery = null;
+
 	/**
 	 *
 	 *
@@ -73,7 +76,7 @@ class et2_valueWidget extends et2_baseWidget
 		}
 	}
 
-	set_label(_value)
+	set_label(_value : string)
 	{
 		// Abort if there was no change in the label
 		if (_value == this.label)

api/js/etemplate/et2_types.d.ts

@@ -5,13 +5,14 @@ declare module eT2
 declare var etemplate2 : any;
 declare class et2_widget{}
 declare class et2_DOMWidget extends et2_widget{}
+declare class et2_baseWidget extends et2_DOMWidget{}
+declare class et2_valueWidget extends et2_baseWidget{}
 declare class et2_inputWidget{
 	getInputNode() : HTMLElement
 }
 declare var et2_surroundingsMgr : any;
 declare var et2_arrayMgr : any;
 declare var et2_readonlysArrayMgr : any;
-declare var et2_baseWidget : any;
 declare var et2_container : any;
 declare var et2_placeholder : any;
 declare var et2_validTypes : string[];
@@ -25,7 +26,6 @@ declare var et2_IAligned : any;
 declare var et2_ISubmitListener : any;
 declare var et2_IDetachedDOM : any;
 declare var et2_IPrint : any;
-declare var et2_valueWidget : any;
 declare var et2_registry : {};
 declare var et2_dataview : any;
 declare var et2_dataview_controller : any;