use initialjs-rails instead our own copy of initial.js and view helper

Gemfile

@@ -30,6 +30,7 @@ gem 'simple_captcha2', require: 'simple_captcha'
 gem 'ckeditor'
 gem 'cancancan'
 gem 'social-share-button'
+gem 'initialjs-rails'
 gem 'unicorn'
 
 group :development, :test do
@@ -61,4 +62,3 @@ end
 group :test do
   gem 'email_spec'
 end
-

Gemfile.lock

@@ -140,6 +140,8 @@ GEM
       i18n
       term-ansicolor (>= 1.3.2)
       terminal-table (>= 1.5.1)
+    initialjs-rails (0.1.0)
+      railties (>= 3.1, < 5.0)
     jquery-rails (4.0.4)
       rails-dom-testing (~> 1.0)
       railties (>= 4.2.0)
@@ -314,6 +316,7 @@ DEPENDENCIES
   factory_girl_rails
   foundation-rails
   i18n-tasks
+  initialjs-rails
   jquery-rails
   launchy
   letter_opener_web (~> 1.2.0)

app/assets/javascripts/users.js.coffee

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

app/helpers/users_helper.rb

@@ -1,12 +0,0 @@
-module UsersHelper
-  def avatar_image(user, options = {})
-    size          = options.fetch(:size)          { 100 }
-    klass         = options.fetch(:class)         { '' }
-    round_corners = options.fetch(:round_corners) { true }
-
-    data_attributes = { name: user.name, height: size, width: size, "font-size" => (size * 0.6) }
-    data_attributes.merge!(radius: (size * 0.13).round) if round_corners
-
-    content_tag :img, nil, class: "avatar #{klass}", data: data_attributes
-  end
-end

vendor/assets/javascripts/initial.js

@@ -1,64 +0,0 @@
-(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));