Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add KaTeX options menu for the test server #3863

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+136 −13
Open

feat: add KaTeX options menu for the test server #3863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
82 changes: 70 additions & 12 deletions static/index.html
View file
Open in desktop
@@ -1,17 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KaTeX Test</title>
<script defer src="/main.js" type="text/javascript"></script>
</head>
<body>
<textarea id="input" rows="5">
<!-- referenced from issue #1615 -->
<head>
<meta charset="UTF-8">
<title>KaTeX Test</title>
<script defer src="/main.js" type="text/javascript"></script>
</head>

<body>
<textarea id="input" rows="5">
\left( x \right) \left( x^2 \right) % comment
\left( \frac{a}{b} \right) \left( \frac{a^2}{b} \right)
\left( \dfrac{a}{b} \right) \left( \dfrac{a^2}{b} \right)
</textarea>
<div id="math"></div>
<input id="permalink" type="button" value="permalink">
</body>
</html>
</textarea>
<div id="math"></div>
<input id="permalink" type="button" value="permalink">
<div id="options-panel">
<h3>KaTeX Options</h3>
<table>
<tr>
<td><label for="displayMode">displayMode</label></td>
<td><input type="checkbox" id="displayMode" checked /></td>
</tr>
<tr>
<td><label for="leqno">leqno</label></td>
<td><input type="checkbox" id="leqno" /></td>
</tr>
<tr>
<td><label for="fleqn">fleqn</label></td>
<td><input type="checkbox" id="fleqn" /></td>
</tr>
<tr>
<td><label for="throwOnError">throwOnError</label></td>
<td><input type="checkbox" id="throwOnError" checked /></td>
</tr>
<tr>
<td><label for="errorColor">errorColor</label></td>
<td><input type="color" id="errorColor" value="#cc0000" /></td>
</tr>
<tr>
<td><label for="strict">strict</label></td>
<td>
<select id="strict">
<option value="error">error</option>
<option value="warn" selected>warn</option>
<option value="ignore">ignore</option>
</select>
</td>
</tr>
<tr>
<td><label for="output">output</label></td>
<td>
<select id="output">
<option value="htmlAndMathml" selected>htmlAndMathml</option>
<option value="html">html

<option value="mathml">mathml</option>
</select>
</td>
</tr>
<tr>
<td><label for="trust">trust</label></td>
<td><input type="checkbox" id="trust" /></td>
</tr>
</table>
<h4><label for="macros">macros</label></h4>
<textarea id="macros" placeholder="JSON">
{
"\\f": "#1f(#2)"
}</textarea>
</div>
</body>

</html>
67 changes: 66 additions & 1 deletion static/main.js
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@ function init() {
input.addEventListener("input", reprocess, false);
permalink.addEventListener("click", setSearch);

const options = {displayMode: true, throwOnError: true, trust: true};
let options = {displayMode: true, throwOnError: true, trust: true};
const macros = {};
const query = queryString.parse(window.location.search);

Expand Down Expand Up @@ -85,15 +85,80 @@ function init() {
}
});

// This sets default values
// Initialize an empty array to store the options as strings
const optionElements = [];

// Init array with ids of each option
const optionIds = ["displayMode", "leqno", "fleqn", "throwOnError",
"errorColor", "strict", "output", "trust", "macros"];

// Loop through each option ID
for (const id of optionIds) {

const element = document.getElementById(id);
// If value of element changes, call reprocess function
element.addEventListener("change", reprocess);
if (element.type === "checkbox") {
// if checkbox set its checked state based on options[id]
element.checked = options[id];
} else if (options[id]) {
// If id property of options is defined
if (element.placeholder === "JSON") {
// check if placeholder is "JSON"
// this means it is macros
// convert Js object to JSON string
element.value = JSON.stringify(options[id]);
} else {
//if not defined
element.value = options[id];
}
}

// Add the processed element to the optionElements array
optionElements.push(element);
}


reprocess();

function changeOption() {
// Init empty object options
const options = {};

// Loop through each element in optionElements
for (const element of optionElements) {
let val;

// Check the type of the element
if (element.type === "checkbox") {
// if checkbox, value is set to true or false
val = element.checked;
} else if (element.placeholder === "JSON") {
// if placeholder JSON, then element is macros
// parse the JSON input entered into the macro
val = element.value ? JSON.parse(element.value) : undefined;
} else {
// For rest of the elements, set val to the value of the element
val = element.value;
}

// Set id of each element in the options object to its current val
options[element.id] = val;
}

return options;
}


function setSearch() {
const query = queryString.parse(window.location.search);
query.text = input.value;
window.location.search = queryString.stringify(query);
}

function reprocess() {
options = changeOption();
// Ignore changes to global macros caused by the expression
options.macros = Object.assign({}, macros);
try {
Expand Down