Update examples, make from HTML demo the first one

darionato · Jan 6, 2013 · 15e573d · 15e573d
1 parent 6ce1694
commit 15e573d
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 38 deletions.
diff --git a/examples/css/editor.css b/examples/css/editor.css
@@ -14,7 +14,7 @@ footer {
 	clear: left; 
 	position: relative;
 	font-family: "source-code-pro";
-	font-size: 16px;
+	font-size: 14px;
 }
 
 .controls {
@@ -24,3 +24,12 @@ footer {
 	padding-top: 10px;
 }
 
+#template {
+	width: 250px;
+}
+
+.tweet-buttons { 
+	float: left;
+	margin-right: 40px;
+	padding-top: 8px;
+}
diff --git a/examples/js/editor.js b/examples/js/editor.js
@@ -7,10 +7,11 @@ var jsPDFEditor = function() {
 	var editor;
 
 	var demos = {
+		'from-html.js': 'HTML Renderer (Early stages)',
+		'two-page.js': 'Two page Hello World',
 		'circles.js': 'Cicle',
 		'font-faces.js': 'Font faces',
 		'font-size.js': 'Font sizes',
-		'from-html.js': 'From HTML Plugin',
 		'images.js': 'Images',
 		//'kitchen-sink.js': 'Kitchen Sink', // @TODO
 		'landscape.js': 'Landscape',
@@ -19,7 +20,6 @@ var jsPDFEditor = function() {
 		'string-splitting.js': 'String Splitting',
 		'text-colors.js': 'Text colors',
 		'triangles.js': 'Triangles',
-		'two-page.js': 'Two page',
 		'user-input.js': 'User input'
 	};
 
@@ -41,7 +41,22 @@ var jsPDFEditor = function() {
 			}
 
 		});
-	}
+	};
+
+	var populateDropdown = function() {
+		var options = '';
+		for (var demo in demos) {
+			options += '<option value="' + demo + '">' + demos[demo] + '</option>';
+		}
+		$('#template').html(options).on('change', loadSelectedFile);
+
+	};
+
+	var loadSelectedFile = function() {
+		$.get('examples/js/' + $('#template').val(), function(response) {
+			editor.setValue(response)
+		});
+	};
 
 	return {
 		/**
@@ -53,6 +68,8 @@ var jsPDFEditor = function() {
 			// Init the ACE editor
 			aceEditor();
 
+			populateDropdown();
+			loadSelectedFile();
 			// Do the first update on init
 			jsPDFEditor.update();
 
@@ -66,7 +83,7 @@ var jsPDFEditor = function() {
 				eval(editor.getValue());
 				var string = doc.output('datauristring');
 
-				$('iframe').attr('src', string);
+				$('.preview-pane').attr('src', string);
 			}, 0);
 		}
 	};

diff --git a/examples/js/from-html.js b/examples/js/from-html.js
@@ -1,29 +1,15 @@
-var pdf = new jsPDF('p','in','letter')
+var doc = new jsPDF();
 
-// source can be HTML-formatted string, or a reference
-// to an actual DOM element from which the text will be scraped.
-, source = $('#fromHTMLtestdiv')[0]
-
-// we support special element handlers. Register them with jQuery-style 
-// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
-// There is no support for any other type of selectors 
-// (class, of compound) at this time.
-, specialElementHandlers = {
-	// element with id of "bypass" - jQuery style selector
-	'#bypassme': function(element, renderer){
-		// true = "handled elsewhere, bypass text extraction"
-		return true
+// We'll make our own renderer to skip this editor
+var specialElementHandlers = {
+	'#editor': function(element, renderer){
+		return true;
 	}
 };
 
-// all coords and widths are in jsPDF instance's declared units
-// 'inches' in this case
-pdf.fromHTML(
-	source // HTML string or DOM elem ref.
-	, 0.5 // x coord
-	, 0.5 // y coord
-	, {
-		'width':7.5 // max width of content on PDF
-		, 'elementHandlers': specialElementHandlers
-	}
-);
+// All units are in the set measurement for the document
+// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
+doc.fromHTML($('body').get(0), 15, 15, {
+	'width': 170, 
+	'elementHandlers': specialElementHandlers
+});
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
-		<title>jsPDF - Generate PDF files in pure JavaScript.</title>
+		<title>jsPDF - Create PDFs with HTML5 JavaScript Library</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<meta name="description" content="">
 		<meta name="author" content="">
@@ -25,8 +25,14 @@
 
             <div class="masthead">
                 <div class="pull-right">
+                    <div class="tweet-buttons">
+                        <a href="https://twitter.com/share" class="twitter-share-button" data-via="MrRio" data-size="large">Tweet</a>
+                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+                        <a href="https://twitter.com/MrRio" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @MrRio</a>
+                        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+                    </div>
                     <a class="btn btn-primary btn-large" href="https://github.com/MrRio/jsPDF/zipball/master">Download Now</a>
-                    <p class="muted" style="text-align: center;">Version 0.9.0</p>
+                    <p class="muted" style="text-align: right;">Version 0.9.0rc1</p>
 
                 </div>
                 <h1 class="muted">jsPDF</h1>
@@ -41,20 +47,18 @@ <h4>HTML5 JavaScript PDF generation library from <a href="http://twitter.com/MrR
 
                     <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>
+                    <p>A HTML5 client-side solution for generating PDFs. Perfect for tickets, reports, certificates, you name it! </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 id="editor" class="bypass"></div>
 
                <div class="controls">
                     <div class="pull-right">
-                        <a href="#" class="btn btn-primary">Download PDF</a>
-                        <a href="#" class="btn btn-primary">Download Code</a>
+                        <a href="#" class="btn btn-primary">Download Your Code</a>
                         <a href="#" class="btn btn-success">Run Code</a>
                     </div>
 
@@ -66,7 +70,7 @@ <h2>Have a play.</h2>
 
             </div>
             <div class="clerfix"></div>
-            <div class="span12">
+            <div class="span12 credits">
 
                 <h2>Credits</h2>