adding initial.js to show Gmail-like user avatars; adding avatar_image helper to abstract from plugin options adding the two currently used styles, profile and small

app/assets/javascripts/application.js

@@ -16,11 +16,13 @@
 //= require turbolinks
 //= require ckeditor/init
 //= require social-share-button
+//= require initial
 //= require app
 //= require_tree .
 
 var initialize_modules = function() {
   App.Comments.initialize();
+  App.Users.initialize();
   App.Votes.initialize();
 };
 

app/assets/javascripts/users.js.coffee

@@ -0,0 +1,5 @@
+App.Users =
+
+  initialize: ->
+    $('.avatar').initial();
+    false

app/assets/stylesheets/debates.scss

@@ -524,16 +524,6 @@
       }
     }
 
-    .user-photo {
-      border-radius: 2px;
-      display: inline-block;
-      height: 32px;
-      line-height: $line-height*2;
-      margin-right: rem-calc(6);
-      vertical-align: top;
-      width: 32px;
-    }
-
     .comment-body {
       margin-left: $line-height*1.6;
 
@@ -569,4 +559,4 @@
       }
     }
   }
-}
+}

app/assets/stylesheets/participacion.scss

@@ -522,4 +522,4 @@ form {
       }
     }
   }
-}
+}

app/helpers/users_helper.rb

@@ -0,0 +1,24 @@
+module UsersHelper
+  def avatar_image(user, options = {})
+    style         = options.fetch(:style)         { :small }
+    klass         = options.fetch(:class)         { '' }
+    round_corners = options.fetch(:round_corners) { true }
+
+    data_attributes = case style
+      when :profile
+        { height: 100, width: 100 }
+      when :small
+        { height: 32, width: 32, "font-size" => 20 }
+      else
+        {}
+      end
+
+    if round_corners
+      radius = (data_attributes[:height].to_i * 0.13).round
+      data_attributes.merge!(radius: radius)
+    end
+    data_attributes.merge!(name: user.name)
+
+    content_tag :img, nil, class: "avatar #{klass}", data: data_attributes
+  end
+end

app/views/account/show.html.erb

@@ -36,13 +36,15 @@
 
         <div class="small-12 medium-6 column">
           <h3><%= t("account.show.avatar")%></h3>
-          <%= image_tag('user_default_big.jpg', class: "avatar", size: "100x100") %>
+          <%= avatar_image(@account, style: :profile) %>
 
           <h3><%= t("account.show.notifications")%></h3>
+
           <%= f.label :email_on_debate_comment do %>
             <%= f.check_box :email_on_debate_comment %>
             <span class="checkbox"><%= t("account.show.email_on_debate_comment_label") %></span>
           <% end %>
+
           <%= f.label :email_on_comment_reply do %>
             <%= f.check_box :email_on_comment_reply %>
             <span class="checkbox"><%= t("account.show.email_on_comment_reply_label") %></span>
@@ -55,4 +57,4 @@
       </div>
     <% end %>
   </div>
-</div>
+</div>

app/views/comments/_comment.html.erb

@@ -1,7 +1,7 @@
 <div class="row">
   <div id="comment-<%= comment.id %>" class="comment small-12 column">
 
-    <%= image_tag('user_default_2.jpg', class: 'user-photo left', size: '32x32') %>
+    <%= avatar_image(comment.user, style: :small, class: 'left') %>
 
     <div class="comment-body">
       <span class="comment-info">

app/views/debates/show.html.erb

@@ -14,7 +14,7 @@
       <h1><%= @debate.title %></h1>
 
       <div class="debate-info">
-        <%= image_tag('user_default.jpg', class: 'author-photo', size: '32x32') %>
+        <%= avatar_image(@debate.author, style: :small) %>
         <span class="author">
             <%= @debate.author.name %>
         </span>
@@ -62,4 +62,4 @@
       <%= render @debate.root_comments.recent %>
     </div>
   </div>
-</section>
+</section>

vendor/assets/javascripts/initial.js

@@ -0,0 +1,64 @@
+(function ($) {
+    $.fn.initial = function (options) {
+
+        // Defining Colors
+        var colors = ["#1abc9c", "#16a085", "#f1c40f", "#f39c12", "#2ecc71", "#27ae60", "#e67e22", "#d35400", "#3498db", "#2980b9", "#e74c3c", "#c0392b", "#9b59b6", "#8e44ad", "#bdc3c7", "#34495e", "#2c3e50", "#95a5a6", "#7f8c8d", "#ec87bf", "#d870ad", "#f69785", "#9ba37e", "#b49255", "#b49255", "#a94136"];
+
+        return this.each(function () {
+
+            var e = $(this);
+            var settings = $.extend({
+                // Default settings
+                name: 'Name',
+                charCount: 1,
+                textColor: '#ffffff',
+                height: 100,
+                width: 100,
+                fontSize: 60,
+                fontWeight: 400,
+                fontFamily: 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif',
+                radius: 0
+            }, options);
+
+            // overriding from data attributes
+            settings = $.extend(settings, e.data());
+
+            // making the text object
+            var c = settings.name.substr(0, settings.charCount).toUpperCase();
+            var cobj = $('<text text-anchor="middle"></text>').attr({
+                'y': '50%',
+                'x': '50%',
+                'dy' : '0.35em',
+                'pointer-events':'auto',
+                'fill': settings.textColor,
+                'font-family': settings.fontFamily
+            }).html(c).css({
+                'font-weight': settings.fontWeight,
+                'font-size': settings.fontSize+'px',
+            });
+
+            var colorIndex = Math.floor((c.charCodeAt(0) - 65) % colors.length);
+
+            var svg = $('<svg></svg>').attr({
+                'xmlns': 'http://www.w3.org/2000/svg',
+                'pointer-events':'none',
+                'width': settings.width,
+                'height': settings.height
+            }).css({
+                'background-color': colors[colorIndex],
+                'width': settings.width+'px',
+                'height': settings.height+'px',
+                'border-radius': settings.radius+'px',
+                '-moz-border-radius': settings.radius+'px'
+            });
+
+            svg.append(cobj);
+           // svg.append(group);
+            var svgHtml = window.btoa(unescape(encodeURIComponent($('<div>').append(svg.clone()).html())));
+
+            e.attr("src", 'data:image/svg+xml;base64,' + svgHtml);
+
+        })
+    };
+
+}(jQuery));