trypandoc: allow custom templates.

trypandoc/examples.js

@@ -685,7 +685,29 @@ These are all pretty interesting facts.
     from: 'latex',
     to: 'docbook5',
     ['html-math-method']: 'mathml',
-    standalone: true }
+    standalone: true },
+
+  ["Custom template"]:
+  { text: `---
+keywords:
+- bee
+- ant
+- ladybug
+author: E. N. Tymologist
+title: Some bugs
+...
+
+This is a book about bugs.`,
+    from: 'markdown',
+    to: 'html5',
+    standalone: true,
+    template: `<h1>$title$</h1>
+<p>by $author$</p>
+<p>Keywords: $for(keywords)$$it$$sep$; $endfor$</p>
+<main>
+$body$
+</main>
+` }
 }
 
 

trypandoc/index.html

@@ -11,7 +11,7 @@
     h1 { margin-bottom: 1em; font-size: 166%; margin: 0; padding: 6pt; }
     h1 a { text-decoration: none; color: inherit; }
     label { font-weight: 600; }
-    textarea { height: auto; font-family: monospace; font-size: 10pt; margin-top: 15px; min-height: 65vh; width: 44vw; }
+    textarea { height: auto; font-family: monospace; font-size: 10pt; margin-top: 15px; min-height: 45vh; width: 44vw; }
     div.alert { margin: 1em; }
     div#errors { width: 100%; color: red; font-weight: 600; padding-top: 6pt; padding-bottom: 6pt; display: none; }
     pre#results { width: 100%; margin-top: 0; min-height: 65vh; width: 44vw; }
@@ -31,6 +31,7 @@
     span.filename { }
     #convert { margin-left: 0; }
     div.file textarea { margin-top: 0; }
+    #customtemplate { display: none; }
   </style>
 </head>
 <body>
@@ -101,22 +102,23 @@
       <span>Input</span>
       <button onclick="clearText()">clear</button>
       <input id="loadfile" type="file" />
-      <!-- <label for="supportfile">+ Support</label>
-      <input id="supportfile" type="file" /> -->
       <br/>
-      <!-- <div id="tabs">
-        <span class="tab"><a onclick="showFile('stdin')">stdin</a></span>
-        <span id="files">
-        </span>
-      </div>
-      -->
-      <textarea id="text" rows="15" placeholder="Type in this box and press Convert, or select an example..."></textarea>
+      <textarea id="text" placeholder="Type in this box and press Convert, or select an example..."></textarea>
       <br/>
       <div id="files">
       </div>
       <br/>
       <label for="addfile">Add support file</label>
       <input id="addfile" type="file" />
+      <br/>
+      <label for="template">Template</label>
+      <select id="template">
+        <option selected value="default">Default</option>
+        <option value="custom">Custom</option>
+      </select>
+      <div id="customtemplate">
+        <textarea id="templatetext"></textarea>
+      </div>
     </div>
     <div id="topane">
       <label for="to">

trypandoc/trypandoc.js

@@ -9,6 +9,7 @@ function resetParams() {
   params.citeproc = false;
   params["html-math-method"] = "plain";
   params.files = {};
+  params.template = null;
 };
 
 var params = {};
@@ -123,6 +124,15 @@ function convert() {
 
 function setFormFromParams() {
     document.getElementById("text").value = params.text;
+    if (params.template) {
+      document.getElementById("templatetext").value = params.template;
+      document.getElementById("template").value = "custom";
+      document.getElementById("customtemplate").style.display = "block";
+    } else {
+      document.getElementById("templatetext").value = "";
+      document.getElementById("template").value = "default";
+      document.getElementById("customtemplate").style.display = "none";
+    }
     document.getElementById("from").value = params.from;
     document.getElementById("to").value = params.to;
     document.getElementById("standalone").checked = params.standalone;
@@ -201,7 +211,18 @@ function readFile(file, callback) {
       params["html-math-method"] = e.target.value;
       convert();
     }
-
+    document.getElementById("template").onchange = (e) => {
+      if (e.target.value == "custom") {
+        document.getElementById("customtemplate").style.display = "block";
+        params.template = document.getElementById("templatetext").value;
+      } else {
+        params.template = null;
+        document.getElementById("customtemplate").style.display = "none";
+      }
+    }
+    document.getElementById("templatetext").onchange = (e) => {
+      params.template = e.target.value;
+    }
     document.getElementById("examples").onchange = (e) => {
       let newparams = examples[e.target.value];
       resetParams();