pinafore/src/routes/_components/Avatar.html

87 lines
1.9 KiB
HTML
Raw Normal View History

{#if error}
<svg class={computedClass} style={svgStyle} aria-hidden="true">
<use xlink:href="#fa-user" />
2018-01-15 06:41:19 +01:00
</svg>
{:elseif $autoplayGifs}
<LazyImage
className={computedClass}
ariaHidden="true"
forceSize=true
alt=""
src={account.avatar}
{width}
{height}
on:imgLoad="set({loaded: true})"
on:imgLoadError="set({error: true})" />
{:else}
<NonAutoplayImg
className={computedClass}
ariaHidden="true"
alt=""
src={account.avatar}
staticSrc={account.avatar_static}
{width}
{height}
{isLink}
on:imgLoad="set({loaded: true})"
on:imgLoadError="set({error: true})"
/>
{/if}
2018-01-11 05:45:02 +01:00
<style>
:global(.avatar) {
border-radius: 4px;
2018-04-09 02:36:05 +02:00
background: var(--loading-bg);
}
:global(.avatar.loaded) {
background: none;
}
2018-01-16 17:38:23 +01:00
svg.avatar {
2018-01-15 06:41:19 +01:00
fill: var(--deemphasized-text-color);
}
2018-01-11 05:45:02 +01:00
</style>
<script>
2018-02-09 02:56:20 +01:00
import { store } from '../_store/store'
import NonAutoplayImg from './NonAutoplayImg.html'
import { classname } from '../_utils/classname'
import LazyImage from './LazyImage.html'
2018-01-23 06:47:29 +01:00
2018-01-11 05:45:02 +01:00
export default {
data: () => ({
className: void 0,
loaded: false,
error: void 0,
isLink: false,
size: 'medium'
}),
store: () => store,
computed: {
computedClass: ({ className, loaded }) => (classname(
'avatar',
className,
loaded && 'loaded'
)),
width: ({ size, $isMobileSize }) => {
switch (size) {
case 'extra-small':
return 24
case 'small':
return 48
case 'big':
return $isMobileSize ? 80 : 100
case 'medium':
default:
return 64
}
},
height: ({ width }) => width,
svgStyle: ({ width, height }) => `width: ${width}px; height: ${height}px;`
},
components: {
NonAutoplayImg,
LazyImage
2018-01-15 06:41:19 +01:00
}
2018-01-11 05:45:02 +01:00
}
</script>