fix(events): Emit non-bubbling events by default

* (HXElement) Update `$emit()`
  * Do NOT bubble events by default
  * Provide capability to override event configuration.
* (polyfills) Add source to compile `helix-ui.polyfills*.js`
  * Add `Object.assign()` polyfill
  * More polyfills coming soon
* (Layouts) Update layout templates to include minified HelixUI polyfill
* (docs) include HelixUI polyfill in templates

Author: Ryan A. Johnson

docs/_templates/partials/after_footer.njk

@@ -1,3 +1,4 @@
+<script src="dist/scripts/helix-ui.polyfills.js"></script>
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
 
 <!-- intelligently load ES5 Adapter (if needed) -->

docs/components/layouts/horizontal-layout-template.html

@@ -100,6 +100,9 @@ <h2>Right Panel</h2>
     {% include 'partials/footer_legal.njk' %}
   </footer>
 
+  <!-- FIXME: point to HelixUI polyfills in node_modules/helix-ui -->
+  <script src="dist/scripts/helix-ui.polyfills.min.js"></script>
+
   <!-- Browser polyfills (mainly for IE) -->
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
 

docs/components/layouts/vertical-layout-template.html

@@ -97,6 +97,9 @@ <h1>Page Content</h1>
     {% include 'partials/footer_legal.njk' %}
   </footer>
 
+  <!-- FIXME: point to HelixUI polyfills in node_modules/helix-ui -->
+  <script src="dist/scripts/helix-ui.polyfills.min.js"></script>
+
   <!-- Browser polyfills (mainly for IE) -->
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
 

rollup.config.js

@@ -31,6 +31,7 @@ let lessPlugin = less({
     }
 });
 
+// Intro/Outro placed INSIDE the applied dependency function
 let intro = `window.addEventListener('WebComponentsReady', function () {`;
 let outro = `});`;
 
@@ -114,4 +115,35 @@ export default [
             lessPlugin,
         ],
     },
+
+    // src/polyfills.js --> dis/helix-ui.polyfills.js (IIFE)
+    {
+        input: 'src/polyfills.js',
+        sourcemap: false,
+        output: [
+            {
+                file: 'dist/scripts/helix-ui.polyfills.js',
+                format: 'iife',
+            }
+        ],
+        plugins: [
+            babelPlugin,
+        ],
+    },
+
+    // src/polyfills.js --> dis/helix-ui.polyfills.min.js (IIFE)
+    {
+        input: 'src/polyfills.js',
+        sourcemap: false,
+        output: [
+            {
+                file: 'dist/scripts/helix-ui.polyfills.min.js',
+                format: 'iife',
+            }
+        ],
+        plugins: [
+            babelPlugin,
+            uglify({}, minify),
+        ],
+    },
 ]

src/helix-ui/elements/HXElement.js

@@ -86,12 +86,14 @@ export class HXElement extends HTMLElement {
         }
     }//$preventScroll()
 
-    $emit (evtName, details) {
-        let evt = new CustomEvent(evtName, {
+    $emit (evtName, opts) {
+        let options = Object.assign({}, {
             cancelable: true,
-            bubbles: true,
-            detail: details,
-        });
+            bubbles: false,
+        }, opts);
+
+        let evt = new CustomEvent(evtName, options);
+
         return this.dispatchEvent(evt);
     }//$emit
 
@@ -106,7 +108,7 @@ export class HXElement extends HTMLElement {
             bubbles: oldEvent.bubbles,
             cancelable: oldEvent.cancelable,
         });
-        this.dispatchEvent(newEvent);
+        return this.dispatchEvent(newEvent);
     }//$relayEvent()
 
     // TODO: may need a later update to add events based on element name/type

src/polyfills.js

@@ -0,0 +1,2 @@
+// Entrypoint for browser polyfills
+import './polyfills/Object';

src/polyfills/Object.js

@@ -0,0 +1,34 @@
+/* ========== Object ========== */
+
+/* ---------- assign() ---------- */
+// Affected Browsers: IE
+// Source: (MDN) https://goo.gl/UADxBn
+if (typeof Object.assign != 'function') {
+    // Must be writable: true, enumerable: false, configurable: true
+    Object.defineProperty(Object, "assign", {
+        value: function assign(target, varArgs) { // .length of function is 2
+            'use strict';
+            if (target == null) { // TypeError if undefined or null
+                throw new TypeError('Cannot convert undefined or null to object');
+            }
+
+            var to = Object(target);
+
+            for (var index = 1; index < arguments.length; index++) {
+                var nextSource = arguments[index];
+
+                if (nextSource != null) { // Skip over if undefined or null
+                    for (var nextKey in nextSource) {
+                        // Avoid bugs when hasOwnProperty is shadowed
+                        if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+                            to[nextKey] = nextSource[nextKey];
+                        }
+                    }
+                }
+            }
+            return to;
+        },
+        writable: true,
+        configurable: true
+    });
+}//Object.assign()