From 6120d820aae49de6ea1c40f0756b85409d152993 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 30 Mar 2022 15:11:15 -0600 Subject: [PATCH] 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 | 2 +- api/js/etemplate/et2_core_baseWidget.ts | 2 +- api/js/etemplate/et2_widget_diff.ts | 48 +++++++++++----------- api/js/etemplate/et2_widget_placeholder.ts | 8 ++-- 4 files changed, 30 insertions(+), 30 deletions(-) diff --git a/api/js/etemplate/Et2Dialog/Et2Dialog.ts b/api/js/etemplate/Et2Dialog/Et2Dialog.ts index f8e1f11ad6..a84a489302 100644 --- a/api/js/etemplate/Et2Dialog/Et2Dialog.ts +++ b/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() diff --git a/api/js/etemplate/et2_core_baseWidget.ts b/api/js/etemplate/et2_core_baseWidget.ts index 321c560b6a..675e5ee124 100644 --- a/api/js/etemplate/et2_core_baseWidget.ts +++ b/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 widget; } diff --git a/api/js/etemplate/et2_widget_diff.ts b/api/js/etemplate/et2_widget_diff.ts index b28af28100..cba90054af 100644 --- a/api/js/etemplate/et2_widget_diff.ts +++ b/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(' ') .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('
') - .append(diff); + let dialog = new Et2Dialog(self.egw()); - dialog_div.dialog({ + dialog.transformAttributes({ title: e.data.label, - width: 'auto', - modal: true, - buttons: [{text: self.egw().lang('ok'), click: function() {jQuery(this).dialog("close");}}], - open( ) + //modal: true, + buttons: [{label: 'ok'}], + class: "et2_diff", + }); + 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).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); + jQuery(this).height(jQuery(window).height() * 0.7); } }); + 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() diff --git a/api/js/etemplate/et2_widget_placeholder.ts b/api/js/etemplate/et2_widget_placeholder.ts index 201290a143..64ad03637b 100644 --- a/api/js/etemplate/et2_widget_placeholder.ts +++ b/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(this.dialog); - this.dialog.addEventListener('load', this._on_template_load.bind(this)); + this.dialog.addEventListener('open', this._on_template_load.bind(this)); } doLoadingFinished()