diff --git a/public/src/modules/helpers.common.js b/public/src/modules/helpers.common.js
index d1ff893659..00c0e29184 100644
--- a/public/src/modules/helpers.common.js
+++ b/public/src/modules/helpers.common.js
@@ -267,32 +267,31 @@ module.exports = function (utils, Benchpress, relative_path) {
userObj = this;
}
- const attributes = [
- 'alt="' + userObj.username + '"',
- 'title="' + userObj.username + '"',
- 'data-uid="' + userObj.uid + '"',
- 'loading="lazy"',
- ];
+ const attributes = new Map([
+ ['alt', userObj.username],
+ ['title', userObj.username],
+ ['data-uid', userObj.uid],
+ ['loading', 'lazy'],
+ ]);
const styles = [`--avatar-size: ${size};`];
+ const attr2String = attributes => Array.from(attributes).reduce((output, [prop, value]) => {
+ output += ` ${prop}="${value}"`;
+ return output;
+ }, '');
classNames = classNames || '';
- attributes.unshift(`class="avatar ${classNames}${rounded ? ' avatar-rounded' : ''}"`);
-
- // Component override -- FIXME
- if (component) {
- attributes.push('component="' + component + '"');
- } else {
- attributes.push('component="avatar/' + (userObj.picture ? 'picture' : 'icon') + '"');
- }
+ attributes.set('class', `avatar ${classNames}${rounded ? ' avatar-rounded' : ''}`);
let output = '';
if (userObj.picture) {
- output += '
';
+ attributes.set('component', component || 'avatar/picture');
+ output += '
';
}
+ attributes.set('component', component || 'avatar/icon');
styles.push('background-color: ' + userObj['icon:bgColor'] + ';');
- output += '' + userObj['icon:text'] + '';
+ output += '' + userObj['icon:text'] + '';
return output;
}