1.0.4 • Published 5 years ago

treeboxjs v1.0.4

Weekly downloads
13
License
MIT
Repository
github
Last release
5 years ago

See a live example on CodePen

npm i treeboxjs
  const TreeBox = require('treeboxjs');

  ...
  <script type="module">
    import TreeBox from 'path-to-module/dist/index.browser.js';
    
    ...
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>
 */
1.0.2

5 years ago

1.0.1

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.0

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.0

5 years ago

0.0.26

5 years ago

0.0.25

5 years ago

0.0.24

5 years ago

0.0.23

5 years ago

0.0.22

5 years ago

0.0.21

5 years ago

0.0.20

5 years ago

0.0.13

5 years ago

0.0.14

5 years ago

0.0.15

5 years ago

0.0.16

5 years ago

0.0.17

5 years ago

0.0.18

5 years ago

0.0.19

5 years ago

0.0.10

5 years ago

0.0.11

5 years ago

0.0.12

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.3

5 years ago

0.0.4

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago

0.0.0

5 years ago