New Power Manual

    treeboxjs

    1.0.4 • Public • Published
    npm  David  npm bundle size

    treebox

    See a live example on CodePen

    Install

    npm i treeboxjs
    

    Import

    External JS with NPM:

      const TreeBox = require('treeboxjs');
     
      ...

    ES6 module:

    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>
     */

    Keywords

    none

    Install

    npm i treeboxjs

    DownloadsWeekly Downloads

    15

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    9.82 kB

    Total Files

    5

    Last publish

    Collaborators

    • jaredgorski6