ngx-avatar
Version:
A universal avatar component for Angular applications that fetches / generates avatar based on the information you have about the user.
2 lines • 13.7 kB
JavaScript
!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("@angular/common"),require("ts-md5"),require("@angular/common/http"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ngx-avatar",["exports","@angular/core","@angular/common","ts-md5","@angular/common/http","rxjs/operators"],r):r((t="undefined"!=typeof globalThis?globalThis:t||self)["ngx-avatar"]={},t.ng.core,t.ng.common,t.tsMd5,t.ng.common.http,t.rxjs.operators)}(this,(function(t,r,e,o,n,a){"use strict";var i,s=function(t){this.sourceId=t};t.AvatarSource=void 0,(i=t.AvatarSource||(t.AvatarSource={})).FACEBOOK="facebook",i.GOOGLE="google",i.TWITTER="twitter",i.INSTAGRAM="instagram",i.VKONTAKTE="vkontakte",i.SKYPE="skype",i.GRAVATAR="gravatar",i.GITHUB="github",i.CUSTOM="custom",i.INITIALS="initials",i.VALUE="value";var u=function(){function r(r){this.sourceId=r,this.sourceType=t.AvatarSource.FACEBOOK}return r.prototype.getAvatar=function(t){return"https://graph.facebook.com/"+this.sourceId+"/picture?width="+t+"&height="+t},r}(),c=function(){function r(r){this.sourceId=r,this.sourceType=t.AvatarSource.TWITTER}return r.prototype.getAvatar=function(t){var r=this.getImageSize(t);return"https://twitter.com/"+this.sourceId+"/profile_image?size="+r},r.prototype.getImageSize=function(t){return t<=24?"mini":t<=48?"normal":t<=73?"bigger":"original"},r}(),p=function(t,r){return(p=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,r){t.__proto__=r}||function(t,r){for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&(t[e]=r[e])})(t,r)};function h(t,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function e(){this.constructor=t}p(t,r),t.prototype=null===r?Object.create(r):(e.prototype=r.prototype,new e)}Object.create;function l(t,r){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var o,n,a=e.call(t),i=[];try{for(;(void 0===r||r-- >0)&&!(o=a.next()).done;)i.push(o.value)}catch(t){n={error:t}}finally{try{o&&!o.done&&(e=a.return)&&e.call(a)}finally{if(n)throw n.error}}return i}function v(){for(var t=[],r=0;r<arguments.length;r++)t=t.concat(l(arguments[r]));return t}Object.create;var f=function(r){function e(e){var o=r.call(this,e)||this;return o.sourceType=t.AvatarSource.GOOGLE,o}return h(e,r),e.prototype.getAvatar=function(){return"https://picasaweb.google.com/data/entry/api/user/"+this.sourceId+"?alt=json"},e.prototype.processResponse=function(t,r){var e=t.entry.gphoto$thumbnail.$t;return e?e.replace("s64","s"+r):null},e}(s),d=function(r){function e(e){var o=r.call(this,e)||this;return o.sourceType=t.AvatarSource.INSTAGRAM,o}return h(e,r),e.prototype.getAvatar=function(){return"https://www.instagram.com/"+this.sourceId+"/?__a=1"},e.prototype.processResponse=function(t,r){return t.graphql.user.profile_pic_url_hd+"&s="+r},e}(s),y=function(){function r(r){this.sourceId=r,this.sourceType=t.AvatarSource.CUSTOM}return r.prototype.getAvatar=function(){return this.sourceId},r}(),g=function(){function r(r){this.sourceId=r,this.sourceType=t.AvatarSource.INITIALS}return r.prototype.getAvatar=function(t){return this.getInitials(this.sourceId,t)},r.prototype.getInitials=function(t,r){if(!(t=t.trim()))return"";var e=t.split(" ");return r&&r<e.length?this.constructInitials(e.slice(0,r)):this.constructInitials(e)},r.prototype.constructInitials=function(t){return t&&t.length?t.filter((function(t){return t&&t.length>0})).map((function(t){return t[0].toUpperCase()})).join(""):""},r}();var A=function(){function r(r){this.value=r,this.sourceType=t.AvatarSource.GRAVATAR,this.sourceId=r.match("^[a-f0-9]{32}$")?r:o.Md5.hashStr(r).toString()}return r.prototype.getAvatar=function(t){var r=function(){if("undefined"!=typeof window&&null!==window){if(window.devicePixelRatio>1.25)return!0;if(window.matchMedia&&window.matchMedia("(-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 1.25dppx)").matches)return!0}return!1}()?2*t:t;return"https://secure.gravatar.com/avatar/"+this.sourceId+"?s="+r+"&d=404"},r}(),S=function(){function r(r){this.sourceId=r,this.sourceType=t.AvatarSource.SKYPE}return r.prototype.getAvatar=function(){return"https://api.skype.com/users/"+this.sourceId+"/profile/avatar"},r}(),I=function(){function r(r){this.sourceId=r,this.sourceType=t.AvatarSource.VALUE}return r.prototype.getAvatar=function(){return this.sourceId},r}(),m=function(r){function e(e){var o=r.call(this,e)||this;return o.sourceType=t.AvatarSource.VKONTAKTE,o}return h(e,r),e.prototype.getAvatar=function(t){var r=this.getImageSize(t);return"https://api.vk.com/method/users.get?user_id="+this.sourceId+"&v=5.8&fields="+r},e.prototype.processResponse=function(t){var r=Object.keys(t.response[0]).pop();return r&&t.response[0][r]||null},e.prototype.getImageSize=function(t){return t<=50?"photo_50":t<=100?"photo_100":t<=200?"photo_200":"photo_max"},e}(s),T=function(r){function e(e){var o=r.call(this,e)||this;return o.sourceType=t.AvatarSource.GITHUB,o}return h(e,r),e.prototype.getAvatar=function(){return"https://api.github.com/users/"+this.sourceId},e.prototype.processResponse=function(t,r){return r?t.avatar_url+"&s="+r:t.avatar_url},e}(s),C=function(){function r(){this.sources={},this.sources[t.AvatarSource.FACEBOOK]=u,this.sources[t.AvatarSource.TWITTER]=c,this.sources[t.AvatarSource.GOOGLE]=f,this.sources[t.AvatarSource.INSTAGRAM]=d,this.sources[t.AvatarSource.SKYPE]=S,this.sources[t.AvatarSource.GRAVATAR]=A,this.sources[t.AvatarSource.CUSTOM]=y,this.sources[t.AvatarSource.INITIALS]=g,this.sources[t.AvatarSource.VALUE]=I,this.sources[t.AvatarSource.VKONTAKTE]=m,this.sources[t.AvatarSource.GITHUB]=T}return r.prototype.newInstance=function(t,r){return new this.sources[t](r)},r}();C.decorators=[{type:r.Injectable}],C.ctorParameters=function(){return[]};var b=new r.InjectionToken("avatar.config"),x=function(){function t(t){this.userConfig=t}return t.prototype.getAvatarSources=function(t){if(this.userConfig&&this.userConfig.sourcePriorityOrder&&this.userConfig.sourcePriorityOrder.length){var r=v(new Set(this.userConfig.sourcePriorityOrder)).filter((function(r){return t.includes(r)}));return v(r,t.filter((function(t){return!r.includes(t)})))}return t},t.prototype.getAvatarColors=function(t){return this.userConfig&&this.userConfig.colors&&this.userConfig.colors.length&&this.userConfig.colors||t},t}();x.decorators=[{type:r.Injectable}],x.ctorParameters=function(){return[{type:void 0,decorators:[{type:r.Optional},{type:r.Inject,args:[b]}]}]};var O=[t.AvatarSource.FACEBOOK,t.AvatarSource.GOOGLE,t.AvatarSource.TWITTER,t.AvatarSource.INSTAGRAM,t.AvatarSource.VKONTAKTE,t.AvatarSource.SKYPE,t.AvatarSource.GRAVATAR,t.AvatarSource.GITHUB,t.AvatarSource.CUSTOM,t.AvatarSource.INITIALS,t.AvatarSource.VALUE],w=["#1abc9c","#3498db","#f1c40f","#8e44ad","#e74c3c","#d35400","#2c3e50","#7f8c8d"],R=function(){function r(t,r){this.http=t,this.avatarConfigService=r,this.avatarSources=O,this.avatarColors=w,this.failedSources=new Map,this.overrideAvatarSources(),this.overrideAvatarColors()}return r.prototype.fetchAvatar=function(t){return this.http.get(t)},r.prototype.getRandomColor=function(t){if(!t)return"transparent";var r=this.calculateAsciiCode(t);return this.avatarColors[r%this.avatarColors.length]},r.prototype.compareSources=function(t,r){return this.getSourcePriority(t)-this.getSourcePriority(r)},r.prototype.isSource=function(t){return this.avatarSources.includes(t)},r.prototype.isTextAvatar=function(r){return[t.AvatarSource.INITIALS,t.AvatarSource.VALUE].includes(r)},r.prototype.buildSourceKey=function(t){return t.sourceType+"-"+t.sourceId},r.prototype.sourceHasFailedBefore=function(t){return this.failedSources.has(this.buildSourceKey(t))},r.prototype.markSourceAsFailed=function(t){this.failedSources.set(this.buildSourceKey(t),t)},r.prototype.overrideAvatarSources=function(){this.avatarSources=this.avatarConfigService.getAvatarSources(O)},r.prototype.overrideAvatarColors=function(){this.avatarColors=this.avatarConfigService.getAvatarColors(w)},r.prototype.calculateAsciiCode=function(t){return t.split("").map((function(t){return t.charCodeAt(0)})).reduce((function(t,r){return t+r}))},r.prototype.getSourcePriority=function(t){return this.avatarSources.indexOf(t)},r}();R.decorators=[{type:r.Injectable}],R.ctorParameters=function(){return[{type:n.HttpClient},{type:x}]};var k=function(){function e(t,e){this.sourceFactory=t,this.avatarService=e,this.round=!0,this.size=50,this.textSizeRatio=3,this.fgColor="#FFF",this.style={},this.cornerRadius=0,this.initialsSize=0,this.clickOnAvatar=new r.EventEmitter,this.isAlive=!0,this.avatarSrc=null,this.avatarText=null,this.avatarStyle={},this.hostStyle={},this.currentIndex=-1,this.sources=[]}return e.prototype.onAvatarClicked=function(){this.clickOnAvatar.emit(this.sources[this.currentIndex])},e.prototype.ngOnChanges=function(r){for(var e in r)if(this.avatarService.isSource(e)){var o=t.AvatarSource[e.toUpperCase()],n=r[e].currentValue;n&&"string"==typeof n?this.addSource(o,n):this.removeSource(o)}this.initializeAvatar()},e.prototype.fetchAvatarSource=function(){var t=this.sources[this.currentIndex];t&&this.avatarService.markSourceAsFailed(t);var r=this.findNextSource();r&&(this.avatarService.isTextAvatar(r.sourceType)?(this.buildTextAvatar(r),this.avatarSrc=null):this.buildImageAvatar(r))},e.prototype.findNextSource=function(){for(;++this.currentIndex<this.sources.length;){var t=this.sources[this.currentIndex];if(t&&!this.avatarService.sourceHasFailedBefore(t))return t}return null},e.prototype.ngOnDestroy=function(){this.isAlive=!1},e.prototype.initializeAvatar=function(){this.currentIndex=-1,this.sources.length>0&&(this.sortAvatarSources(),this.fetchAvatarSource(),this.hostStyle={width:this.size+"px",height:this.size+"px"})},e.prototype.sortAvatarSources=function(){var t=this;this.sources.sort((function(r,e){return t.avatarService.compareSources(r.sourceType,e.sourceType)}))},e.prototype.buildTextAvatar=function(t){this.avatarText=t.getAvatar(+this.initialsSize),this.avatarStyle=this.getInitialsStyle(t.sourceId)},e.prototype.buildImageAvatar=function(t){this.avatarStyle=this.getImageStyle(),t instanceof s?this.fetchAndProcessAsyncAvatar(t):this.avatarSrc=t.getAvatar(+this.size)},e.prototype.getInitialsStyle=function(t){return Object.assign({textAlign:"center",borderRadius:this.round?"100%":this.cornerRadius+"px",border:this.borderColor?"1px solid "+this.borderColor:"",textTransform:"uppercase",color:this.fgColor,backgroundColor:this.bgColor?this.bgColor:this.avatarService.getRandomColor(t),font:Math.floor(+this.size/this.textSizeRatio)+"px Helvetica, Arial, sans-serif",lineHeight:this.size+"px"},this.style)},e.prototype.getImageStyle=function(){return Object.assign({maxWidth:"100%",borderRadius:this.round?"50%":this.cornerRadius+"px",border:this.borderColor?"1px solid "+this.borderColor:"",width:this.size+"px",height:this.size+"px"},this.style)},e.prototype.fetchAndProcessAsyncAvatar=function(t){var r=this;this.avatarService.sourceHasFailedBefore(t)||this.avatarService.fetchAvatar(t.getAvatar(+this.size)).pipe(a.takeWhile((function(){return r.isAlive})),a.map((function(e){return t.processResponse(e,+r.size)}))).subscribe((function(t){return r.avatarSrc=t}),(function(t){r.fetchAvatarSource()}))},e.prototype.addSource=function(t,r){var e=this.sources.find((function(r){return r.sourceType===t}));e?e.sourceId=r:this.sources.push(this.sourceFactory.newInstance(t,r))},e.prototype.removeSource=function(t){this.sources=this.sources.filter((function(r){return r.sourceType!==t}))},e}();k.decorators=[{type:r.Component,args:[{selector:"ngx-avatar",template:'\n <div\n (click)="onAvatarClicked()"\n class="avatar-container"\n [ngStyle]="hostStyle"\n >\n <img\n *ngIf="avatarSrc; else textAvatar"\n [src]="avatarSrc"\n [width]="size"\n [height]="size"\n [ngStyle]="avatarStyle"\n (error)="fetchAvatarSource()"\n class="avatar-content"\n loading="lazy"\n />\n <ng-template #textAvatar>\n <div *ngIf="avatarText" class="avatar-content" [ngStyle]="avatarStyle">\n {{ avatarText }}\n </div>\n </ng-template>\n </div>\n ',styles:["\n :host {\n border-radius: 50%;\n }\n "]}]}],k.ctorParameters=function(){return[{type:C},{type:R}]},k.propDecorators={round:[{type:r.Input}],size:[{type:r.Input}],textSizeRatio:[{type:r.Input}],bgColor:[{type:r.Input}],fgColor:[{type:r.Input}],borderColor:[{type:r.Input}],style:[{type:r.Input}],cornerRadius:[{type:r.Input}],facebook:[{type:r.Input,args:["facebookId"]}],twitter:[{type:r.Input,args:["twitterId"]}],google:[{type:r.Input,args:["googleId"]}],instagram:[{type:r.Input,args:["instagramId"]}],vkontakte:[{type:r.Input,args:["vkontakteId"]}],skype:[{type:r.Input,args:["skypeId"]}],gravatar:[{type:r.Input,args:["gravatarId"]}],github:[{type:r.Input,args:["githubId"]}],custom:[{type:r.Input,args:["src"]}],initials:[{type:r.Input,args:["name"]}],value:[{type:r.Input}],placeholder:[{type:r.Input}],initialsSize:[{type:r.Input}],clickOnAvatar:[{type:r.Output}]};var z=function(){function t(){}return t.forRoot=function(r){return{ngModule:t,providers:[{provide:b,useValue:r||{}}]}},t}();z.decorators=[{type:r.NgModule,args:[{imports:[e.CommonModule],declarations:[k],providers:[C,R,x],exports:[k]}]}],t.AvatarComponent=k,t.AvatarModule=z,t.AvatarService=R,t.defaultColors=w,t.defaultSources=O,t.ɵa=C,t.ɵb=x,t.ɵc=b,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-avatar.umd.min.js.map