From fe039f7b3504468c0d9d41f10d8bae986bb722c8 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Wed, 5 Apr 2017 23:20:51 -0400 Subject: [PATCH] custom letter avatar directive --- gulpfile.js | 4 - package.json | 3 +- src/app/app.js | 1 - src/app/config.js | 10 +- src/app/directives/letterAvatarDirective.js | 144 ++++++++++++++++++ .../views/organizationPeople.html | 2 +- .../views/organizationSubvaultsUsers.html | 2 +- src/app/settings/views/settings.html | 4 +- src/app/views/organizationLayout.html | 2 +- src/app/views/userLayout.html | 2 +- src/index.html | 2 +- 11 files changed, 154 insertions(+), 22 deletions(-) create mode 100644 src/app/directives/letterAvatarDirective.js diff --git a/gulpfile.js b/gulpfile.js index c4828efcd0..52aa06a900 100644 --- a/gulpfile.js +++ b/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' } ]; diff --git a/package.json b/package.json index 164f61b40c..d379585564 100644 --- a/package.json +++ b/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" } } diff --git a/src/app/app.js b/src/app/app.js index a20ec226c8..bcffff159c 100644 --- a/src/app/app.js +++ b/src/app/app.js @@ -9,7 +9,6 @@ 'angulartics.google.analytics', 'angular-stripe', 'credit-cards', - 'ngLetterAvatar', 'bit.directives', 'bit.filters', diff --git a/src/app/config.js b/src/app/config.js index a2de1aa5fe..8a14f830ca 100644 --- a/src/app/config.js +++ b/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, { diff --git a/src/app/directives/letterAvatarDirective.js b/src/app/directives/letterAvatarDirective.js new file mode 100644 index 0000000000..c7394f98f4 --- /dev/null +++ b/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('') + .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('') + .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('
').append(svg).html(); + + var svgHtml = window.btoa(unescape(encodeURIComponent(lvcomponent))); + var src = 'data:image/svg+xml;base64,' + svgHtml; + + var img = angular.element('').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); + } + } + } + }; + }); diff --git a/src/app/organization/views/organizationPeople.html b/src/app/organization/views/organizationPeople.html index 9b6735e255..3f2709f6a8 100644 --- a/src/app/organization/views/organizationPeople.html +++ b/src/app/organization/views/organizationPeople.html @@ -58,7 +58,7 @@
- + {{user.email}} diff --git a/src/app/organization/views/organizationSubvaultsUsers.html b/src/app/organization/views/organizationSubvaultsUsers.html index c7df4e68ed..5783298981 100644 --- a/src/app/organization/views/organizationSubvaultsUsers.html +++ b/src/app/organization/views/organizationSubvaultsUsers.html @@ -20,7 +20,7 @@ - + {{user.email}} diff --git a/src/app/settings/views/settings.html b/src/app/settings/views/settings.html index 7140abfb08..c5cd8a97e9 100644 --- a/src/app/settings/views/settings.html +++ b/src/app/settings/views/settings.html @@ -36,7 +36,9 @@
- +
diff --git a/src/app/views/organizationLayout.html b/src/app/views/organizationLayout.html index e3eaa85e7d..7d3a8d78e3 100644 --- a/src/app/views/organizationLayout.html +++ b/src/app/views/organizationLayout.html @@ -22,7 +22,7 @@
- +

{{orgProfile.name}}

diff --git a/src/app/views/userLayout.html b/src/app/views/userLayout.html index ec318bc7c4..fe0e0523ee 100644 --- a/src/app/views/userLayout.html +++ b/src/app/views/userLayout.html @@ -22,7 +22,7 @@
- +

{{name}}

diff --git a/src/index.html b/src/index.html index 5ee35c2ff9..d093568a92 100644 --- a/src/index.html +++ b/src/index.html @@ -75,7 +75,6 @@ - @@ -89,6 +88,7 @@ +