Static Site
This commit is contained in:
268
Static/package/dist/collection/components/tooltip/tooltip.js
vendored
Normal file
268
Static/package/dist/collection/components/tooltip/tooltip.js
vendored
Normal file
@ -0,0 +1,268 @@
|
||||
import { h } from "@stencil/core";
|
||||
import { createPopper } from "@popperjs/core";
|
||||
export class Tooltip {
|
||||
constructor() {
|
||||
this.popperInstance = null;
|
||||
this.onMouseEnter = () => {
|
||||
var _a, _b;
|
||||
// Enable the event listeners immediately
|
||||
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
|
||||
...options.modifiers,
|
||||
{ name: 'eventListeners', enabled: true },
|
||||
] })));
|
||||
// Initialize the popper instance
|
||||
this.initializePopper();
|
||||
// Make the tooltip visible
|
||||
this.tooltipVisible = true;
|
||||
this.tooltipEl.style.display = 'block';
|
||||
// Update the popper instance immediately after initialization
|
||||
(_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
|
||||
};
|
||||
this.onMouseLeave = () => {
|
||||
this.tooltipVisible = false;
|
||||
this.tooltipEl.style.display = 'none';
|
||||
};
|
||||
this.onClick = () => {
|
||||
var _a;
|
||||
if (this.variant.toLowerCase() === 'dismissible') {
|
||||
this.initializePopper();
|
||||
this.tooltipVisible = !this.tooltipVisible;
|
||||
this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';
|
||||
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
|
||||
}
|
||||
};
|
||||
this.tooltipVisible = false;
|
||||
this.header = '';
|
||||
this.text = '';
|
||||
this.position = 'auto';
|
||||
this.internalPosition = 'auto';
|
||||
this.variant = 'compact';
|
||||
this.icon = undefined;
|
||||
}
|
||||
componentWillLoad() {
|
||||
if (this.variant.toLowerCase().trim() === "") {
|
||||
this.variant = 'compact';
|
||||
}
|
||||
}
|
||||
initializePopper() {
|
||||
if (this.popperInstance)
|
||||
return;
|
||||
this.referenceEl = this.el;
|
||||
this.tooltipEl;
|
||||
if (this.variant.toLowerCase() === 'compact') {
|
||||
this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');
|
||||
}
|
||||
else if (this.variant.toLowerCase() === 'dismissible') {
|
||||
this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');
|
||||
}
|
||||
else {
|
||||
this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');
|
||||
}
|
||||
const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;
|
||||
// Set the internalPosition
|
||||
this.internalPosition = effectivePosition;
|
||||
if (this.tooltipEl && this.referenceEl) {
|
||||
this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {
|
||||
placement: this.internalPosition,
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'arrow',
|
||||
options: {
|
||||
element: '.tooltip-arrow-svg'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
// Add this line to set the 'data-placement' attribute on the tooltip
|
||||
this.tooltipEl.setAttribute('data-placement', effectivePosition);
|
||||
}
|
||||
determineBestPosition() {
|
||||
// This is a simplified version, you can enhance this based on available viewport space.
|
||||
const rect = this.referenceEl.getBoundingClientRect();
|
||||
const yOffset = window.scrollY; // Get current scroll position
|
||||
const xOffset = window.scrollX; // Get current horizontal scroll position
|
||||
const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;
|
||||
const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;
|
||||
if (this.position === 'auto') {
|
||||
if (verticalHalfwayPoint > window.innerHeight / 2) {
|
||||
if (horizontalHalfwayPoint > window.innerWidth / 2) {
|
||||
return 'top-end';
|
||||
}
|
||||
else {
|
||||
return 'top-start';
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (horizontalHalfwayPoint > window.innerWidth / 2) {
|
||||
return 'bottom-end';
|
||||
}
|
||||
else {
|
||||
return 'bottom-start';
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
return this.position;
|
||||
}
|
||||
}
|
||||
positionChanged(newVal) {
|
||||
var _a;
|
||||
this.internalPosition = newVal;
|
||||
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
this.popperInstance = null; // Force re-initialization on next mouse enter
|
||||
}
|
||||
disconnectedCallback() {
|
||||
var _a;
|
||||
(_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
|
||||
}
|
||||
render() {
|
||||
const tooltipDismissible = {
|
||||
'tooltip-dismissible': true,
|
||||
'visible': this.tooltipVisible,
|
||||
};
|
||||
const tooltipCompact = {
|
||||
'tooltip-compact': true,
|
||||
'visible': this.tooltipVisible,
|
||||
};
|
||||
const tooltipExtended = {
|
||||
'tooltip-extended': true,
|
||||
'visible': this.tooltipVisible,
|
||||
};
|
||||
const eventHandlers = this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended' ? {
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
} : {
|
||||
onClick: this.onClick,
|
||||
};
|
||||
return (h("div", Object.assign({ "aria-label": "a tooltip showing important information", "aria-value": this.header, class: "tooltip__container" }, eventHandlers), h("slot", null), this.variant.toLowerCase() === 'dismissible' && h("div", { class: tooltipDismissible }, h("ifx-icon", { icon: "cross16", class: "close-button" }), h("div", { class: "tooltip-dismissible-content" }, this.header && h("div", { class: "tooltip-dismissible-header" }, this.header), h("div", { class: "tooltip-dismissible-body" }, this.text)), h("svg", { class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
|
||||
h("div", { class: tooltipCompact }, this.text, h("svg", { class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
|
||||
h("div", { class: tooltipExtended }, h("slot", { name: "icon" }, this.icon ? h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon })) :
|
||||
h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" }))), h("div", { class: "tooltip-extended-content" }, this.header && h("div", { class: "tooltip-extended-header" }, this.header), h("div", { class: "tooltip-extended-body" }, this.text)), h("svg", { class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
|
||||
}
|
||||
static get is() { return "ifx-tooltip"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["tooltip.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["tooltip.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"header": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "header",
|
||||
"reflect": false,
|
||||
"defaultValue": "''"
|
||||
},
|
||||
"text": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "text",
|
||||
"reflect": false,
|
||||
"defaultValue": "''"
|
||||
},
|
||||
"position": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto'",
|
||||
"resolved": "\"auto\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"right\" | \"top\" | \"top-end\" | \"top-start\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "position",
|
||||
"reflect": false,
|
||||
"defaultValue": "'auto'"
|
||||
},
|
||||
"variant": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'compact' | 'dismissible' | 'extended'",
|
||||
"resolved": "\"compact\" | \"dismissible\" | \"extended\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "variant",
|
||||
"reflect": false,
|
||||
"defaultValue": "'compact'"
|
||||
},
|
||||
"icon": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "icon",
|
||||
"reflect": false
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"tooltipVisible": {},
|
||||
"internalPosition": {}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
static get watchers() {
|
||||
return [{
|
||||
"propName": "position",
|
||||
"methodName": "positionChanged"
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=tooltip.js.map
|
||||
Reference in New Issue
Block a user