Permalink
Browse files

Add browser demo

  • Loading branch information...
1 parent bea07a9 commit e880ab4584552a74f007bc5c1174eb4ba3eb699b @devongovett committed Apr 14, 2014
Showing with 124 additions and 3 deletions.
  1. +3 −1 .gitignore
  2. +4 −1 Makefile
  3. +39 −0 demo/browser.html
  4. +76 −0 demo/browser.js
  5. +2 −1 package.json
View
@@ -7,4 +7,6 @@ src/
playground/
build/
js/
-*.html
+demo/bundle.js
+*.html
+!demo/browser.html
View
@@ -10,5 +10,8 @@ browser: lib/**/*.coffee
--extension=.coffee \
. | ./node_modules/.bin/exorcist build/pdfkit.js.map > build/pdfkit.js
+browser-demo: demo/browser.js
+ ./node_modules/.bin/browserify --extension .coffee demo/browser.js > demo/bundle.js
+
clean:
- rm -rf js build
+ rm -rf js build demo/bundle.js
View
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <style>
+ body {
+ width: 1230px;
+ margin: 20px auto;
+ font-family: Georgia;
+ }
+
+ h1 {
+ margin: 0;
+ }
+
+ a {
+ color: blue;
+ }
+
+ #editor {
+ width: 600px;
+ height: 775px;
+ margin-right: 20px;
+ display: inline-block;
+ }
+
+ iframe {
+ border: 1px solid black;
+ }
+ </style>
+</head>
+<body>
+ <h1>PDFKit Browser Demo</h1>
+ <p><a href="http://pdfkit.org/">Website</a> | <a href="http://github.com/devongovett/pdfkit">Github</a></p>
+ <div id="editor"></div>
+ <iframe width="600" height="775"></iframe>
+ <script src="bundle.js"></script>
+</body>
+</html>
View
@@ -0,0 +1,76 @@
+var PDFDocument = require('../');
+var blobStream = require('blob-stream');
+var ace = require('brace');
+require('brace/mode/javascript');
+require('brace/theme/monokai');
+
+var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam in suscipit purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nec hendrerit felis. Morbi aliquam facilisis risus eu lacinia. Sed eu leo in turpis fringilla hendrerit. Ut nec accumsan nisl. Suspendisse rhoncus nisl posuere tortor tempus et dapibus elit porta. Cras leo neque, elementum a rhoncus ut, vestibulum non nibh. Phasellus pretium justo turpis. Etiam vulputate, odio vitae tincidunt ultricies, eros odio dapibus nisi, ut tincidunt lacus arcu eu elit. Aenean velit erat, vehicula eget lacinia ut, dignissim non tellus. Aliquam nec lacus mi, sed vestibulum nunc. Suspendisse potenti. Curabitur vitae sem turpis. Vestibulum sed neque eget dolor dapibus porttitor at sit amet sem. Fusce a turpis lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\nMauris at ante tellus. Vestibulum a metus lectus. Praesent tempor purus a lacus blandit eget gravida ante hendrerit. Cras et eros metus. Sed commodo malesuada eros, vitae interdum augue semper quis. Fusce id magna nunc. Curabitur sollicitudin placerat semper. Cras et mi neque, a dignissim risus. Nulla venenatis porta lacus, vel rhoncus lectus tempor vitae. Duis sagittis venenatis rutrum. Curabitur tempor massa tortor.';
+
+function makePDF(PDFDocument, blobStream, lorem, iframe) {
+ // create a document and pipe to a blob
+ var doc = new PDFDocument();
+ var stream = doc.pipe(blobStream());
+
+ // draw some text
+ doc.fontSize(25)
+ .text('Here is some vector graphics...', 100, 80);
+
+ // some vector graphics
+ doc.save()
+ .moveTo(100, 150)
+ .lineTo(100, 250)
+ .lineTo(200, 250)
+ .fill("#FF3300");
+
+ doc.circle(280, 200, 50)
+ .fill("#6600FF");
+
+ // an SVG path
+ doc.scale(0.6)
+ .translate(470, 130)
+ .path('M 250,75 L 323,301 131,161 369,161 177,301 z')
+ .fill('red', 'even-odd')
+ .restore();
+
+ // and some justified text wrapped into columns
+ doc.text('And here is some wrapped text...', 100, 300)
+ .font('Times-Roman', 13)
+ .moveDown()
+ .text(lorem, {
+ width: 412,
+ align: 'justify',
+ indent: 30,
+ columns: 2,
+ height: 300,
+ ellipsis: true
+ });
+
+ // end and display the document in the iframe to the right
+ doc.end();
+ stream.on('finish', function() {
+ iframe.src = stream.toBlobURL('application/pdf');
+ });
+}
+
+var editor = ace.edit('editor');
+editor.setTheme('ace/theme/monokai');
+editor.getSession().setMode('ace/mode/javascript');
+editor.setValue(
+ makePDF
+ .toString()
+ .split('\n').slice(1, -1).join('\n')
+ .replace(/^ /mg, '')
+);
+editor.getSession().getSelection().clearSelection();
+
+var iframe = document.querySelector('iframe');
+makePDF(PDFDocument, blobStream, lorem, iframe);
+
+editor.getSession().on('change', function() {
+ try {
+ var fn = new Function("PDFDocument", "blobStream", "lorem", "iframe", editor.getValue());
+ fn(PDFDocument, blobStream, lorem, iframe);
+ } catch (e) {
+ console.log(e)
+ };
+});
View
@@ -29,7 +29,8 @@
"coffeeify": "^0.6.0",
"browserify": "^3.39.0",
"brfs": "^1.0.1",
- "exorcist": "^0.1.5"
+ "exorcist": "^0.1.5",
+ "brace": "^0.2.1"
},
"dependencies": {
"png-js": ">=0.1.0",

0 comments on commit e880ab4

Please sign in to comment.