extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-06 02:02:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use Lion's SlotMixin to handle button icon instead of managing it ourselves

Browse Source
This commit is contained in:
nathan 2021-08-23 11:49:17 -06:00
parent 17b4278ca2
commit e3e3def64c
1 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
api/js/etemplate/Et2Button.ts
View File

@ -11,10 +11,11 @@
import {css, html} from "../../../node_modules/@lion/core/index.js";
import {LionButton} from "../../../node_modules/@lion/button/index.js";
import {SlotMixin} from "../../../node_modules/@lion/core/src/SlotMixin.js";
import {Et2InputWidget} from "./et2_core_inputWidget";
import {Et2Widget} from "./Et2Widget";
export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
export class Et2Button extends Et2InputWidget(Et2Widget(SlotMixin(LionButton)))
{
protected _created_icon_node : HTMLImageElement;
protected clicked : boolean = false;
@ -50,6 +51,17 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
}
}
get slots()
{
return {
...super.slots,
icon: () =>
{
return document.createElement("img");
}
}
}
constructor()
{
super();
@ -57,10 +69,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
// 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
// Do not add 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
@ -78,8 +87,7 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
if(this.image)
{
this._created_icon_node.src = egw.image(this.image);
this.appendChild(this._created_icon_node);
this._iconNode.src = egw.image(this.image);
}
}
@ -110,7 +118,10 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
render()
{
if(this.readonly) return '';
if(this.readonly)
{
return '';
}
return html`
<div class="button-content et2_button" id="${this._buttonId}">
@ -119,6 +130,13 @@ export class Et2Button extends Et2InputWidget(Et2Widget(LionButton))
</div> `;
}
get _iconNode() : HTMLImageElement
{
return <HTMLImageElement>(Array.from(this.children)).find(
el => el.slot === "icon",
);
}
/**
* Implementation of the et2_IInput interface
*/