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')(
-      user:     user
-      size:     @size
-      position: @position
-      type:     @type
-    )
+    @html user.avatar @size, @position, undefined, false, false, @type
 
     # start user popups
     @userPopups(@position)

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

@@ -46,55 +46,57 @@ class App.User extends App.Model
       return '??'
 
   avatar: (size = 40, placement = '', cssClass = '', unique = false, avatar, type = undefined) ->
-    cssClass += " size-#{size}"
+    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>"
+    if !avatar
+      if type is 'personal'
+        vip = false
+        data = " data-id=\"#{@id}\""
+      else
+        cssClass += ' user-popover'
+        data      = " data-id=\"#{@id}\""
+    else
+      vip = false
+      data = " data-avatar-id=\"#{avatar.id}\""
 
-    # 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) ->
+    # 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
-    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'
-        vip = false
-        data = "data-id=\"#{@id}\""
+      return App.view('avatar_unique')
+        data: data
+        cssClass: cssClass
+        placement: placement
+        vip: vip
+        x: x
+        y: y
+        initials: @initials()
     else
-        cssClass += ' user-popover'
-        data      = "data-id=\"#{@id}\""
-    else
-      vip = false
-      data = "data-avatar-id=\"#{avatar.id}\""
-
-    if 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>"
-    "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
+      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>