PagingControl.js

// 1. I had some issues with flickering, changing the event to "onscrollend"
// 2. My design requires not just opacity changes but different design for active / inactive buttons so modified for this accordingly
 
// Configuration
var disabledBackground = "#fff";
var disabledBorder = "#5b5857";
var enabledBackground = "#e5001b";
var enabledBorder = "#cccccc";

 
PagingControl = function(scrollableView){
	
	var container = Titanium.UI.createView({
		height: 60,
		top: "280dp",
		width: Ti.UI.SIZE
	});
	
	// Keep a global reference of the available pages
	var numberOfPages = scrollableView.getViews().length;
	
	var pages = []; // without this, the current page won't work on future references of the module
	
	var previousPage = 0; //Index of previously selected paging control
	
	// Go through each of the current pages available in the scrollableView
	for (var i = 0; i < numberOfPages; i++) {
		var page = Titanium.UI.createView({
			borderRadius: 6,
			borderWidth: 2,
			borderColor: disabledBorder,
			width: 12,
			height: 12,
			left: 20 * i,
			bottom: 0,
			backgroundColor: disabledBackground
		});
		
		// Store a reference to this view
		pages.push(page);
		
		// Add it to the container
		container.add(page);
	}
	
	// Mark the initial selected page
	pages[scrollableView.getCurrentPage()].setBackgroundColor(enabledBackground);
	pages[scrollableView.getCurrentPage()].setBorderColor(enabledBorder);
	
	// Callbacks
	onScrollEnd = function(event){
			
		//Set the previously selected paging control to disabled colours 		
		pages[previousPage].setBackgroundColor(disabledBackground);
		pages[previousPage].setBorderColor(disabledBorder);
		
		//Set the currently selected paging control to disabled colours
		pages[event.currentPage].setBackgroundColor(enabledBackground);
		pages[event.currentPage].setBorderColor(enabledBorder);
		
		//Remember the previous page so we can use it next time onScrollEnd is called
		previousPage = event.currentPage;
	};
	
	// Attach the scroll event to this scrollableView, so we know when to update things
	scrollableView.addEventListener("scrollend", onScrollEnd);

	return container;
};
 
module.exports = PagingControl;