Last active
July 28, 2023 11:54
-
-
Save WojtekCodesToday/189f771ce6d167eb70166b877f978169 to your computer and use it in GitHub Desktop.
Pandoa on the Browser!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Pandoa on the Web</title> | |
</head> | |
<body> | |
<textarea id="input"></textarea> | |
<button id="optimize">Optimize!</button> | |
<div id=options> | |
<input type="checkbox" id="allow-jsx" value=JSX>Allow JSX</input><br/> | |
<input type="checkbox" id="math-opt" value=JSX>Math optimizations</input><br/> | |
<input type="checkbox" id="oper-opt" value=JSX>Math operator optimizations</input> | |
</div> | |
<br /> | |
<textarea disabled id="output"></textarea> | |
<style> | |
body { | |
background-color: #fff; | |
font-family: monospace; | |
} | |
#options { | |
position: absolute; | |
top: 0; | |
right: 0; | |
margin-right: 10px; | |
margin-top: 55px; | |
overflow:visible; | |
width: 130px; | |
text-align: center; | |
} | |
input[type=checkbox]:hover { | |
accent-color: #000; | |
} | |
input[type=checkbox]:checked { | |
accent-color: rgb(160, 233, 255); | |
} | |
#input { position: absolute; left: 0; right: 0; margin-left: 10px; margin-right: 150px; border-width: 1px; height: 50%; font-family: monospace; resize: none;} | |
#output { position: absolute; font-family: monospace; margin: 10px; margin-top: calc(25%); border-width: 1px; left: 0; right: 0; top: 0; bottom: 0; resize: none; border-color: rgb(172, 172, 172); background-color: #e2e2e2; } | |
#optimize { border-style:solid; border-width: 1px; position: absolute; margin-right: 10px; right: 0; height: 40px; width: 130px; } | |
#optimize:hover {background-color: rgb(194, 194, 194)} | |
</style> | |
<script type="module"> | |
//Pandoa itself, latest because might not update website | |
import pandoa from "https://unpkg.com/pandoa/index.js"; | |
//Optimization button | |
function Optimize() { if (document.getElementById("input").value !== "") { document.getElementById("output").value = pandoa.closure(document.getElementById("input").value) } else { document.getElementById("output").value = "try 1+1, empty input." } } | |
//Default settings | |
document.getElementById("allow-jsx").checked = false; | |
document.getElementById("math-opt").checked = true; document.getElementById("oper-opt").checked = true; | |
//Events | |
document.getElementById("allow-jsx").addEventListener("change", function () { pandoa.useJSX = this.checked }); | |
document.getElementById("math-opt").addEventListener("change", function () { pandoa.mathOptimizations = this.checked }); | |
document.getElementById("oper-opt").addEventListener("change", function () { pandoa.mathOperatorOptmizations = this.checked }); | |
document.getElementById("optimize").addEventListener("click", Optimize); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment