Matthew Holt
11 years ago
4 changed files with 14 additions and 598 deletions
@ -1,214 +0,0 @@
@@ -1,214 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>Parse jQuery Plugin</title> |
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> |
||||
<script src="jquery.parse.js"></script> |
||||
<style> |
||||
body { |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
textarea, |
||||
#delim { |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
|
||||
font: 14px/1.5em 'Monaco', monospace; |
||||
outline: none; |
||||
} |
||||
textarea { |
||||
width: 100%; |
||||
padding: 10px; |
||||
height: 260px; |
||||
} |
||||
|
||||
#delim { |
||||
width: 80px; |
||||
} |
||||
|
||||
#tabdelim { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.container { |
||||
width: 100%; |
||||
} |
||||
|
||||
.text-center { |
||||
text-align: center; |
||||
} |
||||
|
||||
code { |
||||
white-space: pre; |
||||
font: 12px/1.25em 'Monaco', monospace; |
||||
background: #EEE; |
||||
display: block; |
||||
padding: 5px; |
||||
} |
||||
|
||||
label { |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
button { |
||||
font-size: 18px; |
||||
padding: 10px 40px; |
||||
} |
||||
</style> |
||||
</head> |
||||
<body> |
||||
<div class="container"> |
||||
<div class="text-center"> |
||||
Delimiter: <input type="text" id="delim" value="" maxlength="1" placeholder="auto"> <a href="javascript:" id="tabdelim">(Tab)</a> |
||||
<br> |
||||
<label><input type="checkbox" id="header" checked> Header row</label> |
||||
|
||||
<label><input type="checkbox" id="dyntype" checked> Dynamic typing</label> |
||||
|
||||
<label><input type="checkbox" id="stream"> Stream results</label> |
||||
</div> |
||||
<br> |
||||
<textarea id="tb" placeholder="CSV input">Address,City,State,Zipcode,Name,Phone Number,Group,URL |
||||
1 Crossgates Mall Road,Albany,NY,12203,Apple Store Cross Gates,(518) 869-3192,"Example ""Group"" 1",http://www.apple.com/retail/crossgates/ |
||||
Duke Rd & Walden Ave,Buffalo,NY,14225,Apple Store Walden Galleria,(716) 685-2762,Example Group 2,http://www.apple.com/retail/walden/ |
||||
630 Old Country Rd.,Garden City,NY,11530,Apple Store Roosevelt Field,(516) 248-3347,Example Group 3,http://www.apple.com/retail/rooseveltfield/ |
||||
160 Walt Whitman Rd.,Huntington Station,NY,11746,Apple Store Walt Whitman,(631) 425-1563,Example Group 3,http://www.apple.com/retail/waltwhitman/ |
||||
9553 Carousel Center Drive,Syracuse,NY,13290,Apple Store Carousel,(315) 422-8484,Example Group 2,http://www.apple.com/retail/carousel/ |
||||
2655 Richmond Ave,Staten Island,NY,10314,Apple Store Staten Island,(718) 477-4180,Example Group 1,http://www.apple.com/retail/statenisland/ |
||||
7979 Victor Road,Victor,NY,14564,Apple Store Eastview,(585) 421-3030,Example Group 1,http://www.apple.com/retail/eastview/ |
||||
1591 Palisades Center Drive,West Nyack,NY,10994,Apple Store Palisades,(845) 353-6756,Example Group 2,http://www.apple.com/retail/palisades/ |
||||
125 Westchester Ave.,White Plains,NY,10601,Apple Store The Westchester,(914) 428-1877,Example Group 3,http://www.apple.com/retail/thewestchester/ |
||||
103 Prince Street,New York,NY,10012,Apple Store SoHo,(212) 226-3126,Example Group 2,http://www.apple.com/retail/soho/</textarea> |
||||
<br> |
||||
<div class="text-center"> |
||||
<button id="parseText">Parse Text</button> |
||||
<br><hr> |
||||
or |
||||
<br><hr> |
||||
<input type="file" id="fileinput1" multiple> |
||||
<input type="file" id="fileinput2" multiple> |
||||
<br><br> |
||||
<button id="parseFiles">Parse File(s)</button> |
||||
</div> |
||||
<br><br> |
||||
<code id="output"></code> |
||||
</div> |
||||
<script> |
||||
$(function() |
||||
{ |
||||
var rowCount = 0, queued = 0; |
||||
var bigParse = 5243000; // 10 MB |
||||
var bigRender = 1024 * 10; // 10 KB |
||||
// Note: when streaming from a large file, I'm able to get about 1 million rows every 1.8s |
||||
|
||||
$('#parseText').click(function() |
||||
{ |
||||
rowCount = 0; |
||||
$('#parseFiles').prop('disabled', true); |
||||
|
||||
if (is('stream')) |
||||
console.log("Now parsing input (not showing progress for massive performance boost)..."); |
||||
|
||||
// TODO: Build in some performance logging? |
||||
var start = performance.now(); |
||||
var results = $.parse($('#tb').val(), userConfig()); |
||||
var end = performance.now(); |
||||
|
||||
console.log(Math.round(end - start) + " ms to parse input text"); |
||||
|
||||
if (!is('stream')) |
||||
render(results); |
||||
else |
||||
{ |
||||
console.log("Rows parsed:", rowCount); |
||||
render({"message": "Results were streamed and were not aggregated in order to save memory. See console for row count."}); |
||||
} |
||||
$('#parseFiles').prop('disabled', false); |
||||
}); |
||||
|
||||
$('#parseFiles').click(function() |
||||
{ |
||||
rowCount = 0, queued = 0; |
||||
|
||||
var start = performance.now(); |
||||
|
||||
$('#fileinput1, #fileinput2').parse( |
||||
{ |
||||
before: function(file, inputElem) |
||||
{ |
||||
console.log("BEFORE", file, inputElem); |
||||
|
||||
if (file.size && file.size > bigParse && !is('stream')) |
||||
{ |
||||
if (!confirm("WARNING - " + file.name + " is a large file, but you chose not to stream the results. This could make your browser tab lock up. Continue?")) |
||||
return false; |
||||
} |
||||
|
||||
queued++; |
||||
$('#parseFiles').prop('disabled', true); |
||||
|
||||
if (is('stream')) |
||||
console.log("File is being parsed and the results are being streamed... (not showing progress for massive performance boost)"); |
||||
}, |
||||
error: function(err, file, elem) |
||||
{ |
||||
console.log("ERROR", err, file, elem); |
||||
if (err.name != "NoFileError") |
||||
queued--; |
||||
if (queued == 0 || err.name == "AbortError") |
||||
$('#parseFiles').prop('disabled', false); |
||||
}, |
||||
complete: function(data, file, inputElem, event) |
||||
{ |
||||
var end = performance.now(); |
||||
|
||||
console.log("COMPLETE", file.size < bigRender ? data : "(too big to render data here or file was streamed)", file, inputElem, event); |
||||
|
||||
console.log(Math.round(end - start) + " ms to parse file"); |
||||
|
||||
queued--; |
||||
|
||||
if (file.size && file.size < bigRender && !is('stream')) |
||||
render(data); |
||||
else |
||||
render({"message": "File was streamed or is too big to render here; open Developer Tools to see the console output instead"}); |
||||
|
||||
if (queued == 0) |
||||
$('#parseFiles').prop('disabled', false); |
||||
if (is('stream')) |
||||
console.log("Rows parsed:", rowCount); |
||||
}, |
||||
config: userConfig() |
||||
}); |
||||
}); |
||||
|
||||
$('#tabdelim').click(function() |
||||
{ |
||||
$('#delim').val("\t"); |
||||
}); |
||||
|
||||
function userConfig() |
||||
{ |
||||
return { |
||||
delimiter: $("#delim").val(), |
||||
header: is('header'), |
||||
dynamicTyping: is('dyntype'), |
||||
stream: is('stream') ? function(results) { rowCount++; } : false |
||||
}; |
||||
} |
||||
|
||||
function is(checkboxId) |
||||
{ |
||||
return $('#'+checkboxId).is(':checked'); |
||||
} |
||||
|
||||
function render(results) |
||||
{ |
||||
$('#output').text(JSON.stringify(results, undefined, 2)); |
||||
} |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue