Hybridize

.gitignore

@@ -0,0 +1,2 @@
+bower_components*
+bower-*

bower.json

@@ -2,15 +2,38 @@
   "name": "hc-tree-view",
   "description": "An optimized tree-view based on a flat data structure.",
   "main": "hc-tree-view.html",
+  "version": "v0.5.0",
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.7.0",
-    "iron-list": "admwx7/iron-list#fix/issue-300",
-    "paper-tristate-checkbox": "Hackception/paper-tristate-checkbox#^0.2.0"
+    "polymer": "Polymer/polymer#^1.9 || ^2.0",
+    "iron-list": "admwx7/iron-list#fix/data-propagation",
+    "paper-tristate-checkbox": "Hackception/paper-tristate-checkbox#^0.3.0"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0 || ^2.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0 || ^2.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0 || ^2.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.9",
+        "iron-list": "admwx7/iron-list#fix/issue-300",
+        "paper-tristate-checkbox": "Hackception/paper-tristate-checkbox#^0.2.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      },
+      "resolutions": {
+        "iron-list": "fix/issue-300",
+        "webcomponentsjs": "^0.7.0"
+      }
+    }
+  },
+  "resolutions": {
+    "webcomponentsjs": "^1.0.0"
   }
 }

demo/hc-nested-list.html

@@ -62,7 +62,7 @@ <h3><code>hc-nested-list demo</code></h3>
                   items: {
                     type: Array,
                     // This function is provided as part of test/utils.html, used for testing
-                    value: () => buildItems(100, 100, 100)
+                    value: () => buildItems(10, 10, 10)
                   }
                 }
               });

demo/index.html

@@ -38,39 +38,43 @@ <h3>Basic hc-tree-view demo</h3>
               ></hc-tree-view>
             </template>
             <script>
