Cortana SizeGuide Converter

by AaronLayton

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1 id="input-groups">SizeGuideTable Generator</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="drop-area" contenteditable>
                <p class="text-muted text-center">Paste your html table here</p>
            </div>
            <button type="button" class="btn btn-primary js-read-table">Read Table</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="js-has-results">
                <h3>Results</h3>
                <div class="table-responsive">
                    <table class="table table-striped table-hover js-results-table">
                    </table>
                </div>
            </div>
            <div class="bs-callout bs-callout-info js-no-table">
                <h4>No table found</h4>
                <p>Make sure you highlight all the cells in excel and copy, then paste straight into the above box. This should create a table layout automatically.</p>
            </div>
        </div>
    </div>
</div>

<script type="text/template" id="resultsRow">
    <tr>
        <td>
            <a class="js-remove-line glyphicon glyphicon-minus-sign"></a>
        </td>
        <td>{{output}}</td>
    </tr>
</script>

SCSS

.drop-area {
    padding: 20px 14px;
    margin-bottom: 14px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    border-radius: 4px;
    p {
        margin:0;
    }
}

.js-remove-line {
    color:#d9534f;
    cursor:pointer;
    &:hover {
        color:#d2322d;
    }
}
.js-has-results {
    display:none;
}
.bs-callout {
    display:none;
    margin: 20px 0;
    padding: 20px;
    border-left: 3px solid #eee;
}
.bs-callout-info {
    background-color: #f4f8fa;
    border-color: #bce8f1;
}

JavaScript

$(document).on("click", ".js-remove-line", function(e){
    e.preventDefault();
    $(this).parents("tr").remove();
});

$(".drop-area").on("mousedown", function(){
    $(this).empty();
});
$(".js-read-table").on("click", function(){
    var userTableRows = $(".drop-area table tr"),
        rowTemplate = $("#resultsRow").html(),
        resultsTable = $(".js-results-table").empty(),
        noResults = $(".js-no-table").hide(),
        resultsDiv = $(".js-has-results").hide();
    
    // If no results 
    if (userTableRows.length == 0) {
        noResults.show();
    }else{
        resultsDiv.show();
        $.each(userTableRows, function(i,e){    
            var rows = $("td,th", e),
                str_start = "new string[] {",
                str_end = "},",
                str_output = "";
               
            $.each(rows, function(i2,e2){
                var elm = $(e2);
                
                // Add the element to the output
                str_output += ",\"" + elm.text().replace('"','\\"') + "\"";
                
                // Check to see if we need to add on any empty colspans
                if (elm.attr("colspan") != ""){
                    for (var x = 1; x < parseInt(elm.attr("colspan")); x++){
                        str_output += ",\"\"";
                    }
                }
                
            });
            str_output = str_output.substring(1);    
             console.log(str_output);
            var output = rowTemplate.replace("{{output}}", (str_start + str_output + str_end))
            resultsTable.append(output);
        });
    }
    
});