Download PDF button

darionato · Jan 7, 2013 · e07f98f · e07f98f
1 parent 041dcdd
commit e07f98f
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 31 deletions.
diff --git a/examples/css/editor.css b/examples/css/editor.css
@@ -37,4 +37,8 @@ footer {
 .source {
 	font-family: "source-code-pro", Courier;
 	font-size: 14px;
+}
+
+.controls .alert {
+	float: left;
 }
diff --git a/examples/js/editor.js b/examples/js/editor.js
@@ -7,12 +7,12 @@ var jsPDFEditor = function() {
 	var editor;
 
 	var demos = {
+		'images.js': 'Images',
+		'font-faces.js': 'Font faces',
 		'from-html.js': 'HTML Renderer (Early stages)',
 		'two-page.js': 'Two page Hello World',
 		'circles.js': 'Circles',
-		'font-faces.js': 'Font faces',
 		'font-size.js': 'Font sizes',
-		'images.js': 'Images',
 		//'kitchen-sink.js': 'Kitchen Sink', // @TODO
 		'landscape.js': 'Landscape',
 		'lines.js': 'Lines',
@@ -32,7 +32,8 @@ var jsPDFEditor = function() {
 		var timeout = setTimeout(function(){ }, 0);
 
 		editor.getSession().on('change', function() {
-			if ($('#auto-refresh').is(':checked')) {
+			// Hacky workaround to disable auto refresh on user input
+			if ($('#auto-refresh').is(':checked') && $('#template').val() != 'user-input.js') {
 				clearTimeout(timeout);
 				timeout = setTimeout(function() {
 					jsPDFEditor.update();
@@ -53,11 +54,42 @@ var jsPDFEditor = function() {
 	};
 
 	var loadSelectedFile = function() {
+		if ($('#template').val() == 'user-input.js') {
+			$('.controls .checkbox').hide();
+			$('.controls .alert').show();
+		} else {
+			$('.controls .checkbox').show();
+			$('.controls .alert').hide();
+		}
 		$.get('examples/js/' + $('#template').val(), function(response) {
-			editor.setValue(response)
+			editor.setValue(response);
+			editor.gotoLine(0);
 		});
 	};
 
+	var initAutoRefresh = function() {
+		$('#auto-refresh').on('change', function() {
+			if ($('#auto-refresh').is(':checked')) {
+				$('.run-code').hide();
+			} else {
+				$('.run-code').show();
+			}
+		});
+
+		$('.run-code').click(function() {
+			jsPDFEditor.update();
+			return false;
+		});
+	};
+
+	var initDownloadPDF = function() {
+		$('.download-pdf').click(function(){
+			eval(editor.getValue());
+			doc.save(demos[$('#template').val()] + '.pdf');
+		});
+		return false;
+	}
+
 	return {
 		/**
 		 * Start the editor demo
@@ -73,14 +105,19 @@ var jsPDFEditor = function() {
 			// Do the first update on init
 			jsPDFEditor.update();
 
+			initAutoRefresh();
+
+			initDownloadPDF();
 		},
 		/**
 		 * Updates the preview iframe
 		 * @return {void}
 		 */
-		update: function() {
+		update: function(skipEval) {
 			setTimeout(function() {
-				eval(editor.getValue());
+				if (! skipEval) {
+					eval(editor.getValue());
+				}
 				var string = doc.output('datauristring');
 
 				$('.preview-pane').attr('src', string);

diff --git a/examples/js/rectangles.js b/examples/js/rectangles.js
@@ -1,23 +1,30 @@
 var doc = new jsPDF();
 
-doc.rect(20, 20, 10, 10); // empty square
+// Empty square
+doc.rect(20, 20, 10, 10); 
 
-doc.rect(40, 20, 10, 10, 'F'); // filled square
+// Filled square
+doc.rect(40, 20, 10, 10, 'F');
 
+// Empty red square
 doc.setDrawColor(255,0,0);
-doc.rect(60, 20, 10, 10); // empty red square
+doc.rect(60, 20, 10, 10);
 
+// Filled square with red borders
 doc.setDrawColor(255,0,0);
-doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders
+doc.rect(80, 20, 10, 10, 'FD'); 
 
+// Filled red square
 doc.setDrawColor(0);
 doc.setFillColor(255,0,0);
-doc.rect(100, 20, 10, 10, 'F'); // filled red square
+doc.rect(100, 20, 10, 10, 'F'); 
 
+ // Filled red square with black borders
 doc.setDrawColor(0);
 doc.setFillColor(255,0,0);
-doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders
+doc.rect(120, 20, 10, 10, 'FD');
 
+// Black sqaure with rounded corners
 doc.setDrawColor(0);
 doc.setFillColor(255, 255, 255);
-doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); //  Black sqaure with rounded corners
+doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); 
diff --git a/examples/js/string-splitting.js b/examples/js/string-splitting.js
@@ -1,4 +1,6 @@
-var pdf = new jsPDF('p','in','letter')
+// @TODO: Need to simplify this demo
+
+var doc = new jsPDF('p','in','letter')
 , sizes = [12, 16, 20]
 , fonts = [['Times','Roman'],['Helvetica',''], ['Times','Italic']]
 , font, size, lines
@@ -7,7 +9,7 @@ var pdf = new jsPDF('p','in','letter')
 , 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)
+doc.setDrawColor(0, 255, 0)
 	.setLineWidth(1/72)
 	.line(margin, margin, margin, 11 - margin)
 	.line(8.5 - margin, margin, 8.5-margin, 11-margin)
@@ -18,7 +20,7 @@ for (var i in fonts){
 		font = fonts[i]
 		size = sizes[i]
 
-		lines = pdf.setFont(font[0], font[1])
+		lines = doc.setFont(font[0], font[1])
 					.setFontSize(size)
 					.splitTextToSize(loremipsum, 7.5)
 		// Don't want to preset font, size to calculate the lines?
@@ -31,8 +33,7 @@ for (var i in fonts){
 		// }
 		// Without these, .splitTextToSize will use current / default
 		// font Family, Style, Size.
-		console.log(lines);
-		pdf.text(0.5, verticalOffset + size / 72, lines)
+		doc.text(0.5, verticalOffset + size / 72, lines)
 
 		verticalOffset += (lines.length + 0.5) * size / 72
 	}

diff --git a/examples/js/user-input.js b/examples/js/user-input.js
@@ -1,9 +1,5 @@
-// Turn off auto-refresh
-$('#auto-refresh').attr('checked', null);
-
 var name = prompt('What is your name?');
-var multiplier = prompt('Enter a number:');
-multiplier = parseInt(multiplier);
+var multiplier = parseInt(prompt('Enter a number:'));
 
 var doc = new jsPDF();
 doc.setFontSize(22);	
@@ -20,11 +16,10 @@ doc.setFontSize(22);
 doc.text(20, 20, 'Answers');
 doc.setFontSize(16);
 
-
-
 for(var i = 1; i <= 12; i ++) {
 	doc.text(20, 30 + (i * 10), i + ' x ' + multiplier + ' = ' + (i * multiplier));
-}	
+}
 
-// Turn on auto-refresh
-$('#auto-refresh').attr('checked', 'checked');
+// You wouldn't normally call this - this is just to make the 
+// demo not look broken as we've disabled auto update.
+jsPDFEditor.update(true);
diff --git a/index.html b/index.html
@@ -47,10 +47,13 @@ <h4>HTML5 JavaScript PDF generation library from <a href="http://twitter.com/MrR
 
                     <h2>Have a play.</h2>
 
-                    <p>A HTML5 client-side solution for generating PDFs. Perfect for tickets, reports, certificates, you name it! </p>
+                    <p>A HTML5 client-side solution for generating PDFs. Perfect for event tickets, reports, certificates, you name it! </p>
+
+                    <p>No servers were used or harmed in this demo.</p>
+
                     <label for="template">Choose example</label>
                     <select id="template" name="template">
-                        <option>hello-world.js</option>
+                        <option>Hold your horses...</option>
                     </select>
                 </div>
 
@@ -59,12 +62,17 @@ <h2>Have a play.</h2>
                <div class="controls">
                     <div class="pull-right">
                         <a href="#" class="btn btn-primary">Download Your Code</a>
-                        <a href="#" class="btn btn-success">Run Code</a>
+                        <a href="#" class="btn btn-primary download-pdf">Download PDF</a>
                     </div>
 
                     <label class="checkbox">
                         <input type="checkbox" id="auto-refresh" checked="checked"> Auto refresh on changes?
                     </label>
+                    <a href="#" class="run-code hide btn btn-success">Run Code</a>
+
+                    <div class="alert hide">
+                        Auto refresh is turned off for this example
+                    </div>
 
                </div>