(js) Fix sg-avatar-image with md-virtual-repeat

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

@@ -6,7 +6,7 @@
 
   /**
    * sgAvatarImage - An avatar directive that returns un img element with either a local URL (if sg-src is specified)
-   * or a Gravatar URL built from the Gravatar factory.
+   * or a Gravatar URL built from the Gravatar factory (using sg-email).
    * Based on http://blog.lingohub.com/2014/08/better-ux-with-angularjs-directives/.
    * @memberof SOGo.Common
    * @example:
@@ -15,60 +15,54 @@
   function sgAvatarImage() {
     return {
       restrict: 'AE',
-      scope: {
+      scope: {},
+      bindToController: {
         size: '@',
         email: '=sgEmail',
         src: '=sgSrc'
       },
-      template: '<img ng-src="{{vm.url}}"/>',
+      template: [
+        '<md-icon>person</md-icon>',                     // the generic icon
+        '<img class="ng-hide" ng-src="{{vm.url}}" />'    // the gravatar or local image
+      ].join(''),
       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];
+    var imgElement = element.find('img'),
+        mdIconElement = element.find('md-icon');
 
     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);
-    });
+    controller.img = imgElement;
+    controller.genericImg = mdIconElement;
   }
 
   /**
    * @ngInject
    */
-  sgAvatarImageController.$inject = ['$scope', '$element', 'Preferences', 'Gravatar'];
-  function sgAvatarImageController($scope, $element, Preferences, Gravatar) {
-    var vm = this;
+  sgAvatarImageController.$inject = ['$scope', '$element', '$http', '$q', 'Preferences', 'Gravatar'];
+  function sgAvatarImageController($scope, $element, $http, $q, Preferences, Gravatar) {
+    var vm;
 
-    $scope.$watch('vm.email', function(email) {
+    vm = this;
 
-      Preferences.ready().then(function() {
-        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, Preferences.defaults.SOGoAlternateAvatar);
+    // Wait on user's defaults
+    Preferences.ready().then(function() {
+      $scope.$watch('vm.email', function(email, old) {
+        if (email && vm.urlEmail != email) {
+          // Email has changed or doesn't match the current URL (this happens when using md-virtual-repeat)
+          showGenericAvatar();
+          getGravatar(email);
         }
+        else if (!email)
+          showGenericAvatar();
       });
     });
 
@@ -76,21 +70,44 @@
     if ('sg-src' in $element[0].attributes) {
       $scope.$watch('vm.src', function(src) {
         if (src) {
+          // Set image URL and save the associated email address
           vm.url = src;
+          vm.urlEmail = '' + vm.email;
+          hideGenericAvatar();
         }
       });
     }
 
-    vm.insertGenericAvatar = function(img) {
-      var avatar;
+    function getGravatar(email) {
+      var url = Gravatar(email, vm.size, Preferences.defaults.SOGoAlternateAvatar);
+      $http({
+        method: 'GET',
+        url: url,
+        cache: true,
+        headers: { Accept: 'image/*' }
+      }).then(function successCallback() {
+        if (!vm.url) {
+          // Set image URL and save the associated email address
+          vm.url = url;
+          vm.urlEmail = email;
+          hideGenericAvatar();
+        }
+      }, function errorCallback() {
+        showGenericAvatar();
+      });
+    }
 
-      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);
-      }
-    };
+    function showGenericAvatar() {
+      vm.url = null;
+      vm.urlEmail = null;
+      vm.img.addClass('ng-hide');
+      vm.genericImg.removeClass('ng-hide');
+    }
+
+    function hideGenericAvatar() {
+      vm.genericImg.addClass('ng-hide');
+      vm.img.removeClass('ng-hide');
+    }
   }
 
   angular