Change to Et2Dialog

- History diff
- Fix some bugs in placeholder widget
- Change load listener target, the dialog content node might have been moved out before the event gets triggered

api/js/etemplate/Et2Dialog/Et2Dialog.ts

@@ -543,7 +543,7 @@ export class Et2Dialog extends Et2Widget(ScopedElementsMixin(SlotMixin(LionDialo
 		this._template_widget.DOMContainer.setAttribute('id', this.__template.replace(/^(.*\/)?([^/]+?)(\.xet)?(\?.*)?$/, '$2').replace(/\./g, '-'));
 
 		// Look for buttons after load
-		this.addEventListener("load", this._adoptTemplateButtons);
+		this._overlayContentNode._contentNode.addEventListener("load", this._adoptTemplateButtons);
 	}
 
 	render()

api/js/etemplate/et2_core_baseWidget.ts

@@ -371,7 +371,7 @@ export class et2_container extends et2_baseWidget
 	getDOMWidgetById(_id) : et2_DOMWidget | null
 	{
 		let widget = this.getWidgetById(_id);
-		if(widget && widget.instanceOf(et2_DOMWidget))
+		if(widget && (widget instanceof HTMLElement || widget.instanceOf(et2_DOMWidget)))
 		{
 			return <et2_DOMWidget>widget;
 		}

api/js/etemplate/et2_widget_diff.ts

@@ -20,6 +20,7 @@ import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
 import {ClassWithAttributes} from "./et2_core_inheritance";
 import {et2_valueWidget} from "./et2_core_valueWidget";
 import {et2_IDetachedDOM} from "./et2_core_interfaces";
+import {Et2Dialog} from "./Et2Dialog/Et2Dialog";
 
 /**
  * Class that displays the diff between two [text] values
@@ -90,36 +91,37 @@ export class et2_diff extends et2_valueWidget implements et2_IDetachedDOM
 		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) {
+			.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>')
+				let dialog = new Et2Dialog(self.egw());
-					.append(diff);
 
-				dialog_div.dialog({
+				dialog.transformAttributes({
 					title: e.data.label,
-					width: 'auto',
+					//modal: true,
-					modal: true,
+					buttons: [{label: 'ok'}],
-					buttons: [{text: self.egw().lang('ok'), click: function() {jQuery(this).dialog("close");}}],
+					class: "et2_diff",
-					open( )
+				});
+				diff.attr("slot", "content");
+				dialog.addEventListener("open", () =>
+				{
+					diff.appendTo(dialog);
+					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).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);
 					}
 				});
+				dialog.addEventListener("close", () =>
+				{
+					// Need to destroy the dialog, etemplate widget needs divs back where they were
+					self.minify(this);
+
+					// Put it back where it came from, or et2 will error when clear() is called
+					diff.prependTo(div);
+				});
+				document.body.appendChild(dialog);
 			});
 	}
 	set_label( _label)
@@ -138,7 +140,7 @@ export class et2_diff extends et2_valueWidget implements et2_IDetachedDOM
 		view = jQuery(view)
 			.addClass('mini')
 			// Dialog changes these, if resized
-			.width('100%').css('height', 'inherit')
+			.css('height', 'inherit')
 			.show();
 		jQuery('th', view).hide();
 		jQuery('td.equal',view).hide()

api/js/etemplate/et2_widget_placeholder.ts

@@ -73,9 +73,9 @@ export class et2_placeholder_select extends et2_inputWidget
 	_content(_content, _callback)
 	{
 		let self = this;
-		if(this.dialog && this.dialog.div)
+		if(this.dialog)
 		{
-			this.dialog.div.dialog('close');
+			this.dialog.close();
 		}
 
 		var callback = _callback || this._buildDialog;
@@ -112,8 +112,6 @@ export class et2_placeholder_select extends et2_inputWidget
 	 */
 	protected _buildDialog(_data)
 	{
-
-		let self = this;
 		let buttons = [
 			{
 				label: this.egw().lang("Insert"),
@@ -188,7 +186,7 @@ export class et2_placeholder_select extends et2_inputWidget
 			resizable: true
 		});
 		document.body.appendChild(<HTMLElement><unknown>this.dialog);
-		this.dialog.addEventListener('load', this._on_template_load.bind(this));
+		this.dialog.addEventListener('open', this._on_template_load.bind(this));
 	}
 
 	doLoadingFinished()