84 lines
1.8 KiB
JavaScript
84 lines
1.8 KiB
JavaScript
import Component from 'ember-component';
|
|
|
|
/**
|
|
* Heavily inspired by ic-tabs (https://github.com/instructure/ic-tabs)
|
|
*
|
|
* Three components work together for smooth tabbing.
|
|
* 1. tabs-manager (gh-tabs)
|
|
* 2. tab (gh-tab)
|
|
* 3. tab-pane (gh-tab-pane)
|
|
*
|
|
* ## Usage:
|
|
* The tabs-manager must wrap all tab and tab-pane components,
|
|
* but they can be nested at any level.
|
|
|
|
* A tab and its pane are tied together via their order.
|
|
* So, the second tab within a tab manager will activate
|
|
* the second pane within that manager.
|
|
|
|
* ```hbs
|
|
* {{#gh-tabs-manager}}
|
|
* {{#gh-tab}}
|
|
* First tab
|
|
* {{/gh-tab}}
|
|
* {{#gh-tab}}
|
|
* Second tab
|
|
* {{/gh-tab}}
|
|
*
|
|
* ....
|
|
* {{#gh-tab-pane}}
|
|
* First pane
|
|
* {{/gh-tab-pane}}
|
|
* {{#gh-tab-pane}}
|
|
* Second pane
|
|
* {{/gh-tab-pane}}
|
|
* {{/gh-tabs-manager}}
|
|
* ```
|
|
* ## Options:
|
|
*
|
|
* the tabs-manager will send a "selected" action whenever one of its
|
|
* tabs is clicked.
|
|
* ```hbs
|
|
* {{#gh-tabs-manager selected="myAction"}}
|
|
* ....
|
|
* {{/gh-tabs-manager}}
|
|
* ```
|
|
*
|
|
* ## Styling:
|
|
* Both tab and tab-pane elements have an "active"
|
|
* class applied when they are active.
|
|
*
|
|
*/
|
|
export default Component.extend({
|
|
activeTab: null,
|
|
tabs: [],
|
|
tabPanes: [],
|
|
|
|
// Used by children to find this tabsManager
|
|
isTabsManager: true,
|
|
|
|
// Called when a gh-tab is clicked.
|
|
select(tab) {
|
|
this.set('activeTab', tab);
|
|
this.sendAction('selected');
|
|
},
|
|
|
|
// Register tabs and their panes to allow for
|
|
// interaction between components.
|
|
registerTab(tab) {
|
|
this.get('tabs').addObject(tab);
|
|
},
|
|
|
|
unregisterTab(tab) {
|
|
this.get('tabs').removeObject(tab);
|
|
},
|
|
|
|
registerTabPane(tabPane) {
|
|
this.get('tabPanes').addObject(tabPane);
|
|
},
|
|
|
|
unregisterTabPane(tabPane) {
|
|
this.get('tabPanes').removeObject(tabPane);
|
|
}
|
|
});
|