Merge pull request #3 from neuralquest/lazy-load

Lazy loading events and mixins
vpusher · Mar 1, 2017 · dbe1818 · dbe1818
2 parents da3f8bd + 0238ea9
commit dbe1818
Show file tree

Hide file tree

Showing 4 changed files with 205 additions and 21 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -18,6 +18,7 @@
 <div class="vertical-section-container centered">
 
  <h3>Basic demo with only one node</h3>
+
  <demo-snippet>
  <template>
  <paper-tree id="tree1"></paper-tree>
@@ -169,6 +170,85 @@ <h3>Complex tree demo</h3>
  </template>
  </demo-snippet>
 
+ <h3>Lazy loading demo</h3>
+ <demo-snippet>
+ <template>
+ <template id="t" is="dom-bind">
+ <style is="custom-style">
+ @keyframes blinker {
+ 50% { opacity: 0; }
+ }
+
+ #tree {
+ --paper-tree-toggle-theme: {
+ animation: blinker 1s linear infinite;
+ content: '⧖';
+ margin-left: -21px;
+ };
+ }
+ </style>
+
+ <paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>
+
+ <script>
+
+ var template = document.querySelector('#t'),
+ tree = template.$.tree;
+
+ // Update the root data after 1 second delay
+ window.setTimeout(function() {
+ tree.data = { name:'Cronos' };
+ // Fetching root children ...
+ template.fetchChildren(tree.$.root);
+ }, 1000);
+
+
+ template.onToggle = function(event) {
+ var target = event.detail;
+
+ !target.loaded && target.getChildren().forEach(function(child){
+ target.loaded = true;
+ // Fetching children ...
+ this.fetchChildren(child);
+ }, this);
+ },
+
+ template.setLoadingState = function(node, enabled) {
+
+ if (enabled) {
+ node.customStyle['--paper-tree-toggle-theme'] = 'animation: blinker 1s linear infinite; content: \'⧖\'; margin-left: -21px;';
+ } else {
+ node.customStyle['--paper-tree-toggle-theme'] = ';';
+ }
+
+ node.updateStyles();
+ },
+
+ template.fetchChildren = function(node) {
+
+ // Set loading styles
+ this.setLoadingState(node, true);
+
+ window.setTimeout(function() {
+
+ // Add children to the node
+ node.set('data.children', [
+ {name: 'Zeus'},
+ {name: 'Apollo'},
+ {name: 'Athena'},
+ {name: 'Poseidon'}
+ ]);
+
+ // Reset loading styles
+ this.setLoadingState(node, false);
+
+ }.bind(this), Math.floor(Math.random() * 2000));
+ }
+ </script>
+ </template>
+ </template>
+ </demo-snippet>
+
 </div>
 </body>
 </html>
