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:
Max Lynch
2013-09-08 01:47:27 -05:00
parent 56f7ee5c9c
commit 5baadf6d9f
2 changed files with 69 additions and 55 deletions

View File

@ -6,57 +6,71 @@ TabBar.prototype = {};
TabBarController = function(options) { TabBarController = function(options) {
this.tabBar = options.tabBar; this.tabBar = options.tabBar;
this.tabs = []; this.controllers = [];
// Bind or set our tabWillChange callback // Bind or set our tabWillChange callback
this.tabWillChange = options.tabWillChange || function(tab) {}; this.controllerWillChange = options.controllerWillChange || function(controller) {};
this.tabChanged = options.tabChanged || function(tab) {}; this.controllerChanged = options.controllerChanged || function(controller) {};
}; };
TabBarController.prototype = { TabBarController.prototype = {
selectTab: function(index) { selectController: function(index) {
var shouldChange = true; var shouldChange = true;
// Check if we should switch to this tab. This lets the app // Check if we should switch to this tab. This lets the app
// cancel tab switches if the context isn't right, for example. // cancel tab switches if the context isn't right, for example.
if(this.tabWillChange) { if(this.controllerWillChange) {
if(this.tabWillChange(this.tabs[index], index) === false) { if(this.controllerWillChange(this.controllers[index], index) === false) {
shouldChange = false; shouldChange = false;
} }
} }
if(shouldChange) { if(shouldChange) {
this.selectedTab = this.tabs[index]; this.setSelectedController(index);
this.tabChanged && this.tabChanged(this.selectedTab, 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 // Return the tab at the given index
getTab: function(index) { getController: function(index) {
return this.tabs[index]; return this.controllers[index];
}, },
// Return the current tab list // Return the current tab list
getTabs: function() { getControllers: function() {
return this.tabs; return this.controllers;
}, },
// Get the currently selected tab // Get the currently selected tab
getSelectedTab: function() { getSelectedController: function() {
return this.selectedTab; return this.selectedController;
}, },
// Add a tab // Add a tab
addTab: function(tab) { addController: function(controller) {
this.tabs.push(tab); this.controllers.push(controller);
if(!this.selectedTab) {
this.selectedTab = tab; // 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 // Set the tabs and select the first
setTabs: function(tabs) { setControllers: function(controllers) {
this.tabs = tabs; this.controllers = controllers;
this.selectTab(0); this._clearSelected();
this.selectController(0);
} }
} }

View File

@ -7,67 +7,67 @@ describe('TabBarController', function() {
}); });
}) })
it('Should add tabs', function() { it('Should add Controllers', function() {
ctrl.addTab({ ctrl.addController({
text: 'Item 1' title: 'Item 1'
}); });
expect(ctrl.getTab(0).text).toEqual('Item 1'); expect(ctrl.getController(0).title).toEqual('Item 1');
}); });
it('Should set tabs', function() { it('Should set Controllers', function() {
var tabs = [ var Controllers = [
{ text: 'Item 1' }, { title: 'Item 1' },
{ text: 'Item 2' }, { title: 'Item 2' },
{ text: 'Item 3' }, { title: 'Item 3' },
]; ];
ctrl.setTabs(tabs); ctrl.setControllers(Controllers);
expect(ctrl.getTabs()).toBe(tabs); expect(ctrl.getControllers()).toBe(Controllers);
}); });
it('Should select tab', function() { it('Should select Controller', function() {
tab = { Controller = {
text: 'Item 1' 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() { it('Should trigger lifecycle methods', function() {
tab = { Controller = {
text: 'Item 1' title: 'Item 1'
}; };
spyOn(ctrl, 'tabWillChange'); spyOn(ctrl, 'controllerWillChange');
spyOn(ctrl, 'tabChanged'); spyOn(ctrl, 'controllerChanged');
ctrl.addTab(tab); ctrl.addController(Controller);
ctrl.selectTab(0); ctrl.selectController(0);
expect(ctrl.tabWillChange).toHaveBeenCalled(); expect(ctrl.controllerWillChange).toHaveBeenCalled();
expect(ctrl.tabChanged).toHaveBeenCalled(); expect(ctrl.controllerChanged).toHaveBeenCalled();
}); });
it('Should allow cancelling tab switch', function() { it('Should allow cancelling Controller switch', function() {
ctrl = new TabBarController({ ctrl = new TabBarController({
tabBar: new TabBar(), tabBar: new TabBar(),
tabWillChange: function(tab) { return false; } controllerWillChange: function(Controller) { return false; }
}); });
ctrl.addTab({ ctrl.addController({
text: 'Item 1' title: 'Item 1'
}); });
ctrl.addTab({ ctrl.addController({
text: 'Item 2' title: 'Item 2'
}); });
ctrl.selectTab(1); ctrl.selectController(1);
// Make sure the tab didn't switch // Make sure the Controller didn't switch
expect(ctrl.getSelectedTab()).toBe(ctrl.getTab(0)); expect(ctrl.getSelectedController()).toBe(ctrl.getController(0));
}); });
}) })