j-Avatar

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

supports themes
it's singleton
inspiration from react-user-avatar

Themes:

Avatar component needs to register your own theme. It contains default theme.

SETTER(true, 'avatar', 'register', 'THEME_NAME', 'options')

Options can contain:

size {Number} Optional, a size in pixels (default: 100)
lighten {Number} Optional, the font color will be lightened by lighten factor of background color (default: 80 | from -255 to 255)
radius {Number} Optional, how rounded border corners will be (default: 50)
background {Hex} Optional, set background color (default: selected from colors Array)
color {Hex} Optional, set font color (default: generated from background color by lighten)
font {String} Optional, set font family (default: Arial)
weight {String} Optional, font-weight (default: bold)
class {String} Optional, this property perfoms toggleClass for this class

Usage:

Each element of avatar needs to contain avatar class like this: <div class="avatar">. Here are custom attributes:

data-a="THEME_NAME" Optional, can contain a theme name (default: default)
data-a-url="URL_TO_PICTURE" Optional, can contain a URL for user photo
data-a-class="class_for_toggle_effect" Optional, can contain a class for toggleClass effect

Element needs to contain a user name, for example:

<div class="avatar">Peter Širka</div> or
<a href="#" class="avatar">Peter Širka</a>

Good to know:

avatar component binds all new avatars in all new components automatically
SETTER('avatar', 'refresh') performs refreshing

Use it with <ui-component name="avatar">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Denis Granec. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="avatar"></ui-component>

<a href="https://www.totaljs.com" class="avatar hidden" data-a-class="hidden" data-a-url="https://scontent.fbts5-1.fna.fbcdn.net/v/t1.0-9/12552918_10209045123711641_5810437084053575333_n.jpg?oh=f0d9f5acdbab2f1f2cf165bf9aed8da5&oe=5A3F378D">Peter Širka</a>
<div class="avatar hidden" data-a-class="hidden">Martin Smola</div>
<div class="avatar hidden" data-a-class="hidden" data-a-url="https://avatars3.githubusercontent.com/u/7585285?v=4&s=460">Denis Granec</div>
<div class="avatar hidden" data-a-class="hidden">Denis Oliver</div>
<div class="avatar hidden" data-a="black">Kristle Leverone</div>
<div class="avatar hidden" data-a="black">Denis</div>
<div class="avatar hidden" data-a="black">Peter</div>

<script>
	// Registers a new theme
	SETTER(true, 'avatar/register', 'black', 'background:black;color:white;class:hidden');
</script>