// Reference for jquery visual studio intellisense
/// <reference path="jquery-1.7.1-vsdoc2.js" />
// Determine whether input is a function
//function isFunction(inputText) {
// inputText = inputText.toUpperCase();
// inputText = inputText.substring(0, 3);
// if (inputText === '=SUM')
// return 'SUM';
//}
// extends :contains to contains EXACT text
$.expr[':'].containsExactly = function (obj, index, meta, stack) {
return $(obj).text() === meta[3];
};
// Function for inserting the spreadsheet into spreadsheet div
function drawSpreadsheet(xAxis, yAxis) {
if (xAxis === "" || xAxis === undefined)
xAxis = 27;
if (yAxis === "" || yAxis === undefined)
yAxis = 40;
var tableHtml = '<table id="spreadsheetTable"><thead><tr><th width="22px" class="firstCell"></th>';
// Create an array to store all the cells
var cellarrays = new Array();
// Create the x Axis
for (var i = 0; i < xAxis; i++) {
tableHtml += '<th width="60px">' + getExcelColumnName(i + 1) + '</th>';
cellarrays[getExcelColumnName(i+1)] = new Array();
}
tableHtml += '</tr></thead><tbody>';
// Create the y Axis
for (var i = 0; i < yAxis; i++) {
tableHtml += '<tr><td class="yAxis">' + (i + 1) + '</td>';
for (var x = 0; x < xAxis; x++) {
tableHtml += '<td class="display" id="' + getExcelColumnName(x + 1).toString() + "_" + (i + 1).toString() + '"></td>';
cellarrays[getExcelColumnName(x+1)][i] = getExcelColumnName(x + 1) + "" + (i+1) + " ";
}
tableHtml += '</tr>';
}
tableHtml += '</tr></tbody></table>';
$('div#spreadsheet').html(tableHtml);
var arraydata = "";
for (var i = 0; i < yAxis; i++) {
for (var x = 0; x < xAxis; x++) {
arraydata += cellarrays[getExcelColumnName(x+1)][i];
}
}
}
function getExcelColumnName(columnNumber) {
columnName = "";
module = 0;
while (columnNumber > 0) {
module = (columnNumber - 1) % 26;
columnName = String.fromCharCode(65 + module) + columnName;
columnNumber = parseInt((columnNumber - module) / 26);
}
return columnName;
}
// Popup dialog asking for filename and pass to ajax
function saveSpreadsheet() {
$('input.editCell').blur();
var $dialog = $('<div></div>')
.html('<div>Name for spreadsheet<input type="text" id="filename" /></div>')
.dialog({
autoOpen: false,
title: 'Filename',
buttons: {
"Ok": function () {
var spreadsheetCSV = $('table#spreadsheetTable').table2CSV({ delivery: 'value' });
callAJAX("SaveSpreadsheet", spreadsheetCSV, $('input#filename').val());
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
},
close: function () {
$(this).remove();
}
}).dialog('open');
}
// AJAX Function
function callAJAX(requestMethod, clientRequest, clientRequest2) {
var pageMethod = "default.aspx/" + requestMethod;
$.ajax({
url: pageMethod, // Current Page, Method
data: JSON.stringify({ textFile: clientRequest, fileName: clientRequest2 }), // parameter map as JSON
type: "POST", // data has to be POSTed
contentType: "application/json", // posting JSON content
dataType: "JSON", // type of data is JSON (must be upper case!)
timeout: 30000, // AJAX timeout
success: function (result) {
if (requestMethod == "SaveSpreadsheet")
alert('Save Successful');
else
loadFilesCallBack(result.d);
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
}
// Load Files
function loadFiles() {
callAJAX('GetFiles');
}
// Store files in drop down menu
function loadFilesCallBack(result) {
for (var i = 0; i < result.length; i++) {
$('select').html($('select').html() + '<option>' + result[i] + '</option>');
}
}
// click events
$(document).on('click', 'td.display', function () {
// Change class to edit
this.className = 'edit';
$(this).html('<input type="text" class="editCell" size="3" value="' + $(this).text() + '"/>');
// Highlight column and row the cell belongs to
//$(this).css('border', '2px solid black'); // bold selected cell
this.className = 'selected';
var colRow = this.id.split('_');
$('th:containsExactly(' + colRow[0] + ')').css("background", "orange");
$('td.yAxis:containsExactly(' + colRow[1] + ')').css("background-color", "orange");
});
// true if webkit, false otherwise
var isWebkit = !!$('<div style="-webkit-border-radius:1px;">')[0].style.cssText.length;
$(document).on('blur', 'input.editCell', function () {
var $thisParent = $(this).parent(); // <-- Optimizing by caching
// Remove Highlight and bold around cell
$thisParent.removeClass('selected');
var colRow = $thisParent.attr('id').split('_');
$('th:containsExactly(' + colRow[0] + ')').removeAttr('style');
$('td.yAxis:containsExactly(' + colRow[1] + ')').removeAttr('style');
// Change class back to display
$thisParent.attr('class', 'display');
// Take the entered value and put it in the cell
$thisParent.html(this.value);
// if(isFunction(this.value) === 'SUM')
if (isWebkit) { // Fix for Webkit bug: render the table again
// Without jQuery, for efficiency
var style = document.getElementById('spreadsheetTable').style;
style.color = '#111'; //<--1. Change style
setTimeout(function(){style.color='';}, 4); //<--2. Fix
}
});
$(document).on('keypress', 'input.editCell', function (e) {
if (e.which == 13) {
// If enter is pressed trigger the blur function
$(this).blur();
}
});
// When docunment is loaded load files into dropdown and draw default 20 rows by 10 columns spreadsheet
$(document).ready(function () {
loadFiles();
drawSpreadsheet(); // without parameters, uses default spreadsheet columns and rows
$('button#newSpreadsheet').click(function () {
// Open a dialog prompting for column and row sizes
var $dialog = $('<div></div>')
.html('<div>Columns<input type="text" id="xAxisInput" size="1" />Rows<input type="text" id="yAxisInput" size="2" /></div>')
.dialog({
autoOpen: true,
title: 'New Spreadsheet',
buttons: {
"Ok": function () {
drawSpreadsheet($('input#xAxisInput').val(), $('input#yAxisInput').val());
// clear input values
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
},
close: function () {
$(this).remove();
}
}).dialog('open');
});
});