PagingControl.js

// Forked from https://gist.github.com/2417902 to fix a small bug
// -----
function PagingControl(scrollableView){
       var pages = [];
       var page;
       var numberOfPages = scrollableView.getViews().length;

        // Configuration
        var pageColor = "#c99ed5";
	var container = Titanium.UI.createView({
		height: 60
	});
	
	// Go through each of the current pages available in the scrollableView
	for (var i = 0; i < numberOfPages; i++) {
		page = Titanium.UI.createView({
			borderRadius: 4,
			width: 8,
			height: 8,
			left: 15 * i,
			backgroundColor: pageColor,
			opacity: 0.5
		});
		// 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()].setOpacity(1);
	// Attach the scroll event to this scrollableView, so we know when to update things
	scrollableView.addEventListener("scroll", onScroll);
        // Reset page control to default page when scollableView refresh
	scrollableView.addEventListener("postlayout", onPostLayout);
	
	function onScroll(event){
		// Go through each and reset it's opacity
		for (var i = 0; i < numberOfPages; i++) {
			pages[i].setOpacity(0.5);
		}
		// Bump the opacity of the new current page
		pages[event.currentPage].setOpacity(1);
		
	};
	
	function onPostLayout(event) {
		// Go through each and reset it's opacity
		for(var i = 0; i < numberOfPages; i++) {
			pages[i].setOpacity(0.5);
		}
		// Bump the opacity of the new current page
		pages[scrollableView.currentPage].setOpacity(1);
	
	};

	return container;
};

module.exports = PagingControl;