holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests 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 {Et2Widget} from "../Et2Widget/Et2Widget";
import {et2_IDetachedDOM} from "../et2_core_interfaces"; 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() static get styles()
{ {
@ -23,9 +23,9 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
:host { :host {
display: inline-block; display: inline-block;
} }
img { ::slotted(img) {
height: 100%; max-height: 100%;
width: 100%; max-width: 100%;
} }
`, `,
]; ];
@ -83,6 +83,16 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
} }
} }
get slots()
{
return {
'': () =>
{
return this._imageTemplate();
}
}
}
constructor() constructor()
{ {
super(); super();
@ -101,7 +111,7 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
this._handleClick = this._handleClick.bind(this); this._handleClick = this._handleClick.bind(this);
} }
render() eTemplate()
{ {
let src = this.parse_href(this.src) || this.parse_href(this.default_src); let src = this.parse_href(this.src) || this.parse_href(this.default_src);
if(!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 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 * 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) 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) transformAttributes(_attrs : any)