2015-07-24 21:45:19 +02:00
/* -*- 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 )
2016-11-11 22:46:55 +01:00
* or a Gravatar URL built from the Gravatar factory ( using sg - email ) . The element 's content must return the name of the generic icon to be used (usually ' person ' or ' group ' ) .
2015-07-24 21:45:19 +02:00
* Based on http : //blog.lingohub.com/2014/08/better-ux-with-angularjs-directives/.
* @ memberof SOGo . Common
* @ example :
2016-11-11 22:46:55 +01:00
< sg - avatar - image sg - email = "test@email.com" size = "50" > person < / s g - a v a t a r - i m a g e >
2015-07-24 21:45:19 +02:00
* /
2017-05-08 21:46:48 +02:00
function sgAvatarImage ( ) {
2015-07-24 21:45:19 +02:00
return {
restrict : 'AE' ,
2016-01-14 20:45:50 +01:00
scope : { } ,
bindToController : {
2015-07-24 21:45:19 +02:00
size : '@' ,
email : '=sgEmail' ,
src : '=sgSrc'
} ,
2016-11-11 22:46:55 +01:00
transclude : true ,
2016-01-14 20:45:50 +01:00
template : [
2017-01-27 18:22:22 +01:00
'<div class="sg-icon-badge-container">' ,
' <md-icon ng-transclude></md-icon>' , // the generic icon
' <md-icon class="md-warn sg-icon--badge sg-icon--badge-bottom"' ,
' style="display: none">not_interested</md-icon>' , // the inactive badge (if disabled)
' <img class="ng-hide" ng-src="{{vm.url}}">' , // the gravatar or local image
'</div>'
2016-01-14 20:45:50 +01:00
] . join ( '' ) ,
2015-09-04 15:09:43 +02:00
link : link ,
2015-07-24 21:45:19 +02:00
controller : 'sgAvatarImageController' ,
controllerAs : 'vm'
} ;
2017-01-27 18:22:22 +01:00
function link ( scope , element , attrs , controller ) {
var imgElement = element . find ( 'img' ) ,
mdIcons = element . find ( 'md-icon' ) ,
mdIconElement = angular . element ( mdIcons [ 0 ] ) ,
mdBadgeElement = angular . element ( mdIcons [ 1 ] ) ,
deregisterWatcher ;
2015-09-04 15:09:43 +02:00
2017-01-27 18:22:22 +01:00
if ( attrs . size ) {
imgElement . attr ( 'width' , attrs . size ) ;
imgElement . attr ( 'height' , attrs . size ) ;
mdIconElement . css ( 'font-size' , attrs . size + 'px' ) ;
mdBadgeElement . css ( 'font-size' , parseInt ( attrs . size * 0.4 ) + 'px' ) ;
}
2015-09-04 15:09:43 +02:00
2017-01-27 18:22:22 +01:00
if ( angular . isDefined ( attrs . ngDisabled ) ) {
deregisterWatcher = scope . $watch ( attrs . ngDisabled , function ( isDisabled ) {
if ( attrs . disabled ) {
mdBadgeElement . css ( { display : 'block' } ) ;
}
deregisterWatcher ( ) ; // watch once
} ) ;
}
controller . img = imgElement ;
controller . genericImg = mdIconElement ;
}
2015-09-04 15:09:43 +02:00
}
2015-07-24 21:45:19 +02:00
/ * *
* @ ngInject
* /
2016-01-14 20:45:50 +01:00
sgAvatarImageController . $inject = [ '$scope' , '$element' , '$http' , '$q' , 'Preferences' , 'Gravatar' ] ;
function sgAvatarImageController ( $scope , $element , $http , $q , Preferences , Gravatar ) {
2016-11-09 17:22:17 +01:00
var vm , toggleZoomFcn ;
2015-07-24 21:45:19 +02:00
2016-01-14 20:45:50 +01:00
vm = this ;
2015-11-27 22:04:12 +01:00
2016-11-09 17:22:17 +01:00
$scope . $on ( '$destroy' , function ( ) {
if ( toggleZoomFcn )
$element . off ( 'click' , toggleZoomFcn ) ;
} ) ;
2017-06-01 19:46:57 +02:00
$scope . $watch ( function ( ) { return 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 ( ) ;
if ( Preferences . defaults . SOGoGravatarEnabled )
getGravatar ( email ) ;
}
else if ( ! email )
showGenericAvatar ( ) ;
2015-07-24 21:45:19 +02:00
} ) ;
// If sg-src is defined, watch the expression for the URL of a local image
if ( 'sg-src' in $element [ 0 ] . attributes ) {
2016-06-07 17:08:06 +02:00
$scope . $watch ( function ( ) { return vm . src ; } , function ( src ) {
2015-07-24 21:45:19 +02:00
if ( src ) {
2016-01-14 20:45:50 +01:00
// Set image URL and save the associated email address
2015-07-24 21:45:19 +02:00
vm . url = src ;
2016-01-14 20:45:50 +01:00
vm . urlEmail = '' + vm . email ;
2016-11-09 17:22:17 +01:00
configureZoomableAvatar ( ) ;
2016-01-14 20:45:50 +01:00
hideGenericAvatar ( ) ;
2015-07-24 21:45:19 +02:00
}
} ) ;
}
2015-09-04 15:09:43 +02:00
2016-01-14 20:45:50 +01:00
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 ( ) ;
} ) ;
}
2015-09-04 15:09:43 +02:00
2016-01-14 20:45:50 +01:00
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' ) ;
}
2016-11-09 17:22:17 +01:00
function configureZoomableAvatar ( ) {
$element . addClass ( 'sg-avatar-image--zoomable' ) ;
toggleZoomFcn = function ( ) {
$element . toggleClass ( 'sg-avatar-image--zoom' ) ;
} ;
$element . on ( 'click' , toggleZoomFcn ) ;
}
2015-07-24 21:45:19 +02:00
}
angular
. module ( 'SOGo.Common' )
. directive ( 'sgAvatarImage' , sgAvatarImage )
. controller ( 'sgAvatarImageController' , sgAvatarImageController ) ;
} ) ( ) ;