Api: Allow Web Components to be added into templates (.xet files)

Current limitations:
- display only, I haven't figured out getting values back yet
- no children in the web components
This commit is contained in:
nathangray 2021-06-18 14:20:17 -06:00
parent 498cb2994d
commit 78a01ced17
4 changed files with 71 additions and 12 deletions

View File

@ -148,7 +148,7 @@ export class et2_DOMWidget extends et2_widget {
*/
insertChild(_node, _idx) {
super.insertChild(_node, _idx);
if (_node.instanceOf(et2_DOMWidget) && typeof _node.hasOwnProperty('parentNode') && this.getDOMNode(this)) {
if (_node.instanceOf && _node.instanceOf(et2_DOMWidget) && typeof _node.hasOwnProperty('parentNode') && this.getDOMNode(this)) {
try {
_node.setParentDOMNode(this.getDOMNode(_node));
}
@ -157,6 +157,10 @@ export class et2_DOMWidget extends et2_widget {
// will probably try again in doLoadingFinished()
}
}
// _node is actually a Web Component
else if (_node instanceof Element) {
this.getDOMNode().append(_node);
}
}
isAttached() {
return this.parentNode != null;

View File

@ -270,7 +270,7 @@ export abstract class et2_DOMWidget extends et2_widget implements et2_IDOMNode
{
super.insertChild(_node, _idx);
if(_node.instanceOf(et2_DOMWidget) && typeof _node.hasOwnProperty('parentNode') && this.getDOMNode(this))
if(_node.instanceOf && _node.instanceOf(et2_DOMWidget) && typeof _node.hasOwnProperty('parentNode') && this.getDOMNode(this))
{
try
{
@ -282,6 +282,11 @@ export abstract class et2_DOMWidget extends et2_widget implements et2_IDOMNode
// will probably try again in doLoadingFinished()
}
}
// _node is actually a Web Component
else if (_node instanceof Element )
{
this.getDOMNode().append(_node);
}
}
isAttached() {

View File

@ -544,11 +544,32 @@ export class et2_widget extends ClassWithAttributes {
this.parseXMLAttrs(_node.attributes, attributes, constructor.prototype);
// Do an sanity check for the attributes
ClassWithAttributes.generateAttributeSet(et2_attribute_registry[constructor.name], attributes);
if (undefined == window.customElements.get(_nodeName)) {
// Creates the new widget, passes this widget as an instance and
// passes the widgetType. Then it goes on loading the XML for it.
var widget = new constructor(this, attributes);
// Load the widget itself from XML
widget.loadFromXML(_node);
}
else {
widget = this.loadWebComponent(_nodeName, _node, attributes);
if (this.addChild) {
// webcomponent going into old et2_widget
this.addChild(widget);
}
}
return widget;
}
/**
* Load a Web Component
* @param _nodeName
* @param _node
*/
loadWebComponent(_nodeName, _node, attributes) {
let widget = document.createElement(_nodeName);
widget.textContent = _node.textContent;
// Apply any set attributes
_node.getAttributeNames().forEach(attribute => widget.setAttribute(attribute, attributes[attribute]));
return widget;
}
/**

View File

@ -25,6 +25,7 @@ import {et2_IDOMNode, et2_IInputNode} from "./et2_core_interfaces";
// fixing circular dependencies by only importing type
import type {et2_container} from "./et2_core_baseWidget";
import type {et2_inputWidget, et2_input} from "./et2_core_inputWidget";
import {decorateLanguageService} from "ts-lit-plugin/lib/decorate-language-service";
/**
* The registry contains all XML tag names and the corresponding widget
@ -716,12 +717,40 @@ export class et2_widget extends ClassWithAttributes
// Do an sanity check for the attributes
ClassWithAttributes.generateAttributeSet(et2_attribute_registry[constructor.name], attributes);
if(undefined == window.customElements.get(_nodeName))
{
// Creates the new widget, passes this widget as an instance and
// passes the widgetType. Then it goes on loading the XML for it.
var widget = new constructor(this, attributes);
// Load the widget itself from XML
widget.loadFromXML(_node);
}
else
{
widget = this.loadWebComponent(_nodeName, _node, attributes);
if(this.addChild)
{
// webcomponent going into old et2_widget
this.addChild(widget);
}
}
return widget;
}
/**
* Load a Web Component
* @param _nodeName
* @param _node
*/
loadWebComponent(_nodeName : string, _node, attributes : Object) : HTMLElement
{
let widget = document.createElement(_nodeName);
widget.textContent = _node.textContent;
// Apply any set attributes
_node.getAttributeNames().forEach(attribute => widget.setAttribute(attribute, attributes[attribute]));
return widget;
}