@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
70 lines (69 loc) • 3.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RowGlow = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const classes = tslib_1.__importStar(require("../../../scss/RcsbFvRow.module.scss"));
const RcsbFvDefaultConfigValues_1 = require("../../RcsbFvConfig/RcsbFvDefaultConfigValues");
const RcsbFvContextManager_1 = require("../../RcsbFvContextManager/RcsbFvContextManager");
class RowGlow extends react_1.default.Component {
render() {
return ((0, jsx_runtime_1.jsx)("div", { id: this.props.boardId + "_glowRowDiv" /* RcsbFvDOMConstants.GLOW_ROW_DOM_ID_SUFFIX */, className: classes.rcsbNoRowGlow, children: (0, jsx_runtime_1.jsx)("div", { style: { borderWidth: RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.rowGlowWidth, borderColor: RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.rowGlowColor } }) }));
}
componentDidMount() {
this.subscription = this.subscribe();
}
componentWillUnmount() {
this.subscription.unsubscribe();
}
subscribe() {
return this.props.contextManager.subscribe((o) => {
switch (o.eventType) {
case RcsbFvContextManager_1.EventType.ROW_HOVER:
this.updateGlow(o.eventData);
break;
}
});
}
updateGlow(id) {
if (id) {
this.displayGlow(id);
}
else {
this.hideGlow();
}
}
displayGlow(id) {
var _a, _b;
const boardDiv = document.getElementById(this.props.boardId);
const rowDiv = document.getElementById(id);
if (rowDiv != null && boardDiv != null) {
const top = rowDiv.offsetTop - boardDiv.offsetTop;
const height = rowDiv.getBoundingClientRect().height - 2 * RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.rowGlowWidth;
const glowDiv = document.getElementById(this.props.boardId + "_glowRowDiv" /* RcsbFvDOMConstants.GLOW_ROW_DOM_ID_SUFFIX */);
if (glowDiv != null) {
const innerGlowDiv = glowDiv.getElementsByTagName("div")[0];
const trackWidth = (_a = this.props.boardConfigData.trackWidth) !== null && _a !== void 0 ? _a : RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.trackWidth;
const titleWidth = (_b = this.props.boardConfigData.rowTitleWidth) !== null && _b !== void 0 ? _b : RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.rowTitleWidth;
glowDiv.style.top = top + "px";
glowDiv.style.marginLeft = titleWidth + RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.titleAndTrackSpace + "px";
glowDiv.className = classes.rcsbRowGlow;
innerGlowDiv.style.height = height + "px";
innerGlowDiv.style.width = trackWidth + "px";
}
}
}
hideGlow() {
const glowDiv = document.getElementById(this.props.boardId + "_glowRowDiv" /* RcsbFvDOMConstants.GLOW_ROW_DOM_ID_SUFFIX */);
if (glowDiv != null) {
const innerGlowDiv = glowDiv.getElementsByTagName("div")[0];
glowDiv.style.top = "0px";
glowDiv.style.marginLeft = "0px";
glowDiv.className = classes.rcsbNoRowGlow;
innerGlowDiv.style.height = "0px";
innerGlowDiv.style.width = "0px";
}
}
}
exports.RowGlow = RowGlow;