@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
105 lines (104 loc) • 4.32 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RcsbFvTooltipManager = void 0;
const tslib_1 = require("tslib");
const dom_1 = require("@floating-ui/dom");
class RcsbFvTooltipManager {
constructor(boardId, tooltip) {
this.boardId = boardId;
this.tooltip = tooltip;
const refDiv = document.querySelector("#" + this.boardId);
if (refDiv == null)
throw "Main board DOM element not found";
this.refDiv = refDiv;
const tooltipDiv = document.querySelector("#" + this.boardId + "_tooltip" /* RcsbFvDOMConstants.TOOLTIP_DOM_ID_PREFIX */);
if (tooltipDiv == null)
throw "Tooltip DOM element not found";
this.tooltipDiv = tooltipDiv;
const tooltipDescriptionDiv = document.querySelector("#" + this.boardId + "_tooltipDescription" /* RcsbFvDOMConstants.TOOLTIP_DESCRIPTION_DOM_ID_PREFIX */);
if (tooltipDescriptionDiv == null)
throw "Tooltip DOM element not found";
this.tooltipDescriptionDiv = tooltipDescriptionDiv;
Object.assign(this.tooltipDiv.style, {
position: 'absolute',
visibility: 'hidden',
whiteSpace: 'nowrap',
top: '0',
left: '0',
});
Object.assign(this.tooltipDescriptionDiv.style, {
position: 'absolute',
visibility: 'hidden',
whiteSpace: 'nowrap',
top: '0',
left: '0',
});
}
showTooltip(d) {
this.tooltipDiv.textContent = "";
const divTooltip = this.tooltip.showTooltip(d);
if (!divTooltip)
return;
this.tooltipDiv.append(divTooltip);
(0, dom_1.computePosition)(this.refDiv, this.tooltipDiv, {
placement: 'top-end',
middleware: [{
name: 'middleware',
fn(middlewareArguments) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const overflow = yield (0, dom_1.detectOverflow)(middlewareArguments, {
rootBoundary: "viewport"
});
if (overflow.top > 0)
return { y: overflow.top + middlewareArguments.y };
return {};
});
},
}]
}).then((o) => {
Object.assign(this.tooltipDiv.style, {
left: `${o.x}px`,
top: `${o.y}px`,
visibility: 'visible'
});
});
}
showTooltipDescription(d) {
var _a, _b;
this.tooltipDescriptionDiv.textContent = "";
this.tooltipDescriptionDiv.style.visibility = "hidden";
const description = (_b = (_a = this.tooltip).showTooltipDescription) === null || _b === void 0 ? void 0 : _b.call(_a, d);
if (!description)
return;
this.tooltipDescriptionDiv.append(description);
(0, dom_1.computePosition)(this.refDiv, this.tooltipDescriptionDiv, {
placement: 'top-end',
middleware: [{
name: 'middleware',
fn(middlewareArguments) {
return tslib_1.__awaiter(this, void 0, void 0, function* () {
const overflow = yield (0, dom_1.detectOverflow)(middlewareArguments, {
rootBoundary: "viewport"
});
if (overflow.top > 0)
return { y: overflow.top + middlewareArguments.y };
return {};
});
},
}]
}).then(({ x, y }) => {
Object.assign(this.tooltipDescriptionDiv.style, {
left: `${x}px`,
top: `${y - 30}px`,
visibility: 'visible'
});
});
}
hideTooltip() {
this.tooltipDiv.innerHTML = "";
this.tooltipDiv.style.visibility = "hidden";
this.tooltipDescriptionDiv.innerHTML = "";
this.tooltipDescriptionDiv.style.visibility = "hidden";
}
}
exports.RcsbFvTooltipManager = RcsbFvTooltipManager;