Matthew Holt
7 years ago
23 changed files with 1101512 additions and 0 deletions
@ -0,0 +1,257 @@ |
|||||||
|
<!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="/resources/js/papaparse.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 4</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> |
||||||
|
<!-- <a href="https://matt.life/pay" class="donate"> |
||||||
|
<i class="fa fa-heart fa-lg"></i> Donate |
||||||
|
</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 > 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> |
||||||
|
© 2013-2018 |
||||||
|
</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://gratipay.com/mholt">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> |
@ -0,0 +1,847 @@ |
|||||||
|
<!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 4</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> |
||||||
|
<!-- <a href="https://matt.life/pay" class="donate"> |
||||||
|
<i class="fa fa-heart fa-lg"></i> Donate |
||||||
|
</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>)</pre></code> |
||||||
|
</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> |
||||||
|
<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>[, config]</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 object with any of these properties: |
||||||
|
<pre><code class="language-javascript">// defaults shown |
||||||
|
{ |
||||||
|
quotes: false, |
||||||
|
quoteChar: '"', |
||||||
|
escapeChar: '"', |
||||||
|
delimiter: ",", |
||||||
|
header: true, |
||||||
|
newline: "\r\n" |
||||||
|
}</code></pre> |
||||||
|
Set <code>quotes</code> to <code>true</code> to always enclose each field in quotes, or an array of true/false values correlating to specific to columns to force-quote. The character used to quote can be customized using <code>quoteChar</code>. The character used to escape the <code>quoteChar</code> within a field can be customized using <code>escapeChar</code>. The <code>delimiter</code> can be any valid delimiting character. The <code>newline</code> character(s) may also be customized. Setting <code>header</code> to <code>false</code> will omit the header row. |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</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, |
||||||
|
trimHeaders: false, |
||||||
|
dynamicTyping: false, |
||||||
|
preview: 0, |
||||||
|
encoding: "", |
||||||
|
worker: false, |
||||||
|
comments: false, |
||||||
|
step: undefined, |
||||||
|
complete: undefined, |
||||||
|
error: undefined, |
||||||
|
download: false, |
||||||
|
skipEmptyLines: false, |
||||||
|
chunk: undefined, |
||||||
|
fastMode: undefined, |
||||||
|
beforeFirstChunk: undefined, |
||||||
|
withCredentials: undefined, |
||||||
|
transform: undefined |
||||||
|
}</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. It can be a string or a function. If string, it must be one of length 1. 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>trimHeaders</code> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
If true leading/trailing spaces will be trimed from headers. |
||||||
|
</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. 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 > 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. Web Workers also load the entire Javascript file, so be careful when <a href="/faq#combine">combining other libraries</a> in the same file as Papa Parse. Note that worker option is only available when parsing files and not when converting from JSON to CSV. |
||||||
|
</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>skipEmptyLines</code> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
If true, lines that are completely empty will be skipped. An empty line is defined to be one which evaluates to empty string. |
||||||
|
</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>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 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> |
||||||
|
</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. |
||||||
|
</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> |
||||||
|
<tr> |
||||||
|
<td><code>Papa.SCRIPT_PATH</code></td> |
||||||
|
<td> |
||||||
|
The relative path to Papa Parse. This is automatically detected when Papa Parse is loaded synchronously. However, if you load Papa Parse asynchronously (e.g. with RequireJS), you need to set this variable manually in order to use Web Workers. (In those cases, this variable is <i>not</i> read-only and you should set it!) |
||||||
|
</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> |
||||||
|
© 2013-2018 |
||||||
|
</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://gratipay.com/mholt">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> |
@ -0,0 +1,293 @@ |
|||||||
|
<!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 4</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> |
||||||
|
<!-- <a href="https://matt.life/pay" class="donate"> |
||||||
|
<i class="fa fa-heart fa-lg"></i> Donate |
||||||
|
</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, but then don't use the Web Worker feature unless your other dependencies are battle-hardened for worker threads. A worker thread loads an entire file, not just a function, so all those dependencies would be executed in an environment without a DOM and other <code>window</code> features. If any of those dependencies crash (<code>Cannot read property "defaultView" of undefined</code> <a href="https://github.com/mholt/PapaParse/issues/114">is</a> <a href="https://github.com/mholt/PapaParse/issues/163">common</a>), the whole worker thread will crash and parsing will not succeed. |
||||||
|
</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. But if you want to use Web Workers, you'll need to specify the relative path to Papa Parse. To do this, set <a href="/docs#readonly">Papa.SCRIPT_PATH</a> to the relative path of the Papa Parse file. In synchronous loading, this is automatically detected. |
||||||
|
</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> |
||||||
|
Probably not. It's safest to concatenate the rest of your dependencies and include Papa Parse in a seperate file. Any library that expects to have access to the <code>window</code> or DOM will crash when executed in a worker thread. Only put <a href="/faq#combine">other libraries in the same file</a> if they are ready to be used in worker threads. |
||||||
|
</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> |
||||||
|
</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> |
||||||
|
© 2013-2018 |
||||||
|
</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://gratipay.com/mholt">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> |
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,559 @@ |
|||||||
|
<!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/4.5.0.zip" class="button"> |
||||||
|
<i class="fa fa-download"></i> Download |
||||||
|
</a> |
||||||
|
<a href="/demo" class="button red"> |
||||||
|
<i class="fa fa-magic"></i> Demo |
||||||
|
</a> |
||||||
|
<a href="/docs" class="button gray"> |
||||||
|
<i class="fa fa-book"></i> 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 4</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> |
||||||
|
<!-- <a href="https://matt.life/pay" class="donate"> |
||||||
|
<i class="fa fa-heart fa-lg"></i> Donate |
||||||
|
</a> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
|
||||||
|
<div class="insignia"> |
||||||
|
<div class="firefox-hack"><div id="version-intro">Version</div><div id="version">4.5</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→JSON and <a href="#unparse">JSON→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> GitHub |
||||||
|
</a> |
||||||
|
<a href="/docs" class="button gray"> |
||||||
|
<i class="fa fa-book"></i> 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-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/gh-pages/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—I mean, the file isn't on my computer."</h5> |
||||||
|
|
||||||
|
<p>Oh, well then just pass in the URL and—of course—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> GitHub |
||||||
|
</a> |
||||||
|
<a href="/demo" class="button red"> |
||||||
|
<i class="fa fa-magic"></i> Demo |
||||||
|
</a> |
||||||
|
<a href="/docs" class="button gray"> |
||||||
|
<i class="fa fa-book"></i> Documentation |
||||||
|
</a> |
||||||
|
</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> |
||||||
|
© 2013-2018 |
||||||
|
</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://gratipay.com/mholt">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> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,514 @@ |
|||||||
|
/* 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: 12px; |
||||||
|
letter-spacing: 2px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: #A1B2C2; /* darker alternative: #698EB0 */ |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
@ -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; |
||||||
|
} |
||||||
|
} |
@ -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; |
||||||
|
} |
||||||
|
} |
@ -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; |
||||||
|
} |
@ -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
Can't render this file because it has a wrong number of fields in line 3.
|
File diff suppressed because it is too large
Load Diff
@ -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
|
@ -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
@ -0,0 +1,82 @@ |
|||||||
|
/** |
||||||
|
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.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://www.webucator.com/webdesign/javascript.cfm", |
||||||
|
name: "Webucator", |
||||||
|
description: "created a video showing how to use Papa Parse and FileDrop.js to create a drag-and-drop CSV-JSON converter.", |
||||||
|
quote: "It's often easy to convert data to CSV. With Papa, it's easy to turn that CSV into JSON." |
||||||
|
}, |
||||||
|
{ |
||||||
|
link: "http://www.yolpo.com/social/gist.github?1dbd4556e748bdb830b3&autoplay=1&interimresults=0&failfast=1", |
||||||
|
name: "Yolpo", |
||||||
|
description: "created a simple regression test for Papa Parse.", |
||||||
|
quote: "Papa's API is so intuitive, it took me no time to get it to work." |
||||||
|
}, |
||||||
|
{ |
||||||
|
link: "https://www.appstax.com", |
||||||
|
name: "Appstax", |
||||||
|
description: "uses Papa Parse to import and export CSV data in their visual databrowser.", |
||||||
|
quote: "Papa is a great for parsing CSV. And what a great tone of voice - love it!" |
||||||
|
}, |
||||||
|
{ |
||||||
|
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!" |
||||||
|
} |
||||||
|
]; |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue