@patternfly/pfe-avatar
Advanced tools
Comparing version 1.0.0-prerelease.17 to 1.0.0-prerelease.18
@@ -5,2 +5,2 @@ // rollup.config.js | ||
gulpFactory(pfelementPackage.pfelement); | ||
gulpFactory(pfelementPackage); |
@@ -42,5 +42,5 @@ function h2rgb(v1, v2, vH) { | ||
R = 255 * h2rgb(a, b, H + 1 / 3); | ||
G = 255 * h2rgb(a, b, H); | ||
B = 255 * h2rgb(a, b, H - 1 / 3); | ||
R = Math.floor(255 * h2rgb(a, b, H + 1 / 3)); | ||
G = Math.floor(255 * h2rgb(a, b, H)); | ||
B = Math.floor(255 * h2rgb(a, b, H - 1 / 3)); | ||
} | ||
@@ -52,3 +52,3 @@ | ||
/** | ||
* Convert an RGBcolor to HSL . | ||
* Convert an RGBcolor to HSL. | ||
* | ||
@@ -55,0 +55,0 @@ * @param {Number} R the red component |
@@ -7,3 +7,3 @@ { | ||
}, | ||
"version": "1.0.0-prerelease.17", | ||
"version": "1.0.0-prerelease.18", | ||
"description": "Avatar for PatternFly Elements", | ||
@@ -35,7 +35,7 @@ "keywords": [ | ||
"dependencies": { | ||
"@patternfly/pfe-sass": "^1.0.0-prerelease.17", | ||
"@patternfly/pfelement": "^1.0.0-prerelease.17" | ||
"@patternfly/pfe-sass": "^1.0.0-prerelease.18", | ||
"@patternfly/pfelement": "^1.0.0-prerelease.18" | ||
}, | ||
"generator-pfelement-version": "0.6.8", | ||
"gitHead": "4382b491b97b4b6b154a35d2c9db47c065eff081" | ||
"gitHead": "36e6fc8b78e70127e7008b72ca23fd990519b0a3" | ||
} |
@@ -63,5 +63,5 @@ import PFElement from '../pfelement/pfelement.js'; | ||
R = 255 * h2rgb(a, b, H + 1 / 3); | ||
G = 255 * h2rgb(a, b, H); | ||
B = 255 * h2rgb(a, b, H - 1 / 3); | ||
R = Math.floor(255 * h2rgb(a, b, H + 1 / 3)); | ||
G = Math.floor(255 * h2rgb(a, b, H)); | ||
B = Math.floor(255 * h2rgb(a, b, H - 1 / 3)); | ||
} | ||
@@ -73,3 +73,3 @@ | ||
/** | ||
* Convert an RGBcolor to HSL . | ||
* Convert an RGBcolor to HSL. | ||
* | ||
@@ -132,3 +132,4 @@ * @param {Number} R the red component | ||
/* | ||
/*! | ||
* PatternFly Elements: PfeAvatar 1.0.0-prerelease.18 | ||
* @license | ||
@@ -158,2 +159,5 @@ * Copyright 2019 Red Hat, Inc. | ||
class PfeAvatar extends PFElement { | ||
static get version() { | ||
return "1.0.0-prerelease.18"; | ||
} | ||
@@ -187,2 +191,6 @@ get html() { | ||
static get defaultSize() { | ||
return 128; | ||
} | ||
static get defaultColors() { | ||
@@ -252,3 +260,5 @@ return "#67accf #448087 #709c6b #a35252 #826cbb"; | ||
this._canvas = this.shadowRoot.querySelector("canvas"); | ||
const size = this.var("--pfe-avatar--width").replace(/px$/, ""); | ||
const size = | ||
this.var("--pfe-avatar--width").replace(/px$/, "") || | ||
PfeAvatar.defaultSize; | ||
this._canvas.width = size; | ||
@@ -255,0 +265,0 @@ this._canvas.height = size; |
import t from"../pfelement/pfelement.min.js";function e(t,e,a){return a<0&&(a+=1),a>1&&(a-=1),6*a<1?t+6*(e-t)*a:2*a<1?e:3*a<2?t+(e-t)*(2/3-a)*6:t} | ||
/* | ||
/*! | ||
* PatternFly Elements: PfeAvatar 1.0.0-prerelease.18 | ||
* @license | ||
@@ -25,3 +26,3 @@ * Copyright 2019 Red Hat, Inc. | ||
*/ | ||
class a extends t{get html(){return"<style>:host{--pfe-avatar--width:128px;display:block;position:relative;width:var(--pfe-avatar--width);height:var(--pfe-avatar--width)}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([pfe-shape=rounded]) canvas,:host([pfe-shape=rounded]) img{border-radius:calc(var(--pfe-avatar--width)/ 8 + 1px)}:host([pfe-shape=circle]) canvas,:host([pfe-shape=circle]) img{border-radius:50%}:host([pfe-src]) canvas{display:none}:host([pfe-src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([pfe-src])) img{display:none}:host([hidden]){display:none}</style><canvas></canvas>\n<img>"}static get tag(){return"pfe-avatar"}get templateUrl(){return"pfe-avatar.html"}get styleUrl(){return"pfe-avatar.scss"}static get observedAttributes(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}static get patterns(){return{triangles:"triangles",squares:"squares"}}static get defaultColors(){return"#67accf #448087 #709c6b #a35252 #826cbb"}get name(){return this.getAttribute("pfe-name")}set name(t){return this.setAttribute("pfe-name",t)}get src(){return this.getAttribute("pfe-src")}set src(t){return this.setAttribute("pfe-src",t)}get pattern(){return this.getAttribute("pfe-pattern")||a.patterns.squares}set pattern(t){if(a.patterns[t])return this.setAttribute("pfe-pattern",t);this.log(`invalid pattern "${t}", valid patterns are: ${Object.values(a.patterns)}`)}constructor(){super(a)}connectedCallback(){super.connectedCallback(),this._initCanvas(),this.dispatchEvent(new CustomEvent(`${a.tag}:connected`,{bubbles:!1}))}attributeChangedCallback(t,e,r){super.attributeChangedCallback(...arguments),this.connected?this.update():this.addEventListener(`${a.tag}:connected`,()=>this.update())}_initCanvas(){this._canvas=this.shadowRoot.querySelector("canvas");const t=this.var("--pfe-avatar--width").replace(/px$/,"");this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}static _registerColors(){return this.colors=[],(this.var("--pfe-avatar--colors")||this.defaultColors).split(/\s+/).forEach(t=>{let e;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t)){e.shift();const t=e.map(t=>parseInt(t+t,16));this._registerColor(t)}else this.log(`[pfe-avatar] invalid color ${t}`);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t)){e.shift();const t=e.map(t=>parseInt(t,16));this._registerColor(t)}else this.log(`[pfe-avatar] invalid color ${t}`)}}),this.colors}static _registerColor(t){a.colors.push({color1:`rgb(${t.join(",")})`,color2:`rgb(${this._adjustColor(t).join(",")})`})}static _adjustColor(t){const a=function(t,e,a){let r,i,s;const n=Math.max(0,Math.min(255,t))/255,h=Math.max(0,Math.min(255,e))/255,o=Math.max(0,Math.min(255,a))/255,c=Math.min(Math.min(n,h),o),l=Math.max(Math.max(n,h),o),d=l-c;if(s=(l+c)/2,0===d)r=0,i=0;else{i=s<.5?d/(l+c):d/(2-l-c);const t=((l-n)/6+d/2)/d,e=((l-h)/6+d/2)/d,a=((l-o)/6+d/2)/d;n==l?r=a-e:h==l?r=1/3+t-a:o==l&&(r=2/3+e-t),r<0?r+=1:r>1&&(r-=1)}return[r,i,s]}(...t);return a[2]+=a[2]>.1?-.1:.1,function(t,a,r){let i,s,n;const h=Math.max(0,Math.min(1,t)),o=Math.max(0,Math.min(1,a)),c=Math.max(0,Math.min(1,r));if(0==o)i=255*c,s=255*c,n=255*c;else{let t,a;i=255*e(t=2*c-(a=c<.5?c*(1+o):c+o-o*c),a,h+1/3),s=255*e(t,a,h),n=255*e(t,a,h-1/3)}return[i,s,n]}(...a)}update(){if(this.hasAttribute("pfe-src"))this.shadowRoot.querySelector("img").src=this.src;else{const t=function(t){let e=5381,a=t.length;for(;a;)e=33*e^t.charCodeAt(--a);return e>>>0}(this.name).toString(2),e=t.split("").map(t=>Number(t));this._colorIndex=Math.floor(a.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=a.colors[this._colorIndex].color1,this.color2=a.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===a.patterns.squares?this._drawSquarePattern(e):this.pattern===a.patterns.triangles&&this._drawTrianglePattern(e)}}_clear(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}_drawBackground(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}_drawSquarePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}}_drawMirroredSquare(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}_drawSquare(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}_drawTrianglePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)if(t[e]){const t=Math.floor(e/2)%2,a=Math.floor(e/4),r=[t,a],i=[t,a],s=[t,a];switch(e%4){case 0:i[1]++,s[0]++,s[1]++;break;case 1:i[0]++,s[0]++,s[1]++;break;case 2:i[0]++,s[1]++;break;case 3:r[0]++,i[0]++,i[1]++,s[1]++}this._drawMirroredTriangle(r,i,s)}}}_drawMirroredTriangle(t,e,a){this._ctx&&(this._drawTriangle(t,e,a),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-a[0],a[1]]))}_drawTriangle(t,e,a){this._ctx.beginPath(),this._ctx.moveTo(...t.map(t=>t*this._triangleSize)),this._ctx.lineTo(...e.map(t=>t*this._triangleSize)),this._ctx.lineTo(...a.map(t=>t*this._triangleSize)),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}_drawGradient(){const t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2;let a=e,r=e;/^#[A-f0-9]{3}$/.test(e)?(a+="c",r+="0"):/^#[A-f0-9]{6}$/.test(e)&&(a+="cc",r+="00"),t.addColorStop(0,a),t.addColorStop(1,r),t.addColorStop(1,a),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}a._registerColors(),t.create(a);export default a; | ||
class a extends t{static get version(){return"1.0.0-prerelease.18"}get html(){return"<style>:host{--pfe-avatar--width:128px;display:block;position:relative;width:var(--pfe-avatar--width);height:var(--pfe-avatar--width)}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([pfe-shape=rounded]) canvas,:host([pfe-shape=rounded]) img{border-radius:calc(var(--pfe-avatar--width)/ 8 + 1px)}:host([pfe-shape=circle]) canvas,:host([pfe-shape=circle]) img{border-radius:50%}:host([pfe-src]) canvas{display:none}:host([pfe-src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([pfe-src])) img{display:none}:host([hidden]){display:none}</style><canvas></canvas>\n<img>"}static get tag(){return"pfe-avatar"}get templateUrl(){return"pfe-avatar.html"}get styleUrl(){return"pfe-avatar.scss"}static get observedAttributes(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}static get patterns(){return{triangles:"triangles",squares:"squares"}}static get defaultSize(){return 128}static get defaultColors(){return"#67accf #448087 #709c6b #a35252 #826cbb"}get name(){return this.getAttribute("pfe-name")}set name(t){return this.setAttribute("pfe-name",t)}get src(){return this.getAttribute("pfe-src")}set src(t){return this.setAttribute("pfe-src",t)}get pattern(){return this.getAttribute("pfe-pattern")||a.patterns.squares}set pattern(t){if(a.patterns[t])return this.setAttribute("pfe-pattern",t);this.log(`invalid pattern "${t}", valid patterns are: ${Object.values(a.patterns)}`)}constructor(){super(a)}connectedCallback(){super.connectedCallback(),this._initCanvas(),this.dispatchEvent(new CustomEvent(`${a.tag}:connected`,{bubbles:!1}))}attributeChangedCallback(t,e,r){super.attributeChangedCallback(...arguments),this.connected?this.update():this.addEventListener(`${a.tag}:connected`,()=>this.update())}_initCanvas(){this._canvas=this.shadowRoot.querySelector("canvas");const t=this.var("--pfe-avatar--width").replace(/px$/,"")||a.defaultSize;this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}static _registerColors(){return this.colors=[],(this.var("--pfe-avatar--colors")||this.defaultColors).split(/\s+/).forEach(t=>{let e;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t)){e.shift();const t=e.map(t=>parseInt(t+t,16));this._registerColor(t)}else this.log(`[pfe-avatar] invalid color ${t}`);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t)){e.shift();const t=e.map(t=>parseInt(t,16));this._registerColor(t)}else this.log(`[pfe-avatar] invalid color ${t}`)}}),this.colors}static _registerColor(t){a.colors.push({color1:`rgb(${t.join(",")})`,color2:`rgb(${this._adjustColor(t).join(",")})`})}static _adjustColor(t){const a=function(t,e,a){let r,i,s;const n=Math.max(0,Math.min(255,t))/255,h=Math.max(0,Math.min(255,e))/255,o=Math.max(0,Math.min(255,a))/255,c=Math.min(Math.min(n,h),o),l=Math.max(Math.max(n,h),o),d=l-c;if(s=(l+c)/2,0===d)r=0,i=0;else{i=s<.5?d/(l+c):d/(2-l-c);const t=((l-n)/6+d/2)/d,e=((l-h)/6+d/2)/d,a=((l-o)/6+d/2)/d;n==l?r=a-e:h==l?r=1/3+t-a:o==l&&(r=2/3+e-t),r<0?r+=1:r>1&&(r-=1)}return[r,i,s]}(...t);return a[2]+=a[2]>.1?-.1:.1,function(t,a,r){let i,s,n;const h=Math.max(0,Math.min(1,t)),o=Math.max(0,Math.min(1,a)),c=Math.max(0,Math.min(1,r));if(0==o)i=255*c,s=255*c,n=255*c;else{let t,a;t=2*c-(a=c<.5?c*(1+o):c+o-o*c),i=Math.floor(255*e(t,a,h+1/3)),s=Math.floor(255*e(t,a,h)),n=Math.floor(255*e(t,a,h-1/3))}return[i,s,n]}(...a)}update(){if(this.hasAttribute("pfe-src"))this.shadowRoot.querySelector("img").src=this.src;else{const t=function(t){let e=5381,a=t.length;for(;a;)e=33*e^t.charCodeAt(--a);return e>>>0}(this.name).toString(2),e=t.split("").map(t=>Number(t));this._colorIndex=Math.floor(a.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=a.colors[this._colorIndex].color1,this.color2=a.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===a.patterns.squares?this._drawSquarePattern(e):this.pattern===a.patterns.triangles&&this._drawTrianglePattern(e)}}_clear(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}_drawBackground(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}_drawSquarePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}}_drawMirroredSquare(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}_drawSquare(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}_drawTrianglePattern(t){if(this._ctx.fillStyle=this.color2,this._ctx){let e=t.length;for(;e--;)if(t[e]){const t=Math.floor(e/2)%2,a=Math.floor(e/4),r=[t,a],i=[t,a],s=[t,a];switch(e%4){case 0:i[1]++,s[0]++,s[1]++;break;case 1:i[0]++,s[0]++,s[1]++;break;case 2:i[0]++,s[1]++;break;case 3:r[0]++,i[0]++,i[1]++,s[1]++}this._drawMirroredTriangle(r,i,s)}}}_drawMirroredTriangle(t,e,a){this._ctx&&(this._drawTriangle(t,e,a),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-a[0],a[1]]))}_drawTriangle(t,e,a){this._ctx.beginPath(),this._ctx.moveTo(...t.map(t=>t*this._triangleSize)),this._ctx.lineTo(...e.map(t=>t*this._triangleSize)),this._ctx.lineTo(...a.map(t=>t*this._triangleSize)),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}_drawGradient(){const t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2;let a=e,r=e;/^#[A-f0-9]{3}$/.test(e)?(a+="c",r+="0"):/^#[A-f0-9]{6}$/.test(e)&&(a+="cc",r+="00"),t.addColorStop(0,a),t.addColorStop(1,r),t.addColorStop(1,a),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}a._registerColors(),t.create(a);export default a; | ||
//# sourceMappingURL=pfe-avatar.min.js.map |
@@ -155,5 +155,5 @@ (function (global, factory) { | ||
R = 255 * h2rgb(a, b, H + 1 / 3); | ||
G = 255 * h2rgb(a, b, H); | ||
B = 255 * h2rgb(a, b, H - 1 / 3); | ||
R = Math.floor(255 * h2rgb(a, b, H + 1 / 3)); | ||
G = Math.floor(255 * h2rgb(a, b, H)); | ||
B = Math.floor(255 * h2rgb(a, b, H - 1 / 3)); | ||
} | ||
@@ -165,3 +165,3 @@ | ||
/** | ||
* Convert an RGBcolor to HSL . | ||
* Convert an RGBcolor to HSL. | ||
* | ||
@@ -226,3 +226,4 @@ * @param {Number} R the red component | ||
/* | ||
/*! | ||
* PatternFly Elements: PfeAvatar 1.0.0-prerelease.18 | ||
* @license | ||
@@ -297,2 +298,7 @@ * Copyright 2019 Red Hat, Inc. | ||
}], [{ | ||
key: "version", | ||
get: function get$$1() { | ||
return "1.0.0-prerelease.18"; | ||
} | ||
}, { | ||
key: "tag", | ||
@@ -316,2 +322,7 @@ get: function get$$1() { | ||
}, { | ||
key: "defaultSize", | ||
get: function get$$1() { | ||
return 128; | ||
} | ||
}, { | ||
key: "defaultColors", | ||
@@ -358,3 +369,3 @@ get: function get$$1() { | ||
this._canvas = this.shadowRoot.querySelector("canvas"); | ||
var size = this.var("--pfe-avatar--width").replace(/px$/, ""); | ||
var size = this.var("--pfe-avatar--width").replace(/px$/, "") || PfeAvatar.defaultSize; | ||
this._canvas.width = size; | ||
@@ -361,0 +372,0 @@ this._canvas.height = size; |
@@ -1,2 +0,2 @@ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeAvatar=e(t.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var r=function(){function a(t,e){for(var r=0;r<e.length;r++){var a=e[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}return function(t,e,r){return e&&a(t.prototype,e),r&&a(t,r),t}}(),n=function t(e,r,a){null===e&&(e=Function.prototype);var i=Object.getOwnPropertyDescriptor(e,r);if(void 0===i){var n=Object.getPrototypeOf(e);return null===n?void 0:t(n,r,a)}if("value"in i)return i.value;var o=i.get;return void 0!==o?o.call(a):void 0},s=function(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)};function u(t,e,r){return r<0&&(r+=1),1<r&&(r-=1),6*r<1?t+6*(e-t)*r:2*r<1?e:3*r<2?t+(e-t)*(2/3-r)*6:t}var t=function(t){function i(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,i))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(i,e),r(i,[{key:"html",get:function(){return"<style>:host{--pfe-avatar--width:128px;display:block;position:relative;width:var(--pfe-avatar--width);height:var(--pfe-avatar--width)}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([pfe-shape=rounded]) canvas,:host([pfe-shape=rounded]) img{border-radius:calc(var(--pfe-avatar--width)/ 8 + 1px)}:host([pfe-shape=circle]) canvas,:host([pfe-shape=circle]) img{border-radius:50%}:host([pfe-src]) canvas{display:none}:host([pfe-src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([pfe-src])) img{display:none}:host([hidden]){display:none}</style><canvas></canvas>\n<img>"}},{key:"templateUrl",get:function(){return"pfe-avatar.html"}},{key:"styleUrl",get:function(){return"pfe-avatar.scss"}},{key:"name",get:function(){return this.getAttribute("pfe-name")},set:function(t){return this.setAttribute("pfe-name",t)}},{key:"src",get:function(){return this.getAttribute("pfe-src")},set:function(t){return this.setAttribute("pfe-src",t)}},{key:"pattern",get:function(){return this.getAttribute("pfe-pattern")||i.patterns.squares},set:function(t){if(i.patterns[t])return this.setAttribute("pfe-pattern",t);this.log('invalid pattern "'+t+'", valid patterns are: '+Object.values(i.patterns))}}],[{key:"tag",get:function(){return"pfe-avatar"}},{key:"observedAttributes",get:function(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}},{key:"patterns",get:function(){return{triangles:"triangles",squares:"squares"}}},{key:"defaultColors",get:function(){return"#67accf #448087 #709c6b #a35252 #826cbb"}}]),r(i,[{key:"connectedCallback",value:function(){n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"connectedCallback",this).call(this),this._initCanvas(),this.dispatchEvent(new CustomEvent(i.tag+":connected",{bubbles:!1}))}},{key:"attributeChangedCallback",value:function(t,e,r){var a=this;n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"attributeChangedCallback",this).apply(this,arguments),this.connected?this.update():this.addEventListener(i.tag+":connected",function(){return a.update()})}},{key:"_initCanvas",value:function(){this._canvas=this.shadowRoot.querySelector("canvas");var t=this.var("--pfe-avatar--width").replace(/px$/,"");this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}},{key:"update",value:function(){if(this.hasAttribute("pfe-src"))this.shadowRoot.querySelector("img").src=this.src;else{var t=function(t){for(var e=5381,r=t.length;r;)e=33*e^t.charCodeAt(--r);return e>>>0}(this.name).toString(2),e=t.split("").map(function(t){return Number(t)});this._colorIndex=Math.floor(i.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=i.colors[this._colorIndex].color1,this.color2=i.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===i.patterns.squares?this._drawSquarePattern(e):this.pattern===i.patterns.triangles&&this._drawTrianglePattern(e)}}},{key:"_clear",value:function(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawBackground",value:function(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawSquarePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}},{key:"_drawMirroredSquare",value:function(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}},{key:"_drawSquare",value:function(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}},{key:"_drawTrianglePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)if(t[e]){var r=Math.floor(e/2)%2,a=Math.floor(e/4),i=[r,a],n=[r,a],o=[r,a];switch(e%4){case 0:n[1]++,o[0]++,o[1]++;break;case 1:n[0]++,o[0]++,o[1]++;break;case 2:n[0]++,o[1]++;break;case 3:i[0]++,n[0]++,n[1]++,o[1]++}this._drawMirroredTriangle(i,n,o)}}},{key:"_drawMirroredTriangle",value:function(t,e,r){this._ctx&&(this._drawTriangle(t,e,r),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-r[0],r[1]]))}},{key:"_drawTriangle",value:function(t,e,r){var a,i,n,o=this;this._ctx.beginPath(),(a=this._ctx).moveTo.apply(a,s(t.map(function(t){return t*o._triangleSize}))),(i=this._ctx).lineTo.apply(i,s(e.map(function(t){return t*o._triangleSize}))),(n=this._ctx).lineTo.apply(n,s(r.map(function(t){return t*o._triangleSize}))),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}},{key:"_drawGradient",value:function(){var t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2,r=e,a=e;/^#[A-f0-9]{3}$/.test(e)?(r+="c",a+="0"):/^#[A-f0-9]{6}$/.test(e)&&(r+="cc",a+="00"),t.addColorStop(0,r),t.addColorStop(1,a),t.addColorStop(1,r),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}],[{key:"_registerColors",value:function(){var i=this;return this.colors=[],(this.var("--pfe-avatar--colors")||this.defaultColors).split(/\s+/).forEach(function(t){var e=void 0;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t)){e.shift();var r=e.map(function(t){return parseInt(t+t,16)});i._registerColor(r)}else i.log("[pfe-avatar] invalid color "+t);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t)){e.shift();var a=e.map(function(t){return parseInt(t,16)});i._registerColor(a)}else i.log("[pfe-avatar] invalid color "+t)}}),this.colors}},{key:"_registerColor",value:function(t){i.colors.push({color1:"rgb("+t.join(",")+")",color2:"rgb("+this._adjustColor(t).join(",")+")"})}},{key:"_adjustColor",value:function(t){var e=function(t,e,r){var a,i=void 0,n=void 0,o=Math.max(0,Math.min(255,t))/255,s=Math.max(0,Math.min(255,e))/255,c=Math.max(0,Math.min(255,r))/255,l=Math.min(Math.min(o,s),c),h=Math.max(Math.max(o,s),c),u=h-l;if(a=(h+l)/2,0===u)n=i=0;else{n=a<.5?u/(h+l):u/(2-h-l);var f=((h-o)/6+u/2)/u,p=((h-s)/6+u/2)/u,d=((h-c)/6+u/2)/u;o==h?i=d-p:s==h?i=1/3+f-d:c==h&&(i=2/3+p-f),i<0?i+=1:1<i&&(i-=1)}return[i,n,a]}.apply(void 0,s(t));return e[2]+=.1<e[2]?-.1:.1,function(t,e,r){var a=void 0,i=void 0,n=void 0,o=Math.max(0,Math.min(1,t)),s=Math.max(0,Math.min(1,e)),c=Math.max(0,Math.min(1,r));if(0==s)n=i=a=255*c;else{var l,h=void 0;a=255*u(l=2*c-(h=c<.5?c*(1+s):c+s-s*c),h,o+1/3),i=255*u(l,h,o),n=255*u(l,h,o-1/3)}return[a,i,n]}.apply(void 0,s(e))}}]),i}();return t._registerColors(),e.create(t),t}); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../pfelement/pfelement.umd.min")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd.min"],e):t.PfeAvatar=e(t.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var r=function(){function a(t,e){for(var r=0;r<e.length;r++){var a=e[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}return function(t,e,r){return e&&a(t.prototype,e),r&&a(t,r),t}}(),n=function t(e,r,a){null===e&&(e=Function.prototype);var i=Object.getOwnPropertyDescriptor(e,r);if(void 0===i){var n=Object.getPrototypeOf(e);return null===n?void 0:t(n,r,a)}if("value"in i)return i.value;var o=i.get;return void 0!==o?o.call(a):void 0},s=function(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)};function u(t,e,r){return r<0&&(r+=1),1<r&&(r-=1),6*r<1?t+6*(e-t)*r:2*r<1?e:3*r<2?t+(e-t)*(2/3-r)*6:t}var t=function(t){function i(){return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,i))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(i,e),r(i,[{key:"html",get:function(){return"<style>:host{--pfe-avatar--width:128px;display:block;position:relative;width:var(--pfe-avatar--width);height:var(--pfe-avatar--width)}:host canvas{width:100%;height:100%;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:-o-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}:host([pfe-shape=rounded]) canvas,:host([pfe-shape=rounded]) img{border-radius:calc(var(--pfe-avatar--width)/ 8 + 1px)}:host([pfe-shape=circle]) canvas,:host([pfe-shape=circle]) img{border-radius:50%}:host([pfe-src]) canvas{display:none}:host([pfe-src]) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}:host(:not([pfe-src])) img{display:none}:host([hidden]){display:none}</style><canvas></canvas>\n<img>"}},{key:"templateUrl",get:function(){return"pfe-avatar.html"}},{key:"styleUrl",get:function(){return"pfe-avatar.scss"}},{key:"name",get:function(){return this.getAttribute("pfe-name")},set:function(t){return this.setAttribute("pfe-name",t)}},{key:"src",get:function(){return this.getAttribute("pfe-src")},set:function(t){return this.setAttribute("pfe-src",t)}},{key:"pattern",get:function(){return this.getAttribute("pfe-pattern")||i.patterns.squares},set:function(t){if(i.patterns[t])return this.setAttribute("pfe-pattern",t);this.log('invalid pattern "'+t+'", valid patterns are: '+Object.values(i.patterns))}}],[{key:"version",get:function(){return"1.0.0-prerelease.18"}},{key:"tag",get:function(){return"pfe-avatar"}},{key:"observedAttributes",get:function(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}},{key:"patterns",get:function(){return{triangles:"triangles",squares:"squares"}}},{key:"defaultSize",get:function(){return 128}},{key:"defaultColors",get:function(){return"#67accf #448087 #709c6b #a35252 #826cbb"}}]),r(i,[{key:"connectedCallback",value:function(){n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"connectedCallback",this).call(this),this._initCanvas(),this.dispatchEvent(new CustomEvent(i.tag+":connected",{bubbles:!1}))}},{key:"attributeChangedCallback",value:function(t,e,r){var a=this;n(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"attributeChangedCallback",this).apply(this,arguments),this.connected?this.update():this.addEventListener(i.tag+":connected",function(){return a.update()})}},{key:"_initCanvas",value:function(){this._canvas=this.shadowRoot.querySelector("canvas");var t=this.var("--pfe-avatar--width").replace(/px$/,"")||i.defaultSize;this._canvas.width=t,this._canvas.height=t,this._squareSize=this._canvas.width/8,this._triangleSize=this._canvas.width/4,this._ctx=this._canvas.getContext("2d")}},{key:"update",value:function(){if(this.hasAttribute("pfe-src"))this.shadowRoot.querySelector("img").src=this.src;else{var t=function(t){for(var e=5381,r=t.length;r;)e=33*e^t.charCodeAt(--r);return e>>>0}(this.name).toString(2),e=t.split("").map(function(t){return Number(t)});this._colorIndex=Math.floor(i.colors.length*parseInt(t,2)/Math.pow(2,32)),this.color1=i.colors[this._colorIndex].color1,this.color2=i.colors[this._colorIndex].color2,this._clear(),this._drawBackground(),this.pattern===i.patterns.squares?this._drawSquarePattern(e):this.pattern===i.patterns.triangles&&this._drawTrianglePattern(e)}}},{key:"_clear",value:function(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawBackground",value:function(){this._ctx.fillStyle=this.color1,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}},{key:"_drawSquarePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)t[e]&&this._drawMirroredSquare(e%4,Math.floor(e/4))}},{key:"_drawMirroredSquare",value:function(t,e){this._ctx&&(this._drawSquare(t,e),this._drawSquare(7-t,e))}},{key:"_drawSquare",value:function(t,e){this._ctx.fillRect(this._squareSize*t,this._squareSize*e,this._squareSize,this._squareSize)}},{key:"_drawTrianglePattern",value:function(t){if(this._ctx.fillStyle=this.color2,this._ctx)for(var e=t.length;e--;)if(t[e]){var r=Math.floor(e/2)%2,a=Math.floor(e/4),i=[r,a],n=[r,a],o=[r,a];switch(e%4){case 0:n[1]++,o[0]++,o[1]++;break;case 1:n[0]++,o[0]++,o[1]++;break;case 2:n[0]++,o[1]++;break;case 3:i[0]++,n[0]++,n[1]++,o[1]++}this._drawMirroredTriangle(i,n,o)}}},{key:"_drawMirroredTriangle",value:function(t,e,r){this._ctx&&(this._drawTriangle(t,e,r),this._drawTriangle([4-t[0],t[1]],[4-e[0],e[1]],[4-r[0],r[1]]))}},{key:"_drawTriangle",value:function(t,e,r){var a,i,n,o=this;this._ctx.beginPath(),(a=this._ctx).moveTo.apply(a,s(t.map(function(t){return t*o._triangleSize}))),(i=this._ctx).lineTo.apply(i,s(e.map(function(t){return t*o._triangleSize}))),(n=this._ctx).lineTo.apply(n,s(r.map(function(t){return t*o._triangleSize}))),this._ctx.closePath(),this._ctx.fill(),this._ctx.fill()}},{key:"_drawGradient",value:function(){var t=this._ctx.createLinearGradient(0,this._canvas.height,this._canvas.width,0),e=this.color2,r=e,a=e;/^#[A-f0-9]{3}$/.test(e)?(r+="c",a+="0"):/^#[A-f0-9]{6}$/.test(e)&&(r+="cc",a+="00"),t.addColorStop(0,r),t.addColorStop(1,a),t.addColorStop(1,r),this._ctx.fillStyle=t,this._ctx.fillRect(0,0,this._canvas.width,this._canvas.height)}}],[{key:"_registerColors",value:function(){var i=this;return this.colors=[],(this.var("--pfe-avatar--colors")||this.defaultColors).split(/\s+/).forEach(function(t){var e=void 0;switch(t.length){case 4:if(e=/^#([A-f0-9])([A-f0-9])([A-f0-9])$/.exec(t)){e.shift();var r=e.map(function(t){return parseInt(t+t,16)});i._registerColor(r)}else i.log("[pfe-avatar] invalid color "+t);break;case 7:if(e=/^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/.exec(t)){e.shift();var a=e.map(function(t){return parseInt(t,16)});i._registerColor(a)}else i.log("[pfe-avatar] invalid color "+t)}}),this.colors}},{key:"_registerColor",value:function(t){i.colors.push({color1:"rgb("+t.join(",")+")",color2:"rgb("+this._adjustColor(t).join(",")+")"})}},{key:"_adjustColor",value:function(t){var e=function(t,e,r){var a,i=void 0,n=void 0,o=Math.max(0,Math.min(255,t))/255,s=Math.max(0,Math.min(255,e))/255,c=Math.max(0,Math.min(255,r))/255,l=Math.min(Math.min(o,s),c),h=Math.max(Math.max(o,s),c),u=h-l;if(a=(h+l)/2,0===u)n=i=0;else{n=a<.5?u/(h+l):u/(2-h-l);var f=((h-o)/6+u/2)/u,p=((h-s)/6+u/2)/u,d=((h-c)/6+u/2)/u;o==h?i=d-p:s==h?i=1/3+f-d:c==h&&(i=2/3+p-f),i<0?i+=1:1<i&&(i-=1)}return[i,n,a]}.apply(void 0,s(t));return e[2]+=.1<e[2]?-.1:.1,function(t,e,r){var a=void 0,i=void 0,n=void 0,o=Math.max(0,Math.min(1,t)),s=Math.max(0,Math.min(1,e)),c=Math.max(0,Math.min(1,r));if(0==s)n=i=a=255*c;else{var l,h=void 0;l=2*c-(h=c<.5?c*(1+s):c+s-s*c),a=Math.floor(255*u(l,h,o+1/3)),i=Math.floor(255*u(l,h,o)),n=Math.floor(255*u(l,h,o-1/3))}return[a,i,n]}.apply(void 0,s(e))}}]),i}();return t._registerColors(),e.create(t),t}); | ||
//# sourceMappingURL=pfe-avatar.umd.min.js.map |
@@ -42,5 +42,5 @@ function h2rgb(v1, v2, vH) { | ||
R = 255 * h2rgb(a, b, H + 1 / 3); | ||
G = 255 * h2rgb(a, b, H); | ||
B = 255 * h2rgb(a, b, H - 1 / 3); | ||
R = Math.floor(255 * h2rgb(a, b, H + 1 / 3)); | ||
G = Math.floor(255 * h2rgb(a, b, H)); | ||
B = Math.floor(255 * h2rgb(a, b, H - 1 / 3)); | ||
} | ||
@@ -52,3 +52,3 @@ | ||
/** | ||
* Convert an RGBcolor to HSL . | ||
* Convert an RGBcolor to HSL. | ||
* | ||
@@ -55,0 +55,0 @@ * @param {Number} R the red component |
@@ -29,2 +29,6 @@ import PFElement from "../pfelement/pfelement.js"; | ||
static get defaultSize() { | ||
return 128; | ||
} | ||
static get defaultColors() { | ||
@@ -94,3 +98,5 @@ return "#67accf #448087 #709c6b #a35252 #826cbb"; | ||
this._canvas = this.shadowRoot.querySelector("canvas"); | ||
const size = this.var("--pfe-avatar--width").replace(/px$/, ""); | ||
const size = | ||
this.var("--pfe-avatar--width").replace(/px$/, "") || | ||
PfeAvatar.defaultSize; | ||
this._canvas.width = size; | ||
@@ -97,0 +103,0 @@ this._canvas.height = size; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
255238
1764