custom letter avatar directive

gulpfile.js

@@ -164,10 +164,6 @@ gulp.task('lib', ['clean:lib'], function () {
                 paths.npmDir + 'angulartics/src/angulartics.js'
             ],
             dest: paths.libDir + 'angulartics'
-        },
-        {
-            src: paths.npmDir + 'ngletteravatar/ngletteravatar.js',
-            dest: paths.libDir + 'ngletteravatar'
         }
     ];
 

package.json

@@ -46,7 +46,6 @@
     "angular-credit-cards": "3.1.6",
     "browserify": "14.1.0",
     "vinyl-source-stream": "1.1.0",
-    "gulp-derequire": "2.1.0",
-    "ngletteravatar": "4.0.4"
+    "gulp-derequire": "2.1.0"
   }
 }

src/app/app.js

@@ -9,7 +9,6 @@
         'angulartics.google.analytics',
         'angular-stripe',
         'credit-cards',
-        'ngLetterAvatar',
 
         'bit.directives',
         'bit.filters',

src/app/config.js

@@ -2,7 +2,7 @@ angular
     .module('bit')
 
     .config(function ($stateProvider, $urlRouterProvider, $httpProvider, jwtInterceptorProvider, jwtOptionsProvider,
-        $uibTooltipProvider, toastrConfig, $locationProvider, $qProvider, stripeProvider, defaultSettings) {
+        $uibTooltipProvider, toastrConfig, $locationProvider, $qProvider, stripeProvider) {
         $qProvider.errorOnUnhandledRejections(false);
         $locationProvider.hashPrefix('');
         jwtOptionsProvider.config({
@@ -49,14 +49,6 @@ angular
             return refreshPromise;
         };
 
-        angular.extend(defaultSettings, {
-            fontFamily: 'Open Sans',
-            height: 45,
-            width: 45,
-            charCount: 2,
-            dynamic: 'true'
-        });
-
         stripeProvider.setPublishableKey('pk_test_KPoCfZXu7mznb9uSCPZ2JpTD');
 
         angular.extend(toastrConfig, {

src/app/directives/letterAvatarDirective.js

@@ -0,0 +1,144 @@
+angular
+    .module('bit.directives')
+
+    // adaptation of https://github.com/uttesh/ngletteravatar
+    .directive('letterAvatar', function () {
+        // ref: http://stackoverflow.com/a/16348977/1090359
+        function stringToColor(str) {
+            var hash = 0;
+            for (var i = 0; i < str.length; i++) {
+                hash = str.charCodeAt(i) + ((hash << 5) - hash);
+            }
+
+            var color = '#';
+            for (var i = 0; i < 3; i++) {
+                var value = (hash >> (i * 8)) & 0xFF;
+                color += ('00' + value.toString(16)).substr(-2);
+            }
+
+            return color;
+        }
+
+        function getFirstLetters(data, count) {
+            var parts = data.split(' ');
+            if (parts && parts.length > 1) {
+                var text = '';
+                for (var i = 0; i < count; i++) {
+                    text += parts[i].substr(0, 1);
+                }
+                return text;
+            }
+
+            return null;
+        }
+
+        function getSvg(width, height, color) {
+            var svgTag = angular.element('<svg></svg>')
+                .attr({
+                    'xmlns': 'http://www.w3.org/2000/svg',
+                    'pointer-events': 'none',
+                    'width': width,
+                    'height': height
+                })
+                .css({
+                    'background-color': color,
+                    'width': width + 'px',
+                    'height': height + 'px'
+                });
+
+            return svgTag;
+        }
+
+        function getCharText(character, textColor, fontFamily, fontWeight, fontsize) {
+            var textTag = angular.element('<text text-anchor="middle"></text>')
+                .attr({
+                    'y': '50%',
+                    'x': '50%',
+                    'dy': '0.35em',
+                    'pointer-events': 'auto',
+                    'fill': textColor,
+                    'font-family': fontFamily
+                })
+                .text(character)
+                .css({
+                    'font-weight': fontWeight,
+                    'font-size': fontsize + 'px',
+                });
+
+            return textTag;
+        }
+
+        return {
+            restrict: 'AE',
+            replace: true,
+            scope: {
+                data: '@'
+            },
+            link: function (scope, element, attrs) {
+                var params = {
+                    charCount: attrs.charcount || 2,
+                    data: attrs.data,
+                    textColor: attrs.textcolor || '#ffffff',
+                    bgColor: attrs.bgcolor,
+                    height: attrs.height || 45,
+                    width: attrs.width || 45,
+                    fontsize: attrs.fontsize || 20,
+                    fontWeight: attrs.fontweight || 300,
+                    fontFamily: attrs.fontfamily || 'Open Sans, HelveticaNeue-Light, Helvetica Neue Light, ' +
+                    'Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif',
+                    round: attrs.round || 'true',
+                    dynamic: attrs.dynamic || 'true',
+                    class: attrs.class || ''
+                };
+
+                if (params.dynamic === 'true') {
+                    scope.$watch('data', function () {
+                        generateLetterAvatar();
+                    });
+                }
+                else {
+                    generateLetterAvatar();
+                }
+
+                function generateLetterAvatar() {
+                    var c = null,
+                        upperData = scope.data.toUpperCase();
+
+                    if (params.charCount > 1) {
+                        c = getFirstLetters(upperData, params.charCount);
+                    }
+
+                    if (!c) {
+                        c = upperData.substr(0, params.charCount);
+                    }
+
+                    var cobj = getCharText(c, params.textColor, params.fontFamily, params.fontWeight, params.fontsize);
+                    var color = params.bgColor ? params.bgColor : stringToColor(upperData);
+                    var svg = getSvg(params.width, params.height, color);
+                    svg.append(cobj);
+                    var lvcomponent = angular.element('<div>').append(svg).html();
+
+                    var svgHtml = window.btoa(unescape(encodeURIComponent(lvcomponent)));
+                    var src = 'data:image/svg+xml;base64,' + svgHtml;
+
+                    var img = angular.element('<img>').attr({ src: src, title: scope.data });
+
+                    if (params.round === 'true') {
+                        img.css('border-radius', '50%');
+                    }
+
+                    if (params.class) {
+                        img.addClass(params.class);
+                    }
+
+                    if (params.dynamic === 'true') {
+                        element.empty();
+                        element.append(img);
+                    }
+                    else {
+                        element.replaceWith(img);
+                    }
+                }
+            }
+        };
+    });

src/app/organization/views/organizationPeople.html

@@ -58,7 +58,7 @@
                                 </div>
                             </td>
                             <td style="width: 45px;">
-                                <ng-letter-avatar data="{{user.name || user.email}}" shape="round"></ng-letter-avatar>
+                                <letter-avatar data="{{user.name || user.email}}" shape="round"></letter-avatar>
                             </td>
                             <td>
                                 <a href="javascript:void(0)" ng-click="edit(user.id)">{{user.email}}</a>

src/app/organization/views/organizationSubvaultsUsers.html

@@ -20,7 +20,7 @@
                         </button>
                     </td>
                     <td style="width: 45px;">
-                        <ng-letter-avatar data="{{user.name || user.email}}" shape="round"></ng-letter-avatar>
+                        <letter-avatar data="{{user.name || user.email}}" shape="round"></letter-avatar>
                     </td>
                     <td>
                         <a href="javascript:void(0)" ng-click="edit(user.id)">{{user.email}}</a>

src/app/settings/views/settings.html

@@ -36,7 +36,9 @@
                         </div>
                     </div>
                     <div class="col-sm-3 settings-photo">
-                        <ng-letter-avatar data="{{model.profile.name || model.email}}"></ng-letter-avatar>
+                        <letter-avatar data="{{model.profile.name || model.email}}" round="false"
+                                       class="img-responsive img-rounded" width="200" height="200"
+                                       fontsize="90"></letter-avatar>
                     </div>
                 </div>
             </div>

src/app/views/organizationLayout.html

@@ -22,7 +22,7 @@
     <section class="sidebar">
         <div class="user-panel">
             <div class="pull-left image">
-                <ng-letter-avatar charCount="1" data="{{orgProfile.name}}" shape="round"></ng-letter-avatar>
+                <letter-avatar data="{{orgProfile.name}}" shape="round"></letter-avatar>
             </div>
             <div class="pull-left info">
                 <p>{{orgProfile.name}}</p>

src/app/views/userLayout.html

@@ -22,7 +22,7 @@
     <section class="sidebar">
         <div class="user-panel">
             <div class="pull-left image">
-                <ng-letter-avatar data="{{name}}" shape="round"></ng-letter-avatar>
+                <letter-avatar data="{{name}}"></letter-avatar>
             </div>
             <div class="pull-left info">
                 <p>{{name}}</p>

src/index.html

@@ -75,7 +75,6 @@
     <script src="lib/angulartics/angulartics-ga.js"></script>
     <script src="lib/angular-stripe/angular-stripe.js"></script>
     <script src="lib/angular-credit-cards/angular-credit-cards.js"></script>
-    <script src="lib/ngletteravatar/ngletteravatar.js"></script>
 
     <script src="app/app.js"></script>
     <script src="app/settings.js"></script>
@@ -89,6 +88,7 @@
     <script src="app/directives/masterPasswordDirective.js"></script>
     <script src="app/directives/passwordMeterDirective.js"></script>
     <script src="app/directives/passwordViewerDirective.js"></script>
+    <script src="app/directives/letterAvatarDirective.js"></script>
 
     <script src="app/filters/filtersModule.js"></script>
     <script src="app/filters/enumNameFilter.js"></script>