treeboxjs

   

treebox

See a live example on CodePen

Install

npm i treeboxjs

Import

External JS with NPM:

  const TreeBox = require('treeboxjs');

  ...

ES6 module:

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

Use

const TreeBox = require('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: String.raw`
<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>
      `.trim(),
    },
  },
};

// const root = document.getElementById('myTreeBoxRoot'); // if in the browser
const root = {
  appendChild: (x) => console.log('Rendered:\n', x),
  removeChild: () => console.log('\nCleared\n'),
};

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`


/* OUTPUT: */
/*
 * Rendered:
 * <h1>treebox example</h1>
 * 
 * Cleared
 * 
 * Rendered:
 * <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>
 * 
 * Cleared
 * 
 * Rendered:
 * <p>A file</p>
 * 
 * Cleared
 * 
 * Rendered:
 * <h1>treebox example</h1>
 */