Work in progress, keeping avatars locally

This introduces a new model to store the avatars and 3 uploads per user (gravatar, system and custom)

user can then pick which they want.

app/assets/javascripts/discourse/controllers/avatar-selector.js.es6

@@ -10,12 +10,14 @@
 export default Discourse.Controller.extend(Discourse.ModalFunctionality, {
 
   actions: {
-    useUploadedAvatar: function() { this.set("use_uploaded_avatar", true); },
-    useGravatar: function() { this.set("use_uploaded_avatar", false); }
-  },
-
-  avatarTemplate: function() {
-    return this.get("use_uploaded_avatar") ? this.get("uploaded_avatar_template") : this.get("gravatar_template");
-  }.property("use_uploaded_avatar", "uploaded_avatar_template", "gravatar_template")
-
+    useUploadedAvatar: function() {
+      this.set("selected", "uploaded");
+    },
+    useGravatar: function() {
+      this.set("selected", "gravatar");
+    },
+    useSystem: function() {
+      this.set("selected", "system");
+    }
+  }
 });

app/assets/javascripts/discourse/helpers/application_helpers.js

@@ -183,16 +183,6 @@ Handlebars.registerHelper('avatar', function(user, options) {
     var username = Em.get(user, 'username');
     if (!username) username = Em.get(user, options.hash.usernamePath);
 
-    var avatarTemplate;
-    var template = options.hash.template;
-    if (template && template !== 'avatar_template') {
-      avatarTemplate = Em.get(user, template);
-      if (!avatarTemplate) avatarTemplate = Em.get(user, 'user.' + template);
-    }
-
-    if (!avatarTemplate) avatarTemplate = Em.get(user, 'avatar_template');
-    if (!avatarTemplate) avatarTemplate = Em.get(user, 'user.avatar_template');
-
     var title;
     if (!options.hash.ignoreTitle) {
       // first try to get a title
@@ -209,6 +199,10 @@ Handlebars.registerHelper('avatar', function(user, options) {
       }
     }
 
+    // this is simply done to ensure we cache images correctly
+    var uploadedAvatarId = Em.get(user, 'uploaded_avatar_id') || Em.get(user, 'user.uploaded_avatar_id') || "_1";
+    var avatarTemplate = Discourse.User.avatarTemplate(username,uploadedAvatarId);
+
     return new Handlebars.SafeString(Discourse.Utilities.avatarImg({
       size: options.hash.imageSize,
       extraClasses: Em.get(user, 'extras') || options.hash.extraClasses,
@@ -228,11 +222,19 @@ Handlebars.registerHelper('avatar', function(user, options) {
   @for Handlebars
 **/
 Ember.Handlebars.registerBoundHelper('boundAvatar', function(user, options) {
+
+  var username = Em.get(user, 'username');
+
+  console.log(options.hash);
+
+  var uploadId = (options.hash.uploadId && Em.get(user, options.hash.uploadId)) || Em.get(user, 'uploaded_avatar_id');
+  var avatarTemplate = Discourse.User.avatarTemplate(username,uploadId);
+
   return new Handlebars.SafeString(Discourse.Utilities.avatarImg({
     size: options.hash.imageSize,
-    avatarTemplate: Em.get(user, options.hash.template || 'avatar_template')
+    avatarTemplate: avatarTemplate
   }));
-}, 'avatar_template', 'uploaded_avatar_template', 'gravatar_template');
+}, 'uploadId', 'username', 'uploaded_avatar_id');
 
 /**
   Nicely format a date without binding or returning HTML

app/assets/javascripts/discourse/models/user.js

@@ -326,6 +326,10 @@ Discourse.User = Discourse.Model.extend({
     });
   },
 
+  avatarTemplate: function(){
+    return Discourse.User.avatarTemplate(this.get('username'),this.get('uploaded_avatar_id'));
+  }.property('uploaded_avatar_id', 'username'),
+
   /*
     Change avatar selection
 
@@ -413,6 +417,11 @@ Discourse.User = Discourse.Model.extend({
 });
 
 Discourse.User.reopenClass(Discourse.Singleton, {
+
+  avatarTemplate: function(username, uploadedAvatarId){
+    return Discourse.getURL("/avatar/" + username.toLowerCase() + "/{size}/" + uploadedAvatarId + ".png");
+  },
+
   /**
     Find a `Discourse.User` for a given username.
 

app/assets/javascripts/discourse/models/user_action.js

@@ -184,7 +184,7 @@ Discourse.UserAction = Discourse.Model.extend({
   switchToActing: function() {
     this.setProperties({
       username: this.get('acting_username'),
-      avatar_template: this.get('acting_avatar_template'),
+      uploaded_avatar_id: this.get('acting_uploaded_avatar_id'),
       name: this.get('actingDisplayName')
     });
   }

app/assets/javascripts/discourse/routes/preferences_routes.js

@@ -22,8 +22,11 @@ Discourse.PreferencesRoute = Discourse.RestrictedUserRoute.extend({
       // all the properties needed for displaying the avatar selector modal
       this.controllerFor('avatar-selector').setProperties(this.modelFor('user').getProperties(
         'username', 'email',
-        'has_uploaded_avatar', 'use_uploaded_avatar',
-        'gravatar_template', 'uploaded_avatar_template'));
+        'system_avatar_upload_id',
+        'gravatr_avatar_upload_id',
+        'custom_avatar_upload_id'
+        )
+      );
     },
 
     saveAvatarSelection: function() {

app/assets/javascripts/discourse/templates/modal/avatar_selector.js.handlebars

@@ -1,15 +1,19 @@
 <div class="modal-body">
   <div>
     <div>
-      <input type="radio" id="avatar" name="avatar" value="gravatar" {{action useGravatar}}>
-      <label class="radio" for="avatar">{{avatar controller imageSize="large" template="gravatar_template"}} {{{i18n user.change_avatar.gravatar}}} {{email}}</label>
-      <a href="//gravatar.com/emails" target="_blank" title="{{i18n user.change_avatar.gravatar_title}}" class="btn no-text"><i class="fa fa-pencil"></i></a>
+      <input type="radio" id="system-avatar" name="avatar" value="system" {{action useSystem}}>
+      <label class="radio" for="system-avatar">{{boundAvatar controller imageSize="large" uploadId="system_avatar_upload_id"}} {{{i18n user.change_avatar.letter_based}}}</label>
+    </div>
+    <div>
+      <input type="radio" id="gravatar" name="avatar" value="gravatar" {{action useGravatar}}>
+      <label class="radio" for="gravatar">{{boundAvatar controller imageSize="large" uploadId="gravatar_avatar_upload_id"}} {{{i18n user.change_avatar.gravatar}}} {{email}}</label>
+      <a href="#" {{action refreshGravatar}} title="{{i18n user.change_avatar.refresh_gravatar_title}}" class="btn no-text"><i class="fa fa-refresh"></i></a>
     </div>
     <div>
       <input type="radio" id="uploaded_avatar" name="avatar" value="uploaded_avatar" {{action useUploadedAvatar}}>
       <label class="radio" for="uploaded_avatar">
-        {{#if has_uploaded_avatar}}
-          {{boundAvatar controller imageSize="large" template="uploaded_avatar_template"}} {{i18n user.change_avatar.uploaded_avatar}}
+        {{#if custom_avatar_upload_id}}
+          {{boundAvatar controller imageSize="large" uploadId="custom_avatar_upload_id"}} {{i18n user.change_avatar.uploaded_avatar}}
         {{else}}
           {{i18n user.change_avatar.uploaded_avatar_empty}}
         {{/if}}

app/assets/javascripts/discourse/views/modal/avatar_selector_view.js

@@ -105,7 +105,7 @@ Discourse.AvatarSelectorView = Discourse.ModalBodyView.extend({
   }.observes('controller.use_uploaded_avatar'),
 
   uploadButtonText: function() {
-    return this.get("uploading") ? I18n.t("uploading") : I18n.t("upload");
+    return this.get("uploading") ? I18n.t("uploading") : I18n.t("user.change_avatar.upload_picture");
   }.property("uploading")
 
 });