htmlTableUi.js

function htmltableUiToggleDiv(myId){
	// Create the selectors
	var tbody = "#"+myId+" div.body";
	var theader = "#"+myId+" div.header";
	var hideButton = "#"+myId+" #hidecontrol";
	var showButton = "#"+myId+" #showcontrol";
	
	// Verify display property (CSS) of tbody
	var display = $(tbody).css("display");

	if(display=="none"){
		$(tbody).show("slide",{ direction: "up" }, 200);
		$(theader).removeClass("ui-corner-bottom");
		$(hideButton).show();
		$(showButton).hide();
	}else{
		$(tbody).hide("slide",{ direction: "up" }, 200);
		$(theader).addClass("ui-corner-bottom");
		$(hideButton).hide();
		$(showButton).show();
	}
}

function htmltableUiToggleMode(myId){
	var buttonSelector = "#"+myId+" div.header table.header-table tr td.header-mode div.header-mode-button";
	// If in edit mode, change the rows
	if($(buttonSelector).hasClass("editmode")){
		htmltableUiView(myId);
	}else{
		htmltableUiEdit(myId);
	}
}

function htmltableUiEdit(myId){
	var buttonSelector = "#"+myId+" div.header table.header-table tr td.header-mode div.header-mode-button";
	var rowSelector = "#"+myId+" div.body table tbody tr";
	// Enter Edit Mode
	$(rowSelector).addClass("editrow");
	$(buttonSelector).addClass("editmode");
}

function htmltableUiView(myId){
	var buttonSelector = "#"+myId+" div.header table.header-table tr td.header-mode div.header-mode-button";
	var rowSelector = "#"+myId+" div.body table tbody tr";
	var formSelector = "#"+myId+" div.form";

	$(rowSelector).removeClass("editrow");
	$(buttonSelector).removeClass("editmode");
	$(formSelector).hide();
	htmltableUi_globalLastPos=null;
}


/*
 * Function to return the 
 * column headers.
 * Returns an array with all the 
 * column headers.
 */
function htmltableUiGetColumns(myId){
	// Get the column's headers
	var columnsSelector = "#"+myId+" div.body table.body-table tr.body-header th div.column-name span"
	var columns = new Array();
	$(columnsSelector).each(function(index){
		columns[index] = $(this).text();
	});	
	return columns;
}

/*
 * Global Variables
 * 
 * These are variables needed to store globally
 * some important parameters such as:
 * htmltableUi_globalId - This is the id of the widget been
 * used.
 * htmltableUi_globalRow - This is the row being clicked
 * html_globalFormData - Data extracted from the form.
 */
//Global Variables needed for row manipulation
var htmltableUi_globalId=null;
var htmltableUi_globalRow=null;
var htmltableUi_globalFormData=null;
var htmltableUi_globalLastPos=null;

/*
 * htmltableShowUiForm
 *  
 * This function is used to show the
 * edit form when a row is clicked. It has the following 
 * arguments:
 * myId - This is the Id of the particular widget that is being manipulated
 * myRow - This is the element that was clicked
 * formTitle - The title to be shown in the form.
 */
