File size: 2,352 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import { makeElement, effect, isBrowser, omit, overridable, styleToString, toWritableStores, } from '../../internal/helpers/index.js';
import { writable } from 'svelte/store';
const defaults = {
src: '',
delayMs: 0,
onLoadingStatusChange: undefined,
};
export const createAvatar = (props) => {
const withDefaults = { ...defaults, ...props };
const options = toWritableStores(omit(withDefaults, 'loadingStatus', 'onLoadingStatusChange'));
const { src, delayMs } = options;
const loadingStatusWritable = withDefaults.loadingStatus ?? writable('loading');
const loadingStatus = overridable(loadingStatusWritable, withDefaults?.onLoadingStatusChange);
effect([src, delayMs], ([$src, $delayMs]) => {
if (isBrowser) {
const image = new Image();
image.src = $src;
image.onload = () => {
if (delayMs !== undefined) {
const timerId = window.setTimeout(() => {
loadingStatus.set('loaded');
}, $delayMs);
return () => window.clearTimeout(timerId);
}
else {
loadingStatus.set('loaded');
}
};
image.onerror = () => {
loadingStatus.set('error');
};
}
});
const image = makeElement('avatar-image', {
stores: [src, loadingStatus],
returned: ([$src, $loadingStatus]) => {
const imageStyles = styleToString({
display: $loadingStatus === 'loaded' ? 'block' : 'none',
});
return {
src: $src,
style: imageStyles,
};
},
});
const fallback = makeElement('avatar-fallback', {
stores: [loadingStatus],
returned: ([$loadingStatus]) => {
return {
style: $loadingStatus === 'loaded'
? styleToString({
display: 'none',
})
: undefined,
hidden: $loadingStatus === 'loaded' ? true : undefined,
};
},
});
return {
elements: {
image,
fallback,
},
states: {
loadingStatus,
},
options,
};
};
|