@patternfly/pfe-avatar - npm Package Compare versions

Comparing version 1.0.0-prerelease.35 to 1.0.0-prerelease.36

dist/pfe-avatar.js

@@ -131,3 +131,3 @@ import PFElement from '../../pfelement/dist/pfelement.js';
 /*!
- * PatternFly Elements: PfeAvatar 1.0.0-prerelease.35
+ * PatternFly Elements: PfeAvatar 1.0.0-prerelease.36
  * @license
@@ -158,3 +158,3 @@ * Copyright 2020 Red Hat, Inc.
   static get version() {
-    return "1.0.0-prerelease.35";
+    return "1.0.0-prerelease.36";
   }
@@ -184,2 +184,8 @@
 
+  static get events() {
+    return {
+      connected: `${this.tag}:connected`
+    };
+  }
+
   static get patterns() {
@@ -241,7 +247,5 @@ return {
 
-    this.dispatchEvent(
-      new CustomEvent(`${PfeAvatar.tag}:connected`, {
-        bubbles: false
-      })
-    );
+    this.emitEvent(PfeAvatar.events.connected, {
+      bubbles: false
+    });
   }
@@ -255,3 +259,3 @@
     } else {
-      this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());
+      this.addEventListener(PfeAvatar.events.connected, () => this.update());
     }
@@ -258,0 +262,0 @@ }

dist/pfe-avatar.min.js

 import t from"../../pfelement/dist/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.35
+ * PatternFly Elements: PfeAvatar 1.0.0-prerelease.36
  * @license
@@ -26,3 +26,3 @@ * Copyright 2020 Red Hat, Inc.
 */
-class a extends t{static get version(){return"1.0.0-prerelease.35"}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}\n/*# sourceMappingURL=pfe-avatar.min.css.map */\n</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;
+class a extends t{static get version(){return"1.0.0-prerelease.36"}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}\n/*# sourceMappingURL=pfe-avatar.min.css.map */\n</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 events(){return{connected:`${this.tag}:connected`}}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.emitEvent(a.events.connected,{bubbles:!1})}attributeChangedCallback(t,e,r){super.attributeChangedCallback(...arguments),this.connected?this.update():this.addEventListener(a.events.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,s,i;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(i=(l+c)/2,0===d)r=0,s=0;else{s=i<.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,s,i]}(...t);return a[2]+=a[2]>.1?-.1:.1,function(t,a,r){let s,i,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)s=255*c,i=255*c,n=255*c;else{let t,a;t=2*c-(a=c<.5?c*(1+o):c+o-o*c),s=Math.floor(255*e(t,a,h+1/3)),i=Math.floor(255*e(t,a,h)),n=Math.floor(255*e(t,a,h-1/3))}return[s,i,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],s=[t,a],i=[t,a];switch(e%4){case 0:s[1]++,i[0]++,i[1]++;break;case 1:s[0]++,i[0]++,i[1]++;break;case 2:s[0]++,i[1]++;break;case 3:r[0]++,s[0]++,s[1]++,i[1]++}this._drawMirroredTriangle(r,s,i)}}}_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

dist/pfe-avatar.umd.js

