langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1036 from hgiesel/graphsaslib

Browse Source 
Source graphs.js as library in the HTML head
This commit is contained in:
Damien Elmes 2021-02-23 17:35:07 +10:00 committed by GitHub
commit e99deedbd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ts/graphs/graphs.html
View File

@ -4,12 +4,12 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" id="viewport" content="width=device-width" /> <meta name="viewport" id="viewport" content="width=device-width" />
<link href="graphs.css" rel="stylesheet" /> <link href="graphs.css" rel="stylesheet" />
<script src="../js/vendor/protobuf.min.js"></script>
<script src="graphs.js"></script>
</head> </head>
<body> <body>
<div id="main"></div> <div id="main"></div>
</body>
<script src="../js/vendor/protobuf.min.js"></script>
<script src="graphs.js"></script>
<script> <script>
anki.graphs( anki.graphs(
document.getElementById("main"), document.getElementById("main"),
@ -30,4 +30,5 @@
} }
); );
</script> </script>
</body>
</html> </html>

21
ts/graphs/tooltip.ts
View File

@ -3,11 +3,24 @@
import throttle from "lodash.throttle"; import throttle from "lodash.throttle";
const tooltipDiv: HTMLDivElement = document.createElement("div"); function getOrCreateTooltipDiv(): HTMLDivElement {
tooltipDiv.className = "graph-tooltip"; const existingTooltip = document.getElementById("graphTooltip") as HTMLDivElement;
document.body.appendChild(tooltipDiv);
if (existingTooltip) {
return existingTooltip;
}
const tooltipDiv: HTMLDivElement = document.createElement("div");
tooltipDiv.id = "graphTooltip";
tooltipDiv.className = "graph-tooltip";
document.body.appendChild(tooltipDiv);
return tooltipDiv;
}
function showTooltipInner(msg: string, x: number, y: number): void { function showTooltipInner(msg: string, x: number, y: number): void {
const tooltipDiv = getOrCreateTooltipDiv();
tooltipDiv.innerHTML = msg; tooltipDiv.innerHTML = msg;
// move tooltip away from edge as user approaches right side // move tooltip away from edge as user approaches right side
@ -26,6 +39,8 @@ function showTooltipInner(msg: string, x: number, y: number): void {
export const showTooltip = throttle(showTooltipInner, 16); export const showTooltip = throttle(showTooltipInner, 16);
export function hideTooltip(): void { export function hideTooltip(): void {
const tooltipDiv = getOrCreateTooltipDiv();
showTooltip.cancel(); showTooltip.cancel();
tooltipDiv.style.opacity = "0"; tooltipDiv.style.opacity = "0";
} }