forked from extern/egroupware
Add et2-box (& et2-hbox & et2-vbox) WebComponent
Box can have legacy & webcomponent children. Used here in infolog edit created & modified row
This commit is contained in:
nathan
parent
30d835fa39
commit
db7828ad1d
83
api/js/etemplate/et2-box.ts
Normal file
83
api/js/etemplate/et2-box.ts
Normal file
@ -0,0 +1,83 @@
|
||||
/**
|
||||
* EGroupware eTemplate2 - Box widget
|
||||
*
|
||||
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
||||
* @package etemplate
|
||||
* @subpackage api
|
||||
* @link https://www.egroupware.org
|
||||
* @author Nathan Gray
|
||||
*/
|
||||
|
||||
|
||||
import {css, html, LitElement} from "../../../node_modules/@lion/core/index.js";
|
||||
import {Et2Widget} from "./et2_core_webComponent";
|
||||
|
||||
export class Et2Box extends Et2Widget(LitElement)
|
||||
{
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
:host > div {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
::slotted(*) {
|
||||
/* CSS for child elements */
|
||||
}`,
|
||||
];
|
||||
}
|
||||
|
||||
render()
|
||||
{
|
||||
return html`
|
||||
<div class="et2_box" ${this.id ? html`id="${this.id}"` : ''}>
|
||||
<slot><p>Empty box</p></slot>
|
||||
</div> `;
|
||||
}
|
||||
|
||||
_createNamespace(): boolean
|
||||
{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("et2-box", Et2Box);
|
||||
|
||||
export class Et2HBox extends Et2Box
|
||||
{
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host > div {
|
||||
flex-direction: row;
|
||||
}`
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("et2-hbox", Et2HBox);
|
||||
|
||||
export class Et2VBox extends Et2Box
|
||||
{
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host > div {
|
||||
flex-direction: column;
|
||||
}`
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("et2-vbox", Et2VBox);
|
||||
@ -9,21 +9,22 @@
|
||||
*/
|
||||
|
||||
|
||||
import {css,html} from "../../../node_modules/@lion/core/index.js";
|
||||
import {css, html} from "../../../node_modules/@lion/core/index.js";
|
||||
import {LionButton} from "../../../node_modules/@lion/button/index.js";
|
||||
import {Et2InputWidget} from "./et2_core_inputWidget";
|
||||
import {Et2Widget} from "./et2_core_inheritance";
|
||||
import {Et2Widget} from "./et2_core_webComponent";
|
||||
|
||||
export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
|
||||
export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
|
||||
{
|
||||
protected _created_icon_node: HTMLImageElement;
|
||||
protected clicked: boolean = false;
|
||||
private image: string;
|
||||
protected _created_icon_node: HTMLImageElement;
|
||||
protected clicked: boolean = false;
|
||||
private image: string;
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
:host {
|
||||
padding: 1px 8px;
|
||||
/* These should probably come from somewhere else */
|
||||
@ -35,107 +36,114 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
|
||||
width: 20px;
|
||||
padding-right: 3px;
|
||||
}`,
|
||||
];
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
image: {type: String},
|
||||
onclick: {type: Function}
|
||||
}
|
||||
}
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
image: {type: String},
|
||||
onclick: {type: Function}
|
||||
}
|
||||
}
|
||||
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
|
||||
// Property default values
|
||||
this.image = '';
|
||||
// Property default values
|
||||
this.image = '';
|
||||
|
||||
// Create icon Element since BXButton puts it as child, but we put it as attribute
|
||||
this._created_icon_node = document.createElement("img");
|
||||
this._created_icon_node.slot="icon";
|
||||
// Do not add this._icon here, no children can be added in constructor
|
||||
// Create icon Element since BXButton puts it as child, but we put it as attribute
|
||||
this._created_icon_node = document.createElement("img");
|
||||
this._created_icon_node.slot = "icon";
|
||||
// Do not add this._icon here, no children can be added in constructor
|
||||
|
||||
// Define a default click handler
|
||||
// If a different one gets set via attribute, it will be used instead
|
||||
this.onclick = (typeof this.onclick === "function") ? this.onclick : () => {
|
||||
return this.getInstanceManager().submit();
|
||||
};
|
||||
}
|
||||
// Define a default click handler
|
||||
// If a different one gets set via attribute, it will be used instead
|
||||
this.onclick = (typeof this.onclick === "function") ? this.onclick : () =>
|
||||
{
|
||||
return this.getInstanceManager().submit();
|
||||
};
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
|
||||
//this.classList.add("et2_button")
|
||||
//this.classList.add("et2_button")
|
||||
|
||||
if(this.image)
|
||||
{
|
||||
this._created_icon_node.src = egw.image(this.image);
|
||||
this.appendChild(this._created_icon_node);
|
||||
}
|
||||
if (this.image)
|
||||
{
|
||||
this._created_icon_node.src = egw.image(this.image);
|
||||
this.appendChild(this._created_icon_node);
|
||||
}
|
||||
|
||||
this.addEventListener("click",this._handleClick.bind(this));
|
||||
}
|
||||
this.addEventListener("click", this._handleClick.bind(this));
|
||||
}
|
||||
|
||||
|
||||
_handleClick(event: MouseEvent) : boolean
|
||||
{
|
||||
debugger;
|
||||
// ignore click on readonly button
|
||||
if (this.disabled) return false;
|
||||
_handleClick(event: MouseEvent): boolean
|
||||
{
|
||||
debugger;
|
||||
// ignore click on readonly button
|
||||
if (this.disabled) return false;
|
||||
|
||||
this.clicked = true;
|
||||
this.clicked = true;
|
||||
|
||||
// Cancel buttons don't trigger the close confirmation prompt
|
||||
if(this.classList.contains("et2_button_cancel"))
|
||||
{
|
||||
this.getInstanceManager()?.skip_close_prompt();
|
||||
}
|
||||
// Cancel buttons don't trigger the close confirmation prompt
|
||||
if (this.classList.contains("et2_button_cancel"))
|
||||
{
|
||||
this.getInstanceManager()?.skip_close_prompt();
|
||||
}
|
||||
|
||||
if (!super._handleClick(event))
|
||||
{
|
||||
this.clicked = false;
|
||||
return false;
|
||||
}
|
||||
if (!super._handleClick(event))
|
||||
{
|
||||
this.clicked = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
this.clicked = false;
|
||||
this.getInstanceManager()?.skip_close_prompt(false);
|
||||
return true;
|
||||
}
|
||||
this.clicked = false;
|
||||
this.getInstanceManager()?.skip_close_prompt(false);
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html` <div class="button-content et2_button" id="${this._buttonId}">
|
||||
<slot name="icon"></slot>
|
||||
<slot></slot>
|
||||
</div> `;
|
||||
}
|
||||
/**
|
||||
* Implementation of the et2_IInput interface
|
||||
*/
|
||||
render()
|
||||
{
|
||||
return html`
|
||||
<div class="button-content et2_button" id="${this._buttonId}">
|
||||
<slot name="icon"></slot>
|
||||
<slot></slot>
|
||||
</div> `;
|
||||
}
|
||||
|
||||
/**
|
||||
* Always return false as a button is never dirty
|
||||
*/
|
||||
isDirty()
|
||||
{
|
||||
return false;
|
||||
}
|
||||
/**
|
||||
* Implementation of the et2_IInput interface
|
||||
*/
|
||||
|
||||
resetDirty()
|
||||
{
|
||||
}
|
||||
/**
|
||||
* Always return false as a button is never dirty
|
||||
*/
|
||||
isDirty()
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
getValue()
|
||||
{
|
||||
if (this.clicked)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
resetDirty()
|
||||
{
|
||||
}
|
||||
|
||||
// If "null" is returned, the result is not added to the submitted
|
||||
// array.
|
||||
return null;
|
||||
}
|
||||
getValue()
|
||||
{
|
||||
if (this.clicked)
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
// If "null" is returned, the result is not added to the submitted
|
||||
// array.
|
||||
return null;
|
||||
}
|
||||
}
|
||||
customElements.define("et2-button",Et2Button);
|
||||
|
||||
customElements.define("et2-button", Et2Button);
|
||||
|
||||
@ -9,42 +9,45 @@
|
||||
*/
|
||||
|
||||
|
||||
import {css,html} from "../../../node_modules/@lion/core/index.js";
|
||||
import {css, html} from "../../../node_modules/@lion/core/index.js";
|
||||
import {LionInput} from "../../../node_modules/@lion/input/index.js";
|
||||
import {Et2InputWidget} from "./et2_core_inputWidget";
|
||||
import {Et2Widget} from "./et2_core_inheritance";
|
||||
import {Et2Widget} from "./et2_core_webComponent";
|
||||
|
||||
export class Et2Textbox extends Et2InputWidget(Et2Widget(LionInput))
|
||||
export class Et2Textbox extends Et2InputWidget(Et2Widget(LionInput))
|
||||
{
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
static get styles()
|
||||
{
|
||||
return [
|
||||
...super.styles,
|
||||
css`
|
||||
/* Custom CSS */
|
||||
`,
|
||||
];
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
...super.properties,
|
||||
value: {attribute: true},
|
||||
onclick: {type: Function}
|
||||
}
|
||||
}
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
value: {attribute: true},
|
||||
onclick: {type: Function}
|
||||
}
|
||||
}
|
||||
|
||||
constructor()
|
||||
{
|
||||
debugger;
|
||||
super();
|
||||
constructor()
|
||||
{
|
||||
debugger;
|
||||
super();
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
customElements.define("et2-textbox",Et2Textbox);
|
||||
|
||||
customElements.define("et2-textbox", Et2Textbox);
|
||||
|
||||
@ -13,576 +13,265 @@
|
||||
*/
|
||||
|
||||
import {egw, IegwAppLocal} from "../jsapi/egw_global";
|
||||
import {et2_checkType, et2_no_init, et2_validateAttrib} from "./et2_core_common";
|
||||
import {et2_checkType, et2_cloneObject, et2_no_init, et2_validateAttrib} from "./et2_core_common";
|
||||
import {et2_IDOMNode, et2_IInput, et2_IInputNode, et2_implements_registry} from "./et2_core_interfaces";
|
||||
import {LitElement} from "../../../node_modules/lit-element/lit-element.js";
|
||||
import {et2_arrayMgr} from "./et2_core_arrayMgr";
|
||||
import {et2_widget} from "./et2_core_widget";
|
||||
import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
|
||||
import {etemplate2} from "./etemplate2";
|
||||
|
||||
export class ClassWithInterfaces
|
||||
{
|
||||
/**
|
||||
* The implements function can be used to check whether the object
|
||||
* implements the given interface.
|
||||
*
|
||||
* As TypeScript can not (yet) check if an objects implements an interface on runtime,
|
||||
* we currently implements with each interface a function called 'implements_'+interfacename
|
||||
* to be able to check here.
|
||||
*
|
||||
* @param _iface name of interface to check
|
||||
*/
|
||||
implements (_iface_name : string)
|
||||
{
|
||||
if (typeof et2_implements_registry[_iface_name] === 'function' &&
|
||||
et2_implements_registry[_iface_name](this))
|
||||
/**
|
||||
* The implements function can be used to check whether the object
|
||||
* implements the given interface.
|
||||
*
|
||||
* As TypeScript can not (yet) check if an objects implements an interface on runtime,
|
||||
* we currently implements with each interface a function called 'implements_'+interfacename
|
||||
* to be able to check here.
|
||||
*
|
||||
* @param _iface name of interface to check
|
||||
*/
|
||||
implements(_iface_name: string)
|
||||
{
|
||||
return true
|
||||
if (typeof et2_implements_registry[_iface_name] === 'function' &&
|
||||
et2_implements_registry[_iface_name](this))
|
||||
{
|
||||
return true
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if object is an instance of a class or implements an interface (specified by the interfaces name)
|
||||
*
|
||||
* @param _class_or_interfacename class(-name) or string with name of interface
|
||||
*/
|
||||
instanceOf(_class_or_interfacename: any) : boolean
|
||||
{
|
||||
if (typeof _class_or_interfacename === 'string')
|
||||
/**
|
||||
* Check if object is an instance of a class or implements an interface (specified by the interfaces name)
|
||||
*
|
||||
* @param _class_or_interfacename class(-name) or string with name of interface
|
||||
*/
|
||||
instanceOf(_class_or_interfacename: any): boolean
|
||||
{
|
||||
return this.implements(_class_or_interfacename);
|
||||
if (typeof _class_or_interfacename === 'string')
|
||||
{
|
||||
return this.implements(_class_or_interfacename);
|
||||
}
|
||||
return this instanceof _class_or_interfacename;
|
||||
}
|
||||
return this instanceof _class_or_interfacename;
|
||||
}
|
||||
}
|
||||
|
||||
export class ClassWithAttributes extends ClassWithInterfaces
|
||||
{
|
||||
/**
|
||||
* Object to collect the attributes we operate on
|
||||
*/
|
||||
attributes: object;
|
||||
/**
|
||||
* Object to collect the attributes we operate on
|
||||
*/
|
||||
attributes: object;
|
||||
|
||||
/**
|
||||
* Returns the value of the given attribute. If the property does not
|
||||
* exist, an error message is issued.
|
||||
*
|
||||
* @param {string} _name
|
||||
* @return {*}
|
||||
*/
|
||||
getAttribute(_name)
|
||||
{
|
||||
if (typeof this.attributes[_name] != "undefined" &&
|
||||
!this.attributes[_name].ignore) {
|
||||
if (typeof this["get_" + _name] == "function") {
|
||||
return this["get_" + _name]();
|
||||
} else {
|
||||
return this[_name];
|
||||
}
|
||||
} else {
|
||||
egw.debug("error", this, "Attribute '" + _name + "' does not exist!");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The setAttribute function sets the attribute with the given name to
|
||||
* the given value. _override defines, whether this[_name] will be set,
|
||||
* if this key already exists. _override defaults to true. A warning
|
||||
* is issued if the attribute does not exist.
|
||||
*
|
||||
* @param {string} _name
|
||||
* @param {*} _value
|
||||
* @param {boolean} _override
|
||||
*/
|
||||
setAttribute(_name, _value, _override)
|
||||
{
|
||||
if (typeof this.attributes[_name] != "undefined") {
|
||||
if (!this.attributes[_name].ignore) {
|
||||
if (typeof _override == "undefined") {
|
||||
_override = true;
|
||||
}
|
||||
|
||||
var val = et2_checkType(_value, this.attributes[_name].type,
|
||||
_name, this);
|
||||
|
||||
if (typeof this["set_" + _name] == "function") {
|
||||
this["set_" + _name](val);
|
||||
} else if (_override || typeof this[_name] == "undefined") {
|
||||
this[_name] = val;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
egw.debug("warn", this, "Attribute '" + _name + "' does not exist!");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* generateAttributeSet sanitizes the given associative array of attributes
|
||||
* (by passing each entry to "et2_checkType" and checking for existance of
|
||||
* the attribute) and adds the default values to the associative array.
|
||||
*
|
||||
* @param {object} _attrs is the associative array containing the attributes.
|
||||
*/
|
||||
static generateAttributeSet(widget, _attrs)
|
||||
{
|
||||
// Sanity check and validation
|
||||
for (var key in _attrs) {
|
||||
if (typeof widget[key] != "undefined") {
|
||||
if (!widget[key].ignore) {
|
||||
_attrs[key] = et2_checkType(_attrs[key], widget[key].type,
|
||||
key, this);
|
||||
}
|
||||
} else {
|
||||
// Key does not exist - delete it and issue a warning
|
||||
delete (_attrs[key]);
|
||||
egw.debug("warn", this, "Attribute '" + key +
|
||||
"' does not exist in " + _attrs.type + "!");
|
||||
}
|
||||
}
|
||||
|
||||
// Include default values or already set values for this attribute
|
||||
for (var key in widget) {
|
||||
if (typeof _attrs[key] == "undefined") {
|
||||
var _default = widget[key]["default"];
|
||||
if (_default == et2_no_init) {
|
||||
_default = undefined;
|
||||
}
|
||||
|
||||
_attrs[key] = _default;
|
||||
}
|
||||
}
|
||||
|
||||
return _attrs;
|
||||
}
|
||||
|
||||
/**
|
||||
* The initAttributes function sets the attributes to their default
|
||||
* values. The attributes are not overwritten, which means, that the
|
||||
* default is only set, if either a setter exists or this[propName] does
|
||||
* not exist yet.
|
||||
*
|
||||
* @param {object} _attrs is the associative array containing the attributes.
|
||||
*/
|
||||
initAttributes(_attrs)
|
||||
{
|
||||
for (var key in _attrs) {
|
||||
if (typeof this.attributes[key] != "undefined" && !this.attributes[key].ignore && !(_attrs[key] == undefined)) {
|
||||
this.setAttribute(key, _attrs[key], false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static buildAttributes(class_prototype: object)
|
||||
{
|
||||
let class_tree = [];
|
||||
let attributes = {};
|
||||
let n = 0;
|
||||
do {
|
||||
n++;
|
||||
class_tree.push(class_prototype);
|
||||
class_prototype = Object.getPrototypeOf(class_prototype);
|
||||
} while (class_prototype !== ClassWithAttributes && n < 50);
|
||||
|
||||
for (let i = class_tree.length - 1; i >= 0; i--) {
|
||||
attributes = ClassWithAttributes.extendAttributes(attributes, class_tree[i]._attributes);
|
||||
}
|
||||
return attributes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extend current _attributes with the one from the parent class
|
||||
*
|
||||
* This gives inheritance from the parent plus the ability to override in the current class.
|
||||
*
|
||||
* @param _attributes
|
||||
* @param _parent
|
||||
*/
|
||||
static extendAttributes(_parent: object, _attributes: object): object
|
||||
{
|
||||
function _copyMerge(_new, _old)
|
||||
/**
|
||||
* Returns the value of the given attribute. If the property does not
|
||||
* exist, an error message is issued.
|
||||
*
|
||||
* @param {string} _name
|
||||
* @return {*}
|
||||
*/
|
||||
getAttribute(_name)
|
||||
{
|
||||
var result = {};
|
||||
|
||||
// Copy the new object
|
||||
if (typeof _new != "undefined") {
|
||||
for (var key in _new) {
|
||||
result[key] = _new[key];
|
||||
if (typeof this.attributes[_name] != "undefined" &&
|
||||
!this.attributes[_name].ignore)
|
||||
{
|
||||
if (typeof this["get_" + _name] == "function")
|
||||
{
|
||||
return this["get_" + _name]();
|
||||
}
|
||||
else
|
||||
{
|
||||
return this[_name];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Merge the old object
|
||||
for (var key in _old) {
|
||||
if (typeof result[key] == "undefined") {
|
||||
result[key] = _old[key];
|
||||
else
|
||||
{
|
||||
egw.debug("error", this, "Attribute '" + _name + "' does not exist!");
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
var attributes = {};
|
||||
/**
|
||||
* The setAttribute function sets the attribute with the given name to
|
||||
* the given value. _override defines, whether this[_name] will be set,
|
||||
* if this key already exists. _override defaults to true. A warning
|
||||
* is issued if the attribute does not exist.
|
||||
*
|
||||
* @param {string} _name
|
||||
* @param {*} _value
|
||||
* @param {boolean} _override
|
||||
*/
|
||||
setAttribute(_name, _value, _override)
|
||||
{
|
||||
if (typeof this.attributes[_name] != "undefined")
|
||||
{
|
||||
if (!this.attributes[_name].ignore)
|
||||
{
|
||||
if (typeof _override == "undefined")
|
||||
{
|
||||
_override = true;
|
||||
}
|
||||
|
||||
// Copy the old attributes
|
||||
for (var key in _attributes) {
|
||||
attributes[key] = _copyMerge({}, _attributes[key]);
|
||||
var val = et2_checkType(_value, this.attributes[_name].type,
|
||||
_name, this);
|
||||
|
||||
if (typeof this["set_" + _name] == "function")
|
||||
{
|
||||
this["set_" + _name](val);
|
||||
}
|
||||
else if (_override || typeof this[_name] == "undefined")
|
||||
{
|
||||
this[_name] = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
egw.debug("warn", this, "Attribute '" + _name + "' does not exist!");
|
||||
}
|
||||
}
|
||||
|
||||
// Add the old attributes to the new ones. If the attributes already
|
||||
// exist, they are merged.
|
||||
for (var key in _parent) {
|
||||
var _old = _parent[key];
|
||||
/**
|
||||
* generateAttributeSet sanitizes the given associative array of attributes
|
||||
* (by passing each entry to "et2_checkType" and checking for existance of
|
||||
* the attribute) and adds the default values to the associative array.
|
||||
*
|
||||
* @param {object} _attrs is the associative array containing the attributes.
|
||||
*/
|
||||
static generateAttributeSet(widget, _attrs)
|
||||
{
|
||||
// Sanity check and validation
|
||||
for (var key in _attrs)
|
||||
{
|
||||
if (typeof widget[key] != "undefined")
|
||||
{
|
||||
if (!widget[key].ignore)
|
||||
{
|
||||
_attrs[key] = et2_checkType(_attrs[key], widget[key].type,
|
||||
key, this);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// Key does not exist - delete it and issue a warning
|
||||
delete (_attrs[key]);
|
||||
egw.debug("warn", this, "Attribute '" + key +
|
||||
"' does not exist in " + _attrs.type + "!");
|
||||
}
|
||||
}
|
||||
|
||||
attributes[key] = _copyMerge(attributes[key], _old);
|
||||
// Include default values or already set values for this attribute
|
||||
for (var key in widget)
|
||||
{
|
||||
if (typeof _attrs[key] == "undefined")
|
||||
{
|
||||
var _default = widget[key]["default"];
|
||||
if (_default == et2_no_init)
|
||||
{
|
||||
_default = undefined;
|
||||
}
|
||||
|
||||
_attrs[key] = _default;
|
||||
}
|
||||
}
|
||||
|
||||
return _attrs;
|
||||
}
|
||||
|
||||
// Validate the attributes
|
||||
for (var key in attributes) {
|
||||
et2_validateAttrib(key, attributes[key]);
|
||||
/**
|
||||
* The initAttributes function sets the attributes to their default
|
||||
* values. The attributes are not overwritten, which means, that the
|
||||
* default is only set, if either a setter exists or this[propName] does
|
||||
* not exist yet.
|
||||
*
|
||||
* @param {object} _attrs is the associative array containing the attributes.
|
||||
*/
|
||||
initAttributes(_attrs)
|
||||
{
|
||||
for (var key in _attrs)
|
||||
{
|
||||
if (typeof this.attributes[key] != "undefined" && !this.attributes[key].ignore && !(_attrs[key] == undefined))
|
||||
{
|
||||
this.setAttribute(key, _attrs[key], false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return attributes;
|
||||
}
|
||||
static buildAttributes(class_prototype: object)
|
||||
{
|
||||
let class_tree = [];
|
||||
let attributes = {};
|
||||
let n = 0;
|
||||
do
|
||||
{
|
||||
n++;
|
||||
class_tree.push(class_prototype);
|
||||
class_prototype = Object.getPrototypeOf(class_prototype);
|
||||
}
|
||||
while (class_prototype !== ClassWithAttributes && n < 50);
|
||||
|
||||
for (let i = class_tree.length - 1; i >= 0; i--)
|
||||
{
|
||||
attributes = ClassWithAttributes.extendAttributes(attributes, class_tree[i]._attributes);
|
||||
}
|
||||
return attributes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extend current _attributes with the one from the parent class
|
||||
*
|
||||
* This gives inheritance from the parent plus the ability to override in the current class.
|
||||
*
|
||||
* @param _attributes
|
||||
* @param _parent
|
||||
*/
|
||||
static extendAttributes(_parent: object, _attributes: object): object
|
||||
{
|
||||
function _copyMerge(_new, _old)
|
||||
{
|
||||
var result = {};
|
||||
|
||||
// Copy the new object
|
||||
if (typeof _new != "undefined")
|
||||
{
|
||||
for (var key in _new)
|
||||
{
|
||||
result[key] = _new[key];
|
||||
}
|
||||
}
|
||||
|
||||
// Merge the old object
|
||||
for (var key in _old)
|
||||
{
|
||||
if (typeof result[key] == "undefined")
|
||||
{
|
||||
result[key] = _old[key];
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
var attributes = {};
|
||||
|
||||
// Copy the old attributes
|
||||
for (var key in _attributes)
|
||||
{
|
||||
attributes[key] = _copyMerge({}, _attributes[key]);
|
||||
}
|
||||
|
||||
// Add the old attributes to the new ones. If the attributes already
|
||||
// exist, they are merged.
|
||||
for (var key in _parent)
|
||||
{
|
||||
var _old = _parent[key];
|
||||
|
||||
attributes[key] = _copyMerge(attributes[key], _old);
|
||||
}
|
||||
|
||||
// Validate the attributes
|
||||
for (var key in attributes)
|
||||
{
|
||||
et2_validateAttrib(key, attributes[key]);
|
||||
}
|
||||
|
||||
return attributes;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* This mixin will allow any LitElement to become an Et2Widget
|
||||
*
|
||||
* Usage:
|
||||
* @example
|
||||
* export class Et2Loading extends Et2Widget(BXLoading) { ... }
|
||||
* @example
|
||||
* export class Et2Button extends Et2InputWidget(Et2Widget(BXButton)) { ... }
|
||||
*
|
||||
* @see Mixin explanation https://lit.dev/docs/composition/mixins/
|
||||
*/
|
||||
|
||||
type Constructor<T = {}> = new (...args: any[]) => T;
|
||||
export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) => {
|
||||
class Et2WidgetClass extends superClass implements et2_IDOMNode {
|
||||
|
||||
/** et2_widget compatability **/
|
||||
protected _mgrs: et2_arrayMgr[] = [] ;
|
||||
protected _parent: Et2WidgetClass | et2_widget | null = null;
|
||||
private _inst: etemplate2 | null = null;
|
||||
|
||||
/** WebComponent **/
|
||||
static get properties() {
|
||||
return {
|
||||
...super.properties,
|
||||
|
||||
/**
|
||||
* Tooltip which is shown for this element on hover
|
||||
*/
|
||||
statustext: {type: String},
|
||||
|
||||
label: {type: String},
|
||||
onclick: {
|
||||
type: Function,
|
||||
converter: (value) => {
|
||||
debugger;
|
||||
return et2_compileLegacyJS(value, this, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Widget Mixin constructor
|
||||
*
|
||||
* Note the ...args parameter and super() call
|
||||
*
|
||||
* @param args
|
||||
*/
|
||||
constructor(...args: any[]) {
|
||||
super(...args);
|
||||
|
||||
// Provide *default* property values in constructor
|
||||
this.label = "";
|
||||
this.statustext = "";
|
||||
}
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
|
||||
this.set_label(this.label);
|
||||
|
||||
if(this.statustext)
|
||||
{
|
||||
this.egw().tooltipBind(this,this.statustext);
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback()
|
||||
{
|
||||
this.egw().tooltipUnbind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* NOT the setter, since we cannot add to the DOM before connectedCallback()
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
set_label(value)
|
||||
{
|
||||
let oldValue = this.label;
|
||||
|
||||
// Remove old
|
||||
let oldLabels = this.getElementsByClassName("et2_label");
|
||||
while(oldLabels[0])
|
||||
{
|
||||
this.removeChild(oldLabels[0]);
|
||||
}
|
||||
|
||||
let label = document.createElement("span");
|
||||
label.classList.add("et2_label");
|
||||
label.textContent = this.label;
|
||||
// We should have a slot in the template for the label
|
||||
//label.slot="label";
|
||||
this.appendChild(label);
|
||||
this.requestUpdate('label',oldValue);
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handlers
|
||||
*/
|
||||
|
||||
/**
|
||||
* Click handler calling custom handler set via onclick attribute to this.onclick
|
||||
*
|
||||
* @param _ev
|
||||
* @returns
|
||||
*/
|
||||
_handleClick(_ev : MouseEvent) : boolean
|
||||
{
|
||||
if(typeof this.onclick == 'function')
|
||||
{
|
||||
// Make sure function gets a reference to the widget, splice it in as 2. argument if not
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
if(args.indexOf(this) == -1) args.splice(1, 0, this);
|
||||
|
||||
return this.onclick.apply(this, args);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/** et2_widget compatability **/
|
||||
destroy()
|
||||
{
|
||||
// Not really needed, use the disconnectedCallback() and let the browser handle it
|
||||
}
|
||||
isInTree() : boolean
|
||||
{
|
||||
// TODO: Probably should watch the state or something
|
||||
return true;
|
||||
}
|
||||
iterateOver(_callback: Function, _context, _type)
|
||||
{
|
||||
if(et2_implements_registry[_type](this))
|
||||
{
|
||||
_callback.call(_context, this);
|
||||
}
|
||||
// TODO: children
|
||||
}
|
||||
loadingFinished()
|
||||
{
|
||||
/**
|
||||
* This is needed mostly as a bridge between non-WebComponent widgets and
|
||||
* connectedCallback(). It's not really needed if the whole tree is WebComponent.
|
||||
* WebComponents can be added as children immediately after createion, and they handle the
|
||||
* rest themselves with their normal lifecycle (especially connectedCallback(), which is kind
|
||||
* of the equivalent of doLoadingFinished()
|
||||
*/
|
||||
this.getParent().getDOMNode(this).append(this);
|
||||
}
|
||||
getWidgetById(_id)
|
||||
{
|
||||
if (this.id == _id) {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
setParent(new_parent: Et2WidgetClass | et2_widget)
|
||||
{
|
||||
this._parent = new_parent;
|
||||
}
|
||||
getParent() : HTMLElement | et2_widget {
|
||||
let parentNode = this.parentNode;
|
||||
|
||||
// If parent is an old et2_widget, use it
|
||||
if(this._parent)
|
||||
{
|
||||
return this._parent;
|
||||
}
|
||||
|
||||
return <HTMLElement> parentNode;
|
||||
}
|
||||
getDOMNode(): HTMLElement {
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the array manager for the given part
|
||||
*
|
||||
* @param {string} _part which array mgr to set
|
||||
* @param {object} _mgr
|
||||
*/
|
||||
setArrayMgr(_part : string, _mgr : et2_arrayMgr)
|
||||
{
|
||||
this._mgrs[_part] = _mgr;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the array manager object for the given part
|
||||
*
|
||||
* @param {string} managed_array_type name of array mgr to return
|
||||
*/
|
||||
getArrayMgr(managed_array_type : string) : et2_arrayMgr | null
|
||||
{
|
||||
if (this._mgrs && typeof this._mgrs[managed_array_type] != "undefined") {
|
||||
return this._mgrs[managed_array_type];
|
||||
} else if (this.getParent()) {
|
||||
return this.getParent().getArrayMgr(managed_array_type);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an associative array containing the top-most array managers.
|
||||
*
|
||||
* @param _mgrs is used internally and should not be supplied.
|
||||
*/
|
||||
getArrayMgrs(_mgrs? : object)
|
||||
{
|
||||
if (typeof _mgrs == "undefined") {
|
||||
_mgrs = {};
|
||||
}
|
||||
|
||||
// Add all managers of this object to the result, if they have not already
|
||||
// been set in the result
|
||||
for (var key in this._mgrs) {
|
||||
if (typeof _mgrs[key] == "undefined") {
|
||||
_mgrs[key] = this._mgrs[key];
|
||||
}
|
||||
}
|
||||
|
||||
// Recursively applies this function to the parent widget
|
||||
if (this._parent) {
|
||||
this._parent.getArrayMgrs(_mgrs);
|
||||
}
|
||||
|
||||
return _mgrs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether a namespace exists for this element in the content array.
|
||||
* If yes, an own perspective of the content array is created. If not, the
|
||||
* parent content manager is used.
|
||||
*
|
||||
* Constructor attributes are passed in case a child needs to make decisions
|
||||
*/
|
||||
checkCreateNamespace(_attrs? : any)
|
||||
{
|
||||
// Get the content manager
|
||||
var mgrs = this.getArrayMgrs();
|
||||
|
||||
for (var key in mgrs) {
|
||||
var mgr = mgrs[key];
|
||||
|
||||
// Get the original content manager if we have already created a
|
||||
// perspective for this node
|
||||
if (typeof this._mgrs[key] != "undefined" && mgr.perspectiveData.owner == this) {
|
||||
mgr = mgr.parentMgr;
|
||||
}
|
||||
|
||||
// Check whether the manager has a namespace for the id of this object
|
||||
var entry = mgr.getEntry(this.id);
|
||||
if (typeof entry === 'object' && entry !== null || this.id) {
|
||||
// The content manager has an own node for this object, so
|
||||
// create an own perspective.
|
||||
this._mgrs[key] = mgr.openPerspective(this, this.id);
|
||||
} else {
|
||||
// The current content manager does not have an own namespace for
|
||||
// this element, so use the content manager of the parent.
|
||||
delete (this._mgrs[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the instance manager
|
||||
*
|
||||
* @return {etemplate2}
|
||||
*/
|
||||
getInstanceManager()
|
||||
{
|
||||
if (this._inst != null) {
|
||||
return this._inst;
|
||||
} else if (this.getParent()) {
|
||||
return this.getParent().getInstanceManager();
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the path into the data array. By default, array manager takes care of
|
||||
* this, but some extensions need to override this
|
||||
*/
|
||||
getPath()
|
||||
{
|
||||
var path = this.getArrayMgr("content").getPath();
|
||||
|
||||
// Prevent namespaced widgets with value from going an extra layer deep
|
||||
if (this.id && this._createNamespace() && path[path.length - 1] == this.id) path.pop();
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
_createNamespace()
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
egw() : IegwAppLocal
|
||||
{
|
||||
if (this.getParent() != null && !(this.getParent() instanceof HTMLElement))
|
||||
{
|
||||
return (<et2_widget> this.getParent()).egw();
|
||||
}
|
||||
|
||||
// Get the window this object belongs to
|
||||
var wnd = null;
|
||||
// @ts-ignore Technically this doesn't have implements(), but it's mixed in
|
||||
if (this.implements(et2_IDOMNode)) {
|
||||
var node = (<et2_IDOMNode><unknown>this).getDOMNode();
|
||||
if (node && node.ownerDocument) {
|
||||
wnd = node.ownerDocument.parentNode || node.ownerDocument.defaultView;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're the root object, return the phpgwapi API instance
|
||||
return egw('phpgwapi', wnd);
|
||||
}
|
||||
};
|
||||
|
||||
function applyMixins(derivedCtor: any, baseCtors: any[]) {
|
||||
baseCtors.forEach(baseCtor => {
|
||||
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
|
||||
if (name !== 'constructor') {
|
||||
derivedCtor.prototype[name] = baseCtor.prototype[name];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Add some more stuff in
|
||||
applyMixins(Et2WidgetClass, [ClassWithInterfaces]);
|
||||
|
||||
return Et2WidgetClass as unknown as Constructor<et2_IDOMNode> & T;
|
||||
}
|
||||
778
api/js/etemplate/et2_core_webComponent.ts
Normal file
778
api/js/etemplate/et2_core_webComponent.ts
Normal file
@ -0,0 +1,778 @@
|
||||
import {et2_IDOMNode, et2_implements_registry} from "./et2_core_interfaces";
|
||||
import {et2_arrayMgr} from "./et2_core_arrayMgr";
|
||||
import {et2_attribute_registry, et2_registry, et2_widget} from "./et2_core_widget";
|
||||
import {etemplate2} from "./etemplate2";
|
||||
import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions";
|
||||
import {et2_cloneObject, et2_csvSplit} from "./et2_core_common";
|
||||
// @ts-ignore
|
||||
import {IegwAppLocal} from "../jsapi/egw_global";
|
||||
import {ClassWithAttributes, ClassWithInterfaces} from "./et2_core_inheritance";
|
||||
import {LitElement} from "../../../node_modules/lit-element/lit-element.js";
|
||||
import {forEach} from "carbon-web-components/es/globals/internal/collection-helpers";
|
||||
|
||||
/**
|
||||
* This mixin will allow any LitElement to become an Et2Widget
|
||||
*
|
||||
* Usage:
|
||||
* @example
|
||||
* export class Et2Loading extends Et2Widget(BXLoading) { ... }
|
||||
* @example
|
||||
* export class Et2Button extends Et2InputWidget(Et2Widget(BXButton)) { ... }
|
||||
*
|
||||
* @see Mixin explanation https://lit.dev/docs/composition/mixins/
|
||||
*/
|
||||
|
||||
type Constructor<T = {}> = new (...args: any[]) => T;
|
||||
export const Et2Widget = <T extends Constructor<LitElement>>(superClass: T) =>
|
||||
{
|
||||
class Et2WidgetClass extends superClass implements et2_IDOMNode
|
||||
{
|
||||
|
||||
/** et2_widget compatability **/
|
||||
protected _mgrs: et2_arrayMgr[] = [];
|
||||
protected _parent: Et2WidgetClass | et2_widget | null = null;
|
||||
private _inst: etemplate2 | null = null;
|
||||
private supportedWidgetClasses = [];
|
||||
|
||||
/**
|
||||
* Not actually required by et2_widget, but needed to keep track of non-webComponent children
|
||||
*/
|
||||
private _legacy_children: et2_widget[] = [];
|
||||
|
||||
/**
|
||||
* Properties
|
||||
*/
|
||||
private label: string = "";
|
||||
private statustext: string = "";
|
||||
|
||||
|
||||
/** WebComponent **/
|
||||
static get properties()
|
||||
{
|
||||
return {
|
||||
...super.properties,
|
||||
|
||||
/**
|
||||
* Tooltip which is shown for this element on hover
|
||||
*/
|
||||
statustext: {type: String},
|
||||
|
||||
label: {type: String},
|
||||
onclick: {
|
||||
type: Function,
|
||||
converter: (value) =>
|
||||
{
|
||||
debugger;
|
||||
return et2_compileLegacyJS(value, this, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Widget Mixin constructor
|
||||
*
|
||||
* Note the ...args parameter and super() call
|
||||
*
|
||||
* @param args
|
||||
*/
|
||||
constructor(...args: any[])
|
||||
{
|
||||
super(...args);
|
||||
}
|
||||
|
||||
connectedCallback()
|
||||
{
|
||||
super.connectedCallback();
|
||||
|
||||
this.set_label(this.label);
|
||||
|
||||
if (this.statustext)
|
||||
{
|
||||
this.egw().tooltipBind(this, this.statustext);
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback()
|
||||
{
|
||||
this.egw().tooltipUnbind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* NOT the setter, since we cannot add to the DOM before connectedCallback()
|
||||
*
|
||||
* TODO: This is not best practice. Should just set property, DOM modification should be done in render
|
||||
* https://lit-element.polymer-project.org/guide/templates#design-a-performant-template
|
||||
*
|
||||
* @param value
|
||||
*/
|
||||
set_label(value)
|
||||
{
|
||||
let oldValue = this.label;
|
||||
|
||||
// Remove old
|
||||
let oldLabels = this.getElementsByClassName("et2_label");
|
||||
while (oldLabels[0])
|
||||
{
|
||||
this.removeChild(oldLabels[0]);
|
||||
}
|
||||
|
||||
this.label = value;
|
||||
if (value)
|
||||
{
|
||||
let label = document.createElement("span");
|
||||
label.classList.add("et2_label");
|
||||
label.textContent = this.label;
|
||||
// We should have a slot in the template for the label
|
||||
//label.slot="label";
|
||||
this.appendChild(label);
|
||||
this.requestUpdate('label', oldValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Event handlers
|
||||
*/
|
||||
|
||||
/**
|
||||
* Click handler calling custom handler set via onclick attribute to this.onclick
|
||||
*
|
||||
* @param _ev
|
||||
* @returns
|
||||
*/
|
||||
_handleClick(_ev: MouseEvent): boolean
|
||||
{
|
||||
if (typeof this.onclick == 'function')
|
||||
{
|
||||
// Make sure function gets a reference to the widget, splice it in as 2. argument if not
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
if (args.indexOf(this) == -1) args.splice(1, 0, this);
|
||||
|
||||
return this.onclick.apply(this, args);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/** et2_widget compatability **/
|
||||
destroy()
|
||||
{
|
||||
// Not really needed, use the disconnectedCallback() and let the browser handle it
|
||||
}
|
||||
|
||||
isInTree(): boolean
|
||||
{
|
||||
// TODO: Probably should watch the state or something
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads the widget tree from an XML node
|
||||
*
|
||||
* @param _node xml node
|
||||
*/
|
||||
loadFromXML(_node)
|
||||
{
|
||||
// Load the child nodes.
|
||||
for (var i = 0; i < _node.childNodes.length; i++)
|
||||
{
|
||||
var node = _node.childNodes[i];
|
||||
var widgetType = node.nodeName.toLowerCase();
|
||||
|
||||
if (widgetType == "#comment")
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
if (widgetType == "#text")
|
||||
{
|
||||
if (node.data.replace(/^\s+|\s+$/g, ''))
|
||||
{
|
||||
this.innerText = node.data;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// Create the new element
|
||||
this.createElementFromNode(node);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a et2_widget from an XML node.
|
||||
*
|
||||
* First the type and attributes are read from the node. Then the readonly & modifications
|
||||
* arrays are checked for changes specific to the loaded data. Then the appropriate
|
||||
* constructor is called. After the constructor returns, the widget has a chance to
|
||||
* further initialize itself from the XML node when the widget's loadFromXML() method
|
||||
* is called with the node.
|
||||
*
|
||||
* @param _node XML node to read
|
||||
* @param _name XML node name
|
||||
*
|
||||
* @return et2_widget
|
||||
*/
|
||||
createElementFromNode(_node, _name?)
|
||||
{
|
||||
var attributes = {};
|
||||
debugger;
|
||||
// Parse the "readonly" and "type" flag for this element here, as they
|
||||
// determine which constructor is used
|
||||
var _nodeName = attributes["type"] = _node.getAttribute("type") ?
|
||||
_node.getAttribute("type") : _node.nodeName.toLowerCase();
|
||||
var readonly = attributes["readonly"] = this.getArrayMgr("readonlys") ?
|
||||
(<any>this.getArrayMgr("readonlys")).isReadOnly(
|
||||
_node.getAttribute("id"), _node.getAttribute("readonly"),
|
||||
typeof this.readonly !== "undefined" ? this.readonly : false) : false;
|
||||
|
||||
// Check to see if modifications change type
|
||||
var modifications = this.getArrayMgr("modifications");
|
||||
if (modifications && _node.getAttribute("id"))
|
||||
{
|
||||
let entry: any = modifications.getEntry(_node.getAttribute("id"));
|
||||
if (entry == null)
|
||||
{
|
||||
// Try again, but skip the fancy stuff
|
||||
// TODO: Figure out why the getEntry() call doesn't always work
|
||||
entry = modifications.data[_node.getAttribute("id")];
|
||||
if (entry)
|
||||
{
|
||||
this.egw().debug("warn", "getEntry(" + _node.getAttribute("id") + ") failed, but the data is there.", modifications, entry);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Try the root, in case a namespace got missed
|
||||
entry = modifications.getRoot().getEntry(_node.getAttribute("id"));
|
||||
}
|
||||
}
|
||||
if (entry && entry.type && typeof entry.type === 'string')
|
||||
{
|
||||
_nodeName = attributes["type"] = entry.type;
|
||||
}
|
||||
entry = null;
|
||||
}
|
||||
|
||||
// if _nodeName / type-attribute contains something to expand (eg. type="@${row}[type]"),
|
||||
// we need to expand it now as it defines the constructor and by that attributes parsed via parseXMLAttrs!
|
||||
if (_nodeName.charAt(0) == '@' || _nodeName.indexOf('$') >= 0)
|
||||
{
|
||||
_nodeName = attributes["type"] = this.getArrayMgr('content').expandName(_nodeName);
|
||||
}
|
||||
|
||||
let widget = null;
|
||||
if (undefined == window.customElements.get(_nodeName))
|
||||
{
|
||||
// Get the constructor - if the widget is readonly, use the special "_ro"
|
||||
// constructor if it is available
|
||||
var constructor = et2_registry[typeof et2_registry[_nodeName] == "undefined" ? 'placeholder' : _nodeName];
|
||||
if (readonly === true && typeof et2_registry[_nodeName + "_ro"] != "undefined")
|
||||
{
|
||||
constructor = et2_registry[_nodeName + "_ro"];
|
||||
}
|
||||
|
||||
// Parse the attributes from the given XML attributes object
|
||||
this.parseXMLAttrs(_node.attributes, attributes, constructor.prototype);
|
||||
|
||||
// Do an sanity check for the attributes
|
||||
ClassWithAttributes.generateAttributeSet(et2_attribute_registry[constructor.name], attributes);
|
||||
|
||||
// Creates the new widget, passes this widget as an instance and
|
||||
// passes the widgetType. Then it goes on loading the XML for it.
|
||||
widget = new constructor(this, attributes);
|
||||
|
||||
// Load the widget itself from XML
|
||||
widget.loadFromXML(_node);
|
||||
}
|
||||
else
|
||||
{
|
||||
widget = this.loadWebComponent(_nodeName, _node);
|
||||
|
||||
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): HTMLElement
|
||||
{
|
||||
let widget = <Et2WidgetClass>document.createElement(_nodeName);
|
||||
widget.textContent = _node.textContent;
|
||||
|
||||
const widget_class = window.customElements.get(_nodeName);
|
||||
if (!widget_class)
|
||||
{
|
||||
throw Error("Unknown or unregistered WebComponent '" + _nodeName + "', could not find class");
|
||||
}
|
||||
widget.setParent(this);
|
||||
var mgr = widget.getArrayMgr("content");
|
||||
debugger;
|
||||
// Apply any set attributes - widget will do its own coercion
|
||||
_node.getAttributeNames().forEach(attribute =>
|
||||
{
|
||||
let attrValue = _node.getAttribute(attribute);
|
||||
|
||||
// If there is not attribute set, ignore it. Widget sets its own default.
|
||||
if (typeof attrValue === "undefined") return;
|
||||
|
||||
// If the attribute is marked as boolean, parse the
|
||||
// expression as bool expression.
|
||||
if (widget_class.getPropertyOptions(attribute).type == "Boolean")
|
||||
{
|
||||
attrValue = mgr.parseBoolExpression(attrValue);
|
||||
}
|
||||
else
|
||||
{
|
||||
attrValue = mgr.expandName(attrValue);
|
||||
}
|
||||
widget.setAttribute(attribute, attrValue);
|
||||
});
|
||||
|
||||
if (widget_class.getPropertyOptions("value") && widget.set_value)
|
||||
{
|
||||
if (mgr != null)
|
||||
{
|
||||
let val = mgr.getEntry(widget.id, false, true);
|
||||
if (val !== null)
|
||||
{
|
||||
widget.setAttribute("value", val);
|
||||
}
|
||||
}
|
||||
// Check for already inside namespace
|
||||
if (this._createNamespace() && this.getArrayMgr("content").perspectiveData.owner == this)
|
||||
{
|
||||
widget.setAttribute("value", this.getArrayMgr("content").data);
|
||||
}
|
||||
}
|
||||
|
||||
// Children need to be loaded
|
||||
widget.loadFromXML(_node);
|
||||
|
||||
return widget;
|
||||
}
|
||||
|
||||
/**
|
||||
* The parseXMLAttrs function takes an XML DOM attributes object
|
||||
* and adds the given attributes to the _target associative array. This
|
||||
* function also parses the legacyOptions.
|
||||
*
|
||||
* @param _attrsObj is the XML DOM attributes object
|
||||
* @param {object} _target is the object to which the attributes should be written.
|
||||
* @param {et2_widget} _proto prototype with attributes and legacyOptions attribute
|
||||
*/
|
||||
parseXMLAttrs(_attrsObj, _target, _proto)
|
||||
{
|
||||
// Check whether the attributes object is really existing, if not abort
|
||||
if (typeof _attrsObj == "undefined")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Iterate over the given attributes and parse them
|
||||
var mgr = this.getArrayMgr("content");
|
||||
for (var i = 0; i < _attrsObj.length; i++)
|
||||
{
|
||||
var attrName = _attrsObj[i].name;
|
||||
var attrValue = _attrsObj[i].value;
|
||||
|
||||
// Special handling for the legacy options
|
||||
if (attrName == "options" && _proto.constructor.legacyOptions && _proto.constructor.legacyOptions.length > 0)
|
||||
{
|
||||
let legacy = _proto.constructor.legacyOptions || [];
|
||||
let attrs = et2_attribute_registry[Object.getPrototypeOf(_proto).constructor.name] || {};
|
||||
// Check for modifications on legacy options here. Normal modifications
|
||||
// are handled in widget constructor, but it's too late for legacy options then
|
||||
if (_target.id && this.getArrayMgr("modifications").getEntry(_target.id))
|
||||
{
|
||||
var mod: any = this.getArrayMgr("modifications").getEntry(_target.id);
|
||||
if (typeof mod.options != "undefined") attrValue = _attrsObj[i].value = mod.options;
|
||||
}
|
||||
// expand legacyOptions with content
|
||||
if (attrValue.charAt(0) == '@' || attrValue.indexOf('$') != -1)
|
||||
{
|
||||
attrValue = mgr.expandName(attrValue);
|
||||
}
|
||||
|
||||
// Parse the legacy options (as a string, other types not allowed)
|
||||
var splitted = et2_csvSplit(attrValue + "");
|
||||
|
||||
for (var j = 0; j < splitted.length && j < legacy.length; j++)
|
||||
{
|
||||
// Blank = not set, unless there's more legacy options provided after
|
||||
if (splitted[j].trim().length === 0 && legacy.length >= splitted.length) continue;
|
||||
|
||||
// Check to make sure we don't overwrite a current option with a legacy option
|
||||
if (typeof _target[legacy[j]] === "undefined")
|
||||
{
|
||||
attrValue = splitted[j];
|
||||
|
||||
/**
|
||||
If more legacy options than expected, stuff them all in the last legacy option
|
||||
Some legacy options take a comma separated list.
|
||||
*/
|
||||
if (j == legacy.length - 1 && splitted.length > legacy.length)
|
||||
{
|
||||
attrValue = splitted.slice(j);
|
||||
}
|
||||
|
||||
var attr = et2_attribute_registry[_proto.constructor.name][legacy[j]] || {};
|
||||
|
||||
// If the attribute is marked as boolean, parse the
|
||||
// expression as bool expression.
|
||||
if (attr.type == "boolean")
|
||||
{
|
||||
attrValue = mgr.parseBoolExpression(attrValue);
|
||||
}
|
||||
else if (typeof attrValue != "object")
|
||||
{
|
||||
attrValue = mgr.expandName(attrValue);
|
||||
}
|
||||
_target[legacy[j]] = attrValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (attrName == "readonly" && typeof _target[attrName] != "undefined")
|
||||
{
|
||||
// do NOT overwrite already evaluated readonly attribute
|
||||
}
|
||||
else
|
||||
{
|
||||
let attrs = et2_attribute_registry[_proto.constructor.name] || {};
|
||||
if (mgr != null && typeof attrs[attrName] != "undefined")
|
||||
{
|
||||
var attr = attrs[attrName];
|
||||
|
||||
// If the attribute is marked as boolean, parse the
|
||||
// expression as bool expression.
|
||||
if (attr.type == "boolean")
|
||||
{
|
||||
attrValue = mgr.parseBoolExpression(attrValue);
|
||||
}
|
||||
else
|
||||
{
|
||||
attrValue = mgr.expandName(attrValue);
|
||||
}
|
||||
}
|
||||
|
||||
// Set the attribute
|
||||
_target[attrName] = attrValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
iterateOver(_callback: Function, _context, _type)
|
||||
{
|
||||
if (et2_implements_registry[_type] && et2_implements_registry[_type](this))
|
||||
{
|
||||
_callback.call(_context, this);
|
||||
}
|
||||
// TODO: children
|
||||
}
|
||||
|
||||
/**
|
||||
* Needed for legacy compatability.
|
||||
*
|
||||
* @param {Promise[]} promises List of promises from widgets that are not done. Pass an empty array, it will be filled if needed.
|
||||
*/
|
||||
loadingFinished(promises)
|
||||
{
|
||||
/**
|
||||
* This is needed mostly as a bridge between non-WebComponent widgets and
|
||||
* connectedCallback(). It's not really needed if the whole tree is WebComponent.
|
||||
* WebComponents can be added as children immediately after creation, and they handle the
|
||||
* rest themselves with their normal lifecycle (especially connectedCallback(), which is kind
|
||||
* of the equivalent of doLoadingFinished()
|
||||
*/
|
||||
if (this.getParent() instanceof et2_widget)
|
||||
{
|
||||
this.getParent().getDOMNode(this).append(this);
|
||||
}
|
||||
|
||||
for (let i = 0; i < this._legacy_children.length; i++)
|
||||
{
|
||||
let child = this._legacy_children[i];
|
||||
let child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
|
||||
if (child_node && child_node !== this)
|
||||
{
|
||||
this.append(child_node);
|
||||
}
|
||||
child.loadingFinished(promises);
|
||||
}
|
||||
}
|
||||
|
||||
getWidgetById(_id)
|
||||
{
|
||||
if (this.id == _id)
|
||||
{
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
||||
setParent(new_parent: Et2WidgetClass | et2_widget)
|
||||
{
|
||||
this._parent = new_parent;
|
||||
|
||||
if (this.id)
|
||||
{
|
||||
// Create a namespace for this object
|
||||
if (this._createNamespace())
|
||||
{
|
||||
this.checkCreateNamespace();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getParent(): HTMLElement | et2_widget
|
||||
{
|
||||
let parentNode = this.parentNode;
|
||||
|
||||
// If parent is an old et2_widget, use it
|
||||
if (this._parent)
|
||||
{
|
||||
return this._parent;
|
||||
}
|
||||
|
||||
return <HTMLElement>parentNode;
|
||||
}
|
||||
|
||||
addChild(child: et2_widget | Et2WidgetClass)
|
||||
{
|
||||
if (child instanceof et2_widget)
|
||||
{
|
||||
child._parent = this;
|
||||
|
||||
// During legacy widget creation, the child's DOM node won't be available yet.
|
||||
this._legacy_children.push(child);
|
||||
let child_node = typeof child.getDOMNode !== "undefined" ? child.getDOMNode(child) : null;
|
||||
if (child_node && child_node !== this)
|
||||
{
|
||||
this.append(child_node);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
this.append(child);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get [legacy] children
|
||||
* Use <obj>.children to get web component children
|
||||
* @returns {et2_widget[]}
|
||||
*/
|
||||
getChildren()
|
||||
{
|
||||
return this._legacy_children;
|
||||
}
|
||||
|
||||
getType(): string
|
||||
{
|
||||
return this.nodeName;
|
||||
}
|
||||
|
||||
getDOMNode(): HTMLElement
|
||||
{
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the array manager for the given part
|
||||
*
|
||||
* @param {string} _part which array mgr to set
|
||||
* @param {object} _mgr
|
||||
*/
|
||||
setArrayMgr(_part: string, _mgr: et2_arrayMgr)
|
||||
{
|
||||
this._mgrs[_part] = _mgr;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the array manager object for the given part
|
||||
*
|
||||
* @param {string} managed_array_type name of array mgr to return
|
||||
*/
|
||||
getArrayMgr(managed_array_type: string): et2_arrayMgr | null
|
||||
{
|
||||
if (this._mgrs && typeof this._mgrs[managed_array_type] != "undefined")
|
||||
{
|
||||
return this._mgrs[managed_array_type];
|
||||
}
|
||||
else if (this.getParent())
|
||||
{
|
||||
return this.getParent().getArrayMgr(managed_array_type);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets all array manager objects - this function can be used to set the
|
||||
* root array managers of the container object.
|
||||
*
|
||||
* @param {object} _mgrs
|
||||
*/
|
||||
setArrayMgrs(_mgrs)
|
||||
{
|
||||
this._mgrs = <et2_arrayMgr[]>et2_cloneObject(_mgrs);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an associative array containing the top-most array managers.
|
||||
*
|
||||
* @param _mgrs is used internally and should not be supplied.
|
||||
*/
|
||||
getArrayMgrs(_mgrs?: object)
|
||||
{
|
||||
if (typeof _mgrs == "undefined")
|
||||
{
|
||||
_mgrs = {};
|
||||
}
|
||||
|
||||
// Add all managers of this object to the result, if they have not already
|
||||
// been set in the result
|
||||
for (var key in this._mgrs)
|
||||
{
|
||||
if (typeof _mgrs[key] == "undefined")
|
||||
{
|
||||
_mgrs[key] = this._mgrs[key];
|
||||
}
|
||||
}
|
||||
|
||||
// Recursively applies this function to the parent widget
|
||||
if (this._parent)
|
||||
{
|
||||
this._parent.getArrayMgrs(_mgrs);
|
||||
}
|
||||
|
||||
return _mgrs;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether a namespace exists for this element in the content array.
|
||||
* If yes, an own perspective of the content array is created. If not, the
|
||||
* parent content manager is used.
|
||||
*
|
||||
* Constructor attributes are passed in case a child needs to make decisions
|
||||
*/
|
||||
checkCreateNamespace()
|
||||
{
|
||||
// Get the content manager
|
||||
var mgrs = this.getArrayMgrs();
|
||||
|
||||
for (var key in mgrs)
|
||||
{
|
||||
var mgr = mgrs[key];
|
||||
|
||||
// Get the original content manager if we have already created a
|
||||
// perspective for this node
|
||||
if (typeof this._mgrs[key] != "undefined" && mgr.perspectiveData.owner == this)
|
||||
{
|
||||
mgr = mgr.parentMgr;
|
||||
}
|
||||
|
||||
// Check whether the manager has a namespace for the id of this object
|
||||
var entry = mgr.getEntry(this.id);
|
||||
if (typeof entry === 'object' && entry !== null || this.id)
|
||||
{
|
||||
// The content manager has an own node for this object, so
|
||||
// create an own perspective.
|
||||
this._mgrs[key] = mgr.openPerspective(this, this.id);
|
||||
}
|
||||
else
|
||||
{
|
||||
// The current content manager does not have an own namespace for
|
||||
// this element, so use the content manager of the parent.
|
||||
delete (this._mgrs[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the instance manager
|
||||
*
|
||||
* @return {etemplate2}
|
||||
*/
|
||||
getInstanceManager()
|
||||
{
|
||||
if (this._inst != null)
|
||||
{
|
||||
return this._inst;
|
||||
}
|
||||
else if (this.getParent())
|
||||
{
|
||||
return this.getParent().getInstanceManager();
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the path into the data array. By default, array manager takes care of
|
||||
* this, but some extensions need to override this
|
||||
*/
|
||||
getPath()
|
||||
{
|
||||
var path = this.getArrayMgr("content").getPath();
|
||||
|
||||
// Prevent namespaced widgets with value from going an extra layer deep
|
||||
if (this.id && this._createNamespace() && path[path.length - 1] == this.id) path.pop();
|
||||
|
||||
return path;
|
||||
}
|
||||
|
||||
_createNamespace(): boolean
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
egw(): IegwAppLocal
|
||||
{
|
||||
if (this.getParent() != null && !(this.getParent() instanceof HTMLElement))
|
||||
{
|
||||
return (<et2_widget>this.getParent()).egw();
|
||||
}
|
||||
|
||||
// Get the window this object belongs to
|
||||
var wnd = null;
|
||||
// @ts-ignore Technically this doesn't have implements(), but it's mixed in
|
||||
if (this.implements(et2_IDOMNode))
|
||||
{
|
||||
var node = (<et2_IDOMNode><unknown>this).getDOMNode();
|
||||
if (node && node.ownerDocument)
|
||||
{
|
||||
wnd = node.ownerDocument.parentNode || node.ownerDocument.defaultView;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're the root object, return the phpgwapi API instance
|
||||
return egw('phpgwapi', wnd);
|
||||
}
|
||||
};
|
||||
|
||||
function applyMixins(derivedCtor: any, baseCtors: any[])
|
||||
{
|
||||
baseCtors.forEach(baseCtor =>
|
||||
{
|
||||
Object.getOwnPropertyNames(baseCtor.prototype).forEach(name =>
|
||||
{
|
||||
if (name !== 'constructor')
|
||||
{
|
||||
derivedCtor.prototype[name] = baseCtor.prototype[name];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Add some more stuff in
|
||||
applyMixins(Et2WidgetClass, [ClassWithInterfaces]);
|
||||
|
||||
return Et2WidgetClass as unknown as Constructor<et2_IDOMNode> & T;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -23,6 +23,7 @@ import {et2_nextmatch, et2_nextmatch_header_bar} from "./et2_extension_nextmatch
|
||||
import {et2_tabbox} from "./et2_widget_tabs";
|
||||
import '../jsapi/egw_json.js';
|
||||
import {egwIsMobile} from "../egw_action/egw_action_common.js";
|
||||
import './et2-box';
|
||||
import './et2-button';
|
||||
import './et2-textbox';
|
||||
/* Include all widget classes here, we only care about them registering, not importing anything*/
|
||||
|
||||
@ -217,20 +217,16 @@
|
||||
</row>
|
||||
<row disabled="!@info_owner" class="dialogOperators">
|
||||
<description value="Owner"/>
|
||||
<hbox width="100%">
|
||||
<menulist>
|
||||
<menupopup type="select-account" id="info_owner" readonly="true"/>
|
||||
</menulist>
|
||||
<et2-hbox>
|
||||
<select-account id="info_owner" readonly="true"/>
|
||||
<date-time id="info_created" readonly="true" align="right"/>
|
||||
</hbox>
|
||||
</et2-hbox>
|
||||
<description/>
|
||||
<description value="Last modified"/>
|
||||
<hbox width="100%">
|
||||
<menulist>
|
||||
<menupopup type="select-account" id="info_modifier" readonly="true"/>
|
||||
</menulist>
|
||||
<et2-hbox>
|
||||
<select-account id="info_modifier" readonly="true"/>
|
||||
<date-time id="info_datemodified" readonly="true" align="right"/>
|
||||
</hbox>
|
||||
</et2-hbox>
|
||||
</row>
|
||||
<row class="dialogFooterToolbar">
|
||||
<hbox span="6">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user