https://github.com/kanety/stimulus-tree

https://github.com/kanety/stimulus-tree

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/stimulus-tree
• Owner: kanety
• License: mit
• Created: 2021-09-26T03:56:05.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-06-27T07:29:39.000Z (7 months ago)
• Last Synced: 2024-08-31T01:48:27.400Z (5 months ago)
• Language: JavaScript
• Size: 91.8 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stimulus-tree

A stimulus controller for simple tree ui.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

    $ npm install @kanety/stimulus-tree --save

## Usage

Register controller:

```javascript

import { Application } from '@hotwired/stimulus';

import TreeController from '@kanety/stimulus-tree';

const application = Application.start();

application.register('tree', TreeController);

```

Import css:

```css

@import '@kanety/stimulus-tree';

```

Build html as follows:

```html



  


    

    text of 1

    


      


        

        text of 1.1

        


          


            

            text of 1.1.1

          

          


            

            text of 1.1.2

          

        

      

    

  



```


### Options

#### store-key

Save node state to `sessionStorage`:

```html





```


### Callbacks

Set callbacks running when a node is opened or closed:

```javascript

let element = document.querySelector('[data-controller="tree"]');

element.addEventListener('tree:opened', (e) => {

  console.log('opened: ' + e.detail.node.getAttribute('data-node-id'));

});

element.addEventListener('tree:closed', (e) => {

  console.log('closed: ' + e.detail.node.getAttribute('data-node-id'));

});

```

### Event operations

Expand or collapse tree nodes:

```html





```


```javascript

let element = document.querySelector('[data-controller="tree"]');

element.dispatchEvent(new CustomEvent('tree:expand'));

element.dispatchEvent(new CustomEvent('tree:collapse'));

```

### Lazy load

Set URL for getting new HTML to each node using `data-node-lazy` attribute:

```html



  


    

    text of 1

  



```


The new HTML should contains exapnded node like following example:

```html



  


    

    text of 1

    


      


        

        text of 1.1

      

    

  



```


## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).