Merge pull request #445 from patternfly/fix-avatar-ie11

Fix pfe-avatar in ie11 by creating a size fallback and rounding rgb values before assignment.

Author: castastrophe

elements/pfe-avatar/demo/index.html

@@ -13,14 +13,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
 
     <!-- uncomment the es5-adapter if you're using the umd version -->
-    <!-- <script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script> -->
-    <!-- <script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script> -->
-    <!-- <script>require(['../../pfelement/pfelement.umd.js', '../pfe-avatar.umd.js'], function(PFElement) { -->
-    <!--   PFElement.debugLog(true); -->
-    <!--   })</script> -->
+    <script src="/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+    <script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
+    <script>require(['../pfe-avatar.umd.js'])</script>
 
-    <script type="module" src="../pfe-avatar.js"></script>
+    <!-- <script type="module" src="../pfe-avatar.js"></script> -->
 
     <style type="text/css" media="screen">
       /* :root {
@@ -47,7 +45,7 @@
     </ul>
 
     <script>
-      const app = new Vue({
+      var app = new Vue({
         el: "#app",
         data: {
           people: [

elements/pfe-avatar/src/hslrgb.js

@@ -39,16 +39,16 @@ export function hsl2rgb(_H, _S, _L) {
 
     a = 2 * L - b;
 
-    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));
   }
 
   return [R, G, B];
 }
 
 /**
- * Convert an RGBcolor to HSL .
+ * Convert an RGBcolor to HSL.
  *
  * @param {Number} R the red component
  * @param {Number} G the green component

elements/pfe-avatar/src/pfe-avatar.js

@@ -26,6 +26,10 @@ class PfeAvatar extends PFElement {
     };
   }
 
+  static get defaultSize() {
+    return 128;
+  }
+
   static get defaultColors() {
     return "#67accf #448087 #709c6b #a35252 #826cbb";
   }
@@ -90,7 +94,9 @@ class PfeAvatar extends PFElement {
 
   _initCanvas() {
     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;
     this._canvas.height = size;