PagingControl.js

// I was unhappy about there was close to no control over the "pageControl" 
// in scrollableViews, so I hacked my own
// -----

// Configuration
function PagingControl(scrollableView){
    var pages = [];
    var page;
    var numberOfPages = 0;
 
    // Configuration
    var pageColor = "#FF0000";
	var container = Titanium.UI.createView({
		height: 30,
		width: Titanium.UI.SIZE,
		layout: 'horizontal',
		backgroundColor: '#transparent'
	});
	// Keep a global reference of the available pages
	numberOfPages = scrollableView.getViews().length;
	
	pages = []; // without this, the current page won't work on future references of the module
	
	// 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: i == 0 ? 0 : 15,
			backgroundColor: pageColor,
			opacity: 0.5,
			center: {y:'50%'}
		});
		// 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", function(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);
	});
        // Reset page control to default page when scollableView refresh
	scrollableView.addEventListener("postlayout", function(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;