Convert style widget

api/js/etemplate/et2_widget_styles.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
  * EGroupware eTemplate2 - JS widget class containing styles
  *
@@ -9,11 +10,25 @@
  * @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
     et2_core_widget;
 */
-
+var et2_core_widget_1 = require("./et2_core_widget");
+var et2_core_inheritance_1 = require("./et2_core_inheritance");
 /**
  * Function which appends the encapsulated style data to the head tag of the
  * page.
@@ -24,46 +39,42 @@
  *
  * @augments et2_widget
  */
-var et2_styles = (function(){ "use strict"; return et2_widget.extend(
+var et2_styles = /** @class */ (function (_super) {
-{
+    __extends(et2_styles, _super);
     /**
      * Constructor
      *
      * @memberOf et2_styles
      */
-	init: function() {
+    function et2_styles(_parent, _attrs, _child) {
-		this._super.apply(this, arguments);
+        var _this = 
-
+        // Call the inherited constructor
+        _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_styles._attributes, _child || {})) || this;
         // Allow no child widgets
-		this.supportedWidgetClasses = [];
+        _this.supportedWidgetClasses = [];
-
         // Create the style node and append it to the head node
-		this.styleNode = document.createElement("style");
+        _this.styleNode = document.createElement("style");
-		this.styleNode.setAttribute("type", "text/css");
+        _this.styleNode.setAttribute("type", "text/css");
-
+        _this.head = _this.egw().window.document.getElementsByTagName("head")[0];
-		this.head = this.egw().window.document.getElementsByTagName("head")[0];
+        _this.head.appendChild(_this.styleNode);
-		this.head.appendChild(this.styleNode);
+        return _this;
-	},
+    }
-
+    et2_styles.prototype.destroy = function () {
-	destroy: function() {
         // Remove the style node again and delete any reference to it
         this.head.removeChild(this.styleNode);
-
+        _super.prototype.destroy.call(this);
-		this._super.apply(this, arguments);
+    };
-	},
+    et2_styles.prototype.loadContent = function (_content) {
-
+        // @ts-ignore
-	loadContent: function(_content) {
+        if (this.styleNode.styleSheet) {
-		if (this.styleNode.styleSheet)
-		{
             // IE
+            // @ts-ignore
             this.styleNode.styleSheet.cssText += _content;
         }
-		else
+        else {
-		{
             this.styleNode.appendChild(document.createTextNode(_content));
         }
-	},
+    };
-
     /**
      * Sets the id of the DOM-Node.
      *
@@ -71,23 +82,20 @@ var et2_styles = (function(){ "use strict"; return et2_widget.extend(
      *
      * @param {string} _value id to set
      */
-	set_id: function(_value) {
+    et2_styles.prototype.set_id = function (_value) {
-
         this.id = _value;
-		this.dom_id = _value ? this.getInstanceManager().uniqueId+'_'+_value.replace(/\./g, '-') : _value;
+        this.dom_id = _value ? this.getInstanceManager().uniqueId + '_' + _value.replace(/\./g, '-') : _value;
-
+        if (this.styleNode) {
-		if (this.styleNode)
+            if (_value != "") {
-		{
-			if (_value != "")
-			{
                 this.styleNode.setAttribute("id", this.dom_id);
             }
-			else
+            else {
-			{
                 this.styleNode.removeAttribute("id");
             }
         }
-	}
+    };
-});}).call(this);
+    return et2_styles;
-et2_register_widget(et2_styles, ["styles"]);
+}(et2_core_widget_1.et2_widget));
-
+exports.et2_styles = et2_styles;
+et2_core_widget_1.et2_register_widget(et2_styles, ["styles"]);
+//# sourceMappingURL=et2_widget_styles.js.map

api/js/etemplate/et2_widget_styles.ts

@@ -0,0 +1,106 @@
+/**
+ * EGroupware eTemplate2 - JS widget class containing styles
+ *
+ * @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
+ * @copyright Stylite 2011
+ * @version $Id$
+ */
+
+/*egw:uses
+	et2_core_widget;
+*/
+
+import {et2_register_widget, et2_widget, WidgetConfig} from "./et2_core_widget";
+import {ClassWithAttributes} from "./et2_core_inheritance";
+
+/**
+ * Function which appends the encapsulated style data to the head tag of the
+ * page.
+ *
+ * TODO: The style data could be parsed for rules and appended using the JS
+ * stylesheet interface, allowing the style only to modifiy nodes of the current
+ * template.
+ *
+ * @augments et2_widget
+ */
+export class et2_styles extends et2_widget
+{
+	private styleNode: HTMLStyleElement;
+	private head: HTMLHeadElement;
+	private dom_id: string;
+	/**
+	 * Constructor
+	 *
+	 * @memberOf et2_styles
+	 */
+	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
+	{
+		// Call the inherited constructor
+		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_styles._attributes, _child || {}));
+
+		// Allow no child widgets
+		this.supportedWidgetClasses = [];
+
+		// Create the style node and append it to the head node
+		this.styleNode = document.createElement("style");
+		this.styleNode.setAttribute("type", "text/css");
+
+		this.head = this.egw().window.document.getElementsByTagName("head")[0];
+		this.head.appendChild(this.styleNode);
+	}
+
+	destroy( )
+	{
+		// Remove the style node again and delete any reference to it
+		this.head.removeChild(this.styleNode);
+
+		super.destroy();
+	}
+
+	loadContent( _content)
+	{
+		// @ts-ignore
+		if (this.styleNode.styleSheet)
+		{
+			// IE
+			// @ts-ignore
+			this.styleNode.styleSheet.cssText += _content;
+		}
+		else
+		{
+			this.styleNode.appendChild(document.createTextNode(_content));
+		}
+	}
+
+	/**
+	 * Sets the id of the DOM-Node.
+	 *
+	 * DOM id's have dots "." replaced with dashes "-"
+	 *
+	 * @param {string} _value id to set
+	 */
+	set_id( _value)
+	{
+
+		this.id = _value;
+		this.dom_id = _value ? this.getInstanceManager().uniqueId+'_'+_value.replace(/\./g, '-') : _value;
+
+		if (this.styleNode)
+		{
+			if (_value != "")
+			{
+				this.styleNode.setAttribute("id", this.dom_id);
+			}
+			else
+			{
+				this.styleNode.removeAttribute("id");
+			}
+		}
+	}
+}
+et2_register_widget(et2_styles, ["styles"]);
+