From b94546d6c7187b155264f62d888235f3796608e0 Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Tue, 28 Oct 2014 01:07:29 +0200 Subject: [PATCH] #7 Fix avatar link, improve directive structure, bug fix Firefox issue --- .../directives/tr-avatar.client.directive.js | 62 +++++++------------ 1 file changed, 22 insertions(+), 40 deletions(-) diff --git a/public/modules/users/directives/tr-avatar.client.directive.js b/public/modules/users/directives/tr-avatar.client.directive.js index 8ac0d460e6..f8d6190cb0 100644 --- a/public/modules/users/directives/tr-avatar.client.directive.js +++ b/public/modules/users/directives/tr-avatar.client.directive.js @@ -14,29 +14,30 @@ * link (will not wrap into link) * watch (will start watching user.avatarSource and refresh each time that changes) */ -angular.module('users').directive('trAvatar', [ - function() { +angular.module('users').directive('trAvatar', ['$location', + function($location) { // Options var defaultSize = 256, defaultAvatar = '/modules/users/img/avatar.png'; + return { - //templateUrl: '/modules/users/views/directives/tr-avatar.client.view.html', - template: '', - restrict: 'EA', + template: + '
' + + '' + + '' + + '
', + restrict: 'A', replace: true, scope: { user: '=user' }, controller: ['$scope', function($scope) { - function determineSource() { - console.log('->determineSource'); - // Wait for $promise first - //$scope.user.then(function(user){ - //console.log('->determineSource ->scope.user.then'); - console.log($scope.user); + $scope.avatar = defaultAvatar; + $scope.size = defaultSize; + function determineSource() { // Determine source for avatar if($scope.fixedSource) { @@ -56,7 +57,7 @@ angular.module('users').directive('trAvatar', [ if($scope.source === 'facebook' ) { if($scope.user && $scope.user.email) { var fb_id = '#'; - $scope.avatar = 'http://graph.facebook.com/' + fb_id + '/picture/?width=' +($scope.size || defaultSize) + '&height=' + ($scope.size || defaultSize); + $scope.avatar = $location.protocol() + '://graph.facebook.com/' + fb_id + '/picture/?width=' +($scope.size || defaultSize) + '&height=' + ($scope.size || defaultSize); } else { $scope.avatar = defaultAvatar; @@ -66,16 +67,13 @@ angular.module('users').directive('trAvatar', [ /** * Avatar via Gravatar * @link https://en.gravatar.com/site/implement/images/ - * @todo: pre-save email md5 hash to the db */ else if($scope.source === 'gravatar') { if($scope.user.emailHash) { - $scope.avatar = 'http://gravatar.com/avatar/' + $scope.user.emailHash + '?s=' + ($scope.size || defaultSize); + $scope.avatar = $location.protocol() + '://gravatar.com/avatar/' + $scope.user.emailHash + '?s=' + ($scope.size || defaultSize); - // Gravatar fallback is required to be online. It's defined at settings.json - // If public default avatar is set, send it to Gravatar as failback - // @todo: pass defaultAvatar with public domain here - $scope.avatar += '&d=' + encodeURIComponent('http://ideas.trustroots.org/wordpress/wp-content/uploads/2014/10/avatar.png'); + // This fallback image won't work via localhost since Gravatar fallback is required to be online. + $scope.avatar += '&d=' + encodeURIComponent( $location.protocol() + '://' + $location.host() + ':' + $location.port() + defaultAvatar ); } else { $scope.avatar = defaultAvatar; @@ -94,20 +92,8 @@ angular.module('users').directive('trAvatar', [ else { $scope.avatar = defaultAvatar + '?none'; } - //});// $promise }// determineSource() - // Sets $scope.avatar - //$scope.determineSource(); - - // If asked to, start watching user.avatarSource and refresh directive each time that changes - //$scope.startWatching = function() { - // $scope.$watch('user.avatarSource',function(newSource, oldSource) { - // $scope.source = newSource; - // determineSource(); - // }); - //}; - $scope.$watch('user.avatarSource',function() { determineSource(); }); @@ -115,22 +101,18 @@ angular.module('users').directive('trAvatar', [ }], link: function (scope, element, attr, ctrl) { - // Options - scope.size = attr.size || defaultSize; - - // Wrap it to link by default - if(!attr.link && attr.user) { - angular.element(element).wrap(''); - } - - //if(attr.watch) scope.startWatching(); - // Make sure source won't change dynamicly when user changes if(attr.source) { scope.source = attr.source; scope.fixedSource = attr.source; } + // Options + scope.size = attr.size || defaultSize; + + // By default show the link + scope.link = (attr.link !== 'false') ? true : false; + } }; }