Merge 90ee815 into c671bbd

README.md

@@ -61,7 +61,6 @@ Add the `{{frost-navigation}}` component to the template where you want the navi
     myAction=(action 'custom-action')
   )
 }}
-{{nav-modal-outlet}}
 ```
 
 #### Router (Full Example)

addon/components/frost-navigation.js

@@ -1,39 +1,30 @@
 import Ember from 'ember'
+import {Component} from 'ember-frost-core'
 import layout from '../templates/components/frost-navigation'
 import transitions from 'ember-frost-navigation/transitions/frost-navigation'
 const {
-  Component,
   inject: {
     service
   },
   computed: {
     alias
-  },
-  run: {
-    scheduleOnce
-  },
-  get
+  }
 } = Ember
 
 export default Component.extend({
   // == Services ==============================================================
-
   frostNavigation: service(),
   liquidFireTransitions: service(),
-
+  routingService: service('-routing'),
   // == Component properties ==================================================
-
-  classNames: [
-    'frost-navigation'
-  ],
   layout,
-
   // == Properties ============================================================
-
-  hook: 'frost-nav',
-
+  getDefaultProps () {
+    return {
+      hook: 'frost-navigation'
+    }
+  },
   // == Alias properties ======================================================
-
   categories: alias('frostNavigation.categories'),
   activeCategory: alias('frostNavigation._activeCategory'),
 
@@ -42,16 +33,16 @@ export default Component.extend({
   init () {
     this._super(...arguments)
 
-    let frostNavigation = get(this, 'frostNavigation')
-    let liquidFireTransitions = get(this, 'liquidFireTransitions')
+    const frostNavigation = this.get('frostNavigation')
+    const liquidFireTransitions = this.get('liquidFireTransitions')
+    const routingService = this.get('routingService')
+
+    frostNavigation.set('_actions', this.get('navActions') || {})
 
-    frostNavigation.set('_actions', get(this, 'navActions') || {})
     liquidFireTransitions.map(transitions)
 
-    window.addEventListener('popstate', () => {
-      scheduleOnce('sync', () => {
-        frostNavigation.dismiss()
-      })
-    }, false)
+    routingService.addObserver('currentRouteName', () => {
+      frostNavigation.dismiss()
+    })
   }
 })

addon/components/nav-action.js

@@ -1,39 +1,38 @@
 import Ember from 'ember'
+import {Component} from 'ember-frost-core'
+import {PropTypes} from 'ember-prop-types'
 import layout from '../templates/components/nav-action'
-import PropTypeMixin, {PropTypes} from 'ember-prop-types'
 
 const {
-  Component,
   inject: {
     service
   },
   get
 } = Ember
-export default Component.extend(PropTypeMixin, {
+export default Component.extend({
   // == Services ==============================================================
 
   frostNavigation: service(),
 
   // == Component properties ==================================================
-
-  classNames: [
-    'nav-route',
-    'nav-action'
-  ],
   layout,
 
   // == State properties ======================================================
 
   propTypes: {
-    item: PropTypes.object.isRequired
+    item: PropTypes.object.isRequired,
+    hook: PropTypes.string
   },
+
   getDefaultProps () {
     return {
       item: {
         pack: 'frost'
-      }
+      },
+      hook: 'nav-action'
     }
   },
+  // == Computed Properties ===================================================
 
   // == Actions ===============================================================
 

addon/components/nav-category.js

@@ -1,9 +1,10 @@
 import Ember from 'ember'
+import {Component} from 'ember-frost-core'
+import computed, {readOnly} from 'ember-computed-decorators'
+import { PropTypes } from 'ember-prop-types'
 import layout from '../templates/components/nav-category'
-import computed from 'ember-computed-decorators'
-import PropTypesMixin, { PropTypes } from 'ember-prop-types'
+
 const {
-  Component,
   typeOf,
   inject: {
     service
@@ -15,7 +16,7 @@ const {
   set
 } = Ember
 
-export default Component.extend(PropTypesMixin, {
+export default Component.extend({
   // == Services ==============================================================
 
   frostNavigation: service(),
@@ -30,17 +31,20 @@ export default Component.extend(PropTypesMixin, {
 
   propTypes: {
     icon: PropTypes.string,
-    name: PropTypes.string.isRequired,
-    pack: PropTypes.string
+    name: PropTypes.string,
+    pack: PropTypes.string,
+    hook: PropTypes.string
   },
+
   getDefaultProps () {
     return {
-      pack: 'frost'
+      pack: 'frost',
+      hook: 'nav-category'
     }
   },
 
   // == Computed properties ===================================================
-
+  @readOnly
   @computed('frostNavigation._activeCategory')
   active (category) {
     return get(this, 'name') === category
@@ -51,16 +55,16 @@ export default Component.extend(PropTypesMixin, {
   click () {
     document.body.scrollTop = 0 // fix for liquid-fire modal strange animation
 
-    let frostNavigation = get(this, 'frostNavigation')
-    let active = get(frostNavigation, '_activeCategory')
-    let name = get(this, 'name')
+    const frostNavigation = get(this, 'frostNavigation')
+    const active = get(frostNavigation, '_activeCategory')
+    const name = get(this, 'name')
 
     if (typeOf(active) === 'string') {
       frostNavigation.dismiss()
       if (name !== active) { // click on another tab
         later(() => {
           set(frostNavigation, '_activeCategory', name)
-        }, 200)
+        }, 250)
       }
     } else {
       set(frostNavigation, '_activeCategory', name)

addon/components/nav-modal.js

@@ -1,16 +1,17 @@
 import Ember from 'ember'
+import {Component} from 'ember-frost-core'
+import computed, {readOnly} from 'ember-computed-decorators'
 import layout from '../templates/components/nav-modal'
-import computed from 'ember-computed-decorators'
+
 const {
-  Component,
   inject: {
     service
   },
   computed: {
     alias
   },
-  set,
-  A: EmberArray
+  run: {bind},
+  $
 } = Ember
 
 export default Component.extend({
@@ -19,20 +20,15 @@ export default Component.extend({
   frostNavigation: service(),
 
   // == Component properties ==================================================
-
-  classNames: [
-    'nav-modal'
-  ],
   layout,
 
   // == Properties ============================================================
 
-  hook: 'frost-nav-modal',
-
   // == Computed properties ===================================================
 
+  @readOnly
   @computed('frostNavigation.categories', 'activeCategory')
-  columns (categories = EmberArray(), activeCategory) {
+  columns (categories = [], activeCategory) {
     return !activeCategory
       ? null
       : (() => {
@@ -45,12 +41,34 @@ export default Component.extend({
 
   activeCategory: alias('frostNavigation._activeCategory'),
 
-  // == Actions ===============================================================
+  // == DOM Events ============================================================
+  _onFocusOut (event) {
+    const frostNavigation = this.get('frostNavigation')
+    const $target = $(event.target)
+
+    const isOutsideClick = !$('.frost-navigation').has($target).length
+
+    if (isOutsideClick) {
+      frostNavigation.dismiss()
+    }
+  },
+  // == Lifecycle Hooks =======================================================
+  didInsertElement () {
+    this._super(...arguments)
+    this._boundedFocusOut = bind(this, this._onFocusOut)
+
+    $(document).on('click', this._boundedFocusOut)
+  },
+  willDestroyElement () {
+    this._super(...arguments)
 
+    $(document).off('click', this._boundedFocusOut)
+  },
+  // == Actions ===============================================================
   actions: {
     setView (section) {
-      set(this, 'showActions', true)
-      set(this, 'content', section)
+      this.set('actionsVisible', true)
+      this.set('content', section)
     }
   }
 })

addon/components/nav-route.js

@@ -1,29 +1,27 @@
 import Ember from 'ember'
+import {Component} from 'ember-frost-core'
+import {PropTypes} from 'ember-prop-types'
+
 import layout from '../templates/components/nav-route'
-import PropTypesMixin, { PropTypes } from 'ember-prop-types'
 
 const {
-  Component,
   inject: {
     service
   },
   get
 } = Ember
 
-export default Component.extend(PropTypesMixin, {
+export default Component.extend({
   // == Services ==============================================================
 
   frostNavigation: service(),
 
   // == Component properties ==================================================
-
-  classNames: ['nav-route'],
   layout,
-
   // == State properties ======================================================
 
   propTypes: {
-    name: PropTypes.string.isRequired,
+    name: PropTypes.string,
     description: PropTypes.string,
     route: PropTypes.string,
     icon: PropTypes.string,
@@ -35,6 +33,7 @@ export default Component.extend(PropTypesMixin, {
       pack: 'frost'
     }
   },
+  // == Computed Properties ===================================================
 
   // == Actions ===============================================================
 

addon/components/nav-section-actions.js

@@ -1,19 +1,17 @@
 import Ember from 'ember'
+import { Component } from 'ember-frost-core'
+import { PropTypes } from 'ember-prop-types'
+import computed, {readOnly} from 'ember-computed-decorators'
 import layout from '../templates/components/nav-section-actions'
-import PropTypesMixin, { PropTypes } from 'ember-prop-types'
-import computed from 'ember-computed-decorators'
+
 const {
-  Component,
   String: {
     htmlSafe
   }
 } = Ember
-export default Component.extend(PropTypesMixin, {
+export default Component.extend({
   // == Component properties ==================================================
-
-  classNames: ['nav-column'],
   layout,
-
   // == State properties ======================================================
 
   propTypes: {
@@ -22,6 +20,7 @@ export default Component.extend(PropTypesMixin, {
 
   // == Computed properties ===================================================
 
+  @readOnly
   @computed('section.color')
   borderBottomBinding (color) {
     return htmlSafe(`border-bottom-color: ${color}`)