From 1d69d52d32a7ecc6b424b22570cffd79e17914f5 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Thu, 6 Feb 2020 16:47:08 +0100 Subject: [PATCH] Convert et2_widget_html to TS --- api/js/etemplate/et2_types.d.ts | 1 + api/js/etemplate/et2_widget_html.js | 203 ++++++++++++++-------------- api/js/etemplate/et2_widget_html.ts | 124 +++++++++++++++++ 3 files changed, 227 insertions(+), 101 deletions(-) create mode 100644 api/js/etemplate/et2_widget_html.ts diff --git a/api/js/etemplate/et2_types.d.ts b/api/js/etemplate/et2_types.d.ts index c679c7f3cd..f2b4f913b9 100644 --- a/api/js/etemplate/et2_types.d.ts +++ b/api/js/etemplate/et2_types.d.ts @@ -191,3 +191,4 @@ declare function nm_open_popup(_action, _selected) : void; declare function nm_submit_popup(button) : void; declare function nm_hide_popup(element, div_id) : false; declare function nm_activate_link(_action, _senders) : void; +declare function egw_seperateJavaScript(_html) : void; \ No newline at end of file diff --git a/api/js/etemplate/et2_widget_html.js b/api/js/etemplate/et2_widget_html.js index 381ef43f2b..0d3f8a0fb9 100644 --- a/api/js/etemplate/et2_widget_html.js +++ b/api/js/etemplate/et2_widget_html.js @@ -1,3 +1,4 @@ +"use strict"; /** * EGroupware eTemplate2 - JS widget class containing raw HTML * @@ -6,110 +7,110 @@ * @subpackage api * @link http://www.egroupware.org * @author Andreas Stöckel - * @copyright Stylite 2011 - * @version $Id$ */ - +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 - jsapi.jsapi; // Needed for egw_seperateJavaScript - /vendor/bower-asset/jquery/dist/jquery.js; - et2_core_baseWidget; + jsapi.jsapi; // Needed for egw_seperateJavaScript + /vendor/bower-asset/jquery/dist/jquery.js; + et2_core_baseWidget; */ - +var et2_core_valueWidget_1 = require("./et2_core_valueWidget"); +var et2_core_widget_1 = require("./et2_core_widget"); +var et2_core_inheritance_1 = require("./et2_core_inheritance"); /** * @augments et2_valueWidget */ -var et2_html = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM], -{ - attributes: { - 'label': { - 'default': "", - description: "The label is displayed by default in front (for radiobuttons behind) each widget (if not empty). If you want to specify a different position, use a '%s' in the label, which gets replaced by the widget itself. Eg. '%s Name' to have the label Name behind a checkbox. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables).", - ignore: false, - name: "Label", - translate: true, - type: "string" - }, - "needed": { - "ignore": true - }, - value: { - name: "Value", - description: "The value of the widget", - type: "html", // "string" would remove html tags by running html_entity_decode - default: et2_no_init - } - }, - - /** - * Constructor - * - * @memberOf et2_html - */ - init: function() { - this._super.apply(this, arguments); - - // Allow no child widgets - this.supportedWidgetClasses = []; - - this.htmlNode = jQuery(document.createElement("span")); - if(this._type == 'htmlarea') - { - this.htmlNode.addClass('et2_textbox_ro'); - } - if(this.options.label) - { - this.htmlNode.append(''+this.options.label+''); - } - this.setDOMNode(this.htmlNode[0]); - }, - - loadContent: function(_data) { - // Create an object containg the given value and an empty js string - var html = {html: _data ? _data : '', js: ''}; - - // Seperate the javascript from the given html. The js code will be - // written to the previously created empty js string - egw_seperateJavaScript(html); - - // Append the html to the parent element - if(this.options.label) - { - this.htmlNode.append(''+this.options.label+''); - } - this.htmlNode.append(html.html); - this.htmlNode.append(html.js); - }, - - set_value: function(_value) { - this.htmlNode.empty(); - this.loadContent(_value); - }, - - /** - * Code for implementing et2_IDetachedDOM - * - * @param {array} _attrs - */ - getDetachedAttributes: function(_attrs) - { - _attrs.push("value", "class"); - }, - - getDetachedNodes: function() - { - return [this.htmlNode[0]]; - }, - - setDetachedAttributes: function(_nodes, _values) - { - this.htmlNode = jQuery(_nodes[0]); - if(typeof _values['value'] !== 'undefined') - { - this.set_value(_values['value']); - } - } - -});}).call(this); -et2_register_widget(et2_html, ["html","htmlarea_ro"]); - +var et2_html = /** @class */ (function (_super) { + __extends(et2_html, _super); + /** + * Constructor + * + * @memberOf et2_html + */ + function et2_html(_parent, _attrs, _child) { + var _this = + // Call the inherited constructor + _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_html._attributes, _child || {})) || this; + _this.htmlNode = null; + // Allow no child widgets + _this.supportedWidgetClasses = []; + _this.htmlNode = jQuery(document.createElement("span")); + if (_this.getType() == 'htmlarea') { + _this.htmlNode.addClass('et2_textbox_ro'); + } + if (_this.options.label) { + _this.htmlNode.append('' + _this.options.label + ''); + } + _this.setDOMNode(_this.htmlNode[0]); + return _this; + } + et2_html.prototype.loadContent = function (_data) { + // Create an object containg the given value and an empty js string + var html = { html: _data ? _data : '', js: '' }; + // Seperate the javascript from the given html. The js code will be + // written to the previously created empty js string + egw_seperateJavaScript(html); + // Append the html to the parent element + if (this.options.label) { + this.htmlNode.append('' + this.options.label + ''); + } + this.htmlNode.append(html.html); + this.htmlNode.append(html.js); + }; + et2_html.prototype.set_value = function (_value) { + this.htmlNode.empty(); + this.loadContent(_value); + }; + /** + * Code for implementing et2_IDetachedDOM + * + * @param {array} _attrs + */ + et2_html.prototype.getDetachedAttributes = function (_attrs) { + _attrs.push("value", "class"); + }; + et2_html.prototype.getDetachedNodes = function () { + return [this.htmlNode[0]]; + }; + et2_html.prototype.setDetachedAttributes = function (_nodes, _values) { + this.htmlNode = jQuery(_nodes[0]); + if (typeof _values['value'] !== 'undefined') { + this.set_value(_values['value']); + } + }; + et2_html._attributes = { + 'label': { + 'default': "", + description: "The label is displayed by default in front (for radiobuttons behind) each widget (if not empty). If you want to specify a different position, use a '%s' in the label, which gets replaced by the widget itself. Eg. '%s Name' to have the label Name behind a checkbox. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables).", + ignore: false, + name: "Label", + translate: true, + type: "string" + }, + "needed": { + "ignore": true + }, + value: { + name: "Value", + description: "The value of the widget", + type: "html", + default: et2_no_init + } + }; + return et2_html; +}(et2_core_valueWidget_1.et2_valueWidget)); +et2_core_widget_1.et2_register_widget(et2_html, ["html", "htmlarea_ro"]); +//# sourceMappingURL=et2_widget_html.js.map \ No newline at end of file diff --git a/api/js/etemplate/et2_widget_html.ts b/api/js/etemplate/et2_widget_html.ts new file mode 100644 index 0000000000..7f8f58c974 --- /dev/null +++ b/api/js/etemplate/et2_widget_html.ts @@ -0,0 +1,124 @@ +/** + * EGroupware eTemplate2 - JS widget class containing raw HTML + * + * @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 + jsapi.jsapi; // Needed for egw_seperateJavaScript + /vendor/bower-asset/jquery/dist/jquery.js; + et2_core_baseWidget; +*/ + +import {et2_valueWidget} from "./et2_core_valueWidget"; +import {WidgetConfig, et2_register_widget} from "./et2_core_widget"; +import {ClassWithAttributes} from "./et2_core_inheritance"; + +/** + * @augments et2_valueWidget + */ +class et2_html extends et2_valueWidget implements et2_IDetachedDOM +{ + static readonly _attributes : any = { + 'label': { + 'default': "", + description: "The label is displayed by default in front (for radiobuttons behind) each widget (if not empty). If you want to specify a different position, use a '%s' in the label, which gets replaced by the widget itself. Eg. '%s Name' to have the label Name behind a checkbox. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables).", + ignore: false, + name: "Label", + translate: true, + type: "string" + }, + "needed": { + "ignore": true + }, + value: { + name: "Value", + description: "The value of the widget", + type: "html", // "string" would remove html tags by running html_entity_decode + default: et2_no_init + } + }; + + htmlNode : JQuery = null; + + /** + * Constructor + * + * @memberOf et2_html + */ + constructor(_parent, _attrs? : WidgetConfig, _child? : object) + { + // Call the inherited constructor + super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_html._attributes, _child || {})); + + // Allow no child widgets + this.supportedWidgetClasses = []; + + this.htmlNode = jQuery(document.createElement("span")); + if(this.getType() == 'htmlarea') + { + this.htmlNode.addClass('et2_textbox_ro'); + } + if(this.options.label) + { + this.htmlNode.append(''+this.options.label+''); + } + this.setDOMNode(this.htmlNode[0]); + } + + loadContent(_data) + { + // Create an object containg the given value and an empty js string + let html = {html: _data ? _data : '', js: ''}; + + // Seperate the javascript from the given html. The js code will be + // written to the previously created empty js string + egw_seperateJavaScript(html); + + // Append the html to the parent element + if(this.options.label) + { + this.htmlNode.append(''+this.options.label+''); + } + this.htmlNode.append(html.html); + this.htmlNode.append(html.js); + } + + set_value(_value) + { + this.htmlNode.empty(); + this.loadContent(_value); + } + + /** + * Code for implementing et2_IDetachedDOM + * + * @param {array} _attrs + */ + getDetachedAttributes(_attrs) + { + _attrs.push("value", "class"); + } + + getDetachedNodes() + { + return [this.htmlNode[0]]; + } + + setDetachedAttributes(_nodes, _values) + { + this.htmlNode = jQuery(_nodes[0]); + if(typeof _values['value'] !== 'undefined') + { + this.set_value(_values['value']); + } + } + +} +et2_register_widget(et2_html, ["html","htmlarea_ro"]); + +