vgapp 1.4.4 → 1.4.6

package/app/modules/vgtooltip/js/vgtooltip.js

@@ -82,16 +82,22 @@ class VGTooltip extends BaseModule {
 
 		this._params = this._getParams(element, mergeDeepObject(defaultParams, params));
 		this._tooltip = null;
-		this._isHiding = false;
-		this._showTimeout = null;
-		this._hideTimeout = null;
+		this._isHiding = false;
+		this._showTimeout = null;
+		this._hideTimeout = null;
+		this._triggerObserver = null;
 
 		this._fixTitle();
 
-		this._handleUpdate = () => {
-			if (this._isShown()) {
-				this._setPlacement();
-			}
+		this._handleUpdate = () => {
+			if (!this._element?.isConnected) {
+				this.dispose();
+				return;
+			}
+
+			if (this._isShown()) {
+				this._setPlacement();
+			}
 		};
 	}
 
@@ -112,10 +118,14 @@ class VGTooltip extends BaseModule {
 
 		this._clearTimeouts();
 
-		this._showTimeout = setTimeout(() => {
-			this._showTimeout = null;
-
-			const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget });
+		this._showTimeout = setTimeout(() => {
+			this._showTimeout = null;
+			if (!this._element?.isConnected) {
+				this.dispose();
+				return;
+			}
+
+			const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget });
 			if (showEvent.defaultPrevented) return;
 
 			if (this._params.closeOther) {
@@ -129,10 +139,11 @@ class VGTooltip extends BaseModule {
 
 			this._tooltip.classList.remove(CLASS_NAME_SHOWN);
 			this._tooltip.classList.add(CLASS_NAME_SHOW);
-			this._element.classList.add(CLASS_NAME_SHOW);
-			document.body.classList.add(CLASS_NAME_OPEN);
-
-			this._addWindowListeners();
+			this._element.classList.add(CLASS_NAME_SHOW);
+			document.body.classList.add(CLASS_NAME_OPEN);
+
+			this._addWindowListeners();
+			this._observeTrigger();
 
 			requestAnimationFrame(() => {
 				if (!this._tooltip) return;
@@ -149,16 +160,20 @@ class VGTooltip extends BaseModule {
 		}, this._params.delay.show);
 	}
 
-	hide() {
-		if (!this._isShown() || this._isHiding || !this._tooltip) return;
-
-		this._clearTimeouts();
+	hide() {
+		if (!this._isShown() || this._isHiding || !this._tooltip) return;
+
+		this._clearTimeouts();
+		this._disconnectTriggerObserver();
 
 		this._hideTimeout = setTimeout(() => {
 			this._hideTimeout = null;
 
-			const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
-			if (hideEvent.defaultPrevented) return;
+			const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
+			if (hideEvent.defaultPrevented) {
+				this._observeTrigger();
+				return;
+			}
 
 			this._removeWindowListeners();
 
@@ -185,21 +200,31 @@ class VGTooltip extends BaseModule {
 		}, this._params.delay.hide);
 	}
 
-	dispose() {
-		this._clearTimeouts();
-		this._removeWindowListeners();
-
-		if (this._tooltip) {
-			this._tooltip.remove();
-			this._tooltip = null;
-		}
-
-		const originalTitle = this._element.dataset.vgOriginalTitle;
-		if (originalTitle) {
-			this._element.setAttribute('title', originalTitle);
-		}
-
-		super.dispose();
+	dispose() {
+		this._clearTimeouts();
+		this._removeWindowListeners();
+		this._disconnectTriggerObserver();
+
+		if (this._tooltip) {
+			this._tooltip.remove();
+			this._tooltip = null;
+		}
+
+		if (this._element) {
+			this._element.classList.remove(CLASS_NAME_SHOW, CLASS_NAME_SHOWN);
+			this._element.removeAttribute('aria-describedby');
+
+			if (Object.prototype.hasOwnProperty.call(this._element.dataset, 'vgOriginalTitle')) {
+				this._element.setAttribute('title', this._element.dataset.vgOriginalTitle);
+				this._element.removeAttribute('data-vg-original-title');
+			}
+		}
+
+		if (!Selectors.find('.vg-tooltip.show')) {
+			document.body.classList.remove(CLASS_NAME_OPEN);
+		}
+
+		super.dispose();
 	}
 
 	_isShown() {
@@ -280,10 +305,10 @@ class VGTooltip extends BaseModule {
 		);
 	}
 
-	_fixTitle() {
-		const title = this._element.getAttribute('title');
-
-		if (!title) return;
+	_fixTitle() {
+		const title = this._element.getAttribute('title');
+
+		if (title === null) return;
 
 		this._element.setAttribute('data-vg-original-title', title);
 		this._element.removeAttribute('title');
@@ -382,17 +407,48 @@ class VGTooltip extends BaseModule {
 		}
 	}
 
-	_hideOpenedTooltips() {
-		Selectors.findAll('.vg-tooltip.show').forEach(tooltip => {
-			const id = tooltip.id;
-			const trigger = Selectors.find(`[aria-describedby="${id}"]`);
-
-			if (!trigger || trigger === this._element) return;
-
-			const instance = VGTooltip.getInstance(trigger);
-			instance?.hide();
-		});
-	}
+	_hideOpenedTooltips() {
+		Selectors.findAll('.vg-tooltip.show').forEach(tooltip => {
+			const id = tooltip.id;
+			const trigger = Selectors.find(`[aria-describedby="${id}"]`);
+
+			if (!trigger) {
+				tooltip.remove();
+				return;
+			}
+
+			if (trigger === this._element) return;
+
+			const instance = VGTooltip.getInstance(trigger);
+			instance?.hide();
+		});
+
+		if (!Selectors.find('.vg-tooltip.show')) {
+			document.body.classList.remove(CLASS_NAME_OPEN);
+		}
+	}
+
+	_observeTrigger() {
+		if (this._triggerObserver || !this._element?.isConnected) return;
+
+		this._triggerObserver = new MutationObserver(() => {
+			if (!this._element?.isConnected) {
+				this.dispose();
+			}
+		});
+
+		this._triggerObserver.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+	}
+
+	_disconnectTriggerObserver() {
+		if (!this._triggerObserver) return;
+
+		this._triggerObserver.disconnect();
+		this._triggerObserver = null;
+	}
 
 	_addWindowListeners() {
 		window.addEventListener('resize', this._handleUpdate);

package/app/modules/vgtooltip/scss/_variables.scss

@@ -1,17 +1,17 @@
-@use "../../../utils/scss" as vg;
-
-$tooltip-map: (
-		zindex: 1080,
+@use "../../../utils/scss" as vg;
+
+$tooltip-map: (
+		zindex: 1080,
 		max-width: 260px,
 		padding: 8px 12px,
 		font-size: 13px,
 		line-height: 1.4,
-		color: var(--vg-text-inverse-color, #ffffff),
-		background: var(--vg-surface-inverse-bg, rgba(30, 30, 30, .95)),
-		border-radius: 6px,
-		box-shadow: 0 6px 20px var(--vg-shadow-soft-color, rgba(0, 0, 0, .18)),
+		color: var(--vg-text-inverse-color, #ffffff),
+		background: var(--vg-surface-inverse-bg, rgba(30, 30, 30, .95)),
+		border-radius: 6px,
+		box-shadow: 0 6px 20px var(--vg-shadow-soft-color, rgba(0, 0, 0, .18)),
 		word-break: break-word,
 		arrow-width: 8px,
 		arrow-height: 8px,
-		border-color: var(--vg-border-color, #{vg.$border-color}),
-) !default;
+		border-color: var(--vg-border-color, #{vg.$border-color}),
+) !default;

package/app/modules/vgtooltip/scss/vgtooltip.scss

@@ -6,12 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@forward "variables";
-@use "../../../utils/scss" as vg;
-@use "variables" as vars;
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-tooltip {
-	@include vg.mix-vars('tooltip', vars.$tooltip-map);
+	@include vg.mix-vars('tooltip', vars.$tooltip-map);
 	position: absolute;
 	z-index: var(--vg-tooltip-zindex);
 	pointer-events: none;
@@ -60,4 +60,4 @@
 			}
 		}
 	}
-}
+}