akira
/
PapaParse
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

First pages commit

pull/89/head
Matthew Holt 11 years ago
commit
1ccd95b6d6
9 changed files with 2969 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      CNAME
  2. 581
      docs.html
  3. BIN
      favicon.ico
  4. 241
      index.html
  5. 289
      resources/css/style.css
  6. 1536
      resources/css/unsemantic.css
  7. BIN
      resources/images/favicon.png
  8. 4
      resources/js/jquery2-0-2.min.js
  9. 317
      resources/js/main.js

1
CNAME
Unescape View File

@ -0,0 +1 @@
papaparse.com

581
docs.html
Unescape View File

@ -0,0 +1,581 @@
<!DOCTYPE html>
<html>
<head>
<title>Documentation - Papa Parse</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200,400,600,800|Arvo">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
<link rel="stylesheet" href="resources/css/unsemantic.css">
<link rel="stylesheet" href="resources/css/style.css">
<link rel="icon" class="favicon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" class="favicon" href="favicon.ico" type="image/vnd.microsoft.icon">
<script src="resources/js/jquery2-0-2.min.js"></script>
<script src="https://raw.githack.com/mholt/jquery.parse/master/jquery.parse.min.js"></script>
<script src="resources/js/main.js"></script>
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
</head>
<body>
<div class="grid-container">
<div class="grid-100">
<p class="text-center" style="padding-bottom: 0; margin-bottom: -20px;">
<a href="index.html">Back to Home</a>
</p>
<h1>Papa Parse</h1>
<br>
<h2 style="text-transform: uppercase; font-size: 22px;">Documentation</h2>
<hr>
<h2 id="strings">Parsing strings</h2>
<p class="text-center">
<code>$.parse(inputString<i>[, <a href="#config">config</a>]</i>)</code>
<br><br>
Returns a <a href="#results">parse results</a> object.
</p>
<hr>
</div>
<div class="grid-50">
<h3>Examples</h3>
<p>
With default settings:
</p>
<code class="block">var results = $.parse(csvString);</code>
<p>
With custom <a href="#config">config</a>:
</p>
<code class="block">var results = $.parse(csvString, {
delimiter: "\t",
header: false,
dynamicTyping: false,
preview: 10,
step: function(data, file, inputElem) {
console.log(data.results);
}
});</code>
</div>
<div class="grid-50">
<h3>Notes</h3>
<ul>
<li>Parsing strings does not utilize jQuery.</li>
<li>This is simply a wrapper over the internal "Parser" function that does the heavy lifting.</li>
<li>If any bad <a href="#config">config settings</a> are passed in, that setting's default will be used instead.</li>
<li>If you specify a <code>step</code> callback, the input will be streamed and <code>step</code> will be executed after each row is parsed.
</ul>
</div>
<div class="clear"></div>
<hr>
<h2 id="files">Parsing files</h2>
<p class="text-center">
<code>$(selector).parse(settings)</code>
<br><br>
Where <i>selector</i> selects file input elements and <i>settings</i> is an object as described below.
</p>
<hr>
<div class="grid-50">
<h3>Example</h3>
<p>
You can parse one or more files from one or more <code>&lt;input type="file"&gt;</code> elements like so, where each property is optional:
</p>
<code class="block">$('input[type=file]').parse({
config: {
// base <a href="#config">config</a> to use for each file
},
before: function(file, inputElem)
{
// executed before parsing each file begins;
// what you return here controls the flow
},
error: function(err, file, inputElem)
{
// executed if an error occurs during loading the file,
// or if the file being iterated is the wrong type,
// or if the input element has no files selected
},
complete: function(results, file, inputElem, event)
{
// executed when parsing each file completes;
// this function receives the parse results
}
});</code>
</div>
<div class="grid-50">
<h3>Notes</h3>
<ul>
<li>
<code><b>config</b></code> should be a <a href="#config">config object</a> as described below.
</li>
<li>
<code><b>before</b></code> is an optional callback that lets you inspect each file before parsing begins. Return:
<ul>
<li><code>"skip"</code> to skip parsing just that file.</li>
<li><code>false</code> to abort parsing this and all other files in the queue.</li>
<li>a config object to alter the options for parsing that file only</li>
<li>anything else, including <code>undefined</code>, to continue without any changes</li>
</ul>
</li>
<li>
<code><b>error</b></code> is executed when there is a problem getting the file ready to parse. (Parse errors are <i>not</i> reported here.) It receives an object that implements the <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMError">DOMError</a> interface, the File object at hand, and the &lt;input&gt; element from which the file was selected. Errors can occur before reading the file if:
<ul>
<li>the HTML file input element has no files chosen</li>
<li>the file is not a "text" type (e.g. "text/csv" or "text/plain")</li>
<li>a user-defined callback function ("before" aborted the process</li>
</ul>
Otherwise, errors are invoked by FileReader when opening the file.
</li>
<li>
<code><b>complete</b></code> is invoked when parsing a file completes. It receives the results of the parse (including parse errors), the File object, the &lt;input&gt; element from which the file was chosen, and the FileReader-generated event.
</li>
<li>
Read about <a href="#streaming">streaming</a> for large files.
</li>
</ul>
</div>
<div class="clear"></div>
<hr>
<h2 id="config">The config object</h2>
<p class="text-center">
Use a config object to specify the parser's behavior.
</p>
<hr>
<div class="grid-50">
<p>
Any time you invoke the parser, you may customize its behavior using a "config" object. It supports these properties:
</p>
<ul>
<li>
<code><b>delimiter</b></code> The delimiting character. Leave blank to auto-detect. If you specify a delimiter, it must be a string of length 1, and cannot be <code>\n</code>, <code>\r</code>, or <code>"</code>.
</li>
<li>
<code><b>header</b></code> If true, the first row of parsed data will be interpreted as column titles (fields). Fields are returned separately from the rows, and each data point will be keyed to its field name. If false, the parser simply returns an array of arrays, including the first row.
</li>
<li>
<code><b>dynamicTyping</b></code> If true, fields that are only numeric will be converted to a number type. If false, each parsed datum is returned as a string.
</li>
<li>
<code><b>preview</b></code> If preview &gt; 0, only that many rows will be parsed.
</li>
<li>
<code><b>step</b></code> To use a stream, <a href="#step">define a callback function</a> here which receives the data, row-by-row, as each row is parsed. If parsing a file, step also receives the source file and file input element. Return <code>false</code> to abort the process.
</li>
</ul>
</div>
<div class="grid-50">
<h3>Default config object</h3>
<br>
<code class="block">{
delimiter: "",
header: true,
dynamicTyping: true,
preview: 0,
step: undefined
}</code>
<br>
<h3>Notes</h3>
<ul>
<li>If using a header row, duplicate field names would be problematic.</li>
<li>Dynamic typing comes at a slight performance hit, only noticable for large files. If you don't need it, disable it.</li>
<li>Step through results by defining a "step" callback function that receives data from the parser after each row is parsed.</li>
</ul>
</div>
<div class="clear"></div>
<hr>
<h2 id="results">Parse results (output)</h2>
<hr>
<div class="grid-50">
<h3>Structure</h3>
<p>
Parse output is always an object like this:
</p>
<code class="block">{
results: // parse results
errors: // parse <a href="#errors">errors</a>, keyed by row
}</code>
</div>
<div class="grid-50">
<h3>Notes</h3>
<ul>
<li>
<code>results</code> will be an array of arrays if header row is <i>disabled</i>, or an array of objects if header row is <i>enabled</i>.
</li>
<li>
If no delimiter is specified and a delimiter cannot be auto-detected, an error keyed by "config" will be produced and a default delimiter will be chosen.
</li>
<li>
With a header row, the field count must be the same on each row or a FieldMismatch error will be produced for that row. (Without a header row, lines can have variable number of fields without errors.)
</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-50">
<h3 id="example1">Example 1</h3>
<p>
With default config (header row and dynamic typing <b>enabled</b>):
</p>
<code class="block limit-height">{
"results": {
"fields": [
"Item",
"SKU",
"Cost",
"Quantity"
],
"rows": [
{
"Item": "Book",
"SKU": "ABC1234",
"Cost": 10.95,
"Quantity": 4
},
{
"Item": "Movie",
"SKU": "DEF5678",
"Cost": 29.99,
"Quantity": 3
}
]
},
"errors": {
"length": 0
}
}</code>
</div>
<div class="grid-45">
<ul>
<li>
With a header row, field names are returned as an array, separate from the rows of actual data which are returned as an array of objects. The values are keyed to their field names, which is much easier to work with than index positions.
</li>
<li>
Using the header row can degrade performance with really large inputs.
</li>
<li>
Notice how dynamic typing turned numeric values into Number types. This also comes at a slight performance hit (you'd only notice with really big inputs).
</li>
<li>
Because header row is enabled, errors will be raised for each row that has a different field count from the first (header) row.
</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-50">
<h3>Example 2</h3>
<p>
With header row and dynamic typing <b>disabled</b>:
</p>
<code class="block limit-height">{
"results": [
[
"Item",
"SKU",
"Cost",
"Quantity"
],
[
"Book",
"ABC1234",
"10.95",
"4"
],
[
"Movie",
"DEF5678",
"29.99",
"3"
]
],
"errors": {
"length": 0
}
}</code>
</div>
<div class="grid-50">
<ul>
<li>
The results are returned as an array of arrays because the header row is disabled. You'll have to use plain ol' non-descript index positions to access the values.
</li>
<li>
Mismatching field counts will not produce <a href="#errors">errors</a> without a header row.
</li>
<li>
This is a fast configuration. With header row and dynamic typing disabled, you should see faster performance for large inputs.
</li>
</ul>
</div>
<div class="clear"></div>
<hr>
<h2 id="errors">Parse errors</h2>
<hr>
<div class="grid-50">
<h3>Structure</h3>
<p>
Parse errors are returned in this format, keyed by the row number, alongside the "length" property (shown above) which is included for convenience:
</p>
<code class="block">{
type: "", // A generalization of the error
code: "", // Standardized error code
message: "", // Human-readable details
line: 0, // Line of original input
row: 0, // Row index of parsed data where error is
index: 0 // Character index within original input
}</code>
</div>
<div class="grid-45">
<h3>Notes</h3>
<ul>
<li>
If no delimiter is specified and a delimiter cannot be auto-detected, an error keyed by "config" will be produced and a default delimiter will be chosen.
</li>
<li>
With a header row, the field count must be the same on each row or a FieldMismatch error will be produced for that row. (Without a header row, lines can have variable number of fields without errors.)
</li>
<li>
The <code>type</code> will be one of "Abort", "Quotes", "Delimiter", or "FieldMismatch".
</li>
<li>
The <code>code</code> may be:
<ul>
<li>ParseAbort</li>
<li>MissingQuotes</li>
<li>UnexpectedQuotes</li>
<li>UndetectableDelimiter</li>
<li>TooFewFields</li>
<li>TooManyFields</li>
</ul>
</li>
<li>
The <code>index</code> will be the character index across the entire input where the error occurred; it is <i>not</i> the index of the offending character on that <i>line</i>.
</li>
<li>
In the event of an error, the Parser makes its best attempt to continue parsing as correctly as possible. For example, if a header row is used and extra fields are found on a line, they will be put into an array keyed by the field name "__parsed_extra".
</li>
</ul>
</div>
<div class="clear"></div>
<hr>
<h2 id="streaming">Streaming files</h2>
<p class="text-center">
Papa can load and parse very large files by using streams.
</p>
<hr>
<div class="grid-60 prefix-20 suffix-20">
<h3>Can Papa load and parse huge text files?</h3>
<p>
Yes. By defining a <a href="#step">step</a> callback function, you're able to receive parsed results, row-by-row, as the data is collected. This dramatically reduces memory usage and prevents browsers from crashing.
</p>
<h3>What is a stream and when should I stream files?</h3>
<p>
A stream is a unique data structure which, given infinite time, gives you infinite space.
So if you're short on memory (as client computers often are), use a stream.
</p>
<h3>Wait, does that mean streaming takes more time?</h3>
<p>
Yes and no. Typically, when we gain speed, we pay with space. The opposite is true, too. Streaming uses significantly less memory with large inputs, but since the reading happens in chunks and results are processed at each row instead of at the very end, yes, it can be slower.
</p>
<p>
But consider the alternative: upload the file to a remote server, open and process it there using a (hopefully) fast and accurate parser, then compress it and have the client download the results. How long does it take you to upload a 500 MB or 1 GB file? Then consider that the server still has to open the file and read its contents, which is what the client would have done minutes ago. The server might parse it faster with natively-compiled binaries, but only if its resources are dedicated to the task and isn't already parsing files for many other users.
</p>
<p>
So unless your clients have <a href="http://google.com/fiber">a fiber line</a> and you have a scalable cloud application, local parsing by streaming is nearly guaranteed to be faster.
</p>
<h3 id="step">How do I use the <code>step</code> function?</h3>
<p>
Simple example:
<code class="block">$('input[type=file]').parse({
config: {
step: function(data, file, inputElem) {
console.log("Row data:", data.results);
console.log("Row errors:", data.errors);
}
}
complete: function() {
console.log("All done!");
}
});</code>
Notice that the function only receives data, which has the same structure as the <a href="#results">output described above</a>.
</p>
<h3>How do I get all the results together after streaming?</h3>
<p>
You don't. Unless you assemble it manually. And really, don't do that... it defeats the purpose of using a stream. Just take the bits you need as they come through.
</p>
<h3>How big should a file be before streaming it?</h3>
<p>
In some very unscientific testing (with the fastest 2013 Macbook Pro), we were able to load files of about 250 MB for parsing in Chrome without crashing the tab. Beyond that, Chrome started to choke. Actual performance may vary widely. But keep in mind that file size may not be the only factor for choosing to stream.
</p>
<h3>Why <i>wouldn't</i> I stream the input?</h3>
<p>
Getting parsed results one row at a time is usually less convenient to work with; it's hard to see the big picture. (But the big picture might be <i>really</i> big.) As results stream in, you can tabulate stats or keep track of whatever you need to, but you wouldn't want to reassemble all the data...
</p>
<h3>Why should I stream large files, even if they fit in memory?</h3>
<p>
The space required by the parsed results is often much larger than that of the original input file. The convenience of Javascript objects afforded by 64-bit pointers (to make each value quickly accessible) takes up a lot more space than globbing it together like a file does (at the cost of accessibility). In other words, the output may not fit in memory even if the input does.
</p>
<h3>Can I stream text without using a file?</h3>
<p>
Yes, though that's often not necessary. Input that comfortably fits in a textarea usually is small enough that it doesn't need to be streamed.
</p>
<h3>Does Papa use a true stream?</h3>
<p>
Papa uses HTML 5's FileReader API to load files, which uses a stream to read in the data. FileReader doesn't technically allow us to hook into the underlying stream (other than providing occasional progress reports), but it does let us load the file in chunks/blobs. Don't worry about that though, because if you want to stream, you'll still get results, row-by-row, into your <a href="#step">step</a> function.
</p>
</div>
<div class="clear"></div><br>
<hr>
<h2 id="dynamic">Dynamic typing</h2>
<p class="text-center">
Papa can convert numeric values to true numbers for you
</p>
<hr>
<div class="grid-60 prefix-20 suffix-20">
<h3>What is dynamic typing?</h3>
<p>
By default, parsed values are returned as strings. Dynamic typing is a feature built into Papa that converts numeric values to a Number type. When dynamic typing is enabled, parsed values that resemble a number will be converted to one.
</p>
<h3>Do I need dynamic typing?</h3>
<p>
If you're performing mathematical operations on the data, then yes, it'll be very helpful. (You'd probably rather add two numbers than concatenate them, right?)
</p>
<h3>What's the trade-off for using dynamic typing?</h3>
<p>
Performance, as usual. Each parsed value is matched against a regular expression to determine its numerality. You probably won't notice the degraded performance except with very large inputs. Even then, it may not be significantly slower in many cases. But if you absolutely need the best performance possible, turn off dynamic typing (and header row).
</p>
<h3>What kinds of numbers does it recognize?</h3>
<p>
Papa can convert numbers like: 1, -2, 1.23, -4.56, .123, 1., 2., 1.23e4, 5.67E+7, -1.23e4, 5.67e-7, etc.
</p>
<h3>Does whitespace affect dynamic typing?</h3>
<p>
If, for some reason, the data is padded by whitespace, it will be ignored. Within the actual data, however, whitespace is significant. For example, floats represented using scientific notation should not have spaces around the "e" character.
</p>
</div>
<div class="clear"></div>
<hr>
<h2 id="contribute">Contribute</h2>
<p class="text-center">
Help make Papa better
</p>
<hr>
<div class="grid-60 prefix-20 suffix-20">
<h3>How to contribute</h3>
<p>
Please, feel free to <a href="https://github.com/mholt/jquery.parse">fork Papa on GitHub</a> and submit a <a href="https://github.com/mholt/jquery.parse/pulls">pull request</a>. Remember, the Parser component is <a href="https://github.com/mholt/jquery.parse/blob/master/tests.html">under test</a>, so if you're making changes to the actual parsing mechanisms, be sure to add a test case to validate your change.
</p>
<h3>Feedback</h3>
<p>
You can <a href="https://github.com/mholt/jquery.parse/issues?state=open">open an issue</a> on GitHub to ask questions or start discussion, or you can hashtag <a href="https://twitter.com/search?q=%23PapaParse&src=typd&f=realtime">#PapaParse</a> on Twitter.
</p>
</div>
<div class="clear"></div>
<div class="grid-100">
<footer>
<a href="index.html">Papa Parse</a> is brought to you by <a href="https://github.com/mholt/jquery.parse/graphs/contributors">these contributors</a>. Thanks!
</footer>
</div>
</div>
</body>
</html>

BIN
favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

241
index.html
Unescape View File

@ -0,0 +1,241 @@
<!DOCTYPE html>
<html>
<head>
<title>Papa Parse - Powerful CSV parser for Javascript</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:200,400,600,800|Arvo">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
<link rel="stylesheet" href="resources/css/unsemantic.css">
<link rel="stylesheet" href="resources/css/style.css">
<link rel="icon" class="favicon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" class="favicon" href="favicon.ico" type="image/vnd.microsoft.icon">
<script src="resources/js/jquery2-0-2.min.js"></script>
<script src="https://raw.githack.com/mholt/jquery.parse/master/jquery.parse.min.js"></script>
<script src="resources/js/main.js"></script>
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
</head>
<body>
<div class="grid-container">
<div class="grid-100">
<p class="text-center" style="padding-bottom: 0; margin-bottom: -20px;">
Go to: &nbsp;
<a href="#demo">Demo</a>
&nbsp;|&nbsp;
<a href="docs.html">Documentation</a>
</p>
<h1>Papa Parse</h1>
<hr>
<h2>Stop using <code>String.split(',')</code> and let Papa show you how it's done.</h2>
<p class="text-center">
Papa is a powerful jQuery plugin that parses CSV (delimited text) input and can handle large <a href="docs.html#files">files</a> by <a href="docs.html#streaming">streaming</a> them.
</p>
<hr>
</div>
<div class="grid-40">
<h3><a href="docs.html#strings">Parse delimited text strings</a></h3>
<p>
Turn CSV text into arrays or objects with one line of code.
</p>
</div>
<div class="grid-60">
<code class="block">var results = $.parse(csvString);</code>
<br><a href="docs.html">Full documentation</a>
</div>
<div class="clear"></div>
<div class="grid-40">
<h3><a href="docs.html#files">Parse CSV/delimited files</a></h3>
<p>
Papa's good at guessing delimiters and dealing with large files, even multiple files at once.
</p>
</div>
<div class="grid-60">
<code class="block">$('input[type=file]').parse({
complete: function(data) {
console.log("Parse results:", data.results);
}
});</code>
</div>
<div class="clear"></div>
<div class="grid-40">
<h3>Make your web app better</h3>
<p>
Alleviate privacy concerns and waiting on uploads. Your users would be very happy to know their files don't have to leave their computers.
</p>
</div>
<div class="grid-60">
<ul>
<li>Parses <a href="docs.html#strings">strings</a> and <a href="docs.html#files">local files</a></li>
<li><a href="docs.html#streaming">Streams</a> large files for space efficiency</li>
<li>No servers or uploading necessary</li>
<li>Attempts to recover from malformed delimited text</li>
<li>Graceful, robust <a href="docs.html#errors">error handling</a></li>
</ul>
</div>
<div class="grid-100">
<hr>
<h2 id="demo">See Papa in action</h2>
<p class="text-center">
Try some of these inputs or use your own to see what Papa can do.
</p>
<p class="text-center samples">
<b>Text:</b>
<a href="#demoinput" class="demo-insert" data-demo="basic">Basic</a>
<a href="#demoinput" class="demo-insert" data-demo="header">Header Row</a>
<a href="#demoinput" class="demo-insert" data-demo="numbers">Numbers</a>
<a href="#demoinput" class="demo-insert" data-demo="malformed">Malformed</a>
</p>
<p class="text-center samples">
<b>Files:</b>
<a href="javascript:alert('Link to static file');">Basic</a>
<a href="javascript:alert('Link to static file');">Header Row</a>
<a href="javascript:alert('Link to static file');">Numbers</a>
<a href="javascript:alert('Link to static file');">Malformed</a>
<a href="javascript:alert('Link to static file');">Big</a>
</p>
<br><br>
</div>
<div class="grid-45">
<h3 class="text-center" id="demoinput">Input</h3>
<br>
<textarea id="input" rows="10" placeholder="Delimited text"></textarea>
<br>
<p class="text-center">&mdash; or &mdash;</p>
<br>
<small><a href="javascript:" id="clearfiles">(clear)</a></small>
&nbsp;
<input type="file" id="file" multiple>
<hr>
<h3 class="text-center">Config</h3>
<br>
<label>Delimiter: <input type="text" id="delim" size="15" maxlength="1" placeholder="(auto-detect)"></label>
&nbsp; <small><a href="javascript:" id="tabdelim">(insert Tab)</a></small>
<br><br>
<label><input type="checkbox" id="header" checked> Input contains header row</label>
<br>
<label><input type="checkbox" id="dyntype" checked> Convert numeric values to numbers &nbsp; <a href="docs.html#dynamic">(more info)</a></label>
<br>
<label><input type="checkbox" id="stream"> Stream &nbsp; <a href="docs.html#streaming">(more info)</a></label>
<p class="text-center">
<br>
<button id="submit">Parse Text</button>
</p>
</div>
<div class="grid-55">
<h3 class="text-center" id="demooutput">Output</h3>
<br>
<div id="status">&lt;-- (Use the controls on the left to try Papa)<br></div>
<br>
<code class="block limit-height" id="output"></code>
</div>
<div class="grid-100">
<hr>
<h2 id="demo">Papa Parse is packed with just the right features</h2>
<p class="text-center">
Papa knows lots of useful tricks.
</p>
<hr>
</div>
<div class="grid-33">
<h3><a href="docs.html#config">Delimiter detection</a></h3>
<p>
Not sure what you're up against? Papa can figure out the delimiting character for you if you don't specify one.
</p>
</div>
<div class="grid-33">
<h3><a href="docs.html#files">Parse local files directly</a></h3>
<p>
Papa can attach to <code>&lt;input type="file"&gt;</code> elements so you can parse them without uploading them to your server or worrying about FileReader boilerplate. Tada!
</p>
</div>
<div class="grid-33">
<h3><a href="docs.html#errors">Gracefully handles errors</a></h3>
<p>
Malformed input is robustly recovered where possible, and errors are grouped by row. Papa never serves up results without an error report.
</p>
</div>
<div class="clear"></div>
<div class="grid-33">
<h3><a href="docs.html#example1">Header row support</a></h3>
<p>
For inputs with a header row, Papa can key values by their field names instead of meaningless index numbers. You'd only notice a performance hit with very large inputs.
</p>
</div>
<div class="grid-33">
<h3><a href="docs.html#streaming">Stream large files</a></h3>
<p>
For large files, stream the parse results to your own callback function, one row at a time. This greatly reduces memory usage. You still get a report of the errors.
</p>
</div>
<div class="grid-33">
<h3><a href="docs.html#dynamic">Dynamic typing</a></h3>
<p>
By default, each value is returned as a string. But Papa can turn numeric data points into numbers. It comes at a slight performance hit, but you'd only notice on large inputs.
</p>
</div>
<div class="clear"></div>
<div class="grid-100">
<hr>
<h2>Who's your Papa?</h2>
<hr>
</div>
<div class="grid-30 suffix-10">
<p>
&bull; <a href="https://github.com/mholt/jquery.parse/blob/master/jquery.parse.min.js">Mini Papa</a> for production use
<br>
&bull; <a href="https://github.com/mholt/jquery.parse/blob/master/jquery.parse.js">Fat Papa</a> for debug and development
</p>
</div>
<div class="grid-60">
<code class="block">&lt;script src="jquery.papaparse.min.js"&gt;&lt;/script&gt;</code>
</div>
<div class="clear"></div>
<div class="grid-100">
<hr>
<h2>Now get started.</h2>
<p class="text-center">
Read <a href="docs.html">the documentation</a> and <a href="https://github.com/mholt/jquery.parse">download Papa</a> for use on your site.
</p>
<hr>
</div>
<div class="grid-100">
<footer>
<a href="index.html">Papa Parse</a> is brought to you by <a href="https://github.com/mholt/jquery.parse/graphs/contributors">these contributors</a>. Thanks!
</footer>
</div>
</div>
</body>
</html>

289
resources/css/style.css
Unescape View File

@ -0,0 +1,289 @@
/* Eric Meyer's Reset CSS v2.0 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
::selection {
background: #D60003;
color: #FFF;
text-shadow: none;
}
::-moz-selection {
background: #D60003;
color: #FFF;
text-shadow: none;
}
html,
body {
color: #333;
font-family: 'Raleway', sans-serif;
height: 100%;
min-height: 100%;
}
textarea,
input[type=text],
input[type=password] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
font-family: 'Liberation Mono', 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;
padding: 5px;
}
textarea {
width: 100%;
resize: vertical;
}
label {
font-size: 13px;
line-height: 1.5em;
white-space: nowrap;
}
b,
strong{
font-weight: bold;
}
i,
em {
font-style: italic;
}
small {
font-size: 12px;
}
code {
font-family: 'Liberation Mono', 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;
font-weight: normal;
background: #EEE;
color: #222;
padding: 5px;
}
code.block {
display: block;
white-space: pre;
line-height: 1.75em;
font-size: 13px;
padding: 10px;
overflow-x: auto;
margin: 15px 0;
}
code.block.limit-height {
max-height: 500px;
}
ul {
margin: 15px 0;
}
ul > li {
list-style: disc;
line-height: 1.5em;
margin: 10px 0 15px 2em;
}
li code {
font-size: 14px;
}
li li {
margin: 5px 0 5px 2em;
}
li li code {
font-size: 12px;
}
h1 {
font: 110px 'Arvo';
color: black;
text-align: center;
margin-top: 25px;
white-space: nowrap;}
h2 {
color: black;
text-align: center;
font-weight: bold;
font-size: 30px;
line-height: 1.5em;
}
h2 code {
font-size: 24px;
}
h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0;
}
hr {
border: none;
clear: both;
margin: 35px 0;
border-bottom: 1px solid #CCC;
}
p {
padding: 10px 0;
font-size: 16px;
line-height: 1.5em;
}
p code {
font-size: 14px;
}
p.text-center code {
font-size: 16px;
}
a {
color: #D60003;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
.samples {
padding: 0;
}
.samples a {
display: inline-block;
margin: 5px;
padding: 5px 10px;
background: #D60003;
color: #FFF;
}
.samples a:hover {
text-decoration: none;
background: #8C0000;
}
.samples b {
font-weight: 800;
}
div.clear {
margin-bottom: 50px;
}
.text-center {
text-align: center;
}
footer {
font-size: 12px;
text-align: center;
margin-top: 20px;
margin-bottom: 50px;
}
#status {
font-size: 12px;
font-family: 'Menlo', 'Courier New', monospace;
color: #CCC;
height: 120px;
overflow-y: auto;
background: #063449;
border-radius: 5px;
padding: 5px;
line-height: 1.2em;
}
#output {
font-size: 10px;
line-height: 1.2em;
margin: 0;
}
button {
transition: all .25s;
border: 1px solid #222;
border-radius: 4px;
font-weight: bold;
font-size: 16px;
cursor: pointer;
outline: none;
padding: 10px 50px;
color: #FFF;
text-decoration: none !important;
text-shadow: 0px -1px 0px rgba(0, 0, 0, .7);
vertical-align: middle;
background: #E20404;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -10px 15px #AA1903;
}
button:hover {
background: #FF0000;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -10px 15px #E20404;
}
button:active {
background: #FF0000;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 10px 15px #E20404;
}
button:disabled {
background: #CCC;
box-shadow: none;
cursor: default;
}
@media (max-width: 1024px) {
h1 {
font-size: 82px;
}
h2 {
font-size: 24px;
}
h2 code {
font-size: 20px;
}
}
@media (max-width: 600px) {
h1 {
font-size: 48px;
}
h2 {
font-size: 22px;
}
h2 code {
font-size: 18px;
}
}

1536
resources/css/unsemantic.css
View File

File diff suppressed because it is too large Load Diff

BIN
resources/images/favicon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

4
resources/js/jquery2-0-2.min.js vendored
View File

File diff suppressed because one or more lines are too long

317
resources/js/main.js
Unescape View File

@ -0,0 +1,317 @@
$(function()
{
// Settings - configure at will
var scrollDuration = 400;
var reallyBig = 1024 * 1024; // 1 MB
var textDemos = {
basic: 'AK,63.588753,-154.493062,Alaska\nAL,32.318231,-86.902298,Alabama\nAR,35.20105,-91.831833,Arkansas\nAZ,34.048928,-111.093731,Arizona\nCA,36.778261,-119.417932,California\nCO,39.550051,-105.782067,Colorado\nCT,41.603221,-73.087749,Connecticut\nDC,38.905985,-77.033418,"District of Columbia"\nDE,38.910832,-75.52767,Delaware\nFL,27.664827,-81.515754,Florida',
header: 'Address,City,State,Zipcode,Name,Phone Number,Group,URL\n1 Crossgates Mall Road,Albany,NY,12203,Apple Store Cross Gates,(518) 869-3192,"Example ""Group"" 1",http://www.apple.com/retail/crossgates/\nDuke Rd & Walden Ave,Buffalo,NY,14225,Apple Store Walden Galleria,(716) 685-2762,Example Group 2,http://www.apple.com/retail/walden/\n630 Old Country Rd.,Garden City,NY,11530,Apple Store Roosevelt Field,(516) 248-3347,Example Group 3,http://www.apple.com/retail/rooseveltfield/\n160 Walt Whitman Rd.,Huntington Station,NY,11746,Apple Store Walt Whitman,(631) 425-1563,Example Group 3,http://www.apple.com/retail/waltwhitman/\n9553 Carousel Center Drive,Syracuse,NY,13290,Apple Store Carousel,(315) 422-8484,Example Group 2,http://www.apple.com/retail/carousel/\n2655 Richmond Ave,Staten Island,NY,10314,Apple Store Staten Island,(718) 477-4180,Example Group 1,http://www.apple.com/retail/statenisland/\n7979 Victor Road,Victor,NY,14564,Apple Store Eastview,(585) 421-3030,Example Group 1,http://www.apple.com/retail/eastview/\n1591 Palisades Center Drive,West Nyack,NY,10994,Apple Store Palisades,(845) 353-6756,Example Group 2,http://www.apple.com/retail/palisades/\n125 Westchester Ave.,White Plains,NY,10601,Apple Store The Westchester,(914) 428-1877,Example Group 3,http://www.apple.com/retail/thewestchester/\n103 Prince Street,New York,NY,10012,Apple Store SoHo,(212) 226-3126,Example Group 2,http://www.apple.com/retail/soho/'
};
var textareaFilename = textareaFilename; // internal use only
// State - don't touch!
var scrolledToDemoOnce = false;
var rowCounts = {}, errCounts = {}, finished = 0, queued = 0;
var start, end;
prepareDemo();
// Smooth in-page scrolling; thanks to css-tricks.com
$('body').on('click', 'a[href^=#]:not([href=#])', function()
{
var isDemoLink = $(this).hasClass('demo-insert');
if (isDemoLink && scrolledToDemoOnce)
return suppress(event);
else if (isDemoLink)
scrolledToDemoOnce = true;
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname)
{
scrollTo(this.hash);
}
}).on('click', 'a[href=#]', function(event) {
$('html, body').animate({
scrollTop: 0
}, scrollDuration);
return suppress(event);
});
function scrollTo(idStr)
{
var target = $(idStr);
target = target.length ? target : $('[name=' + idStr.slice(1) +']');
if (target.length)
{
$('html, body').animate({
scrollTop: target.offset().top - 40
}, scrollDuration);
return suppress(event);
}
}
function prepareDemo()
{
demoHelperBindings();
$('#submit').click(function()
{
var self = $(this);
self.prop('disabled', true);
scrollTo('#demooutput');
if (self.text().indexOf("Text") > -1)
{
// PARSE TEXT
var input = $('#input').val();
rowCounts[textareaFilename] = 0;
errCounts[textareaFilename] = 0;
if (!input)
{
statusErr("** Nothing to parse - please provide input **");
$('#input').focus();
return done(textareaFilename);
}
if (!bigCheck(input))
{
statusErr("** Parsing aborted - recommend streaming large strings **");
return done(textareaFilename);
}
status("Parsing text...");
$('#output').empty();
perfStart();
var data = $.parse(input, userConfig());
perfEnd();
if (is('stream'))
{
var baseMsg = "Finished parsing " + rowCounts[textareaFilename] + " rows of data in <b>" + perfResult() + "</b> with <b>" + errCounts[textareaFilename] + " errors</b>.";
if (errCounts[textareaFilename] == 0)
statusGood("&#10003; " + baseMsg);
else
statusErr("x " + baseMsg);
status("(Only the end of the stream renders below.)");
render(data);
}
else
{
var out = "Finished in <b>" + perfResult() + "</b> with <b>" + data.errors.length + " errors</b>.";
if (data.errors.length == 0)
statusGood("&#10003; " + out);
else
statusErr("x " + out);
render(data);
}
done(textareaFilename);
}
else
{
// PARSE FILE(S)
queued = $('#file')[0].files.length;
$('#file').parse(
{
before: function(file, inputElem)
{
rowCounts[file.name] = 0;
errCounts[file.name] = 0;
if (!bigCheck(file))
return false;
status("Parsing <b>" + file.name + "</b>...");
perfStart();
},
error: function(err, file, elem)
{
finished++;
statusErr("Error loading " + (file ? file.name : "files") + ": " + err.name);
if (finished >= queued || err.name == "AbortError")
done(file ? file.name : file);
},
complete: function(data, file, inputElem, event)
{
perfEnd();
finished++;
$('#output').empty();
var baseMsg = "Parsed <b>" + file.name + "</b> containing <b>" + rowCounts[file.name] + " rows</b> in <b>" + perfResult() + "</b> with <b>" + errCounts[file.name] + " errors</b>.";
if (!is('stream'))
{
if (errCounts[file.name] == 0)
statusGood("&#10003; " + baseMsg);
else
statusErr("x " + baseMsg);
}
else
{
if (errCounts[file.name] == 0)
statusGood("&#10003; " + baseMsg);
else
statusErr("x " + baseMsg);
status("(The results are no longer available because they were streamed.)");
}
render(data);
if (finished == queued)
done(file.name);
},
config: userConfig()
});
}
});
}
function done(filename)
{
$('#submit').prop('disabled', false);
rowCounts[filename] = 0;
errCounts[filename] = 0;
finished = 0;
queued = 0;
status("");
}
function bigCheck(input)
{
if (typeof input === 'string')
{
if (!is('stream') && input.length > reallyBig)
return confirm("Your input string is long and you didn't choose to stream it! Continuing might lock up or crash your browser tab. Are you sure you want to swallow the input whole?");
}
else if (typeof input === "object" && input.size)
{
if (!is('stream') && input.size > reallyBig)
return confirm(input.name + " is a sizable file, and you didn't choose to stream it. Continuing may lock up or crash your browser tab. Are you sure you want to swallow this file whole?");
}
return true;
}
function perfStart()
{
if (window.performance)
start = performance.now();
}
function perfEnd()
{
if (window.performance)
end = performance.now();
}
function perfResult()
{
if (window.performance)
return Math.round(end - start) + " ms";
else
return "(Duration unknown; your browser doesn't support the Performance API.)";
}
function userConfig()
{
return {
delimiter: $('#delim').val(),
header: is('header'),
dynamicTyping: is('dyntype'),
step: is('stream') ? stepFunc : undefined
};
}
function stepFunc(data, file, inputElem)
{
if (!file)
file = { name: textareaFilename };
rowCounts[file.name]++;
errCounts[file.name] += data.errors.length;
}
function is(checkboxId)
{
return $('#'+checkboxId).is(':checked');
}
function output(str)
{
$('#output').text(str);
}
function render(results)
{
output(JSON.stringify(results, undefined, 2));
}
function statusErr(str)
{
status('<span style="color: #FF5656;">' + str + '</span>');
}
function statusGood(str)
{
status('<span style="color: #33DB33;">' + str + '</span>')
}
function status(text)
{
var status = $('#status');
status.append("<br>" + text);
status.scrollTop(status[0].scrollHeight);
}
function demoHelperBindings()
{
$('.demo-insert').click(function()
{
$('#input').val(textDemos[$(this).data('demo')]);
});
$('#tabdelim').click(function()
{
$('#delim').val("\t").change();
});
$('#clearfiles').click(function()
{
$('#file').val("").change();
});
$('#file').change(function()
{
var fileCount = this.files.length;
if (fileCount == 0)
$('#submit').text("Parse Text");
else if (fileCount == 1)
$('#submit').text("Parse File");
else
$('#submit').text("Parse Files");
});
}
});
function suppress(event)
{
if (!event)
return false;
if (event.preventDefault)
event.preventDefault();
if (event.stopPropagation)
event.stopPropagation();
event.cancelBubble = true;
return false;
}
Write Preview
Loading…
Cancel
Save