<!DOCTYPE html>
<html><head>
  <title>Namespace tree menu</title>
  <script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="/bower_components/polymer/polymer.html">
  <link rel="import" href="/bower_components/core-icons/core-icons.html">
  <link rel="import" href="/bower_components/paper-spinner/paper-spinner.html">
  <link rel="import" href="tree-node.html">
  <style>
    body {
      font-family: Roboto, sans-serif;
    }
    tree-node::shadow .item {
      padding: 0.2em 0.5em;
    }
  </style>
</head>
<body>

  <section>
    <h2>DOM Tree Menu</h2>
    <p><input id="newlabel" />
      <button id="nodeadd">Append To:</button>
      <span id="treepath"></span>
      <button id="nodedel">Delete</button>
    </p>
    <p id="status">&nbsp;</p>

    <tree-node id="menu" label="root" icon="dns">
      <tree-node label="lib" icon="label-outline" loading></tree-node>
      <tree-node label="users" title="subtable">
        <tree-node label="local" icon="dns" open loading>
          <tree-node label="george" icon="label-outline" loading isExpandable></tree-node>
          <tree-node label="martha" icon="label-outline"></tree-node>
        </tree-node>
        <tree-node label="remote" icon="dns" highlight></tree-node>
      </tree-node>
    </tree-node>
  </section>

<script>
var activeNode; // element that is active and highlighted
var nodeIndex = 0;  // for labeling nodes
document.getElementById('menu').addEventListener('activate', function(e) {
  if (!e.detail.shiftKey) { // clear active highlight
    var nodes = this.getElementsByTagName('tree-node');
    for (var i = 0; i < nodes.length; i++) {
      nodes[i].highlight = false;
    }
    this.highlight = false;  // remove from root of tree
  }

  // set active highlight
  activeNode = e.detail.node; // save active node
  activeNode.highlight = true; // highlight active node

  // construct bread crumb path
  var cn = activeNode;
  var path = [cn.label];
  while (cn !== this) {
    cn = cn.parentElement;
    path.unshift(cn.label);
  }
  document.getElementById('treepath').textContent = path.join(' > ');

  return false; // stop propagation
});
document.getElementById('menu').addEventListener('openchange', function(e) {
  var n = e.detail.node;
  document.getElementById('status').textContent = n.label+
      ' '+(n.open?'expanded':'collapsed');
});
document.getElementById('nodeadd').addEventListener('click', function(e) {
  if (!activeNode) { return; }
  var node = document.createElement('tree-node');
  var inel = document.getElementById('newlabel');
  var label = inel.value || 'newchild-'+nodeIndex++;
  inel.value = '';
  node.setAttribute('label', label);
  node.setAttribute('icon', ['dns', 'label-outline', 'folder-open'][Math.floor(Math.random()* 2.5)]);
  if (Math.random() * 2 > 1) { node.setAttribute('loading', true); }
  activeNode.appendChild(node);
  activeNode.open = true;  // open active node (optional)
});
document.getElementById('nodedel').addEventListener('click', function(e) {
  if (!activeNode) { return; }
  var parent = activeNode.parentElement;
  parent.removeChild(activeNode);
  activeNode = null;
  document.getElementById('treepath').textContent = '';
});
</script>

</body></html>