Issue #3 - First steps of the pdf print via pdfmake

generator/generator.html

@@ -28,6 +28,8 @@ <h2>A playset-editor for Fiasco, with <s>a</s> Mustache ...</h2>
  </div>
     <script src="http://code.jquery.com/jquery.js"></script>
     <script src="js/bootstrap.min.js"></script>
+    <script src="js/pdfmake.min.js"></script>
+    <script src="js/vfs_fonts.js"></script>
  </body>
  <script>
 
@@ -139,6 +141,65 @@ <h2>A playset-editor for Fiasco, with <s>a</s> Mustache ...</h2>
   saveAs(blob, "generated_template_" + $('#input_title').val());
 }
 
+/**********************/
+/*** PDF generation ***/
+/**********************/
+function generate_pdf()
+{
+  var jsonPlayset = get_generated_json();
+
+  var docDefinition = { 
+    content: [ ],
+    styles: {
+      sectionHeader: {
+        fontSize: 22,
+        bold: true,
+        marginBottom: 8
+      },
+      sectionFooter: {
+        fontSize: 20,
+        bold: true,
+        alignment: 'right',
+        marginTop: 5
+      },
+      category: {
+        fontSize: 14,
+        bold: true,
+        marginLeft: 10,
+        marginTop: 3,
+        marginBottom: 2
+      },
+      details: {
+        fontSize: 12,
+        marginLeft: 22,
+        marginTop: 1
+      }
+    }
+  };
+
+  // Generation of the Sections
+  for(var iSection = 0; iSection < jsonPlayset.sections.length; iSection++)
+  {
+    var currentSection = jsonPlayset.sections[iSection];
+    docDefinition.content.push({ text: currentSection.label + " ...", style: 'sectionHeader' });
+    for (var iCategory = 0; iCategory < currentSection.categories.length; iCategory++)
+    {
+      var currentCategory = currentSection.categories[iCategory];
+      docDefinition.content.push({ text: (iCategory + 1) + " - " + currentCategory.label, style: 'category' });
+      for (var iDetail = 0; iDetail < currentCategory.details.length; iDetail++)
+      {
+        var currentDetail = currentCategory.details[iDetail];
+        docDefinition.content.push({ text: (iDetail + 1) + " - " + currentDetail.label, style: 'details' });
+      }
+    }
+    docDefinition.content.push({ text: "... " + jsonPlayset.teaser, style: 'sectionFooter', pageBreak: 'after' });
+  }
+
+  pdfMake.createPdf(docDefinition).download();
+}
+
+/**********************/
+
 function save_json()
 {
   var blob = new Blob([JSON.stringify(get_generated_json())], {type: "text/plain;charset=utf-8"});
@@ -304,6 +365,7 @@ <h2>A playset-editor for Fiasco, with <s>a</s> Mustache ...</h2>
 
   // Click on the buttons
   $('#generate_button').click(function() { generate_mustache(); });
+  $('#to-pdf-button').click(function() { generate_pdf(); });
   $("#loadjson_button").click(function () { $("#file-load").click(); });
   $("#file-load").change(load_files);  
   $('#savejson_button').click(function() { save_json(); });

generator/html_template.mst

@@ -79,7 +79,8 @@
 
  <!-- Generation by Mustache of the playset with the help of a template -->
  <div id='section90' class='section'>
-	<div class='row'><p class='col-md-12'>Mustache template to use for the generation</p></div>
+	<div class='row'><button type="button" id='to-pdf-button' class="btn btn-primary col-md-offset-8 col-md-4">Print to PDF !</button></div>
+    <div class='row'><p class='col-md-12'>Mustache template to use for the generation</p></div>
 	<div class='row'><div class='col-md-10 col-md-offset-1'><textarea id='mustache_template' style='width:100%' rows='15' placeholder='Mustache template' required></textarea></div></div>
 	<div class='row'><button type="button" id='generate_button' class="btn btn-primary col-md-offset-8 col-md-4">Generate !</button></div>
  </div>