treeboxjs

   

treebox

See a live example on CodePen

Install

npm i treeboxjs

Import

External JS with NPM:

  import TreeBox from 'treeboxjs';

  ...

ES6 module:

  <script type="module">
    import TreeBox from 'path-to-module/dist/index.browser.js';
    
    ...

Use

import TreeBox from 'treeboxjs';

const nodes = {
  display: `<h1>treebox example</h1>`, // This will display by default when treebox is rendered
  children: {
    directory: {
      children: {
        file: {
          display: `<p>A file</p>`,
        },
      },
    },
    file: {
      display: `
        <div>
          <p>Another file</p>
          <p>Multiple elements must be wrapped in a single enclosing element</p>
          <a treebox-href="/directory/file">Link to /directory/file within treebox</a>
        </div>
      `,
    },
  },
};

const root = document.getElementById('myTreeBoxRoot');

const tb = new TreeBox({nodes, root}); // Initiate treebox and append it to the "root" element

tb.navigate('/file'); // This code will cause treebox to render the `display` HTML at `nodes.children.file`
tb.navigate('/directory/file'); // This code will cause treebox to render the `display` HTML at `nodes.children.directory.children.file`
tb.navigate('/'); // This code will cause treebox to render the `display` HTML at `nodes.children`