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

get et2_DOMWidget to TypeScript

Browse Source
This commit is contained in:
Ralf Becker 2020-01-21 11:47:49 +01:00 committed by Hadi Nategh
parent f2b7ca4c32
commit 659c8b0e68
5 changed files with 198 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
api/js/etemplate/et2_core_DOMWidget.js
View File

@ -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;
}());

168
api/js/etemplate/et2_core_DOMWidget.ts
View File

@ -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((<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() {
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 = <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;
} 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 = <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();
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;
}
}

10
api/js/etemplate/et2_core_widget.js
View File

@ -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

14
api/js/etemplate/et2_core_widget.ts
View File

@ -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

6
api/js/etemplate/et2_types.d.ts vendored
View File

@ -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;