🚀 Dev Updates for Next Release

ConradSollitt · ConradSollitt · commit c5827333c185 · 2020-11-11T19:06:30.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -138,7 +138,7 @@ The Web Components have the most complex breaking changes related to API usage h
   * Replaced `data-source` with `data-bind` and now `<data-list>` will be converted to a `<div>` with a `<ul>` in the `<div>` instead of converting to a `<ul>` directly.
   * `<template>` support has been added.
 * `js\web-components\data-list.js`
-  * Removed `root-class` attribute and replaced it with `root-attr` which allows for any attribute
+  * Added HTML attribute `root-attr` which allows for any attribute to be set on the root element. Previously only the `class` could be set from `root-class`. The attribute `root-class` is still supported.
 * Rename `jsPlugins.js` function `refreshJsPlugins()` to `refreshPlugins()` so it matches the standard Framework.
   * Affects Web Components and React
   * `js/web-components/jsPlugins.js`
diff --git a/examples/html/image-categories-web.htm b/examples/html/image-categories-web.htm
@@ -21,7 +21,7 @@
                 <h1></h1>
                 <data-list
                     data-bind="categories"
-                    root-attr="class=image-categories">
+                    root-class="image-categories">
                 </data-list>
             </div>
         </section>
diff --git a/examples/image-gallery-web.htm b/examples/image-gallery-web.htm
@@ -130,7 +130,7 @@ <h2 class="error">Error loading photos</h2>
                     data-bind="images"
                     template-selector="#image"
                     root-element="div"
-                    root-attr="class=image-gallery">
+                    root-class="image-gallery">
                 </data-list>
 
                 <!-- Example (2) -->
@@ -174,12 +174,12 @@ <h2 class="error">Error loading photos</h2>
             DataFormsJS Web Components
             https://www.dataformsjs.com/
         -->
-        <script type="module" src="../js/web-components/json-data.js"></script>
+        <!-- <script type="module" src="../js/web-components/json-data.js"></script>
         <script type="module" src="../js/web-components/data-list.js"></script>
         <script type="module" src="../js/web-components/image-gallery.js"></script>
-        <script nomodule src="../js/web-components/polyfill.js"></script>
+        <script nomodule src="../js/web-components/polyfill.js"></script> -->
 
-        <!-- <script src="../js/web-components/polyfill.js"></script> -->
+        <script src="../js/web-components/polyfill.js"></script>
 
         <!--
             Add CSS Variable Support to IE and older Browsers
diff --git a/examples/web-components-data-list.htm b/examples/web-components-data-list.htm
@@ -48,12 +48,14 @@
                     <!--
                         This example uses [root-element] which is optional
                         and used only when using [template-selector].
+
+                        It also uses [root-class] instead of [root-element].
                     -->
                     <data-list
                         data-bind="countries"
                         template-selector="#list-template"
                         root-element="ul"
-                        root-attr="class=items">
+                        root-class="items">
                     </data-list>
 
                     <!--
diff --git a/js/controls/data-list.js b/js/controls/data-list.js
@@ -4,10 +4,10 @@
  * This control is designed for compatibility with the DataFormsJS Web Component
  * [js/web-components/data-list.js] and includes the ability for basic templating
  * from HTML using a template syntax based on JavaScript template literals (template strings).
- * 
+ *
  * When [js/web-components/polyfill.js] is used for DataFormsJS Web Component
  * this file will be downloaded and used.
- * 
+ *
  * The script [js/extensions/jsTemplate.js] is required when using templating
  * and is handled automatically by [polyfill.js]. To use the the standard
  * Framework simply make sure the script is included from [app.lazyLoad]
@@ -37,6 +37,7 @@
             bind: null,
             templateSelector: null,
             rootElement: null,
+            rootClass: null,
             rootAttr: null,
             errorClass: null,
             templateReturnsHtml: null,
@@ -71,17 +72,20 @@
             }
 
             function showError(error, element) {
-                addError(error, element)
+                addError(error, element);
                 closeElement();
                 return html.join('');
             }
 
             function getAttrHtml() {
+                var html = '';
+                if (control.rootClass !== null) {
+                    html = ' class="' + app.escapeHtml(control.rootClass) + '"';
+                }
                 if (control.rootAttr === null) {
-                    return '';
+                    return html;
                 }
                 var rootAttr = control.rootAttr.split(',').map(function(s) { return s.trim(); });
-                var html = '';
                 for (var n = 0, m = rootAttr.length; n < m; n++) {
                     var attr = rootAttr[n];
                     var pos = attr.indexOf('=');
diff --git a/js/controls/data-list.min.js b/js/controls/data-list.min.js
diff --git a/js/web-components/data-list.js b/js/web-components/data-list.js
@@ -90,8 +90,12 @@ class DataList extends HTMLElement {
         }
 
         // Build Attributes for Root Element
+        let rootClass = this.getAttribute('root-class');
         let rootAttr = this.getAttribute('root-attr');
         let rootAttrHtml = '';
+        if (rootClass) {
+            rootAttrHtml = render` class="${rootClass}"`;
+        }
         if (rootAttr) {
             rootAttr = rootAttr.split(',').map(s => s.trim());
             for (const attr of rootAttr) {
diff --git a/js/web-components/data-list.min.js b/js/web-components/data-list.min.js
diff --git a/js/web-components/polyfill.js b/js/web-components/polyfill.js
@@ -82,7 +82,7 @@
             });
         },
         dataList: function(element) {
-            updateElements.dataAttributes(element, ['template-selector', 'root-element', 'root-attr', 'error-class', 'template-returns-html', 'list-item-name']);
+            updateElements.dataAttributes(element, ['template-selector', 'root-element', 'root-class', 'root-attr', 'error-class', 'template-returns-html', 'list-item-name']);
         },
         dataTable: function(element) {
             updateElements.dataAttributes(element, ['highlight-class', 'labels', 'columns', 'table-attr', 'highlight-class']);
diff --git a/js/web-components/polyfill.min.js b/js/web-components/polyfill.min.js