-              Polymer({
-                is: 'hc-tree-view-demo',
-                properties: {
-                  items: {
-                    type: Array,
-                    // This function is provided as part of test/utils.html, used for testing
-                    value: () => buildItems(10, 10, 10, 10)
+              window.addEventListener('WebComponentsReady', () => {
+                Polymer({
+                  is: 'hc-tree-view-demo',
+                  properties: {
+                    items: {
+                      type: Array,
+                      // This function is provided as part of test/utils.html, used for testing
+                      value() {
+                        return buildItems(5, 5, 5, 5);
+                      }
+                    },
+                    selectedItems: Array
                   },
-                  selectedItems: Array
-                },
-                deselectItems() {
-                  this.$.tree.deselectItems();
-                },
-                reset() {
-                  this.$.tree.reset();
-                },
-                collapse() {
-                  this.$.tree.collapse();
-                },
-                collapseLeafItem() {
-                  const rootItem = this.$.tree._parts.root[0];
-                  const childItem = this.$.tree._parts[rootItem.id][0];
-                  this.$.tree.collapse([childItem]);
-                },
-                selectLeafItem() {
-                  const rootItem = this.$.tree._parts.root[0];
-                  const childItem = this.$.tree._parts[rootItem.id][0];
-                  const leafItem = this.$.tree._parts[childItem.id][0];
-                  this.$.tree.selectItems([leafItem]);
-                },
-                selectRootItem() {
-                  this.$.tree.selectItems([this.$.tree._parts.root[0]]);
-                }
+                  deselectItems() {
+                    this.$.tree.deselectItems();
+                  },
+                  reset() {
+                    this.$.tree.reset();
+                  },
+                  collapse() {
+                    this.$.tree.collapse();
+                  },
+                  collapseLeafItem() {
+                    const rootItem = this.$.tree._parts.root[0];
+                    const childItem = this.$.tree._parts[rootItem.id][0];
+                    this.$.tree.collapse([childItem]);
+                  },
+                  selectLeafItem() {
+                    const rootItem = this.$.tree._parts.root[0];
+                    const childItem = this.$.tree._parts[rootItem.id][0];
+                    const leafItem = this.$.tree._parts[childItem.id][0];
+                    this.$.tree.selectItems([leafItem]);
+                  },
+                  selectRootItem() {
+                    this.$.tree.selectItems([this.$.tree._parts.root[0]]);
+                  }
+                });
               });
             </script>
           </dom-module>

hc-nested-list-behavior.html

@@ -17,17 +17,17 @@
       isLoading: {
         type: Boolean,
         value: false,
-        notify: true
+        notify: true,
       },
       /* The property name for the id on each item. */
       itemIdName: {
         type: String,
-        value: 'id'
+        value: 'id',
       },
       /* The property name for the parentId on each item. */
       itemParentIdName: {
         type: String,
-        value: 'parentId'
+        value: 'parentId',
       },
       /**
        * The flat array of items to build the nested list structure from, requires an id and
@@ -44,7 +44,7 @@
        */
       parts: {
         type: Object,
-        notify: true
+        notify: true,
       },
       /**
        * The currently visible subset of items from the items property
@@ -54,12 +54,25 @@
       _items: {
         type: Array,
         readOnly: true,
-        computed: '_computeItems(parts)'
+        computed: '_computeItems(parts)',
+        observer: '__updateList',
+      },
+    },
+    observers: [
+      '_computeParts(items, itemIdName, itemParentIdName)',
+    ],
+    ready() {
+      this.itemOpenChanged = this.itemOpenChanged.bind(this);
+    },
+    attached() {
+      this.addEventListener('item-open-changed', this.itemOpenChanged);
+      this.$.list._propagateUpdates = (item, instance) => {
+        instance.notifyPath('item.state', item.state);
+        instance.notifyPath('item.open', item.open);
       }
     },
-    observers: ['_computeParts(items, itemIdName, itemParentIdName)'],
-    listeners: {
-      'item-open-changed': 'itemOpenChanged'
+    detached() {
+      this.removeEventListener('item-open-changed', this.itemOpenChanged);
     },
     /**
      * Called when an item's open status is changed.  Update parts with children if lazy-loading then call update
@@ -110,12 +123,14 @@
      * @param {Object} detail
      * @param {String} [idName=this.itemIdName]
      * @param {Object} [parts = this.parts]
+     * @return {Promise}
      */
-    itemOpenChanged(event, detail, idName = this.itemIdName, parts = this.parts) {
+    itemOpenChanged(event, idName = this.itemIdName, parts = this.parts) {
       // Block interactions while loading items
       if (this.isLoading) return;
       this.isLoading = true;
 
+      const detail = event.detail;
       const items = parts[this._getParentId(detail.item)];
       const id = detail.item[idName];
       let item;
@@ -132,7 +147,7 @@
         } else items[i].open = false; // If it's not the item we want, ensure it's closed
       }
 
-      (new Promise((res) => {
+      return (new Promise((res) => {
         if (item) {
           // fetch children and update when done, when there's an item
           const ids = Object.keys(parts);
@@ -147,7 +162,7 @@
             res(parts);
           });
         } else res(parts);
-      })).then(() => {
+      })).then((parts) => {
         this.set('parts', Object.assign({}, parts));
         this.isLoading = false;
       });
@@ -161,7 +176,7 @@
      * @param {Object} parts
      * @param {Object[]} [items=parts.root]
      * @param {String} [idName=this.itemIdName]
-     * @returns {Object[]}
+     * @return {Object[]}
      */
     _computeItems(parts, items = parts.root, idName = this.itemIdName) {
       // Can't calculate items without parts or the name of the id property.
@@ -216,7 +231,7 @@
      * @param {Object} item
      * @param {Object} parts
      * @param {String} [parentId = this._getParentId(item)]
-     * @returns {Number|undefined}
+     * @return {Number|undefined}
      */
     _getItemDepth(item, parts, parentId = this._getParentId(item)) {
       const parent = this.getParent(item, parts);
@@ -241,7 +256,7 @@
      * @protected
      * @param {Object} item
      * @param {String} [parentIdName=this.itemParentIdName]
-     * @returns {String|Number}
+     * @return {String|Number}
      */
     _getParentId(item, parentIdName = this.itemParentIdName) {
       return (item[parentIdName] || item[parentIdName] === 0) ?
@@ -262,9 +277,27 @@
       return Object.assign({
         open: false,
         state: parentState,
-        depth: this._getItemDepth(item, parts, parentId)
+        depth: this._getItemDepth(item, parts, parentId),
       }, item);
-    }
+    },
+    /**
+     * This is a hack to make iron-list hide it's additional physical items since that's not actually part of it's
+     *  functionality.
+     * @private
+     */
+    __updateList() {
+      this.debounce('parts-updating', () => {
+        const list = this.$.list;
+        const lastIndex = this._items.length - 1;
+        (list._physicalItems || []).forEach((item, index) => {
+          if (index > lastIndex) {
+            item.setAttribute('hidden', '');
+          } else {
+            item.removeAttribute('hidden');
+          }
+        });
+      }, 100);
+    },
   };
 
   /**

hc-nested-list-item.html

@@ -31,10 +31,16 @@
       is: 'hc-nested-list-item',
       properties: {
         /* The item holding all data */
-        item: Object
+        item: Object,
       },
-      listeners: {
-        tap: 'fireOpenEvent'
+      ready() {
+        this.fireOpenEvent = this.fireOpenEvent.bind(this);
+      },
+      attached() {
+        this.addEventListener('click', this.fireOpenEvent);
+      },
+      detached() {
+        this.removeEventListener('click', this.fireOpenEvent);
       },
       /**
        * Fires the toggle event required by hc-nested-list to open/close content sections.
@@ -47,11 +53,16 @@
         event.stopPropagation();
 
         // Trigger an event to toggle open state instead.
-        this.fire('item-open-changed', {
-          item: this.item,
-          open: !this.item.open
-        });
-      }
+        this.dispatchEvent(new CustomEvent('item-open-changed', {
+          detail: {
+            item: this.item,
+            open: !this.item.open,
+          },
+          bubbles: true,
+          composed: true,
+          cancelable: true,
+        }));
+      },
     });
   </script>
 </dom-module>

hc-nested-list.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="hc-nested-list-behavior.html">
 <link rel="import" href="../iron-list/iron-list.html">
+<link rel="import" href="hc-nested-list-behavior.html">
 
 <!--
 `hc-nested-list` an optimized way to render a list of "nested" items as a flat data structure,
@@ -40,15 +40,15 @@
       }
     </style>
 
+    <!-- TODO: this being inside of iron-list is breaking it, need to figure out a
+    different way to render this instead -->
+    <div id="loader" hidden$="[[!isLoading]]">
+      <slot name="loader"></slot>
+    </div>
     <iron-list
       id="list"
       items="[[_items]]"
-      max-physical-count="[[_items.length]]"
-      as="item"
-      >
-      <div id="loader" hidden$="[[!isLoading]]">
-        <slot name="loader"></slot>
-      </div>
+      as="item">
       <slot></slot>
     </iron-list>
   </template>
@@ -57,7 +57,7 @@
     Polymer({
       /* global hc */
       is: 'hc-nested-list',
-      behaviors: [hc.NestedListBehavior]
+      behaviors: [hc.NestedListBehavior],
     });
   </script>
 </dom-module>