Android - SMSView - Expandable TextArea

smsview.js

// Android - SMSView - Expandable TextArea


/*
 *    Copyright 2011 Pedro Enrique
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */


var BACKGROUND_COLOR = '#dae1eb';
var TOOLBAR_COLOR = '#ddd';
var TEXTFIELD_FONT = {fontColor:'black', fontSize:18};
var SEND_BUTTON_TITLE = 'Send';
var SENT_COLOR = 'green';
var RECIEVED_COLOR = 'blue';
var MESSAGE_RADIUS = 10;
var HEIGHT_LIMIT = 100;

var win = Ti.UI.createWindow({
	fullscreen:false,
	orientationModes:[1,2,3,4],
	windowSoftInputMode:Titanium.UI.Android.SOFT_INPUT_ADJUST_RESIZE
});

var hiddenLabel = Ti.UI.createLabel({
	left:15,
	right:100,
	font: TEXTFIELD_FONT,
	height:'auto',
	top:0,
	text:'.',
	color:'transparent',
	backgroundColor:'transparent'
});

win.add(hiddenLabel);

var toolBar = Ti.UI.createView({
	backgroundColor: TOOLBAR_COLOR,
	height:20,
	left:0,
	right:0,
	bottom:0
})
var textField = Ti.UI.createTextArea({
	font:TEXTFIELD_FONT,
	height:hiddenLabel.height,
	left:hiddenLabel.left-10,
	right:hiddenLabel.right-10,
	top:5
});

var sendButton = Ti.UI.createButton({
	title: SEND_BUTTON_TITLE,
	font:{
		fontWeight:'bold',
		fontSize:18
	},
	width:82,
	right:5,
	height:'auto',
	top:5
});


toolBar.add(sendButton);
toolBar.add(textField);

win.add(toolBar);

var tableView = Ti.UI.createTableView({
	separatorColor: BACKGROUND_COLOR,
	left:0,
	top:0,
	right:0,
	bottom:hiddenLabel.size.height+33,
	backgroundColor: BACKGROUND_COLOR
});

win.add(tableView);

function message(text,pos){
	var row = Ti.UI.createTableViewRow();
	var label = Ti.UI.createLabel({
		text:text,
		color:'black',
		width:'auto',
		height:'auto',
		font:{fontWeight:'bold',fontSize:18},
		backgroundColor:'white'
	});
	var view = Ti.UI.createView({
		borderRadius: MESSAGE_RADIUS
	});
	if(pos == 'right'){
		view.backgroundColor = SENT_COLOR;
		view.right = 1;
	}
	if(pos == 'left'){
		view.backgroundColor = RECIEVED_COLOR;
		view.left = 1;
	}
	view.add(label);
	row.add(view);
	setTimeout(function(){
		var width = label.toImage().width;
		var height = label.toImage().height;
		if(width > 150){
			width = hiddenLabel.toImage().width;
			height = hiddenLabel.toImage().height+20;
			label.width = width - 10;
		} 
		view.width = width + 20;
		view.height = height + 20;
		tableView.appendRow(row);
		textField.value = '';
		tableView.scrollToIndex(tableView.data[0].rows.length);
	},1);
}

function recieveMessage(text){
	message(text,'left');
}
function sendMessage(text){
	message(text,'right');
}

textField.addEventListener('change', function(e){
	hiddenLabel.text = e.value;
	setTimeout(function(){
		if(hiddenLabel.size.height<HEIGHT_LIMIT){
			textField.height = hiddenLabel.size.height+20;
			toolBar.height = hiddenLabel.size.height+25;
			tableView.bottom = hiddenLabel.size.height+25;
		}
	},10);
});

var x = 0;

sendButton.addEventListener('click', function(){
	var msg = textField.value.replace(/^\s+/,'').replace(/\s+$/,'');
	if(msg.length > 0){
		switch(x){
			case 0:	sendMessage(msg); x = 1; break;
			case 1: recieveMessage(msg); x = 0; break;
		}
	}
});

win.activity.onCreateOptionsMenu = function(e) {
	var menu = e.menu; // save off menu.
	var camera = menu.add({
		title : 'Camera'
	});
	camera.setIcon(Titanium.Android.R.drawable.ic_menu_camera);
	var gallery = menu.add({
		title:'Phoro Gallery'
	});
	gallery.setIcon(Titanium.Android.R.drawable.ic_menu_gallery);
}

win.open();