mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Updated to use controller list not tabs
This is more inline with iOS style, where the controllers that show content drive the tabs, not the tab list.
This commit is contained in:
@ -6,57 +6,71 @@ TabBar.prototype = {};
|
||||
TabBarController = function(options) {
|
||||
this.tabBar = options.tabBar;
|
||||
|
||||
this.tabs = [];
|
||||
this.controllers = [];
|
||||
|
||||
// Bind or set our tabWillChange callback
|
||||
this.tabWillChange = options.tabWillChange || function(tab) {};
|
||||
this.tabChanged = options.tabChanged || function(tab) {};
|
||||
this.controllerWillChange = options.controllerWillChange || function(controller) {};
|
||||
this.controllerChanged = options.controllerChanged || function(controller) {};
|
||||
};
|
||||
|
||||
TabBarController.prototype = {
|
||||
selectTab: function(index) {
|
||||
selectController: function(index) {
|
||||
var shouldChange = true;
|
||||
|
||||
// Check if we should switch to this tab. This lets the app
|
||||
// cancel tab switches if the context isn't right, for example.
|
||||
if(this.tabWillChange) {
|
||||
if(this.tabWillChange(this.tabs[index], index) === false) {
|
||||
if(this.controllerWillChange) {
|
||||
if(this.controllerWillChange(this.controllers[index], index) === false) {
|
||||
shouldChange = false;
|
||||
}
|
||||
}
|
||||
|
||||
if(shouldChange) {
|
||||
this.selectedTab = this.tabs[index];
|
||||
this.tabChanged && this.tabChanged(this.selectedTab, index);
|
||||
this.setSelectedController(index);
|
||||
this.controllerChanged && this.controllerChanged(this.selectedController, this.selectedIndex);
|
||||
}
|
||||
},
|
||||
|
||||
// Force the selection of a controller at the given index
|
||||
setSelectedController: function(index) {
|
||||
this.selectedController = this.controllers[index];
|
||||
this.selectedIndex = index;
|
||||
},
|
||||
|
||||
_clearSelected: function() {
|
||||
this.selectedController = null;
|
||||
this.selectedIndex = -1;
|
||||
},
|
||||
|
||||
// Return the tab at the given index
|
||||
getTab: function(index) {
|
||||
return this.tabs[index];
|
||||
getController: function(index) {
|
||||
return this.controllers[index];
|
||||
},
|
||||
|
||||
// Return the current tab list
|
||||
getTabs: function() {
|
||||
return this.tabs;
|
||||
getControllers: function() {
|
||||
return this.controllers;
|
||||
},
|
||||
|
||||
// Get the currently selected tab
|
||||
getSelectedTab: function() {
|
||||
return this.selectedTab;
|
||||
getSelectedController: function() {
|
||||
return this.selectedController;
|
||||
},
|
||||
|
||||
// Add a tab
|
||||
addTab: function(tab) {
|
||||
this.tabs.push(tab);
|
||||
if(!this.selectedTab) {
|
||||
this.selectedTab = tab;
|
||||
addController: function(controller) {
|
||||
this.controllers.push(controller);
|
||||
|
||||
// If we don't have a selected controller yet, select the first one.
|
||||
if(!this.selectedController) {
|
||||
this.setSelectedController(0);
|
||||
}
|
||||
},
|
||||
|
||||
// Set the tabs and select the first
|
||||
setTabs: function(tabs) {
|
||||
this.tabs = tabs;
|
||||
this.selectTab(0);
|
||||
setControllers: function(controllers) {
|
||||
this.controllers = controllers;
|
||||
this._clearSelected();
|
||||
this.selectController(0);
|
||||
}
|
||||
}
|
||||
@ -7,67 +7,67 @@ describe('TabBarController', function() {
|
||||
});
|
||||
})
|
||||
|
||||
it('Should add tabs', function() {
|
||||
ctrl.addTab({
|
||||
text: 'Item 1'
|
||||
it('Should add Controllers', function() {
|
||||
ctrl.addController({
|
||||
title: 'Item 1'
|
||||
});
|
||||
|
||||
expect(ctrl.getTab(0).text).toEqual('Item 1');
|
||||
expect(ctrl.getController(0).title).toEqual('Item 1');
|
||||
});
|
||||
|
||||
it('Should set tabs', function() {
|
||||
var tabs = [
|
||||
{ text: 'Item 1' },
|
||||
{ text: 'Item 2' },
|
||||
{ text: 'Item 3' },
|
||||
it('Should set Controllers', function() {
|
||||
var Controllers = [
|
||||
{ title: 'Item 1' },
|
||||
{ title: 'Item 2' },
|
||||
{ title: 'Item 3' },
|
||||
];
|
||||
ctrl.setTabs(tabs);
|
||||
ctrl.setControllers(Controllers);
|
||||
|
||||
expect(ctrl.getTabs()).toBe(tabs);
|
||||
expect(ctrl.getControllers()).toBe(Controllers);
|
||||
});
|
||||
|
||||
it('Should select tab', function() {
|
||||
tab = {
|
||||
text: 'Item 1'
|
||||
it('Should select Controller', function() {
|
||||
Controller = {
|
||||
title: 'Item 1'
|
||||
};
|
||||
|
||||
ctrl.addTab(tab);
|
||||
ctrl.addController(Controller);
|
||||
|
||||
ctrl.selectTab(0);
|
||||
ctrl.selectController(0);
|
||||
|
||||
expect(ctrl.getSelectedTab()).toEqual(tab);
|
||||
expect(ctrl.getSelectedController()).toEqual(Controller);
|
||||
});
|
||||
|
||||
it('Should trigger lifecycle methods', function() {
|
||||
tab = {
|
||||
text: 'Item 1'
|
||||
Controller = {
|
||||
title: 'Item 1'
|
||||
};
|
||||
|
||||
spyOn(ctrl, 'tabWillChange');
|
||||
spyOn(ctrl, 'tabChanged');
|
||||
spyOn(ctrl, 'controllerWillChange');
|
||||
spyOn(ctrl, 'controllerChanged');
|
||||
|
||||
ctrl.addTab(tab);
|
||||
ctrl.selectTab(0);
|
||||
expect(ctrl.tabWillChange).toHaveBeenCalled();
|
||||
expect(ctrl.tabChanged).toHaveBeenCalled();
|
||||
ctrl.addController(Controller);
|
||||
ctrl.selectController(0);
|
||||
expect(ctrl.controllerWillChange).toHaveBeenCalled();
|
||||
expect(ctrl.controllerChanged).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Should allow cancelling tab switch', function() {
|
||||
it('Should allow cancelling Controller switch', function() {
|
||||
ctrl = new TabBarController({
|
||||
tabBar: new TabBar(),
|
||||
tabWillChange: function(tab) { return false; }
|
||||
controllerWillChange: function(Controller) { return false; }
|
||||
});
|
||||
|
||||
ctrl.addTab({
|
||||
text: 'Item 1'
|
||||
ctrl.addController({
|
||||
title: 'Item 1'
|
||||
});
|
||||
ctrl.addTab({
|
||||
text: 'Item 2'
|
||||
ctrl.addController({
|
||||
title: 'Item 2'
|
||||
});
|
||||
ctrl.selectTab(1);
|
||||
ctrl.selectController(1);
|
||||
|
||||
// Make sure the tab didn't switch
|
||||
expect(ctrl.getSelectedTab()).toBe(ctrl.getTab(0));
|
||||
// Make sure the Controller didn't switch
|
||||
expect(ctrl.getSelectedController()).toBe(ctrl.getController(0));
|
||||
});
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user