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

fix JS TypeError caused by style property by allowing CSS functions like calc() in width and height property of et2-image

Browse Source 
maybe we want that for all widgets ..
This commit is contained in:
ralf 2024-08-15 10:32:48 +02:00
parent 861bb8e846
commit 0cad204a23
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,20 +81,23 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
extraLinkPopup = ""; extraLinkPopup = "";
/** /**
* Width of image * Width of image:
* - either number of px (e.g. 32) or
* - string incl. CSS unit (e.g. "32px") or
* - even CSS functions like e.g. "calc(1rem + 2px)"
*/ */
@property({type: String}) @property({type: String})
width; width;
/** /**
* Height of image * Height of image:
* - either number of px (e.g. 32) or
* - string incl. CSS unit (e.g. "32px") or
* - even CSS functions like e.g. "calc(1rem + 2px)"
*/ */
@property({type: String}) @property({type: String})
height; height;
@property({type: String})
style;
constructor() constructor()
{ {
super(); super();
@ -125,9 +128,7 @@ export class Et2Image extends Et2Widget(LitElement) implements et2_IDetachedDOM
<img ${this.id ? html`id="${this.id}"` : ''} <img ${this.id ? html`id="${this.id}"` : ''}
src="${src}" src="${src}"
alt="${this.label}" alt="${this.label}"
width="${this.width || (this.height ? nothing : '100%')}" style="${this.height ? 'height: '+this.height+(isNaN(this.height)?'':'px')+'; ' : ''}width: ${this.width ? this.width+(isNaN(this.width)?'':'px') : (this.height ? 'auto' : '100%')};"
height="${this.height || nothing}"
style="${this.style || nothing}"
part="image" part="image"
loading="lazy" loading="lazy"
title="${this.statustext || this.label}" title="${this.statustext || this.label}"