vgapp 1.5.6 → 1.5.8

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

@@ -1,3 +1,7 @@
+/**
+ * Описание: всплывающие подсказки и информационные popover VGApp.
+ * Возможности: Data API, позиционирование, события и очистка при удалении триггера.
+ */
 import BaseModule from "../../base-module";
 import {isDisabled, makeRandomString, mergeDeepObject} from "../../../utils/js/functions";
 import EventHandler from "../../../utils/js/dom/event";
@@ -81,23 +85,28 @@ class VGTooltip extends BaseModule {
 		super(element, params);
 
 		this._params = this._getParams(element, mergeDeepObject(defaultParams, params));
+		// Геометрические массивы заменяются целиком, а не дополняют defaults.
+		const dataParams = this._getParams(element, {});
+		['offset', 'fallbackPlacements'].forEach(key => {
+			this._params[key] = [...(dataParams[key] ?? params[key] ?? defaultParams[key])];
+		});
 		this._tooltip = null;
-		this._isHiding = false;
-		this._showTimeout = null;
-		this._hideTimeout = null;
-		this._triggerObserver = null;
+		this._isHiding = false;
+		this._showTimeout = null;
+		this._hideTimeout = null;
+		this._triggerObserver = null;
 
 		this._fixTitle();
 
-		this._handleUpdate = () => {
-			if (!this._element?.isConnected) {
-				this.dispose();
-				return;
-			}
-
-			if (this._isShown()) {
-				this._setPlacement();
-			}
+		this._handleUpdate = () => {
+			if (!this._element?.isConnected) {
+				this.dispose();
+				return;
+			}
+
+			if (this._isShown()) {
+				this._setPlacement();
+			}
 		};
 	}
 
@@ -118,14 +127,14 @@ class VGTooltip extends BaseModule {
 
 		this._clearTimeouts();
 
-		this._showTimeout = setTimeout(() => {
-			this._showTimeout = null;
-			if (!this._element?.isConnected) {
-				this.dispose();
-				return;
-			}
-
-			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) {
@@ -139,11 +148,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._observeTrigger();
+			this._element.classList.add(CLASS_NAME_SHOW);
+			document.body.classList.add(CLASS_NAME_OPEN);
+
+			this._addWindowListeners();
+			this._observeTrigger();
 
 			requestAnimationFrame(() => {
 				if (!this._tooltip) return;
@@ -160,21 +169,21 @@ class VGTooltip extends BaseModule {
 		}, this._params.delay.show);
 	}
 
-	hide() {
-		this._clearTimeouts();
-
-		if (!this._isShown() || this._isHiding || !this._tooltip) return;
-
-		this._disconnectTriggerObserver();
+	hide() {
+		this._clearTimeouts();
+
+		if (!this._isShown() || this._isHiding || !this._tooltip) return;
+
+		this._disconnectTriggerObserver();
 
 		this._hideTimeout = setTimeout(() => {
 			this._hideTimeout = null;
 
-			const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
-			if (hideEvent.defaultPrevented) {
-				this._observeTrigger();
-				return;
-			}
+			const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
+			if (hideEvent.defaultPrevented) {
+				this._observeTrigger();
+				return;
+			}
 
 			this._removeWindowListeners();
 
@@ -201,31 +210,31 @@ class VGTooltip extends BaseModule {
 		}, this._params.delay.hide);
 	}
 
-	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();
+	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() {
@@ -251,8 +260,9 @@ class VGTooltip extends BaseModule {
 
 		const inner = document.createElement('div');
 		inner.classList.add('vg-tooltip-inner');
+		const content = this._params.content || this._element.dataset.vgContent || '';
 
-		if (this._params.content) {
+		if (content) {
 			const titleBlock = document.createElement('div');
 			titleBlock.classList.add('vg-tooltip-inner--title');
 
@@ -261,10 +271,10 @@ class VGTooltip extends BaseModule {
 
 			if (this._params.html) {
 				titleBlock.innerHTML = title;
-				contentBlock.innerHTML = this._params.content;
+				contentBlock.innerHTML = content;
 			} else {
 				titleBlock.textContent = title;
-				contentBlock.textContent = this._params.content;
+				contentBlock.textContent = content;
 			}
 
 			inner.append(titleBlock);
@@ -306,10 +316,10 @@ class VGTooltip extends BaseModule {
 		);
 	}
 
-	_fixTitle() {
-		const title = this._element.getAttribute('title');
-
-		if (title === null) return;
+	_fixTitle() {
+		const title = this._element.getAttribute('title');
+
+		if (title === null) return;
 
 		this._element.setAttribute('data-vg-original-title', title);
 		this._element.removeAttribute('title');
@@ -408,48 +418,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) {
-				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;
-	}
+	_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 @@
 			}
 		}
 	}
-}
+}