extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 16:03:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Image: Use slotted image so most CSS still works

Browse Source
This commit is contained in:
nathan 2022-04-13 10:37:55 -06:00
parent 0d6d18e3fa
commit 748e2ee70e
1 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
api/js/etemplate/Et2Image/Et2Image.ts
View File

@ -9,11 +9,11 @@
*/
import {css, html, LitElement} from "@lion/core";
import {css, html, LitElement, SlotMixin} from "@lion/core";
import {Et2Widget} from "../Et2Widget/Et2Widget";
import {et2_IDetachedDOM} from "../et2_core_interfaces";
export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
export class Et2Image extends Et2Widget(SlotMixin(LitElement)) implements et2_IDetachedDOM
{
static get styles()
{
@ -23,9 +23,9 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
:host {
display: inline-block;
}
img {
height: 100%;
width: 100%;
::slotted(img) {
max-height: 100%;
max-width: 100%;
}
`,
];
@ -83,6 +83,16 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
}
}
get slots()
{
return {
'': () =>
{
return this._imageTemplate();
}
}
}
constructor()
{
super();
@ -101,7 +111,7 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
this._handleClick = this._handleClick.bind(this);
}
render()
eTemplate()
{
let src = this.parse_href(this.src) || this.parse_href(this.default_src);
if(!src)
@ -117,6 +127,12 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
>`;
}
render()
{
return html`
<slot></slot>`;
}
protected parse_href(img_href : string) : string
{
@ -145,6 +161,11 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
}
}
get _img()
{
return this.__getDirectSlotChild('img');
}
/**
* Handle changes that have to happen based on changes to properties
*
@ -158,6 +179,13 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
{
this.classList.toggle("et2_clickable", this.href || this.onclick)
}
for(const changedPropertiesKey in changedProperties)
{
if(Et2Image.getPropertyOptions()[changedPropertiesKey])
{
this._img[changedPropertiesKey] = this[changedPropertiesKey];
}
}
}
transformAttributes(_attrs : any)