98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
/* -*- 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',
|
|
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
|
|
*/
|
|
sgAvatarImageController.$inject = ['$scope', '$element', 'Gravatar'];
|
|
function sgAvatarImageController($scope, $element, Gravatar) {
|
|
var vm = this;
|
|
|
|
$scope.$watch('vm.email', function(email) {
|
|
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);
|
|
}
|
|
});
|
|
|
|
// 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;
|
|
}
|
|
});
|
|
}
|
|
|
|
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
|
|
.module('SOGo.Common')
|
|
.directive('sgAvatarImage', sgAvatarImage)
|
|
.controller('sgAvatarImageController', sgAvatarImageController);
|
|
})();
|