@kontent-ai/smart-link
Version:
Kontent.ai Smart Link SDK allowing to automatically inject [smart links](https://docs.kontent.ai/tutorials/develop-apps/build-strong-foundation/set-up-editing-from-preview#a-using-smart-links) to Kontent.ai according to manually specified [HTML data attri
74 lines • 2.66 kB
JavaScript
import { KSLTooltipElement } from "../KSLTooltipElement";
import { KSLCustomElement } from "./KSLCustomElement";
import { ElementPositionOffset } from "./KSLPositionedElement";
export class KSLCustomElementWithTooltip extends KSLCustomElement {
static get observedAttributes() {
return ["tooltip-disabled", "tooltip-message"];
}
get tooltipDisabled() {
return this.hasAttribute("tooltip-disabled");
}
set tooltipDisabled(value) {
this.updateAttribute("tooltip-disabled", value);
}
get tooltipMessage() {
return this.getAttribute("tooltip-message");
}
set tooltipMessage(value) {
this.updateAttribute("tooltip-message", value);
}
get tooltipPosition() {
return this.getAttribute("tooltip-position") ?? ElementPositionOffset.Bottom;
}
set tooltipPosition(value) {
this.updateAttribute("tooltip-position", value);
}
tooltipRef = null;
connectedCallback() {
this.addEventListener("focus", this.showTooltip);
this.addEventListener("mouseenter", this.showTooltip);
this.addEventListener("blur", this.hideTooltip);
this.addEventListener("mouseleave", this.hideTooltip);
}
disconnectedCallback() {
this.hideTooltip();
this.removeEventListener("focus", this.showTooltip);
this.removeEventListener("mouseenter", this.showTooltip);
this.removeEventListener("blur", this.hideTooltip);
this.removeEventListener("mouseleave", this.hideTooltip);
}
attributeChangedCallback(attributeName, _oldValue, newValue) {
if (attributeName === "tooltip-disabled") {
if (newValue) {
this.hideTooltip();
}
}
else if (attributeName === "tooltip-message") {
if (!newValue) {
this.hideTooltip();
}
}
}
showTooltip = () => {
if (this.tooltipRef) {
this.hideTooltip();
}
if (!this.tooltipMessage || this.tooltipDisabled) {
return;
}
const tooltip = document.createElement(KSLTooltipElement.is);
tooltip.innerText = this.tooltipMessage;
this.tooltipRef = document.body.appendChild(tooltip);
this.tooltipRef.position = this.tooltipPosition;
this.tooltipRef.attachTo(this);
this.tooltipRef.visible = true;
};
hideTooltip = () => {
if (this.tooltipRef) {
this.tooltipRef.visible = false;
this.tooltipRef.remove();
this.tooltipRef = null;
}
};
}
//# sourceMappingURL=KSLCustomElementWithTooltip.js.map