85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
import { debounce } from "./dom-utils.js";
|
|
import { emitEvent, listenTo } from "./events.js";
|
|
|
|
const tooltips = {};
|
|
let tooltipsCounter = 0;
|
|
let lastTarget = null;
|
|
let suppressTooltips = false;
|
|
|
|
export function initializeTooltips() {
|
|
window.addEventListener("mousemove", () => {
|
|
if (lastTarget !== null) {
|
|
emitEvent("tooltips:hide");
|
|
}
|
|
lastTarget = null;
|
|
});
|
|
window.addEventListener("mousemove", debounce(e => {
|
|
lastTarget = e.target;
|
|
emitEvent("tooltips:show");
|
|
}, 500));
|
|
|
|
listenTo("tooltips:show", showTooltip);
|
|
listenTo("tooltips:hide", hideTooltip);
|
|
|
|
document.addEventListener("keydown", e => {
|
|
if (e.key === "T") {
|
|
suppressTooltips = !suppressTooltips;
|
|
}
|
|
});
|
|
}
|
|
|
|
export function createTooltip(data) {
|
|
const id = tooltipsCounter;
|
|
tooltips[id] = data;
|
|
tooltipsCounter++;
|
|
return id;
|
|
}
|
|
|
|
export function getTooltip(id) {
|
|
return tooltips[id];
|
|
}
|
|
|
|
export function deleteTooltip(id) {
|
|
delete tooltips[id];
|
|
}
|
|
|
|
function showTooltip() {
|
|
if (suppressTooltips) return;
|
|
if (!lastTarget.dataset.tooltip) return;
|
|
|
|
const dom = createTooltipDom(lastTarget.dataset.tooltip);
|
|
if (!dom) return;
|
|
|
|
lastTarget.appendChild(dom);
|
|
}
|
|
function hideTooltip() {
|
|
if (suppressTooltips) return;
|
|
if (!lastTarget.dataset.tooltip) return;
|
|
|
|
console.log(lastTarget.querySelector(".tooltip"))
|
|
lastTarget.removeChild(lastTarget.querySelector(".tooltip"));
|
|
}
|
|
|
|
function createTooltipDom(id) {
|
|
const data = tooltips[id];
|
|
if (!Array.isArray(data)) {
|
|
console.warn("tooltip %s is not an array: %o", id, data);
|
|
return null;
|
|
}
|
|
const div = document.createElement("div");
|
|
div.classList.add("tooltip");
|
|
for (const row of data) {
|
|
const rowElem = document.createElement("div");
|
|
|
|
if (typeof row === "string") {
|
|
rowElem.innerText = row;
|
|
} else {
|
|
// TODO: support rich tooltips
|
|
throw row;
|
|
}
|
|
|
|
div.appendChild(rowElem);
|
|
}
|
|
return div;
|
|
}
|