patrick/KaTeX
1
0
Fork 0
mirror of https://github.com/Smaug123/KaTeX synced 2025-10-05 11:18:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add display/displayMode toggle on test page (#1193)

Browse Source 
* Add display/displayMode toggle on test page

* Fix #1035
* Refactor query parsing code to promote re-use
* Also add support for (unescaped) single-character macros

* Rewrite to use query-string

* Restore modes on package*json
This commit is contained in:
Erik Demaine
2018-03-11 20:15:09 -04:00
committed by Kevin Barabash
parent b148d5da71
commit 75b55a63b1
3 changed files with 90 additions and 997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1033
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -44,6 +44,7 @@
"object-assign": "^4.1.0", "object-assign": "^4.1.0",
"pako": "1.0.4", "pako": "1.0.4",
"pre-commit": "^1.2.2", "pre-commit": "^1.2.2",
"query-string": "^5.1.0",
"rimraf": "^2.6.2", "rimraf": "^2.6.2",
"selenium-webdriver": "^2.48.2", "selenium-webdriver": "^2.48.2",
"sri-toolbox": "^0.2.0", "sri-toolbox": "^0.2.0",

53
static/main.js
View File

@@ -4,6 +4,7 @@
*/ */
import katex from '../katex.webpack.js'; import katex from '../katex.webpack.js';
import './main.css'; import './main.css';
import queryString from 'query-string';
function init() { function init() {
const input = document.getElementById("input"); const input = document.getElementById("input");
@@ -13,52 +14,56 @@ function init() {
input.addEventListener("input", reprocess, false); input.addEventListener("input", reprocess, false);
permalink.addEventListener("click", setSearch); permalink.addEventListener("click", setSearch);
let match = (/(?:^\?|&)text=([^&]*)/).exec(window.location.search); const options = {displayMode: true, macros: {}};
if (match) { const query = queryString.parse(window.location.search);
input.value = decodeURIComponent(match[1]);
if (query.text) {
input.value = query.text;
} }
const macros = {}; // Use `display=0` or `displayMode=0` (or `=f`/`=false`/`=n`/`=no`)
// TODO: Add toggle for displayMode. // to turn off displayMode (which is on by default).
// https://github.com/Khan/KaTeX/issues/1035 const displayQuery = (query.displayMode || query.display);
const options = {displayMode: true}; if (displayQuery && displayQuery.match(/^(0|f|n)/)) {
const macroRegex = /(?:^\?|&)(?:\\|%5[Cc])([A-Za-z]+)=([^&]*)/g; options.displayMode = false;
let macroString = "";
while ((match = macroRegex.exec(window.location.search)) !== null) {
options.macros = macros;
macros["\\" + match[1]] = decodeURIComponent(match[2]);
macroString += "&" + match[0].substr(1);
} }
// The `before` search parameter puts normal text before the math. // The `before` or `pre` search parameter puts normal text before the math.
// The `after` search parameter puts normal text after the math. // The `after` or `post` search parameter puts normal text after the math.
// Example use: testing baseline alignment. // Example use: testing baseline alignment.
if (/(?:^\?|&)(?:before|after)=/.test(window.location.search)) { if (query.before || query.after || query.pre || query.post) {
const mathContainer = math; const mathContainer = math;
mathContainer.id = "math-container"; mathContainer.id = "math-container";
if ((match = /(?:^\?|&)before=([^&]*)/.exec(window.location.search))) { if (query.before || query.pre) {
const before = document.createTextNode(decodeURIComponent(match[1])); const before = document.createTextNode(query.before || query.pre);
mathContainer.appendChild(before); mathContainer.appendChild(before);
macroString += "&" + match[0].substr(1);
} }
math = document.createElement("span"); math = document.createElement("span");
math.id = "math"; math.id = "math";
mathContainer.appendChild(math); mathContainer.appendChild(math);
if ((match = /(?:^\?|&)after=([^&]*)/.exec(window.location.search))) { if (query.after || query.post) {
const after = document.createTextNode(decodeURIComponent(match[1])); const after = document.createTextNode(query.after || query.post);
mathContainer.appendChild(after); mathContainer.appendChild(after);
macroString += "&" + match[0].substr(1);
} }
} }
// Macros can be specified via `\command=expansion` or single-character
// `c=expansion`.
Object.getOwnPropertyNames(query).forEach((key) => {
if (key.match(/^\\|^[^]$/)) {
options.macros[key] = query[key];
}
});
reprocess(); reprocess();
function setSearch() { function setSearch() {
window.location.search = const query = queryString.parse(window.location.search);
"?text=" + encodeURIComponent(input.value) + macroString; query.text = input.value;
window.location.search = queryString.stringify(query);
} }
function reprocess() { function reprocess() {