From e064dc4a46408a0ae1ad14bdef149b7b605e216a Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 24 Jul 2015 15:45:19 -0400
Subject: [PATCH] (js) Add support for local URL in sgAvatarImage

Directive was previously named sgGravatarImage.

The local URL will be used before falling back to Gravatar.
---
 .../ContactsUI/UIxContactFoldersView.wox      | 14 ++---
 .../ContactsUI/UIxContactViewTemplate.wox     | 16 ++---
 .../MailerUI/UIxMailFolderTemplate.wox        | 10 ++--
 .../UIxAppointmentEditorTemplate.wox          |  8 +--
 .../UIxAppointmentViewTemplate.wox            |  8 +--
 .../SchedulerUI/UIxAttendeesEditor.wox        |  6 +-
 .../js/Common/sgAvatarImage.directive.js      | 58 +++++++++++++++++++
 .../js/Common/sgGravatarImage.directive.js    | 35 -----------
 8 files changed, 86 insertions(+), 69 deletions(-)
 create mode 100644 UI/WebServerResources/js/Common/sgAvatarImage.directive.js
 delete mode 100644 UI/WebServerResources/js/Common/sgGravatarImage.directive.js

diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 9420bfd27..485240243 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -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">
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index 8f2a62a10..6572aad45 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -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})">
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 8823fc253..af4cabe82 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -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>
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index 25376d9be..60f17e1af 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -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">
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
index 0762df549..eae9c5eb0 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
@@ -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>
diff --git a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
index 23984836a..cabdbeea2 100644
--- a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
@@ -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>
diff --git a/UI/WebServerResources/js/Common/sgAvatarImage.directive.js b/UI/WebServerResources/js/Common/sgAvatarImage.directive.js
new file mode 100644
index 000000000..40b145042
--- /dev/null
+++ b/UI/WebServerResources/js/Common/sgAvatarImage.directive.js
@@ -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);
+})();
diff --git a/UI/WebServerResources/js/Common/sgGravatarImage.directive.js b/UI/WebServerResources/js/Common/sgGravatarImage.directive.js
deleted file mode 100644
index 1dbbabd2a..000000000
--- a/UI/WebServerResources/js/Common/sgGravatarImage.directive.js
+++ /dev/null
@@ -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);
-})();