Implemented new avatar helper, supporting initials type avatars when …

…no image present

Signed-off-by: Scott Miller <scott.miller.utah@gmail.com>

app/assets/javascripts/app.js

@@ -13,6 +13,8 @@ Helpy.ready = function(){
 //		return;
 //	});
 
+  $('.profile').initial(); 
+
   $('.attachinary-input').attachinary();
   $('.screenshot-link').magnificPopup({type:'image', gallery:{enabled:true}});
 

app/assets/javascripts/application.js.erb

@@ -24,6 +24,7 @@
 //= require cloudinary
 //= require attachinary
 //= require magnific-popup
+//= require initial.js/initial.js
 //= require app
 
 // Jtruncate plugin, http://www.jeremymartin.name/projects.php?project=jTruncate

app/helpers/users_helper.rb

@@ -10,4 +10,16 @@ def user_avatar(user, size=40)
     end
   end
 
+  def avatar_image(user, size=40)
+
+    if user.avatar.nil? == false
+      image_tag("http://res.cloudinary.com/helpy-io/image/upload/c_thumb,w_#{size},h_#{size}/#{user.avatar.path}", width: "#{size}px", class: 'img-circle')
+    elsif !user.thumbnail.nil?
+      image_tag(user.thumbnail, width: "#{size}px", class: 'img-circle')
+    else
+      image_tag('#', data: { name: "#{user.name}", width: "#{size}", height: "#{size}", 'font-size': '16', 'char-count': 2}, class: 'profile img-circle')
+    end
+
+  end
+
 end

app/views/admin/_edit_user.html.erb

@@ -2,7 +2,7 @@
 <!-- <div id="edit-user-info-horizontal" class="row">-->
   <%= bootstrap_form_for(@user, remote: true, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f| %>
   <div class='col-md-4 col-sm-12 col-xs-12 text-center' id='user-info-image'>
-    <%= image_tag(user_avatar(@user), width: '150px', class: 'img-circle') %>
+    <%= avatar_image(@user, size=150) %>
   </div>
   <div id="user-contact-info" class="col-md-4 col-sm-6 col-xs-12 user-info">
     <div class="tiny-header"><%= @user.name %></div>

app/views/admin/_topic.html.erb

@@ -2,7 +2,7 @@
   <td>
     <%= check_box_tag "topic_ids[]", topic.id, false, class: 'topic-checkbox pull-left' %>
     <span class="user-thumbnail pull-right hidden-xs">
-      <%= link_to image_tag(user_avatar(topic.user), width: '40px', class: 'img-circle'), user_profile_path(topic.user.id), remote: true %>
+      <%= link_to avatar_image(topic.user, size=40), user_profile_path(topic.user.id), remote: true %>
     </span>
   </td>
   <td>

app/views/admin/_user.html.erb

@@ -1,7 +1,7 @@
 <tr id="user-<%= user.id %>" class="user">
   <td>
     <div class="user-thumbnail pull-left user-link">
-      <%= link_to image_tag(user_avatar(user), class: 'img-circle', width: '40px'), user_profile_path(user.id), remote: true %>
+      <%= link_to avatar_image(user, size=40), user_profile_path(user.id), remote: true %>
     </div>
   </td>
   <td class="user-link">

app/views/admin/_user_info.html.erb

@@ -1,6 +1,7 @@
 <div id="user-info" class="row">
     <div class='col-md-12 text-center' id='user-info-image'>
-      <%= image_tag(@topic.user.image_url, width: '90px', class: 'img-circle') %>
+      <%#= image_tag(@topic.user.image_url, width: '90px', class: 'img-circle') %>
+      <%= avatar_image(@topic.user, size=90) %>
     </div>
 </div>
 <div class="row">

app/views/admin/_user_info_horizontal.html.erb

@@ -2,7 +2,7 @@
 <div id="user-info-horizontal" class="row">
 
   <div class='col-md-4 col-sm-6 col-xs-12 text-center' id='user-info-image'>
-    <%= image_tag(user_avatar(@user,150), width: '150px', class: 'img-circle') %>
+    <%= avatar_image(@user, size=150) %>
   </div>
   <div class='hidden-sm hidden-xs col-md-2' style="height: 100px"><!-- spacer for design--></div>
   <div id="user-contact-info" class="col-md-3 col-sm-3 col-xs-6 user-info">

app/views/devise/registrations/edit.html.erb

@@ -13,7 +13,7 @@
 
   <div class="col-md-3 text-center">
 
-    <%= image_tag(user_avatar(@user), width: '150px', class: 'img-circle') %>
+    <%= avatar_image(@user, size=150) %>
 
   </div>
 

app/views/docs/show.html.erb

@@ -3,7 +3,7 @@
     <div id="written-by" class="doc-meta">
       <div class="more-important meta-header">Written By:</div>
       <div class="less-important">
-        <%= image_tag(user_avatar(@doc.user), width: '40px', class: 'img-circle') %>
+        <%= avatar_image(@doc.user, size=40) %>
         <%= @doc.user.name.titleize %>
       </div>
     </div>

app/views/home/_team_member.html.erb

@@ -1,7 +1,7 @@
 <li id="team-<%= team_member.id %>" class="team-member">
   <div id="user-info" class="row">
       <div class='col-md-12 text-center' id='user-info-image'>
-        <%= image_tag(user_avatar(team_member), width: '90px', class: 'img-circle') %>
+        <%= avatar_image(team_member, size=90) %>
       </div>
   </div>
   <div class="row">

app/views/posts/_post.html.erb

@@ -1,6 +1,7 @@
 <div id="post-<%= post.id %>" class="media post-container <%= "kind-#{post.kind}" %><%= post.topic.forum.allow_post_voting? ? "" : " disallow-post-voting" %><%= " inactive" unless post.active? %>">
 	<div class="pull-left">
-		<%= image_tag(user_avatar(post.user), width: '40px', class: 'media-object img-circle') %>
+		<%#= image_tag(user_avatar(post.user), width: '40px', class: 'media-object img-circle') %>
+		<%= avatar_image(post.user, size=40) %>
 	</div>
 	<div class="media-body media-right">
 		<span class="hidden-sm hidden-md hidden-lg"><%= post.kind == "first" ? last_active_time(post.created_at) : "#{distance_of_time_in_words(post.created_at,post.topic.created_at)} later" %><br/></span>

app/views/topics/_qna.html.erb

@@ -9,7 +9,8 @@
 
 
     <div class="pull-left">
-  		<%= image_tag(post.user.image_url, width: '40px', class: 'media-object img-circle') %>
+  		<%#= image_tag(post.user.image_url, width: '40px', class: 'media-object img-circle') %>
+      <%= avatar_image(post.user, size=40) %>
   	</div>
   	<div class="media-body media-right">
   		<span class="hidden-sm hidden-md hidden-lg"><%= post.kind == "first" ? last_active_time(post.created_at) : "#{distance_of_time_in_words(post.created_at,post.topic.created_at)} later" %><br/></span>

app/views/topics/ticket.html.erb

@@ -12,7 +12,7 @@
       <div class="more-important meta-header">Assigned To:</div>
       <div class="less-important">
         <% unless @topic.assigned_user.nil? %>
-          <%= image_tag(user_avatar(@topic.assigned_user), width: '40px', class: 'img-circle') %>
+          <%= avatar_image(@topic.assigned_user, size=40) %>
           <%= @topic.assigned_user.name.titleize %>
         <% else %>
           Unassigned

lib/tasks/populate.rake

@@ -36,10 +36,9 @@ namespace :db do
       puts "Created Agent: #{u.name}"
     end
 
-    # Create 100 users
+    # Create 50 users with avatars
     50.times do
 
-
       user = RUser.new.first
       u = User.new
       u.name = "#{user.name.first_name} #{user.name.last_name}"
@@ -61,6 +60,28 @@ namespace :db do
       puts "Created User: #{user.name}"
     end
 
+    # Create 20 users without avatars
+    20.times do
+
+      user = RUser.new.first
+      u = User.new
+      u.name = "#{user.name.first_name} #{user.name.last_name}"
+      u.email = user.email
+      u.login = user.username
+      u.password = '12345678'
+      u.company = "#{Faker::Hacker.noun} #{Faker::Hacker.ingverb} #{company_type}"
+      u.street = user.location.street
+      u.city = user.location.city
+      u.state = user.location.state
+      u.zip = user.location.zip
+      u.work_phone = user.phone
+      u.cell_phone = user.cell
+      u.save
+
+      puts "Created User: #{user.name}"
+    end
+
+
     # Create 10-50 Docs per category
     Category.all.each do |category|
       rand(10..50).times do

vendor/assets/components/initial.js/.bower.json

@@ -0,0 +1,21 @@
+{
+  "name": "initial.js",
+  "main": "initial.js",
+  "version": "0.1.0",
+  "homepage": "https://github.com/judesfernando/initial.js",
+  "authors": [
+    "judesfernando@gmail.com"
+  ],
+  "description": "Plugin to make Gmail like text avatars for profile pictures",
+  "license": "MIT",
+  "_release": "0.1.0",
+  "_resolution": {
+    "type": "version",
+    "tag": "v0.1.0",
+    "commit": "505bb2925a755603bc35fc227e99995829e188b9"
+  },
+  "_source": "git://github.com/judesfernando/initial.js.git",
+  "_target": "~0.1.0",
+  "_originalSource": "judesfernando/initial.js",
+  "_direct": true
+}

vendor/assets/components/initial.js/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.npm-debug.log
+tmp

vendor/assets/components/initial.js/Gruntfile.js

@@ -0,0 +1,21 @@
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+
+        uglify: {
+            build: {
+                src: 'initial.js',
+                dest: 'dist/initial.min.js'
+            }
+}
+
+    });
+
+    // 3. Where we tell Grunt we plan to use this plug-in.
+    grunt.loadNpmTasks('grunt-contrib-uglify');
+
+    // 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
+    grunt.registerTask('default', ['uglify']);
+
+};

