refactor avatars

app/assets/javascripts/app/controllers/widget/avatar.coffee

@@ -9,12 +9,7 @@ class App.WidgetAvatar extends App.Controller
     App.User.unsubscribe(@subscribeId)
 
   render: (user) =>
-    @html App.view('avatar')(
+    @html user.avatar @size, @position, undefined, false, false, @type
-      user:     user
-      size:     @size
-      position: @position
-      type:     @type
-    )
 
     # start user popups
     @userPopups(@position)

app/assets/javascripts/app/models/user.coffee

@@ -46,40 +46,13 @@ class App.User extends App.Model
       return '??'
 
   avatar: (size = 40, placement = '', cssClass = '', unique = false, avatar, type = undefined) ->
+    size   = parseInt(size, 10)
+
+    cssClass += " " if cssClass
     cssClass += "size-#{ size }"
 
     if placement
-      placement = "data-placement=\"#{placement}\""
+      placement = " data-placement='#{ placement }'"
-
-    # use system avatar for system actions
-    if @id is 1
-      return "<span class='avatar' style='background: white'>#{App.Utils.icon('logo')}</span>"
-
-    # use generated avatar
-    if !@image || @image is 'none' || unique
-      return @uniqueAvatar(size, placement, cssClass, avatar, type)
-
-    # use image as avatar
-    image = @imageUrl()
-    vip = @vip
-    if type is 'personal'
-      vip = false
-    else
-      cssClass += ' user-popover'
-
-    if vip
-      return "<span class=\"avatar #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></span>"
-    "<span class=\"avatar #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}></span>"
-
-  uniqueAvatar: (size, placement = '', cssClass = '', avatar, type) ->
-    width  = 300
-    height = 226
-    size   = parseInt(size, 10)
-    vip    = @vip
-
-    rng = new Math.seedrandom(@id)
-    x   = rng() * (width - size)
-    y   = rng() * (height - size)
 
     if !avatar
       if type is 'personal'
@@ -92,9 +65,38 @@ class App.User extends App.Model
       vip = false
       data = " data-avatar-id=\"#{avatar.id}\""
 
-    if vip
+    vip = @vip
-      return "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg>#{ @initials() }</span>"
+    if type is 'personal'
-    "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
+      vip = false
+    else
+      cssClass += ' user-popover'
+
+    # use system avatar for system actions
+    if @id is 1
+      return App.view('avatar_system')()
+    else if !@image || @image is 'none' || unique
+      width  = 300
+      height = 226
+
+      rng = new Math.seedrandom(@id)
+      x   = rng() * (width - size)
+      y   = rng() * (height - size)
+
+      return App.view('avatar_unique')
+        data: data
+        cssClass: cssClass
+        placement: placement
+        vip: vip
+        x: x
+        y: y
+        initials: @initials()
+    else
+      return App.view('avatar')
+        data: data
+        cssClass: cssClass
+        placement: placement
+        vip: vip
+        url: @imageUrl()
 
   imageUrl: ->
     return if !@image

app/assets/javascripts/app/views/avatar.jst.eco

@@ -1 +1,3 @@
-<%- @user.avatar(@size, @position, @class, false, false, @type) %>
+<span class="avatar <%- @cssClass %>" style="background-image: url(<%- @url %>)"<%- @placement %><%- @data %>>
+  <%- @Icon('crown') if @vip %>
+</span>

app/assets/javascripts/app/views/avatar_system.jst.eco

@@ -0,0 +1,3 @@
+<span class="avatar <%- @cssClass %>" style="background: white">
+  <%- @Icon('logo') %>
+</span>

app/assets/javascripts/app/views/avatar_unique.jst.eco

@@ -0,0 +1,4 @@
+<span class="avatar <%- @cssClass %> unique" style="background-position: -<%- @x %>px -<%- @y %>px;"<%- @placement %><%- @data %>>
+  <%- @Icon('crown') if @vip %>
+  <%= @initials %>
+</span>