@@ -225,3 +225,3 @@ (function (global, factory) {
   /*!
-   * PatternFly Elements: PfeAvatar 1.0.0-prerelease.35
+   * PatternFly Elements: PfeAvatar 1.0.0-prerelease.36
    * @license
@@ -298,3 +298,3 @@ * Copyright 2020 Red Hat, Inc.
       get: function get$$1() {
-        return "1.0.0-prerelease.35";
+        return "1.0.0-prerelease.36";
       }
@@ -312,2 +312,9 @@ }, {
     }, {
+      key: "events",
+      get: function get$$1() {
+        return {
+          connected: this.tag + ":connected"
+        };
+      }
+    }, {
       key: "patterns",
@@ -344,5 +351,5 @@ get: function get$$1() {
 
-        this.dispatchEvent(new CustomEvent(PfeAvatar.tag + ":connected", {
+        this.emitEvent(PfeAvatar.events.connected, {
           bubbles: false
-        }));
+        });
       }
@@ -359,3 +366,3 @@ }, {
         } else {
-          this.addEventListener(PfeAvatar.tag + ":connected", function () {
+          this.addEventListener(PfeAvatar.events.connected, function () {
             return _this2.update();
@@ -362,0 +369,0 @@ });

dist/pfe-avatar.umd.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../../pfelement/dist/pfelement.umd")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd"],e):t.PfeAvatar=e(t.PFElement)}(this,function(t){"use strict";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}t=t&&t.hasOwnProperty("default")?t.default:t;var e=function(t,e,r){return e&&a(t.prototype,e),r&&a(t,r),t};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)}}function o(t,e,r){null===t&&(t=Function.prototype);var a=Object.getOwnPropertyDescriptor(t,e);if(void 0===a){var i=Object.getPrototypeOf(t);return null===i?void 0:o(i,e,r)}if("value"in a)return a.value;var n=a.get;return void 0!==n?n.call(r):void 0}function s(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)}var r=(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,t),e(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}\n/*# sourceMappingURL=pfe-avatar.min.css.map */\n</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.35"}},{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"}}]),e(i,[{key:"connectedCallback",value:function(){o(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;o(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);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 r._registerColors(),t.create(r),r});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("../../pfelement/dist/pfelement.umd")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd"],e):t.PfeAvatar=e(t.PFElement)}(this,function(t){"use strict";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}t=t&&t.hasOwnProperty("default")?t.default:t;var e=function(t,e,r){return e&&a(t.prototype,e),r&&a(t,r),t};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)}}function o(t,e,r){null===t&&(t=Function.prototype);var a=Object.getOwnPropertyDescriptor(t,e);if(void 0===a){var i=Object.getPrototypeOf(t);return null===i?void 0:o(i,e,r)}if("value"in a)return a.value;var n=a.get;return void 0!==n?n.call(r):void 0}function s(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)}var r=(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,t),e(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}\n/*# sourceMappingURL=pfe-avatar.min.css.map */\n</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.36"}},{key:"tag",get:function(){return"pfe-avatar"}},{key:"observedAttributes",get:function(){return["pfe-name","pfe-pattern","pfe-src","pfe-shape"]}},{key:"events",get:function(){return{connected:this.tag+":connected"}}},{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"}}]),e(i,[{key:"connectedCallback",value:function(){o(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"connectedCallback",this).call(this),this._initCanvas(),this.emitEvent(i.events.connected,{bubbles:!1})}},{key:"attributeChangedCallback",value:function(t,e,r){var a=this;o(i.prototype.__proto__||Object.getPrototypeOf(i.prototype),"attributeChangedCallback",this).apply(this,arguments),this.connected?this.update():this.addEventListener(i.events.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);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 r._registerColors(),t.create(r),r});
 //# sourceMappingURL=pfe-avatar.umd.min.js.map

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.0.0-prerelease.35",
+  "version": "1.0.0-prerelease.36",
   "description": "Avatar for PatternFly Elements",
@@ -40,4 +40,4 @@ "keywords": [
   "dependencies": {
-    "@patternfly/pfe-sass": "^1.0.0-prerelease.35",
-    "@patternfly/pfelement": "^1.0.0-prerelease.35"
+    "@patternfly/pfe-sass": "^1.0.0-prerelease.36",
+    "@patternfly/pfelement": "^1.0.0-prerelease.36"
   },
@@ -48,3 +48,3 @@ "generator-pfelement-version": "0.6.8",
   },
-  "gitHead": "329da4eadb99173dd7134d7ba2432a8385ba933f"
+  "gitHead": "c732688c024150ebd24e3d01bded14b3f5e95c6a"
 }

No alert changes

Improved metrics

Total package byte prevSize

146264

increased by0.42%

Lines of code

1067

increased by1.04%

Dependency changes

• Updated@patternfly/pfe-sass@^1.0.0-prerelease.36

• Updated@patternfly/pfelement@^1.0.0-prerelease.36