Skip to content

Instantly share code, notes, and snippets.

@J3698
Last active September 6, 2021 18:56
Show Gist options
  • Save J3698/e9b8a6e6c8ceaf4bce5d2b5cd7672245 to your computer and use it in GitHub Desktop.
Save J3698/e9b8a6e6c8ceaf4bce5d2b5cd7672245 to your computer and use it in GitHub Desktop.
Add Extexify UI Pane
function addExtexifyPane() {
const editor = document.getElementById("editor")
const extexifyPane = document.createElement("div");
extexifyPane.classList.add("extexify-pane")
editor.appendChild(extexifyPane)
const backdrop = document.createElement("div");
backdrop.classList.add("extexify-backdrop")
editor.appendChild(backdrop)
extexifyPane.innerHTML = `
<div style = "padding: 11px; padding-top: 5px;">Draw a symbol below</div>
<div>
<canvas id = "extexify-canvas"></canvas>
</div>
<div style="font-size: 80%;">Click to Copy</div>
<div class="predictions">
<span class="prediction-wrapper">
<span class="prediction">
<span class="totex"> </span>
<span class="actual"></span>
</span>
</span>
<span class="prediction-wrapper">
<span class="prediction">
<span class="totex"> </span>
<span class="actual"></span>
</span>
</span>
<span class="prediction-wrapper">
<span class="prediction">
<span class="totex"> </span>
<span class="actual"></span>
</span>
</span>
<span class="prediction-wrapper">
<span class="prediction">
<span class="totex"> </span>
<span class="actual"></span>
</span>
</span>
<span class="prediction-wrapper">
<span class="prediction">
<span class="totex"> </span>
<span class="actual"></span>
</span>
</span>
<div>
`
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment