diff --git a/api/js/etemplate/et2_core_DOMWidget.js b/api/js/etemplate/et2_core_DOMWidget.js index 41cb7f5fec..5bd1f816de 100644 --- a/api/js/etemplate/et2_core_DOMWidget.js +++ b/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) { - __extends(et2_DOMWidget, _super_1); +var et2_DOMWidget = /** @class */ (function (_super) { + __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; - } while (parent !== this.getRoot() && parent._type !== 'tabbox'); + parent = parent.getParent(); + } 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) { - return parent.tabData[i]; + // @ts-ignore + 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; - } while (template !== parent && template._type !== 'template'); - for (var i = parent.tabData.length - 1; i >= 0; i--) { - if (template && template.id && template.id === parent.tabData[i].id) { - return parent.tabData[i]; + template = template.getParent(); + // @ts-ignore + } while (template !== tabbox && template.getType() !== 'template'); + for (var i = tabbox.tabData.length - 1; i >= 0; 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) { - __extends(et2_surroundingsMgr, _super_1); - function et2_surroundingsMgr() { - return _super_1 !== null && _super_1.apply(this, arguments) || this; - } +var et2_surroundingsMgr = /** @class */ (function (_super) { + __extends(et2_surroundingsMgr, _super); /** * Constructor * * @memberOf et2_surroundingsMgr * @param _widget */ - et2_surroundingsMgr.prototype.init = function (_widget) { - this.widget = _widget; - this._widgetContainer = null; - this._widgetSurroundings = []; - this._widgetPlaceholder = null; - this._widgetNode = null; - this._ownPlaceholder = true; - }; + function et2_surroundingsMgr(_widget) { + var _this = _super.call(this) || this; + _this._widgetContainer = null; + _this._widgetSurroundings = []; + _this._widgetPlaceholder = null; + _this._widgetNode = null; + _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 aoi = new egwActionObjectInterface(); - var objectNode = node; - aoi.getWidget = function () { - return widget; +var et2_action_object_impl = /** @class */ (function () { + function et2_action_object_impl(_widget, _node) { + var widget = _widget; + var objectNode = _node; + 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 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; -} -; + return et2_action_object_impl; +}()); diff --git a/api/js/etemplate/et2_core_DOMWidget.ts b/api/js/etemplate/et2_core_DOMWidget.ts index 2197a2feff..cbdf69d55d 100644 --- a/api/js/etemplate/et2_core_DOMWidget.ts +++ b/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; - disabled : boolean; - private _attachSet: object; + parentNode : HTMLElement = null; + disabled : boolean = false; + 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((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() { - var parent = this; + get_tab_info() : object | null + { + var parent : et2_widget = this; do { - parent = parent._parent; - } while (parent !== this.getRoot() && parent._type !== 'tabbox'); + parent = parent.getParent(); + } 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 = 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; - } while (template !== parent && template._type !== 'template'); - for(var i = parent.tabData.length - 1; i >= 0; i--) + template = template.getParent(); + // @ts-ignore + } 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 = 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(); - var objectNode = node; + aoi : egwActionObjectInterface; - aoi.getWidget = function() { - return widget; - }; - - aoi.doGetDOMNode = function() { - return objectNode?objectNode:widget.getDOMNode(); - }; + constructor(_widget : et2_DOMWidget, _node? : HTMLElement) + { + var widget = _widget; + var objectNode = _node; + this.aoi = new 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. - 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) { - switch(_event) + this.aoi.doTriggerEvent = function (_event, _data) { - 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; - } - }; + 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; -}; + getAOI() + { + return this.aoi; + } +} diff --git a/api/js/etemplate/et2_core_widget.js b/api/js/etemplate/et2_core_widget.js index 58939b7cc7..d751d68d65 100644 --- a/api/js/etemplate/et2_core_widget.js +++ b/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 diff --git a/api/js/etemplate/et2_core_widget.ts b/api/js/etemplate/et2_core_widget.ts index 3cd04294e2..3127c647b2 100644 --- a/api/js/etemplate/et2_core_widget.ts +++ b/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 diff --git a/api/js/etemplate/et2_types.d.ts b/api/js/etemplate/et2_types.d.ts index f94c8e206a..1b8134c7c8 100644 --- a/api/js/etemplate/et2_types.d.ts +++ b/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;