fix pfe-avatar in ie11

Author: mwcz

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

@@ -48,7 +48,31 @@ export function hsl2rgb(_H, _S, _L) {
 }
 
 /**
- * Convert an RGBcolor to HSL .
+ * Converts a decimal number into a hexadecimal number, left-padded to a given length.
+ */
+function toHex(d, len) {
+  return ("0" + Math.round(d).toString(16)).slice(-len);
+}
+
+/**
+ * Converts an HSL color to a hexadecimal color.
+ */
+export function hsl2hex(_H, _S, _L) {
+  return rgb2hex(hsl2rgb(_H, _S, _L));
+}
+
+/**
+ * Converts an RGB color to a hexadecimal color.
+ */
+export function rgb2hex(_R, _G, _B) {
+  console.log(`converting ${_R}, ${_G}, ${_B} to hex`);
+  const ret = "#" + [_R, _G, _B].map(c => toHex(c, 2)).join("");
+  console.log(`done ${ret}`);
+  return ret;
+}
+
+/**
+ * Convert an RGBcolor to HSL.
  *
  * @param {Number} R the red component
  * @param {Number} G the green component

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

@@ -1,6 +1,6 @@
 import PFElement from "../pfelement/pfelement.js";
 import { hash } from "./djb-hash.js";
-import { hsl2rgb, rgb2hsl } from "./hslrgb.js";
+import { hsl2rgb, rgb2hsl, rgb2hex } from "./hslrgb.js";
 
 class PfeAvatar extends PFElement {
   static get tag() {
@@ -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;
 
@@ -123,7 +129,9 @@ class PfeAvatar extends PFElement {
           );
           if (pattern) {
             pattern.shift();
+            console.log("pattern", pattern);
             const color = pattern.map(c => parseInt(c, 16));
+            console.log("color", color);
             this._registerColor(color);
           } else {
             this.log(`[pfe-avatar] invalid color ${colorCode}`);
@@ -136,15 +144,16 @@ class PfeAvatar extends PFElement {
 
   static _registerColor(color) {
     PfeAvatar.colors.push({
-      color1: `rgb(${color.join(",")})`,
-      color2: `rgb(${this._adjustColor(color).join(",")})`
+      color1: rgb2hex(...color),
+      color2: rgb2hex(...this._adjustColor(color))
     });
   }
 
   static _adjustColor(color) {
     const dark = 0.1;
     const l_adj = 0.1; // luminance adjustment
     const hsl = rgb2hsl(...color);
+    console.log(`${color} -> ${hsl}`);
 
     // if luminance is too dark already, then lighten the alternate color
     // instead of darkening it.