extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-22 05:12:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

forward width, height and style to img tag and use decorators

Browse Source
This commit is contained in:
ralf 2024-08-14 18:44:05 +02:00
parent 9fb4c0ab9a
commit 58ed15b849
1 changed files with 66 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,10 +8,13 @@
* @author Nathan Gray
*/
import {css, html, LitElement, render} from "lit";
import {css, html, LitElement, render, nothing} from "lit";
import {Et2Widget} from "../Et2Widget/Et2Widget";
import {et2_IDetachedDOM} from "../et2_core_interfaces";
import {property} from "lit/decorators/property.js";
import {customElement} from "lit/decorators/custom-element.js";
@customElement("et2-image")
export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
{
static get styles()
@ -34,60 +37,66 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
`];
}
static get properties()
{
return {
...super.properties,
/**
* The label of the image
* Actually not used as label, but we put it as title
*/
@property({type: String})
label = "";
/**
* The label of the image
* Actually not used as label, but we put it as title
*/
label: {
type: String
},
/**
* Image
* Displayed image
*/
@property({type: String})
src = "";
/**
* Image
* Displayed image
*/
src: {type: String},
/**
* Default image
* Image to use if src is not found
*/
@property({type: String})
defaultSrc = "";
/**
* Default image
* Image to use if src is not found
*/
defaultSrc: {type: String},
/**
* Link Target
* Link URL, empty if you don't wan't to display a link.
*/
@property({type: String})
href = "";
/**
* Link Target
* Link URL, empty if you don't wan't to display a link.
*/
href: {type: String},
/**
* Link target
* Link target descriptor
*/
@property({type: String})
extraLinkTarget = "_self";
/**
* Link target
* Link target descriptor
*/
extraLinkTarget: {type: String},
/**
* Popup
* widthxheight, if popup should be used, eg. 640x480
*/
@property({type: String})
extraLinkPopup = "";
/**
* Popup
* widthxheight, if popup should be used, eg. 640x480
*/
extraLinkPopup: {type: String},
}
}
/**
* Width of image
*/
@property({type: String})
width;
/**
* Height of image
*/
@property({type: String})
height;
@property({type: String})
style;
constructor()
{
super();
this.src = "";
this.defaultSrc = "";
this.href = "";
this.label = "";
this.extraLinkTarget = "_self";
this.extraLinkPopup = "";
this._handleClick = this._handleClick.bind(this);
}
@ -97,28 +106,34 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
super.connectedCallback();
}
_imageTemplate()
render()
{
let src = this.parse_href(this.src) || this.parse_href(this.defaultSrc);
if(!src)
{
// Hide if no valid image
return '';
return html``;
}
return html`
<img ${this.id ? html`id="${this.id}"` : ''}
src="${src}"
alt="${this.label}"
width="${this.width || nothing}"
height="${this.height || nothing}"
style="${this.style || nothing}"
part="image"
loading="lazy"
title="${this.statustext || this.label}"
>`;
}
render()
/**
* Puts the rendered content / img-tag in light DOM
* @link https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot
*/
protected createRenderRoot()
{
return html`
<slot></slot>`;
return this;
}
protected parse_href(img_href : string) : string
@ -235,6 +250,4 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
this[attr] = _values[attr];
}
}
}
customElements.define("et2-image", Et2Image)//, {extends: 'img'});
}