Initial implementation

Author: btecu

README.md

@@ -1,27 +1,84 @@
-# Ember-simple-tree
+# ember-simple-tree
 
-This README outlines the details of collaborating on this Ember addon.
+Simple tree component for Ember without any dependency.
 
 ## Installation
 
-* `git clone <repository-url>` this repository
-* `cd ember-simple-tree`
-* `npm install`
-* `bower install`
+```bash
+ember install ember-simple-tree
+```
 
-## Running
 
-* `ember serve`
-* Visit your app at [http://localhost:4200](http://localhost:4200).
+## Usage
 
-## Running Tests
+Basic example:
 
-* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
-* `ember test`
-* `ember test --server`
+```handlebars
+{{x-tree model=tree}}
+```
 
-## Building
 
-* `ember build`
+### Available actions
 
-For more information on using ember-cli, visit [http://ember-cli.com/](http://ember-cli.com/).
+#### hover
+
+Returns: `node`
+
+Fired when a node is hovered.
+
+
+#### select
+
+Returns: `node`
+
+Fired when a node is selected.
+
+
+
+### Model structure
+The component uses recursion to display the tree.
+The model requires specific properties to properly function:
+ - `id` - unique identifier
+ - `name` - `string` used to display a node
+ - `children` - `array` of other nodes
+ - `isChecked` - `boolean` used for a checkbox state
+ - `isExpanded` - `boolean` used to expand a node (children)
+ - `isSelected` - `boolean` optionally used for hover state
+ - `isVisible` - `boolean` used to display or hide a node
+
+```js
+{
+  id: 0,
+  name: 'Root',
+  isExpanded: true,
+  isSelected: false,
+  isVisible: true,
+  children: [
+    {
+      id: 1,
+      name: 'First Child',
+      isExpanded: true,
+      isSelected: false,
+      isVisible: true,
+      children: []
+    },
+    {
+      id: 2,
+      name: 'Second Child',
+      isExpanded: true,
+      isSelected: false,
+      isVisible: true,
+      children: [
+        {
+          id: 3,
+          name: 'First Grand Child',
+          isExpanded: true,
+          isSelected: true,
+          isVisible: true,
+          children: []
+        }
+      ]
+    }
+  ]
+}
+```

addon/components/x-tree-children.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import layout from '../templates/components/x-tree-children';
+
+const {
+  Component
+} = Ember;
+
+export default Component.extend({
+  layout,
+  tagName: 'li',
+  classNames: ['tree-node']
+});

addon/components/x-tree-node.js

@@ -0,0 +1,28 @@
+import Ember from 'ember';
+import layout from '../templates/components/x-tree-node';
+
+const {
+  Component
+} = Ember;
+
+export default Component.extend({
+  layout,
+  classNameBindings: ['model.isSelected:tree-highlight'],
+
+  mouseEnter(event) {
+    let { hover } = this.attrs;
+    if (hover) {
+      hover(this.get('model'));
+    }
+  },
+
+  actions: {
+    toggleCheck() {
+      this.toggleProperty('model.isChecked');
+    },
+
+    toggleExpand() {
+      this.toggleProperty('model.isExpanded');
+    }
+  }
+});

addon/components/x-tree.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import layout from '../templates/components/x-tree';
+
+const {
+  Component
+} = Ember;
+
+export default Component.extend({
+  layout,
+  tagName: 'ul',
+  classNames: ['tree-branch']
+});

addon/styles/x-tree.css

@@ -0,0 +1,35 @@
+.tree-branch {
+  margin: 0;
+  padding: 0;
+}
+
+.tree-node .tree-branch {
+  padding-left: 1.25em;
+}
+
+.tree-node {
+  line-height: 1.5em;
+  list-style: none;
+}
+
+.tree-node span {
+  cursor: pointer;
+}
+
+.tree-node .toggle-icon {
+  color: #a5d4fd;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 10px;
+  margin-right: 0;
+  width: 1.25em;
+}
+
+.tree-node .toggle-icon:hover {
+  opacity: 0.8;
+}
+
+.tree-node .tree-highlight {
+  background-color: #f2f9fc;
+  color: #333;
+}

addon/templates/components/x-tree-children.hbs

@@ -0,0 +1,5 @@
+{{x-tree-node model=model select=select hover=hover}}
+
+{{#if model.isExpanded}}
+  {{x-tree model=model.children select=select hover=hover}}
+{{/if}}

addon/templates/components/x-tree-node.hbs

@@ -0,0 +1,17 @@
+{{#if model.checkable}}
+  {{x-check value=model.id checked=model.isChecked action=(action 'toggleCheck')}}
+{{/if}}
+<span class="toggle-icon" {{action 'toggleExpand'}}>
+  {{#if model.children.length}}
+    {{#if model.isExpanded}}
+      &#x25BC;
+    {{else}}
+      &#x25B6;
+    {{/if}}
+  {{else}}
+    &nbsp;&nbsp;
+  {{/if}}
+</span>
+<span {{action select model}}>
+  {{model.name}}
+</span>

addon/templates/components/x-tree.hbs

@@ -0,0 +1,5 @@
+{{#each model as |child|}}
+  {{#if child.isVisible}}
+    {{x-tree-children model=child select=select hover=hover}}
+  {{/if}}
+{{/each}}

app/components/x-tree-children.js

@@ -0,0 +1 @@
+export { default } from 'ember-simple-tree/components/x-tree-children';

app/components/x-tree-node.js

@@ -0,0 +1 @@
+export { default } from 'ember-simple-tree/components/x-tree-node';