arnekeller/Typicalc
1
0
Fork 0
mirror of https://gitlab.kit.edu/uskyk/typicalc.git synced 2024-11-09 10:50:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Step label hover effect (PoC)

Browse Source 
see issue #5
This commit is contained in:
Arne Keller 2021-06-28 14:46:22 +02:00
parent 5b4bf4f583
commit e621875ea4
1 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/mathjax-setup.js
View File

@ -114,6 +114,7 @@ window.MathJax = {
root.querySelector("mjx-head").appendChild(hoverStyles); root.querySelector("mjx-head").appendChild(hoverStyles);
} }
// set the size of the rendered SVG to the size of the container element // set the size of the rendered SVG to the size of the container element
// enlarge hover area of certain elements
if (!root.querySelector("#style-fixes")) { if (!root.querySelector("#style-fixes")) {
const style = document.createElement('style'); const style = document.createElement('style');
style.innerHTML = "\ style.innerHTML = "\
@ -123,7 +124,7 @@ window.MathJax = {
mjx-container {\ mjx-container {\
margin: 0 !important;\ margin: 0 !important;\
}\ }\
.typicalc-type {\ .typicalc-type, g[semantics='bspr_prooflabel:left'] {\
stroke: transparent; stroke-width: 600px; pointer-events: all;\ stroke: transparent; stroke-width: 600px; pointer-events: all;\
}"; }";
style.innerHTML += "svg { width: 100%; }"; style.innerHTML += "svg { width: 100%; }";
@ -133,37 +134,41 @@ window.MathJax = {
if (callback) { if (callback) {
callback(html); callback(html);
} }
// listen for hover events on types const handleMouseEvent = (e, mouseIn) => {
// the class "typicalc-type" is set in LatexCreatorType
root.querySelector("#step0").addEventListener("mouseover", e => {
let typeTarget = e.target; let typeTarget = e.target;
let counter = 0; let counter = 0;
while (!typeTarget.classList.contains("typicalc-type")) { while (!typeTarget.classList.contains("typicalc-type")
&& typeTarget.getAttribute("semantics") !== "bspr_prooflabel:left") {
typeTarget = typeTarget.parentElement; typeTarget = typeTarget.parentElement;
counter++; counter++;
if (counter > 3) { if (counter > 4) {
return; return;
} }
} }
const typeClass = typeTarget.classList[1]; let isType = typeTarget.classList.contains("typicalc-type");
hoverStyles.innerHTML = "." + typeClass + " { color: red; }"; let isLabel = typeTarget.getAttribute("semantics") === "bspr_prooflabel:left";
if (mouseIn) {
if (isType) {
const typeClass = typeTarget.classList[1];
hoverStyles.innerHTML = "." + typeClass + " { color: red; }";
} else if (isLabel) {
typeTarget.style.color = "green";
}
} else {
if (isType) {
hoverStyles.innerHTML = "";
} else if (isLabel) {
typeTarget.style.color = null;
}
}
};
// listen for hover events on types
// the class "typicalc-type" is set in LatexCreatorType and in LatexCreatorTerm
root.querySelector("#step0").addEventListener("mouseover", e => {
handleMouseEvent(e, true);
}); });
root.querySelector("#step0").addEventListener("mouseout", e => { root.querySelector("#step0").addEventListener("mouseout", e => {
let typeTarget = e.target; handleMouseEvent(e, false);
let counter = 0;
while (!typeTarget.classList.contains("typicalc-type")) {
typeTarget = typeTarget.parentElement;
counter++;
if (counter > 3) {
return;
}
}
if (!typeTarget.classList.contains("typicalc-type")) {
console.log(typeTarget);
return;
}
console.log(typeTarget.classList[1]);
hoverStyles.innerHTML = "";
}); });
return html; return html;
} }