first commit

This commit is contained in:
root
2026-03-14 09:49:00 +00:00
commit 708ff116e1
1958 changed files with 1718027 additions and 0 deletions

View File

@@ -0,0 +1,50 @@
{
"name": "papaparse",
"main": "papaparse.js",
"homepage": "http://papaparse.com",
"authors": [
"Matthew Holt"
],
"description": "Fast and powerful CSV parser for the browser. Converts CSV->JSON and JSON->CSV. Supports web workers and streaming large files.",
"keywords": [
"csv",
"parse",
"parsing",
"parser",
"delimited",
"text",
"data",
"auto-detect",
"comma",
"tab",
"pipe",
"file",
"filereader",
"stream",
"worker",
"workers",
"ajax",
"thread",
"threading",
"multi-threaded"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"player"
],
"version": "5.4.1",
"_release": "5.4.1",
"_resolution": {
"type": "version",
"tag": "5.4.1",
"commit": "3e7c4bc3e58187f0c4a8f80bd1f02a6722810b45"
},
"_source": "https://github.com/mholt/PapaParse.git",
"_target": "^5.0",
"_originalSource": "papaparse"
}

View File

@@ -0,0 +1,27 @@
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
options: {
compress: {
global_defs: {
'PAPA_BROWSER_CONTEXT': true
},
dead_code: true
},
output: {
comments: 'some',
},
},
min: {
files: {
'papaparse.min.js': ['papaparse.js']
},
},
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('build', ['uglify']);
grunt.registerTask('default', ['uglify']);
};

20
www/bower_components/papaparse/LICENSE vendored Normal file
View File

