default.js

// 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');
    });
});