From d4f614e3afabfa0f2bfd6daa03e3fb1f4e6c794b Mon Sep 17 00:00:00 2001
From: nathangray <nathangray.bsc+github@gmail.com>
Date: Wed, 27 Feb 2019 16:09:45 -0700
Subject: [PATCH] Adapt diff widget to new display library

---
 api/js/etemplate/et2_widget_diff.js  | 55 ++++++++++++++++++++++++----
 api/templates/default/etemplate2.css | 22 ++++++++++-
 2 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/api/js/etemplate/et2_widget_diff.js b/api/js/etemplate/et2_widget_diff.js
index da622514fa..18c314ebeb 100644
--- a/api/js/etemplate/et2_widget_diff.js
+++ b/api/js/etemplate/et2_widget_diff.js
@@ -14,7 +14,6 @@
 	/vendor/bower-asset/jquery/dist/jquery.js;
 	/vendor/bower-asset/jquery-ui/jquery-ui.js;
 	/vendor/bower-asset/diff2html/dist/diff2html.min.js;
-	/vendor/bower-asset/diff2html/dist/diff2html-ui.min.js;
 	et2_core_valueWidget;
 */
 
@@ -46,7 +45,7 @@ var et2_diff = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDe
 		this.mini = true;
 
 		// included via etemplate2.css
-		//this.egw().includeCSS('etemplate/js/lib/jsdifflib/diffview.css');
+		//this.egw().includeCSS('../../../vendor/bower-asset/dist/dist2html.css');
 		this.div = document.createElement("div");
 		jQuery(this.div).addClass('diff');
 	},
@@ -54,19 +53,59 @@ var et2_diff = (function(){ "use strict"; return et2_valueWidget.extend([et2_IDe
 	set_value: function(value) {
 		jQuery(this.div).empty();
 		if(typeof value == 'string') {
-			jQuery(this.div).append(
-					Diff2Html.getPrettyHtml(
-						value,
-						this.diff_options
-					)
-			);
+
+			// Diff2Html likes to have files, we don't have them
+			if(value.indexOf('---') !== 0)
+			{
+				value = "--- diff\n+++ diff\n"+value;
+			}
+			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: function() {
+		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}, 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: self.options.label,
+					width: 'auto',
+					autoResize: true,
+					modal: true,
+					buttons: [{text: self.egw().lang('ok'), click: function() {jQuery(this).dialog("close");}}],
+					close: function(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: function(_label) {
 		this.options.label = _label;
 
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 602d53f418..2636534cd6 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -13,7 +13,7 @@
 /*@import url("../../js/jquery/blueimp/css/blueimp-gallery.min.css");*/
 /*@import url("../../js/dhtmlxtree/codebase/dhtmlxtree.css");*/
 /*@import url("../../js/egw_action/test/skins/dhtmlxmenu_egw.css");*/
-/*@import url("../../js/etemplate/lib/jsdifflib/diffview.css");*/
+/*@import url("../../../vendor/bower-asset/diff2html/dist/diff2html.css");*/
 /*@import url("../../../vendor/bower-asset/cropper/dist/cropper.min.css");*/
 /*@import url("css/flags.css");*/
 /*@import url("css/htmlarea.css");*/
@@ -567,10 +567,28 @@ for printing
 /**
  * Diff widget
  */
+div.diff {
+	width: 100%;
+}
 .diff thead,
-.author {
+.author,
+.d2h-file-header,
+.d2h-file-info,
+.d2h-info,
+.diff .d2h-cntx
+{
   display: none;
 }
+.d2h-file-diff {
+	white-space:normal;
+}
+.diff .d2h-file-diff {
+	overflow-x: hidden;
+}
+.ui-widget-content .d2h-file-diff {
+	overflow-x: visible;
+	overflow-y: visible;
+}
 .diff .ui-icon {
   margin-top: -16px;
   float: right;