@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2015 Matthew Holt
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,67 @@
Parse CSV with JavaScript
========================================
Papa Parse is the fastest in-browser CSV (or delimited text) parser for JavaScript. It is reliable and correct according to [RFC 4180](https://tools.ietf.org/html/rfc4180), and it comes with these features:
- Easy to use
- Parse CSV files directly (local or over the network)
- Fast mode
- Stream large files (even via HTTP)
- Reverse parsing (converts JSON to CSV)
- Auto-detect delimiter
- Worker threads to keep your web page reactive
- Header row support
- Pause, resume, abort
- Can convert numbers and booleans to their types
- Optional jQuery integration to get files from `<input type="file">` elements
- One of the only parsers that correctly handles line-breaks and quotations
Papa Parse has **no dependencies** - not even jQuery.
Install
-------
papaparse is available on [npm](https://www.npmjs.com/package/papaparse). It
can be installed with the following command:
npm install papaparse
If you don't want to use npm, [papaparse.min.js](https://unpkg.com/papaparse@latest/papaparse.min.js) can be downloaded to your project source.
Homepage & Demo
----------------
- [Homepage](http://papaparse.com)
- [Demo](http://papaparse.com/demo)
To learn how to use Papa Parse:
- [Documentation](http://papaparse.com/docs)
The website is hosted on [Github Pages](https://pages.github.com/). Its content is also included in the docs folder of this repository. If you want to contribute on it just clone the master of this repository and open a pull request.
Papa Parse for Node
--------------------
Papa Parse can parse a [Readable Stream](https://nodejs.org/api/stream.html#stream_readable_streams) instead of a [File](https://www.w3.org/TR/FileAPI/) when used in Node.js environments (in addition to plain strings). In this mode, `encoding` must, if specified, be a Node-supported character encoding. The `Papa.LocalChunkSize`, `Papa.RemoteChunkSize` , `download`, `withCredentials` and `worker` config options are unavailable.
Papa Parse can also parse in a node streaming style which makes `.pipe` available. Simply pipe the [Readable Stream](https://nodejs.org/api/stream.html#stream_readable_streams) to the stream returned from `Papa.parse(Papa.NODE_STREAM_INPUT, options)`. The `Papa.LocalChunkSize`, `Papa.RemoteChunkSize` , `download`, `withCredentials`, `worker`, `step`, and `complete` config options are unavailable. To register a callback with the stream to process data, use the `data` event like so: `stream.on('data', callback)` and to signal the end of stream, use the 'end' event like so: `stream.on('end', callback)`.
Get Started
-----------
For usage instructions, see the [homepage](http://papaparse.com) and, for more detail, the [documentation](http://papaparse.com/docs).
Tests
-----
Papa Parse is under test. Download this repository, run `npm install`, then `npm test` to run the tests.
Contributing
------------
To discuss a new feature or ask a question, open an issue. To fix a bug, submit a pull request to be credited with the [contributors](https://github.com/mholt/PapaParse/graphs/contributors)! Remember, a pull request, *with test*, is best. You may also discuss on Twitter with [#PapaParse](https://twitter.com/search?q=%23PapaParse&src=typd&f=realtime) or directly to me, [@mholt6](https://twitter.com/mholt6).
If you contribute a patch, ensure the tests suite is running correctly. We run continuous integration on each pull request and will not accept a patch that breaks the tests.

View File

@@ -0,0 +1,40 @@
{
"name": "papaparse",
"main": "papaparse.js",
"homepage": "http://papaparse.com",
"authors": [
"Matthew Holt"
],
"description": "Fast and powerful CSV parser for the browser. Converts CSV->JSON and JSON->CSV. Supports web workers and streaming large files.",
"keywords": [
"csv",
"parse",
"parsing",
"parser",
"delimited",
"text",
"data",
"auto-detect",
"comma",
"tab",
"pipe",
"file",
"filereader",
"stream",
"worker",
"workers",
"ajax",
"thread",
"threading",
"multi-threaded"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"player"
]
}

View File

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

View File

@@ -0,0 +1,2 @@
localhost
ext .html

View File

@@ -0,0 +1,255 @@
<!DOCTYPE html>
<html>
<head>
<title>Demo - Papa Parse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Arvo|Source+Sans+Pro:400,400italic,700|Lato:300,400">
<link rel="stylesheet" href="/resources/css/unsemantic.css">
<link rel="stylesheet" href="/resources/css/common.css">
<link rel="stylesheet" href="/resources/css/demo.css">
<script src="/resources/js/jquery.min.js"></script>
<script src="/resources/js/common.js"></script>
<script src="https://unpkg.com/papaparse@latest/papaparse.min.js"></script>
<script src="/resources/js/demo.js"></script>
</head>
<body>
<main>
<header>
<div class="grid-container">
<div class="grid-40 mobile-grid-50">
<div class="links">
<a href="/demo">
<i class="fa fa-magic fa-lg"></i> Demo
</a>
<a href="/docs">
<i class="fa fa-book fa-lg"></i> Docs
</a>
<a href="/faq">
<i class="fa fa-question fa-lg"></i> FAQ
</a>
</div>
</div>
<div class="grid-20 hide-on-mobile text-center">
<a href="/" class="text-logo">Papa Parse 5</a>
</div>
<div class="grid-40 mobile-grid-50 text-right">
<div class="links">
<a href="https://github.com/mholt/PapaParse">
<i class="fa fa-github fa-lg"></i> GitHub
</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">
<i class="fa fa-stack-overflow fa-lg"></i> Help
</a>
</div>
</div>
</div>
</header>
<h1>Choose a Demo</h1>
<div class="tabs">
<div class="tab active" id="tab-string">String</div>
<div class="tab" id="tab-local">Local File(s)</div>
<div class="tab" id="tab-remote">Remote File</div>
<div class="tab" id="tab-unparse">JSON to CSV</div>
</div>
<div class="grid-container">
<div class="grid-25">
<label>
<input type="checkbox" id="stream"> Stream
<dfn>Results are delivered row by row to a step function. Use with large inputs that would crash the browser.</dfn>
</label>
<label>
<input type="checkbox" id="worker"> Worker thread
<dfn>Uses a separate thread so the web page doesn't lock up.</dfn>
</label>
<label>
<input type="checkbox" id="header"> Header row
<dfn>Keys data by field name rather than an array.</dfn>
</label>
<label>
<input type="checkbox" id="dynamicTyping"> Dynamic typing
<dfn>Turns numeric data into numbers and true/false into booleans.</dfn>
</label>
<label>
<input type="checkbox" id="skipEmptyLines"> Skip empty lines
<dfn>By default, empty lines are parsed; check to skip.</dfn>
</label>
</div>
<div class="grid-75 grid-parent">
<div class="grid-33 push-66">
<label>
Delimiter:<input type="text" size="4" maxlength="1" placeholder="auto" id="delimiter"><a href="javascript:" id="insert-tab">tab</a>
<dfn>The delimiting character. Usually comma or tab. Default is comma.</dfn>
</label>
<label>
Preview:<input type="number" min="0" max="1000" placeholder="0" id="preview">
<dfn>If &gt; 0, stops parsing after this many rows.</dfn>
</label>
<label>
Encoding:<input type="text" id="encoding" placeholder="default" size="7">
<dfn>Only applies when reading local files. Default is specified by the browser (usually UTF-8).</dfn>
</label>
<label>
Comment char:<input type="text" size="7" maxlength="10" placeholder="default" id="comments">
<dfn>If specified, skips lines starting with this string.</dfn>
</label>
</div>
<div class="grid-66 pull-33">
<div class="input-area" id="input-string">
<textarea id="input" placeholder="String input">Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7</textarea>
</div>
<div class="input-area" id="input-local">
<div class="text-center">
Choose one or more delimited text files for Papa to parse.
</div>
<input type="file" id="files" multiple>
Sample files:
<ul>
<li>
<a href="/resources/files/normal.csv" id="local-normal-file">Normal file</a>
</li>
<li>
<a href="/resources/files/big.csv" id="local-large-file">Large file</a>
</li>
<li>
<a href="/resources/files/malformed.tsv" id="local-malformed-file">Malformed file</a>
</li>
</ul>
</div>
<div class="input-area" id="input-remote">
<div class="text-center">
Type the URL of the file to be downloaded and parsed.
<br>
<small>(cross-origin requests require Access-Control-Allow-Origin header)</small>
</div>
<input type="text" id="url" placeholder="URL">
Sample files:
<ul>
<li>
<a href="javascript:" id="remote-normal-file">Normal file</a>
</li>
<li>
<a href="javascript:" id="remote-large-file">Large file</a>
</li>
<li>
<a href="javascript:" id="remote-malformed-file">Malformed file</a>
</li>
</ul>
</div>
<div class="input-area" id="input-unparse">
<textarea id="json" placeholder="JSON string">[
{
"Column 1": "1-1",
"Column 2": "1-2",
"Column 3": "1-3",
"Column 4": "1-4"
},
{
"Column 1": "2-1",
"Column 2": "2-2",
"Column 3": "2-3",
"Column 4": "2-4"
},
{
"Column 1": "3-1",
"Column 2": "3-2",
"Column 3": "3-3",
"Column 4": "3-4"
},
{
"Column 1": 4,
"Column 2": 5,
"Column 3": 6,
"Column 4": 7
}
]</textarea>
</div>
<div class="text-center">
<div class="see-results">
Results will appear in the console of your browser's inspector tools
</div>
<button id="submit" class="green">Parse</button>
</div>
</div>
</div>
</div>
</main>
<footer>
<!--<div class="footer-top">
<h3>Make Your Papa Proud</h3>
<h4><a href="https://github.com/mholt/PapaParse">Star</a> and <a href="https://github.com/mholt/PapaParse/blob/gh-pages/resources/js/lovers.js">shout</a> if you love #PapaParse</h4>
</div>-->
<div class="footer-main">
<div class="grid-container">
<div class="grid-40 text-center">
<div class="logo">P</div>
<br><br>
Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
<br>
&copy; 2013-2019
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Learn</h5>
<a href="/demo">Demo</a>
<a href="/docs">Documentation</a>
<a href="/faq">FAQ</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Project</h5>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=S6VTL9FQ6L8EN&item_name=PapaParse&currency_code=EUR&source=url">Donate</a>
<a href="https://github.com/mholt/PapaParse">GitHub</a>
<a href="https://twitter.com/search?q=%23PapaParse">Share</a>
</div>
<div class="clear hide-on-desktop"></div>
<div class="grid-15 mobile-grid-50 links">
<h5>Download</h5>
<a href="https://github.com/mholt/PapaParse/archive/master.zip">Latest (master)</a>
<hr>
<a href="https://github.com/mholt/PapaParse/blob/master/papaparse.min.js">Lil' Papa</a>
<a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Community</h5>
<a href="https://twitter.com/search?q=%23PapaParse">Twitter</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">Stack Overflow</a>
</div>
</div>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,974 @@
<!DOCTYPE html>
<html>
<head>
<title>Documentation - Papa Parse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Arvo|Source+Sans+Pro:400,400italic,700|Lato:300,400">
<link rel="stylesheet" href="/resources/css/unsemantic.css">
<link rel="stylesheet" href="/resources/css/tomorrow.highlight.css">
<link rel="stylesheet" href="/resources/css/common.css">
<script src="/resources/js/jquery.min.js"></script>
<script src="/resources/js/highlight.min.js"></script>
<script src="/resources/js/common.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<main>
<header>
<div class="grid-container">
<div class="grid-40 mobile-grid-50">
<div class="links">
<a href="/demo">
<i class="fa fa-magic fa-lg"></i> Demo
</a>
<a href="/docs">
<i class="fa fa-book fa-lg"></i> Docs
</a>
<a href="/faq">
<i class="fa fa-question fa-lg"></i> FAQ
</a>
</div>
</div>
<div class="grid-20 hide-on-mobile text-center">
<a href="/" class="text-logo">Papa Parse 5</a>
</div>
<div class="grid-40 mobile-grid-50 text-right">
<div class="links">
<a href="https://github.com/mholt/PapaParse">
<i class="fa fa-github fa-lg"></i> GitHub
</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">
<i class="fa fa-stack-overflow fa-lg"></i> Help
</a>
</div>
</div>
</div>
</header>
<h1>Documentation</h1>
<div class="grid-container">
<div class="prefix-33 grid-33 suffix-33">
<ol>
<li>
<a href="#csv-to-json">Convert CSV to JSON</a>
<ul>
<li><a href="#strings">Parse string</a></li>
<li><a href="#local-files">Parse local file</a></li>
<li><a href="#remote-files">Parse remote file</a></li>
<li><a href="#jquery">Using jQuery to select files</a></li>
</ul>
</li>
<li><a href="#json-to-csv">Convert JSON to CSV</a></li>
<li><a href="#config">Config</a></li>
<li>
<a href="#results">Results</a>
<ul>
<li><a href="#data">Data</a></li>
<li><a href="#errors">Errors</a></li>
<li><a href="#meta">Meta</a></li>
</ul>
</li>
<li><a href="#extras">Extras</a></li>
</ol>
</div>
</div>
<section>
<div class="grid-container">
<div class="grid-100">
<h4 id="csv-to-json">Convert CSV to JSON</h4>
<p>
Delimited data can be parsed out of strings or files. Files that are parsed can be local or remote. Local files are opened with FileReader, and remote files are downloaded with XMLHttpRequest.
</p>
</div>
<div class="grid-100">
<h5 id="strings">Parse string</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">Papa.parse(csvString<i>[, <a href="#config">config</a>]</i>)</code></pre>
</div>
<div class="grid-50">
<ul>
<li><code>csvString</code> is a string of delimited text to be parsed.</li>
<li><code>config</code> is an optional <a href="#config">config object</a>.</li>
<li>Returns a <a href="#results">parse results</a> object (if not streaming or using worker).</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="local-files">Parse local files</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">Papa.parse(file, <a href="#config">config</a>)</code></pre>
</div>
<div class="grid-50">
<ul>
<li><code>file</code> is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File</a> object obtained from the DOM.</li>
<li><code>config</code> is a <a href="#config">config object</a> which contains a callback.</li>
<li>Doesn't return anything. Results are provided asynchronously to a callback function.</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="remote-files">Parse remote file</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">Papa.parse(url, {
download: true,
// rest of config ...
})</code></pre>
</div>
<div class="grid-50">
<ul>
<li><code>url</code> is the path or URL to the file to download.</li>
<li>The second argument is a <a href="#config">config object</a> where <code>download: true</code> is set.</li>
<li>Doesn't return anything. Results are provided asynchronously to a callback function.</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="jquery">Using jQuery to select files</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">$('input[type=file]').parse({
config: {
<span class="comment">// base <a href="#config">config</a> to use for each file</span>
},
before: function(file, inputElem)
{
<span class="comment">// executed before parsing each file begins;
// what you return here controls the flow</span>
},
error: function(err, file, inputElem, reason)
{
<span class="comment">// executed if an error occurs while loading the file,
// or if before callback aborted for some reason</span>
},
complete: function()
{
<span class="comment">// executed after all files are complete</span>
}
});</code></pre>
</div>
<div class="grid-50">
<ul>
<li>Select the file input elements with files you want to parse.</li>
<li>
<code>before</code> is an optional callback that lets you inspect each file before parsing begins. Return an object like:
<pre><code class="language-javascript">{
action: "abort",
reason: "Some reason",
config: <span class="comment">// altered config...</span>
}</code></pre>
to alter the flow of parsing. Actions can be <code>"abort"</code> to skip this and all other files in the queue, <code>"skip"</code> to skip just this file, or <code>"continue"</code> to carry on (equivalent to returning nothing). <code>reason</code> can be a reason for aborting. <code>config</code> can be a modified <a href="#config">configuration</a> for parsing just this file.
</li>
<li>The <code>complete</code> callback shown here is executed after <i>all</i> files are finished and does not receive any data. Use the complete callback in <a href="#config">config</a> for per-file results.</li>
</ul>
</div>
<div class="clear"></div>
</div>
</section>
<section>
<div class="grid-container">
<div class="grid-100">
<h4 id="json-to-csv">Convert JSON to CSV</h4>
<p>
Papa's <code>unparse</code> utility writes out correct delimited text strings given an array of arrays or an array of objects.
</p>
</div>
<div class="grid-100">
<h5 id="unparse">Unparse</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">Papa.unparse(data<i>[, <a href="#unparse-config-default">config</a>]</i>)</code></pre>
</div>
<div class="grid-50">
<ul>
<li>Returns the resulting delimited text as a string.</li>
<li>
<code>data</code> can be one of:
<ul>
<li>An array of arrays</li>
<li>An array of objects</li>
<li>An object explicitly defining <code>fields</code> and <code>data</code></li>
</ul>
</li>
<li>
<code>config</code> is an optional <a href="#unparse-config-default">config object</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="unparse-config-default">Default Unparse Config with all options</h5>
</div>
<div class="prefix-25 grid-50 suffix-25">
<pre><code class="language-javascript">
{
quotes: false, //or array of booleans
quoteChar: '"',
escapeChar: '"',
delimiter: ",",
header: true,
newline: "\r\n",
skipEmptyLines: false, //other option is 'greedy', meaning skip delimiters, quotes, and whitespace.
columns: null //or array of strings
}
</code></pre>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5>Unparse Config Options</h5>
</div>
<div class="grid-100" style="overflow-x: auto;">
<table>
<tr>
<th style="width: 20%;">Option</th>
<th style="width: 80%;">Explanation</th>
</tr>
<tr>
<td>
<code>quotes</code>
</td>
<td>
If <code>true</code>, forces all fields to be enclosed in quotes. If an array of <code>true/false</code> values, specifies which fields should be force-quoted (first boolean is for the first column, second boolean for the second column, ...). A function that returns a boolean values can be used to determine the quotes value of a cell. This function accepts the cell value and column index as parameters. <br />
Note that this option is ignored for <code>undefined</code>, <code>null</code> and <code>date-object</code> values. The option <code>escapeFormulae</code> also takes precedence over this.
</td>
</tr>
<tr>
<td><code>quoteChar</code></td>
<td>
The character used to quote fields.
</td>
</tr>
<tr>
<td><code>escapeChar</code></td>
<td>
The character used to escape <code>quoteChar</code> inside field values.
</td>
</tr>
<tr>
<td>
<code>delimiter</code>
</td>
<td>
The delimiting character. Multi-character delimiters are supported. It must not be found in <a href="#readonly">Papa.BAD_DELIMITERS</a>.
</td>
</tr>
<tr>
<td>
<code>header</code>
</td>
<td>
If <code>false</code>, will omit the header row. If <code>data</code> is an array of arrays this option is ignored. If <code>data</code> is an array of objects the keys of the first object are the header row. If <code>data</code> is an object with the keys <code>fields</code> and <code>data</code> the <code>fields</code> are the header row.
</td>
</tr>
<tr>
<td>
<code>newline</code>
</td>
<td>
The character used to determine newline sequence. It defaults to <code>"\r\n"</code>.
</td>
</tr>
<tr>
<td>
<code>skipEmptyLines</code>
</td>
<td>
If <code>true</code>, lines that are completely empty (those which evaluate to an empty string) will be skipped. If set to <code>'greedy'</code>, lines that don't have any content (those which have only whitespace after parsing) will also be skipped.
</td>
</tr>
<tr>
<td>
<code>columns</code>
</td>
<td>
If <code>data</code> is an array of objects this option can be used to manually specify the keys (columns) you expect in the objects. If not set the keys of the first objects are used as column.
</td>
</tr>
<tr>
<td>
<code>escapeFormulae</code>
</td>
<td>
If <code>true</code>, field values that begin with <code>=</code>, <code>+</code>, <code>-</code>, <code>@</code>, <code>\t</code>, or <code>\r</code>, will be prepended with a <code>'</code> to defend against <a href="https://owasp.org/www-community/attacks/CSV_Injection" target="_blank" rel="noopener">injection attacks</a>, because Excel and LibreOffice will automatically parse such cells as formulae. You can override those values by setting this option to a regular expression
</td>
</tr>
</table>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="unparse-examples">Examples</h5>
</div>
<div class="grid-33">
<pre><code class="language-javascript">// Two-line, comma-delimited file
var csv = Papa.unparse([
["1-1", "1-2", "1-3"],
["2-1", "2-2", "2-3"]
]);</code></pre>
</div>
<div class="grid-33">
<pre><code class="language-javascript">// With implicit header row
// (keys of first object populate header row)
var csv = Papa.unparse([
{
"Column 1": "foo",
"Column 2": "bar"
},
{
"Column 1": "abc",
"Column 2": "def"
}
]);</code></pre>
</div>
<div class="grid-33">
<pre><code class="language-javascript">// Specifying fields and data explicitly
var csv = Papa.unparse({
"fields": ["Column 1", "Column 2"],
"data": [
["foo", "bar"],
["abc", "def"]
]
});</code></pre>
</div>
<div class="clear"></div>
</div>
</section>
<section>
<div class="grid-container">
<div class="grid-100">
<h4 id="config">The Parse Config Object</h4>
<p>
The <code>parse</code> function may be passed a configuration object. It defines settings, behavior, and callbacks used during parsing. Any properties left unspecified will resort to their default values.
</p>
</div>
<div class="grid-100">
<h5 id="config-default">Default Config With All Options</h5>
</div>
<div class="prefix-25 grid-50 suffix-25">
<pre><code class="language-javascript">{
delimiter: "", // auto-detect
newline: "", // auto-detect
quoteChar: '"',
escapeChar: '"',
header: false,
transformHeader: undefined,
dynamicTyping: false,
preview: 0,
encoding: "",
worker: false,
comments: false,
step: undefined,
complete: undefined,
error: undefined,
download: false,
downloadRequestHeaders: undefined,
downloadRequestBody: undefined,
skipEmptyLines: false,
chunk: undefined,
chunkSize: undefined,
fastMode: undefined,
beforeFirstChunk: undefined,
withCredentials: undefined,
transform: undefined,
delimitersToGuess: [',', '\t', '|', ';', <a href="#readonly">Papa.RECORD_SEP</a>, <a href="#readonly">Papa.UNIT_SEP</a>]
}</code></pre>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="config-details">Config Options</h5>
</div>
<div class="grid-100" style="overflow-x: auto;">
<table>
<tr>
<th style="width: 20%;">Option</th>
<th style="width: 80%;">Explanation</th>
</tr>
<tr>
<td>
<code>delimiter</code>
</td>
<td>
The delimiting character. Leave blank to auto-detect from a list of most common delimiters, or any values passed in through <code>delimitersToGuess</code>. It can be a string or a function. If a string, it can be of any length (so multi-character delimiters are supported). If a function, it must accept the input as first parameter and it must return a string which will be used as delimiter. In both cases it cannot be found in <a href="#readonly">Papa.BAD_DELIMITERS</a>.
</td>
</tr>
<tr>
<td>
<code>newline</code>
</td>
<td>
The newline sequence. Leave blank to auto-detect. Must be one of \r, \n, or \r\n.
</td>
</tr>
<tr>
<td>
<code>quoteChar</code>
</td>
<td>
The character used to quote fields. The quoting of all fields is not mandatory. Any field which is not quoted will correctly read.
</td>
</tr>
<tr>
<td>
<code>escapeChar</code>
</td>
<td>
The character used to escape the quote character within a field. If not set, this option will default to the value of <code>quoteChar</code>, meaning that the default escaping of quote character within a quoted field is using the quote character two times. (e.g. <code>"column with ""quotes"" in text"</code>)
</td>
</tr>
<tr>
<td>
<code>header</code>
</td>
<td>
If true, the first row of parsed data will be interpreted as field names. An array of field names will be returned in <a href="#meta">meta</a>, and each row of data will be an object of values keyed by field name instead of a simple array. Rows with a different number of fields from the header row will produce an error. Warning: Duplicate field names will overwrite values in previous fields having the same name.
</td>
</tr>
<tr>
<td>
<code>transformHeader</code>
</td>
<td>
A function to apply on each header. Requires <code>header</code> to be <code>true</code>. The function receives the header as its first argument and the index as second.<br>
Only available starting with version 5.0.
</td>
</tr>
<tr>
<td>
<code>dynamicTyping</code>
</td>
<td>
If true, numeric and boolean data will be converted to their type instead of remaining strings. Numeric data must conform to the definition of a decimal literal. Numerical values greater than <code>2^53</code> or less than <code>-2^53</code> will not be converted to numbers to preserve precision. European-formatted numbers must have commas and dots swapped. If also accepts an object or a function. If object it's values should be a boolean to indicate if dynamic typing should be applied for each column number (or header name if using headers). If it's a function, it should return a boolean value for each field number (or name if using headers) which will be passed as first argument.
</td>
</tr>
<tr>
<td>
<code>preview</code>
</td>
<td>
If &gt; 0, only that many rows will be parsed.
</td>
</tr>
<tr>
<td>
<code>encoding</code>
</td>
<td>
The encoding to use when opening local files. If specified, it must be a value supported by the FileReader API.
</td>
</tr>
<tr>
<td>
<code>worker</code>
</td>
<td>
Whether or not to use a <a href="/faq#workers">worker thread</a>. Using a worker will keep your page reactive, but may be slightly slower.
</td>
</tr>
<tr>
<td>
<code>comments</code>
</td>
<td>
A string that indicates a comment (for example, "#" or "//"). When Papa encounters a line starting with this string, it will skip the line.
</td>
</tr>
<tr>
<td>
<code>step</code>
</td>
<td>
To <a href="/faq#streaming">stream</a> the input, define a callback function:
<pre><code class="language-javascript">step: function(<a href="#results">results</a>, parser) {
console.log("Row data:", results.data);
console.log("Row errors:", results.errors);
}</code></pre>
Streaming is necessary for large files which would otherwise crash the browser. You can call <code>parser.abort()</code> to abort parsing. And, except when using a <a href="/faq#worker">Web Worker</a>, you can call <code>parser.pause()</code> to pause it, and <code>parser.resume()</code> to resume.
</td>
</tr>
<tr>
<td>
<code>complete</code>
</td>
<td>
The callback to execute when parsing is complete. It receives the parse <a href="#results">results</a>. If parsing a local file, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File</a> is passed in, too:
<pre><code class="language-javascript">complete: function(results, file) {
console.log("Parsing complete:", results, file);
}</code></pre>
When streaming, parse results are <i>not</i> available in this callback.
</td>
</tr>
<tr>
<td>
<code>error</code>
</td>
<td>
A callback to execute if FileReader encounters an error. The function is passed two arguments: the error and the File.
</td>
</tr>
<tr>
<td>
<code>download</code>
</td>
<td>
If true, this indicates that the string you passed as the first argument to <code>parse()</code> is actually a URL from which to download a file and parse its contents.
</td>
</tr>
<tr>
<td>
<code>downloadRequestHeaders</code>
</td>
<td>
If defined, should be an object that describes the headers, example:
<pre>
<code class="language-javascript">downloadRequestHeaders: {
'Authorization': 'token 123345678901234567890',
}</code>
</pre>
</tr>
<tr>
<td>
<code>downloadRequestBody</code>
</td>
<td>
Use POST request on the URL of the download option. The value passed will be set as the body of the request.
</td>
</tr>
<tr>
<td>
<code>skipEmptyLines</code>
</td>
<td>
If true, lines that are completely empty (those which evaluate to an empty string) will be skipped. If set to <code>'greedy'</code>, lines that don't have any content (those which have only whitespace after parsing) will also be skipped.
</td>
</tr>
<tr>
<td>
<code>chunk</code>
</td>
<td>
A callback function, identical to step, which activates streaming. However, this function is executed after every <i>chunk</i> of the file is loaded and parsed rather than every row. Works only with local and remote files. Do not use both chunk and step callbacks together. For the function signature, see the documentation for the step function.
</td>
</tr>
<tr>
<td>
<code>chunkSize</code>
</td>
<td>
Overrides <code>Papa.LocalChunkSize</code> and <code>Papa.RemoteChunkSize</code>. See <a href="#configurable">configurable</a> section to know the usage of both parameters.
</td>
</tr>
<tr>
<td>
<code>fastMode</code>
</td>
<td>
Fast mode speeds up parsing significantly for large inputs. However, it only works when the input has no quoted fields. Fast mode will automatically be enabled if no <code>"</code> characters appear in the input. You can force fast mode either way by setting it to <code>true</code> or <code>false</code>.
</td>
</tr>
<tr>
<td>
<code>beforeFirstChunk</code>
</td>
<td>
A function to execute before parsing the first chunk. Can be used with chunk or step streaming modes. The function receives as an argument the chunk about to be parsed, and it may return a modified chunk to parse. This is useful for stripping header lines (as long as the header fits in a single chunk).
</td>
</tr>
<tr>
<td>
<code>withCredentials</code>
</td>
<td>
A boolean value passed directly into XMLHttpRequest's "withCredentials" property.
</td>
</tr>
<tr>
<td>
<code>transform</code>
</td>
<td>
A function to apply on each value. The function receives the value as its first argument and the column number or header name when enabled as its second argument. The return value of the function will replace the value it received. The transform function is applied before dynamicTyping.
</td>
</tr>
<tr>
<td>
<code>delimitersToGuess</code>
</td>
<td>
An array of delimiters to guess from if the <code>delimiter</code> option is not set.
</td>
</tr>
</table>
</div>
</div>
</section>
<section>
<div class="grid-container">
<div class="grid-100">
<h4 id="results">The Parse Result Object</h4>
<p>
A parse result always contains three objects: data, errors, and meta. Data and errors are arrays, and meta is an object. In the step callback, the data array will only contain one element.
</p>
</div>
<div class="grid-100">
<h5 id="results-structure">Result Structure</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">{
data: // array of parsed data
errors: // array of errors
meta: // object with extra info
}</code></pre>
</div>
<div class="grid-50">
<ul>
<li><code>data</code> is an array of rows. If header is false, rows are arrays; otherwise they are objects of data keyed by the field name.</li>
<li><code>errors</code> is an array of <a href="#errors">errors</a>.</li>
<li><code>meta</code> contains extra information about the parse, such as delimiter used, the newline sequence, whether the process was aborted, etc. Properties in this object are not guaranteed to exist in all situations.</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="data">Data</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">// Example (header: false)
[
["Column 1", "Column 2"],
["foo", "bar"],
["abc", "def"]
]
// Example (header: true)
[
{
"Column 1": "foo",
"Column 2": "bar"
},
{
"Column 1": "abc",
"Column 2": "def"
}
]</code></pre>
</div>
<div class="grid-50">
<ul>
<li>If header row is enabled and more fields are found on a row of data than in the header row, an extra field will appear in that row called <code>__parsed_extra</code>. It contains an array of all data parsed from that row that extended beyond the header row.</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="errors">Errors</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">// Error structure
{
type: "", // A generalization of the error
code: "", // Standardized error code
message: "", // Human-readable details
row: 0, // Row index of parsed data where error is
<!--index: 0 // Character index within original input-->
}</code></pre>
</div>
<div class="grid-50">
<ul>
<li>The error <code>type</code> will be one of "Quotes", "Delimiter", or "FieldMismatch".</li>
<li>The <code>code</code> may be "MissingQuotes", "UndetectableDelimiter", "TooFewFields", or "TooManyFields" (depending on the error type).</li>
<!--<li><code>index</code> may not be available on all error messages because some errors are only generated after parsing is already complete.</li>-->
<li>Just because errors are generated does not necessarily mean that parsing failed. The worst error you can get is probably MissingQuotes.</li>
</ul>
</div>
<div class="clear"></div>
<div class="grid-100">
<h5 id="meta">Meta</h5>
</div>
<div class="grid-50">
<pre><code class="language-javascript">{
delimiter: // Delimiter used
linebreak: // Line break sequence used
aborted: // Whether process was aborted
fields: // Array of field names
truncated: // Whether preview consumed all input
}</code></pre>
</div>
<div class="grid-50">
<ul>
<li>Not all meta properties will always be available. For instance, <code>fields</code> is only given when header row is enabled.</li>
</ul>
</div>
<div class="clear"></div>
</div>
</section>
<section style="border-bottom: 0; padding-bottom: 0;">
<div class="grid-container">
<div class="grid-100">
<h4 id="extras">Extras</h4>
<p>
There's a few other things that Papa exposes to you that weren't explained above.
</p>
</div>
<div class="grid-100">
<h5 id="readonly">Read-Only</h5>
</div>
<div class="grid-100">
<table>
<tr>
<th>Read-Only Property</th>
<th>Explanation</th>
</tr>
<tr>
<td><code>Papa.BAD_DELIMITERS</code></td>
<td>
An array of characters that are not allowed as delimiters (<code>\r, \n, ", \ufeff</code>).
</td>
</tr>
<tr>
<td><code>Papa.RECORD_SEP</code></td>
<td>
The true delimiter. Invisible. ASCII code 30. Should be doing the job we strangely rely upon commas and tabs for.
</td>
</tr>
<tr>
<td><code>Papa.UNIT_SEP</code></td>
<td>
Also sometimes used as a delimiting character. ASCII code 31.
</td>
</tr>
<tr>
<td><code>Papa.WORKERS_SUPPORTED</code></td>
<td>
Whether or not the browser supports HTML5 Web Workers. If false, <code>worker: true</code> will have no effect.
</td>
</tr>
</table>
</div>
<div class="grid-100">
<h5 id="configurable">Configurable</h5>
</div>
<div class="grid-100">
<table>
<tr>
<th>Configurable Property</th>
<th>Explanation</th>
</tr>
<tr>
<td><code>Papa.LocalChunkSize</code></td>
<td>
The size in bytes of each file chunk. Used when streaming files obtained from the DOM that exist on the local computer. Default 10 MB.
</td>
</tr>
<tr>
<td><code>Papa.RemoteChunkSize</code></td>
<td>
Same as LocalChunkSize, but for downloading files from remote locations. Default 5 MB.
</td>
</tr>
<tr>
<td><code>Papa.DefaultDelimiter</code></td>
<td>
The delimiter used when it is left unspecified and cannot be detected automatically. Default is comma.
</td>
</tr>
</table>
</div>
<div class="clear"></div>
</div>
</section>
</main>
<footer>
<!--<div class="footer-top">
<h3>Make Your Papa Proud</h3>
<h4><a href="https://github.com/mholt/PapaParse">Star</a> and <a href="https://github.com/mholt/PapaParse/blob/gh-pages/resources/js/lovers.js">shout</a> if you love #PapaParse</h4>
</div>-->
<div class="footer-main">
<div class="grid-container">
<div class="grid-40 text-center">
<div class="logo">P</div>
<br><br>
Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
<br>
&copy; 2013-2019
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Learn</h5>
<a href="/demo">Demo</a>
<a href="/docs">Documentation</a>
<a href="/faq">FAQ</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Project</h5>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=S6VTL9FQ6L8EN&item_name=PapaParse&currency_code=EUR&source=url">Donate</a>
<a href="https://github.com/mholt/PapaParse">GitHub</a>
<a href="https://twitter.com/search?q=%23PapaParse">Share</a>
</div>
<div class="clear hide-on-desktop"></div>
<div class="grid-15 mobile-grid-50 links">
<h5>Download</h5>
<a href="https://github.com/mholt/PapaParse/archive/master.zip">Latest (master)</a>
<hr>
<a href="https://github.com/mholt/PapaParse/blob/master/papaparse.min.js">Lil' Papa</a>
<a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Community</h5>
<a href="https://twitter.com/search?q=%23PapaParse">Twitter</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">Stack Overflow</a>
</div>
</div>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,295 @@
<!DOCTYPE html>
<html>
<head>
<title>FAQ - Papa Parse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Arvo|Source+Sans+Pro:400,400italic,700|Lato:300,400">
<link rel="stylesheet" href="/resources/css/unsemantic.css">
<link rel="stylesheet" href="/resources/css/tomorrow.highlight.css">
<link rel="stylesheet" href="/resources/css/common.css">
<script src="/resources/js/jquery.min.js"></script>
<script src="/resources/js/highlight.min.js"></script>
<script src="/resources/js/common.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<main>
<header>
<div class="grid-container">
<div class="grid-40 mobile-grid-50">
<div class="links">
<a href="/demo">
<i class="fa fa-magic fa-lg"></i> Demo
</a>
<a href="/docs">
<i class="fa fa-book fa-lg"></i> Docs
</a>
<a href="/faq">
<i class="fa fa-question fa-lg"></i> FAQ
</a>
</div>
</div>
<div class="grid-20 hide-on-mobile text-center">
<a href="/" class="text-logo">Papa Parse 5</a>
</div>
<div class="grid-40 mobile-grid-50 text-right">
<div class="links">
<a href="https://github.com/mholt/PapaParse">
<i class="fa fa-github fa-lg"></i> GitHub
</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">
<i class="fa fa-stack-overflow fa-lg"></i> Help
</a>
</div>
</div>
</div>
</header>
<h1>FAQ</h1>
<div class="grid-container">
<div class="prefix-15 grid-70 suffix-15">
<h4 id="general">General</h4>
<h6 id="why">Why use Papa Parse?</h6>
<p>
There's a thousand CSV libraries for Javascript. Papa is different. It's written with correctness and performance in mind. Papa is the first (and so far only) multi-threaded CSV parser that runs on web pages. It can parse files gigabytes in size without crashing the browser. It correctly handles malformed or edge-case CSV text. It can parse files on the local file system or download them over the Internet. Papa is boss.
</p>
<p>
Privacy advocates also use Papa Parse to avoid having to transmit sensitive files over the Internet. Now all the processing can be done locally on the client's computer. This is especially significant considering some organizations' policies.
</p>
<p>
As of version 4, Papa Parse is the <a href="http://jsperf.com/javascript-csv-parsers/4">fastest CSV parser</a> for the browser, whereas it used to be the slowest.
</p>
<h6 id="nodejs">Can I use Papa Parse server-side with Node.js?</h6>
<p>Yes, Paparse supports Node. See <a href="https://github.com/mholt/PapaParse/blob/master/README.md#papa-parse-for-node" target="_blank">our README</a>for further details.
</p>
<h6 id="dependencies">Does Papa Parse have any dependencies?</h6>
<p>
No. Papa Parse has no dependencies. If jQuery is present, however, it plugs in to make it easier to select files from the DOM.
</p>
<h6 id="combine">Can I put other libraries in the same file as Papa Parse?</h6>
<p>
Yes.
</p>
<h6 id="browsers">Which browsers is it compatible with?</h6>
<p>
All modern, competent browsers should support all of the features. However, as usual, use IE at your own risk. It looks like IE 10+ and Safari 6+ should support all the features. Firefox and Chrome should work with all features back to versions 3 and 4. Opera 11 and up should be fine. If you really need to use Papa in old IE or Opera, then keep the fancy features off and you may be in luck.
</p>
<h6 id="async">Can Papa Parse be loaded asynchronously (after the page loads)?</h6>
<p>
Yes.
</p>
<h6 id="open-source">Is it open source? (Can I contribute something?)</h6>
<p>
Yes, please! I don't want to do this all by myself. Head over to the <a href="https://github.com/mholt/PapaParse">GitHub project page</a> and hack away. If you're making a significant change, open an issue first so we can talk about it.
</p>
<h6 id="fast-mode">What's the deal with fast mode?</h6>
<p>
Fast mode makes <a href="http://jsperf.com/javascript-csv-parsers/3">Papa Parse screaming fast</a>, but you wouldn't want to use it if there are quoted fields in your input. Fast mode is fast because it makes one major assumption: no quoted fields. If you don't specify fastMode either way, fast mode will be turned on automatically if there are no quote characters in the input. With fast mode on, 1 GB files can be parsed in about 20 seconds.
</p>
<h6 id="encoding">Why do non-ASCII characters look weird?</h6>
<p>
It's probably an encoding issue. The FileReader API allows you to specify an encoding, which you can do using the <code>encoding</code> configuration property. This property only works with local files and does not apply to strings or remote files. Also see issues <a href="https://github.com/mholt/PapaParse/issues/64">#64</a> and <a href="https://github.com/mholt/PapaParse/issues/169">#169</a> if you're having trouble parsing CSV files generated from Excel.
</p>
<br><br>
<h4 id="streaming">Streaming</h4>
<h6>Can Papa load and parse huge files?</h6>
<p>
Yes. Parsing huge text files is facilitated by <i>streaming</i>, where the file is loaded a little bit at a time, parsed, and the results are sent to your <a href="/docs#config">step</a> callback function, row-by-row. You can also get results chunk-by-chunk (which is usually faster) by using the <code>chunk</code> callback function in the same way.
</p>
<h6>How do I stream my input?</h6>
<p>
Just specify a <a href="/docs#config">step</a> callback function. Results will <i>not</i> be available after parsing is finished, however. You have to inspect the results one row at a time.
</p>
<h6>What if I want more than 1 row at a time?</h6>
<p>
Use the <code>chunk</code> callback instead. It works just like step, but you get an entire chunk of the file at a time, rather than a single row. Don't try to use step and chunk together (the behavior is undefined).
</p>
<h6>What is a stream and when should I stream files?</h6>
<p>
A stream is a unique data structure which, given infinite time, gives you infinite space.
So if you're short on memory (as browsers often are), use a stream.
</p>
<h6>Wait, does that mean streaming takes more time?</h6>
<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, then compress the output 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>
<h6>How do I get all the results together after streaming?</h6>
<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 parts you need as they come through.
</p>
<h6>Does Papa use a true stream?</h6>
<p>
Papa uses HTML5's FileReader API which uses a stream. FileReader doesn't technically allow us to hook into the underlying stream, but it does let us load the file in pieces. But fortunately you don't have to worry about that; it's all taken care of for you. Just take the results one row at a time.
</p>
<h6>Can I stream files over a network or the Internet?</h6>
<p>
Yes, Papa Parse supports this. It will download a file in pieces using HTTP's standard Range header, then pass the parsed results to your step function just like a local file. However, these requests may not work cross-origin (different domain/hostname), depending on the server's configuration.
</p>
<p>
Streaming remote files also requires the Content-Range header in the server's response. Most production-ready servers support this header, but Python's SimpleHTTPServer does not. If you need a quick and easy server, <a href="https://caddyserver.com">Caddy</a> will do the trick: <code>$ caddy</code>
</p>
<h6>Can I pause and resume parsing?</h6>
<p>
Yes, as long as you are streaming and not using a worker. Your <a href="/docs#step">step callback</a> (same with the <code>chunk</code> callback) is passed a parser which has pause, resume, and abort functions. This is exceptionally useful when performing asynchronous actions during parsing, for example, AJAX requests. You can always abort parsing in your callback, even when using workers, but pause and resume is only available without a worker.
</p>
<br><br>
<h4 id="workers">Multi-Threading (Workers)</h4>
<h6>Can I use workers for unparsing?</h6>
<p>
No, unparsing CSV files with workers is not currently available. Workers can only be used for parsing CSV files.
</p>
<h6>What is a web worker? Why use one?</h6>
<p>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">HTML5 Web Workers</a> facilitate basic multi-threading in the browser. This means that a web page can spawn a new thread in the operating system that runs Javascript code. This is highly beneficial for long-running scripts that would otherwise lock up the web page.
</p>
<h6>How do I use a worker?</h6>
<p>
Just specify <code>worker: true</code> in your <a href="/docs#config">config</a>. You'll also need to make a <code>complete</code> callback (unless you're streaming) so that you can get the results, because using a worker makes the parse function asynchronous.
</p>
<h6>Can I use a worker if I combine/concatenate my Javascript files?</h6>
<p>
Yes.
</p>
<h6>When should I use a worker?</h6>
<p>
That's up to you. The most typical reason to use a web worker is if your web page becomes unresponsive during parsing. In other words, if it freezes and you can't click things or the scrolling becomes choppy. If that happens, some browsers (like Firefox) will warn the user that a script has become unresponsive or is taking a long time (even if it's working properly). If this happens to you or some of your users, consider using a web worker, at least for the large inputs.
</p>
<p>
However, read the next answer for more info. Using workers has performance implications (both good and bad).
</p>
<h6>What are the performance implications of using a worker thread?</h6>
<p>
Using a worker will be a little slower. In Javascript, threads don't share memory. That's really annoying because sharing memory is the primary reason for multi-threading. As such, all parse results in a worker thread need to be <i>copied</i> to the main thread. And if you're parsing a string in a worker thread, that string also needs to be copied into the worker in the first place. (Files will be opened or downloaded by the worker itself, so the input doesn't need to be copied from the main thread in those cases.)
</p>
<p>
The process of sending data between the page and the worker thread can stall the main page for just a moment. Each thread must also wait for the data to finish sending before un-blocking.
</p>
<p>
Basically: if you don't have much time, don't use a worker. If you can afford a little extra time, use a worker. It will keep your page from appearing unresponsive and give users an overall better experience.
</p>
<h6>Can I stream and use a worker at the same time?</h6>
<p>
Yup. If the input is too large to fit in memory (or large enough to crash the browser), streaming is <i>always</i> the answer, even in a worker thread. Workers keep the page reactive. Streaming makes it able to fit in memory. Use both if you need to.
</p>
<h6>Can I pause/resume workers?</h6>
<p>
No. This would drastically slow down parsing, as it would require the worker to wait after every chunk for a "continue" signal from the main thread. But you <i>can</i> abort workers by calling <code>.abort()</code> on the parser that gets passed to your callback function.
</p>
<h6>I set worker:true and now I'm getting an error: "window is not defined." How do I fix it?</h6>
<p>
This is a fairly common issue with configuration and it appears to be related to the use of React or other third party tools. Since this is a configuration issue, the exact steps needed to solve it may vary. See <a href="https://github.com/mholt/PapaParse/issues/655">Issue #655</a> on GitHub for a solution that worked for one person, and for links to other related issues.
</p>
</div>
</div>
</main>
<footer>
<!--<div class="footer-top">
<h3>Make Your Papa Proud</h3>
<h4><a href="https://github.com/mholt/PapaParse">Star</a> and <a href="https://github.com/mholt/PapaParse/blob/gh-pages/resources/js/lovers.js">shout</a> if you love #PapaParse</h4>
</div>-->
<div class="footer-main">
<div class="grid-container">
<div class="grid-40 text-center">
<div class="logo">P</div>
<br><br>
Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
<br>
&copy; 2013-2019
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Learn</h5>
<a href="/demo">Demo</a>
<a href="/docs">Documentation</a>
<a href="/faq">FAQ</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Project</h5>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=S6VTL9FQ6L8EN&item_name=PapaParse&currency_code=EUR&source=url">Donate</a>
<a href="https://github.com/mholt/PapaParse">GitHub</a>
<a href="https://twitter.com/search?q=%23PapaParse">Share</a>
</div>
<div class="clear hide-on-desktop"></div>
<div class="grid-15 mobile-grid-50 links">
<h5>Download</h5>
<a href="https://github.com/mholt/PapaParse/archive/master.zip">Latest (master)</a>
<hr>
<a href="https://github.com/mholt/PapaParse/blob/master/papaparse.min.js">Lil' Papa</a>
<a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Community</h5>
<a href="https://twitter.com/search?q=%23PapaParse">Twitter</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">Stack Overflow</a>
</div>
</div>
</div>
</footer>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -0,0 +1,575 @@
<!DOCTYPE html>
<html>
<head>
<title>Papa Parse - Powerful CSV Parser for JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Arvo|Source+Sans+Pro:400,400italic,700|Lato:300,400">
<link rel="stylesheet" href="/resources/css/unsemantic.css">
<link rel="stylesheet" href="/resources/css/tomorrow.highlight.css">
<link rel="stylesheet" href="/resources/css/common.css">
<link rel="stylesheet" href="/resources/css/home.css">
<script src="/resources/js/jquery.min.js"></script>
<script src="/resources/js/skrollr.min.js"></script>
<script src="/resources/js/highlight.min.js"></script>
<script src="/resources/js/lovers.js"></script>
<script src="/resources/js/common.js"></script>
<script src="/resources/js/home.js"></script>
</head>
<body>
<div id="skrollr-body">
<div id="top" data-top="bottom: 0px; opacity: 1;" data-top-bottom="bottom: -350px; opacity: .3;">
<div class="grid-container">
<div class="grid-100">
<div id="title-main">
<h1>Papa Parse</h1>
<h2>The powerful, in-browser CSV parser for big boys and girls</h2>
<a href="https://github.com/mholt/PapaParse/archive/5.0.2.zip" class="button">
<i class="fa fa-download"></i>&nbsp; Download
</a>
<a href="/demo" class="button red">
<i class="fa fa-magic"></i>&nbsp; Demo
</a>
<a href="/docs" class="button gray">
<i class="fa fa-book"></i>&nbsp; Documentation
</a>
</div>
<div id="title-code">
<pre><code class="language-javascript">// Parse CSV string
var data = Papa.parse(csv);
// Convert back to CSV
var csv = Papa.unparse(data);
// Parse local CSV file
Papa.parse(file, {
complete: function(results) {
console.log("Finished:", results.data);
}
});
// Stream big file in worker thread
Papa.parse(bigFile, {
worker: true,
step: function(results) {
console.log("Row:", results.data);
}
});</code></pre>
</div>
</div>
</div>
</div>
<main>
<header>
<div class="grid-container">
<div class="grid-40 mobile-grid-50">
<div class="links">
<a href="/demo">
<i class="fa fa-magic fa-lg"></i> Demo
</a>
<a href="/docs">
<i class="fa fa-book fa-lg"></i> Docs
</a>
<a href="/faq">
<i class="fa fa-question fa-lg"></i> FAQ
</a>
</div>
</div>
<div class="grid-20 hide-on-mobile text-center">
<a href="/" class="text-logo">Papa Parse 5</a>
</div>
<div class="grid-40 mobile-grid-50 text-right">
<div class="links">
<a href="https://github.com/mholt/PapaParse">
<i class="fa fa-github fa-lg"></i> GitHub
</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">
<i class="fa fa-stack-overflow fa-lg"></i> Help
</a>
</div>
</div>
</div>
</header>
<div class="insignia">
<div class="firefox-hack"><div id="version-intro">Version</div><div id="version">5.0</div></div>
</div>
<section style="padding-top: 0;">
<div class="grid-container">
<div class="grid-100">
<h3>Features</h3>
</div>
</div>
<div id="ticker">
<div class="ticker-item current">
<p>Now the <a href="http://jsperf.com/javascript-csv-parsers/4">fastest</a> JavaScript CSV parser for the browser</p>
</div>
<div class="ticker-item">
<p>The world's first multi-threaded CSV parser for the browser</p>
</div>
<div class="ticker-item">
<p>Papa can handle files gigabytes in size without crashing</p>
</div>
<div class="ticker-item">
<p>Use Papa when performance, privacy, and correctness matter to you</p>
</div>
<div class="ticker-item">
<p>Papa alleviates privacy concerns related to uploading files</p>
</div>
<div class="ticker-item">
<p>Malformed CSV is handled gracefully with a detailed error report</p>
</div>
</div>
<div class="grid-container">
<div class="grid-33">
<li>CSV&#8594;JSON and <a href="#unparse">JSON&#8594;CSV</a></li>
<li>Auto-detect <a href="#delimiter">delimiter</a></li>
<li><a href="#local-files">Open local files</a></li>
<li><a href="#remote-files">Download remote files</a></li>
</div>
<div class="grid-33">
<li><a href="#stream">Stream</a> local and remote files</li>
<li><a href="#worker">Multi-threaded</a></li>
<li><a href="#header">Header row</a> support</li>
<li><a href="#type-conversion">Type conversion</a></li>
</div>
<div class="grid-33">
<li>Skip <a href="#comments">commented lines</a></li>
<li>Fast mode</li>
<li>Graceful <a href="#errors">error</a> handling</li>
<li>Optional <a href="#jquery">sprinkle</a> of jQuery</li>
</div>
<div class="clear"></div>
<br>
<br>
<div class="grid-100 text-center">
<a href="https://github.com/mholt/PapaParse" class="button">
<i class="fa fa-github"></i>&nbsp; GitHub
</a>
<a href="/docs" class="button gray">
<i class="fa fa-book"></i>&nbsp; Documentation
</a>
</div>
</div>
</section>
<section>
<div class="grid-container">
<div class="grid-100 text-center">
<h3>People <i class="fa fa-heart"></i> Papa</h3>
</div>
<div class="grid-100 text-center">
<br>
<p>
<a href="https://www.npmjs.com/package/papaparse">
<img
src="https://img.shields.io/npm/dm/papaparse.svg"
alt="PapaParse"
/>
</a>
&nbsp;
<a href="https://www.npmjs.com/package/react-papaparse">
<img
src="https://img.shields.io/npm/dt/papaparse.svg?label=total%20downloads"
alt="PapaParse"
/>
</a>
</p>
</div>
<div class="grid-33">
<p class="lover">
<a href="https://smartystreets.com">SmartyStreets</a> verifies addresses, many of which are in CSV files. Papa Parse can process huge files in the browser. <i>"We rapidly built an awesome client-side file processor with Papa Parse."</i>
</p>
</div>
<div class="grid-33">
<p class="lover">
<a href="http://jannah.github.io/MetaReader/">MetaReader</a> helps you see your data from a meta level before you start detailed analysis. <i>"Papa Parse made it very easy to load and ready user CSV files in the browser on the client side."</i>
</p>
</div>
<div class="grid-33">
<p class="lover">
<a href="http://jannah.github.io/MetaReader/">EpiML</a> is an agent-based mathematical model for the web, still in its early stages of development. <i>"Papa makes it so easy to use CSV, which is good for scientists."</i>
</p>
</div>
<div class="clear"></div>
<div class="grid-100 text-center">
<br>
<b><a href="https://github.com/mholt/PapaParse/blob/master/docs/resources/js/lovers.js" class="add-lover-link subheader"><i class="fa fa-plus-square"></i> Add your link (it's free)</a></b>
</div>
</div>
</section>
<section id="parse">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>CSV Parsing</h4>
<h5>"Isn't parsing CSV just <code>String.split(',')</code>?"</h5>
<p>Heavens, no. Papa does it right. Just pass in the CSV string with an optional <a href="/docs#config">configuration</a>.</p>
<pre><code class="language-javascript">var results = Papa.parse(csvString, <a href="/docs#config">config</a>);
/*
results = {
data: [ ... ], // parsed data
errors: [ ... ], // errors encountered
meta: { ... } // extra parse info
}
*/</code></pre>
</div>
</div>
</section>
<section id="delimiter">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Delimiter Detection</h4>
<h5>"But I don't know the delimiter..."</h5>
<p>That's okay. Papa will scan the first few rows to find the right delimiter.</p>
<pre><code class="language-javascript">var results = Papa.parse(csvString);
console.log(results.meta.delimiter);
// "\t"</code></pre>
</div>
</div>
</section>
<section id="local-files">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Local Files</h4>
<h5>"Great, but I have a <i>file</i> to parse."</h5>
<p>Then give Papa a <a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File</a> instead of a string. Since file parsing is asynchronous, don't forget a callback.</p>
<pre><code class="language-javascript">Papa.parse(fileInput.files[0], {
complete: function(results) {
console.log(results);
}
});</code></pre>
</div>
</div>
</section>
<section id="remote-files">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Remote Files</h4>
<h5>"No&mdash;I mean, the file isn't on my computer."</h5>
<p>Oh, well then just pass in the URL and&mdash;of course&mdash;a callback.</p>
<pre><code class="language-javascript">Papa.parse("http://example.com/file.csv", {
download: true,
complete: function(results) {
console.log(results);
}
});</code></pre>
</div>
</div>
</section>
<section id="stream">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Streaming</h4>
<h5>"Did I mention the file is huge?"</h5>
<p>That's what streaming is for. Specify a step callback to receive the results row-by-row. This way, you won't load the whole file into memory and crash the browser.</p>
<pre><code class="language-javascript">Papa.parse("http://example.com/big.csv", {
download: true,
step: function(row) {
console.log("Row:", row.data);
},
complete: function() {
console.log("All done!");
}
});</code></pre>
</div>
</div>
</section>
<section id="worker">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Multi-Threading</h4>
<h5>"Lovely. Now my web page locked up."</h5>
<p>That happens when a long-running script is executing in the same thread as the page. Use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker</a> thread by specifying <code>worker: true</code>. It may take slightly longer, but your page will stay reactive.</p>
<pre><code class="language-javascript">Papa.parse(bigFile, {
worker: true,
step: function(row) {
console.log("Row:", row.data);
},
complete: function() {
console.log("All done!");
}
});</code></pre>
</div>
</div>
</section>
<section id="header">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Header Row</h4>
<h5>"Great! Now I want data keyed by field name."</h5>
<p>If you tell Papa there is a header row, each row will be organized by field name instead of index.</p>
<pre><code class="language-javascript">// Key data by field name instead of index/position
var results = Papa.parse(csv, {
header: true
});</code></pre>
</div>
</div>
</section>
<section id="type-conversion">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Type Conversion</h4>
<h5>"Hey, these numbers are parsed as strings."</h5>
<p><i>Everything</i> is parsed as strings. If you want numbers and booleans, you can enable dynamic typing to do the conversion for you.</p>
<pre><code class="language-javascript">// Converts numeric/boolean data
var results = Papa.parse(csv, {
dynamicTyping: true
});</code></pre>
</div>
</div>
</section>
<section id="comments">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Comments</h4>
<h5>"I forgot to mention: my CSV files have comments in them."</h5>
<p>Okay, first off: that's really weird. But fortunately, you can skip those lines... just specify the comment string.</p>
<pre><code class="language-javascript">// Mostly found in academia, some CSV files
// may have commented lines in them
var results = Papa.parse(csv, {
comments: "#"
});</code></pre>
</div>
</div>
</section>
<section id="errors">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>Error Handling</h4>
<h5>"Aw, shoot. Errors."</h5>
<p>Papa handles errors pretty well. The <a href="http://tools.ietf.org/html/rfc4180">CSV standard</a> is somewhat <strike>loose</strike> ambiguous, so Papa is designed for edge cases. For example, mismatched fields won't break parsing.</p>
<pre><code class="language-javascript">// Example error:
{
type: "FieldMismatch",
code: "TooManyFields",
message: "Expected 3 fields, but parsed 4",
row: 1
}</code></pre>
</div>
</div>
</section>
<section id="jquery">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>jQuery Plugin</h4>
<h5>"Can I use Papa with jQuery?"</h5>
<p>Sure, but it's not required. You can use jQuery to select file input elements and then parse their files. Papa exposes its file parsing API as a jQuery plugin only when jQuery is defined. Papa Parse has <b>no dependencies</b>.</p>
<pre><code class="language-javascript">$("input[type=file]").parse({
config: {
complete: function(results, file) {
console.log("This file done:", file, results);
}
},
complete: function() {
console.log("All files done!");
}
});</code></pre>
</div>
</div>
</section>
<section id="unparse">
<div class="grid-container narrow-grid">
<div class="grid-100">
<h4>JSON to CSV</h4>
<h5>"Last thing: what about converting JSON to CSV?"</h5>
<p>Call <code>unparse()</code> instead of <code>parse()</code>, passing in your array of arrays or array of objects. Papa will figure it out.</p>
<pre><code class="language-javascript">// Output is a properly-formatted CSV string.
// See <a href="/docs#json-to-csv">the docs</a> for more configurability.
var csv = Papa.unparse(yourData);</code></pre>
</div>
</div>
</section>
<section id="download">
<div class="grid-container">
<div class="grid-100">
<h3>Who's Your Papa?</h3>
</div>
<div class="grid-45 suffix-5 mini-papa">
<p>
<b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.min.js">Lil' Papa</a></b>
(minified) for production use
</p>
</div>
<div class="grid-45 prefix-5">
<p>
<b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a></b>
(un-minified) for development
</p>
</div>
<div class="clear"></div>
<div class="prefix-30 grid-40 suffix-30">
<b style="display: block; text-align: center;">npm</b>
<pre><code class="language-bash">$ npm install papaparse</code></pre>
<br>
<b style="display: block; text-align: center;">bower</b>
<pre><code class="language-bash">$ bower install papaparse</code></pre>
</div>
<div class="clear"></div>
<div class="grid-100 text-center">
<br><br>
<a href="https://github.com/mholt/PapaParse" class="button">
<i class="fa fa-github"></i>&nbsp; GitHub
</a>
<a href="/demo" class="button red">
<i class="fa fa-magic"></i>&nbsp; Demo
</a>
<a href="/docs" class="button gray">
<i class="fa fa-book"></i>&nbsp; Documentation
</a>
</div>
</div>
</section>
</main>
<footer>
<!--<div class="footer-top">
<h3>Make Your Papa Proud</h3>
<h4><a href="https://github.com/mholt/PapaParse">Star</a> and <a href="https://github.com/mholt/PapaParse/blob/gh-pages/resources/js/lovers.js">shout</a> if you love #PapaParse</h4>
</div>-->
<div class="footer-main">
<div class="grid-container">
<div class="grid-40 text-center">
<div class="logo">P</div>
<br><br>
Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
<br>
&copy; 2013-2019
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Learn</h5>
<a href="/demo">Demo</a>
<a href="/docs">Documentation</a>
<a href="/faq">FAQ</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Project</h5>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=S6VTL9FQ6L8EN&item_name=PapaParse&currency_code=EUR&source=url">Donate</a>
<a href="https://github.com/mholt/PapaParse">GitHub</a>
<a href="https://twitter.com/search?q=%23PapaParse">Share</a>
</div>
<div class="clear hide-on-desktop"></div>
<div class="grid-15 mobile-grid-50 links">
<h5>Download</h5>
<a href="https://github.com/mholt/PapaParse/archive/master.zip">Latest (master)</a>
<hr>
<a href="https://unpkg.com/papaparse@latest/papaparse.min.js">Lil' Papa</a>
<a href="https://unpkg.com/papaparse@latest/papaparse.js">Fat Papa</a>
</div>
<div class="grid-15 mobile-grid-50 links">
<h5>Community</h5>
<a href="https://twitter.com/search?q=%23PapaParse">Twitter</a>
<a href="http://stackoverflow.com/questions/tagged/papaparse">Stack Overflow</a>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>

View File

@@ -0,0 +1,513 @@
/* 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}
body,
main {
background: #FFF;
}
body {
font: 18px/1.5em 'Source Sans Pro', 'Helvetica Neue', sans-serif;
color: #333;
height: 100%;
}
main {
padding-top: 100px;
}
a {
color: #1D58B1;
}
a:hover {
color: #2AACFC;
}
b {
font-weight: bold;
}
i {
font-style: italic;
}
p,
li {
line-height: 1.75em;
}
p {
margin-bottom: 25px;
}
small {
font-size: 12px;
}
h1,
h2,
h3,
h4,
h5 {
text-align: center;
}
h1 {
font-family: Lato;
font-weight: 300;
font-size: 40px;
margin-bottom: 50px;
}
h2 {
font-size: 60px;
line-height: 1.25em;
}
h3 {
font-size: 48px;
margin-bottom: 30px;
line-height: 1.5em;
}
h4 {
font-size: 28px;
margin-bottom: 50px;
line-height: 1.25em;
}
h5, footer h4 {
font-size: 20px;
letter-spacing: 2px;
text-transform: uppercase;
color: #242627;
line-height: 1em;
margin: 50px auto;
}
h6 {
font-weight: bold;
text-align: left;
margin: 40px auto 5px;
}
/*
Neat hack! http://css-tricks.com/hash-tag-links-padding/
So when you navigate in-page, the sticky header doesn't cover it up
*/
h2[id]:before,
h3[id]:before,
h4[id]:before,
h5[id]:before,
h6[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}
ul,
ol {
margin: 0 0 0 2em;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
header,
main,
footer {
position: relative;
z-index: 1;
}
header,
.insignia {
background: #FFF;
border-color: #CCC;
border-style: solid;
box-shadow: 0 -4px 20px -3px rgba(0, 0, 0, 0.2);
}
header {
position: fixed;
top: 0;
width: 100%;
border-bottom-width: 1px;
}
section {
padding: 100px 0;
border-bottom: 1px solid #E3E3E3;
}
main h2 {
color: #253C50; /* #365DA3 */ /* #3D3D3D */ /* #9B0000 */
font-weight: 300;
line-height: 1.25em;
margin: 0px 0 50px;
}
main pre {
padding: 10px;
background: #F5F5F5;
}
.text-logo,
header .links a {
display: inline-block;
color: #777;
}
.text-logo {
font-family: Arvo, sans-serif;
letter-spacing: -1px;
color: #1D80AB;
font-size: 24px;
text-decoration: none;
padding: 15px 10px;
}
.text-logo:hover {
color: #66B0E2;
}
header .links a {
font-size: 14px;
padding: 15px 25px;
text-decoration: none;
}
header .links a:hover {
color: #000;
}
header .links a:first-child {
padding-left: 10px;
}
header .links a .fa {
margin-right: 5px;
}
.donate {
background: #D9FFD1;
}
.donate:hover {
background: #A1FF87 !important;
}
code {
font: 75%/1em 'Liberation Mono', 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;
color: #000;
padding: 5px;
background: #F5F5F5;
}
h2 code {
font-size: 42px;
background: none;
}
pre > code {
display: block;
line-height: 1.5em;
font-size: 14px;
tab-size: 4;
}
.button,
button,
input[type=button],
button[type=submit] {
display: inline-block;
padding: 10px 25px;
color: #FFF;
border: 0;
text-decoration: none;
background: #366992;
margin: 5px;
transition: background .2s;
border-radius: 50px;
cursor: pointer;
outline: none;
line-height: 1.5em;
font-size: 18px;
}
.button[disabled],
button[disabled],
input[disabled] {
background: #BBB !important;
cursor: default !important;
}
.button:hover,
button:hover,
input[type=button]:hover,
button[type=submit]:hover {
text-decoration: none;
background: #4B91C9;
color: #FFF;
}
.button.red,
button.red {
background: #A01919;
}
.button.red:hover,
button.red:hover {
background: #DD2222;
}
.button.green,
button.green {
background: #419236;
}
.button.green:hover,
button.green:hover {
background: #4DB43F;
}
.button.gray,
button.gray {
background: #666;
}
.button.gray:hover,
button.gray:hover {
background: #999;
}
hr {
border: 0;
border-top: 1px solid #D0D0D0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 20px;
font-size: 16px;
border-bottom: 1px solid #E0E0E0;
}
th {
font-weight: bold;
text-align: left;
}
table pre code {
font-size: 12px;
}
table pre,
li pre {
margin: 10px 0;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
footer {
z-index: 0;
background: #263A49;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
border-bottom: 0;
padding: 0;
font-weight: 300;
font-size: 15px;
color: #EFEFEF;
line-height: 1.5em;
margin-top: 75px;
}
footer a {
color: #EFEFEF;
text-decoration: underline;
}
/*
footer .footer-top {
padding: 20px;
background: #2C4252;
}
*/
footer .footer-main {
font-family: Lato;
padding: 65px 0;
}
footer .links a {
color: #A1B2C2;
text-decoration: none;
transition: color .2s;
display: block;
font-size: 14px;
font-weight: 300;
line-height: 2em;
}
footer .links a:hover {
color: #ACD7FF;
text-decoration: none;
}
footer h3 {
color: #FFF;
font-size: 22px;
margin: 0;
}
footer h4 {
margin: 0;
}
footer h4 a {
color: #A1B2C2;
text-decoration: underline;
}
footer h5 {
color: #FFF;
text-transform: uppercase;
font-size: 16px;
margin: 0 0 10px 0;
font-weight: normal;
text-align: left;
}
footer hr {
border: 0;
border-top: 1px solid #3E5566;
width: 60%;
min-width: 50px;
margin: 10px 0;
}
.logo {
display: inline-block;
color: #263A49;
font-family: Arvo;
font-size: 90px;
line-height: 1em;
background: #EFEFEF;
border-radius: 100px;
padding: 10px 30px;
}
.stuck {
position: fixed;
top: 0;
width: 100%;
border-top-width: 0;
border-bottom-width: 1px;
}
@media (max-width: 1100px) {
.text-logo {
font-size: 18px;
}
p,
li {
line-height: 1.5em;
}
}
@media (max-width: 970px) {
header .links a {
padding: 15px;
}
header > .grid-container,
header .mobile-grid-50 {
padding: 0;
}
}
@media (max-width: 840px) {
header .links a {
font-size: 12px;
}
}
@media (max-width: 767px) {
/* mobile */
p,
li {
line-height: 1.5em;
}
header,
.sticky-wrapper {
position: static;
margin-bottom: 50px !important;
}
header > .grid-container,
header .mobile-grid-50 {
padding: 0;
}
section {
padding: 50px 0;
}
header .links a {
font-size: 16px;
display: block;
text-align: left;
padding: 15px 10% !important;
}
main {
padding-top: 0;
}
main h2 {
font-size: 40px;
}
main h2 code {
font-size: 30px;
}
td,
th {
font-size: 14px;
padding: 10px;
}
footer h5 {
margin-top: 40px;
}
}

View File

@@ -0,0 +1,159 @@
.tabs,
.tab {
border-color: #B4E3FF;
border-style: solid;
}
.tabs {
border-bottom-width: 1px;
padding: 0 5%;
margin-bottom: 30px;
text-align: center;
}
.tab {
display: inline-block;
padding: 8px 20px;
border-bottom-width: 1px;
border-radius: 5px 5px 0 0;
z-index: 2;
cursor: pointer;
font-size: 14px;
color: #777;
background: #FFF;
margin-bottom: -1px;
}
.tab.active {
border-width: 1px;
border-bottom-color: #FFF;
color: #000;
}
.tab:not(.active):hover {
color: #007FB6;
}
label {
display: block;
font-size: 14px;
line-height: 2em;
}
input[type=checkbox] {
margin-right: 4px;
}
textarea,
input[type=text],
input[type=number],
input[type=password],
input[type=email] {
font: 12px/1.25em Menlo, Monaco, 'Courier New', monospace;
padding: 4px;
tab-size: 4;
}
input[type=text],
input[type=number],
input[type=password],
input[type=email] {
margin: 0 6px;
}
textarea {
box-sizing: border-box;
width: 100%;
height: 320px;
padding: 10px;
resize: vertical;
}
dfn {
font-size: 12px;
color: #999;
display: block;
line-height: 1.2em;
margin-bottom: 15px;
}
input[type=checkbox] + dfn {
padding-left: 22px;
}
input[type=file],
#url {
margin: 20px auto;
display: block;
}
input[type=file] {
padding: 10px;
font-size: 12px;
background: #F0F0F0;
}
#insert-tab {
font-size: 12px;
}
.input-area {
margin-bottom: 20px;
font-size: 16px;
line-height: 1em;
}
ul {
margin-top: 20px;
}
li {
line-height: 1.5em;
}
#input-local,
#input-remote,
#input-unparse {
display: none;
}
#submit {
width: 100%;
max-width: 150px;
}
#url {
width: 100%;
font-size: 14px;
max-width: 500px;
}
.see-results {
color: #CC0000;
margin-bottom: 20px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.5em;
}
@media (max-width: 767px) {
/* mobile */
textarea {
height: 250px;
}
.tab {
border: 0;
background: #F0F0F0;
border-radius: 0;
margin: 10px;
display: block;
}
.tab.active {
background: #3B9CE2;
color: #FFF;
}
}

View File

@@ -0,0 +1,266 @@
#top {
padding: 6% 0 8%;
color: #1D80AB;
background: #FFF;
position: relative;
z-index: 0;
/*
For better performance, trigger 3D graphics acceleration.
This reduces lag/jitter considerably, esp. in Chrome.
*/
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
transform-origin: 100% 100%;
}
#top code {
background: none;
}
h1 {
text-align: left;
font-family: Arvo;
font-size: 100px;
line-height: 1em;
margin-top: 8%;
margin-bottom: 40px;
letter-spacing: -5px;
}
h2 {
font-size: 24px;
text-align: left;
margin-bottom: 50px;
}
/* Switch around h4 and h5 for homepage... */
h4 {
font-size: 12px;
letter-spacing: 2px;
margin-bottom: 10px;
text-transform: uppercase;
color: #A1B2C2;
line-height: 1em;
}
h5 {
font-size: 28px;
margin-bottom: 50px;
line-height: 1.25em;
text-transform: none;
color: inherit;
letter-spacing: 0;
margin-top: 0;
}
#title-main {
float: left;
}
#title-code {
float: right;
}
main {
padding-top: 0;
}
.fa-heart {
color: #F00;
}
header {
border-top-width: 1px;
}
header,
.insignia {
position: relative;
}
header,
.sticky-wrapper {
margin-bottom: -150px;
}
header .fa-heart {
color: inherit;
}
.insignia {
display: block;
width: 250px;
height: 250px;
box-sizing: border-box;
border-radius: 50%;
margin: 0 auto;
text-align: center;
color: #1D80AB;
z-index: 2;
margin-bottom: 30px;
border-width: 1px;
}
#version-intro {
position: absolute;
font-size: 12px;
top: 18%;
width: 100%;
font-family: 'Source Sans Pro', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
#version {
text-shadow: 0 3px 2px rgba(169, 169, 169, 0.5);
font: 100px/250px Arvo, sans-serif;
}
.firefox-hack {
position: absolute;
width: 100%;
}
.lover {
margin-bottom: 0;
}
.grid-container.narrow-grid {
max-width: 850px;
}
.mini-papa {
text-align: right;
}
#ticker {
width: 90%;
max-width: 800px;
margin: 0 auto;
height: 80px;
position: relative;
}
.ticker-item {
font-size: 24px;
color: #565656;
text-align: center;
font-family: Lato;
font-weight: 300;
line-height: 1.25em;
width: 100%;
position: absolute;
top: 0;
-webkit-transition: transform .25s;
transition: transform .25s;
-webkit-transform: scale(0);
transform: scale(0);
}
.ticker-item.current {
-webkit-transform: scale(1);
transform: scale(1);
}
.add-lover-link {
text-decoration: none;
}
footer {
margin-top: 0;
}
@media (max-width: 1150px) {
#title-main h1 {
font-size: 85px;
}
#title-main h2 {
font-size: 20px;
margin-bottom: 30px;
}
#title-code code {
font-size: 12px;
}
button,
.button {
padding: 8px 20px;
font-size: 14px;
}
header,
.sticky-wrapper {
margin-bottom: -120px;
}
.insignia {
width: 175px;
height: 175px;
}
#version {
font-size: 70px;
line-height: 175px;
}
}
@media (max-width: 950px) {
#title-code {
display: none;
}
#top {
padding-top: 0;
}
#title-main,
#title-main h1,
#title-main h2 {
width: 100%;
text-align: center;
}
#title-main {
padding-bottom: 50px;
}
}
@media (max-width: 767px) {
/* mobile */
#top h2 {
margin-bottom: 20px;
}
#title-main {
padding-bottom: 10px;
}
.stuck {
position: static;
}
.insignia {
display: none;
}
#ticker {
height: 120px;
}
.lover {
margin-bottom: 25px;
}
.mini-papa {
text-align: left;
}
}

