Diff widget

api/js/etemplate/et2_widget_diff.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
  * EGroupware eTemplate2 - JS Diff object
  *
@@ -9,71 +10,70 @@
  * @copyright Nathan Gray 2012
  * @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
     /vendor/bower-asset/jquery/dist/jquery.js;
     /vendor/bower-asset/jquery-ui/jquery-ui.js;
     /vendor/bower-asset/diff2html/dist/diff2html.min.js;
     et2_core_valueWidget;
 */
-
+var et2_core_widget_1 = require("./et2_core_widget");
+var et2_core_inheritance_1 = require("./et2_core_inheritance");
+var et2_core_valueWidget_1 = require("./et2_core_valueWidget");
 /**
  * Class that displays the diff between two [text] values
  *
  * @augments et2_valueWidget
  */
-var et2_diff = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDetachedDOM],
+var et2_diff = /** @class */ (function (_super) {
-{
+    __extends(et2_diff, _super);
-	attributes: {
-		"value": {
-			"type": "any"
-		}
-	},
-
-	diff_options: {
-		"inputFormat":"diff",
-		"matching": "words"
-	},
-
     /**
      * Constructor
-	 *
-	 * @memberOf et2_diff
      */
-	init: function() {
+    function et2_diff(_parent, _attrs, _child) {
-		this._super.apply(this, arguments);
+        var _this = 
-		this.mini = true;
+        // Call the inherited constructor
-
+        _super.call(this, _parent, _attrs, et2_core_inheritance_1.ClassWithAttributes.extendAttributes(et2_diff._attributes, _child || {})) || this;
+        _this.mini = true;
         // included via etemplate2.css
         //this.egw().includeCSS('../../../vendor/bower-asset/dist/dist2html.css');
-		this.div = document.createElement("div");
+        _this.div = document.createElement("div");
-		jQuery(this.div).addClass('et2_diff');
+        jQuery(_this.div).addClass('et2_diff');
-	},
+        return _this;
-
+    }
-	set_value: function(value) {
+    et2_diff.prototype.set_value = function (value) {
         jQuery(this.div).empty();
         if (typeof value == 'string') {
-
             // Diff2Html likes to have files, we don't have them
-			if(value.indexOf('---') !== 0)
+            if (value.indexOf('---') !== 0) {
-			{
                 value = "--- diff\n+++ diff\n" + value;
             }
+            // @ts-ignore
             var diff = Diff2Html.getPrettyHtml(value, this.diff_options);
             //	var ui = new Diff2HtmlUI({diff: diff});
             //	ui.draw(jQuery(this.div), this.diff_options);
             jQuery(this.div).append(diff);
         }
-		else if(typeof value != 'object')
+        else if (typeof value != 'object') {
-		{
             jQuery(this.div).append(value);
         }
         this.check_mini();
-	},
+    };
-
+    et2_diff.prototype.check_mini = function () {
-	check_mini: function() {
+        if (!this.mini) {
-		if(!this.mini)
-		{
             return false;
         }
         var view = jQuery(this.div).children();
@@ -88,16 +88,13 @@ var et2_diff = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDe
             self.un_minify(diff);
             var dialog_div = jQuery('<div>')
                 .append(diff);
-
             dialog_div.dialog({
                 title: e.data.label,
                 width: 'auto',
-					autoResize: true,
                 modal: true,
                 buttons: [{ text: self.egw().lang('ok'), click: function () { jQuery(this).dialog("close"); } }],
                 open: function () {
-						if(jQuery(this).parent().height() > jQuery(window).height())
+                    if (jQuery(this).parent().height() > jQuery(window).height()) {
-						{
                         jQuery(this).height(jQuery(window).height() * 0.7);
                     }
                     jQuery(this).addClass('et2_diff').dialog({ position: "center" });
@@ -106,24 +103,21 @@ var et2_diff = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDe
                     // Need to destroy the dialog, etemplate widget needs divs back where they were
                     dialog_div.dialog("destroy");
                     self.minify(this);
-
                     // Put it back where it came from, or et2 will error when clear() is called
                     diff.prependTo(div);
                 }
             });
         });
-	},
+    };
-	set_label: function(_label) {
+    et2_diff.prototype.set_label = function (_label) {
         this.options.label = _label;
-
+    };
-	},
-
     /**
      * Make the diff into a mini-diff
      *
      * @param {DOMNode|String} view
      */
-	minify: function(view) {
+    et2_diff.prototype.minify = function (view) {
         view = jQuery(view)
             .addClass('mini')
             // Dialog changes these, if resized
@@ -132,24 +126,21 @@ var et2_diff = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDe
         jQuery('th', view).hide();
         jQuery('td.equal', view).hide()
             .prevAll().hide();
-	},
+    };
-
     /**
      * Expand mini-diff
      *
      * @param {DOMNode|String} view
      */
-	un_minify: function(view) {
+    et2_diff.prototype.un_minify = function (view) {
         jQuery(view).removeClass('mini').show();
         jQuery('th', view).show();
         jQuery('td.equal', view).show();
-	},
+    };
-
     /**
      * Code for implementing et2_IDetachedDOM
      * Fast-clonable read-only widget that only deals with DOM nodes, not the widget tree
      */
-
     /**
      * Build a list of attributes which can be set when working in the
      * "detached" mode in the _attrs array which is provided
@@ -157,18 +148,16 @@ var et2_diff = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDe
      *
      * @param {object} _attrs
      */
-        getDetachedAttributes: function(_attrs) {
+    et2_diff.prototype.getDetachedAttributes = function (_attrs) {
         _attrs.push("value", "label");
-        },
+    };
-
     /**
      * Returns an array of DOM nodes. The (relativly) same DOM-Nodes have to be
      * passed to the "setDetachedAttributes" function in the same order.
      */
-        getDetachedNodes: function() {
+    et2_diff.prototype.getDetachedNodes = function () {
         return [this.div];
-        },
+    };
-
     /**
      * Sets the given associative attribute->value array and applies the
      * attributes to the given DOM-Node.
@@ -179,16 +168,22 @@ var et2_diff = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDe
      *      returned by the "getDetachedAttributes" function and sets them to the
      *      given values.
      */
-        setDetachedAttributes: function(_nodes, _values) {
+    et2_diff.prototype.setDetachedAttributes = function (_nodes, _values) {
         this.div = _nodes[0];
-		if(typeof _values['label'] != 'undefined')
+        if (typeof _values['label'] != 'undefined') {
-		{
             this.set_label(_values['label']);
         }
-		if(typeof _values['value'] != 'undefined')
+        if (typeof _values['value'] != 'undefined') {
-		{
             this.set_value(_values['value']);
         }
+    };
+    et2_diff._attributes = {
+        "value": {
+            "type": "any"
         }
-});}).call(this);
+    };
-et2_register_widget(et2_diff, ["diff"]);
+    return et2_diff;
+}(et2_core_valueWidget_1.et2_valueWidget));
+exports.et2_diff = et2_diff;
+et2_core_widget_1.et2_register_widget(et2_diff, ["diff"]);
+//# sourceMappingURL=et2_widget_diff.js.map

api/js/etemplate/et2_widget_diff.ts

@@ -0,0 +1,209 @@
+/**
+ * EGroupware eTemplate2 - JS Diff object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Nathan Gray
+ * @copyright Nathan Gray 2012
+ * @version $Id$
+ */
+
+/*egw:uses
+	/vendor/bower-asset/jquery/dist/jquery.js;
+	/vendor/bower-asset/jquery-ui/jquery-ui.js;
+	/vendor/bower-asset/diff2html/dist/diff2html.min.js;
+	et2_core_valueWidget;
+*/
+
+import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
+import {ClassWithAttributes} from "./et2_core_inheritance";
+import {et2_valueWidget} from "./et2_core_valueWidget";
+
+/**
+ * Class that displays the diff between two [text] values
+ *
+ * @augments et2_valueWidget
+ */
+export class et2_diff extends et2_valueWidget implements et2_IDetachedDOM
+{
+	static readonly _attributes = {
+		"value": {
+			"type": "any"
+		}
+	};
+
+	private readonly diff_options: {
+		"inputFormat":"diff",
+		"matching": "words"
+	};
+	private div: HTMLDivElement;
+	private mini: boolean = true;
+
+	/**
+	 * Constructor
+	 */
+	constructor(_parent, _attrs? : WidgetConfig, _child? : object)
+	{
+		// Call the inherited constructor
+		super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_diff._attributes, _child || {}));
+
+		// included via etemplate2.css
+		//this.egw().includeCSS('../../../vendor/bower-asset/dist/dist2html.css');
+		this.div = document.createElement("div");
+		jQuery(this.div).addClass('et2_diff');
+	}
+
+	set_value( value)
+	{
+		jQuery(this.div).empty();
+		if(typeof value == 'string') {
+
+			// Diff2Html likes to have files, we don't have them
+			if(value.indexOf('---') !== 0)
+			{
+				value = "--- diff\n+++ diff\n"+value;
+			}
+			// @ts-ignore
+			var diff = Diff2Html.getPrettyHtml(value, this.diff_options);
+		//	var ui = new Diff2HtmlUI({diff: diff});
+		//	ui.draw(jQuery(this.div), this.diff_options);
+			jQuery(this.div).append(diff);
+		}
+		else if(typeof value != 'object')
+		{
+			jQuery(this.div).append(value);
+		}
+		this.check_mini();
+	}
+
+	check_mini( )
+	{
+		if(!this.mini)
+		{
+			return false;
+		}
+		var view = jQuery(this.div).children();
+		this.minify(view);
+		var self = this;
+		jQuery('<span class="ui-icon ui-icon-circle-plus">&nbsp;</span>')
+			.appendTo(self.div)
+			.css("cursor", "pointer")
+			.click({diff: view, div: self.div, label: self.options.label}, function(e) {
+				var diff = e.data.diff;
+				var div = e.data.div;
+				self.un_minify(diff);
+				var dialog_div = jQuery('<div>')
+					.append(diff);
+
+				dialog_div.dialog({
+					title: e.data.label,
+					width: 'auto',
+					modal: true,
+					buttons: [{text: self.egw().lang('ok'), click: function() {jQuery(this).dialog("close");}}],
+					open( )
+					{
+						if(jQuery(this).parent().height() > jQuery(window).height())
+						{
+							jQuery(this).height(jQuery(window).height() *0.7);
+						}
+						jQuery(this).addClass('et2_diff').dialog({position: "center"});
+					},
+					close( event, ui)
+					{
+						// Need to destroy the dialog, etemplate widget needs divs back where they were
+						dialog_div.dialog("destroy");
+						self.minify(this);
+
+						// Put it back where it came from, or et2 will error when clear() is called
+						diff.prependTo(div);
+					}
+				});
+			});
+	}
+	set_label( _label)
+	{
+		this.options.label = _label;
+
+	}
+
+	/**
+	 * Make the diff into a mini-diff
+	 *
+	 * @param {DOMNode|String} view
+	 */
+	minify( view)
+	{
+		view = jQuery(view)
+			.addClass('mini')
+			// Dialog changes these, if resized
+			.width('100%').css('height', 'inherit')
+			.show();
+		jQuery('th', view).hide();
+		jQuery('td.equal',view).hide()
+			.prevAll().hide();
+	}
+
+	/**
+	 * Expand mini-diff
+	 *
+	 * @param {DOMNode|String} view
+	 */
+	un_minify( view)
+	{
+		jQuery(view).removeClass('mini').show();
+		jQuery('th',view).show();
+		jQuery('td.equal',view).show();
+	}
+
+	/**
+	 * Code for implementing et2_IDetachedDOM
+	 * Fast-clonable read-only widget that only deals with DOM nodes, not the widget tree
+	 */
+
+	/**
+	 * Build a list of attributes which can be set when working in the
+	 * "detached" mode in the _attrs array which is provided
+	 * by the calling code.
+	 *
+	 * @param {object} _attrs
+	 */
+	getDetachedAttributes(_attrs)
+	{
+		_attrs.push("value", "label");
+	}
+
+	/**
+	 * Returns an array of DOM nodes. The (relativly) same DOM-Nodes have to be
+	 * passed to the "setDetachedAttributes" function in the same order.
+	 */
+	getDetachedNodes()
+	{
+		return [this.div];
+	}
+
+	/**
+	 * Sets the given associative attribute->value array and applies the
+	 * attributes to the given DOM-Node.
+	 *
+	 * @param _nodes is an array of nodes which has to be in the same order as
+	 *      the nodes returned by "getDetachedNodes"
+	 * @param _values is an associative array which contains a subset of attributes
+	 *      returned by the "getDetachedAttributes" function and sets them to the
+	 *      given values.
+	 */
+	setDetachedAttributes(_nodes, _values)
+	{
+		this.div = _nodes[0];
+		if(typeof _values['label'] != 'undefined')
+		{
+			this.set_label(_values['label']);
+		}
+		if(typeof _values['value'] != 'undefined')
+		{
+			this.set_value(_values['value']);
+		}
+	}
+}
+et2_register_widget(et2_diff, ["diff"]);