Files: 03ce3474ce130d4761d364412f79db838997ddb9 / about / html / avatar.js
904 bytesRaw
| 1 | const nest = require('depnest') |
| 2 | const { h, computed } = require('mutant') |
| 3 | |
| 4 | exports.gives = nest('about.html.avatar') |
| 5 | |
| 6 | exports.needs = nest({ |
| 7 | 'about.obs': { |
| 8 | color: 'first', |
| 9 | imageUrl: 'first' |
| 10 | }, |
| 11 | 'about.html.link': 'first' |
| 12 | }) |
| 13 | |
| 14 | exports.create = function (api) { |
| 15 | return nest('about.html.avatar', avatar) |
| 16 | |
| 17 | function avatar (id, size) { |
| 18 | const src = api.about.obs.imageUrl(id) |
| 19 | const color = computed(src, src => src.match(/^http/) ? 'rgba(0,0,0,0)' : api.about.obs.color(id)) |
| 20 | |
| 21 | const avatar = api.about.html.link(id, |
| 22 | h('img', { |
| 23 | style: { 'background-color': color }, |
| 24 | src |
| 25 | }) |
| 26 | ) |
| 27 | avatar.classList.add('Avatar') |
| 28 | avatar.style.setProperty('--avatar-size', getSize(size)) |
| 29 | |
| 30 | return avatar |
| 31 | } |
| 32 | } |
| 33 | |
| 34 | function getSize (size) { |
| 35 | if (typeof size === 'number') return `${size}rem` |
| 36 | if (typeof size === 'string' && size.length) return size |
| 37 | return '4rem' |
| 38 | } |
| 39 |
Built with git-ssb-web