fix offset when selecting tabs not totally visible. improve docs. cha…

…nge `name` to `value`.

addon/components/paper-tab.js

@@ -22,10 +22,8 @@ export default Component.extend(ChildMixin, RippleMixin, FocusableMixin, {
     }
   }),
 
-  isSelected: computed('selected', 'name', function() {
-    if (this.get('selected') !== undefined) {
-      return this.get('selected') === this.get('name');
-    }
+  isSelected: computed('selected', 'value', function() {
+    return this.get('selected') === this.get('value');
   }),
 
   init() {
@@ -37,9 +35,8 @@ export default Component.extend(ChildMixin, RippleMixin, FocusableMixin, {
 
   didRender() {
     this._super(...arguments);
-    let button = this.element;
-    let { width } = button.getBoundingClientRect();
-    let left = button.offsetLeft;
+    let { width } = this.element.getBoundingClientRect();
+    let left = this.element.offsetLeft;
     this.setProperties({ width, left });
   },
 

addon/components/paper-tabs.js

@@ -12,14 +12,14 @@ export default Component.extend(ParentMixin, ColorMixin, {
   classNames: ['md-no-tab-content'],
   attributeBindings: ['borderBottom:md-border-bottom'],
 
-  selected: null, // key of item
+  selected: 0, // select first tab by default
 
-  _selectedTab: computed('childComponents.@each.name', 'selected', function() {
-    return this.get('childComponents').findBy('name', this.get('selected'));
+  _selectedTab: computed('childComponents.@each.value', 'selected', function() {
+    return this.get('childComponents').findBy('value', this.get('selected'));
   }),
 
-  _previousSelectedTab: computed('childComponents.@each.name', 'previousSelectedNavItem', function() {
-    return this.get('childComponents').findBy('name', this.get('previousSelected'));
+  _previousSelectedTab: computed('childComponents.@each.value', 'previousSelected', function() {
+    return this.get('childComponents').findBy('value', this.get('previousSelected'));
   }),
 
   noInkBar: false,
@@ -47,7 +47,8 @@ export default Component.extend(ParentMixin, ColorMixin, {
     this._super(...arguments);
     if (this.get('selected') !== this.get('previousSelected')) {
       this.setMovingRight();
-      this.set('previousSelected', this.get('selectedNavItem'));
+      this.fixOffsetIfNeeded();
+      this.set('previousSelected', this.get('selected'));
     }
   },
 
@@ -77,11 +78,38 @@ export default Component.extend(ParentMixin, ColorMixin, {
     window.removeEventListener('orientationchange', this.updateCanvasWidth);
   },
 
+  registerChild(childComponent) {
+    this._super(...arguments);
+    // automatically set value if not manually set
+    if (childComponent.get('value') === undefined) {
+      let length = this.childComponents.get('length');
+      childComponent.set('value', length - 1);
+    }
+  },
+
   setMovingRight() {
     let movingRight = this.get('_previousSelectedTab.left') < this.get('_selectedTab.left');
     this.set('movingRight', movingRight);
   },
 
+  fixOffsetIfNeeded() {
+    let canvasWidth = this.get('canvasWidth');
+    let currentOffset = this.get('currentOffset');
+
+    let tabRight = this.get('_selectedTab.left') + this.get('_selectedTab.width');
+    if (tabRight - currentOffset > canvasWidth) {
+      let newOffset = tabRight - canvasWidth;
+      this.set('currentOffset', newOffset);
+      this.set('paginationStyle', htmlSafe(`transform: translate3d(-${newOffset}px, 0px, 0px);`));
+    }
+
+    if (this.get('_selectedTab.left') < currentOffset) {
+      let newOffset = this.get('_selectedTab.left');
+      this.set('currentOffset', newOffset);
+      this.set('paginationStyle', htmlSafe(`transform: translate3d(-${newOffset}px, 0px, 0px);`));
+    }
+  },
+
   currentOffset: 0,
   canPageBack: computed.gt('currentOffset', 0),
   canPageForward: computed('wrapperWidth', 'currentOffset', 'canvasWidth', function() {
@@ -113,9 +141,9 @@ export default Component.extend(ParentMixin, ColorMixin, {
     onChange(selected) {
       // support non DDAU scenario
       if (this.get('onChange')) {
-        this.sendAction('onChange', selected.get('name'));
+        this.sendAction('onChange', selected.get('value'));
       } else {
-        this.set('selected', selected.get('name'));
+        this.set('selected', selected.get('value'));
       }
     }
   }

addon/templates/components/paper-tabs.hbs

@@ -1,4 +1,5 @@
 <md-tabs-wrapper>
+
   {{#if shouldPaginate}}
     <md-prev-button role="button" class={{unless canPageBack "md-disabled"}} onclick={{action "previousPage"}}>
       {{paper-icon "keyboard-arrow-left"}}
@@ -10,16 +11,20 @@
 
   <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>

testem.js

@@ -6,7 +6,6 @@ module.exports = {
     "Chrome"
   ],
   "launch_in_dev": [
-    "PhantomJS",
     "Chrome"
   ],
   'browser_args': {

tests/dummy/app/controllers/demo/tabs.js

@@ -1,12 +1,59 @@
 import Ember from 'ember';
-const { Controller } = Ember;
+const { Controller, computed, A } = Ember;
+
+const LOREM = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis
+  vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.
+  Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.\n
+`;
 
 export default Controller.extend({
-  selectedNavItem: 1,
+  selectedBasicTab: 0,
+
+  chapters: computed(function() {
+    let tabs = A();
+    for (let i = 1; i < 5; i++) {
+      tabs.push({
+        index: i,
+        title: `Chapter ${i}`,
+        body: LOREM.repeat(i)
+      });
+    }
+
+    return tabs;
+  }),
+
+  selectedChapter: computed.reads('chapters.firstObject'),
 
   actions: {
     toggle(propName) {
       this.toggleProperty(propName);
+    },
+
+    addChapter() {
+      let index = Math.max(...this.get('chapters').mapBy('index')) + 1;
+      let chapter = {
+        index,
+        title: this.get('newTitle'),
+        body: this.get('newContent')
+      };
+      this.get('chapters').pushObject(chapter);
+      this.set('selectedChapter', chapter);
+      this.setProperties({
+        newTitle: '',
+        newContent: ''
+      });
+    },
+
+    removeChapter(t) {
+      if (this.get('selectedChapter') === t) {
+        let chapters = this.get('chapters');
+        let index = chapters.indexOf(t);
+        let newSelection = chapters.objectAt(index + 1) || chapters.objectAt(index - 1);
+        this.set('selectedChapter', newSelection);
+      }
+      this.get('chapters').removeObject(t);
     }
   }
 });

tests/dummy/app/styles/demo.scss

@@ -1501,4 +1501,8 @@ md-input-container .hint {
 /* tabs demo */
 .tabs-demo .md-padding h1:first-child {
   margin-top: 0;
+}
+
+md-tabs.md-primary {
+  border-radius: 0px;
 }