New Twiddle

components.qp-tabs.js

import Ember from 'ember';

export default Ember.Component.extend({
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  isOpen: false,
  openTabs: [],
  selectedTab: null,
  tabs: [
    {
      name: 'A',
      endpoint: 'A aardvark'
    },
    {
      name: 'B',
      endpoint: 'B bear'
    },
    {
      name: 'C',
      endpoint: 'C chipmunk'
    }
  ],
  visibleTabMinIndex: 0,
  
  tabContent: Ember.computed('selectedTab', function() {
    return this.get('selectedTab.endpoint')
  }),
  
  _selectTab (tabName) {
    const tab = this.get('tabs').findBy('name', tabName)
    this.get('openTabs').addObject(tab)
    this.set('selectedTab', tab)
    this.set('isOpen', false)
    if (this.get('openTabs.length') > 2) {
      this.set('visibleTabMinIndex', this.get('openTabs.length') - 2)
    }
  },
  
  actions: {
    // TODO Some logical errors around this case
    onClose (tabName) {
			const tab = this.get('tabs').findBy('name', tabName)
      this.get('openTabs').removeObject(tab)
      if (this.get('openTabs.length') <= 2) {
        this.set('visibleTabMinIndex', this.get('openTabs.length') - 2)
      }
    },
    
    onLeft () {
      this.decrementProperty('visibleTabMinIndex')
    },
    
    onOpen (isOpen) {
      this.set('isOpen', isOpen)
    },
    
    onRight () {
      this.incrementProperty('visibleTabMinIndex')
    },
    
    onSelect (tabName) {
      Ember.run.schedule('sync', this, this._selectTab.bind(this, tabName))
    }
  }
});

helpers.add.js

import Ember from 'ember';

export function add([v1, v2]) {
  return v1 + v2;
}

export default Ember.Helper.helper(add);

helpers.and.js

import Ember from 'ember';

export function and([bool1, bool2]) {
  return bool1 && bool2;
}

export default Ember.Helper.helper(and);

helpers.gt.js

import Ember from 'ember';

export function gt([value1, value2]) {
  return value1 > value2;
}

export default Ember.Helper.helper(gt);

helpers.gte.js

import Ember from 'ember';

export function gte([value1, value2]) {
  return value1 >= value2;
}

export default Ember.Helper.helper(gte);

helpers.lt.js

import Ember from 'ember';

export function lt([value1, value2]) {
  return value1 < value2;
}

export default Ember.Helper.helper(lt);

helpers.not.js

import Ember from 'ember';

export function not([value]) {
  return !value;
}

export default Ember.Helper.helper(not);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{qp-tabs 
	isOpen=isOpen
  openTabs=openTabs
  selectedTab=selectedTab
  tabs=tabs
  visibleTabMinIndex=visibleTabMinIndex
  onClose=(action 'onClose')
  onLeft=(action 'onLeft')
  onOpen=(action 'onOpen')
  onRight=(action 'onRight')
  onSelect=(action 'onSelect')
 }}
 
 {{tabContent}}
<br>
<br>

templates.components.qp-tabs.hbs

<div class='open-tabs'>
	{{#if (and (gt openTabs.length 2) (gt visibleTabMinIndex 0))}}
  	<button {{action onLeft}}>Left</button>
  {{/if}}
  {{#each openTabs as |openTab index|}}
  	{{#if (and (gte index visibleTabMinIndex) (lt index (add visibleTabMinIndex 2)))}}
  	<button {{action onSelect openTab.name}}>{{openTab.name}}</button>
    <button {{action onClose openTab.name}}>X</button>
    {{/if}}
  {{/each}}
  {{#if (and openTabs (lt (add visibleTabMinIndex 2) openTabs.length))}}
  	<button {{action onRight}}>Right</button>
  {{/if}}
  <button {{action onOpen (not isOpen)}}>More...</button>
</div>
{{#if isOpen}}
	<div>
    {{#each tabs index='name' as |tab|}}
			<button {{action onSelect tab.name}}>{{tab.name}}</button>
    {{/each}}
  </div>
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}