(js) Add support for local URL in sgAvatarImage

Directive was previously named sgGravatarImage. The local URL will be used before falling back to Gravatar.
2026-09-01 11:47:19 +00:00 · 2015-07-24 15:48:28 -04:00
parent 843a689094
commit e064dc4a46
8 changed files with 86 additions and 69 deletions
@@ -0,0 +1,58 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  /* jshint validthis: true, newcap: false */
+  'use strict';
+
+  /**
+   * 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.
+   * Based on http://blog.lingohub.com/2014/08/better-ux-with-angularjs-directives/.
+   * @memberof SOGo.Common
+   * @example:
+     <sg-avatar-image sg-email="test@email.com" size="50"></sg-avatar-image>
+  */
+  function sgAvatarImage() {
+    return {
+      restrict: 'AE',
+      replace: true,
+      scope: {
+        size: '@',
+        email: '=sgEmail',
+        src: '=sgSrc'
+      },
+      template: '<img ng-src="{{vm.url}}"/>',
+      bindToController: true,
+      controller: 'sgAvatarImageController',
+      controllerAs: 'vm'
+    };
+  }
+
+  /**
+   * @ngInject
+   */
+  sgAvatarImageController.$inject = ['$scope', '$element', 'Gravatar'];
+  function sgAvatarImageController($scope, $element, Gravatar) {
+    var vm = this;
+
+    $scope.$watch('vm.email', function(email) {
+      if (email && !vm.url) {
+        vm.url = Gravatar(email, vm.size);
+      }
+    });
+
+    // If sg-src is defined, watch the expression for the URL of a local image
+    if ('sg-src' in $element[0].attributes) {
+      $scope.$watch('vm.src', function(src) {
+        if (src) {
+          vm.url = src;
+        }
+      });
+    }
+  }
+
+  angular
+    .module('SOGo.Common')
+    .directive('sgAvatarImage', sgAvatarImage)
+    .controller('sgAvatarImageController', sgAvatarImageController);
+})();
@@ -1,35 +0,0 @@
-/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-
-(function() {
-  'use strict';
-
-  /**
-   * sgGravatarImage - A simple Gravatar directive (based on http://blog.lingohub.com/2014/08/better-ux-with-angularjs-directives/)
-   * @memberof SOGo.Common
-   * @example:
-     <sg-gravatar-image email="test@email.com" size="50"></sg-gravatar-image>
-  */
-
-  sgGravatarImage.$inject = ['Gravatar'];
-  function sgGravatarImage(Gravatar) {
-    return {
-      restrict: 'AE',
-      replace: true,
-      required: 'email',
-      template: '<img ng-src="{{url}}"/>',
-      link: function(scope, element, attrs) {
-        var size = attrs.size;
-        element.attr('width', size);
-        element.attr('height', size);
-        attrs.$observe('email', function(value) {
-          if (!value) { return; }
-          scope.url = Gravatar(value, size);
-        });
-      }
-    };
-  }
-
-  angular
-    .module('SOGo.Common')
-    .directive('sgGravatarImage', sgGravatarImage);
-})();