From 25238899900ee0de904be4201bca02bef4432ed9 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Thu, 13 Jun 2019 09:54:18 -0400
Subject: [PATCH] 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         |  9 ++----
 public/src/client/account/edit.js |  6 ++--
 public/src/modules/helpers.js     | 47 +++++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/public/less/generics.less b/public/less/generics.less
index bab162e81f..4d2d93c1df 100644
--- a/public/less/generics.less
+++ b/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: '';
@@ -112,12 +113,6 @@
 		.user-icon-style(64px, 4rem);
 	}
 
-	&.avatar-xl {
-		width: 128px;
-		height: 128px;
-		.user-icon-style(128px, 7.5rem);
-	}
-	
 	&.avatar-xl {
 		width: 128px;
 		height: 128px;
@@ -147,7 +142,7 @@
 	#cropped-image {
 		max-width: 100%;
 	}
-	
+
 	.cropper-container.cropper-bg {
 		max-width: 100%;
 	}
diff --git a/public/src/client/account/edit.js b/public/src/client/account/edit.js
index f7682aae1c..e0ecdf248a 100644
--- a/public/src/client/account/edit.js
+++ b/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);
 		}
 	}
 
diff --git a/public/src/modules/helpers.js b/public/src/modules/helpers.js
index b46d5238a7..04b23f67f8 100644
--- a/public/src/modules/helpers.js
+++ b/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]);