params.json

{
  "name": "Ember-cli-jstree",
  "tagline": "ember-cli addon for jstree",
  "body":
    "# ember-cli-jstree\r\n\r\n[![Travis-CI status](https://travis-ci.org/yectep/ember-cli-jstree.svg?branch=master)](https://travis-ci.org/yectep/ember-cli-jstree) [![Ember Observer Score](http://emberobserver.com/badges/ember-cli-jstree.svg)](http://emberobserver.com/addons/ember-cli-jstree)\r\n\r\nBrings [jsTree](http://www.jstree.com/) functionality into your Ember app.\r\n\r\n> Version 0.1.0 of this addon or greater has support for Ember-CLI 1.13 and has **prototype extensions disabled**.\r\n\r\n## Installation\r\n\r\nEmber CLI addons can be installed with `ember install`\r\n\r\n\tember install ember-cli-jstree\r\n\r\n## Usage\r\n\r\nOut of the box, the bare minimum you need on the template is `data`.\r\nRun supported actions on the tree by registering it to your controller with the `actionReceiver` property.\r\n\r\n````Handlebars\r\n<div class=\"sample-tree\">\r\n    {{ember-jstree\r\n        actionReceiver=jstreeActionReceiver\r\n        selectedNodes=jstreeSelectedNodes\r\n        data=data\r\n        plugins=plugins\r\n        themes=themes\r\n        checkboxOptions=checkboxOptions\r\n        contextmenuOptions=contextmenuOptions\r\n        stateOptions=stateOptions\r\n        typesOptions=typesOptions\r\n        searchOptions=searchOptions\r\n        searchTerm=searchTerm\r\n        contextMenuReportClicked=\"contextMenuReportClicked\"\r\n        eventDidBecomeReady=\"handleTreeDidBecomeReady\"\r\n    }}\r\n</div>\r\n````\r\n\r\n### Adding classes\r\n\r\nAs per the [jsTree JSON docs](https://www.jstree.com/docs/json/), you can add custom classes to both the `<li>` and `<a>` tags of each\r\nindividual node. These are passed on to jQuery's `attr` function.\r\n\r\nFor example, to add [hint.css](http://kushagragour.in/lab/hint/) tooltips, use the following in your JSON data hash.\r\n\r\n````Javascript\r\n{\r\n\t'id': 'node15',\r\n\t'text': 'Node title',\r\n\t'state': { 'selected': true },\r\n\t'a_attr': { 'class': 'hint--bottom', 'data-hint': 'Some hint goes here' }\r\n}\r\n````\r\n\r\nThis will get rendered in HTML as\r\n\r\n````HTML\r\n<a class=\"jstree-anchor jstree-clicked hint--bottom\" href=\"#\" tabindex=\"-1\" data-hint=\"Some hint goes here\" id=\"node15_anchor\"><i class=\"jstree-icon jstree-themeicon\" role=\"presentation\"></i>Node title</a>\r\n````\r\n\r\n## Event Handling\r\n\r\nThe addon listens for events from jstree and sends them back to you using actions bound\r\nto the Handlebars template. Simply set the property to the string name of the action\r\nin your controller.\r\n\r\n````Handlebars\r\n{{ember-jstree\r\n    [...]\r\n    eventDidChange=\"handleJstreeEventDidChange\"\r\n    treeObject=jstreeObject\r\n}}\r\n````\r\n\r\n### Supported events\r\n\r\nThe following events have basic support included. More are on the way.\r\n\r\n| jsTree Event              | Ember Action          |\r\n|---------------------------|-----------------------|\r\n| after_open.jstree         | eventDidOpen          |\r\n| after_close.jstree        | eventDidClose         |\r\n| changed.jstree            | eventDidChange        |\r\n| dehover_node.jstree       | eventDidDehoverNode   |\r\n| deselect_node.jstree      | eventDidDeselectNode  |\r\n| hover_node.jstree         | eventDidHoverNode     |\r\n| init.jstree               | eventDidInit          |\r\n| ready.jstree              | eventDidBecomeReady   |\r\n| redraw.jstree             | eventDidRedraw        |\r\n| show_node.jstree          | eventDidShowNode      |\r\n| select_node.jstree        | eventDidSelectNode    |\r\n| (destroyed - no event)    | eventDidDestroy       |\r\n| move_node.jstree          | eventDidMoveNode      |\r\n\r\n**Note:** In the meantime, you can add event listeners yourself by calling them on a mapped `treeObject` property.\r\n\r\n````Javascript\r\n_handleOpenNode: function() {\r\n    var treeObject = this.get('jstreeObject');\r\n    treeObject.on('open_node.jstree', function(e, data) {\r\n        console.info('A node was opened.');\r\n        console.log(data);\r\n    }.bind(this));\r\n}\r\n````\r\n\r\n### Selected nodes\r\n\r\nSelected nodes are always available through the `selectedNodes` property\r\n\r\n## Plugins\r\n\r\nPlugins for your tree should be specified by a `plugins` string property. Multiple plugins should be\r\nseparated with commas.\r\n\r\n````Handlebars\r\n{{ember-jstree\r\n    data=data\r\n    plugins=plugins\r\n}}\r\n````\r\n\r\nThe following [plugins](http://www.jstree.com/plugins/) are currently supported. More on the way!\r\n\r\n* Checkbox\r\n* Contextmenu\r\n* Search\r\n* State\r\n* Types\r\n* Wholerow\r\n* Drag and Drop\r\n\r\n### Configuring plugins\r\n\r\nSend a hash containing the jsTree options through to the addon through the `<plugin name>Options` key.\r\n\r\nIn your **controller**:\r\n\r\n````Javascript\r\njstreeStateOptionHash: {\r\n    'key': 'ember-cli-jstree-dummy'\r\n},\r\nplugins: 'state'\r\n````\r\n\r\nIn **Handlebars**:\r\n\r\n````Handlebars\r\n{{ember-jstree\r\n    [...]\r\n    plugins=plugins\r\n    stateOptions=jstreeStateOptionHash\r\n}}\r\n````\r\n\r\n### Configuring tree refresh\r\n\r\nSend in the following [properties](https://www.jstree.com/api/#/?f=refresh()) to control how the tree is refreshed when you change the data\r\n\r\n* skipLoading\r\n* forgetState\r\n\r\nBoth default to false if nothing is passed in\r\n\r\n## Sending actions to jsTree\r\n\r\nThe addon component will try to register an `actionReceiver` (see view helper example) to a property in\r\nyour controller if you define it. You can then send actions through that bound property:\r\n\r\n````Javascript\r\nthis.get('jstreeActionReceiver').send('redraw');\r\n````\r\n\r\n**Note:** Action names in Ember are camelized (e.g.: `get_node()` in jsTree is mapped to `getNode()` in Ember).\r\n\r\nIf the corresponding jsTree method has a return value, the addon will send an action with the name corresponding\r\nto supported actions in the table below. Because the addon actually calls these jsTree events, if any events\r\noccur because of an action, they will be sent as actions (see Event Handling above).\r\n\r\n### Supported actions\r\n\r\n| jsTree Action     | Ember Action      | Return Action         |\r\n|-------------------|-------------------|-----------------------|\r\n| copy_node         | copyNode          |                       |\r\n| close_all         | closeAll          |                       |\r\n| close_node        | closeNode         |                       |\r\n| create_node       | createNode        | actionCreateNode      |\r\n| delete_node       | deleteNode        | actionDeleteNode      |\r\n| deselect_all      | deselectAll       |                       |\r\n| deselect_node     | deselectNode      |                       |\r\n| destroy           | destroy           |                       |\r\n| get_children_dom  | getChildrenDom    | actionGetChildrenDom  |\r\n| get_container     | getContainer      | actionGetContainer    |\r\n| get_node          | getNode           | actionGetNode         |\r\n| get_parent        | getParent         | actionGetParent       |\r\n| get_path          | getPath           | actionGetPath         |\r\n| get_text          | getText           | actionGetText         |\r\n| last_error        | lastError         | actionLastError       |\r\n| load_all          | loadAll           | actionLoadAll         |\r\n| load_node         | loadNode          | actionLoadNode        |\r\n| move_node         | moveNode          |                       |\r\n| open_all          | openAll           |                       |\r\n| open_node         | openNode          |                       |\r\n| redraw            | redraw            |                       |\r\n| rename_node       | renameNode        | actionRenameNode      |\r\n| select_all        | selectAll         |                       |\r\n| select_node       | selectNode        |                       |\r\n| toggle_node       | toggleNode        |                       |\r\n\r\n### Receiving return values\r\n\r\nIn your Handlebars component, map the return action (as above, most of which follow the pattern `action<action name>`):\r\n\r\n````Handlebars\r\n{{ember-jstree\r\n    [...]\r\n    actionGetNode=\"handleJstreeGetNode\"\r\n}}\r\n````\r\n\r\nAny params that jsTree returns will be given in the order specified by its API.\r\n\r\n````Javascript\r\nactionGetNode: function (node) {\r\n    this.set('someValue', node);\r\n}\r\n````\r\n\r\n## Demo\r\n\r\nBoth dynamic (AJAX loaded) and static examples are in the dummy demo.\r\n\r\n* Clone this repo: `git clone`\r\n* Install packages: `npm install` then `bower install`\r\n* Run `ember serve`\r\n* Visit the sample app at http://localhost:4200.\r\n",
  "note":
    "Don't delete this file! It's used internally to help with page regeneration."
}