(js) Add support for local URL in sgAvatarImage
Directive was previously named sgGravatarImage. The local URL will be used before falling back to Gravatar.pull/91/head
Francis Lachapelle
parent
843a689094
commit
e064dc4a46
|
|
@ -6,7 +6,7 @@
|
|||
xmlns:const="http://www.skyrix.com/od/constant"
|
||||
xmlns:label="OGo:label"
|
||||
const:userDefaultsKeys="SOGoContactsCategories"
|
||||
const:jsFiles="Contacts.app.js, Contacts.js, Common.js, Contacts.js"
|
||||
const:jsFiles="Contacts.app.js, Contacts.js, Common.js"
|
||||
className="UIxPageFrame"
|
||||
title="name">
|
||||
<script type="text/javascript">
|
||||
|
|
@ -405,13 +405,13 @@
|
|||
ng-click="currentCard.selected = !currentCard.selected">
|
||||
<!-- selected avatar -->
|
||||
</div>
|
||||
<sg-gravatar-image class="md-tile-left"
|
||||
ng-show="addressbook.notSelectedComponent(currentCard,'vcard')"
|
||||
ng-click="currentCard.selected = !currentCard.selected"
|
||||
email="{{currentCard.$preferredEmail(addressbook.selectedFolder.$query)}}"
|
||||
size="48">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
ng-show="addressbook.notSelectedComponent(currentCard, 'vcard')"
|
||||
ng-click="currentCard.selected = !currentCard.selected"
|
||||
sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.$query)"
|
||||
size="48">
|
||||
<!-- contact avatar -->
|
||||
</sg-gravatar-image>
|
||||
</sg-avatar-image>
|
||||
<div class="sg-list-avatar"
|
||||
ng-show="addressbook.notSelectedComponent(currentCard, 'vlist')"
|
||||
ng-click="currentCard.selected = !currentCard.selected">
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
<md-card-content>
|
||||
<header class="msg-header">
|
||||
<div ng-show="editor.card.tag == 'vcard'">
|
||||
<sg-gravatar-image class="md-tile-left"
|
||||
email="{{editor.card.$preferredEmail()}}"
|
||||
size="48"><!-- gravatar -->
|
||||
</sg-gravatar-image>
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="editor.card.$preferredEmail()"
|
||||
sg-src="editor.card.photoURL"
|
||||
size="48"><!-- avatar --></sg-avatar-image>
|
||||
</div>
|
||||
<div class="sg-list-avatar" ng-show="editor.card.tag == 'vlist'">
|
||||
<!--list avatar-->
|
||||
|
|
@ -66,11 +66,11 @@
|
|||
</label>
|
||||
<md-list>
|
||||
<md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
|
||||
<sg-gravatar-image class="md-tile-left"
|
||||
email="{{ref.$preferredEmail()}}"
|
||||
size="48">
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
sg-email="ref.$preferredEmail()"
|
||||
size="48">
|
||||
<!-- contact avatar -->
|
||||
</sg-gravatar-image>
|
||||
</sg-avatar-image>
|
||||
<div class="md-list-item-text">
|
||||
<h3>
|
||||
<a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
<div class="sg-selected-avatar"
|
||||
ng-show="currentMessage.selected"
|
||||
ng-click="currentMessage.selected = !currentMessage.selected"><!-- selected avatar --></div>
|
||||
<sg-gravatar-image class="md-tile-left"
|
||||
ng-show="!currentMessage.selected"
|
||||
ng-click="currentMessage.selected = !currentMessage.selected"
|
||||
email="{{currentMessage['from'][0].email}}"
|
||||
size="48"><!-- avatar --></sg-gravatar-image>
|
||||
<sg-avatar-image class="md-tile-left"
|
||||
ng-show="!currentMessage.selected"
|
||||
ng-click="currentMessage.selected = !currentMessage.selected"
|
||||
sg-email="currentMessage['from'][0].email"
|
||||
size="48"><!-- avatar --></sg-avatar-image>
|
||||
<div class="sg-tile-content">
|
||||
<span class="msg-date"
|
||||
ng-bind-html="currentMessage.relativedate"><!-- date --></span>
|
||||
|
|
|
|||
|
|
@ -211,11 +211,9 @@
|
|||
</div>
|
||||
<div layout="row" layout-align="space-between end">
|
||||
<div class="sg-avatars" ng-hide="editor.showAttendeesEditor">
|
||||
<sg-gravatar-image ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email"
|
||||
email="{{currentAttendee.email}}"
|
||||
size="32">
|
||||
<!-- gravatar -->
|
||||
</sg-gravatar-image>
|
||||
<sg-avatar-image ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email"
|
||||
sg-email="currentAttendee.email"
|
||||
size="32"><!-- avatar --></sg-avatar-image>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="editor.showAttendeesEditor" class="sg-subcontent attendees">
|
||||
|
|
|
|||
|
|
@ -98,11 +98,9 @@
|
|||
<div class="pseudo-input-container">
|
||||
<label class="pseudo-input-label"><var:string label:value="Attendees:"/></label>
|
||||
<div class="sg-avatars">
|
||||
<sg-gravatar-image ng-repeat="currentAttendee in viewer.component.attendees track by currentAttendee.email"
|
||||
email="{{currentAttendee.email}}"
|
||||
size="32">
|
||||
<!-- gravatar -->
|
||||
</sg-gravatar-image>
|
||||
<sg-avatar-image ng-repeat="currentAttendee in viewer.component.attendees track by currentAttendee.email"
|
||||
sg-email="currentAttendee.email"
|
||||
size="32"><!-- avatar --></sg-avatar-image>
|
||||
</div>
|
||||
</div>
|
||||
</md-list-item>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,8 @@
|
|||
<div><!-- empty --></div>
|
||||
</md-list-item>
|
||||
<md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
|
||||
<sg-gravatar-image email="{{currentAttendee.email}}"
|
||||
size="32">
|
||||
<!-- gravatar -->
|
||||
</sg-gravatar-image>
|
||||
<sg-avatar-image sg-email="currentAttendee.email"
|
||||
size="32"><!-- avatar --></sg-avatar-image>
|
||||
<div class="sg-tile-content">
|
||||
<div class="sg-md-subhead-multi">{{currentAttendee.name}}</div>
|
||||
<div class="sg-md-body-multi">{{currentAttendee.email}}</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
})();
|
||||
Loading…
Reference in New Issue