ability to select a node clicking the icon

vpusher · Nov 13, 2016 · a5a77a2 · a5a77a2
1 parent e132cb9
commit a5a77a2
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -87,6 +87,7 @@ See documentation to know the options and structure of the `data` attribute.
 
 ## History
 
+* **1.0.1:** ability to select a node clicking the icon.
 * **1.0.0:** initial release.
 
 ## License

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
  "name": "paper-tree",
  "main": "paper-tree.html",
- "version": "1.0.0",
+ "version": "1.0.1",
  "description": "A custom element displaying a browsable tree.",
  "keywords": [
  "tree",

diff --git a/demo/playground.html b/demo/playground.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+ <link rel="import" href="../paper-tree.html" />
+</head>
+<body>
+<template is="dom-bind">
+ <h3>GOT Tree: {{selected.data.name}}</h3>
+ <paper-tree selected="{{selected}}"></paper-tree>
+ <script>
+ document.querySelector('paper-tree').data = {
+ "name": "GOT",
+ "icon": "theaters",
+ "open": true,
+ "children": [
+ {
+ "name": "Starks",
+ "icon": "turned-in"
+ }, {
+ "name": "Lannisters",
+ "icon": "turned-in"
+ }, {
+ "name": "Targaryens",
+ "icon": "turned-in"
+ }, {
+ "name": "Baratheons",
+ "icon": "turned-in",
+ }
+ ]
+ };
+ </script>
+</template>
+
+<template is="dom-bind">
+ <h3>Media Tree</h3>
+ <paper-tree data='{
+ "name": "Media Center",
+ "icon": "weekend",
+ "open": true,
+ "children": [{
+ "name": "Movies",
+ "children": [{
+ "name": "Interstellar",
+ "icon": "theaters"
+ }, {
+ "name": "The Godfather",
+ "icon": "theaters"
+ }, {
+ "name": "Pulp Fiction",
+ "icon": "theaters"
+ }]
+ }, {
+ "name": "TV Shows",
+ "children": [{
+ "name": "Breaking Bad",
+ "icon": "theaters"
+ }, {
+ "name": "Game of Thrones",
+ "icon": "theaters"
+ }]
+ }]}'
+ actions='[{
+ "label": "Play",
+ "event": "play"
+ }]'>
+ </paper-tree>
+</template>
+</body>
+</html>
diff --git a/paper-tree-node.html b/paper-tree-node.html
@@ -22,7 +22,7 @@
 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 | `#000`
+`--paper-tree-selected--color` | Text and icon color for selected node | `rgb(0, 0, 0)`
 
 @demo
 -->
@@ -33,44 +33,49 @@
 
  <style>
 
- :host.selected > .node-container > .node-title {
+ :host.selected > .node-container > .node-row {
  background-color: var(--paper-tree-selected-background-color, rgba(200, 200, 200, 0.5));
- color: var(--paper-tree-selected-color, #000);
+ color: var(--paper-tree-selected-color, rgb(0, 0, 0));
  }
 
- :host.selected > .node-container > .node-title > #actions {
+ :host.selected > .node-container > .node-row > #actions {
  display: inline-block;
  }
 
- .node-title {
+ .node-row {
  padding-left: 4px;
  padding-right: 4px;
  }
 
- .parent {
+ .node-preicon {
  padding-left: 23px;
  }
 
- .parent.collapsed,
- .parent.expanded {
+ .node-preicon.collapsed,
+ .node-preicon.expanded {
  padding-left: 0px;
  }
 
- .parent.collapsed:before {
+ .node-preicon.collapsed:before {
  content: '\002B';
  padding: 5px;
  }
 
- .parent.expanded:before {
+ .node-preicon.expanded:before {
  content: '\2212';
  padding: 5px;
  }
 
- .parent,
- .name {
+ .node-preicon, .node-name {
  cursor: pointer;
  }
 
+ .node-icon {
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ }
+
  #actions {
  display: none;
  float: right;
@@ -87,24 +92,17 @@
  list-style-type: none;
  }
 
- iron-icon {
- cursor: pointer;
- width: 24px;
- height: 24px;
- }
-
  [hidden] {
  display: none;
  }
  </style>
 
  <template>
  <div class="node-container">
- <div class="node-title">
- <span class$="{{_computeClass(data.*)}}" on-click="toggleChildren">
- <iron-icon icon$="{{_computeIcon(data.icon)}}"></iron-icon>
- </span>
- <span class="name" on-click="select">{{data.name}}</span>
+ <div class="node-row">
+ <span class$="{{_computeClass(data.*)}}" on-click="toggleChildren"></span>
+ <iron-icon class="node-icon" icon$="{{_computeIcon(data.icon)}}" on-click="select"></iron-icon>
+ <span class="node-name" on-click="select">{{data.name}}</span>
  <template is="dom-if" if="{{actions}}">
  <paper-menu-button id="actions">
  <paper-icon-button icon="more-vert" noink class="dropdown-trigger"></paper-icon-button>
@@ -184,7 +182,7 @@
  _computeClass: function(change) {
  var open = change && change.base && change.base.open;
  var children = change && change.base && change.base.children;
- return 'parent ' + ((open && children && children.length) ? 'expanded' : children && children.length ? 'collapsed' : '');
+ return 'node-preicon ' + ((open && children && children.length) ? 'expanded' : children && children.length ? 'collapsed' : '');
  },
 
  /**

diff --git a/test/basic-test.html b/test/basic-test.html
@@ -71,26 +71,26 @@
  test('_computeClass', function() {
  // Some defaults tests
  var answer = node._computeClass();
- assert.equal(answer, 'parent ');
+ assert.equal(answer, 'node-preicon ');
 
  answer = node._computeClass({});
- assert.equal(answer, 'parent ');
+ assert.equal(answer, 'node-preicon ');
 
  // Ask for expanded with no children
  answer = node._computeClass({base: {open: true}});
- assert.equal(answer, 'parent ');
+ assert.equal(answer, 'node-preicon ');
 
  // Ask for expanded with empty children
  answer = node._computeClass({base: {open: true, children:[]}});
- assert.equal(answer, 'parent ');
+ assert.equal(answer, 'node-preicon ');
 
  // Ask for collapsed with children
  answer = node._computeClass({base: {open: false, children:[0]}});
- assert.equal(answer, 'parent collapsed');
+ assert.equal(answer, 'node-preicon collapsed');
 
  // Ask for expanded with children
  answer = node._computeClass({base: {open: true, children:[0]}});
- assert.equal(answer, 'parent expanded');
+ assert.equal(answer, 'node-preicon expanded');
  });
 
  test('_computeIcon', function() {