mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 16:44:20 +01:00
Et2Image: Use slotted image so most CSS still works
This commit is contained in:
parent
0d6d18e3fa
commit
748e2ee70e
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user