Initial version of new demo page

alex-irt · Jan 6, 2013 · a65cc85 · a65cc85
1 parent 6f29d25
commit a65cc85
Show file tree

Hide file tree

Showing 14 changed files with 9,619 additions and 1 deletion.
diff --git a/examples/bootstrap/css/bootstrap-responsive.css b/examples/bootstrap/css/bootstrap-responsive.css
diff --git a/examples/bootstrap/css/bootstrap-responsive.min.css b/examples/bootstrap/css/bootstrap-responsive.min.css
diff --git a/examples/bootstrap/css/bootstrap.css b/examples/bootstrap/css/bootstrap.css
diff --git a/examples/bootstrap/css/bootstrap.min.css b/examples/bootstrap/css/bootstrap.min.css
diff --git a/examples/bootstrap/img/glyphicons-halflings-white.png b/examples/bootstrap/img/glyphicons-halflings-white.png
diff --git a/examples/bootstrap/img/glyphicons-halflings.png b/examples/bootstrap/img/glyphicons-halflings.png
diff --git a/examples/bootstrap/js/bootstrap.js b/examples/bootstrap/js/bootstrap.js
diff --git a/examples/bootstrap/js/bootstrap.min.js b/examples/bootstrap/js/bootstrap.min.js
diff --git a/examples/css/editor.css b/examples/css/editor.css
@@ -0,0 +1,24 @@
+.row-fluid .no-gutter {
+	margin-left: 0px;
+}
+
+footer {
+	text-align: center;
+	margin: 30px 0;
+}
+
+#editor {
+	width: 50%; 
+	height: 400px; 
+	float: left; 
+	clear: left; 
+	position: relative;
+}
+
+.controls {
+	float: left;
+	clear: left;
+	width: 50%;
+	padding-top: 10px;
+}
+
diff --git a/examples/editor.js b/examples/editor.js
@@ -0,0 +1,31 @@
+
+var jsPDFEditor = function() {
+
+	return {
+		init: function() {
+
+
+			var editor = ace.edit("editor");
+
+			editor.setTheme("ace/theme/monokai");
+			editor.getSession().setMode("ace/mode/javascript");		
+
+			console.log('hello');
+			var doc = new jsPDF();
+			doc.text(10, 10, 'Hello world.');
+			var string = pdf.output('datauristring');
+
+			$('iframe').attr('src', string);
+
+		},
+		update: function() {
+
+
+		}
+	};
+
+}();
+
+$(document).ready(function() {
+	jsPDFEditor.init();
+});
diff --git a/examples/js/basic.js b/examples/js/basic.js
@@ -295,7 +295,7 @@ function demoStringSplitting() {
 			// }
 			// Without these, .splitTextToSize will use current / default
 			// font Family, Style, Size.
-
+			console.log(lines);
 			pdf.text(0.5, verticalOffset + size / 72, lines)
 
 			verticalOffset += (lines.length + 0.5) * size / 72

diff --git a/examples/js/editor.js b/examples/js/editor.js
@@ -0,0 +1,31 @@
+
+var jsPDFEditor = function() {
+
+	return {
+		init: function() {
+
+
+			var editor = ace.edit("editor");
+
+			editor.setTheme("ace/theme/monokai");
+			editor.getSession().setMode("ace/mode/javascript");		
+
+			console.log('hello');
+			var doc = new jsPDF();
+			doc.text(10, 10, 'Hello world.');
+			var string = doc.output('datauristring');
+
+			$('iframe').attr('src', string);
+
+		},
+		update: function() {
+
+
+		}
+	};
+
+}();
+
+$(document).ready(function() {
+	jsPDFEditor.init();
+});
diff --git a/examples/runner.html b/examples/runner.html
@@ -0,0 +1,89 @@
+<!doctype>
+<html>
+<head>
+	<title>jsPDF</title>
+
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
+	<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.17.custom.css">
+	<link rel="stylesheet" type="text/css" href="css/main.css">
+
+	<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
+	<script type="text/javascript" src="js/jquery/jquery-ui-1.8.17.custom.min.js"></script>
+	<script type="text/javascript" src="../jspdf.js"></script>
+	<script type="text/javascript" src="../libs/FileSaver.js/FileSaver.js"></script>
+	<script type="text/javascript" src="../libs/BlobBuilder.js/BlobBuilder.js"></script>
+
+	<script type="text/javascript" src="../jspdf.plugin.addimage.js"></script>
+
+	<script type="text/javascript" src="../jspdf.plugin.standard_fonts_metrics.js"></script>
+	<script type="text/javascript" src="../jspdf.plugin.split_text_to_size.js"></script>
+	<script type="text/javascript" src="../jspdf.plugin.from_html.js"></script>
+	<script type="text/javascript" src="js/basic.js"></script>
+
+	<script>
+		$(function() {
+			$("#accordion-basic, #accordion-text, #accordion-graphic").accordion({
+				autoHeight: false,
+				navigation: true
+			});
+			$( "#tabs" ).tabs();
+			$(".button").button();
+		});
+	</script>
+</head>
+
+<body>
+<iframe frameborder="0" width="500" height="400"></iframe>
+<script>
+$(document).ready(function() {
+
+
+	var pdf = new jsPDF('p','in','letter')
+	, sizes = [12, 16, 20]
+	, fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']]
+	, font, size, lines
+	, margin = 0.5 // inches on a 8.5 x 11 inch sheet.
+	, verticalOffset = margin
+	, loremipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id eros turpis. Vivamus tempor urna vitae sapien mollis molestie. Vestibulum in lectus non enim bibendum laoreet at at libero. Etiam malesuada erat sed sem blandit in varius orci porttitor. Sed at sapien urna. Fusce augue ipsum, molestie et adipiscing at, varius quis enim. Morbi sed magna est, vel vestibulum urna. Sed tempor ipsum vel mi pretium at elementum urna tempor. Nulla faucibus consectetur felis, elementum venenatis mi mollis gravida. Aliquam mi ante, accumsan eu tempus vitae, viverra quis justo.\n\nProin feugiat augue in augue rhoncus eu cursus tellus laoreet. Pellentesque eu sapien at diam porttitor venenatis nec vitae velit. Donec ultrices volutpat lectus eget vehicula. Nam eu erat mi, in pulvinar eros. Mauris viverra porta orci, et vehicula lectus sagittis id. Nullam at magna vitae nunc fringilla posuere. Duis volutpat malesuada ornare. Nulla in eros metus. Vivamus a posuere libero.'
+
+	// Margins:
+	pdf.setDrawColor(0, 255, 0)
+		.setLineWidth(1/72)
+		.line(margin, margin, margin, 11 - margin)
+		.line(8.5 - margin, margin, 8.5-margin, 11-margin)
+
+	// the 3 blocks of text
+	for (var i in fonts){
+		if (fonts.hasOwnProperty(i)) {
+			font = fonts[i]
+			size = sizes[i]
+
+			lines = pdf.setFont(font[0], font[1])
+						.setFontSize(size)
+						.splitTextToSize(loremipsum, 7.5)
+			// Don't want to preset font, size to calculate the lines?
+			// .splitTextToSize(text, maxsize, options)
+			// allows you to pass an object with any of the following:
+			// {
+			// 	'fontSize': 12
+			// 	, 'fontStyle': 'Italic'
+			// 	, 'fontName': 'Times'
+			// }
+			// Without these, .splitTextToSize will use current / default
+			// font Family, Style, Size.
+			console.log(lines);
+			pdf.text(0.5, verticalOffset + size / 72, lines)
+
+			verticalOffset += (lines.length + 0.5) * size / 72
+		}
+	}
+
+	var string = pdf.output('datauristring');
+
+	$('iframe').attr('src', string);
+
+});
+</script>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,129 @@
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>jsPDF - Generate PDF files in pure JavaScript.</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="description" content="">
+		<meta name="author" content="">
+
+        <!-- Bootstrap -->
+		<link href="./examples/bootstrap/css/bootstrap.css" rel="stylesheet">
+		<link href="./examples/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
+
+        <!-- Editor CSS -->
+        <link href="./examples/css/editor.css" rel="stylesheet">
+
+        <!-- See closing body for JS -->
+
+	</head>
+
+	<body>
+		<div class="container">
+
+            <div class="masthead">
+                <div class="pull-right">
+                    <a class="btn btn-primary btn-large" href="#">Download Now</a>
+                    <p class="muted" style="text-align: center;">Version 0.9.0</p>
+
+                </div>
+                <h1 class="muted">jsPDF</h1>
+                <h4>HTML5 JavaScript PDF generator from <a href="http://twitter.com/MrRio">@MrRio</a></h4>
+            </div>
+
+            <div class="row-fluid">
+                <div class="span6" style="float: right">
+                    <iframe class="preview-pane" width="100%" height="650" frameborder="0"></iframe>
+                </div>
+                <div class="span5 no-gutter">
+
+                    <h2>Have a play.</h2>
+
+                    <p>Use this document as a way to quick start any new project.<br /> All you get is this message and a barebones HTML document.</p>
+                    <label for="template">Choose example</label>
+                    <select id="template" name="template">
+                        <option>hello-world.js</option>
+                    </select>
+                </div>
+
+                <div id="editor">var doc = new jsPDF();
+doc.text(10, 10, 'Hello world').</div>
+
+               <div class="controls">
+                    <div class="pull-right">
+                        <a href="#" class="btn btn-primary">Download PDF</a>
+                        <a href="#" class="btn btn-success">Run Code</a>
+                    </div>
+
+                    <label class="checkbox">
+                        <input type="checkbox" checked="checked"> Auto refresh on changes?
+                    </label>
+
+               </div>
+
+            </div>
+            <div class="clerfix"></div>
+            <div class="span12">
+
+                <h2>Credits</h2>
+
+                <p>Big thanks to Daniel Dotsenko from <a href="http://willow-systems.com">Willow Systems Corporation</a> for making huge contributions to the codebase. </p>
+
+                <p>Thanks to Ajaxian.com for <a href="http://ajaxian.com/archives/dynamically-generic-pdfs-with-javascript">featuring us back in 2009</a>.</p>
+
+                <p>Everyone else that's contributed patches or bug reports. You rock.</p>
+
+                <h2>License</h2>
+
+                <p>(MIT License)</p>
+
+                <p>Copyright (c) 2010-2012 James Hall, <a href="https://github.com/MrRio/jsPDF">https://github.com/MrRio/jsPDF</a></p>
+
+                <p>Permission is hereby granted, free of charge, to any person obtaining
+                a copy of this software and associated documentation files (the
+                "Software"), to deal in the Software without restriction, including
+                without limitation the rights to use, copy, modify, merge, publish,
+                distribute, sublicense, and/or sell copies of the Software, and to
+                permit persons to whom the Software is furnished to do so, subject to
+                the following conditions:</p>
+
+                <p>The above copyright notice and this permission notice shall be
+                included in all copies or substantial portions of the Software.</p>
+
+                <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+                EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+                MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+                NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+                LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+                OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+                WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
+
+
+            </div>
+
+		</div> <!-- /container -->
+
+        <footer>&copy; 2013 James Hall</footer>
+
+
+        <!-- Scripts down here -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+        <!-- Code editor -->
+        <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+
+        <!-- Scripts in development mode -->
+        <script type="text/javascript" src="jspdf.js"></script>
+        <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
+        <script type="text/javascript" src="./libs/BlobBuilder.js/BlobBuilder.js"></script>
+        <script type="text/javascript" src="./jspdf.plugin.addimage.js"></script>
+        <script type="text/javascript" src="./jspdf.plugin.from_html.js"></script>
+        <script type="text/javascript" src="./jspdf.plugin.sillysvgrenderer.js"></script>
+        <script type="text/javascript" src="./jspdf.plugin.split_text_to_size.js"></script>
+        <script type="text/javascript" src="./jspdf.plugin.standard_fonts_metrics.js"></script>
+
+        <!-- Editor -->
+        <script type="text/javascript" src="./examples/js/editor.js"></script>
+	</body>
+</html>