@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
78 lines • 2.91 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.KSLCustomElementWithTooltip = void 0;
const KSLCustomElement_1 = require("./KSLCustomElement");
const KSLTooltipElement_1 = require("../KSLTooltipElement");
const KSLPositionedElement_1 = require("./KSLPositionedElement");
class KSLCustomElementWithTooltip extends KSLCustomElement_1.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') || KSLPositionedElement_1.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_1.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;
}
};
}
exports.KSLCustomElementWithTooltip = KSLCustomElementWithTooltip;
//# sourceMappingURL=KSLCustomElementWithTooltip.js.map