function htmltableShowUiForm(myId,myRow,formTitle){
	// Widget Reference
	var widgetSelector = "#"+myId;
	var divSelector = "#edit-form";//+myId+" div.form";
	var titleSelector = "#edit-form-header-title";
	var formSelector = "#table-form";//+myId+"-form";
	var rowSelector = "#"+myId+" div.body table tbody tr";
	
	// Close and Destroy form if already
	// opened.
	htmltableCloseUiForm();
	
	// Check if row is in edit mode
	if($(rowSelector).hasClass("editrow")){
		// Set the global variable with the clicked row
		htmltableUi_globalId = myId;
		htmltableUi_globalRow = myRow;

		// Set Form Title
		//$(divSelector+" .ui-widget-header").text(formTitle);
		$(titleSelector).text(formTitle);
		
		// Show the form
		var widgetLeft = $(widgetSelector).offset().left;
		var widgetTop = $(widgetSelector).position().top;
		var widgetWidth = $(widgetSelector).outerWidth();
		var widgetHeight = $(widgetSelector).outerHeight();
		if(htmltableUi_globalLastPos == null){
			$(divSelector).css('top',widgetTop);
			$(divSelector).css('left',widgetLeft+widgetWidth/4);
		}else{
			$(divSelector).css('top',htmltableUi_globalLastPos.top);
			$(divSelector).css('left',htmltableUi_globalLastPos.left);
		}
		$(divSelector).show("slide",{ direction: "up" }, 100);
		
		var columns = htmltableUiGetColumns(myId);
		
		// Get the html elements of the row that was clicked
		// and create the form
		var myString = "";
		$(myRow).children().each(function(index) {
			var openDiv = "<div class='edit-table-row'><table><tbody><tr>";
			var label = "<td><label for='"+columns[index]+"'>"+columns[index]+"</label></td>";
			var input = "<td><input type='text' name='"+columns[index]+"' class='text' value='"+$(this).text()+"'></input></td>";
			myString = myString + openDiv + label + input + "</tr></tbody></table></div>";
		});
		var changeButton = "<button type='button' class='ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all' onclick='htmltableUiModifyRow(htmltableUi_globalRow);'>Change</button>";
		var closeButton = "<button type='button' class='ui-button  ui-button-text-only ui-widget ui-state-default ui-corner-all' onclick='htmltableCloseUiForm();'>Close</button>";
		var submitButton = "<input type='submit' class='ui-button  ui-button-text-only ui-widget ui-state-default ui-corner-all' value='submit' class='button'></input>";
		$(formSelector).append(myString+changeButton+closeButton);
		$(formSelector+" button").button();
		var position = $(rowSelector).offset();
		$(divSelector).offset(position);
		$(divSelector).draggable();
	}
}

/*
 * htmltableUiModifyRow
 * 
 * This function changes the table row
 * using the data in the form.
 * It uses one parameter:
 * myRow - Object representing the tr element
 * that was clicked.
 */
function htmltableUiModifyRow(myRow){
	htmltableUi_globalFormData = new Array();
	
	// Get all the form entries
	$("#table-form input.text").each(function(index){
		htmltableUi_globalFormData[index] = $(this).val();
	});
	
	// Write to the table
	$(myRow).children().each(function(index) {
		$(this).text(htmltableUi_globalFormData[index]);
	});
	$(myRow).addClass("modified");
	
	htmltableUi_globalFormData=null;
	
	// Show send button
	var sendButton = "#"+htmltableUi_globalId+" div.header table.header-table tr td.header-mode div.header-send-button";
	$(sendButton).show();
	
	//Update Table Sorter Plugin
	$("#"+htmltableUi_globalId+"-body-table").trigger("update");
}

/*
 * htmltableCloseUiForm
 * 
 * This function cleanups the widget
 * First it hides the Form's div container
 * then it removes all form elements from the form
 * Then it resets all the global variables
 */
function htmltableCloseUiForm(){
	$("#edit-form").hide();	
	$("#table-form").children().remove();
	htmltableUi_globalId=null;
	htmltableUi_globalRow=null;
	htmltableUi_globalFormData=null;
}


/*
 * htmltableExportCsv
 * 
 * This function sends the whole table to 
 * a controller action using an AJAX http request
 * Is the responsibility of the controller action to
 * create the CSV file with the data sent through this
 * function.
 */
function htmltableExportCsv(myId,url){
	var rowSelector = "#"+myId+" div.body table tbody tr";
	var titleSelector = "#"+myId+" div.header table.header-table div.header-container span.title";
	var extraSelector = "#"+myId+" div.header table.header-table div.header-container span.extra";
	var subtitleSelector = "#"+myId+" div.body table.body-table thead tr.body-subtitle span.subtitle"
	var footerSelector = "#"+myId+" div.body table.body-table tfoot tr.body-footer td span.footer";

	var rows = new Object();
	var columns = htmltableUiGetColumns(myId);
	
	rows['id'] = myId;
	rows['title'] = $(titleSelector).text();
	rows['subtitle'] = $(subtitleSelector).text();
	rows['extra'] = $(extraSelector).text();
	rows['columns'] = columns;
	
	//<---- GET ALL ROWS ---->
	$.each($(rowSelector),function(key,value){
		var rowKey = "row-"+key;
		var myElements = new Object();

		$(value).children().each(function(index){
			myElements[columns[index]] = $(this).text();
		});
		
		//...and add them as key-value pairs
		//...in an object called rows
		rows[rowKey] = myElements;
		myElements = null;
	});
	
	rows['footer'] = $(footerSelector).text();
	rows['timezone'] = get_time_zone_offset();
	
	//<---- SEND XHR ----->
	var jqXHR = $.ajax({
		url: url,
		type: "POST",
		data: $.param(rows),
		beforeSend: function(xhr,settings){
			$("#"+myId+"-send-button")
				.addClass("ajaxLoading");
		},
		success: function(fileUrl,status,xhr){
			// Open the file URL
			window.open(fileUrl);
		},
		error: function(xhr,errorText,errorObj){
			alert(errorText);
		},
		complete: function(xhr,status){
			$(rowSelector).removeClass("modified");
			$("#"+myId+"-send-button")
				.removeClass("ajaxLoading")
				.hide();
		}
	});
	
	htmltableUiView(myId);
	htmltableCloseUiForm();
}


