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