Merge pull request #3 from IvyApp/block-parameters

Use block parameters instead of `parentView`

Author: omghax

.npmignore

@@ -1,14 +1,16 @@
-bower_components/
-tests/
-tmp/
-dist/
-
+/bower_components
+/config/ember-try.js
+/dist
+/tests
+/tmp
+**/.gitkeep
 .bowerrc
 .editorconfig
 .ember-cli
+.gitignore
+.jshintrc
+.watchmanconfig
 .travis.yml
-.npmignore
-**/.gitkeep
 bower.json
-Brocfile.js
-testem.json
+ember-cli-build.js
+testem.js

.travis.yml

@@ -11,6 +11,7 @@ cache:
 
 env:
   - EMBER_TRY_SCENARIO=default
+  - EMBER_TRY_SCENARIO=ember-1-13
   - EMBER_TRY_SCENARIO=ember-release
   - EMBER_TRY_SCENARIO=ember-beta
   - EMBER_TRY_SCENARIO=ember-canary

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Envy Labs, LLC.
+Copyright (c) 2016 Envy Labs, LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -8,33 +8,29 @@ Special thanks to [ic-tabs], which this addon is based on.
 
 ## Installation
 
-### As an Ember CLI addon
-
-Use this addon in your ember-cli application:
-
 ```sh
-npm install --save-dev IvyApp/ivy-tabs
+$ ember install ivy-tabs
 ```
 
 ## Usage
 
 ```handlebars
-{{#ivy-tabs}}
-  {{#ivy-tab-list}}
-    {{#ivy-tab}}Foo{{/ivy-tab}}
-    {{#ivy-tab}}Bar{{/ivy-tab}}
-    {{#ivy-tab}}Baz{{/ivy-tab}}
+{{#ivy-tabs as |tabsContainer|}}
+  {{#ivy-tab-list tabsContainer=tabsContainer as |tabList|}}
+    {{#ivy-tab tabList=tabList}}Foo{{/ivy-tab}}
+    {{#ivy-tab tabList=tabList}}Bar{{/ivy-tab}}
+    {{#ivy-tab tabList=tabList}}Baz{{/ivy-tab}}
   {{/ivy-tab-list}}
 
-  {{#ivy-tab-panel}}
+  {{#ivy-tab-panel tabsContainer=tabsContainer}}
     <h2>Foo</h2>
   {{/ivy-tab-panel}}
 
-  {{#ivy-tab-panel}}
+  {{#ivy-tab-panel tabsContainer=tabsContainer}}
     <h2>Bar</h2>
   {{/ivy-tab-panel}}
 
-  {{#ivy-tab-panel}}
+  {{#ivy-tab-panel tabsContainer=tabsContainer}}
     <h2>Baz</h2>
   {{/ivy-tab-panel}}
 {{/ivy-tabs}}
@@ -43,9 +39,9 @@ npm install --save-dev IvyApp/ivy-tabs
 Some things to note:
 
   * Associations between tabs and tab-panes are inferred by order.
-  * `ivy-tab-list` must be an immediate child of `ivy-tabs`.
-  * `ivy-tab` must be an immediate child of `ivy-tab-list`.
-  * `ivy-tab-panel` must be an immediate child of `ivy-tabs`.
+  * Both `ivy-tabs` and `ivy-tab-list` yield themselves as a parameter, which
+    should be passed down to their children as `tabsContainer` and `tabList`,
+    respectively.
 
 ## Contributing
 

addon/components/ivy-tab-list.js

@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import layout from '../templates/components/ivy-tab-list';
 
 /**
  * @module ivy-tabs
@@ -10,17 +11,19 @@ import Ember from 'ember';
  * @extends Ember.Component
  */
 export default Ember.Component.extend({
+  layout: layout,
+
   tagName: 'ul',
   attributeBindings: ['aria-multiselectable', 'role'],
   classNames: ['ivy-tab-list'],
 
-  init: function() {
-    this._super();
+  init() {
+    this._super(...arguments);
     Ember.run.once(this, this._registerWithTabsContainer);
   },
 
-  willDestroy: function() {
-    this._super();
+  willDestroy() {
+    this._super(...arguments);
     Ember.run.once(this, this._unregisterWithTabsContainer);
   },
 
@@ -49,7 +52,7 @@ export default Ember.Component.extend({
    *
    * @method focusSelectedTab
    */
-  focusSelectedTab: function() {
+  focusSelectedTab() {
     this.get('selectedTab').$().focus();
   },
 
@@ -85,7 +88,7 @@ export default Ember.Component.extend({
    * @method registerTab
    * @param {IvyTabs.IvyTabComponent} tab
    */
-  registerTab: function(tab) {
+  registerTab(tab) {
     this.get('tabs').pushObject(tab);
   },
 
@@ -94,8 +97,8 @@ export default Ember.Component.extend({
    *
    * @method selectNextTab
    */
-  selectNextTab: function() {
-    var index = this.get('selected-index') + 1;
+  selectNextTab() {
+    let index = this.get('selected-index') + 1;
     if (index === this.get('tabs.length')) { index = 0; }
     this.selectTabByIndex(index);
   },
@@ -105,8 +108,8 @@ export default Ember.Component.extend({
    *
    * @method selectPreviousTab
    */
-  selectPreviousTab: function() {
-    var index = this.get('selected-index') - 1;
+  selectPreviousTab() {
+    let index = this.get('selected-index') - 1;
 
     // Previous from the first tab should select the last tab.
     if (index < 0) { index = this.get('tabs.length') - 1; }
@@ -134,7 +137,7 @@ export default Ember.Component.extend({
    * @method selectTab
    * @param {IvyTabs.IvyTabComponent} tab
    */
-  selectTab: function(tab) {
+  selectTab(tab) {
     this.selectTabByIndex(this.get('tabs').indexOf(tab));
   },
 
@@ -144,27 +147,39 @@ export default Ember.Component.extend({
    * @method selectTabByIndex
    * @param {Number} index
    */
-  selectTabByIndex: function(index) {
+  selectTabByIndex(index) {
     this.set('selected-index', index);
   },
 
+  tabs: Ember.computed(function() {
+    return Ember.A();
+  }).readOnly(),
+
+  _deprecatedParentViewBasedTabsContainer: Ember.computed('parentView', function() {
+    Ember.deprecate('Inferring `tabsContainer` from `parentView` on `{{ivy-tab-list}}` is deprecated. Please assign in an instance of `{{ivy-tabs}}` to the `tabsContainer` property.', false, {
+      id: 'ivy-tabs.ivy-tab-list.tabs-container-missing',
+      until: '2.0.0'
+    });
+    return this.get('parentView');
+  }).readOnly(),
+
   /**
    * The `ivy-tabs` component.
    *
    * @property tabsContainer
    * @type IvyTabs.IvyTabsComponent
    * @readOnly
    */
-  tabsContainer: Ember.computed.alias('parentView').readOnly(),
+  tabsContainer: Ember.computed.oneWay('_deprecatedParentViewBasedTabsContainer'),
 
   /**
    * Removes a tab from the `tabs` array.
    *
    * @method unregisterTab
    * @param {IvyTabs.IvyTabComponent} tab
    */
-  unregisterTab: function(tab) {
-    var index = tab.get('index');
+  unregisterTab(tab) {
+    const index = tab.get('index');
     this.get('tabs').removeObject(tab);
 
     if (index < this.get('selected-index')) {
@@ -176,15 +191,11 @@ export default Ember.Component.extend({
     }
   },
 
-  _initTabs: Ember.on('init', function() {
-    this.set('tabs', Ember.A());
-  }),
-
-  _registerWithTabsContainer: function() {
+  _registerWithTabsContainer() {
     this.get('tabsContainer').registerTabList(this);
   },
 
-  _unregisterWithTabsContainer: function() {
+  _unregisterWithTabsContainer() {
     this.get('tabsContainer').unregisterTabList(this);
   }
 });

addon/components/ivy-tab-panel.js

@@ -14,13 +14,13 @@ export default Ember.Component.extend({
   classNames: ['ivy-tab-panel'],
   classNameBindings: ['active'],
 
-  init: function() {
-    this._super();
+  init() {
+    this._super(...arguments);
     Ember.run.once(this, this._registerWithTabsContainer);
   },
 
-  willDestroy: function() {
-    this._super();
+  willDestroy() {
+    this._super(...arguments);
     Ember.run.once(this, this._unregisterWithTabsContainer);
   },
 
@@ -102,7 +102,7 @@ export default Ember.Component.extend({
    * @type IvyTabs.IvyTabComponent
    */
   tab: Ember.computed(function() {
-    var tabs = this.get('tabs');
+    const tabs = this.get('tabs');
     if (tabs) { return tabs.objectAt(this.get('index')); }
   }).property('tabs.[]', 'index'),
 
@@ -134,20 +134,28 @@ export default Ember.Component.extend({
    */
   tabs: Ember.computed.alias('tabList.tabs').readOnly(),
 
+  _deprecatedParentViewBasedTabsContainer: Ember.computed('parentView', function() {
+    Ember.deprecate('Inferring `tabsContainer` from `parentView` on `{{ivy-tab-panel}}` is deprecated. Please assign in an instance of `{{ivy-tabs}}` to the `tabsContainer` property.', false, {
+      id: 'ivy-tabs.ivy-tab-panel.tabs-container-missing',
+      until: '2.0.0'
+    });
+    return this.get('parentView');
+  }).readOnly(),
+
   /**
    * The `ivy-tabs` component.
    *
    * @property tabsContainer
    * @type IvyTabs.IvyTabsComponent
    * @readOnly
    */
-  tabsContainer: Ember.computed.alias('parentView').readOnly(),
+  tabsContainer: Ember.computed.oneWay('_deprecatedParentViewBasedTabsContainer'),
 
-  _registerWithTabsContainer: function() {
+  _registerWithTabsContainer() {
     this.get('tabsContainer').registerTabPanel(this);
   },
 
-  _unregisterWithTabsContainer: function() {
+  _unregisterWithTabsContainer() {
     this.get('tabsContainer').unregisterTabPanel(this);
   }
 });

addon/components/ivy-tab.js

@@ -15,13 +15,13 @@ export default Ember.Component.extend({
   classNames: ['ivy-tab'],
   classNameBindings: ['active'],
 
-  init: function() {
-    this._super();
+  init() {
+    this._super(...arguments);
     Ember.run.once(this, this._registerWithTabList);
   },
 
-  willDestroy: function() {
-    this._super();
+  willDestroy() {
+    this._super(...arguments);
     Ember.run.once(this, this._unregisterWithTabList);
   },
 
@@ -144,14 +144,22 @@ export default Ember.Component.extend({
     this.get('tabList').selectTab(this);
   }),
 
+  _deprecatedParentViewBasedTabList: Ember.computed('parentView', function() {
+    Ember.deprecate('Inferring `tabList` from `parentView` on `{{ivy-tab}}` is deprecated. Please assign in an instance of `{{ivy-tab-list}}` to the `tabList` property.', false, {
+      id: 'ivy-tabs.ivy-tab.tab-list-missing',
+      until: '2.0.0'
+    });
+    return this.get('parentView');
+  }).readOnly(),
+
   /**
    * The `ivy-tab-list` component this tab belongs to.
    *
    * @property tabList
    * @type IvyTabs.IvyTabListComponent
    * @readOnly
    */
-  tabList: Ember.computed.alias('parentView').readOnly(),
+  tabList: Ember.computed.oneWay('_deprecatedParentViewBasedTabList'),
 
   /**
    * The `ivy-tab-panel` associated with this tab.
@@ -191,11 +199,11 @@ export default Ember.Component.extend({
    */
   tabsContainer: Ember.computed.alias('tabList.tabsContainer').readOnly(),
 
-  _registerWithTabList: function() {
+  _registerWithTabList() {
     this.get('tabList').registerTab(this);
   },
 
-  _unregisterWithTabList: function() {
+  _unregisterWithTabList() {
     this.get('tabList').unregisterTab(this);
   }
 });