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

Compare commits

base: tp-elements:main
Branches Tags
tp-elements:main
tp-elements:1.0.2
..
compare: tp-elements:1.0.2
Branches Tags
tp-elements:main
tp-elements:1.0.2

No commits in common. "main" and "1.0.2" have entirely different histories.
main ... 1.0.2

2 changed files with 11 additions and 15 deletions
Show Stats Expand all files Collapse all files

5
package.json
View File

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

21
tp-avatar.js
View File

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