Et2Template working in nextmatch

This commit is contained in:
nathan 2024-11-13 10:39:54 -07:00
parent c6804571c8
commit ec571b4790
4 changed files with 57 additions and 48 deletions

View File

@ -90,7 +90,8 @@ export class Et2Template extends Et2Widget(LitElement)
super.connectedCallback();
this.addEventListener("load", this.handleLoad);
if(this.template || this.id)
// If we can, start loading immediately
if(this.template || this.id || this.url)
{
this.load();
}
@ -244,7 +245,7 @@ export class Et2Template extends Et2Widget(LitElement)
* @returns {Promise<void>}
* @protected
*/
protected async load(newContent? : object)
public async load(newContent? : object)
{
if(typeof newContent != "undefined")
{
@ -252,6 +253,13 @@ export class Et2Template extends Et2Widget(LitElement)
}
this.loading = new Promise(async(resolve, reject) =>
{
// Empty in case load was called again
while(this.childNodes.length > 0)
{
this.lastElementChild.remove();
}
// Get template XML
let xml = await this.findTemplate();
// Read the XML structure of the requested template
if(typeof xml != 'undefined')
@ -273,8 +281,11 @@ export class Et2Template extends Et2Widget(LitElement)
console.timeEnd("Template load");
}
console.groupEnd();
// Resolve promise, this.updateComplete now resolved
resolve();
// Notification event
this.dispatchEvent(new CustomEvent("load", {
bubbles: true,
composed: true,

View File

@ -1011,7 +1011,7 @@ const Et2WidgetMixin = <T extends Constructor>(superClass : T) =>
if(!this._parent_node && this.getParent() instanceof et2_widget && (<et2_DOMWidget>this.getParent()).getDOMNode(this) != this.parentNode)
{
// @ts-ignore this is not an et2_widget, and Et2Widget is not a Node
(<et2_DOMWidget>this.getParent()).getDOMNode(this).append(this);
(<et2_DOMWidget>this.getParent()).getDOMNode(this)?.append(this);
}
// An empty text node causes problems with legacy widget children

View File

@ -76,6 +76,7 @@ import {Et2AccountFilterHeader} from "./Et2Nextmatch/Headers/AccountFilterHeader
import {Et2SelectCategory} from "./Et2Select/Select/Et2SelectCategory";
import {Et2Searchbox} from "./Et2Textbox/Et2Searchbox";
import type {LitElement} from "lit";
import {Et2Template} from "./Et2Template/Et2Template";
//import {et2_selectAccount} from "./et2_widget_SelectAccount";
let keep_import : Et2AccountFilterHeader
@ -2410,7 +2411,7 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
*/
set_template(template_name : string)
{
const template = et2_createWidget("template", {"id": template_name}, this);
const template = <Et2Template>loadWebComponent("et2-template", {"id": template_name, class: "hideme"}, this);
if(this.template)
{
// Stop early to prevent unneeded processing, and prevent infinite
@ -2479,10 +2480,11 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
return;
}
// Free the template again, but don't remove it
// Free the template and remove it
setTimeout(function()
{
template.destroy();
template.remove();
}, 1);
// Call the "setNextmatch" function of all registered
@ -2522,13 +2524,9 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
this._set_autorefresh(this._get_autorefresh());
};
// Template might not be loaded yet, defer parsing
const promise = [];
template.loadingFinished(promise);
// Wait until template (& children) are done
// Keep promise so we can return it from doLoadingFinished
this.template_promise = Promise.all(promise).then(() =>
this.template_promise = template.updateComplete.then(() =>
{
parse.call(this, template);
if(!this.dynheight)
@ -2555,6 +2553,12 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2
});
}
).finally(() => this.template_promise = null);
this.template_promise.widget = this;
// Explictly add template to DOM since it won't happen otherwise, and webComponents need to be in the DOM
// to complete
this.div.append(template);
template.load();
return this.template_promise;
}
@ -3646,47 +3650,37 @@ export class et2_nextmatch_header_bar extends et2_DOMWidget implements et2_INext
// Load the template
const self = this;
const header = <et2_template>et2_createWidget("template", {"id": template_name}, this);
const header = <Et2Template>loadWebComponent("et2-template", {"id": template_name}, this);
this.headers[id] = header;
const deferred = [];
header.loadingFinished(deferred);
// fix order in DOM by reattaching templates in correct position
switch(id)
{
case 0: // header_left: prepend
jQuery(header.getDOMNode()).prependTo(self.header_div);
break;
case 1: // header_right: before favorites and count
window.setTimeout(() =>
jQuery(header.getDOMNode()).prependTo(self.header_div.find('div.header_row_right')));
break;
case 2: // header_row: after search
window.setTimeout(function()
{ // otherwise we might end up after filters
jQuery(header.getDOMNode()).insertAfter(self.header_div.find('div.search'));
}, 1);
break;
case 3: // header_row2: below everything
window.setTimeout(function()
{ // otherwise we might end up after filters
jQuery(header.getDOMNode()).insertAfter(self.header_div);
}, 1);
break;
}
// Wait until all child widgets are loaded, then bind
Promise.all(deferred).then(() =>
header.updateComplete.then(() =>
{
// fix order in DOM by reattaching templates in correct position
switch(id)
{
case 0: // header_left: prepend
jQuery(header.getDOMNode()).prependTo(self.header_div);
break;
case 1: // header_right: before favorites and count
window.setTimeout(() =>
jQuery(header.getDOMNode()).prependTo(self.header_div.find('div.header_row_right')));
break;
case 2: // header_row: after search
window.setTimeout(function()
{ // otherwise we might end up after filters
jQuery(header.getDOMNode()).insertAfter(self.header_div.find('div.search'));
}, 1);
break;
case 3: // header_row2: below everything
window.setTimeout(function()
{ // otherwise we might end up after filters
jQuery(header.getDOMNode()).insertAfter(self.header_div);
}, 1);
break;
}
// Give child templates a chance to load before we bind inputs
let children = [];
header.iterateOver((_widget) =>
{
children.push(_widget.loading);
}, this, et2_template);
Promise.all(children).then(() =>
{
self._bindHeaderInput(header);
});
self._bindHeaderInput(header);
});
}

View File

@ -9,7 +9,11 @@
*/
import {Et2Template} from "./Et2Template/Et2Template";
/**
* @deprecated use Et2Template
*/
export type et2_template = Et2Template;
export class et2_template extends Et2Template
{
}