https://github.com/ericgj/accordion-tree

No-frills "Tree View" component
https://github.com/ericgj/accordion-tree

Last synced: 2 months ago
JSON representation

No-frills "Tree View" component

• Host: GitHub
• URL: https://github.com/ericgj/accordion-tree
• Owner: ericgj
• Created: 2013-05-05T14:32:41.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-05-06T21:34:39.000Z (over 11 years ago)
• Last Synced: 2023-03-11T07:12:51.288Z (almost 2 years ago)
• Language: JavaScript
• Size: 136 KB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        

# Accordion Tree

  A no-frills "Tree View" component.

  Love it or hate it, it's here to stay... 

  

  

  See `test/index.html` for example usage.

  

  Please note that this component does not currently implement 

  re-ordering of tree structure, etc.

## Installation

    $ component install ericgj/accordion-tree

## Events

  - `selectLeaf(node)`      when a leaf node is selected

  - `selectBranch(node)`    when a branch node is selected 

  - `select(node, type)`    when any node is selected (type is 'leaf' or 'branch')

## API

  

### AccordionTree(el, options)

  Creates a new `AccordionTree` under the given DOM element or selector.

  See info on the generated structure below.

  The following options are available:

  - `collapse {Boolean}`        allows collapse of selected node (default true)

  - `multiexpand {Boolean}`     allows expansion of more than one panel per tree 

                                  level (default false)

  - `branchexpand {Boolean}`    clicking on branch label expands/collapses node, 

                                  in addition to selecting (default true). When 

                                  false, only clicking the caret/icon expands/

                                  collapses node.

### AccordionTree#addBranch(content,slug)

  Add a branch node with the given content, and (optional) identifying slug.

  Returns the new node.

### AccordionTree#addLeaf(content,slug)

  Add a leaf node with the given content, and (optional) identifying slug.

  Returns the new node.

### AccordionTree#build(object,[node])

  Build a tree from the given (json) object, under the given node or the tree root

  node by default. Easy tree construction for simple cases.

### AccordionTree#clear

  Remove the contents of the entire tree.

### AccordionTree#removeNode(node)

  Remove the subtree under and including the specified node.

### Node#addBranch(content,slug)

  Add a branch node with this node as the root.

### Node#addLeaf(content,slug)

  Add a leaf node with this node as the root.

### Node#remove

  Remove the subtree under and including this node.

  

### Node#expand

  Programmatically expand this node (following collapse/multiexpand behavior).

### Node#collapse

  Programmatically collapse this node.

### Node#collapseAll

  Programmatically collapse this node and all its siblings.

## DOM structure

  In the DOM, the generated tree looks like this:

  ```html

  


    


      


        


          

          

          A branch

        

        


          


            A leaf

          

          


            Another leaf

          

        

      

      


        


          

          

          Another branch

        

        


        

      

    

  

  ```


  Note that the top-level DOM element will have the "accordion-tree" class

  added on initialization.

  Note that the `` you can use to style your own expand/

  collapse arrows, instead of the default in ``. You

  should have something like this:

  ```css

  .accordion-tree .caret { 

    display: none; 

  }

  .accordion-tree .icon {

    display: inline-block;

    /* background image or content for right-arrow */

  }

  .accordion-tree .expanded > * > .icon {

    /* background image or content for down-arrow */

  }

  ```

## Help

Questions, suggestions, pull requests, etc. please contact me.

## License

  MIT