get et2_DOMWidget to TypeScript

api/js/etemplate/et2_core_DOMWidget.js

@@ -31,7 +31,7 @@ var et2_core_inheritance_1 = require("./et2_core_inheritance");
 require("./et2_core_interfaces");
 require("./et2_core_common");
 var et2_core_widget_1 = require("./et2_core_widget");
-require("../egw_action/egw_action.js");
+var egw_action_js_1 = require("../egw_action/egw_action.js");
 /**
  * Abstract widget class which can be inserted into the DOM. All widget classes
  * deriving from this class have to care about implementing the "getDOMNode"
@@ -39,8 +39,8 @@ require("../egw_action/egw_action.js");
  *
  * @augments et2_widget
  */
-var et2_DOMWidget = /** @class */ (function (_super_1) {
+var et2_DOMWidget = /** @class */ (function (_super) {
-    __extends(et2_DOMWidget, _super_1);
+    __extends(et2_DOMWidget, _super);
     /**
      * When the DOMWidget is initialized, it grabs the DOM-Node of the parent
      * object (if available) and passes it to its own "createDOMNode" function
@@ -50,13 +50,13 @@ var et2_DOMWidget = /** @class */ (function (_super_1) {
     function et2_DOMWidget(_parent, _attrs, _child) {
         var _this = 
         // Call the inherited constructor
-        _super_1.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_DOMWidget._attributes, _child || {})) || this;
+        _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_DOMWidget._attributes, _child || {})) || this;
         _this.parentNode = null;
+        _this.disabled = false;
         _this._attachSet = {
             "node": null,
             "parent": null
         };
-        _this.disabled = false;
         _this._surroundingsMgr = null;
         return _this;
     }
@@ -69,7 +69,7 @@ var et2_DOMWidget = /** @class */ (function (_super_1) {
         this.parentNode = null;
         this._attachSet = {};
         if (this._actionManager) {
-            var app_om = egw_getObjectManager(this.egw().getAppName(), false, 1);
+            var app_om = egw_action_js_1.egw_getObjectManager(this.egw().getAppName(), false, 1);
             if (app_om) {
                 var om = app_om.getObjectById(this.id);
                 if (om)
@@ -79,10 +79,10 @@ var et2_DOMWidget = /** @class */ (function (_super_1) {
             this._actionManager = null;
         }
         if (this._surroundingsMgr) {
-            this._surroundingsMgr.free();
+            this._surroundingsMgr.destroy();
             this._surroundingsMgr = null;
         }
-        this._super();
+        _super.prototype.destroy.call(this);
     };
     /**
      * Attaches the container node of this widget to the DOM-Tree
@@ -178,32 +178,39 @@ var et2_DOMWidget = /** @class */ (function (_super_1) {
     et2_DOMWidget.prototype.get_tab_info = function () {
         var parent = this;
         do {
-            parent = parent._parent;
+            parent = parent.getParent();
-        } while (parent !== this.getRoot() && parent._type !== 'tabbox');
+        } while (parent !== this.getRoot() && parent.getType() !== 'tabbox');
         // No tab
         if (parent === this.getRoot()) {
             return null;
         }
+        var tabbox = parent;
         // Find the tab index
-        for (var i = 0; i < parent.tabData.length; i++) {
+        for (var i = 0; i < tabbox.tabData.length; i++) {
             // Find the tab by DOM heritage
-            if (parent.tabData[i].contentDiv.has(this.div).length) {
+            // @ts-ignore
-                return parent.tabData[i];
+            if (tabbox.tabData[i].contentDiv.has(this.div).length) {
+                return tabbox.tabData[i];
             }
         }
         // On a tab, but we couldn't find it by DOM nodes  Maybe tab template is
         // not loaded yet.  Try checking IDs.
         var template = this;
         do {
-            template = template._parent;
+            template = template.getParent();
-        } while (template !== parent && template._type !== 'template');
+            // @ts-ignore
-        for (var i = parent.tabData.length - 1; i >= 0; i--) {
+        } while (template !== tabbox && template.getType() !== 'template');
-            if (template && template.id && template.id === parent.tabData[i].id) {
+        for (var i = tabbox.tabData.length - 1; i >= 0; i--) {
-                return parent.tabData[i];
+            if (template && template.id && template.id === tabbox.tabData[i].id) {
+                return tabbox.tabData[i];
             }
         }
         // Fallback
-        return this.getParent().get_tab_info();
+        var fallback = this.getParent();
+        if (typeof fallback.get_tab_info === 'function') {
+            return fallback.get_tab_info();
+        }
+        return null;
     };
     /**
      * Set the parent DOM node of this element.  Takes a wider variety of types
@@ -391,7 +398,7 @@ var et2_DOMWidget = /** @class */ (function (_super_1) {
         }
         // Initialize the action manager and add some actions to it
         // Only look 1 level deep
-        var gam = egw_getActionManager(this.egw().appName, true, 1);
+        var gam = egw_action_js_1.egw_getActionManager(this.egw().appName, true, 1);
         if (typeof this._actionManager != "object") {
             if (gam.getActionById(this.getInstanceManager().uniqueId, 1) !== null) {
                 gam = gam.getActionById(this.getInstanceManager().uniqueId, 1);
@@ -440,15 +447,15 @@ var et2_DOMWidget = /** @class */ (function (_super_1) {
      */
     et2_DOMWidget.prototype._link_actions = function (actions) {
         // Get the top level element for the tree
-        var objectManager = egw_getAppObjectManager(true);
+        var objectManager = egw_action_js_1.egw_getAppObjectManager(true);
         var widget_object = objectManager.getObjectById(this.id);
         if (widget_object == null) {
             // Add a new container to the object manager which will hold the widget
             // objects
-            widget_object = objectManager.insertObject(false, new egwActionObject(this.id, objectManager, new et2_action_object_impl(this), this._actionManager || objectManager.manager.getActionById(this.id) || objectManager.manager));
+            widget_object = objectManager.insertObject(false, new egw_action_js_1.egwActionObject(this.id, objectManager, (new et2_action_object_impl(this)).getAOI(), this._actionManager || objectManager.manager.getActionById(this.id) || objectManager.manager));
         }
         else {
-            widget_object.setAOI(new et2_action_object_impl(this, this.getDOMNode()));
+            widget_object.setAOI((new et2_action_object_impl(this, this.getDOMNode())).getAOI());
         }
         // Delete all old objects
         widget_object.clear();
@@ -531,28 +538,26 @@ var et2_DOMWidget = /** @class */ (function (_super_1) {
 /**
  * The surroundings manager class allows to append or prepend elements around
  * an widget node.
- *
- * @augments Class
  */
-var et2_surroundingsMgr = /** @class */ (function (_super_1) {
+var et2_surroundingsMgr = /** @class */ (function (_super) {
-    __extends(et2_surroundingsMgr, _super_1);
+    __extends(et2_surroundingsMgr, _super);
-    function et2_surroundingsMgr() {
-        return _super_1 !== null && _super_1.apply(this, arguments) || this;
-    }
     /**
      * Constructor
      *
      * @memberOf et2_surroundingsMgr
      * @param _widget
      */
-    et2_surroundingsMgr.prototype.init = function (_widget) {
+    function et2_surroundingsMgr(_widget) {
-        this.widget = _widget;
+        var _this = _super.call(this) || this;
-        this._widgetContainer = null;
+        _this._widgetContainer = null;
-        this._widgetSurroundings = [];
+        _this._widgetSurroundings = [];
-        this._widgetPlaceholder = null;
+        _this._widgetPlaceholder = null;
-        this._widgetNode = null;
+        _this._widgetNode = null;
-        this._ownPlaceholder = true;
+        _this._ownPlaceholder = true;
-    };
+        _this._surroundingsUpdated = false;
+        _this.widget = _widget;
+        return _this;
+    }
     et2_surroundingsMgr.prototype.destroy = function () {
         this._widgetContainer = null;
         this._widgetSurroundings = null;
@@ -703,33 +708,38 @@ var et2_surroundingsMgr = /** @class */ (function (_super_1) {
  * @param {Object} node
  *
  */
-function et2_action_object_impl(widget, node) {
+var et2_action_object_impl = /** @class */ (function () {
-    var aoi = new egwActionObjectInterface();
+    function et2_action_object_impl(_widget, _node) {
-    var objectNode = node;
+        var widget = _widget;
-    aoi.getWidget = function () {
+        var objectNode = _node;
-        return widget;
+        this.aoi = new egw_action_js_1.egwActionObjectInterface();
+        this.aoi.getWidget = function () {
+            return widget;
+        };
+        this.aoi.doGetDOMNode = function () {
+            return objectNode ? objectNode : widget.getDOMNode();
+        };
+        // _outerCall may be used to determine, whether the state change has been
+        // evoked from the outside and the stateChangeCallback has to be called
+        // or not.
+        this.aoi.doSetState = function (_state, _outerCall) {
+        };
+        // The doTiggerEvent function may be overritten by the aoi if it wants to
+        // support certain action implementation specific events like EGW_AI_DRAG_OVER
+        // or EGW_AI_DRAG_OUT
+        this.aoi.doTriggerEvent = function (_event, _data) {
+            switch (_event) {
+                case egw_action_js_1.EGW_AI_DRAG_OVER:
+                    jQuery(this.node).addClass("ui-state-active");
+                    break;
+                case egw_action_js_1.EGW_AI_DRAG_OUT:
+                    jQuery(this.node).removeClass("ui-state-active");
+                    break;
+            }
+        };
+    }
+    et2_action_object_impl.prototype.getAOI = function () {
+        return this.aoi;
     };
-    aoi.doGetDOMNode = function () {
+    return et2_action_object_impl;
-        return objectNode ? objectNode : widget.getDOMNode();
+}());
-    };
-    // _outerCall may be used to determine, whether the state change has been
-    // evoked from the outside and the stateChangeCallback has to be called
-    // or not.
-    aoi.doSetState = function (_state, _outerCall) {
-    };
-    // The doTiggerEvent function may be overritten by the aoi if it wants to
-    // support certain action implementation specific events like EGW_AI_DRAG_OVER
-    // or EGW_AI_DRAG_OUT
-    aoi.doTriggerEvent = function (_event, _data) {
-        switch (_event) {
-            case EGW_AI_DRAG_OVER:
-                jQuery(this.node).addClass("ui-state-active");
-                break;
-            case EGW_AI_DRAG_OUT:
-                jQuery(this.node).removeClass("ui-state-active");
-                break;
-        }
-    };
-    return aoi;
-}
-;

api/js/etemplate/et2_core_DOMWidget.ts

@@ -18,7 +18,11 @@ import { ClassWithAttributes } from './et2_core_inheritance';
 import './et2_core_interfaces';
 import './et2_core_common';
 import {et2_widget, et2_createWidget, et2_register_widget, WidgetConfig} from "./et2_core_widget";
-import '../egw_action/egw_action.js';
+import {
+	egw_getObjectManager, egwActionObjectInterface,
+	egw_getActionManager, egw_getAppObjectManager,
+	egwActionObject, egwAction, EGW_AI_DRAG_OVER, EGW_AI_DRAG_OUT
+} from '../egw_action/egw_action.js';
 
 /**
  * Abstract widget class which can be inserted into the DOM. All widget classes
@@ -27,7 +31,7 @@ import '../egw_action/egw_action.js';
  *
  * @augments et2_widget
  */
-class et2_DOMWidget extends et2_widget implements et2_IDOMNode
+abstract class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 {
 	static readonly _attributes : any = {
 		"disabled": {
@@ -98,10 +102,17 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 		}
 	}
 
-	parentNode : HTMLElement;
+	parentNode : HTMLElement = null;
-	disabled : boolean;
+	disabled : boolean = false;
-	private _attachSet: object;
+	private _attachSet: any  = {
+		"node": null,
+		"parent": null
+	};
 	private _actionManager: any;
+	width: number;
+	height: number;
+	dom_id: string;
+	overflow: string;
 	
 	/**
 	 * When the DOMWidget is initialized, it grabs the DOM-Node of the parent
@@ -114,17 +125,11 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 		// Call the inherited constructor
 		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_DOMWidget._attributes, _child || {}));
 
-		this.parentNode = null;
-
-		this._attachSet = {
-			"node": null,
-			"parent": null
-		};
-
-		this.disabled = false;
 		this._surroundingsMgr = null;
 	}
 
+	abstract getDOMNode(_sender?: et2_widget): HTMLElement
+
 	/**
 	 * Detatches the node from the DOM and clears all references to the parent
 	 * node or the dom node of this widget.
@@ -149,11 +154,11 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 
 		if (this._surroundingsMgr)
 		{
-			this._surroundingsMgr.free();
+			this._surroundingsMgr.destroy();
 			this._surroundingsMgr = null;
 		}
 
-		this._super();
+		super.destroy();
 	}
 
 	/**
@@ -163,14 +168,15 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 	{
 		// Check whether the parent implements the et2_IDOMNode interface. If
 		// yes, grab the DOM node and create our own.
-		if (this.getParent() && this.getParent().implements(et2_IDOMNode)) {
+		if (this.getParent() && this.getParent().implements(et2_IDOMNode))
+		{
 			if(this.options.parent_node)
 			{
 				this.set_parent_node(this.options.parent_node);
 			}
 			else
 			{
-				this.setParentDOMNode(this.getParent().getDOMNode(this));
+				this.setParentDOMNode((<et2_IDOMNode><unknown>this.getParent()).getDOMNode(this));
 			}
 		}
 
@@ -272,11 +278,12 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 	 *
 	 * @returns {Object|null} Data for tab the widget is on
 	 */
-	get_tab_info() {
+	get_tab_info() : object | null
-		var parent = this;
+	{
+		var parent : et2_widget = this;
 		do {
-			parent = parent._parent;
+			parent = parent.getParent();
-		} while (parent !== this.getRoot() && parent._type !== 'tabbox');
+		} while (parent !== this.getRoot() && parent.getType() !== 'tabbox');
 
 		// No tab
 		if(parent === this.getRoot())
@@ -284,30 +291,39 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 			return null;
 		}
 
+		let tabbox : et2_tabbox = <et2_tabbox><unknown>parent;
+
 		// Find the tab index
-		for(var i = 0; i < parent.tabData.length; i++)
+		for(var i = 0; i < tabbox.tabData.length; i++)
 		{
 			// Find the tab by DOM heritage
-			if(parent.tabData[i].contentDiv.has(this.div).length)
+			// @ts-ignore
+			if(tabbox.tabData[i].contentDiv.has(this.div).length)
 			{
-				return parent.tabData[i];
+				return tabbox.tabData[i];
 			}
 		}
 		// On a tab, but we couldn't find it by DOM nodes  Maybe tab template is
 		// not loaded yet.  Try checking IDs.
-		var template = this;
+		var template : et2_widget = this;
 		do {
-			template = template._parent;
+			template = template.getParent();
-		} while (template !== parent && template._type !== 'template');
+			// @ts-ignore
-		for(var i = parent.tabData.length - 1; i >= 0; i--)
+		} while (template !== tabbox && template.getType() !== 'template');
+		for (var i = tabbox.tabData.length - 1; i >= 0; i--)
 		{
-			if(template && template.id && template.id === parent.tabData[i].id)
+			if (template && template.id && template.id === tabbox.tabData[i].id)
 			{
-				return parent.tabData[i];
+				return tabbox.tabData[i];
 			}
 		}
 		// Fallback
-		return this.getParent().get_tab_info();
+		let fallback = <et2_DOMWidget><unknown>this.getParent();
+		if (typeof fallback.get_tab_info === 'function')
+		{
+			return fallback.get_tab_info();
+		}
+		return null;
 	}
 
 	/**
@@ -316,7 +332,8 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 	 *
 	 * @param _node String|DOMNode DOM node to contain the widget, or the ID of the DOM node.
 	 */
-	set_parent_node(_node) {
+	set_parent_node(_node)
+	{
 		if(typeof _node == "string")
 		{
 			var parent = jQuery('#'+_node);
@@ -347,7 +364,8 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 	 *
 	 * @param _node
 	 */
-	setParentDOMNode(_node) {
+	setParentDOMNode(_node : HTMLElement)
+	{
 		if (_node != this.parentNode)
 		{
 			// Detatch this element from the DOM tree
@@ -615,13 +633,13 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 			// Add a new container to the object manager which will hold the widget
 			// objects
 			widget_object = objectManager.insertObject(false, new egwActionObject(
-				this.id, objectManager, new et2_action_object_impl(this),
+				this.id, objectManager, (new et2_action_object_impl(this)).getAOI(),
 				this._actionManager || objectManager.manager.getActionById(this.id) || objectManager.manager
 			));
 		}
 		else
 		{
-			widget_object.setAOI(new et2_action_object_impl(this, this.getDOMNode()));
+			widget_object.setAOI((new et2_action_object_impl(this, this.getDOMNode())).getAOI());
 		}
 
 		// Delete all old objects
@@ -639,25 +657,27 @@ class et2_DOMWidget extends et2_widget implements et2_IDOMNode
 /**
  * The surroundings manager class allows to append or prepend elements around
  * an widget node.
- *
- * @augments Class
  */
 class et2_surroundingsMgr extends ClassWithAttributes
 {
+    widget: et2_DOMWidget;
+	private _widgetContainer: any = null;
+	private _widgetSurroundings: any[] = [];
+	private _widgetPlaceholder: any = null;
+	private _widgetNode: HTMLElement = null;
+	private _ownPlaceholder: boolean = true;
+	private _surroundingsUpdated: boolean = false;
+
 	/**
 	 * Constructor
 	 *
 	 * @memberOf et2_surroundingsMgr
 	 * @param _widget
 	 */
-	init(_widget) {
+	constructor(_widget : et2_DOMWidget)
+	{
+		super();
 		this.widget = _widget;
-
-		this._widgetContainer = null;
-		this._widgetSurroundings = [];
-		this._widgetPlaceholder = null;
-		this._widgetNode = null;
-		this._ownPlaceholder = true;
 	}
 
 	destroy() {
@@ -736,7 +756,7 @@ class et2_surroundingsMgr extends ClassWithAttributes
 		}
 	}
 
-	_rebuildContainer() {
+	private _rebuildContainer() {
 		// Return if there has been no change in the "surroundings-data"
 		if (!this._surroundingsUpdated)
 		{
@@ -847,7 +867,6 @@ class et2_surroundingsMgr extends ClassWithAttributes
 		// Return the widget container
 		return this._widgetContainer;
 	}
-
 }
 
 /**
@@ -860,40 +879,47 @@ class et2_surroundingsMgr extends ClassWithAttributes
  * @param {Object} node
  *
  */
-function et2_action_object_impl(widget, node)
+class et2_action_object_impl
 {
-	var aoi = new egwActionObjectInterface();
+	aoi : egwActionObjectInterface;
-	var objectNode = node;
 
-	aoi.getWidget = function() {
+	constructor(_widget : et2_DOMWidget, _node? : HTMLElement)
-		return widget;
+	{
-	};
+		var widget = _widget;
-
+		var objectNode = _node;
-	aoi.doGetDOMNode = function() {
+		this.aoi = new egwActionObjectInterface();
-		return objectNode?objectNode:widget.getDOMNode();
+		this.aoi.getWidget = function () {
-	};
+			return widget;
+		};
+		this.aoi.doGetDOMNode = function () {
+			return objectNode ? objectNode : widget.getDOMNode();
+		};
 
 // _outerCall may be used to determine, whether the state change has been
 // evoked from the outside and the stateChangeCallback has to be called
 // or not.
-	aoi.doSetState = function(_state, _outerCall) {
+		this.aoi.doSetState = function (_state, _outerCall)
-	};
+		{
+		};
 
 // The doTiggerEvent function may be overritten by the aoi if it wants to
 // support certain action implementation specific events like EGW_AI_DRAG_OVER
 // or EGW_AI_DRAG_OUT
-	aoi.doTriggerEvent = function(_event, _data) {
+		this.aoi.doTriggerEvent = function (_event, _data)
-		switch(_event)
 		{
-			case EGW_AI_DRAG_OVER:
+			switch (_event) {
-				jQuery(this.node).addClass("ui-state-active");
+				case EGW_AI_DRAG_OVER:
-				break;
+					jQuery(this.node).addClass("ui-state-active");
-			case EGW_AI_DRAG_OUT:
+					break;
-				jQuery(this.node).removeClass("ui-state-active");
+				case EGW_AI_DRAG_OUT:
-				break;
+					jQuery(this.node).removeClass("ui-state-active");
-		}
+					break;
-	};
+			}
+		};
+	}
 
-
+	getAOI()
-	return aoi;
+	{
-};
+		return this.aoi;
+	}
+}

api/js/etemplate/et2_core_widget.js

@@ -180,7 +180,7 @@ var et2_widget = /** @class */ (function (_super) {
     et2_widget.prototype.destroy = function () {
         // Call the destructor of all children
         for (var i = this._children.length - 1; i >= 0; i--) {
-            this._children[i].free();
+            this._children[i].destroy();
         }
         // Remove this element from the parent, if it exists
         if (typeof this._parent != "undefined" && this._parent !== null) {
@@ -189,10 +189,16 @@ var et2_widget = /** @class */ (function (_super) {
         // Free the array managers if they belong to this widget
         for (var key in this._mgrs) {
             if (this._mgrs[key] && this._mgrs[key].owner == this) {
-                this._mgrs[key].free();
+                this._mgrs[key].destroy();
             }
         }
     };
+    et2_widget.prototype.getType = function () {
+        return this._type;
+    };
+    et2_widget.prototype.setType = function (_type) {
+        this._type = _type;
+    };
     /**
      * Creates a copy of this widget. The parameters given are passed to the
      * constructor of the copied object. If the parameters are omitted, _parent

api/js/etemplate/et2_core_widget.ts

@@ -264,7 +264,7 @@ export class et2_widget extends ClassWithAttributes
 	{
 		// Call the destructor of all children
 		for (var i = this._children.length - 1; i >= 0; i--) {
-			this._children[i].free();
+			this._children[i].destroy();
 		}
 
 		// Remove this element from the parent, if it exists
@@ -275,11 +275,21 @@ export class et2_widget extends ClassWithAttributes
 		// Free the array managers if they belong to this widget
 		for (var key in this._mgrs) {
 			if (this._mgrs[key] && this._mgrs[key].owner == this) {
-				this._mgrs[key].free();
+				this._mgrs[key].destroy();
 			}
 		}
 	}
 
+	getType() : string
+	{
+		return this._type;
+	}
+
+	setType(_type : string)
+	{
+		this._type = _type;
+	}
+
 	/**
 	 * Creates a copy of this widget. The parameters given are passed to the
 	 * constructor of the copied object. If the parameters are omitted, _parent

api/js/etemplate/et2_types.d.ts

@@ -4,7 +4,7 @@ declare module eT2
 }
 declare var etemplate2 : any;
 declare class et2_widget{}
-declare class et2_DOMWidget{}
+declare class et2_DOMWidget extends et2_widget{}
 declare class et2_inputWidget{
 	getInputNode() : HTMLElement
 }
@@ -117,7 +117,9 @@ declare var et2_selectbox_ro : any;
 declare var et2_menulist : any;
 declare var et2_split : any;
 declare var et2_styles : any;
-declare var et2_tabbox : any;
+declare class et2_tabbox extends et2_widget {
+	tabData : any;
+}
 declare var et2_taglist : any;
 declare var et2_taglist_account : any;
 declare var et2_taglist_email : any;