Browse Source

Papa gets a new look

pull/180/head
Matthew Holt 10 years ago
parent
commit
d0f63a260e
  1. 2
      .gitignore
  2. 358
      demo.html
  3. 920
      docs.html
  4. 185
      faq.html
  5. BIN
      favicon.ico
  6. 679
      index.html
  7. 370
      resources/css/common.css
  8. 123
      resources/css/demo.css
  9. 272
      resources/css/home.css
  10. 93
      resources/css/tomorrow.highlight.css
  11. 12
      resources/js/common.js
  12. 1
      resources/js/highlight.min.js
  13. 54
      resources/js/home.js
  14. 52
      resources/js/lovers.js
  15. 2
      resources/js/skrollr.min.js

2
.gitignore vendored

@ -0,0 +1,2 @@
.DS_Store
_gitignore/

358
demo.html

@ -5,206 +5,250 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, maximum-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <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=Source+Sans+Pro:400,700,400italic|Lato:300,400,700,900|Arvo"> <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/unsemantic.css">
<link rel="stylesheet" href="/resources/css/common.css"> <link rel="stylesheet" href="/resources/css/common.css">
<link rel="stylesheet" href="/resources/css/demo.css"> <link rel="stylesheet" href="/resources/css/demo.css">
<script src="/resources/js/jquery.min.js"></script> <script src="/resources/js/jquery.min.js"></script>
<script src="/resources/js/papaparse.js"></script>
<script src="/resources/js/common.js"></script> <script src="/resources/js/common.js"></script>
<script src="/resources/js/papaparse.js"></script>
<script src="/resources/js/demo.js"></script> <script src="/resources/js/demo.js"></script>
</head> </head>
<body> <body>
<header>
<div class="grid-container"> <main>
<div class="grid-40 mobile-grid-50"> <header>
<div class="links"> <div class="grid-container">
<a href="https://github.com/mholt/PapaParse"> <div class="grid-40 mobile-grid-50">
<i class="fa fa-github fa-lg"></i> GitHub <div class="links">
</a> <a href="/demo">
<a href="/demo"> <i class="fa fa-magic fa-lg"></i> Demo
<i class="fa fa-magic fa-lg"></i> Demo </a>
</a> <a href="/docs">
<a href="/docs"> <i class="fa fa-book fa-lg"></i> Docs
<i class="fa fa-book fa-lg"></i> Docs </a>
</a> <a href="/faq">
<i class="fa fa-question fa-lg"></i> FAQ
</a>
</div>
</div> </div>
</div> <div class="grid-20 hide-on-mobile text-center">
<div class="grid-20 hide-on-mobile text-center"> <a href="/" class="text-logo">Papa Parse 4</a>
<a href="/" class="text-logo">Papa Parse</a> </div>
</div> <div class="grid-40 mobile-grid-50 text-right">
<div class="grid-40 mobile-grid-50 text-right"> <div class="links">
<div class="links"> <a href="https://github.com/mholt/PapaParse">
<a href="/faq"> <i class="fa fa-github fa-lg"></i> GitHub
<i class="fa fa-question fa-lg"></i> FAQ </a>
</a> <a href="http://stackoverflow.com/questions/tagged/papaparse">
<a href="https://github.com/mholt/PapaParse/issues"> <i class="fa fa-stack-overflow fa-lg"></i> Help
<i class="fa fa-bug fa-lg"></i> Issues </a>
</a> <a href="https://gratipay.com/mholt" class="donate">
<a href="https://www.gratipay.com/mholt/" class="donate"> <i class="fa fa-heart fa-lg"></i> Donate
<i class="fa fa-heart fa-lg"></i> Donate </a>
</a> </div>
</div> </div>
</div> </div>
</div> </header>
</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>
<main>
<div class="grid-container"> <div class="grid-container">
<div class="grid-100">
<h2>Try Papa Parse</h2> <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="fastMode"> Fast mode
<dfn>Really fast. Only for input without quoted fields.</dfn>
</label>
</div> </div>
<div class="grid-75 push-25 grid-parent text-center"> <div class="grid-75 grid-parent">
<div class="grid-container">
<div class="grid-25"> <div class="grid-33 push-66">
<div class="tab active" id="tab-string">String</div> <label>
</div> Delimiter:<input type="text" size="4" maxlength="1" placeholder="auto" id="delimiter"><a href="javascript:" id="insert-tab">tab</a>
<div class="grid-25"> <dfn>The delimiting character. Usually comma or tab. Default is comma.</dfn>
<div class="tab" id="tab-local">Local file(s)</div> </label>
</div>
<div class="grid-25">
<div class="tab" id="tab-remote">Remote file</div>
</div>
<div class="grid-25">
<div class="tab" id="tab-unparse">JSON to CSV</div>
</div>
<div class="clear"></div> <label>
Preview:<input type="number" min="0" max="1000" placeholder="0" id="preview">
<dfn>If &gt; 0, stops parsing after this many rows.</dfn>
</label>
<div class="grid-100"> <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>
<div class="input-area" id="input-string"> <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>
<textarea id="input" placeholder="String input">Column 1,Column 2,Column 3,Column 4 <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 1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4 2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4 3-1,3-2,3-3,3-4
4,5,6,7</textarea> 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> </div>
<div class="input-area" id="input-local">
<p><b>Choose one or more delimited text files for Papa to parse.</b></p>
<input type="file" id="files" multiple> <input type="file" id="files" multiple>
<br><br> Sample files:
Or use one of these:
<br> <ul>
<a href="/resources/files/normal.csv" id="local-normal-file">Normal file</a> <li>
<br> <a href="/resources/files/normal.csv" id="local-normal-file">Normal file</a>
<a href="/resources/files/big.csv" id="local-large-file">Large file</a> </li>
<br> <li>
<a href="/resources/files/malformed.tsv" id="local-malformed-file">Malformed file</a> <a href="/resources/files/big.csv" id="local-large-file">Large file</a>
</div> </li>
<div class="input-area" id="input-remote"> <li>
<p> <a href="/resources/files/malformed.tsv" id="local-malformed-file">Malformed file</a>
<b>Type the URL of the file to be downloaded and parsed.</b> </li>
<br><small>(cross-origin requests must receive Access-Control-Allow-Origin header)</small> </ul>
</p> </div>
<div class="input-area" id="input-remote">
<input type="text" id="url" placeholder="URL">
<br><br> <div class="text-center">
Or use one of these: Type the URL of the file to be downloaded and parsed.
<br>
<a href="javascript:" id="remote-normal-file">Normal file</a>
<br>
<a href="javascript:" id="remote-large-file">Large file</a>
<br> <br>
<a href="javascript:" id="remote-malformed-file">Malformed file</a> <small>(cross-origin requests require Access-Control-Allow-Origin header)</small>
</div> </div>
<div class="input-area" id="input-unparse">
<p><b>Paste a valid JSON string to convert to CSV.</b></p> <input type="text" id="url" placeholder="URL">
<textarea id="json" placeholder="JSON string">[
{ Sample files:
"Column 1": "1-1",
"Column 2": "1-2", <ul>
"Column 3": "1-3", <li>
"Column 4": "1-4" <a href="javascript:" id="remote-normal-file">Normal file</a>
}, </li>
{ <li>
"Column 1": "2-1", <a href="javascript:" id="remote-large-file">Large file</a>
"Column 2": "2-2", </li>
"Column 3": "2-3", <li>
"Column 4": "2-4" <a href="javascript:" id="remote-malformed-file">Malformed file</a>
}, </li>
{ </ul>
"Column 1": "3-1", </div>
"Column 2": "3-2", <div class="input-area" id="input-unparse">
"Column 3": "3-3", <textarea id="json" placeholder="JSON string">[
"Column 4": "3-4" {
}, "Column 1": "1-1",
{ "Column 2": "1-2",
"Column 1": 4, "Column 3": "1-3",
"Column 2": 5, "Column 4": "1-4"
"Column 3": 6, },
"Column 4": 7 {
} "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> ]</textarea>
</div>
</div> </div>
<div class="text-center"> <div class="text-center">
<i class="see-results">Results will show up in the console of your browser's inspector tools.</i> <div class="see-results">
<br> Results will appear in the console of your browser's inspector tools
</div>
<button id="submit" class="green">Parse</button> <button id="submit" class="green">Parse</button>
</div> </div>
</div> </div>
</div> </div>
<div class="grid-25 pull-75 config">
<label><input type="checkbox" id="stream"> Stream</label>
<dfn>The file is loaded in chunks and results are delivered row-by-row during parsing. Saves memory and prevents crashes.</dfn>
<label><input type="checkbox" id="worker"> Worker thread</label>
<dfn>Runs the parser in a separate thread so the web page doesn't lock up.</dfn>
<label><input type="checkbox" id="header"> Header row</label>
<dfn>Keys data by field name rather than an ordered array.</dfn>
<label><input type="checkbox" id="dynamicTyping"> Dynamic typing</label>
<dfn>Turns numeric data into numbers and true/false into booleans.</dfn>
<label><input type="checkbox" id="fastMode"> Fast mode</label>
<dfn>Make sure your input doesn't have quoted fields!</dfn>
<label>Delimiter: <input type="text" size="4" maxlength="1" placeholder="auto" id="delimiter"> <a href="javascript:" id="insert-tab">use tab</a></label>
<dfn>The delimiting character. Usually comma or tab. Default is comma.</dfn>
<label>Preview: <input type="number" min="0" max="1000" placeholder="0" id="preview"></label>
<dfn>If &gt; 0, stops parsing after this many rows.</dfn>
<label>Encoding: <input type="text" id="encoding" placeholder="default" size="7"></label>
<dfn>Only applies when reading local files. Default is specified by the browser (usually UTF-8).</dfn>
<label>Comment char: <input type="text" size="7" maxlength="1" placeholder="default" id="comments"></label>
<dfn>If specified, skips lines starting with this character.</dfn>
</div>
<div class="clear"></div>
<div class="grid-100 text-center pad-50">
<hr>
<a href="https://github.com/mholt/PapaParse" class="button">
<i class="fa fa-download"></i>&nbsp; Get Papa Parse on GitHub
</a>
<a href="/docs" class="button red">
<i class="fa fa-book"></i>&nbsp; Documentation
</a>
</div>
</div> </div>
</main> </main>
<footer> <footer>
<div class="grid-container"> <!--<div class="footer-top">
<div class="grid-100 text-center"> <h3>Make Your Papa Proud</h3>
&copy; 2013-2014 <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>
<br> </div>-->
Thanks to all <a href="https://github.com/mholt/jquery.parse/graphs/contributors">contributors</a>! <div class="footer-main">
<div class="grid-container">
<div class="grid-40 text-center">
<div class="logo">P</div>
<br><br>
Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
<br>
&copy; 2013-2015
</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>
</div> </div>
</footer> </footer>

920
docs.html

File diff suppressed because it is too large Load Diff

185
faq.html

@ -5,59 +5,63 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, maximum-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <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=Source+Sans+Pro:400,700,400italic|Lato:300,400,700,900|Arvo"> <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/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/common.css">
<script src="/resources/js/jquery.min.js"></script> <script src="/resources/js/jquery.min.js"></script>
<script src="/resources/js/highlight.min.js"></script>
<script src="/resources/js/common.js"></script> <script src="/resources/js/common.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head> </head>
<body> <body>
<header>
<div class="grid-container"> <main>
<div class="grid-40 mobile-grid-50"> <header>
<div class="links"> <div class="grid-container">
<a href="https://github.com/mholt/PapaParse"> <div class="grid-40 mobile-grid-50">
<i class="fa fa-github fa-lg"></i> GitHub <div class="links">
</a> <a href="/demo">
<a href="/demo"> <i class="fa fa-magic fa-lg"></i> Demo
<i class="fa fa-magic fa-lg"></i> Demo </a>
</a> <a href="/docs">
<a href="/docs"> <i class="fa fa-book fa-lg"></i> Docs
<i class="fa fa-book fa-lg"></i> Docs </a>
</a> <a href="/faq">
<i class="fa fa-question fa-lg"></i> FAQ
</a>
</div>
</div> </div>
</div> <div class="grid-20 hide-on-mobile text-center">
<div class="grid-20 hide-on-mobile text-center"> <a href="/" class="text-logo">Papa Parse 4</a>
<a href="/" class="text-logo">Papa Parse</a> </div>
</div> <div class="grid-40 mobile-grid-50 text-right">
<div class="grid-40 mobile-grid-50 text-right"> <div class="links">
<div class="links"> <a href="https://github.com/mholt/PapaParse">
<a href="/faq"> <i class="fa fa-github fa-lg"></i> GitHub
<i class="fa fa-question fa-lg"></i> FAQ </a>
</a> <a href="http://stackoverflow.com/questions/tagged/papaparse">
<a href="https://github.com/mholt/PapaParse/issues"> <i class="fa fa-stack-overflow fa-lg"></i> Help
<i class="fa fa-bug fa-lg"></i> Issues </a>
</a> <a href="https://gratipay.com/mholt" class="donate">
<a href="https://www.gratipay.com/mholt/" class="donate"> <i class="fa fa-heart fa-lg"></i> Donate
<i class="fa fa-heart fa-lg"></i> Donate </a>
</a> </div>
</div> </div>
</div> </div>
</div> </header>
</header>
<h1>FAQ</h1>
<main>
<div class="grid-container">
<h2>FAQ</h2>
<div class="prefix-20 grid-60 suffix-20"> <div class="grid-container">
<div class="prefix-15 grid-70 suffix-15">
<h3 id="general">General</h3> <h4 id="general">General</h4>
<h4 id="why">Why use Papa Parse?</h4> <h6 id="why">Why use Papa Parse?</h6>
<p> <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. 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>
@ -68,38 +72,43 @@
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. 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> </p>
<h4 id="nodejs">Can I use Papa Parse server-side with Node.js?</h4> <h6 id="nodejs">Can I use Papa Parse server-side with Node.js?</h6>
<p> <p>
There's a fork of Papa called <a href="https://github.com/Rich-Harris/BabyParse" target="_blank">Baby Parse</a> which is <a href="https://www.npmjs.org/package/babyparse">published on npm</a>. Some features are unavailable (like worker threads and file opening/downloading), but the core parser is functional. There's a fork of Papa called <a href="https://github.com/Rich-Harris/BabyParse" target="_blank">Baby Parse</a> which is <a href="https://www.npmjs.org/package/babyparse">published on npm</a>. Some features are unavailable (like worker threads and file opening/downloading), but the core parser is functional.
</p> </p>
<h4 id="dependencies">Does Papa Parse have any dependencies?</h4> <h6 id="dependencies">Does Papa Parse have any dependencies?</h6>
<p> <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. 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> </p>
<h4 id="browsers">Which browsers is it compatible with?</h4> <h6 id="browsers">Which browsers is it compatible with?</h6>
<p> <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. 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> </p>
<h4 id="async">Can Papa Parse be loaded asynchronously (after the page loads)?</h4> <h6 id="async">Can Papa Parse be loaded asynchronously (after the page loads)?</h6>
<p> <p>
Not without some minor modifications. When Papa Parse loads, it has to obtain the script's relative path in order to facilitate worker threads. If you don't need this feature, Papa can be loaded asynchronously by removing or commenting a couple lines. If you do need workers, you can just hardcode the script's path. See <a href="https://github.com/mholt/PapaParse/issues/69#issuecomment-49886575">issue 69</a> and <a href="https://github.com/mholt/PapaParse/issues/87">issue 87</a> for more information. 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="combine">Can I build Papa Parse into the same file with other JS dependencies?</h6>
<p>
Yes, but then don't use the Web Worker feature unless your other dependencies are battle-hardened for worker threads.
</p> </p>
<h4 id="open-source">Is it open source? (Can I contribute something?)</h4> <h6 id="open-source">Is it open source? (Can I contribute something?)</h6>
<p> <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. 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> </p>
<h4 id="fast-mode">Why wouldn't I always enable fast mode?</h4> <h6 id="fast-mode">Why wouldn't I always enable fast mode?</h6>
<p> <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 (or may be) quoted fields in your input. Fast mode is fast because it makes one major assumption: no quoted fields. But if you know that your input has no quotes, turn that sucker on. With fast mode on, 1 GB files can be parsed in about 20 seconds. 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 (or may be) quoted fields in your input. Fast mode is fast because it makes one major assumption: no quoted fields. But if you know that your input has no quotes, turn that sucker on. With fast mode on, 1 GB files can be parsed in about 20 seconds.
</p> </p>
@ -112,28 +121,26 @@
<br><br>
<h4 id="streaming">Streaming</h4>
<h6>Can Papa load and parse huge files?</h6>
<hr>
<h3 id="streaming">Streaming</h3>
<h4>Can Papa load and parse huge files?</h4>
<p> <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. 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.
</p> </p>
<h4>How do I stream my input?</h4> <h6>How do I stream my input?</h6>
<p> <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. 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> </p>
<h4>What is a stream and when should I stream files?</h4> <h6>What is a stream and when should I stream files?</h6>
<p> <p>
A stream is a unique data structure which, given infinite time, gives you infinite space. 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. So if you're short on memory (as browsers often are), use a stream.
</p> </p>
<h4>Wait, does that mean streaming takes more time?</h4> <h6>Wait, does that mean streaming takes more time?</h6>
<p> <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. 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>
@ -144,26 +151,26 @@
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. 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> </p>
<h4>How do I get all the results together after streaming?</h4> <h6>How do I get all the results together after streaming?</h6>
<p> <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. 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> </p>
<h4>Does Papa use a true stream?</h4> <h6>Does Papa use a true stream?</h6>
<p> <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. 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> </p>
<h4>Can I stream files over a network or the Internet?</h4> <h6>Can I stream files over a network or the Internet?</h6>
<p> <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. 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>
<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://github.com/rif/spark">spark</a> will do the trick. <code>./spark . -port=4100</code> 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://github.com/rif/spark">spark</a> will do the trick: <code>$ ./spark</code>
</p> </p>
<h4>Can I pause and resume parsing?</h4> <h6>Can I pause and resume parsing?</h6>
<p> <p>
Yes, as long as you are streaming and not using a worker. Your <a href="/docs#step">step callback</a> is passed a ParserHandle which has pause, resume, and abort functions. Yes, as long as you are streaming and not using a worker. Your <a href="/docs#step">step callback</a> is passed a ParserHandle which has pause, resume, and abort functions.
</p> </p>
@ -173,23 +180,20 @@
<br><br>
<h4 id="workers">Multi-Threading (Workers)</h4>
<h6>What is a web worker? Why use one?</h6>
<hr>
<h3 id="workers">Multi-threading (Workers)</h3>
<h4>What is a web worker? Why use one?</h4>
<p> <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. <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> </p>
<h4>How do I use a worker?</h4> <h6>How do I use a worker?</h6>
<p> <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. 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> </p>
<h4>When should I use a worker?</h4> <h6>When should I use a worker?</h6>
<p> <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. 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>
@ -197,7 +201,7 @@
However, read the next answer for more info. Using workers has performance implications (both good and bad). However, read the next answer for more info. Using workers has performance implications (both good and bad).
</p> </p>
<h4>What are the performance implications of using a worker thread?</h4> <h6>What are the performance implications of using a worker thread?</h6>
<p> <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.) 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>
@ -209,26 +213,57 @@
</p> </p>
<h4>Can I stream and use a worker at the same time?</h4> <h6>Can I stream and use a worker at the same time?</h6>
<p> <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. 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> </p>
</div> </div>
</div> </div>
</main> </main>
<br><br><br>
<footer> <footer>
<div class="grid-container"> <!--<div class="footer-top">
<div class="grid-100 text-center"> <h3>Make Your Papa Proud</h3>
&copy; 2013-2014 <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>
<br> </div>-->
Thanks to all <a href="https://github.com/mholt/jquery.parse/graphs/contributors">contributors</a>! <div class="footer-main">
<div class="grid-container">
<div class="grid-40 text-center">
<div class="logo">P</div>
<br><br>
Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
<br>
&copy; 2013-2015
</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>
</div> </div>
</footer> </footer>
</body> </body>
</html> </html>

BIN
favicon.ico

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 17 KiB

679
index.html

@ -1,250 +1,300 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Papa Parse - Powerful CSV parser for Javascript</title> <title>Papa Parse - Powerful CSV Parser for JavaScript</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, maximum-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <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=Source+Sans+Pro:400,700,400italic|Lato:300,400,700,900|Arvo"> <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/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/common.css">
<link rel="stylesheet" href="/resources/css/home.css"> <link rel="stylesheet" href="/resources/css/home.css">
<script src="/resources/js/jquery.min.js"></script> <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/common.js"></script>
<script src="/resources/js/home.js"></script> <script src="/resources/js/home.js"></script>
</head> </head>
<body> <body>
<div id="top-image"></div> <div id="top" data-top="bottom: 0px; opacity: 1;" data-top-bottom="bottom: -350px; opacity: .3;">
<div class="content"> <div class="grid-container">
<div id="top"> <div class="grid-100">
<h1>Papa Parse</h1> <div id="title-main">
<h2>A powerful, in-browser CSV parser for big boys and girls</h2> <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.0.7.zip" class="button">
<i class="fa fa-download"></i>&nbsp; Download
</a>
<a href="/demo" class="button red">
<i class="fa fa-magic"></i>&nbsp; Demo
</a>
<a href="/docs" class="button gray">
<i class="fa fa-book"></i>&nbsp; Documentation
</a>
</div>
<div id="title-code">
<pre><code class="language-javascript">// Parse CSV string
var data = Papa.parse(csv);
// Convert back to CSV
var csv = Papa.unparse(data);
// Parse local CSV file
Papa.parse(file, {
complete: function(results) {
console.log("Finished:", results.data);
}
});
// Stream big file in worker thread
Papa.parse(bigFile, {
worker: true,
step: function(results) {
console.log("Row:", results.data);
}
});</code></pre>
</div>
</div>
</div> </div>
</div>
<main> <main>
<header> <header>
<div class="grid-container"> <div class="grid-container">
<div class="grid-40 mobile-grid-50"> <div class="grid-40 mobile-grid-50">
<div class="links"> <div class="links">
<a href="https://github.com/mholt/PapaParse"> <a href="/demo">
<i class="fa fa-github fa-lg"></i> GitHub <i class="fa fa-magic fa-lg"></i> Demo
</a> </a>
<a href="/demo"> <a href="/docs">
<i class="fa fa-magic fa-lg"></i> Demo <i class="fa fa-book fa-lg"></i> Docs
</a> </a>
<a href="/docs"> <a href="/faq">
<i class="fa fa-book fa-lg"></i> Docs <i class="fa fa-question fa-lg"></i> FAQ
</a> </a>
</div>
</div>
<div class="grid-20 hide-on-mobile text-center">
<a href="/" class="text-logo">Papa Parse</a>
</div> </div>
<div class="grid-40 mobile-grid-50 text-right"> </div>
<div class="links"> <div class="grid-20 hide-on-mobile text-center">
<a href="/faq"> <a href="/" class="text-logo">Papa Parse 4</a>
<i class="fa fa-question fa-lg"></i> FAQ </div>
</a> <div class="grid-40 mobile-grid-50 text-right">
<a href="https://github.com/mholt/PapaParse/issues"> <div class="links">
<i class="fa fa-bug fa-lg"></i> Issues <a href="https://github.com/mholt/PapaParse">
</a> <i class="fa fa-github fa-lg"></i> GitHub
<a href="https://www.gratipay.com/mholt/" class="donate"> </a>
<i class="fa fa-heart fa-lg"></i> Donate <a href="http://stackoverflow.com/questions/tagged/papaparse">
</a> <i class="fa fa-stack-overflow fa-lg"></i> Help
</div> </a>
<a href="https://gratipay.com/mholt" class="donate">
<i class="fa fa-heart fa-lg"></i> Donate
</a>
</div> </div>
</div> </div>
</header>
<div class="insignia">
<div class="firefox-hack">P</div>
</div> </div>
</header>
<div class="insignia">
<div class="firefox-hack"><div id="version-intro">Version</div><div id="version">4.0</div></div>
</div>
<section style="padding-top: 0;">
<div class="grid-container"> <div class="grid-container">
<div class="grid-100"> <div class="grid-100">
<div class="ticker"> <h3>Features</h3>
<h2>
<div class="ticker-statement current">
Now the <a href="http://jsperf.com/javascript-csv-parsers/4">fastest</a> JavaScript CSV parser for the browser
</div>
<div class="ticker-statement">
The world's first multi-threaded CSV parser for the browser
</div>
<div class="ticker-statement">
Use Papa when performance, privacy, and correctness matter to you
</div>
<div class="ticker-statement">
Papa is easy to use:
<br>
<code>var results = Papa.parse(csv);</code>
</div>
<div class="ticker-statement">
Convert JSON to CSV:
<br>
<code>var csv = Papa.unparse(json);</code>
</div>
<div class="ticker-statement">
Companies trust Papa to help alleviate privacy concerns related to uploading files.
</div>
<div class="ticker-statement">
Malformed CSV is handled gracefully with a detailed error report.
</div>
</h2>
</div>
</div> </div>
</div>
<div class="clear"></div> <div id="ticker">
<div class="ticker-item current">
Now the <a href="http://jsperf.com/javascript-csv-parsers/4">fastest</a> JavaScript CSV parser for the browser
</div>
<div class="ticker-item">
The world's first multi-threaded CSV parser for the browser
</div>
<div class="ticker-item">
Papa can handle files gigabytes in size without crashing
</div>
<div class="ticker-item">
Use Papa when performance, privacy, and correctness matter to you
</div>
<div class="ticker-item">
Papa alleviates privacy concerns related to uploading files
</div>
<div class="ticker-item">
Malformed CSV is handled gracefully with a detailed error report
</div>
</div>
<div class="grid-40"> <div class="grid-container">
<h3>Features</h3> <div class="grid-33">
<ul> <li>CSV&#8594;JSON and <a href="#unparse">JSON&#8594;CSV</a></li>
<li>CSV &#8594; JSON and <a href="#unparse">JSON &#8594; CSV</a></li> <li>Auto-detect <a href="#delimiter">delimiter</a></li>
<li>Auto-detect <a href="#delimiter">delimiter</a></li> <li><a href="#local-files">Open local files</a></li>
<li><a href="#local-files">Open local files</a></li> <li><a href="#remote-files">Download remote files</a></li>
<li><a href="#remote-files">Download remote files</a></li> </div>
<li><a href="#stream">Stream</a> local or remote files</li> <div class="grid-33">
<li><a href="#worker">Multi-threaded</a></li> <li><a href="#stream">Stream</a> local and remote files</li>
<li><a href="#header">Header row</a> support</li> <li><a href="#worker">Multi-threaded</a></li>
<li>Number/boolean <a href="#type-conversion">type conversion</a></li> <li><a href="#header">Header row</a> support</li>
<li>Skip <a href="#comments">commented lines</a></li> <li><a href="#type-conversion">Type conversion</a></li>
<li>Fast mode for input without quoted fields</li> </div>
<li><a href="#errors">Gracefully handles</a> malformed input</li> <div class="grid-33">
<li>Just <a href="#jquery">a sprinkle</a> of jQuery (optional)</li> <li>Skip <a href="#comments">commented lines</a></li>
</ul> <li>Fast mode</li>
And Papa's <a href="http://jsperf.com/javascript-csv-parsers/4">blazing fast</a>! <li>Graceful <a href="#errors">error</a> handling</li>
</div> <li>Optional <a href="#jquery">sprinkle</a> of jQuery</li>
<div class="grid-60">
<code class="block"><span class="comment">// Convert CSV to JSON</span>
var results = Papa.parse(csv);
<span class="comment">// Parse local CSV files</span>
$('input[type=file]').parse({
config: {
complete: function(results) {
console.log("Parse results:", results.data);
}
}
});
<span class="comment">// In a worker thread</span>
Papa.parse(fileOrString, {
worker: true,
complete: function(results) {
console.log("Parse results:", results.data);
}
});</code>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<br>
<br>
<div class="grid-100 text-center pad-50"> <div class="grid-100 text-center">
<div class="showcase">
<div class="showcase-title">
People <i class="fa fa-heart" title="Love"></i> Papa
</div>
<div class="showcase-images">
<a href="https://smartystreets.com" title="SmartyStreets" class="showcase-image smartystreets">
<img src="/resources/images/smartystreets.png" title="Fast, easy address verification">
</a>
<a href="javascript:" title="Add yours" class="showcase-image" id="showcase-add-link">
<i class="fa fa-plus fa-lg"></i>
</a>
</div>
<div class="showcase-add">
If you love your Papa, <a href="http://matt.life/contact">let me know</a> and we'll get your logo added to this page.
</div>
</div>
<a href="https://github.com/mholt/PapaParse" class="button"> <a href="https://github.com/mholt/PapaParse" class="button">
<i class="fa fa-download"></i>&nbsp; Get Papa Parse on GitHub <i class="fa fa-github"></i>&nbsp; GitHub
</a> </a>
<a href="/demo" class="button red"> <a href="/demo" class="button gray">
<i class="fa fa-bolt"></i>&nbsp; Try the demo <i class="fa fa-book"></i>&nbsp; Documentation
</a> </a>
</div> </div>
<div class="clear"></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-40 suffix-5"> <div class="grid-33">
<div class="note" id="delimiter">Delimeter auto-detect</div> <p class="lover">
<h4>"I don't know the delimiter..."</h4> <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>
That's okay. Papa will scan the first few rows of input to find the right delimiter for you. You can also set the delimiting character manually. Either way, the delimiter used is returned with every result set.
</p> </p>
</div> </div>
<div class="grid-55"> <div class="grid-33">
<code class="block">var results = Papa.parse(csvString); <p class="lover">
console.log(results); <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>
<span class="comment">/* </p>
{ </div>
data: [ ... ] <div class="grid-33">
errors: [ ... ] <p class="lover">
meta: { <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>
delimiter: "\t", </p>
...
}
}
*/</span></code>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<hr>
<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>
<div class="grid-40 suffix-5"> <p>Heavens, no. Papa does it right. Just pass in the CSV string with an optional <a href="/docs#config">configuration</a>.</p>
<div class="note" id="local-files">Parse local files</div>
<h4>"Great, but I have a <i>file</i> to parse."</h4> <pre><code class="language-javascript">var results = Papa.parse(csvString, <a href="/docs#config">config</a>);
<p> /*
Just give Papa a <a href="https://developer.mozilla.org/en-US/docs/Web/API/File">File</a> instead of a string. And a callback. results = {
</p> 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>
<div class="grid-55"> </div>
<code class="block">Papa.parse(file, { </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">var results = Papa.parse(fileInput.files[0], {
complete: function(results) { complete: function(results) {
console.log(results); console.log(results);
} }
});</code> });</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </section>
<div class="grid-40 suffix-5">
<div class="note" id="remote-files">Parse remote files</div> <section id="remote-files">
<h4>"No, you don't understand. The file isn't local."</h4> <div class="grid-container narrow-grid">
<p> <div class="grid-100">
Well then just give Papa the URL and&mdash;of course&mdash;a callback. <h4>Remote Files</h4>
</p> <h5>"No&mdash;I mean, the file isn't on my computer."</h5>
</div>
<div class="grid-55"> <p>Oh, well then just pass in the URL and&mdash;of course&mdash;a callback.</p>
<code class="block">Papa.parse("http://example.com/foo.csv", {
<pre><code class="language-javascript">Papa.parse("http://example.com/file.csv", {
download: true, download: true,
complete: function(results) { complete: function(results) {
console.log("Remote file parsed!", results); console.log(results);
} }
});</code> });</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </section>
<div class="grid-40 suffix-5">
<div class="note" id="stream">Streaming</div>
<h4>"Did I mention the file is huge?"</h4>
<p>
That's what streaming is for. Specify a <code>step</code> callback to receive the results row-by-row. This way, you won't load the whole file into memory and crash the browser.
</p> <section id="stream">
</div> <div class="grid-container narrow-grid">
<div class="grid-55"> <div class="grid-100">
<code class="block">Papa.parse("http://example.com/bigfoo.csv", { <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, download: true,
step: function(row) { step: function(row) {
console.log("Row:", row.data); console.log("Row:", row.data);
@ -252,23 +302,22 @@ console.log(results);
complete: function() { complete: function() {
console.log("All done!"); console.log("All done!");
} }
});</code> });</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </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>
<div class="grid-40 suffix-5"> <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>
<div class="note" id="worker">Multi-threading</div>
<h4>"Lovely. Now my web page locked up."</h4> <pre><code class="language-javascript">Papa.parse(bigFile, {
<p>
Oh. Yeah, that happens when a long-running script is executing in the same thread. 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>
</div>
<div class="grid-55">
<code class="block">Papa.parse(bigFile, {
worker: true, worker: true,
step: function(row) { step: function(row) {
console.log("Row:", row.data); console.log("Row:", row.data);
@ -276,174 +325,220 @@ console.log(results);
complete: function() { complete: function() {
console.log("All done!"); console.log("All done!");
} }
});</code> });</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </section>
<div class="grid-40 suffix-5">
<div class="note" id="header">Header Rows</div> <section id="header">
<h4>"Great! Now I want data keyed by field name."</h4> <div class="grid-container narrow-grid">
<p> <div class="grid-100">
You can tell Papa that there is a header row. <h4>Header Row</h4>
</p> <h5>"Great! Now I want data keyed by field name."</h5>
</div>
<div class="grid-55"> <p>If you tell Papa there is a header row, each row will be organized by field name instead of index.</p>
<code class="block"><span class="comment">// Key data by field name instead of index/position</span>
<pre><code class="language-javascript">// Key data by field name instead of index/position
var results = Papa.parse(csv, { var results = Papa.parse(csv, {
header: true header: true
});</code> });</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </section>
<div class="grid-40 suffix-5">
<div class="note" id="type-conversion">Type Conversion</div> <section id="type-conversion">
<h4>"Hey, these numbers are all parsed as strings."</h4> <div class="grid-container narrow-grid">
<p> <div class="grid-100">
Everything is parsed as strings. If you need the convenience, you can have numeric and boolean data automatically converted to number and boolean types. <h4>Type Conversion</h4>
</p> <h5>"Hey, these numbers are parsed as strings."</h5>
</div>
<div class="grid-55"> <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>
<code class="block"><span class="comment">// All parsed data is normally returned as a string.
// Dynamic typing converts numbers to numbers <pre><code class="language-javascript">// Converts numeric/boolean data
// and booleans to booleans.</span>
var results = Papa.parse(csv, { var results = Papa.parse(csv, {
dynamicTyping: true dynamicTyping: true
});</code> });</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </section>
<div class="grid-40 suffix-5">
<div class="note" id="comments">Comments</div>
<h4>"I forgot to mention: my CSV files have comments in them."</h4> <section id="comments">
<p> <div class="grid-container narrow-grid">
Okay, first off: that's really weird. But you can skip those lines... just specify the comment character. <div class="grid-100">
</p> <h4>Comments</h4>
</div> <h5>"I forgot to mention: my CSV files have comments in them."</h5>
<div class="grid-55">
<code class="block"><span class="comment">// Mostly found in academia, some CSV files <p>Okay, first off: that's really weird. But fortunately, you can skip those lines... just specify the comment string.</p>
// may have commented lines in them</span>
<pre><code class="language-javascript">// Mostly found in academia, some CSV files
// may have commented lines in them
var results = Papa.parse(csv, { var results = Papa.parse(csv, {
comments: "#" comments: "#"
});</code> });</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </section>
<div class="grid-40 suffix-5">
<div class="note" id="errors">Error handling</div> <section id="errors">
<h4>"I'm getting tired, are we done&mdash;aw, shoot. Errors."</h4> <div class="grid-container narrow-grid">
<p> <div class="grid-100">
Yeah, almost done. Fortunately, 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 tries to consider the edge cases. For example, mismatched fields aren't always the end of the world. <h4>Error Handling</h4>
</p> <h5>"Aw, shoot. Errors."</h5>
</div>
<div class="grid-55"> <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>
<code class="block"><span class="comment">// Example error:</span>
<pre><code class="language-javascript">// Example error:
{ {
type: "FieldMismatch", type: "FieldMismatch",
code: "TooManyFields", code: "TooManyFields",
message: "Expected 3 fields, but parsed 4", message: "Expected 3 fields, but parsed 4",
row: 1 row: 1
}</code> }</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </section>
<div class="grid-40 suffix-5">
<div class="note" id="jquery">jQuery Plugin</div> <section id="jquery">
<h4>"Can I use Papa with jQuery?"</h4> <div class="grid-container narrow-grid">
<p> <div class="grid-100">
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>. <h4>jQuery Plugin</h4>
</p> <h5>"Can I use Papa with jQuery?"</h5>
</div>
<div class="grid-55"> <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>
<code class="block">$("input[type=file]").parse({
<pre><code class="language-javascript">$("input[type=file]").parse({
config: { config: {
complete: function(results, file) { complete: function(results, file) {
console.log("File done:", file, results); console.log("This file done:", file, results);
} }
}, },
complete: function() { complete: function() {
console.log("All files done!"); console.log("All files done!");
} }
});</code> });</code></pre>
</div> </div>
<div class="clear"></div> </div>
<hr> </section>
<div class="grid-40 suffix-5">
<div class="note" id="unparse">JSON to CSV</div>
<h4>"Last thing: what about converting JSON to CSV?"</h4>
<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>
</div>
<div class="grid-55">
<code class="block"><span class="comment">// Output is a properly-formatted CSV string.
// See <a href="/docs#json-to-csv">the docs</a> for more configurability.</span>
var csv = Papa.unparse(yourData);</code>
</div>
<div class="clear"></div>
<hr>
<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"> <div class="grid-100">
<h3 class="text-center">Who's your Papa?</h3> <h3>Who's Your Papa?</h3>
</div> </div>
<div class="grid-45 suffix-5 mini-papa"> <div class="grid-45 suffix-5 mini-papa">
<b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.min.js">Mini Papa</a></b> for production use <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>
<div class="grid-45 prefix-5"> <div class="grid-45 prefix-5">
<b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a></b> for debug and development <p>
<b><a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a></b>
(un-minified) for development
</p>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="grid-100 text-center pad-75"> <div class="grid-100 text-center">
<a href="https://github.com/mholt/PapaParse" class="button"> <a href="https://github.com/mholt/PapaParse" class="button">
<i class="fa fa-download"></i>&nbsp; Get Papa Parse on GitHub <i class="fa fa-github"></i>&nbsp; GitHub
</a> </a>
<a href="/demo" class="button red"> <a href="/demo" class="button red">
<i class="fa fa-bolt"></i>&nbsp; Try the demo <i class="fa fa-magic"></i>&nbsp; Demo
</a>
<a href="/docs" class="button gray">
<i class="fa fa-book"></i>&nbsp; Documentation
</a> </a>
</div> </div>
<div class="clear"></div> </section>
</div>
</main> </main>
<footer> <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-container">
<div class="grid-100 text-center"> <div class="grid-40 text-center">
&copy; 2013-2014 <div class="logo">P</div>
<br><br>
Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
<br> <br>
Thanks to all <a href="https://github.com/mholt/jquery.parse/graphs/contributors">contributors</a>! &copy; 2013-2015
</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> </div>
</footer> </div>
</div> </footer>
</body> </body>
</html> </html>

370
resources/css/common.css

@ -3,22 +3,25 @@ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abb
body, body,
main { main {
background: #F0F0F0; background: #FFF;
} }
body { body {
font: 18px/1.5em 'Source Sans Pro', 'Lato', 'Open Sans', 'Helvetica Neue', sans-serif; font: 18px/1.5em 'Source Sans Pro', 'Helvetica Neue', sans-serif;
font-size: 18px;
color: #333; color: #333;
height: 100%; height: 100%;
} }
main {
padding-top: 100px;
}
a { a {
color: #1D58B1; color: #1D58B1;
} }
a:hover { a:hover {
color: #2D81FF; color: #2AACFC;
} }
b { b {
@ -29,33 +32,32 @@ i {
font-style: italic; font-style: italic;
} }
p { p,
margin: 25px 0; li {
line-height: 1.75em;
} }
small { p {
font-size: 14px; margin-bottom: 25px;
} }
h1 { small {
font-family: Arvo; font-size: 12px;
font-size: 120px;
line-height: 1em;
margin-bottom: 50px;
text-align: center;
} }
h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5 {
h6 { text-align: center;
font-family: Lato, sans-serif;
} }
h2, h1 {
h3 { font-family: Lato;
text-align: center; font-weight: 300;
font-size: 40px;
margin-bottom: 50px;
} }
h2 { h2 {
@ -64,23 +66,34 @@ h2 {
} }
h3 { h3 {
font-size: 34px; font-size: 48px;
font-weight: bold; margin-bottom: 30px;
margin: 40px auto 30px; line-height: 1.5em;
color: #000;
line-height: 1.25em;
} }
h4 { h4 {
font-size: 20px; font-size: 28px;
font-weight: 900; margin-bottom: 50px;
line-height: 1.25em;
} }
h3:first-child, h5,
h4:first-child { footer h4 {
margin-top: 15px; 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/ Neat hack! http://css-tricks.com/hash-tag-links-padding/
So when you navigate in-page, the sticky header doesn't cover it up So when you navigate in-page, the sticky header doesn't cover it up
@ -88,7 +101,8 @@ h4:first-child {
h2[id]:before, h2[id]:before,
h3[id]:before, h3[id]:before,
h4[id]:before, h4[id]:before,
.note:before { h5[id]:before,
h6[id]:before {
display: block; display: block;
content: " "; content: " ";
margin-top: -75px; margin-top: -75px;
@ -96,21 +110,8 @@ h4[id]:before,
visibility: hidden; visibility: hidden;
} }
.note {
color: #AAA;
text-transform: uppercase;
font-size: 12px;
}
ul, ul,
ol { ol {
margin: 30px 0 30px 2em;
}
ul ul,
ol ul,
ol ol,
ul ol {
margin: 0 0 0 2em; margin: 0 0 0 2em;
} }
@ -122,20 +123,31 @@ ol {
list-style-type: decimal; list-style-type: decimal;
} }
header,
main,
footer {
position: relative;
z-index: 1;
}
header, header,
.insignia { .insignia {
background: #253C50; background: #FFF;
border-color: #CCC;
border-style: solid;
box-shadow: 0 -4px 20px -3px rgba(0, 0, 0, 0.2);
} }
header { header {
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 1; border-bottom-width: 1px;
} }
main { section {
padding-top: 100px; padding: 100px 0;
border-bottom: 1px solid #E3E3E3;
} }
main h2 { main h2 {
@ -145,54 +157,61 @@ main h2 {
margin: 0px 0 50px; margin: 0px 0 50px;
} }
main pre {
padding: 10px;
background: #F5F5F5;
}
.text-logo, .text-logo,
.links a { header .links a {
display: inline-block; display: inline-block;
padding: 15px 10px; color: #777;
color: #FFF;
} }
.text-logo { .text-logo {
font-family: Arvo, sans-serif; font-family: Arvo, sans-serif;
letter-spacing: -1px;
color: #1D80AB;
font-size: 24px; font-size: 24px;
text-decoration: none; text-decoration: none;
padding: 15px 10px;
} }
.text-logo:hover { .text-logo:hover {
color: #66B0E2; color: #66B0E2;
} }
.links a { header .links a {
font-size: 16px; font-size: 14px;
padding: 15px 25px;
text-decoration: none; text-decoration: none;
transition: background .2s;
} }
.links a:hover { header .links a:hover {
background: #66B0E2; color: #000;
} }
.links a .fa { header .links a:first-child {
padding-left: 10px;
}
header .links a .fa {
margin-right: 5px; margin-right: 5px;
} }
.donate { .donate {
background: #58AA38; background: #D9FFD1;
} }
.donate:hover { .donate:hover {
background: #67C941 !important; background: #A1FF87 !important;
}
.ticker .ticker-statement:not(:first-child) {
display: none;
} }
code { code {
font: 13px/1em 'Liberation Mono', 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace; font: 75%/1em 'Liberation Mono', 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;
background: #FFF;
color: #000; color: #000;
padding: 5px; padding: 5px;
background: #F5F5F5;
} }
h2 code { h2 code {
@ -200,25 +219,13 @@ h2 code {
background: none; background: none;
} }
code.block { pre > code {
color: #000;
padding: 10px;
display: block; display: block;
white-space: pre; line-height: 1.5em;
overflow-x: auto; font-size: 14px;
line-height: 1.4em;
margin: 15px auto;
tab-size: 4; tab-size: 4;
} }
.grid-55 code {
margin-top: 25px !important;
}
code .comment {
color: #999;
}
.button, .button,
button, button,
input[type=button], input[type=button],
@ -234,6 +241,7 @@ button[type=submit] {
border-radius: 50px; border-radius: 50px;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
line-height: 1.5em;
font-size: 18px; font-size: 18px;
} }
@ -260,7 +268,7 @@ button.red {
.button.red:hover, .button.red:hover,
button.red:hover { button.red:hover {
background: #BE1717; background: #DD2222;
} }
.button.green, .button.green,
@ -273,32 +281,45 @@ button.green:hover {
background: #4DB43F; background: #4DB43F;
} }
.button.gray,
button.gray {
background: #666;
}
.button.gray:hover,
button.gray:hover {
background: #999;
}
hr { hr {
border: 0; border: 0;
border-top: 1px solid #D0D0D0; border-top: 1px solid #D0D0D0;
margin: 35px auto 50px;
} }
.clear { table {
border: 0; border-collapse: collapse;
clear: both; width: 100%;
background: 0;
margin: 0;
} }
.pad-50 { th,
padding-top: 50px; td {
padding-bottom: 50px; padding: 20px;
font-size: 16px;
border-bottom: 1px solid #E0E0E0;
} }
.pad-75 { th {
padding-top: 75px; font-weight: bold;
padding-bottom: 75px; text-align: left;
} }
.pad-100 { table pre code {
padding-top: 100px; font-size: 12px;
padding-bottom: 100px; }
table pre,
li pre {
margin: 10px 0;
} }
.text-center { .text-center {
@ -309,49 +330,168 @@ hr {
text-align: right; text-align: right;
} }
.mini-papa { footer {
text-align: right; 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 { .stuck {
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
border-top-width: 0;
border-bottom-width: 1px;
} }
footer {
padding: 25px 0;
background: #333;
color: #DDD;
}
footer a {
color: #CCC;
}
@media (max-width: 1100px) { @media (max-width: 1100px) {
.text-logo { .text-logo {
font-size: 16px; 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) { @media (max-width: 767px) {
/* mobile */ /* mobile */
p,
li {
line-height: 1.5em;
}
header, header,
.sticky-wrapper { .sticky-wrapper {
position: static; position: static;
margin-bottom: 50px !important; margin-bottom: 50px !important;
} }
main { header > .grid-container,
padding-top: 0; header .mobile-grid-50 {
padding: 0;
}
section {
padding: 50px 0;
} }
.links a { header .links a {
font-size: 16px; font-size: 16px;
display: block; display: block;
text-align: left; text-align: left;
padding: 15px 10% !important;
}
main {
padding-top: 0;
} }
main h2 { main h2 {
@ -362,7 +502,13 @@ footer a {
font-size: 30px; font-size: 30px;
} }
.mini-papa { td,
text-align: left; th {
font-size: 14px;
padding: 10px;
}
footer h5 {
margin-top: 40px;
} }
} }

123
resources/css/demo.css

@ -1,5 +1,47 @@
.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 { label {
display: block; display: block;
font-size: 14px;
line-height: 2em;
}
input[type=checkbox] {
margin-right: 4px;
} }
textarea, textarea,
@ -12,58 +54,61 @@ input[type=email] {
tab-size: 4; tab-size: 4;
} }
input[type=text],
input[type=number],
input[type=password],
input[type=email] {
margin: 0 6px;
}
textarea { textarea {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 350px; height: 320px;
padding: 10px; padding: 10px;
resize: vertical; resize: vertical;
} }
input[type=file] { dfn {
background: #FFF; font-size: 12px;
padding: 10px; color: #999;
} display: block;
line-height: 1.2em;
.tab { margin-bottom: 15px;
padding: 10px 0;
background: #DFDFDF;
font-size: 14px;
margin-bottom: 20px;
cursor: pointer;
color: #555;
} }
.tab.active { input[type=checkbox] + dfn {
background: #333; padding-left: 22px;
color: #FFF;
} }
.tab:not(.active):hover { input[type=file],
background: #C6D8E7; #url {
color: #355A88; margin: 20px auto;
display: block;
} }
dfn { input[type=file] {
padding: 10px;
font-size: 12px; font-size: 12px;
color: #999; background: #F0F0F0;
display: block;
line-height: 1.2em;
border-bottom: 1px solid #CCC;
padding-bottom: 5px;
margin-bottom: 10px;
} }
#insert-tab { #insert-tab {
font-size: 14px; font-size: 12px;
} }
.config { .input-area {
margin-bottom: 20px;
font-size: 16px;
line-height: 1em; line-height: 1em;
} }
.input-area { ul {
margin-bottom: 40px; margin-top: 20px;
}
li {
line-height: 1.5em;
} }
#input-local, #input-local,
@ -85,6 +130,11 @@ dfn {
.see-results { .see-results {
color: #CC0000; color: #CC0000;
margin-bottom: 20px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.5em;
} }
@ -93,4 +143,17 @@ dfn {
textarea { textarea {
height: 250px; height: 250px;
} }
.tab {
border: 0;
background: #F0F0F0;
border-radius: 0;
margin: 10px;
display: block;
}
.tab.active {
background: #3B9CE2;
color: #FFF;
}
} }