View File

@@ -0,0 +1,93 @@
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Tomorrow Comment */
.hljs-comment {
color: #8e908c;
}
/* Tomorrow Red */
.hljs-variable,
.hljs-attribute,
.hljs-tag,
.hljs-regexp,
.ruby .hljs-constant,
.xml .hljs-tag .hljs-title,
.xml .hljs-pi,
.xml .hljs-doctype,
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
color: #c82829;
}
/* Tomorrow Orange */
.hljs-number,
.hljs-preprocessor,
.hljs-pragma,
.hljs-built_in,
.hljs-literal,
.hljs-params,
.hljs-constant {
color: #f5871f;
}
/* Tomorrow Yellow */
.ruby .hljs-class .hljs-title,
.css .hljs-rules .hljs-attribute {
color: #eab700;
}
/* Tomorrow Green */
.hljs-string,
.hljs-value,
.hljs-inheritance,
.hljs-header,
.ruby .hljs-symbol,
.xml .hljs-cdata {
color: #718c00;
}
/* Tomorrow Aqua */
.css .hljs-hexcolor {
color: #3e999f;
}
/* Tomorrow Blue */
.hljs-function,
.python .hljs-decorator,
.python .hljs-title,
.ruby .hljs-function .hljs-title,
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
color: #4271ae;
}
/* Tomorrow Purple */
.hljs-keyword,
.javascript .hljs-function {
color: #8959a8;
}
.hljs {
display: block;
overflow-x: auto;
/*background: white;
padding: 0.5em;*/
color: #4d4d4c;
-webkit-text-size-adjust: none;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
opacity: 0.5;
}

