custom letter avatar directive
This commit is contained in:
Kyle Spearrin
parent
ea5dc4b7fc
commit
fe039f7b35
|
|
@ -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'
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
'angulartics.google.analytics',
|
||||
'angular-stripe',
|
||||
'credit-cards',
|
||||
'ngLetterAvatar',
|
||||
|
||||
'bit.directives',
|
||||
'bit.filters',
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue