convert nav-bar to paper-tabs

CHANGELOG.md

@@ -19,7 +19,7 @@ Contributions and pull requests are always welcome. Contributors may often be fo
 - [#730](https://github.com/miguelcobain/ember-paper/pull/730) ready for fastboot 1.0
 - [#752](https://github.com/miguelcobain/ember-paper/pull/752) Tooltips are now available. Contrasts are now set correctly.
 - [#750](https://github.com/miguelcobain/ember-paper/pull/750) Toasts are now available.
-- [#753](https://github.com/miguelcobain/ember-paper/pull/753) Nav bar is now available. This feature essentially replaces tabs.
+- [#753](https://github.com/miguelcobain/ember-paper/pull/753) and [#755](https://github.com/miguelcobain/ember-paper/pull/755) Tabs are now available.
 - [#739](https://github.com/miguelcobain/ember-paper/pull/739) Grid list was updated:
   - now uses camelCased attributes, just like the rest of the project
   - uses contextual components api, i.e `{{#paper-grid-list as |grid|}}{{#grid.tile}}`.

addon/components/paper-nav-ink-bar.js → addon/components/paper-ink-bar.js

@@ -6,11 +6,12 @@ const { computed, Component, String: { htmlSafe } } = Ember;
 export default Component.extend({
   layout,
 
-  tagName: 'md-nav-ink-bar',
+  tagName: 'md-ink-bar',
 
   attributeBindings: ['style'],
+  classNameBindings: ['movingRight:md-right:md-left'],
 
-  style: computed('left', 'width', function() {
-    return htmlSafe(`left: ${this.get('left')}px; width: ${this.get('width')}px;`);
+  style: computed('left', 'right', function() {
+    return htmlSafe(`left: ${this.get('left')}px; right: ${this.get('right')}px;`);
   })
 });

addon/components/paper-tab.js

@@ -0,0 +1,50 @@
+import Ember from 'ember';
+import layout from '../templates/components/paper-tab';
+import { ChildMixin } from 'ember-composability-tools';
+import RippleMixin from 'ember-paper/mixins/ripple-mixin';
+import FocusableMixin from 'ember-paper/mixins/focusable-mixin';
+const { computed, Component, String: { htmlSafe } } = Ember;
+
+export default Component.extend(ChildMixin, RippleMixin, FocusableMixin, {
+  layout,
+  tagName: 'md-tab-item',
+  classNames: ['md-tab'],
+  classNameBindings: ['isSelected:md-active'],
+  attributeBindings: ['isSelected:aria-selected', 'href', 'style'],
+
+  rippleContainerSelector: null,
+
+  // <a> tags have brower styles or are usually styled by the user
+  // this makes sure that tab item still looks good with an anchor tag
+  style: computed('href', function() {
+    if (this.get('href')) {
+      return htmlSafe('text-decoration: none; border: none;');
+    }
+  }),
+
+  isSelected: computed('selected', 'name', function() {
+    if (this.get('selected') !== undefined) {
+      return this.get('selected') === this.get('name');
+    }
+  }),
+
+  init() {
+    this._super(...arguments);
+    if (this.get('href')) {
+      this.set('tagName', 'a');
+    }
+  },
+
+  didRender() {
+    this._super(...arguments);
+    let button = this.element;
+    let { width } = button.getBoundingClientRect();
+    let left = button.offsetLeft;
+    this.setProperties({ width, left });
+  },
+
+  click() {
+    this.sendAction('onClick', ...arguments);
+    this.sendAction('onSelect', this);
+  }
+});

addon/components/paper-tabs.js

@@ -0,0 +1,122 @@
+import Ember from 'ember';
+import layout from '../templates/components/paper-tabs';
+import { ParentMixin } from 'ember-composability-tools';
+import ColorMixin from 'ember-paper/mixins/color-mixin';
+
+const { computed, Component, String: { htmlSafe } } = Ember;
+
+export default Component.extend(ParentMixin, ColorMixin, {
+  layout,
+  tagName: 'md-tabs',
+
+  classNames: ['md-no-tab-content'],
+  attributeBindings: ['borderBottom:md-border-bottom'],
+
+  selected: null, // key of item
+
+  _selectedTab: computed('[email protected]', 'selected', function() {
+    return this.get('childComponents').findBy('name', this.get('selected'));
+  }),
+
+  _previousSelectedTab: computed('[email protected]', 'previousSelectedNavItem', function() {
+    return this.get('childComponents').findBy('name', this.get('previousSelected'));
+  }),
+
+  noInkBar: false,
+  noInk: false,
+  ariaLabel: null,
+  previousInkBarPosition: 0,
+
+  inkBarLeft: computed('_selectedTab.left', function() {
+    return this.get('_selectedTab.left') || 0;
+  }),
+
+  inkBarRight: computed('wrapperWidth', '_selectedTab.width', 'inkBarLeft', function() {
+    return this.get('wrapperWidth') - this.get('inkBarLeft') - (this.get('_selectedTab.width') || 0);
+  }),
+
+  tabsWidth: computed('[email protected]', function() {
+    return this.get('childComponents').reduce((prev, t) => prev + t.get('width'), 0);
+  }),
+
+  shouldPaginate: computed('canvasWidth', function() {
+    return this.get('tabsWidth') > this.get('canvasWidth');
+  }),
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    if (this.get('selected') !== this.get('previousSelected')) {
+      this.setMovingRight();
+      this.set('previousSelected', this.get('selectedNavItem'));
+    }
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    let updateCanvasWidth = () => {
+      let { width: canvasWidth } = this.element.querySelector('md-tabs-canvas').getBoundingClientRect();
+      let { width: wrapperWidth } = this.element.querySelector('md-pagination-wrapper').getBoundingClientRect();
+      this.set('canvasWidth', canvasWidth);
+      this.set('wrapperWidth', wrapperWidth);
+    };
+
+    window.addEventListener('resize', updateCanvasWidth);
+    window.addEventListener('orientationchange', updateCanvasWidth);
+    this.updateCanvasWidth = updateCanvasWidth;
+  },
+
+  didRender() {
+    this._super(...arguments);
+    this.updateCanvasWidth();
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    window.removeEventListener('resize', this.updateCanvasWidth);
+    window.removeEventListener('orientationchange', this.updateCanvasWidth);
+  },
+
+  setMovingRight() {
+    let movingRight = this.get('_previousSelectedTab.left') < this.get('_selectedTab.left');
+    this.set('movingRight', movingRight);
+  },
+
+  currentOffset: 0,
+  canPageBack: computed.gt('currentOffset', 0),
+  canPageForward: computed('wrapperWidth', 'currentOffset', 'canvasWidth', function() {
+    return this.get('wrapperWidth') - this.get('currentOffset') > this.get('canvasWidth');
+  }),
+
+  actions: {
+    previousPage() {
+      let tab = this.get('childComponents').find((t) => {
+        return t.get('left') >= this.get('currentOffset');
+      });
+      if (tab) {
+        let left = Math.max(0, tab.get('left') - this.get('canvasWidth'));
+        this.set('currentOffset', left);
+        this.set('paginationStyle', htmlSafe(`transform: translate3d(-${left}px, 0px, 0px);`));
+      }
+    },
+
+    nextPage() {
+      let tab = this.get('childComponents').find((t) => {
+        return t.get('left') + t.get('width') > this.get('canvasWidth');
+      });
+      if (tab) {
+        this.set('currentOffset', tab.get('left'));
+        this.set('paginationStyle', htmlSafe(`transform: translate3d(-${tab.get('left')}px, 0px, 0px);`));
+      }
+    },
+
+    onChange(selected) {
+      // support non DDAU scenario
+      if (this.get('onChange')) {
+        this.sendAction('onChange', selected.get('name'));
+      } else {
+        this.set('selected', selected.get('name'));
+      }
+    }
+  }
+});

addon/templates/components/paper-tab.hbs

@@ -0,0 +1,5 @@
+{{#if hasBlock}}
+  {{yield}}
+{{else}}
+  {{name}}
+{{/if}}

addon/templates/components/paper-tabs.hbs

@@ -0,0 +1,25 @@
+<md-tabs-wrapper>
+  {{#if shouldPaginate}}
+    <md-prev-button role="button" class={{unless canPageBack "md-disabled"}} onclick={{action "previousPage"}}>
+      {{paper-icon "keyboard-arrow-left"}}
+    </md-prev-button>
+    <md-next-button role="button" class={{unless canPageForward "md-disabled"}} onclick={{action "nextPage"}}>
+      {{paper-icon "keyboard-arrow-left"}}
+    </md-next-button>
+  {{/if}}
+
+  <md-tabs-canvas class={{if shouldPaginate "md-paginated"}} tabindex="-1" role="tablist">
+    <md-pagination-wrapper style={{if shouldPaginate paginationStyle}}>
+      {{yield (hash
+        tab=(component "paper-tab"
+          noInk=noInk
+          selected=selected
+          onSelect=(action "onChange")
+        )
+      )}}
+      {{#unless noInkBar}}
+        {{paper-ink-bar movingRight=movingRight left=inkBarLeft right=inkBarRight}}
+      {{/unless}}
+    </md-pagination-wrapper>
+  </md-tabs-canvas>
+</md-tabs-wrapper>

app/components/paper-ink-bar.js

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

app/components/paper-tab.js

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

app/components/paper-tabs.js

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

app/styles/ember-paper.scss

@@ -151,8 +151,8 @@
 @import './angular-material/components/toast/toast';
 @import './angular-material/components/toast/toast-theme';
 
-@import './angular-material/components/navBar/navBar';
-@import './angular-material/components/navBar/navBar-theme';
+@import './angular-material/components/tabs/tabs';
+@import './angular-material/components/tabs/tabs-theme';
 
 // some overrides that are needed for ember-paper (avoid if possible)
 @import './overrides/paper-autocomplete';

index.js

@@ -180,8 +180,8 @@ module.exports = {
       'components/toast/toast.scss',
       'components/toast/toast-theme.scss',
 
-      'components/navBar/navBar.scss',
-      'components/navBar/navBar-theme.scss'
+      'components/tabs/tabs.scss',
+      'components/tabs/tabs-theme.scss'
     ];
 
     var angularScssFiles = new Funnel(this.pathBase('angular-material-source'), {