From 3b5126488236d68620024689ee3ee7e6841be17a Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Wed, 22 Jan 2020 17:15:43 +0100 Subject: [PATCH] Convert et2_hbox to TS --- api/js/etemplate/et2_widget_hbox.js | 325 +++++++++++------------- api/js/etemplate/et2_widget_hbox.js.map | 1 + api/js/etemplate/et2_widget_hbox.ts | 193 ++++++++++++++ 3 files changed, 348 insertions(+), 171 deletions(-) create mode 100644 api/js/etemplate/et2_widget_hbox.js.map create mode 100644 api/js/etemplate/et2_widget_hbox.ts diff --git a/api/js/etemplate/et2_widget_hbox.js b/api/js/etemplate/et2_widget_hbox.js index f3055b7394..75efef8d58 100644 --- a/api/js/etemplate/et2_widget_hbox.js +++ b/api/js/etemplate/et2_widget_hbox.js @@ -1,3 +1,4 @@ +"use strict"; /** * EGroupware eTemplate2 - JS HBox object * @@ -6,182 +7,164 @@ * @subpackage api * @link http://www.egroupware.org * @author Andreas Stöckel - * @copyright Stylite 2011 - * @version $Id: et2_box.js 36147 2011-08-16 13:12:39Z igel457 $ */ - +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; */ - +var et2_core_inheritance_1 = require("./et2_core_inheritance"); +var et2_core_widget_1 = require("./et2_core_widget"); +var et2_core_baseWidget_1 = require("./et2_core_baseWidget"); /** * Class which implements hbox tag * * @augments et2_baseWidget */ -var et2_hbox = (function(){ "use strict"; return et2_baseWidget.extend( -{ - createNamespace: true, - - /** - * Constructor - * - * @memberOf et2_hbox - */ - init: function() { - this._super.apply(this, arguments); - - this.alignData = { - "hasAlign": false, - "hasLeft": false, - "hasCenter": false, - "hasRight": false, - "lastAlign": "left" - }; - - this.leftDiv = null; - this.rightDiv = null; - - this.div = jQuery(document.createElement("div")) - .addClass("et2_" + this._type) - .addClass("et2_box_widget"); - - this.setDOMNode(this.div[0]); - }, - - _buildAlignCells: function() { - if (this.alignData.hasAlign) - { - // Check whether we have more than one type of align - var mto = (this.alignData.hasLeft && this.alignData.hasRight) || - (this.alignData.hasLeft && this.alignData.hasCenter) || - (this.alignData.hasCenter && this.alignData.hasRight); - - if (!mto) - { - // If there is only one type of align, we simply have to set - // the align of the top container - if (this.alignData.lastAlign != "left") - { - this.div.addClass("et2_hbox_al_" + this.alignData.lastAlign); - } - } - else - { - // Create an additional container for elements with align type - // "right" - if (this.alignData.hasRight) - { - this.rightDiv = jQuery(document.createElement("div")) - .addClass("et2_hbox_right") - .appendTo(this.div); - } - - // Create an additional container for elements with align type - // left, as the top container is used for the centered elements - if (this.alignData.hasCenter) - { - // Create the left div if an element is centered - this.leftDiv = jQuery(document.createElement("div")) - .addClass("et2_hbox_left") - .appendTo(this.div); - - this.div.addClass("et2_hbox_al_center"); - } - } - } - }, - - /** - * The overwritten loadFromXML function checks whether any child element has - * a special align value. - * - * @param {object} _node - */ - loadFromXML: function(_node) { - // Check whether any child node has an alignment tag - et2_filteredNodeIterator(_node, function(_node) { - var align = _node.getAttribute("align"); - - if (!align) - { - align = "left"; - } - - if (align != "left") - { - this.alignData.hasAlign = true; - } - - this.alignData.lastAlign = align; - - switch (align) - { - case "left": - this.alignData.hasLeft = true; - break; - case "right": - this.alignData.hasRight = true; - break; - case "center": - this.alignData.hasCenter = true; - break; - } - }, this); - - // Build the align cells - this._buildAlignCells(); - - // Load the nodes as usual - this._super.apply(this, arguments); - }, - - assign: function(_obj) { - // Copy the align data and the cells from the object which should be - // assigned - this.alignData = et2_cloneObject(_obj.alignData); - this._buildAlignCells(); - - // Call the inherited assign function - this._super.apply(this, arguments); - }, - - getDOMNode: function(_sender) { - // Return a special align container if this hbox needs it - if (_sender != this && this.alignData.hasAlign) - { - // Check whether we've create a special container for the widget - var align = (_sender.implements(et2_IAligned) ? - _sender.get_align() : "left"); - - if (align == "left" && this.leftDiv != null) - { - return this.leftDiv[0]; - } - - if (align == "right" && this.rightDiv != null) - { - return this.rightDiv[0]; - } - } - - // Normally simply return the hbox-div - return this._super.apply(this, arguments); - }, - - /** - * Tables added to the root node need to be inline instead of blocks - * - * @param {et2_widget} child child-widget to add - */ - addChild: function(child) { - this._super.apply(this, arguments); - if(child.instanceOf && child.instanceOf(et2_grid) || child._type == 'et2_grid') - { - jQuery(child.getDOMNode(child)).css("display", "inline-table"); - } - } -});}).call(this); -et2_register_widget(et2_hbox, ["hbox"]); - +var et2_hbox = /** @class */ (function (_super) { + __extends(et2_hbox, _super); + /** + * Constructor + * + * @memberOf et2_hbox + */ + function et2_hbox(_parent, _attrs, _child) { + var _this = _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_core_baseWidget_1.et2_baseWidget._attributes, _child || {})) || this; + _this.createNamespace = true; + _this.alignData = { + "hasAlign": false, + "hasLeft": false, + "hasCenter": false, + "hasRight": false, + "lastAlign": "left" + }; + _this.leftDiv = null; + _this.rightDiv = null; + _this.div = null; + _this.leftDiv = null; + _this.rightDiv = null; + _this.div = jQuery(document.createElement("div")) + .addClass("et2_" + _super.prototype.getType.call(_this)) + .addClass("et2_box_widget"); + _super.prototype.setDOMNode.call(_this, _this.div[0]); + return _this; + } + et2_hbox.prototype._buildAlignCells = function () { + if (this.alignData.hasAlign) { + // Check whether we have more than one type of align + var mto = (this.alignData.hasLeft && this.alignData.hasRight) || + (this.alignData.hasLeft && this.alignData.hasCenter) || + (this.alignData.hasCenter && this.alignData.hasRight); + if (!mto) { + // If there is only one type of align, we simply have to set + // the align of the top container + if (this.alignData.lastAlign != "left") { + this.div.addClass("et2_hbox_al_" + this.alignData.lastAlign); + } + } + else { + // Create an additional container for elements with align type + // "right" + if (this.alignData.hasRight) { + this.rightDiv = jQuery(document.createElement("div")) + .addClass("et2_hbox_right") + .appendTo(this.div); + } + // Create an additional container for elements with align type + // left, as the top container is used for the centered elements + if (this.alignData.hasCenter) { + // Create the left div if an element is centered + this.leftDiv = jQuery(document.createElement("div")) + .addClass("et2_hbox_left") + .appendTo(this.div); + this.div.addClass("et2_hbox_al_center"); + } + } + } + }; + /** + * The overwritten loadFromXML function checks whether any child element has + * a special align value. + * + * @param {object} _node + */ + et2_hbox.prototype.loadFromXML = function (_node) { + // Check whether any child node has an alignment tag + et2_filteredNodeIterator(_node, function (_node) { + var align = _node.getAttribute("align"); + if (!align) { + align = "left"; + } + if (align != "left") { + this.alignData.hasAlign = true; + } + this.alignData.lastAlign = align; + switch (align) { + case "left": + this.alignData.hasLeft = true; + break; + case "right": + this.alignData.hasRight = true; + break; + case "center": + this.alignData.hasCenter = true; + break; + } + }, this); + // Build the align cells + this._buildAlignCells(); + // Load the nodes as usual + _super.prototype.loadFromXML.call(this, _node); + }; + et2_hbox.prototype.assign = function (_obj) { + // Copy the align data and the cells from the object which should be + // assigned + this.alignData = et2_cloneObject(_obj.alignData); + this._buildAlignCells(); + // Call the inherited assign function + _super.prototype.assign.call(this, _obj); + }; + et2_hbox.prototype.getDOMNode = function (_sender) { + // Return a special align container if this hbox needs it + if (_sender != this && this.alignData.hasAlign) { + // Check whether we've create a special container for the widget + var align = (_sender.implements(et2_IAligned) ? + _sender.get_align() : "left"); + if (align == "left" && this.leftDiv != null) { + return this.leftDiv[0]; + } + if (align == "right" && this.rightDiv != null) { + return this.rightDiv[0]; + } + } + // Normally simply return the hbox-div + return _super.prototype.getDOMNode.call(this, _sender); + }; + /** + * Tables added to the root node need to be inline instead of blocks + * + * @param {et2_widget} child child-widget to add + */ + et2_hbox.prototype.addChild = function (child) { + _super.prototype.addChild.call(this, child); + if (child.instanceOf && child.instanceOf(et2_grid) || child._type == 'et2_grid') { + jQuery(child.getDOMNode(child)).css("display", "inline-table"); + } + }; + return et2_hbox; +}(et2_core_baseWidget_1.et2_baseWidget)); +et2_core_widget_1.et2_register_widget(et2_hbox, ["hbox"]); +//# sourceMappingURL=et2_widget_hbox.js.map \ No newline at end of file diff --git a/api/js/etemplate/et2_widget_hbox.js.map b/api/js/etemplate/et2_widget_hbox.js.map new file mode 100644 index 0000000000..a199ebbdc3 --- /dev/null +++ b/api/js/etemplate/et2_widget_hbox.js.map @@ -0,0 +1 @@ +{"version":3,"file":"et2_widget_hbox.js","sourceRoot":"","sources":["et2_widget_hbox.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;;;;;;;;;;;;;AAEH;;;EAGE;AAEF,+DAA2D;AAC3D,qDAAoE;AACpE,6DAAqD;AAErD;;;;GAIG;AACH;IAAuB,4BAAc;IAcpC;;;;OAIG;IACH,kBAAY,OAAQ,EAAE,MAAsB,EAAE,MAAgB;QAA9D,YAEC,kBAAM,OAAO,EAAE,MAAM,EAAE,0CAAmB,CAAC,gBAAgB,CAAC,oCAAc,CAAC,WAAW,EAAE,MAAM,IAAI,EAAE,CAAC,CAAC,SAUtG;QA7BD,qBAAe,GAAY,IAAI,CAAC;QAChC,eAAS,GAAS;YACjB,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,WAAW,EAAE,MAAM;SACnB,CAAC;QACF,aAAO,GAAY,IAAI,CAAC;QACxB,cAAQ,GAAY,IAAI,CAAC;QACzB,SAAG,GAAY,IAAI,CAAC;QAWnB,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,KAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QAErB,KAAI,CAAC,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;aAC9C,QAAQ,CAAC,MAAM,GAAG,iBAAM,OAAO,YAAE,CAAC;aAClC,QAAQ,CAAC,gBAAgB,CAAC,CAAC;QAE7B,iBAAM,UAAU,aAAC,KAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;;IAC/B,CAAC;IAED,mCAAgB,GAAhB;QACC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,EAC3B;YACC,oDAAoD;YACpD,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;gBAC5D,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;gBACpD,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEvD,IAAI,CAAC,GAAG,EACR;gBACC,4DAA4D;gBAC5D,iCAAiC;gBACjC,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,IAAI,MAAM,EACtC;oBACC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;iBAC7D;aACD;iBAED;gBACC,8DAA8D;gBAC9D,UAAU;gBACV,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,EAC3B;oBACC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;yBACnD,QAAQ,CAAC,gBAAgB,CAAC;yBAC1B,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;iBACrB;gBAED,8DAA8D;gBAC9D,+DAA+D;gBAC/D,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,EAC5B;oBACC,gDAAgD;oBAChD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;yBAClD,QAAQ,CAAC,eAAe,CAAC;yBACzB,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAErB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;iBACxC;aACD;SACD;IACF,CAAC;IAED;;;;;OAKG;IACH,8BAAW,GAAX,UAAY,KAAK;QAChB,oDAAoD;QACpD,wBAAwB,CAAC,KAAK,EAAE,UAAS,KAAK;YAC7C,IAAI,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAExC,IAAI,CAAC,KAAK,EACV;gBACC,KAAK,GAAG,MAAM,CAAC;aACf;YAED,IAAI,KAAK,IAAI,MAAM,EACnB;gBACC,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;aAC/B;YAED,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,KAAK,CAAC;YAEjC,QAAQ,KAAK,EACb;gBACC,KAAK,MAAM;oBACV,IAAI,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC9B,MAAM;gBACP,KAAK,OAAO;oBACX,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;oBAC/B,MAAM;gBACP,KAAK,QAAQ;oBACZ,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;oBAChC,MAAM;aACP;QACF,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,wBAAwB;QACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,0BAA0B;QAC1B,iBAAM,WAAW,YAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;IAED,yBAAM,GAAN,UAAO,IAAI;QACV,oEAAoE;QACpE,WAAW;QACX,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,qCAAqC;QACrC,iBAAM,MAAM,YAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAED,6BAAU,GAAV,UAAW,OAAO;QACjB,yDAAyD;QACzD,IAAI,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,EAC9C;YACC,gEAAgE;YAChE,IAAI,KAAK,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC;gBAC9C,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAE/B,IAAI,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,EAC3C;gBACC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;aACvB;YAED,IAAI,KAAK,IAAI,OAAO,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,EAC7C;gBACC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;aACxB;SACD;QAED,sCAAsC;QACtC,OAAO,iBAAM,UAAU,YAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED;;;;OAIG;IACH,2BAAQ,GAAR,UAAS,KAAK;QACb,iBAAM,QAAQ,YAAC,KAAK,CAAC,CAAC;QACtB,IAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,KAAK,IAAI,UAAU,EAC9E;YACC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;SAC/D;IACF,CAAC;IACF,eAAC;AAAD,CAAC,AArKD,CAAuB,oCAAc,GAqKpC;AACD,qCAAmB,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC"} \ No newline at end of file diff --git a/api/js/etemplate/et2_widget_hbox.ts b/api/js/etemplate/et2_widget_hbox.ts new file mode 100644 index 0000000000..f23cbb1fce --- /dev/null +++ b/api/js/etemplate/et2_widget_hbox.ts @@ -0,0 +1,193 @@ +/** + * EGroupware eTemplate2 - JS HBox object + * + * @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 + */ + +/*egw:uses + /vendor/bower-asset/jquery/dist/jquery.js; + et2_core_baseWidget; +*/ + +import {ClassWithAttributes} from "./et2_core_inheritance"; +import {et2_register_widget, WidgetConfig} from "./et2_core_widget"; +import {et2_baseWidget} from "./et2_core_baseWidget"; + +/** + * Class which implements hbox tag + * + * @augments et2_baseWidget + */ +class et2_hbox extends et2_baseWidget +{ + createNamespace: boolean = true; + alignData : any = { + "hasAlign": false, + "hasLeft": false, + "hasCenter": false, + "hasRight": false, + "lastAlign": "left" + }; + leftDiv : JQuery = null; + rightDiv : JQuery = null; + div : JQuery = null; + + /** + * Constructor + * + * @memberOf et2_hbox + */ + constructor(_parent?, _attrs? : WidgetConfig, _child? : object) + { + super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_baseWidget._attributes, _child || {})); + + this.leftDiv = null; + this.rightDiv = null; + + this.div = jQuery(document.createElement("div")) + .addClass("et2_" + super.getType()) + .addClass("et2_box_widget"); + + super.setDOMNode(this.div[0]); + } + + _buildAlignCells() { + if (this.alignData.hasAlign) + { + // Check whether we have more than one type of align + let mto = (this.alignData.hasLeft && this.alignData.hasRight) || + (this.alignData.hasLeft && this.alignData.hasCenter) || + (this.alignData.hasCenter && this.alignData.hasRight); + + if (!mto) + { + // If there is only one type of align, we simply have to set + // the align of the top container + if (this.alignData.lastAlign != "left") + { + this.div.addClass("et2_hbox_al_" + this.alignData.lastAlign); + } + } + else + { + // Create an additional container for elements with align type + // "right" + if (this.alignData.hasRight) + { + this.rightDiv = jQuery(document.createElement("div")) + .addClass("et2_hbox_right") + .appendTo(this.div); + } + + // Create an additional container for elements with align type + // left, as the top container is used for the centered elements + if (this.alignData.hasCenter) + { + // Create the left div if an element is centered + this.leftDiv = jQuery(document.createElement("div")) + .addClass("et2_hbox_left") + .appendTo(this.div); + + this.div.addClass("et2_hbox_al_center"); + } + } + } + } + + /** + * The overwritten loadFromXML function checks whether any child element has + * a special align value. + * + * @param {object} _node + */ + loadFromXML(_node) { + // Check whether any child node has an alignment tag + et2_filteredNodeIterator(_node, function(_node) { + let align = _node.getAttribute("align"); + + if (!align) + { + align = "left"; + } + + if (align != "left") + { + this.alignData.hasAlign = true; + } + + this.alignData.lastAlign = align; + + switch (align) + { + case "left": + this.alignData.hasLeft = true; + break; + case "right": + this.alignData.hasRight = true; + break; + case "center": + this.alignData.hasCenter = true; + break; + } + }, this); + + // Build the align cells + this._buildAlignCells(); + + // Load the nodes as usual + super.loadFromXML(_node); + } + + assign(_obj) { + // Copy the align data and the cells from the object which should be + // assigned + this.alignData = et2_cloneObject(_obj.alignData); + this._buildAlignCells(); + + // Call the inherited assign function + super.assign(_obj); + } + + getDOMNode(_sender) { + // Return a special align container if this hbox needs it + if (_sender != this && this.alignData.hasAlign) + { + // Check whether we've create a special container for the widget + let align = (_sender.implements(et2_IAligned) ? + _sender.get_align() : "left"); + + if (align == "left" && this.leftDiv != null) + { + return this.leftDiv[0]; + } + + if (align == "right" && this.rightDiv != null) + { + return this.rightDiv[0]; + } + } + + // Normally simply return the hbox-div + return super.getDOMNode(_sender); + } + + /** + * Tables added to the root node need to be inline instead of blocks + * + * @param {et2_widget} child child-widget to add + */ + addChild(child) { + super.addChild(child); + if(child.instanceOf && child.instanceOf(et2_grid) || child._type == 'et2_grid') + { + jQuery(child.getDOMNode(child)).css("display", "inline-table"); + } + } +} +et2_register_widget(et2_hbox, ["hbox"]); + +