animal avatars in kanban cursors

www/common/inner/common-mediatag.js

@@ -46,6 +46,7 @@ define([
     var animal_avatars = {};
     MT.getCursorAvatar = function (cursor) {
         var uid = cursor.uid;
+        // TODO it would be nice to have "{0} is editing" instead of just their name
         var html = '<span class="cp-cursor-avatar">';
         if (cursor.avatar && avatars[cursor.avatar]) {
             html += (cursor.avatar && avatars[cursor.avatar]) || '';
@@ -100,7 +101,7 @@ define([
         return ANIMALS[seed % ANIMALS.length];
     };
 
-    var getPrettyInitials = function (name) {
+    var getPrettyInitials = MT.getPrettyInitials = function (name) {
         var parts = name.split(/\s+/);
         var text;
         if (parts.length > 1) {

www/kanban/app-kanban.less

@@ -159,6 +159,14 @@
             margin-right: 5px;
             .tools_unselectable();
             cursor: default;
+            &.cp-cursor.cp-tippy-html {
+                background-color: var(--red);
+                // XXX figure out how to inherit this from avatar.less
+                font-size: 11px; // 20px / 1.8 as per avatar.less..
+                &.animal {
+                    font-size: 14px; // 20px / 1.8 * (6/5)...
+                }
+            }
         }
     }
     .kanban-item {

www/kanban/inner.js

@@ -59,7 +59,7 @@ define([
     verbose = function () {}; // comment out to enable verbose logging
     var onRedraw = Util.mkEvent();
     var onCursorUpdate = Util.mkEvent();
-    var remoteCursors = {}; // XXX
+    var remoteCursors = {};
 
     var setValueAndCursor = function (input, val, _cursor) {
         if (!input) { return; }
@@ -95,18 +95,27 @@ define([
 
     var getAvatar = function (cursor, noClear) {
         // Tippy
-        var html = MT.getCursorAvatar(cursor); // XXX
+        var html = MT.getCursorAvatar(cursor);
 
-        var l = Util.getFirstCharacter(cursor.name || Messages.anonymous);
+        var name = UI.getDisplayName(cursor.name);
+
+        var l;
+        var animal = '';
+        if (cursor.name === Messages.anonymous && typeof(cursor.uid) === 'string') {
+            l = MT.getPseudorandomAnimal(cursor.uid);
+            animal = '.animal';
+        } else {
+            l = MT.getPrettyInitials(name);
+        }
 
         var text = '';
         if (cursor.color) {
-            text = 'color:'+getTextColor(cursor.color)+';';
+            text = 'background-color:' + cursor.color + '; color:'+getTextColor(cursor.color)+';';
         }
-        var avatar = h('span.cp-cursor.cp-tippy-html', { // XXX
+        var avatar = h('span.cp-cursor.cp-tippy-html' + animal, {
-            style: "background-color: " + (cursor.color || 'red') + ";"+text,
+            style: text,
             'data-cptippy-html': true,
-            title: html, // XXX "{0} is editing"
+            title: html,
         }, l);
         if (!noClear) {
             cursor.clear = function () {
@@ -852,7 +861,7 @@ define([
             getAvatar: getAvatar,
             openLink: openLink,
             getTags: getExistingTags,
-            cursors: remoteCursors, // XXX
+            cursors: remoteCursors,
             boards: boards,
             _boards: Util.clone(boards),
         });
@@ -1062,6 +1071,7 @@ define([
         var kanban;
         var $container = $('#cp-app-kanban-content');
 
+        var myData = framework._.cpNfInner.metadataMgr.getUserData();
         var privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
         if (!privateData.isEmbed) {
             mkHelpMenu(framework);
@@ -1101,7 +1111,7 @@ define([
             $container.find('.kanban-edit-item').remove();
         });
 
-        var getCursor = function () { // XXX
+        var getCursor = function () {
             if (!kanban || !kanban.inEditMode) { return; }
             try {
                 var id = kanban.inEditMode;
@@ -1204,7 +1214,7 @@ define([
             var remoteContent = newContent.content;
 
             if (Sortify(currentContent) !== Sortify(remoteContent)) {
-                var cursor = getCursor(); // XXX
+                var cursor = getCursor();
                 verbose("Content is different.. Applying content");
                 kanban.options.boards = remoteContent;
                 updateBoards(framework, kanban, remoteContent);
@@ -1261,11 +1271,13 @@ define([
         });
 
         var myCursor = {};
-        onCursorUpdate.reg(function (data) { // XXX
+        onCursorUpdate.reg(function (data) {
+            console.log('onCursorUpdate', data);
             myCursor = data;
+            myCursor.uid = myData.uid;
             framework.updateCursor();
         });
-        framework.onCursorUpdate(function (data) { // XXX
+        framework.onCursorUpdate(function (data) {
             if (!data) { return; }
             if (data.reset) {
                 Object.keys(remoteCursors).forEach(function (id) {
@@ -1293,9 +1305,8 @@ define([
             if (!cursor.item && !cursor.board) { return; }
 
             // Add new cursor
-            var avatar = getAvatar(cursor); // XXX
+            var avatar = getAvatar(cursor);
             var $item = $('.kanban-item[data-eid="'+cursor.item+'"]');
-            var $board = $('.kanban-board[data-id="'+cursor.board+'"]');
             if ($item.length) {
                 remoteCursors[id] = cursor;
                 $item.find('.cp-kanban-cursors').append(avatar);