sidenav update

CHANGELOG.md

@@ -17,6 +17,10 @@ Contributions and pull requests are always welcome. Contributors may often be fo
 
 #### 1.0.0-alpha.2
 
+- [xxx]() update sidenav
+  - `paper-nav-container` was renamed to `paper-sidenav-container`
+  - `locked-open` was renamed to `lockedOpen`
+
 #### 1.0.0-alpha.1
 
 - [#365](https://github.com/miguelcobain/ember-paper/pull/365) paper-button: Support for `fab` and `mini`.

addon/components/paper-backdrop.js

@@ -24,6 +24,7 @@ export default Component.extend(TransitionMixin, {
   },
 
   didInsertElement() {
+    this._super(...arguments);
     let backdropHammer = new Hammer(this.element);
     backdropHammer.on('tap', run.bind(this, this._onTap));
     this._backdropHammer = backdropHammer;

addon/components/paper-sidenav-container.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+const { Component } = Ember;
+
+export default Component.extend({
+  classNames: ['flex', 'layout-row']
+});

addon/components/paper-sidenav-toggle.js

@@ -1,27 +1,26 @@
 import Ember from 'ember';
-import PaperNavContainer from './paper-nav-container';
+const { Component } = Ember;
 
-export default Ember.Component.extend({
-  tagName: 'div',
+export default Component.extend({
 
-  navContainer: Ember.computed(function() {
-    return this.nearestOfType(PaperNavContainer);
-  }),
+  classNameBindings: ['hideClass'],
 
-  actions: {
-    toggleMenu() {
-      this.get('navContainer').get('sideBar').send('toggleMenu');
-    }
-  },
+  name: 'default',
 
-  didInsertElement() {
+  init() {
     this._super(...arguments);
     if (this.get('navContainer')) {
-      let lockedOpen = this.get('navContainer').get('sideBar').get('locked-open');
+      let lockedOpen = this.get('navContainer').get('sideBar').get('lockedOpen');
       if (lockedOpen) {
-        this.$().attr(`hide-${lockedOpen}`, true);
+        this.set('hideClass', `hide-${lockedOpen}`);
       }
     }
+  },
+
+  actions: {
+    toggleMenu() {
+      this.get('navContainer').get('sideBar').send('toggleMenu');
+    }
   }
 
 });

addon/components/paper-sidenav.js

@@ -1,54 +1,66 @@
 import Ember from 'ember';
-import PaperNavContainer from './paper-nav-container';
+import TransitionMixin from 'ember-css-transitions/mixins/transition-mixin';
+import PaperSidenavContainer from './paper-sidenav-container';
 
-export default Ember.Component.extend({
-  constants: Ember.inject.service(),
+const { Component, inject, computed, $, run } = Ember;
+
+export default Component.extend(TransitionMixin, {
   tagName: 'md-sidenav',
+  attributeBindings: ['tabindex'],
+  classNameBindings: ['positionClass'],
+  transitionTriggers: ['isLockedOpen:md-locked-open', 'closed:md-closed'],
 
-  'locked-open': 'gt-sm',
+  constants: inject.service(),
+  paperSidenav: inject.service(),
+
+  name: 'default',
+  position: 'left',
+  lockedOpen: 'gt-sm',
   closed: true,
   closeOnClick: true,
+  tabindex: -1,
 
-  navContainer: Ember.computed(function() {
-    return this.nearestOfType(PaperNavContainer);
+  navContainer: computed(function() {
+    return this.nearestOfType(PaperSidenavContainer);
   }),
 
-  attributeBindings: ['tabindex'],
-  classNameBindings: ['isLockedOpen:md-locked-open', 'closed:md-closed'],
-  tabindex: -1,
+  positionClass: computed('position', function() {
+    return `md-sidenav-${this.get('position')}`;
+  }),
 
-  _init: Ember.on('init', function() {
-    let _self = this;
+  init() {
+    this.updateLockedOpen();
 
-    if (this.get('navContainer')) {
-      this.get('navContainer').set('sideBar', this);
-    }
+    this._super(...arguments);
 
-    this.matchMedia();
-    this.set('__resizeWindow', function() {
-      _self.matchMedia();
-    });
-  }),
+    /*if (this.get('navContainer')) {
+      this.get('navContainer').set('sideBar', this);
+    }*/
 
-  _observeClosedState: Ember.observer('closed', function() {
-    if (this.get('closed')) {
-      Ember.$('body').css('overflow', 'inherit');
-    } else {
-      Ember.$('body').css('overflow', 'hidden');
-    }
-  }),
+    this.get('paperSidenav').register(this.get('name'));
+  },
 
   didInsertElement() {
-    Ember.$(window).on('resize', this.get('__resizeWindow'));
+    this._super(...arguments);
+    $(window).on(`resize.${this.elementId}`, run.bind(this, 'updateLockedOpen'));
   },
+
   willDestroyElement() {
-    Ember.$(window).off('resize', this.get('__resizeWindow'));
+    this._super(...arguments);
+    $(window).off(`resize.${this.elementId}`, run.bind(this, 'updateLockedOpen'));
+  },
+
+  updateLockedOpen() {
+    let mediaQuery = this.get('constants').MEDIA[this.get('lockedOpen')];
+    let isLockedOpen = window.matchMedia(mediaQuery).matches;
+    this.set('isLockedOpen', isLockedOpen);
+    if (isLockedOpen) {
+      this.set('closed', true);
+    }
   },
 
-  matchMedia() {
-    let mediaQuery = this.get('constants').MEDIA[this.get('locked-open')];
-    this.set('isLockedOpen', window.matchMedia(mediaQuery).matches);
-    if (this.get('isLockedOpen')) {
+  click() {
+    if (this.get('closeOnClick') && !this.get('isLockedOpen')) {
       this.set('closed', true);
     }
   },
@@ -59,17 +71,6 @@ export default Ember.Component.extend({
         this.toggleProperty('closed');
       }
     }
-  },
-
-  click() {
-    if (!this.get('closeOnClick') || this.get('isLockedOpen')) {
-      return;
-    }
-
-    let _self = this;
-    Ember.run.next(function() {
-      _self.set('closed', true);
-    });
   }
 
 });

addon/services/paper-sidenav.js

@@ -0,0 +1,58 @@
+import Ember from 'ember';
+const { Service, $, run, Object: EmObject, assert } = Ember;
+
+export default Service.extend({
+  init() {
+    this._super(...arguments);
+    this.set('sidenavs', EmObject.create());
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+    $(window).on('resize.sidenav-service', run.bind(this, 'updateLockedOpen'));
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    $(window).off('resize.sidenav-service', run.bind(this, 'updateLockedOpen'));
+  },
+
+  updateLockedOpen() {
+    let sidenavs = this.get('sidenavs');
+    Object.keys(sidenavs)
+    .map((k) => sidenavs.get(k))
+    .forEach((s) => {
+      let lockedOpen = s.get('lockedOpen');
+      let mediaQuery = this.get('constants').MEDIA[lockedOpen];
+      let match = window.matchMedia(mediaQuery).matches;
+      s.set('isLockedOpen', match);
+      if (match) {
+        s.set('closed', match);
+      }
+    });
+  },
+
+  register(name, lockedOpen) {
+    assert(`You tried to register a sidenav named '${name}' but there is already a sidenav with that name registered`, !this.get('sidenavs').get(name));
+    this.get('sidenavs').set(name, EmObject.create({
+      open: false,
+      isLockedOpen: false,
+      lockedOpen
+    }));
+  },
+
+  open(name = 'default') {
+    assert(`You tried to open a sidenav named '${name}' but no such sidenav is registered`, this.get('sidenavs').get(name));
+    this.get('sidenavs').get(name).set('open', true);
+  },
+
+  close(name = 'default') {
+    assert(`You tried to close a sidenav named '${name}' but no such sidenav is registered`, this.get('sidenavs').get(name));
+    this.get('sidenavs').get(name).set('open', false);
+  },
+
+  toggle() {
+    assert(`You tried to toggle a sidenav named '${name}' but no such sidenav is registered`, this.get('sidenavs').get(name));
+    this.get('sidenavs').get(name).toggleProperty(name);
+  }
+});

app/components/paper-sidenav-container.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-sidenav-container';

app/services/constants.js

@@ -44,19 +44,28 @@ export default Ember.Service.extend({
   }),
 
   MEDIA: {
-    'sm': '(max-width: 599px)',
-    'gt-sm': '(min-width: 600px)',
-    'md': '(min-width: 600px) and (max-width: 959px)',
-    'gt-md': '(min-width: 960px)',
-    'lg': '(min-width: 960px) and (max-width: 1199px)',
-    'gt-lg': '(min-width: 1200px)'
+    'xs': '(max-width: 599px)',
+    'gt-xs': '(min-width: 600px)',
+    'sm': '(min-width: 600px) and (max-width: 959px)',
+    'gt-sm': '(min-width: 960px)',
+    'md': '(min-width: 960px) and (max-width: 1279px)',
+    'gt-md': '(min-width: 1280px)',
+    'lg': '(min-width: 1280px) and (max-width: 1919px)',
+    'gt-lg': '(min-width: 1920px)',
+    'xl': '(min-width: 1920px)',
+    'print': 'print'
   },
+
   MEDIA_PRIORITY: [
+    'xl',
     'gt-lg',
     'lg',
     'gt-md',
     'md',
     'gt-sm',
-    'sm'
+    'sm',
+    'gt-xs',
+    'xs',
+    'print'
   ]
 });

app/services/paper-sidenav.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/services/paper-sidenav';

app/styles/ember-paper.scss

@@ -110,7 +110,7 @@
 @import './angular-material/components/gridList/grid-list';
 
 @import './angular-material/components/sidenav/sidenav';
-@import './angular-material/components/sidenav/sidenav';
+@import './angular-material/components/sidenav/sidenav-theme';
 
 @import './angular-material/components/backdrop/backdrop';
 @import './angular-material/components/backdrop/backdrop-theme';

package.json

@@ -53,14 +53,14 @@
     "loader.js": "^4.0.1"
   },
   "dependencies": {
+    "angular-material-source": "angular/material#v1.0.6",
     "broccoli-autoprefixer": "^3.0.0",
     "broccoli-filter": "^1.2.3",
     "broccoli-funnel": "^1.0.1",
     "broccoli-merge-trees": "^1.1.0",
     "ember-cli-babel": "^5.1.6",
-    "ember-css-transitions": "^0.1.0",
-    "ember-wormhole": "^0.3.4",
-    "angular-material-source": "angular/material#v1.0.6"
+    "ember-css-transitions": "miguelcobain/ember-css-transitions",
+    "ember-wormhole": "^0.3.4"
   },
   "keywords": [
     "ember-addon",