/*
 * htmltableUiSend
 * 
 * This function sends the the modified 
 * rows through an AJAX XHTTPRequest. 
 * It uses three parameters:
 * myId - the widget id
 * url - url for the request in a Controller/Action format
 * target - an element where the answer of the request should be
 * directed to
 */
function htmltableUiSend(myId,url,target){
	var modifiedSelector = "#"+myId+" div.body table tbody tr.modified";
	var rowSelector = "#"+myId+" div.body table tbody tr";
	var titleSelector = "#"+myId+" div.header table.header-table div.header-container span.title";
	var extraSelector = "#"+myId+" div.header table.header-table div.header-container span.extra";
	var subtitleSelector = "#"+myId+" div.body table.body-table thead tr.body-subtitle span.subtitle"
	var footerSelector = "#"+myId+" div.body table.body-table tfoot tr.body-footer td span.footer";

	var rows = new Object();
	var columns = htmltableUiGetColumns(myId);
	
	rows['id'] = myId;
	rows['title'] = $(titleSelector).text();
	rows['subtitle'] = $(subtitleSelector).text();
	rows['extra'] = $(extraSelector).text();
	rows['columns'] = columns;
	
	//<---- GET MODIFIED ROWS ---->
	// For each modified row....
	$.each($(modifiedSelector),function(key,value){
		//var rowKey = "htmltable-"+myId+"-row-"+key;
		var rowKey = "row-"+key;
		var myElements = new Object();

		$(value).children().each(function(index){
			myElements[columns[index]] = $(this).text();
		});
		
		//...and add them as key-value pairs
		//...in an object called rows
		rows[rowKey] = myElements;
		myElements = null;
	});
	
	rows['footer'] = $(footerSelector).text();
	rows['timezone'] = get_time_zone_offset();
	
	//<---- SEND XHR ----->
	var jqXHR = $.ajax({
		url: url,
		type: "POST",
		data: $.param(rows),
		beforeSend: function(xhr,settings){
			$("#"+myId+"-send-button")
				.addClass("ajaxLoading");
			//alert(decodeURIComponent($.param(rows)));
		},
		success: function(returnedData,status,xhr){
			alert(returnedData);
			//$(target).text(returnedData);
		},
		error: function(xhr,errorText,errorObj){
			alert(errorText);
		},
		complete: function(xhr,status){
			$(rowSelector).removeClass("modified");
			$("#"+myId+"-send-button")
				.removeClass("ajaxLoading")
				.hide();
		}
	});
	
	htmltableUiView(myId);
	htmltableCloseUiForm();
}


/*
 * htmltableUiSort
 * 
 * This function enables the TableSorter 2.0
 * jQuery plugin on the table for client sided
 * sorting. It has three parameters:
 * myId - the widget's id
 * sortColumn - an index starting from 0 referring
 * to the column to use for sorting initially
 * sortOrder - 0-ASC, 1-DESC
 * 
 */
function htmltableUiSort(myId,sortColumn,sortOrder){
	// Enable table sorter for the table
	var selector = '#'+myId+'-body-table';
	
	$(selector).tablesorter({
		cssHeader: "unsorted",
		sortList: [[sortColumn,sortOrder]]
	});

	// Set the cursor to a hand or pointer over the
	// cells used to sort.
	selector = selector + ' thead tr.body-header th';
	$(selector).css("cursor","pointer");
}

/*
 * get_time_zone_offset
 * 
 * This function provides the GMT timezone difference
 * from the browser to be used in the server.
 * http://josephscott.org/archives/2009/08/detecting-client-side-time-zone-offset-via-javascript/
 */
function get_time_zone_offset( ) {
	var current_date = new Date( );
	var gmt_offset = current_date.getTimezoneOffset( ) / 60;
	return (gmt_offset);
}