272
resources/css/home.css

@ -1,37 +1,80 @@
#top-image { #top {
position: fixed; padding: 6% 0 8%;
width: 100%; color: #1D80AB;
height: 100%; background: #FFF;
overflow: hidden; position: relative;
top: 0;
left: 0;
z-index: 0; z-index: 0;
background-image: url('../images/papers.jpg'); /*
background-repeat: no-repeat; For better performance, trigger 3D graphics acceleration.
background-position: 50% -100px; This reduces lag/jitter considerably, esp. in Chrome.
background-size: 100% 100%; */
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
transform-origin: 100% 100%;
} }
.content { #top code {
position: relative; background: none;
z-index: 1;
} }
#top { h1 {
padding: 5% 0; text-align: left;
margin: 0 auto; font-family: Arvo;
color: #FFF; font-size: 100px;
line-height: 1em;
margin-top: 8%;
margin-bottom: 40px;
letter-spacing: -5px;
}
text-shadow: 0 2px 1px rgba(0, 0, 0, .7); h2 {
background: rgba(0, 0, 0, .4); font-size: 24px;
max-width: 1200px; text-align: left;
box-shadow: 0 0 80px 50px rgba(0, 0, 0, .4); margin-bottom: 50px;
} }
#top h2 {
margin-bottom: 90px; /* Switch around h4 and h5 for homepage... */
font-size: 42px; 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, header,
@ -44,6 +87,9 @@ header,
margin-bottom: -150px; margin-bottom: -150px;
} }
header .fa-heart {
color: inherit;
}
.insignia { .insignia {
display: block; display: block;
@ -53,137 +99,148 @@ header,
border-radius: 50%; border-radius: 50%;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
font: 170px/250px Arvo, sans-serif; color: #1D80AB;
text-shadow: 0 3px 2px rgba(0, 0, 0, .5);
color: #FFF;
z-index: 2; z-index: 2;
margin-bottom: 30px; margin-bottom: 30px;
border-width: 1px;
} }
main { #version-intro {
padding-top: 0;
box-shadow: 0 -2px 15px rgba(0, 0, 0, .5);
}
.firefox-hack {
position: absolute; position: absolute;
font-size: 12px;
top: 18%;
width: 100%; width: 100%;
font-family: 'Source Sans Pro', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
} }
h3 { #version {
text-align: left; text-shadow: 0 3px 2px rgba(169, 169, 169, 0.5);
font: 100px/250px Arvo, sans-serif;
} }
.showcase {
text-align: left;
margin-bottom: 40px;
background: #1D2933;
clear: both;
}
.showcase a { .firefox-hack {
color: #668B99; position: absolute;
width: 100%;
} }
.showcase-title { .lover {
color: #FFF; margin-bottom: 0;
font-size: 14px;
text-transform: uppercase;
padding: 10px 0;
background: #2C4252;
text-align: center;
} }
.showcase .fa-heart { .grid-container.narrow-grid {
color: #F00; max-width: 850px;
margin: 0 2px;
} }
.showcase-image img { .mini-papa {
width: 90%; text-align: right;
vertical-align: middle;
} }
.showcase-image .fa-plus { #ticker {
padding: 20px 35px; width: 90%;
border: 4px dashed #2C4252; max-width: 800px;
margin: 0 auto;
height: 80px;
position: relative;
} }
.showcase-image { .ticker-item {
width: 200px; font-size: 24px;
height: 100px; color: #565656;
line-height: 100px;
text-align: center; text-align: center;
display: inline-block; font-family: Lato;
transition: background .4s; font-weight: 300;
} line-height: 1.25em;
width: 100%;
.showcase-image:hover { position: absolute;
background: #375A77; /* default */ top: 0;
transition: transform .25s;
transform: scale(0);
} }
.ticker-item.current {
transform: scale(1);
.showcase-image.smartystreets:hover {
background: #FFC200;
} }
.showcase-image.maxcdn:hover { .add-lover-link {
background: #F37121; text-decoration: none;
} }
.showcase-image.maxcdn img { footer {
width: auto; margin-top: 0;
max-height: 20px;
} }
@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;
}
.showcase-add {
display: none;
color: #DDD;
padding: 10px 0;
font-size: 16px;
text-align: center;
border-top: 1px solid #337BAC;
}
@media (max-width: 900px) {
header, header,
.sticky-wrapper { .sticky-wrapper {
margin-bottom: -120px; margin-bottom: -120px;
} }
.insignia { .insignia {
font-size: 100px;
width: 175px; width: 175px;
height: 175px; height: 175px;
}
#version {
font-size: 70px;
line-height: 175px; line-height: 175px;
} }
} }
@media (max-width: 950px) {
#title-code {
display: none;
}
@media (max-width: 767px) { #top {
/* mobile */ padding-top: 0;
}
#top-image { #title-main,
background-position: 50% 50%; #title-main h1,
background-size: auto 100%; #title-main h2 {
width: 100%;
text-align: center;
} }
#title-main {
padding-bottom: 50px;
}
}
@media (max-width: 767px) {
/* mobile */
#top h2 { #top h2 {
margin-bottom: 20px; margin-bottom: 20px;
} }
#title-main {
padding-bottom: 10px;
}
.stuck { .stuck {
position: static; position: static;
} }
@ -192,14 +249,15 @@ h3 {
display: none; display: none;
} }
#ticker {
height: 120px;
}
.lover {
margin-bottom: 25px;
.showcase-image {
width: 49%;
} }
.showcase img { .mini-papa {
max-width: 200px; text-align: left;
} }
} }

93
resources/css/tomorrow.highlight.css

@ -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;
}

12
resources/js/common.js

@ -1,12 +1,8 @@
// Returns a random number between min and max (inclusive)
$(function() function randomInt(min, max)
{ {
return Math.floor(Math.random() * (max - min + 1)) + min;
}); }
// BEGIN GOOGLE ANALYTICS // BEGIN GOOGLE ANALYTICS

1
resources/js/highlight.min.js vendored

File diff suppressed because one or more lines are too long

54
resources/js/home.js

File diff suppressed because one or more lines are too long

52
resources/js/lovers.js

@ -0,0 +1,52 @@
/**
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://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://wikipedia.org",
name: "Wikipedia",
description: "uses Papa Parse in VisualEditor to help article editors effortlessly build data tables from text files."
}
];

2
resources/js/skrollr.min.js vendored

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save