From 263ec9e36ab11333c06e820bda7339ed77b9064c Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Thu, 5 Jul 2018 18:42:42 -0400
Subject: [PATCH] Add code to swap in avatar images for users that have them

---
 css/65_data.css           |  1 +
 modules/ui/note_editor.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/css/65_data.css b/css/65_data.css
index 078d8914a..1077607c7 100644
--- a/css/65_data.css
+++ b/css/65_data.css
@@ -48,6 +48,7 @@
 .comment-avatar .icon.comment-avatar-icon {
     width: 40px;
     height: 40px;
+    object-fit: cover;
     border: 1px solid #ccc;
     border-radius: 20px;
 }
diff --git a/modules/ui/note_editor.js b/modules/ui/note_editor.js
index c0ad6fe3f..8e0124ab7 100644
--- a/modules/ui/note_editor.js
+++ b/modules/ui/note_editor.js
@@ -5,6 +5,7 @@ import { select as d3_select } from 'd3-selection';
 
 import { t } from '../util/locale';
 import { svgIcon } from '../svg';
+import { services } from '../services';
 import {
     utilGetSetValue,
     utilNoAuto,
@@ -93,6 +94,33 @@ export function uiNoteEditor(context) {
             .append('div')
             .attr('class', 'comment-text')
             .text(function(d) { return d.text; });
+
+        comments
+            .call(replaceAvatars);
+    }
+
+
+    function replaceAvatars(selection) {
+        var osm = services.osm;
+        if (!osm) return;
+
+        var uids = {};  // gather uids in the comment thread
+        _note.comments.forEach(function(d) {
+            if (d.uid) uids[d.uid] = true;
+        });
+
+        Object.keys(uids).forEach(function(uid) {
+            osm.user(uid, function(err, user) {
+                if (!user || !user.image_url) return;
+
+                selection.selectAll('.comment-avatar.user-' + uid)
+                    .html('')
+                    .append('img')
+                    .attr('class', 'icon comment-avatar-icon')
+                    .attr('src', user.image_url)
+                    .attr('alt', user.display_name);
+            });
+        });
     }