Skip to content

Commit 15e573d

Browse files
MrRioMrRio
committed
Update examples, make from HTML demo the first one
1 parent 6ce1694 commit 15e573d

4 files changed

Lines changed: 54 additions & 38 deletions

File tree

‎examples/css/editor.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ footer {
1414
clear: left;
1515
position: relative;
1616
font-family: "source-code-pro";
17-
font-size: 16px;
17+
font-size: 14px;
1818
}
1919

2020
.controls {
@@ -24,3 +24,12 @@ footer {
2424
padding-top: 10px;
2525
}
2626

27+
#template {
28+
width: 250px;
29+
}
30+
31+
.tweet-buttons {
32+
float: left;
33+
margin-right: 40px;
34+
padding-top: 8px;
35+
}

‎examples/js/editor.js‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ var jsPDFEditor = function() {
77
var editor;
88

99
var demos = {
10+
'from-html.js': 'HTML Renderer (Early stages)',
11+
'two-page.js': 'Two page Hello World',
1012
'circles.js': 'Cicle',
1113
'font-faces.js': 'Font faces',
1214
'font-size.js': 'Font sizes',
13-
'from-html.js': 'From HTML Plugin',
1415
'images.js': 'Images',
1516
//'kitchen-sink.js': 'Kitchen Sink', // @TODO
1617
'landscape.js': 'Landscape',
@@ -19,7 +20,6 @@ var jsPDFEditor = function() {
1920
'string-splitting.js': 'String Splitting',
2021
'text-colors.js': 'Text colors',
2122
'triangles.js': 'Triangles',
22-
'two-page.js': 'Two page',
2323
'user-input.js': 'User input'
2424
};
2525

@@ -41,7 +41,22 @@ var jsPDFEditor = function() {
4141
}
4242

4343
});
44-
}
44+
};
45+
46+
var populateDropdown = function() {
47+
var options = '';
48+
for (var demo in demos) {
49+
options += '<option value="' + demo + '">' + demos[demo] + '</option>';
50+
}
51+
$('#template').html(options).on('change', loadSelectedFile);
52+
53+
};
54+
55+
var loadSelectedFile = function() {
56+
$.get('examples/js/' + $('#template').val(), function(response) {
57+
editor.setValue(response)
58+
});
59+
};
4560

4661
return {
4762
/**
@@ -53,6 +68,8 @@ var jsPDFEditor = function() {
5368
// Init the ACE editor
5469
aceEditor();
5570

71+
populateDropdown();
72+
loadSelectedFile();
5673
// Do the first update on init
5774
jsPDFEditor.update();
5875

@@ -66,7 +83,7 @@ var jsPDFEditor = function() {
6683
eval(editor.getValue());
6784
var string = doc.output('datauristring');
6885

69-
$('iframe').attr('src', string);
86+
$('.preview-pane').attr('src', string);
7087
}, 0);
7188
}
7289
};

‎examples/js/from-html.js‎

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,15 @@
1-
var pdf = new jsPDF('p','in','letter')
1+
var doc = new jsPDF();
22

3-
// source can be HTML-formatted string, or a reference
4-
// to an actual DOM element from which the text will be scraped.
5-
, source = $('#fromHTMLtestdiv')[0]
6-
7-
// we support special element handlers. Register them with jQuery-style
8-
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
9-
// There is no support for any other type of selectors
10-
// (class, of compound) at this time.
11-
, specialElementHandlers = {
12-
// element with id of "bypass" - jQuery style selector
13-
'#bypassme': function(element, renderer){
14-
// true = "handled elsewhere, bypass text extraction"
15-
return true
3+
// We'll make our own renderer to skip this editor
4+
var specialElementHandlers = {
5+
'#editor': function(element, renderer){
6+
return true;
167
}
178
};
189

19-
// all coords and widths are in jsPDF instance's declared units
20-
// 'inches' in this case
21-
pdf.fromHTML(
22-
source // HTML string or DOM elem ref.
23-
, 0.5 // x coord
24-
, 0.5 // y coord
25-
, {
26-
'width':7.5 // max width of content on PDF
27-
, 'elementHandlers': specialElementHandlers
28-
}
29-
);
10+
// All units are in the set measurement for the document
11+
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
12+
doc.fromHTML($('body').get(0), 15, 15, {
13+
'width': 170,
14+
'elementHandlers': specialElementHandlers
15+
});

‎index.html‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<html lang="en">
44
<head>
55
<meta charset="utf-8">
6-
<title>jsPDF - Generate PDF files in pure JavaScript.</title>
6+
<title>jsPDF - Create PDFs with HTML5 JavaScript Library</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<meta name="description" content="">
99
<meta name="author" content="">
@@ -25,8 +25,14 @@
2525

2626
<div class="masthead">
2727
<div class="pull-right">
28+
<div class="tweet-buttons">
29+
<a href="https://twitter.com/share" class="twitter-share-button" data-via="MrRio" data-size="large">Tweet</a>
30+
<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>
31+
<a href="https://twitter.com/MrRio" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @MrRio</a>
32+
<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>
33+
</div>
2834
<a class="btn btn-primary btn-large" href="https://github.com/MrRio/jsPDF/zipball/master">Download Now</a>
29-
<p class="muted" style="text-align: center;">Version 0.9.0</p>
35+
<p class="muted" style="text-align: right;">Version 0.9.0rc1</p>
3036

3137
</div>
3238
<h1 class="muted">jsPDF</h1>
@@ -41,20 +47,18 @@ <h4>HTML5 JavaScript PDF generation library from <a href="http://twitter.com/MrR
4147

4248
<h2>Have a play.</h2>
4349

44-
<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>
50+
<p>A HTML5 client-side solution for generating PDFs. Perfect for tickets, reports, certificates, you name it! </p>
4551
<label for="template">Choose example</label>
4652
<select id="template" name="template">
4753
<option>hello-world.js</option>
4854
</select>
4955
</div>
5056

51-
<div id="editor">var doc = new jsPDF();
52-
doc.text(10, 10, 'Hello world');</div>
57+
<div id="editor" class="bypass"></div>
5358

5459
<div class="controls">
5560
<div class="pull-right">
56-
<a href="#" class="btn btn-primary">Download PDF</a>
57-
<a href="#" class="btn btn-primary">Download Code</a>
61+
<a href="#" class="btn btn-primary">Download Your Code</a>
5862
<a href="#" class="btn btn-success">Run Code</a>
5963
</div>
6064

@@ -66,7 +70,7 @@ <h2>Have a play.</h2>
6670

6771
</div>
6872
<div class="clerfix"></div>
69-
<div class="span12">
73+
<div class="span12 credits">
7074

7175
<h2>Credits</h2>
7276

0 commit comments

Comments
 (0)