Merge pull request #13 from sglanzer/master

Navigation redesign and support for engines

.vscodeignore

@@ -0,0 +1,10 @@
+dist/**
+tmp/**
+build/**
+cache/**
+node_modules/**
+bower_components/**
+.sass-cache/**
+connect.lock/**
+coverage/*/**
+libpeerconnection.log

README.md

@@ -10,7 +10,10 @@
 [![Travis][ci-img]][ci-url] [![Coveralls][cov-img]][cov-url] [![NPM][npm-img]][npm-url]
 
 # ember-frost-navigation
-the drop-down select widget to rule them all
+
+Navigation made easy. Makes use of liquid fire and the `RouterDSL` prototype to make a clean and concise way of creating, and navigating routes.
+
+Also supports [ember-engines](https://github.com/dgeb/ember-engines)
 
  * [Installation](#installation)
  * [API](#api)
@@ -22,13 +25,88 @@ the drop-down select widget to rule them all
 ember install ember-frost-navigation
 ```
 
-## API
-Coming soon
-
 ## Examples
-Coming soon
 
-## Development
+<img src='assets/ex1.gif'/>
+
+Add the `{{frost-navigation}}` component to the template where you want the navigation to appear, then configure your navigation in `app/router.js`
+
+```js
+this.nav('demo', function () {
+  this.category('category1', {}, function () {
+    this.column('column1', { color: 'green' }, function () {
+      this.app('app1', { description: 'description1', icon: 'sample' })
+      this.section('section1', function () { 
+        this.action('action1', { action: 'doThis' })
+        this.app('app2')
+      })
+    })
+    this.column('column2')
+  })
+})
+```
+
+## Documentation
+
+`this.nav(String controllerName, Object config, Function callback)`
+
+Provide the name of the controller, the options for its configuration,
+and a callback to nest navigation properties.
+
+| Property    | Description                                                                                                                                                                                                                  |
+|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| model       | Renders the template to match the array, but will *not* initialize the engines or routes. Recommended if you already have your routing completed, and just want to use this component as a navigation tool.                  |
+| dialogClass | An optional additional CSS class to put on the lf-dialog element. This lets you style the containing box differently for different modals.                                                                                   |
+| actions     | Wire up actions from the modal component's sendAction to your app. For example, `actions: {submit: "modalSubmitted"}` will trigger the `modalSubmitted` event on your controller when a submit event is fired in your modal. |
+
+`this.category(String categoryName, Object config, Function callback)`
+
+Creates a navigation drop-down by the name `categoryName`, with properties configured by the `config` object, and function `callback` to register `app`'s, `action`'s, and `section`'s
+
+| Property | Description                         |
+|----------|-------------------------------------|
+| model  | Array of columns for given category |
+
+`this.column(String columnName, Object config, Function callback)`
+
+Creates a column listed under the parent `category`
+
+| Property | Description                               |
+|----------|-------------------------------------------|
+| color    | Color of the title line                   |
+| routes   | An array of routes that can be passed in  |
+| actions  | An array of actions that can be passed in |
+
+`this.section(String columnName, Object config, Function callback)`
+
+In terms of usage works the same as a column, but appears under a column. Section must be created within the context of a column.
+
+| Property | Description                               |
+|----------|-------------------------------------------|
+| color    | Color of the title line                   |
+| routes   | An array of routes that can be passed in  |
+| actions  | An array of actions that can be passed in |
+
+`this.app(String appName, Object config, Function callback)`
+
+Creates a route / engine against the `RouterDSL`. Must be created within the context of a `column` or `section`.
+
+| Property    | Description                                 |
+|-------------|---------------------------------------------|
+| icon        | Create the app with an icon                 |
+| description | Text that describes the app                 |
+| route       | Route name for your routable engine / route |
+
+`this.action(String actionName, Object config, Function callback)`
+
+| Property    | Description                                                                      |
+|-------------|----------------------------------------------------------------------------------|
+| icon        | Create the action with an icon                                                   |
+| description | Text that describes the action                                                   |
+| action      | String that references parent controller for a method to execute on action click |
+| dismiss     | Boolean flag to dismiss the navigation modal on action complete                  |
+
+
 ### Setup
 ```
 git clone git@github.com:ciena-frost/ember-frost-navigation.git

addon/components/frost-navigation.js

@@ -0,0 +1,45 @@
+import Ember from 'ember'
+import layout from '../templates/components/frost-navigation'
+import transitions from 'ember-frost-navigation/transitions/frost-navigation'
+
+const {
+  Component
+} = Ember
+
+export default Component.extend({
+  classNames: ['frost-navigation'],
+  layout,
+
+  nav: Ember.inject.service('frost-navigation'),
+  transitionService: Ember.inject.service('liquid-fire-transitions'),
+  categories: Ember.computed.alias('nav.categories'),
+  registerTransitions: Ember.on('init', function () {
+    let navigationService = this.get('nav')
+    let transitionService = this.get('transitionService')
+
+    let lookup = {
+      navigation: navigationService,
+      controller: this.get('targetObject')
+    }
+    lookup.navigation.set('_controller', lookup.controller)
+    transitionService.map(transitions)
+
+    lookup.controller.addObserver(
+      'currentPath',
+      lookup.controller,
+      () => {
+        lookup.navigation.set('_activeCategory', null)
+      }
+    )
+    lookup.navigation.addObserver(
+      '_activeCategory',
+      lookup.navigation,
+      () => {
+        let active = lookup.navigation.get('_activeCategory')
+        if (active) {
+          lookup.controller.set('activeCategory', active)
+        }
+      }
+    )
+  })
+})

addon/components/nav-action.js

@@ -0,0 +1,10 @@
+import Ember from 'ember'
+import layout from '../templates/components/nav-action'
+
+export default Ember.Component.extend({
+  layout,
+  nav: Ember.inject.service('frost-navigation'),
+  click () {
+    this.get('nav').performAction(this.get('item'))
+  }
+})

addon/components/nav-category.js

@@ -0,0 +1,37 @@
+import Ember from 'ember'
+import layout from '../templates/components/nav-category'
+import {
+  PropTypes
+} from 'ember-prop-types'
+
+export default Ember.Component.extend({
+  nav: Ember.inject.service('frost-navigation'),
+  classNames: ['nav-category'],
+  layout,
+  propTypes: {
+    icon: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    pack: PropTypes.string
+  },
+  getDefaultProps () {
+    return {
+      pack: 'frost'
+    }
+  },
+  click () {
+    let navService = this.get('nav')
+    if (!navService) return
+    let activeCategory = navService.get('_activeCategory')
+    let name = this.get('name')
+    if (name === activeCategory) {
+      navService.set('_activeCategory', null)
+    } else if (typeof activeCategory === 'string') {
+      navService.set('_activeCategory', null)
+      Ember.run.later(function () {
+        navService.set('_activeCategory', name)
+      }, 100)
+    } else {
+      navService.set('_activeCategory', name)
+    }
+  }
+})

addon/components/nav-modal.js

@@ -0,0 +1,42 @@
+import Ember from 'ember'
+import layout from '../templates/components/nav-modal'
+import _ from 'lodash'
+
+export default Ember.Component.extend({
+  classNames: ['nav-modal'],
+  layout,
+  nav: Ember.inject.service('frost-navigation'),
+  activeCategory: null,
+  _categoryChanged: function () {
+    this.set('activeCategory', this.get('nav._activeCategory'))
+    if (!this.get('activeCategory')) {
+      this.sendAction('dismiss')
+    }
+  }.observes('nav._activeCategory'),
+
+  columns: Ember.computed('nav.categories', 'activeCategory', function () {
+    if (!this.get('activeCategory')) {
+      return false
+    }
+    const category = _.find(this.get('nav.categories'), (category) => {
+      return category.name.toLowerCase() === this.get('activeCategory').toLowerCase()
+    })
+    return category.columns
+  }),
+  actions: {
+    outsideClick () {
+      this.get('nav').set('_activeCategory', null)
+    },
+    escape () {
+      this.get('nav').set('_activeCategory', null)
+    },
+    showMore (section) {
+      this.set('showActions', true)
+      this.set('content', section)
+    },
+    goBack () {
+      this.set('showActions', false)
+    }
+  }
+
+})