vendor/assets/components/initial.js/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Jude Fernando
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

vendor/assets/components/initial.js/README.md

@@ -0,0 +1,45 @@
+**initial.js**
+==========
+Simple jQuery plugin to make Gmail like text avatars for profile pictures.
+
+---
+
+[Demo][1]
+--
+Browser compatibility
+---
+
+ - Chrome
+ - Firefox
+ - Opera 9+
+ - Safari 3.2+
+ - iOS Safari 3.2+
+ - Android Browser 3+ 
+
+Usage
+--
+
+**Markup**
+
+>  <img data-name="Steve" class="profile"/>
+
+**jQuery code**
+
+ > $('.profile').initial(); 
+
+
+  [1]: http://judelicio.us/initial.js/
+
+  Options
+--
+**Below options can be overridden with data-attributes inside the image element. Refer to the "data-attribute" column for related data-attribute for each option**
+
+| Option      | data-attribute   | Description                                                    | Default                                                                                            |
+|-------------|------------------|----------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
+| name        | data-name        | Name of the user which the profile picture should be generated | Name                                                                                               |
+| height      | data-height      | Height of the picture                                          | 100                                                                                                |
+| width       | data-width       | Width of the picture                                           | 100                                                                                                |
+| charCount   | data-char-count  | Number of characherts to be shown in the picture.              | 1                                                                                                  |
+| textColor   | data-text-color  | Color of the text                                              | #ffffff                                                                                            |
+| fontSize    | data-font-size   | Font size of the character(s)                                  | 60                                                                                                 |
+| fontWeight  | data-font-weight | Font weight of the character(s)                                | 400                                                                                                |

vendor/assets/components/initial.js/bower.json

@@ -0,0 +1,11 @@
+{
+  "name": "initial.js",
+  "main": "initial.js",
+  "version": "0.1.0",
+  "homepage": "https://github.com/judesfernando/initial.js",
+  "authors": [
+    "judesfernando@gmail.com"
+  ],
+  "description": "Plugin to make Gmail like text avatars for profile pictures",
+  "license": "MIT"
+}

vendor/assets/components/initial.js/initial.js

@@ -0,0 +1,66 @@
+(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'
+            }, options);
+
+            // overriding from data attributes
+            settings = $.extend(settings, e.data());
+
+            // making the text object
+            var c = fn = settings.name.substr(0, settings.charCount).toUpperCase();
+            var full = settings.name.split(" ");
+            if (full.length === 2) {
+              fn = full[0].substr(0, 1).toUpperCase() + full[1].substr(0, 1).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(fn).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'
+            });
+
+            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));

vendor/assets/components/initial.js/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "initial.js",
+  "version": "0.1.0",
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-uglify": "^0.4.0"
+  }
+}