tp-elements/tp-avatar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes

Browse Source
This commit is contained in:
trading_peter 2024-12-29 23:16:13 +01:00
parent 2afe9d1965
commit fc1f20f50c
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@tp/tp-avatar",
"version": "1.0.3",
"version": "1.0.4",
"description": "",
"main": "tp-avatar.js",
"scripts": {
@ -13,6 +13,7 @@
"author": "trading_peter",
"license": "Apache-2.0",
"dependencies": {
"lit": "^3.0.0"
"lit": "^3.0.0",
"@tp/helpers": "^1.0.0"
}
}

15
tp-avatar.js
View File

@ -7,8 +7,9 @@ This program is available under Apache License Version 2.0
import '@tp/tp-icon/tp-icon.js';
import { LitElement, html, css, svg } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { DomQuery } from '@tp/helpers/dom-query.js';
class TpAvatar extends LitElement {
class TpAvatar extends DomQuery(LitElement) {
static get styles() {
return [
css`
@ -25,8 +26,8 @@ class TpAvatar extends LitElement {
}
#avatarImg {
width: var(--era-avatar-size, 32px);
height: var(--era-avatar-size, 32px);
width: var(--tp-avatar-size, 32px);
height: var(--tp-avatar-size, 32px);
background-size: cover;
background-position: center center;
border-radius: 50%;
@ -61,8 +62,8 @@ class TpAvatar extends LitElement {
const { loaded, hasSrc } = this;
return html`
<div id="avatarImg" class=${classMap({ visible: loaded, hidden: !loaded })}></div>
<tp-icon id="placeHolder" .icon=${TpAvatar.defaultAccountIcon} class=${classMap({ visible: !loaded || !hasSrc, hidden: loaded && hasSrc})}></tp-icon>
<div id="avatarImg" part="avatarImg" class=${classMap({ visible: loaded, hidden: !loaded })}></div>
<tp-icon id="placeHolder" part="placeholder" .icon=${TpAvatar.defaultAccountIcon} class=${classMap({ visible: !loaded || !hasSrc, hidden: loaded && hasSrc})}></tp-icon>
`;
}
@ -90,13 +91,13 @@ class TpAvatar extends LitElement {
if (this.src !== changes.get('src')) {
this.hasSrc = true;
if (newSrc.indexOf(this.baseUrl) !== 0 && !this.hasSchema(newSrc)) {
if (this.src.indexOf(this.baseUrl) !== 0 && !this.hasSchema(this.src)) {
this.src = this.baseUrl + this.src;
return;
}
this.loaded = false;
if (Boolean(newSrc)) {
if (Boolean(this.src)) {
this.loadImage();
}
}