Add PDF export feature

src/index.html

@@ -31,6 +31,10 @@ <h1>Try Yarn Spinner <span id="header-beta">(beta)</span></h1>
                   id="yarn-spinner-version-value"></span></span></small></p>
       </div>
       <div class="col text-end">
+        <button type="button" class="d-none btn btn-primary" id="button-download-pdf">
+          <img id="button-download-pdf-icon" markup-inline height="24" src="<%= require('./img/Page-DownArrow.svg') %>"/>
+          <div id="button-download-pdf-spinner" class="d-none spinner-border spinner-border-sm"></div>
+          Save as Book</button>
         <button type="button" class="btn btn-primary" id="button-save-script"><img markup-inline height="24" src="<%= require('./img/DownArrow-from-Tray.svg') %>"/>Save Script</button>
         <button type="button" class="btn btn-primary" id="button-export-runner"><img markup-inline height="24px" src="<%= require('./img/UpArrow-from-Tray.svg') %>"/>Export Player</button>
         <button type="button" class="btn btn-primary" id="button-test"><img markup-inline height="24px" src="<%= require('./img/Play.svg') %>"/> Test</button>

src/index.ts

@@ -1,5 +1,11 @@
 import  { initialContent } from './starter-content'
 
+// Hide the PDF button if 'pdf' is not part of the query
+let params = new URLSearchParams(window.location.search);
+if (params.has("pdf")) {
+    document.getElementById("button-download-pdf").classList.remove("d-none");
+}
+
 window.addEventListener('load', async function () {
 
     // First, determine what content we want to load. If the url contains a
@@ -15,12 +21,14 @@ window.addEventListener('load', async function () {
         contentName = hashComponents[0]
     }
 
+
+
     // Wait for the playground module to finish being downloaded, and then
     // import it. Once that's done, load the playground with the content that we
     // selected.
     const playground = await import("./playground");
     await playground.load(contentName);
-    
+
     // Hide the loading element, which is visible before any script runs.
     global.document.getElementById("loader").classList.add("d-none");
 

src/playground.ts

@@ -350,7 +350,46 @@ export async function load (initialContentName : string = "default") {
         const fileName = "Runner.html";
         downloadFile(html, fileName);
 
-    })
+    });
+
+    let pdfDownloadInProgress = false;
+
+    document.getElementById("button-download-pdf").addEventListener("click", async => {
+        if (pdfDownloadInProgress) {
+            return;
+        }
+
+        pdfDownloadInProgress = true;
+        const pdfServer = 'https://books-generator.yarnspinner.dev';
+        const pdfEndpoint = pdfServer + '/get-pdf';
+
+        var source = editor.getModel().getValue();
+
+        const icon = document.getElementById("button-download-pdf-icon");
+        const spinner = document.getElementById("button-download-pdf-spinner");
+
+        icon.classList.add("d-none");
+        spinner.classList.remove("d-none");
+
+        fetch(pdfEndpoint, {
+            method: 'POST',
+            body: source,
+        }).then(async (response) => {
+            if (response.status !== 200) {
+
+                console.error(await response.text());
+                alert("Sorry, there was a problem downloading your PDF.");
+                return;
+            }
+            var blob = await response.blob();
+            downloadFile(blob, "YarnSpinner-Book.pdf");
+        }).finally(() => {
+            icon.classList.remove("d-none");
+            spinner.classList.add("d-none");
+
+            pdfDownloadInProgress = false
+        });
+    });
 
     // Finally, compile our source immediately.
     compileSource();
@@ -402,7 +441,7 @@ async function compileSource() {
     }
 }
 
-function downloadFile(source: string, fileName: string) {
+function downloadFile(source: string | Blob, fileName: string) {
     if (window.navigator && (window.navigator as any).msSaveOrOpenBlob) {
         // IE11 support
         let blob = new Blob([source], { type: "application/octet-stream" });