ember-frost-navigation

Dependencies

Health

Security

Ember Observer score

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

• Installation
• API
• Examples
• Development

Installation

ember install ember-frost-navigation

Usage

Add the {{frost-navigation}} component to the template where you want the navigation to appear, then configure your navigation in app/router.js

Template

{{frost-navigation
  logo=(component ...)
  menu=(component ...)

  navActions=(hash
    myAction=(action 'custom-action')
  )
}}

Router (Full Example)

Router.map(function () {
  this.nav('demo', {
    path: '/'
  }, function () {
    this.category('Category 1', {
      pack: 'dummy',
      icon: 'sample'
    }, function () {
      this.column('Column 1', {
        color: '#009eef'
      }, function () {
        this.action('Action Example', {
          action: 'myAction',
          pack: 'dummy',
          icon: 'sample',
          description: 'This is an action',
          inline: true
        })
        this.app('Route Example', {
          route: 'go',
          description: 'This is a route',
          pack: 'dummy',
          icon: 'sample'
        })
        this.engine('Blog Engine', {
          route: 'blog',
          description: 'This is an engine example',
          package: 'ember-blog-engine',
          pack: 'dummy',
          icon: 'sample'
        })
        this.section('More Content', {
          color: '#a1e7ff'
        }, function () {
          this.link('Google', {
            url: 'http://google.ca',
            description: 'Go to Google',
            pack: 'dummy',
            icon: 'sample',
            tabbed: true
          })
          this.link('http://google.ca')
          this.action('Action 1', {
            action: 'myAction',
            pack: 'dummy',
            icon: 'sample'
          })
        })
      })
      this.column('Empty Column')
    })
  })
})

Documentation

this.nav

/**
 * Initializes the navigation bar
 * @parent Ember.RouterDSL
 * @param {string} config.dialogClass class to apply to liquid-modal
 * @param {object} config.actions actions to pass up to liquid-modal
 * @param {array} config.model predefined model to be rendered
 */

this.category

/**
 * Category as a navigation bar entry
 * @parent {type:nav}
 * @param {string} config.icon icon
 * @param {string} config.pack icon pack
 * @param {array} config.model predefined category model
 */

this.column

/**
 * Creates a column viewable within a category
 * @parent {type:category}
 * @param {string} config.color color
 * @param {array} config.routes predefined routes array
 * @param {array} config.actions predefined actions array
 */

this.section

/**
 * Creates a section under within a category
 * @parent {type:category}
 * @param {string} config.color color
 * @param {array} config.routes predefined routes array
 * @param {array} config.actions predefined actions array
 */

this.app

/**
 * Creates a routable route instance
 * @parent {type:[column, section]}
 * @param {string} config.description description
 * @param {string} config.icon icon
 * @param {string} config.pack icon pack
 * @param {string} config.route route to navigate to
 * @param {object} config.params query params
 */

this.engine

/**
 * Creates a routable engine instance
 * @parent {type:[column, section]}
 * @param {string} config.package package name for engine
 * @param {string} config.route route name for nav entry
 * @param {object} config.params query params
 * @param {string} config.description description
 * @param {string} config.icon icon
 * @param {string} config.pack icon pack
 */

this.action

/**
 * Creates a menu item that serves as an action,
 * without performing a transition
 * @parent {type:[column, section]}
 * @param {string} config.description description
 * @param {string} config.icon icon
 * @param {string} config.pack icon pack
 * @param {string} config.action key for action on controller
 * @param {boolean} config.dismiss flag to dismiss modal after click
 */

this.link

/**
 * Creates a link accessible from frost-navigation
 * @parent {type:[column, section]}
 * @param {string} config.description description
 * @param {string} config.icon icon
 * @param {string} config.pack icon pack
 * @param {string} config.route navigate to route without registering on DSL
 * @param {string} config.url url to set href to
 * @param {boolean} config.tabbed flag to open in new tab (default false)
 */

CSS

The following CSS classes are defined by this addon to make it easier to layout a page using frost-navigation:

• frost-application: This class should be applied to, the parent of the frost-navigation element.
• frost-application-content: This class should be applied to the element below the frost-navigation element. It will ensure that that element takes up all the space below the navigation.

<div class='frost-application'>
  {{frost-navigation ...}}
  <div class='frost-application-content'>
    <!-- the rest of your page here -->
  </div>
</div>

User menu

An example of a user-menu is defined in the dummy app at tests/dummy/app/pods/components/user-menu There are also a couple classes defined in this addon that will format your own user-menu properly:

• frost-navigation-user for the actual user menu button
• frost-navigation-user-menu for the popover menu that is expanded when clicking on the above button
• frost-navigation-user-menu-list for the <ul> that holds the list items of the user menu

Testing with ember-hook

The navigation component is accessible using ember-hook with the top level hook names, or you can access the internal components as well -

| Property | Hook | |---------------------------------------------- |--------------------------------------------------------------------------------- | | top level hook | $hook('frost-nav') | | modal hook | $hook('frost-nav-modal') | | category hook | $hook('frost-nav-category-<index>') | | section / column hook | $hook('frost-nav-modal-section-<index>') | | section actions hook |$hook('frost-nav-modal-section-actions') | | inline action from section context |$hook('frost-nav-modal-section--action-') | | route hook |$hook('frost-nav-modal-section--route-') | | frost-link within the route / action context |$hook('frost-nav-modal-section--(route / action)--link') | | action from section actions context |$hook('frost-nav-modal-section-actions-')` |

Setup

git clone [email protected]:ciena-frost/ember-frost-navigation.git
cd ember-frost-navigation
npm install && bower install

Development Server

A dummy application for development is available under ember-frost-navigation/tests/dummy. To run the server run ember server (or npm start) from the root of the repository and visit the app at http://localhost:4200.

Testing

Run npm test from the root of the project to run linting checks as well as execute the test suite and output code coverage.