SliderTabGroup for Appcelerator Titanium

SliderTabGroup.js

$U = {};
$U.deviceType = (Ti.Platform.osname === 'ipad') ? 'tablet' : 'phone';

var SliderTabGroupButton = function(_args) {
	
	_args = _args || {};
	
	var borderLeft, borderRight, label;
	
	var API = Ti.UI.createView({
		index: _args.index,
		backgroundGradient: { 
			type: 'linear', 
			startPOint: {x:0,y:0},
			endPoint: {x: 0, y: '100%'},
			colors: [
				{color: '#242424', offset: 0.0 }, 
				{color: '#2b2b2b', offset: 0.25}, 
				{color: '#070706', offset:1.0}
			]
		},
		layout: 'horizontal',
		width: Ti.UI.SIZE,
		height: Ti.UI.SIZE,
	});
	
	borderLeft = Ti.UI.createView({
		width: 1,
		height: Ti.UI.FILL,
		backgroundColor: '#040404',
	});
	API.add(borderLeft);
	
	label = Ti.UI.createLabel({
		index: _args.index,
		color: '#858585',
		font: {fontSize: ($U.deviceType === 'tablet') ? 30 : 20, fontFamily: 'Calibri', fontWeight: 'normal'},
		height: Ti.UI.FILL,
		width: Ti.UI.FILL,
		text: _args.text || 'Item',
		left:  5
	});
	API.add(label);
	
	borderRight = Ti.UI.createView({
		width: 1,
		height: Ti.UI.FILL,
		backgroundColor: '#383838',
	});
	API.add(borderRight);
	
	/**
	 * METHODS
	 */
	
	API.setActive = function(status) {
		label.color = (status) ? '#fff': '#858585';
		label.font.fontWeight = (status) ? 'bold' : 'normal';	
	};
	
	/**
	 * EVENTS
	 */
	
	return API;
};

var SliderTabGroup = function(_args) {
	
	_args = _args || {};
	
	/**
	 * SLIDER TAB GROUP PROPERTIES
	 */
	var scrollView, buttonBar, indicator;
	
	/**
	 * SLIDER TAB GROUP VIEW
	 */
	API = Ti.UI.createView({
		width: _args.width || Ti.UI.FILL,
		height: _args.height || Ti.UI.FILL,
		backgroundColor: _args.backgroundColor || 'transparent',
		backgroundImage: _args.backgroundImage, 
		top: _args.top || 0,
		left: _args.left || 0,
		layout: 'vertical'
	});
	
	/**
	 * SLIDER TAB GROUP METHODS
	 */
	
	API.createViewScroller = function(views) {
	
		if(views.length) {
			scrollView = Ti.UI.createScrollableView({
				views: views,
				showPagingControl: false
			});
		}
		
		API.add(scrollView);
	};
	
	API.createButtonBar = function(views) {
		buttonBar = Ti.UI.createView({
			width: Ti.UI.FILL,
			height: ($U.deviceType === 'tablet') ? 60 : 40,
			backgroundGradient: { 
			type: 'linear', 
			startPOint: {x:0,y:0},
			endPoint: {x: 0, y: '100%'},
			colors: [
					{color: '#242424', offset: 0.0 }, 
					{color: '#2b2b2b', offset: 0.25}, 
					{color: '#070706', offset:1.0}
				]
			},
		});
		
		var container = Ti.UI.createView({width:Ti.UI.SIZE, height: Ti.UI.SIZE, layout:'horizontal', backgroundColor:'transparent'});
		for(var i=0,l=_args.views.length;i < l; i++) {
			var button = new SliderTabGroupButton({index: i, title: _args.views[i].title});
			button.index = i;
			button.addEventListener('click', function(e){
				Ti.API.info('SLIDERTABGROUP::Button '+e.source.index+" clicked!");
				API.setActiveButton(e.source.index);
				API.navigate(e.source.index);
				
			});
			container.add(button);
		}
		buttonBar.add(container);
		API.add(buttonBar);
	}
	
	API.setActiveButton = function(index) {
		if(buttonBar.children) {
			for(var i=0,l=buttonBar.children.length; i < l; i++) {
				var state = (i===index) ? true : false;
				buttonBar.children[i].setActive(state);
			}
		}
	}
	
	API.navigate = function(index) {
		scrollView.scrollToView(index);
	};
	
	API.cleanup = function() {
		scrollView = null;
		buttonBar = null;
		API = null;
	};
	
	/**
	 * Build out UI elements
	 */	
	API.createButtonBar(_args.views);
	API.createViewScroller(_args.views);
	
	return API;
};

module.exports = SliderTabGroup;