Titanium convertPointToView example

app.js

/**
 * This sample shows the usage of the function convertPointToView.
 * 
 * In the example, a view is placed in the main window with relative positioning.
 * When the user clicks on one of the titles in the list, the event listener will
 * have the click position related to the source object (the row clicked).
 * 
 * However, the goal is to move the description view (the yellow one) inside the
 * window, in the position clicked by the user. Using convertPointToView, it is
 * possible to convert the data received by the event listener to the position
 * related to the window itself. 
 * 
 * @author Davide Cassenti
 */

var win = Ti.UI.createWindow({
	backgroundColor: 'black'
});

var descAnim = null;
var desc = Ti.UI.createView({
	backgroundColor: 'yellow',
	opacity: 0,
	width: 300,
	height: 50
});
var txt = Ti.UI.createLabel({
	left: 5,
	top: 5,
	right: 5,
	bottom: 5,
	font: {
		fontSize: 12
	},
	text: "Bacon ipsum dolor sit amet\npork chop t-bone drumstick strip."
});
desc.add(txt);

var menu = Ti.UI.createView({
	backgroundColor: 'white',
	left: '20%',
	top: '20%',
	width: '50%',
	height: '80%',
	layout: 'vertical'
});

for (var i=0; i<5; i++) {
	var row = Ti.UI.createView({
		top: '5%',
		width: Ti.UI.FILL,
		height: 50
	});
	
	var title = Ti.UI.createLabel({
		text: 'Menu ' + i,
		left: '5%',
		top: '15%'
	});
	row.add(title);
	
	row.addEventListener('click', function(e) {
		if (descAnim != null) {
			clearTimeout(descAnim);
			descAnim = null;
		}
		
		// converting the position
		var point = e.source.convertPointToView({
			x: e.x,
			y: e.y
		}, win);
		
		// using e.x and e.y instead, the view
		// will not be in the right position
		desc.applyProperties({
			left: point.x,
			top: point.y,
			opacity: 1
		});
		
		win.add(desc);
		
		descAnim = setTimeout(function() {
			desc.animate({
				opacity: 0,
				duration: 100
			});
		}, 2000);
	})
	
	menu.add(row);
}
win.add(menu);

win.open();