refactor: replace avatar conditional code with buildAvatar helper (#7681)

* feat: helper for building avatars

* feat: benchpress truefalse globals, componentPrefix in buildAvatar

* refactor: remove componentPrefix

* feat: changes to buildAvatar helper

- removed extra .avatar-xl class in generics.less
- added support for component override
- "size" can be a number now

* fix: prevent overflow of alt text in avatars

* fix: update doc on buildAvatar helper

public/less/generics.less

@@ -75,6 +75,7 @@
 	text-align: center;
 	color: @gray-lighter;
 	font-weight: normal;
+	overflow: hidden;	/* stops alt text from overflowing past boundaries if image does not load */
 
 	&:before {
 		content: '';
@@ -118,12 +119,6 @@
 		.user-icon-style(128px, 7.5rem);
 	}
 
-	&.avatar-xl {
-		width: 128px;
-		height: 128px;
-		.user-icon-style(128px, 7.5rem);
-	}
-
 	&.avatar-rounded {
 		border-radius: 50%;
 	}

public/src/client/account/edit.js

@@ -65,10 +65,10 @@ define('forum/account/edit', ['forum/account/header', 'translator', 'components'
 		if (!picture && ajaxify.data.defaultAvatar) {
 			picture = ajaxify.data.defaultAvatar;
 		}
-		components.get('header/userpicture')[picture ? 'show' : 'hide']();
-		components.get('header/usericon')[!picture ? 'show' : 'hide']();
+		$('#header [component="avatar/picture"]')[picture ? 'show' : 'hide']();
+		$('#header [component="avatar/icon"]')[!picture ? 'show' : 'hide']();
 		if (picture) {
-			components.get('header/userpicture').attr('src', picture);
+			$('#header [component="avatar/picture"]').attr('src', picture);
 		}
 	}
 

public/src/modules/helpers.js

@@ -10,6 +10,9 @@
 		});
 	}
 }(function (utils, Benchpress, relative_path) {
+	Benchpress.setGlobal('true', true);
+	Benchpress.setGlobal('false', false);
+
 	var helpers = {
 		displayMenuItem: displayMenuItem,
 		buildMetaTag: buildMetaTag,
@@ -26,6 +29,7 @@
 		renderTopicImage: renderTopicImage,
 		renderDigestAvatar: renderDigestAvatar,
 		userAgentIcons: userAgentIcons,
+		buildAvatar: buildAvatar,
 		register: register,
 		__escape: identity,
 	};
@@ -269,6 +273,49 @@
 		return icons;
 	}
 
+	function buildAvatar(userObj, size, rounded, classNames, component) {
+		/**
+		 * userObj requires:
+		 *   - uid, picture, icon:bgColor, icon:text (getUserField w/ "picture" should return all 4), username
+		 * size: one of "xs", "sm", "md", "lg", or "xl" (required), or an integer
+		 * rounded: true or false (optional, default false)
+		 * classNames: additional class names to prepend (optional, default none)
+		 * component: overrides the default component (optional, default none)
+		 */
+
+		var attributes = [
+			'alt="' + userObj.username + '"',
+			'title="' + userObj.username + '"',
+			'data-uid="' + userObj.uid + '"',
+		];
+		var styles = [];
+		classNames = classNames || '';
+
+		// Validate sizes, handle integers, otherwise fall back to `avatar-sm`
+		if (['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
+			classNames += ' avatar-' + size;
+		} else if (!isNaN(parseInt(size, 10))) {
+			styles.push('width: ' + size + 'px;', 'height: ' + size + 'px;', 'line-height: ' + size + 'px;', 'font-size: ' + (parseInt(size, 10) / 16) + 'rem;');
+		} else {
+			classNames += ' avatar-sm';
+		}
+		attributes.unshift('class="avatar ' + classNames + (rounded ? ' avatar-rounded' : '') + '"');
+
+		// Component override
+		if (component) {
+			attributes.push('component="' + component + '"');
+		} else {
+			attributes.push('component="avatar/' + (userObj.picture ? 'picture' : 'icon') + '"');
+		}
+
+		if (userObj.picture) {
+			return '<img ' + attributes.join(' ') + ' src="' + userObj.picture + '" style="' + styles.join(' ') + '" />';
+		}
+
+		styles.push('background-color: ' + userObj['icon:bgColor'] + ';');
+		return '<div ' + attributes.join(' ') + ' style="' + styles.join(' ') + '">' + userObj['icon:text'] + '</div>';
+	}
+
 	function register() {
 		Object.keys(helpers).forEach(function (helperName) {
 			Benchpress.registerHelper(helperName, helpers[helperName]);