Convert et2_widget_progress to TS

2025-08-12 09:39:11 +02:00 · 2020-02-10 15:00:48 +01:00
parent c19ea5a8ec
commit e0ec34493b
2 changed files with 348 additions and 167 deletions
--- a/api/js/etemplate/et2_widget_progress.ts
+++ b/api/js/etemplate/et2_widget_progress.ts
@ -0,0 +1,193 @@
+/**
+ * EGroupware eTemplate2 - JS Progrss object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Ralf Becker
+ */
+
+/*egw:uses
+	/vendor/bower-asset/jquery/dist/jquery.js;
+	et2_core_interfaces;
+	et2_core_valueWidget;
+*/
+
+import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
+import {et2_valueWidget} from "./et2_core_valueWidget";
+import {ClassWithAttributes} from "./et2_core_inheritance";
+
+/**
+ * Class which implements the "progress" XET-Tag
+ *
+ * @augments et2_valueWidget
+ */
+class et2_progress extends et2_valueWidget implements et2_IDetachedDOM
+{
+	static readonly _attributes : any = {
+		"href": {
+			"name": "Link Target",
+			"type": "string",
+			"description": "Link URL, empty if you don't wan't to display a link."
+		},
+		"extra_link_target": {
+			"name": "Link target",
+			"type": "string",
+			"default": "_self",
+			"description": "Link target descriptor"
+		},
+		"extra_link_popup": {
+			"name": "Popup",
+			"type": "string",
+			"description": "widthxheight, if popup should be used, eg. 640x480"
+		},
+		"label": {
+			"name": "Label",
+			"default": "",
+			"type": "string",
+			"description": "The label is displayed as the title.  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).",
+			"translate": true
+		}
+	};
+
+	legacyOptions : string[] = ["href", "extra_link_target", "imagemap", "extra_link_popup", "id"];
+	private progress : HTMLElement = null;
+
+	/**
+	 * Constructor
+	 *
+	 * @memberOf et2_progress
+	 */
+	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
+	{
+		// Call the inherited constructor
+		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_progress._attributes, _child || {}));
+
+		let outer = document.createElement("div");
+		outer.className = "et2_progress";
+		this.progress = document.createElement("div");
+		this.progress.style.width = "0";
+		outer.appendChild(this.progress);
+
+		if (this.options.href)
+		{
+			outer.className += ' et2_clickable';
+		}
+		if(this.options["class"])
+		{
+			outer.className += ' '+this.options["class"];
+		}
+		this.setDOMNode(outer);	// set's this.node = outer
+	}
+
+	click(e)
+	{
+		super.click(e);
+
+		if(this.options.href)
+		{
+			this.egw().open_link(this.options.href, this.options.extra_link_target, this.options.extra_link_popup);
+		}
+	}
+
+	// setting the value as width of the progress-bar
+	set_value(_value)
+	{
+		_value = parseInt(_value)+"%";	// make sure we have percent attached
+		this.progress.style.width = _value;
+		if (!this.options.label) this.set_label(_value);
+	}
+
+	// set's label as title of this.node
+	set_label(_value)
+	{
+		this.node.title = _value;
+	}
+
+	// set's class of this.node; preserve baseclasses et2_progress and if this.options.href is set et2_clickable
+	set_class(_value)
+	{
+		let baseClass = "et2_progress";
+		if (this.options.href)
+		{
+			baseClass += ' et2_clickable';
+		}
+		this.node.setAttribute('class', baseClass + ' ' + _value);
+	}
+
+	set_href(_value)
+	{
+		if (!this.isInTree())
+		{
+			return false;
+		}
+
+		this.options.href = _value;
+		if (_value)
+		{
+			jQuery(this.node).addClass('et2_clickable')
+				.wrapAll('<a href="'+_value+'"></a>"');
+
+			let href = this.options.href;
+			let popup = this.options.extra_link_popup;
+			let target = this.options.extra_link_target;
+			jQuery(this.node).parent().click(function(e)
+			{
+				egw.open_link(href,target,popup);
+				e.preventDefault();
+				return false;
+			});
+		}
+		else if (jQuery(this.node).parent('a').length)
+		{
+			jQuery(this.node).removeClass('et2_clickable')
+				.unwrap();
+		}
+
+		return true;
+	}
+
+	/**
+	 * Implementation of "et2_IDetachedDOM" for fast viewing in gridview
+	 *
+	 * * @param {array} _attrs array to add further attributes to
+	 */
+	getDetachedAttributes(_attrs)
+	{
+		_attrs.push("value", "label", "href");
+	}
+
+	getDetachedNodes()
+	{
+		return [this.node, this.progress];
+	}
+
+	setDetachedAttributes(_nodes, _values)
+	{
+		// Set the given DOM-Nodes
+		this.node = _nodes[0];
+		this.progress = _nodes[1];
+
+		// Set the attributes
+		if (_values["label"])
+		{
+			this.set_label(_values["label"]);
+		}
+		if (_values["value"])
+		{
+			this.set_value(_values["value"]);
+		}
+		else if (_values["label"])
+		{
+			this.set_value(_values["label"]);
+		}
+		if(_values["href"])
+		{
+			jQuery(this.node).addClass('et2_clickable');
+			this.set_href(_values["href"]);
+		}
+	}
+}
+et2_register_widget(et2_progress, ["progress"]);
+