View File

@@ -0,0 +1,997 @@
/* ============================================ */
/* This file has a mobile-to-desktop breakpoint */
/* ============================================ */
@media screen and (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.grid-container:before, .clearfix:before,
.grid-container:after,
.clearfix:after {
content: ".";
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.grid-container:after, .clearfix:after {
clear: both;
}
.grid-container {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
padding-left: 10px;
padding-right: 10px;
}
.grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
.grid-parent {
padding-left: 0;
padding-right: 0;
}
@media screen and (max-width: 767px) {
.mobile-grid-100:before,
.mobile-grid-100:after {
content: ".";
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.mobile-grid-100:after {
clear: both;
}
.mobile-push-5, .mobile-pull-5, .mobile-push-10, .mobile-pull-10, .mobile-push-15, .mobile-pull-15, .mobile-push-20, .mobile-pull-20, .mobile-push-25, .mobile-pull-25, .mobile-push-30, .mobile-pull-30, .mobile-push-35, .mobile-pull-35, .mobile-push-40, .mobile-pull-40, .mobile-push-45, .mobile-pull-45, .mobile-push-50, .mobile-pull-50, .mobile-push-55, .mobile-pull-55, .mobile-push-60, .mobile-pull-60, .mobile-push-65, .mobile-pull-65, .mobile-push-70, .mobile-pull-70, .mobile-push-75, .mobile-pull-75, .mobile-push-80, .mobile-pull-80, .mobile-push-85, .mobile-pull-85, .mobile-push-90, .mobile-pull-90, .mobile-push-95, .mobile-pull-95, .mobile-push-33, .mobile-pull-33, .mobile-push-66, .mobile-pull-66 {
position: relative;
}
.hide-on-mobile {
display: none !important;
}
.mobile-grid-5 {
float: left;
width: 5%;
}
.mobile-prefix-5 {
margin-left: 5%;
}
.mobile-suffix-5 {
margin-right: 5%;
}
.mobile-push-5 {
left: 5%;
}
.mobile-pull-5 {
left: -5%;
}
.mobile-grid-10 {
float: left;
width: 10%;
}
.mobile-prefix-10 {
margin-left: 10%;
}
.mobile-suffix-10 {
margin-right: 10%;
}
.mobile-push-10 {
left: 10%;
}
.mobile-pull-10 {
left: -10%;
}
.mobile-grid-15 {
float: left;
width: 15%;
}
.mobile-prefix-15 {
margin-left: 15%;
}
.mobile-suffix-15 {
margin-right: 15%;
}
.mobile-push-15 {
left: 15%;
}
.mobile-pull-15 {
left: -15%;
}
.mobile-grid-20 {
float: left;
width: 20%;
}
.mobile-prefix-20 {
margin-left: 20%;
}
.mobile-suffix-20 {
margin-right: 20%;
}
.mobile-push-20 {
left: 20%;
}
.mobile-pull-20 {
left: -20%;
}
.mobile-grid-25 {
float: left;
width: 25%;
}
.mobile-prefix-25 {
margin-left: 25%;
}
.mobile-suffix-25 {
margin-right: 25%;
}
.mobile-push-25 {
left: 25%;
}
.mobile-pull-25 {
left: -25%;
}
.mobile-grid-30 {
float: left;
width: 30%;
}
.mobile-prefix-30 {
margin-left: 30%;
}
.mobile-suffix-30 {
margin-right: 30%;
}
.mobile-push-30 {
left: 30%;
}
.mobile-pull-30 {
left: -30%;
}
.mobile-grid-35 {
float: left;
width: 35%;
}
.mobile-prefix-35 {
margin-left: 35%;
}
.mobile-suffix-35 {
margin-right: 35%;
}
.mobile-push-35 {
left: 35%;
}
.mobile-pull-35 {
left: -35%;
}
.mobile-grid-40 {
float: left;
width: 40%;
}
.mobile-prefix-40 {
margin-left: 40%;
}
.mobile-suffix-40 {
margin-right: 40%;
}
.mobile-push-40 {
left: 40%;
}
.mobile-pull-40 {
left: -40%;
}
.mobile-grid-45 {
float: left;
width: 45%;
}
.mobile-prefix-45 {
margin-left: 45%;
}
.mobile-suffix-45 {
margin-right: 45%;
}
.mobile-push-45 {
left: 45%;
}
.mobile-pull-45 {
left: -45%;
}
.mobile-grid-50 {
float: left;
width: 50%;
}
.mobile-prefix-50 {
margin-left: 50%;
}
.mobile-suffix-50 {
margin-right: 50%;
}
.mobile-push-50 {
left: 50%;
}
.mobile-pull-50 {
left: -50%;
}
.mobile-grid-55 {
float: left;
width: 55%;
}
.mobile-prefix-55 {
margin-left: 55%;
}
.mobile-suffix-55 {
margin-right: 55%;
}
.mobile-push-55 {
left: 55%;
}
.mobile-pull-55 {
left: -55%;
}
.mobile-grid-60 {
float: left;
width: 60%;
}
.mobile-prefix-60 {
margin-left: 60%;
}
.mobile-suffix-60 {
margin-right: 60%;
}
.mobile-push-60 {
left: 60%;
}
.mobile-pull-60 {
left: -60%;
}
.mobile-grid-65 {
float: left;
width: 65%;
}
.mobile-prefix-65 {
margin-left: 65%;
}
.mobile-suffix-65 {
margin-right: 65%;
}
.mobile-push-65 {
left: 65%;
}
.mobile-pull-65 {
left: -65%;
}
.mobile-grid-70 {
float: left;
width: 70%;
}
.mobile-prefix-70 {
margin-left: 70%;
}
.mobile-suffix-70 {
margin-right: 70%;
}
.mobile-push-70 {
left: 70%;
}
.mobile-pull-70 {
left: -70%;
}
.mobile-grid-75 {
float: left;
width: 75%;
}
.mobile-prefix-75 {
margin-left: 75%;
}
.mobile-suffix-75 {
margin-right: 75%;
}
.mobile-push-75 {
left: 75%;
}
.mobile-pull-75 {
left: -75%;
}
.mobile-grid-80 {
float: left;
width: 80%;
}
.mobile-prefix-80 {
margin-left: 80%;
}
.mobile-suffix-80 {
margin-right: 80%;
}
.mobile-push-80 {
left: 80%;
}
.mobile-pull-80 {
left: -80%;
}
.mobile-grid-85 {
float: left;
width: 85%;
}
.mobile-prefix-85 {
margin-left: 85%;
}
.mobile-suffix-85 {
margin-right: 85%;
}
.mobile-push-85 {
left: 85%;
}
.mobile-pull-85 {
left: -85%;
}
.mobile-grid-90 {
float: left;
width: 90%;
}
.mobile-prefix-90 {
margin-left: 90%;
}
.mobile-suffix-90 {
margin-right: 90%;
}
.mobile-push-90 {
left: 90%;
}
.mobile-pull-90 {
left: -90%;
}
.mobile-grid-95 {
float: left;
width: 95%;
}
.mobile-prefix-95 {
margin-left: 95%;
}
.mobile-suffix-95 {
margin-right: 95%;
}
.mobile-push-95 {
left: 95%;
}
.mobile-pull-95 {
left: -95%;
}
.mobile-grid-33 {
float: left;
width: 33.33333%;
}
.mobile-prefix-33 {
margin-left: 33.33333%;
}
.mobile-suffix-33 {
margin-right: 33.33333%;
}
.mobile-push-33 {
left: 33.33333%;
}
.mobile-pull-33 {
left: -33.33333%;
}
.mobile-grid-66 {
float: left;
width: 66.66667%;
}
.mobile-prefix-66 {
margin-left: 66.66667%;
}
.mobile-suffix-66 {
margin-right: 66.66667%;
}
.mobile-push-66 {
left: 66.66667%;
}
.mobile-pull-66 {
left: -66.66667%;
}
.mobile-grid-100 {
clear: both;
width: 100%;
}
}
@media screen and (min-width: 768px) {
.grid-100:before,
.grid-100:after {
content: ".";
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
.grid-100:after {
clear: both;
}
.push-5, .pull-5, .push-10, .pull-10, .push-15, .pull-15, .push-20, .pull-20, .push-25, .pull-25, .push-30, .pull-30, .push-35, .pull-35, .push-40, .pull-40, .push-45, .pull-45, .push-50, .pull-50, .push-55, .pull-55, .push-60, .pull-60, .push-65, .pull-65, .push-70, .pull-70, .push-75, .pull-75, .push-80, .pull-80, .push-85, .pull-85, .push-90, .pull-90, .push-95, .pull-95, .push-33, .pull-33, .push-66, .pull-66 {
position: relative;
}
.hide-on-desktop {
display: none !important;
}
.grid-5 {
float: left;
width: 5%;
}
.prefix-5 {
margin-left: 5%;
}
.suffix-5 {
margin-right: 5%;
}
.push-5 {
left: 5%;
}
.pull-5 {
left: -5%;
}
.grid-10 {
float: left;
width: 10%;
}
.prefix-10 {
margin-left: 10%;
}
.suffix-10 {
margin-right: 10%;
}
.push-10 {
left: 10%;
}
.pull-10 {
left: -10%;
}
.grid-15 {
float: left;
width: 15%;
}
.prefix-15 {
margin-left: 15%;
}
.suffix-15 {
margin-right: 15%;
}
.push-15 {
left: 15%;
}
.pull-15 {
left: -15%;
}
.grid-20 {
float: left;
width: 20%;
}
.prefix-20 {
margin-left: 20%;
}
.suffix-20 {
margin-right: 20%;
}
.push-20 {
left: 20%;
}
.pull-20 {
left: -20%;
}
.grid-25 {
float: left;
width: 25%;
}
.prefix-25 {
margin-left: 25%;
}
.suffix-25 {
margin-right: 25%;
}
.push-25 {
left: 25%;
}
.pull-25 {
left: -25%;
}
.grid-30 {
float: left;
width: 30%;
}
.prefix-30 {
margin-left: 30%;
}
.suffix-30 {
margin-right: 30%;
}
.push-30 {
left: 30%;
}
.pull-30 {
left: -30%;
}
.grid-35 {
float: left;
width: 35%;
}
.prefix-35 {
margin-left: 35%;
}
.suffix-35 {
margin-right: 35%;
}
.push-35 {
left: 35%;
}
.pull-35 {
left: -35%;
}
.grid-40 {
float: left;
width: 40%;
}
.prefix-40 {
margin-left: 40%;
}
.suffix-40 {
margin-right: 40%;
}
.push-40 {
left: 40%;
}
.pull-40 {
left: -40%;
}
.grid-45 {
float: left;
width: 45%;
}
.prefix-45 {
margin-left: 45%;
}
.suffix-45 {
margin-right: 45%;
}
.push-45 {
left: 45%;
}
.pull-45 {
left: -45%;
}
.grid-50 {
float: left;
width: 50%;
}
.prefix-50 {
margin-left: 50%;
}
.suffix-50 {
margin-right: 50%;
}
.push-50 {
left: 50%;
}
.pull-50 {
left: -50%;
}
.grid-55 {
float: left;
width: 55%;
}
.prefix-55 {
margin-left: 55%;
}
.suffix-55 {
margin-right: 55%;
}
.push-55 {
left: 55%;
}
.pull-55 {
left: -55%;
}
.grid-60 {
float: left;
width: 60%;
}
.prefix-60 {
margin-left: 60%;
}
.suffix-60 {
margin-right: 60%;
}
.push-60 {
left: 60%;
}
.pull-60 {
left: -60%;
}
.grid-65 {
float: left;
width: 65%;
}
.prefix-65 {
margin-left: 65%;
}
.suffix-65 {
margin-right: 65%;
}
.push-65 {
left: 65%;
}
.pull-65 {
left: -65%;
}
.grid-70 {
float: left;
width: 70%;
}
.prefix-70 {
margin-left: 70%;
}
.suffix-70 {
margin-right: 70%;
}
.push-70 {
left: 70%;
}
.pull-70 {
left: -70%;
}
.grid-75 {
float: left;
width: 75%;
}
.prefix-75 {
margin-left: 75%;
}
.suffix-75 {
margin-right: 75%;
}
.push-75 {
left: 75%;
}
.pull-75 {
left: -75%;
}
.grid-80 {
float: left;
width: 80%;
}
.prefix-80 {
margin-left: 80%;
}
.suffix-80 {
margin-right: 80%;
}
.push-80 {
left: 80%;
}
.pull-80 {
left: -80%;
}
.grid-85 {
float: left;
width: 85%;
}
.prefix-85 {
margin-left: 85%;
}
.suffix-85 {
margin-right: 85%;
}
.push-85 {
left: 85%;
}
.pull-85 {
left: -85%;
}
.grid-90 {
float: left;
width: 90%;
}
.prefix-90 {
margin-left: 90%;
}
.suffix-90 {
margin-right: 90%;
}
.push-90 {
left: 90%;
}
.pull-90 {
left: -90%;
}
.grid-95 {
float: left;
width: 95%;
}
.prefix-95 {
margin-left: 95%;
}
.suffix-95 {
margin-right: 95%;
}
.push-95 {
left: 95%;
}
.pull-95 {
left: -95%;
}
.grid-33 {
float: left;
width: 33.33333%;
}
.prefix-33 {
margin-left: 33.33333%;
}
.suffix-33 {
margin-right: 33.33333%;
}
.push-33 {
left: 33.33333%;
}
.pull-33 {
left: -33.33333%;
}
.grid-66 {
float: left;
width: 66.66667%;
}
.prefix-66 {
margin-left: 66.66667%;
}
.suffix-66 {
margin-right: 66.66667%;
}
.push-66 {
left: 66.66667%;
}
.pull-66 {
left: -66.66667%;
}
.grid-100 {
clear: both;
width: 100%;
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,10 @@
site lon lat max min precip snow snowdepth
1V4 -72.02 44.42 13 -5 0.01 -99 -99
BTV -73.15 44.47 14 -9 0.00 0.0 7 52
MVL -72.62 44.54 11 -7 0.00 -99 -99
MPV -72.56 44.20 12 -4 0.00 -99 -99
MSS -74.85 44.93 4 -150.00 -99 -99
PBG -73.47 44.65 15 -12 0.00 -99 -99
RUT -72.95 43.53 18 -2 -99 -99 -99
SLK -74.20 "44.39 7 -12 0.00 -99 -99
VSF -72.50 43.34 20 -1 0.04 -99 -99
Can't render this file because it contains an unexpected character in line 10 and column 36.

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,15 @@
// Returns a random number between min and max (inclusive)
function randomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// BEGIN GOOGLE ANALYTICS
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-86578-20', 'papaparse.com');
ga('send', 'pageview');
// END GOOGLE ANALYTICS

View File

@@ -0,0 +1,259 @@
var inputType = "string";
var stepped = 0, rowCount = 0, errorCount = 0, firstError;
var start, end;
var firstRun = true;
var maxUnparseLength = 10000;
$(function()
{
// Tabs
$('#tab-string').click(function()
{
$('.tab').removeClass('active');
$(this).addClass('active');
$('.input-area').hide();
$('#input-string').show();
$('#submit').text("Parse");
inputType = "string";
});
$('#tab-local').click(function()
{
$('.tab').removeClass('active');
$(this).addClass('active');
$('.input-area').hide();
$('#input-local').show();
$('#submit').text("Parse");
inputType = "local";
});
$('#tab-remote').click(function()
{
$('.tab').removeClass('active');
$(this).addClass('active');
$('.input-area').hide();
$('#input-remote').show();
$('#submit').text("Parse");
inputType = "remote";
});
$('#tab-unparse').click(function()
{
$('.tab').removeClass('active');
$(this).addClass('active');
$('.input-area').hide();
$('#input-unparse').show();
$('#submit').text("Unparse");
inputType = "json";
});
// Sample files
$('#remote-normal-file').click(function() {
$('#url').val($('#local-normal-file').attr('href'));
});
$('#remote-large-file').click(function() {
$('#url').val($('#local-large-file').attr('href'));
});
$('#remote-malformed-file').click(function() {
$('#url').val($('#local-malformed-file').attr('href'));
});
// Demo invoked
$('#submit').click(function()
{
if ($(this).prop('disabled') == "true")
return;
stepped = 0;
rowCount = 0;
errorCount = 0;
firstError = undefined;
var config = buildConfig();
var input = $('#input').val();
if (inputType == "remote")
input = $('#url').val();
else if (inputType == "json")
input = $('#json').val();
// Allow only one parse at a time
$(this).prop('disabled', true);
if (!firstRun)
console.log("--------------------------------------------------");
else
firstRun = false;
if (inputType == "local")
{
if (!$('#files')[0].files.length)
{
alert("Please choose at least one file to parse.");
return enableButton();
}
$('#files').parse({
config: config,
before: function(file, inputElem)
{
start = now();
console.log("Parsing file...", file);
},
error: function(err, file)
{
console.log("ERROR:", err, file);
firstError = firstError || err;
errorCount++;
},
complete: function()
{
end = now();
printStats("Done with all files");
}
});
}
else if (inputType == "json")
{
if (!input)
{
alert("Please enter a valid JSON string to convert to CSV.");
return enableButton();
}
start = now();
var csv = Papa.unparse(input, config);
end = now();
console.log("Unparse complete");
console.log("Time:", (end-start || "(Unknown; your browser does not support the Performance API)"), "ms");
if (csv.length > maxUnparseLength)
{
csv = csv.substr(0, maxUnparseLength);
console.log("(Results truncated for brevity)");
}
console.log(csv);
setTimeout(enableButton, 100); // hackity-hack
}
else if (inputType == "remote" && !input)
{
alert("Please enter the URL of a file to download and parse.");
return enableButton();
}
else
{
start = now();
var results = Papa.parse(input, config);
console.log("Synchronous results:", results);
if (config.worker || config.download)
console.log("Running...");
}
});
$('#insert-tab').click(function()
{
$('#delimiter').val('\t');
});
});
function printStats(msg)
{
if (msg)
console.log(msg);
console.log(" Time:", (end-start || "(Unknown; your browser does not support the Performance API)"), "ms");
console.log(" Row count:", rowCount);
if (stepped)
console.log(" Stepped:", stepped);
console.log(" Errors:", errorCount);
if (errorCount)
console.log("First error:", firstError);
}
function buildConfig()
{
return {
delimiter: $('#delimiter').val(),
header: $('#header').prop('checked'),
dynamicTyping: $('#dynamicTyping').prop('checked'),
skipEmptyLines: $('#skipEmptyLines').prop('checked'),
preview: parseInt($('#preview').val() || 0),
step: $('#stream').prop('checked') ? stepFn : undefined,
encoding: $('#encoding').val(),
worker: $('#worker').prop('checked'),
comments: $('#comments').val(),
complete: completeFn,
error: errorFn,
download: inputType == "remote"
};
}
function stepFn(results, parser)
{
stepped++;
if (results)
{
if (results.data)
rowCount += results.data.length;
if (results.errors)
{
errorCount += results.errors.length;
firstError = firstError || results.errors[0];
}
}
}
function completeFn(results)
{
end = now();
if (results && results.errors)
{
if (results.errors)
{
errorCount = results.errors.length;
firstError = results.errors[0];
}
if (results.data && results.data.length > 0)
rowCount = results.data.length;
}
printStats("Parse complete");
console.log(" Results:", results);
// icky hack
setTimeout(enableButton, 100);
}
function errorFn(err, file)
{
end = now();
console.log("ERROR:", err, file);
enableButton();
}
function enableButton()
{
$('#submit').prop('disabled', false);
}
function now()
{
return typeof window.performance !== 'undefined'
? window.performance.now()
: 0;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,118 @@
/**
INSTRUCTIONS
If you use Papa Parse, add your site/project/company to the list
below. Here is a description of the fields:
link: (optional) The URL to your web site
name: The name of the site/project/company
description: Say why Papa Parse is important to your
application. The name is prepended to this
description when rendered. Make sure that it
reads as a fluid sentence when the name is
concatenated with the description.
quote: (optional) A short testimonial of what you think
of Papa Parse.
Note that the name and description are required. Please
use English and keep the length similar to existing entries;
entries that are too long or extremely short should be
edited before being accepted.
Thanks for being a part of Papa Parse!
**/
var peopleLovePapa = [
{
link: "https://www.vertex.io",
name: "The no-code database of the future.",
description: "No-code, Postgres-powered admin, internal tools, and backend suite.",
quote: "Vertex uses Papa to power all CSV related features!"
},
{
link: "https://www.circlehd.com",
name: "CircleHD Enterprise Video Platform",
description: "Makes provisioning users easy as cake in CircleHD",
quote: "Papa made it easy for our React devs to be able to import and parse the user data files in CSV format, all in browser."
},
{
link: "https://smartystreets.com",
name: "SmartyStreets",
description: "verifies addresses, many of which are submitted in CSV files. Papa Parse can process files with over a million addresses in the browser.",
quote: "Because of Papa Parse, we rapidly built an awesome client-side list processing service."
},
{
link: "http://jannah.github.io/MetaReader",
name: "MetaReader",
description: "helps you see your data from a meta perspective before you start detailed analysis.",
quote: "Papa Parse made it very easy to load and ready user CSV files in the browser on the client side."
},
{
link: "https://github.com/JamesJansson/EpiML",
name: "EpiML",
description: "is an agent-based mathematical model for the web, still in its early stages of development.",
quote: "Papa makes it so easy to use CSV, which is good for scientists."
},
{
link: "https://www.mediawiki.org/wiki/VisualEditor",
name: "Wikipedia",
description: "uses Papa Parse in VisualEditor to help article editors effortlessly build data tables from text files."
},
{
link: "https://github.com/Nanofus/novel.js",
name: "Novel.js",
description: "is a text adventure framework that uses Papa Parse to enable user-friendly translations.",
quote: "Papa saves countless hours of work and makes reading large CSV files so easy!"
},
{
link: "https://mailcheck.co",
name: "Mailcheck.co",
description: "Mailcheck is email validation service. All emails usually stored in CSV's. We use Papa Parse to process data from our customers in browser",
quote: "Papa Parser allowed our customers to preview and process csv's in browser, without uploading them to server. It saves lots of time and space :)"
},
{
link: "https://flatfile.io",
name: "Flatfile.io",
description: "is an add-in data importer for web-apps, providing the full UX to upload a spreadsheet, field match, and repair issues found during import.",
quote: "Papa is a core part of our importer, so much so that we're committed to helping maintain it!"
},
{
link: "https://familiohq.com",
name: "Familio",
description: "is a brand-new messaging app made specifically for busy families. Automatically align all family members when sending text messages to parents in the kindergarten or school or when planning your kids birthday parties.",
quote: "With Papa it was a joy to implement our tool for importing messages and places from external systems."
},
{
link: "https://monei.net",
name: "MONEI",
description: "Digital payments made easy.",
quote: "With Papa life became much easier for us to manage huge csv payments files of our merchants."
},
{
link: "https://moonmail.io",
name: "MoonMail",
description: "OmniChannel Communication Platform powered by AWS PinPoint",
quote: "Papa makes contact imports a plain sailing."
},
{
link: "https://apps.shopify.com/wholesaler",
name: "Wholesaler for Shopify",
description: "Shopify App to offer Wholesaling within one unique Shopify store",
quote: "Super fast bulk Wholesale product price uploads. Love Papa!."
},
{
link: "https://www.unnitmetaliya.com/sop-sample/",
name: "Visa SOP Sample",
description: "Providing free guide to international students.",
quote: "Use Papa Parse for many of side projects. Super fast and works all the time. Love it!"
},
{
link: "https://retool.com/",
name: "Retool",
description: "A remarkably fast way to build internal tools.",
quote: "Papa makes it easy for our users to customize CSV parsing to match their business logic."
}
];

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,57 @@
{
"name": "papaparse",
"version": "5.4.1",
"description": "Fast and powerful CSV parser for the browser that supports web workers and streaming large files. Converts CSV to JSON and JSON to CSV.",
"keywords": [
"csv",
"parser",
"parse",
"parsing",
"delimited",
"text",
"data",
"auto-detect",
"comma",
"tab",
"pipe",
"file",
"filereader",
"stream",
"worker",
"workers",
"thread",
"threading",
"multi-threaded",
"jquery-plugin"
],
"homepage": "http://papaparse.com",
"repository": {
"type": "git",
"url": "https://github.com/mholt/PapaParse.git"
},
"author": {
"name": "Matthew Holt",
"url": "https://twitter.com/mholt6"
},
"license": "MIT",
"main": "papaparse.js",
"browser": "papaparse.min.js",
"devDependencies": {
"chai": "^4.2.0",
"connect": "^3.3.3",
"eslint": "^4.19.1",
"grunt": "^1.0.2",
"grunt-contrib-uglify": "^3.3.0",
"mocha": "^5.2.0",
"mocha-headless-chrome": "^4.0.0",
"open": "7.0.0",
"serve-static": "^1.7.1"
},
"scripts": {
"lint": "eslint --no-ignore papaparse.js Gruntfile.js .eslintrc.js 'tests/**/*.js'",
"test-browser": "node tests/test.js",
"test-mocha-headless-chrome": "node tests/test.js --mocha-headless-chrome",
"test-node": "mocha tests/node-tests.js tests/test-cases.js",
"test": "npm run lint && npm run test-node && npm run test-mocha-headless-chrome"
}
}

1922
www/bower_components/papaparse/papaparse.js vendored Executable file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long