diff --git a/demo/lazyloading.html b/demo/lazyloading.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+ <link rel="import" href="../paper-tree.html" />
+</head>
+<body>
+
+<template id="t" is="dom-bind">
+ <style is="custom-style">
+ @keyframes blinker {
+ 50% { opacity: 0; }
+ }
+
+ #tree {
+ --paper-tree-toggle-theme: {
+ animation: blinker 1s linear infinite;
+ content: '⧖';
+ margin-left: -21px;
+ };
+ }
+ </style>
+ <h2>Lazy loading paper-tree demo</h2>
+ <p>
+ Here we use the 'toggle' event to lazy load grandchildren.<br>
+ We've added some delay so you can see the effect of the loading icon.
+ </p>
+ <paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>
+ <script>
+
+ var template = document.querySelector('#t'),
+ tree = template.$.tree;
+
+ // Update the root data after 1 second delay
+ window.setTimeout(function() {
+ tree.data = { name:'Cronos' };
+ // Fetching root children ...
+ template.fetchChildren(tree.$.root);
+ }, 1000);
+
+
+ template.onToggle = function(event) {
+ var target = event.detail;
+
+ !target.loaded && target.getChildren().forEach(function(child){
+ target.loaded = true;
+ // Fetching children ...
+ this.fetchChildren(child);
+ }, this);
+ },
+
+ template.setLoadingState = function(node, enabled) {
+
+ if (enabled) {
+ node.customStyle['--paper-tree-toggle-theme'] = 'animation: blinker 1s linear infinite; content: \'⧖\'; margin-left: -21px;';
+ } else {
+ node.customStyle['--paper-tree-toggle-theme'] = ';';
+ }
+
+ node.updateStyles();
+ },
+
+ template.fetchChildren = function(node) {
+
+ // Set loading styles
+ this.setLoadingState(node, true);
+
+ // Update the children after a random delay
+ window.setTimeout(function() {
+
+ node.set('data.children', [
+ {name: 'Zeus'},
+ {name: 'Apollo'},
+ {name: 'Athena'},
+ {name: 'Poseidon'}
+ ]);
+
+ // Reset loading styles
+ this.setLoadingState(node, false);
+
+ }.bind(this), Math.floor(Math.random() * 2000));
+ }
+</script>
+</template>
+
+
+</body>
+</html>
diff --git a/demo/playground.html b/demo/playground.html
@@ -41,17 +41,7 @@ <h3>Media Tree</h3>
  "icon": "weekend",
  "open": true,
  "children": [{
- "name": "Movies",
- "children": [{
- "name": "Interstellar",
- "icon": "theaters"
- }, {
- "name": "The Godfather",
- "icon": "theaters"
- }, {
- "name": "Pulp Fiction",
- "icon": "theaters"
- }]
+ "name": "Movies"
  }, {
  "name": "TV Shows",
  "children": [{

diff --git a/paper-tree-node.html b/paper-tree-node.html
@@ -21,8 +21,10 @@
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--paper-tree-selected-background-color` | Highlight color for selected node | `rgba(200, 200, 200, 0.5)`
-`--paper-tree-selected-color` | Text and icon color for selected node | `inherit`
+`--paper-tree-selected-background-color` | Highlight color for selected node | `rgba(200, 200, 200, 0.5)`
+`--paper-tree-selected-color` | Text and icon color for selected node | `inherit`
+`--paper-tree-toggle-theme` | Change theme for node +/- toggle |
+`--paper-tree-icon-theme` | Change theme for node icon |
 
 @demo
 -->
@@ -42,28 +44,35 @@
  display: inline-block;
  }
 
+ .node-container {
+ white-space: nowrap;
+ }
+
  .node-row {
  padding-left: 4px;
  padding-right: 4px;
  }
 
- .node-preicon {
- padding-left: 23px;
- }
-
  .node-preicon.collapsed,
  .node-preicon.expanded {
  padding-left: 0px;
  }
 
+ .node-preicon {
+ padding-left: 18px;
+ }
+
+ .node-preicon:before {
+ margin-right: 5px;
+ @apply(--paper-tree-toggle-theme);
+ }
+
  .node-preicon.collapsed:before {
  content: '\002B';
- padding: 5px;
  }
 
  .node-preicon.expanded:before {
  content: '\2212';
- padding: 5px;
  }
 
  .node-preicon, .node-name {
@@ -74,6 +83,7 @@
  cursor: pointer;
  width: 24px;
  height: 24px;
+ @apply(--paper-tree-icon-theme);
  }
 
  #actions {
@@ -173,6 +183,13 @@
  * @event select
  */
 
+ /**
+ * The `toggle` event is fired whenever a tree node is expanded or collapsed.
+ * This event can be used by the host to lazy load grandchildren.
+ *
+ * @event toggle
+ */
+
  /**
  * Returns the necessary classes.
  *
@@ -207,17 +224,25 @@
  },
 
  /**
- * Returns the parent node. Returns `null` if root.
+ * Returns the parent tree node. Returns `null` if root.
  */
  getParent: function () {
- return this.domHost.tagName === 'WOOD-TREE-NODE' ? this.domHost : null;
+ return this.domHost.tagName === 'PAPER-TREE-NODE' ? this.domHost : null;
+ },
+
+ /**
+ * Returns the children tree nodes.
+ */
+ getChildren: function () {
+ return Polymer.dom(this.root).querySelectorAll('paper-tree-node');
  },
 
  /**
  * Display/Hide the children nodes.
  */
  toggleChildren: function() {
  this.set("data.open", !this.data.open && this.data.children && this.data.children.length);
+ this.fire("toggle", this);
  }
 
  });