diff options
| author | John MacFarlane <[email protected]> | 2022-08-25 19:48:01 -0700 |
|---|---|---|
| committer | John MacFarlane <[email protected]> | 2022-08-25 19:48:01 -0700 |
| commit | 30277dc2f21785f4ebed48896f2032cbce66e321 (patch) | |
| tree | 6ac0c48157431196da031077e377e78a915659e3 | |
| parent | 6b8250f7524671d623626a9660d86475f18edee1 (diff) | |
trypandoc: allow custom templates.
| -rw-r--r-- | trypandoc/examples.js | 24 | ||||
| -rw-r--r-- | trypandoc/index.html | 22 | ||||
| -rw-r--r-- | trypandoc/trypandoc.js | 23 |
3 files changed, 57 insertions, 12 deletions
diff --git a/trypandoc/examples.js b/trypandoc/examples.js index abe7e5eca..a1f5a3bbe 100644 --- a/trypandoc/examples.js +++ b/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> +` } } diff --git a/trypandoc/index.html b/trypandoc/index.html index 30420dda6..eb82c8636 100644 --- a/trypandoc/index.html +++ b/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"> diff --git a/trypandoc/trypandoc.js b/trypandoc/trypandoc.js index 3de0cde99..02ae394a0 100644 --- a/trypandoc/trypandoc.js +++ b/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(); |