(js,html) Improve sgAvatarImage directive

UI/WebServerResources/js/Common/Gravatar.service.js

@@ -27,8 +27,10 @@
       }
       hash = email.md5();
 
+      return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=404';
+      //return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=retro';
       // return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=identicon';
-      return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=wavatar';
+      // return 'https://www.gravatar.com/avatar/' + hash + '?s=' + s + '&d=wavatar';
     };
   }
 

UI/WebServerResources/js/Common/sgAvatarImage.directive.js

@@ -15,19 +15,36 @@
   function sgAvatarImage() {
     return {
       restrict: 'AE',
-      replace: true,
       scope: {
         size: '@',
         email: '=sgEmail',
         src: '=sgSrc'
       },
       template: '<img ng-src="{{vm.url}}"/>',
+      link: link,
       bindToController: true,
       controller: 'sgAvatarImageController',
       controllerAs: 'vm'
     };
   }
 
+  function link(scope, element, attrs, controller) {
+    var el = element[0],
+        className = el.className,
+        imgElement = element.find('img'),
+        img = imgElement[0];
+
+    if (attrs.size) {
+      imgElement.attr('width', attrs.size);
+      imgElement.attr('height', attrs.size);
+    }
+
+    imgElement.bind('error', function() {
+      // Error while loading external link; insert a generic avatar
+      controller.insertGenericAvatar(img);
+    });
+  }
+
   /**
    * @ngInject
    */
@@ -36,7 +53,18 @@
     var vm = this;
 
     $scope.$watch('vm.email', function(email) {
-      if (email && !vm.url) {
+      var img = $element.find('img')[0];
+      if (!email && !vm.genericAvatar) {
+        // If no email is specified, insert a generic avatar
+        vm.insertGenericAvatar(img);
+      }
+      else if (email && !vm.url) {
+        if (vm.genericAvatar) {
+          // Remove generic avatar and restore visibility of image
+          vm.genericAvatar.parentNode.removeChild(vm.genericAvatar);
+          delete vm.genericAvatar;
+          img.classList.remove('ng-hide');
+        }
         vm.url = Gravatar(email, vm.size);
       }
     });
@@ -49,6 +77,17 @@
         }
       });
     }
+
+    vm.insertGenericAvatar = function(img) {
+      var avatar;
+
+      if (!vm.genericAvatar) {
+        avatar = document.createElement('md-icon');
+        avatar.className = 'material-icons icon-person';
+        img.classList.add('ng-hide');
+        vm.genericAvatar = img.parentNode.insertBefore(avatar, img);
+      }
+    };
   }
 
   angular