@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 { KSLCustomElement } from './KSLCustomElement';
import { KSLTooltipElement } from '../KSLTooltipElement';
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