vgapp 0.7.7 → 0.7.8

package/app/modules/vgdropdown/js/vgdropdown.js

@@ -6,7 +6,6 @@ import Placement from "../../../utils/js/components/placement";
 import Overflow from "../../../utils/js/components/overflow";
 import Backdrop from "../../../utils/js/components/backdrop";
 import {dismissTrigger} from "../../module-fn";
-import VGSidebar from "../../vgsidebar";
 
 const NAME             = 'dropdown';
 const NAME_KEY         = 'vg.dropdown';
@@ -33,12 +32,11 @@ class VGDropdown extends BaseModule {
 		super(element, params);
 
 		let defaultParams = {
-			offset: [0, 2],
 			backdrop: false,
 			overflow: false,
 			keyboard: false,
-			placement: 'bottom',
 			timeoutAnimation: 10,
+			placement: 'auto',
 			hover: false,
 			ajax: {
 				route: '',
@@ -49,30 +47,27 @@ class VGDropdown extends BaseModule {
 				output: true,
 			},
 			animation: {
-				fade: false,
+				fade: true,
 				enable: false,
 				in: 'animate__flipInY',
 				out: 'animate__flipOutY',
-				delay: 800,
+				delay: 300,
 			},
-		}
-
-		if ('offset' in params && Array.isArray(params.offset)) {
-			defaultParams.offset = params.offset;
-		}
+		};
 
 		this._params = this._getParams(element, mergeDeepObject(defaultParams, params));
 
 		const target = Selectors.getElementFromSelector(this._element);
-
 		this._parent = this._element.parentNode;
-		this._drop = target || Selectors.find('.' + TARGET_CONTAINER, this._parent);
-		this._isPlacement = false;
+		this._drop = target || Selectors.find(`.${TARGET_CONTAINER}`, this._parent);
+
+		if (!this._drop) return;
 
-		this.isFade      = this._params.animation.fade;
+		this._isPlacement = false;
+		this.isFade = this._params.animation.fade;
 		this.isAnimation = this._params.animation.enable;
 
-		this._params.animation.delay = !this.isAnimation ? 0 : this._params.animation.delay;
+		this._params.animation.delay = this.isAnimation ? this._params.animation.delay : 0;
 		this._animation(this._drop, VGDropdown.NAME_KEY, this._params.animation);
 	}
 
@@ -91,25 +86,22 @@ class VGDropdown extends BaseModule {
 	show() {
 		if (isDisabled(this._element) || this._isShown()) return;
 
-		const relatedTarget = {
-			relatedTarget: this._element
-		}
+		const relatedTarget = { relatedTarget: this._element };
 
-		const showEvent = EventHandler.trigger(this._drop, EVENT_KEY_SHOW, relatedTarget)
+		const showEvent = EventHandler.trigger(this._drop, EVENT_KEY_SHOW, relatedTarget);
 		if (showEvent.defaultPrevented) return;
 
 		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.on(element, 'mouseover', noop);
-			}
+			[].concat(...document.body.children).forEach(el => {
+				EventHandler.on(el, 'mouseover', noop);
+			});
 		}
 
-		this._route();
-
-		this._element.setAttribute('aria-expanded', true);
+		this._element.setAttribute('aria-expanded', 'true');
 		this._element.classList.add(CLASS_NAME_SHOW);
 		this._drop.classList.add(CLASS_NAME_SHOW);
 		this._setPlacement();
+		this._route();
 
 		if (this._params.backdrop && !this._params.hover) {
 			Backdrop.show();
@@ -117,36 +109,28 @@ class VGDropdown extends BaseModule {
 
 		if (this._params.overflow) {
 			Overflow.append();
-			document.body.classList.add('dropdown-open')
+			document.body.classList.add('dropdown-open');
 		}
 
-		const completeCallBack = () => {
+		const completeCallback = () => {
 			if (this.isFade) {
 				this._drop.classList.add(CLASS_NAME_FADE);
-			} else if(!this.isAnimation) {
+			} else if (!this.isAnimation) {
 				this._drop.classList.add(CLASS_NAME_OPEN);
 			}
+			EventHandler.trigger(this._drop, EVENT_KEY_SHOWN, relatedTarget);
+		};
 
-			EventHandler.trigger(this._drop, EVENT_KEY_SHOWN, relatedTarget)
-		}
-
-		this._queueCallback(completeCallBack, this._drop, this.isAnimation || this.isFade, 50);
+		this._queueCallback(completeCallback, this._drop, this.isAnimation || this.isFade, 50);
 	}
 
 	hide() {
-		if (isDisabled(this._element) || !this._isShown()) {
-			return;
-		}
-
-		const relatedTarget = {
-			relatedTarget: this._element
-		}
-
-		this._completeHide(relatedTarget);
+		if (isDisabled(this._element) || !this._isShown()) return;
+		this._completeHide({ relatedTarget: this._element });
 	}
 
 	dispose() {
-		return super.dispose();
+		super.dispose();
 	}
 
 	_isShown() {
@@ -154,30 +138,27 @@ class VGDropdown extends BaseModule {
 	}
 
 	_completeHide(relatedTarget) {
-		const hideEvent = EventHandler.trigger(this._drop, EVENT_KEY_HIDE, relatedTarget)
-		if (hideEvent.defaultPrevented) {
-			return;
-		}
+		const hideEvent = EventHandler.trigger(this._drop, EVENT_KEY_HIDE, relatedTarget);
+		if (hideEvent.defaultPrevented) return;
 
 		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.off(element, 'mouseover', noop);
-			}
+			[].concat(...document.body.children).forEach(el => {
+				EventHandler.off(el, 'mouseover', noop);
+			});
 		}
 
+		this._element.classList.remove(CLASS_NAME_SHOW);
+		this._element.setAttribute('aria-expanded', 'false');
+
 		if (this.isFade) {
 			this._drop.classList.remove(CLASS_NAME_FADE);
-		} else if(!this.isAnimation) {
+		} else if (!this.isAnimation) {
 			this._drop.classList.remove(CLASS_NAME_OPEN);
 		}
 
-		this._element.classList.remove(CLASS_NAME_SHOW);
-		this._element.setAttribute('aria-expanded', 'false');
-
 		if (this._params.backdrop && !this._params.hover) {
-			const _this = this;
-			Backdrop.hide(function () {
-				if (_this._params.overflow) {
+			Backdrop.hide(() => {
+				if (this._params.overflow) {
 					Overflow.destroy();
 				}
 			});
@@ -192,29 +173,40 @@ class VGDropdown extends BaseModule {
 			const completeCallback = () => {
 				this._drop.classList.remove(CLASS_NAME_SHOW);
 				EventHandler.trigger(this._drop, EVENT_KEY_HIDDEN, relatedTarget);
-			}
+			};
 			this._queueCallback(completeCallback, this._drop, this.isAnimation || this.isFade);
 		}, this._params.animation.delay);
 	}
 
-	// TODO class Placement isn't done
 	_setPlacement() {
-		const _this = this;
-
-		if (!_this._isPlacement) {
-			const $placement = new Placement({
-				drop: _this._drop
-			})
+		if (!this._drop) return;
+
+		if (!this._isPlacement) {
+			let placementDefault = 'bottom-start',
+				autoFlip = false,
+				overflowProtection = false;
+
+			if (this._params.placement === 'auto') {
+				autoFlip = true;
+				overflowProtection = true;
+			} else {
+				placementDefault = this._params.placement
+			}
 
-			$placement._setPlacement();
-		}
+			const placement = new Placement({
+				reference: this._element,
+				drop: this._drop,
+				placement: placementDefault,
+				boundary: 'clippingParents',
+				autoFlip: autoFlip,
+				overflowProtection: overflowProtection,
+				fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
+			});
 
-		if (_this._params.offset) {
-			_this._drop.style.paddingTop = _this._params.offset[1] + 'px';
-			_this._drop.style.paddingRight = _this._params.offset[0] + 'px';
+			placement._setPlacement(); // позиционируем
 		}
 
-		_this._isPlacement = true;
+		this._isPlacement = true;
 	}
 
 	static init(element, params = {}) {
@@ -223,109 +215,103 @@ class VGDropdown extends BaseModule {
 		if (instance._params.hover && !instance.isMobileDevice()) {
 			let currentElem = null;
 
-			EventHandler.on(instance._parent, EVENT_MOUSEOVER_DATA_API, function (event) {
+			EventHandler.on(instance._parent, EVENT_MOUSEOVER_DATA_API, (event) => {
 				if (currentElem) return;
+
 				VGDropdown.hideOpenToggles(event);
 
-				let target = event.target.closest('.' + PARENT_CONTAINER);
-				if (!target) return;
+				const target = event.target.closest(`.${PARENT_CONTAINER}`);
+				if (!target || !instance._parent.contains(target)) return;
 
-				if (!instance._parent.contains(target)) return;
 				currentElem = target;
 				instance.show();
 			});
 
-			EventHandler.on(instance._parent, EVENT_MOUSEOUT_DATA_API, function (event) {
+			EventHandler.on(instance._parent, EVENT_MOUSEOUT_DATA_API, (event) => {
 				if (!currentElem) return;
 
 				let relatedTarget = event.relatedTarget;
-
-				while (relatedTarget) {
-					if (relatedTarget === currentElem) return;
+				while (relatedTarget && relatedTarget !== currentElem) {
 					relatedTarget = relatedTarget.parentNode;
 				}
 
+				if (relatedTarget === currentElem) return;
+
 				currentElem = null;
-				instance._completeHide({relatedTarget: instance._element});
-			})
+				instance._completeHide({ relatedTarget: instance._element });
+			});
 		}
 
+		// Клавиатурные события
 		EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_DATA_TOGGLE, VGDropdown.keydownHandler);
-		EventHandler.on(document, EVENT_KEYDOWN_DATA_API, '.' + TARGET_CONTAINER, VGDropdown.keydownHandler);
+		EventHandler.on(document, EVENT_KEYDOWN_DATA_API, `.${TARGET_CONTAINER}`, VGDropdown.keydownHandler);
 		EventHandler.on(document, EVENT_KEYUP_DATA_API, VGDropdown.clearDrops);
 		EventHandler.on(document, EVENT_CLICK_DATA_API, VGDropdown.clearDrops);
-		EventHandler.on(element, EVENT_CLICK_DATA_API, function (event) {
+
+		// Клик по тоглу
+		EventHandler.on(element, EVENT_CLICK_DATA_API, (event) => {
 			event.preventDefault();
 			instance.toggle();
 		});
 	}
 
 	static hideOpenToggles(event) {
-		const openToggles = Selectors.findAll('[data-vg-toggle="dropdown"]:not(.disabled):not(:disabled).show');
+		const openToggles = Selectors.findAll(`${SELECTOR_DATA_TOGGLE}:not(.disabled):not(:disabled).${CLASS_NAME_SHOW}`);
 		for (const toggle of openToggles) {
 			const context = VGDropdown.getInstance(toggle);
-			if (!context) {
-				continue;
-			}
+			if (!context) continue;
 
-			if (event.target.closest('.' + TARGET_CONTAINER) === context._drop) {
+			if (event.target.closest(`.${TARGET_CONTAINER}`) === context._drop) {
 				return;
 			}
 
-			const composedPath = event.composedPath();
+			const composedPath = event.composedPath?.() || [];
 			if (composedPath.includes(context._element)) {
-				continue
+				continue;
 			}
 
-			const relatedTarget = { relatedTarget: context._element }
-
+			const relatedTarget = { relatedTarget: context._element };
 			if (event.type === 'click') {
-				relatedTarget.clickEvent = event
+				relatedTarget.clickEvent = event;
 			}
 
-			context._completeHide(relatedTarget)
+			context._completeHide(relatedTarget);
 		}
 	}
 
 	static keydownHandler(event) {
-		const isInput = /input|textarea/i.test(event.target.tagName)
-		const isEscapeEvent = event.key === 'Escape'
-		const isUpOrDownEvent = ['ArrowUp', 'ArrowDown'].includes(event.key)
+		const isInput = /input|textarea/i.test(event.target.tagName);
+		const isEscapeEvent = event.key === 'Escape';
+		const isUpOrDownEvent = ['ArrowUp', 'ArrowDown'].includes(event.key);
 
-		if (!isUpOrDownEvent && !isEscapeEvent) {
-			return
-		}
+		if (!isUpOrDownEvent && !isEscapeEvent) return;
+		if (isInput && !isEscapeEvent) return;
 
-		if (isInput && !isEscapeEvent) {
-			return
-		}
+		event.preventDefault();
 
-		event.preventDefault()
+		const toggle = this.matches(SELECTOR_DATA_TOGGLE)
+			? this
+			: Selectors.find(SELECTOR_DATA_TOGGLE, event.delegateTarget?.parentNode);
 
-		const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ?
-			this : (Selectors.find(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode))
+		if (!toggle) return;
 
-		const instance = VGDropdown.getOrCreateInstance(getToggleButton)
+		const instance = VGDropdown.getOrCreateInstance(toggle);
 
 		if (isUpOrDownEvent) {
-			event.stopPropagation()
-			instance.show()
-			return
-		}
-
-		if (instance._isShown()) {
-			event.stopPropagation()
-			instance.hide()
-			getToggleButton.focus()
+			event.stopPropagation();
+			instance.show();
+		} else if (instance._isShown()) {
+			event.stopPropagation();
+			instance.hide();
+			toggle.focus();
 		}
 	}
 
 	static clearDrops(event) {
 		if (event.button === 2 || (event.type === 'keyup' && event.key !== 'Tab')) {
-			return
+			return;
 		}
-
-		VGDropdown.hideOpenToggles(event)
+		VGDropdown.hideOpenToggles(event);
 	}
 }
 

package/app/modules/vgdropdown/scss/vgdropdown.scss

@@ -22,8 +22,7 @@
 		min-width: var(--vg-dropdown-min-width);
 		position: absolute;
 		opacity: 0;
-		left: 0;
-		top: 100%;
+		padding-top: 2px;
 
 		&.open {
 			transition: none;

package/app/modules/vgformsender/js/hideshowpass.js

@@ -2,8 +2,8 @@ import BaseModule from "../../base-module";
 import EventHandler from "../../../utils/js/dom/event";
 import Selectors from "../../../utils/js/dom/selectors";
 import {isDisabled, mergeDeepObject} from "../../../utils/js/functions";
-import Templater from "../../../utils/js/components/templater";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
+import Html from "../../../utils/js/components/templater";
 
 /**
  * Constants
@@ -61,13 +61,16 @@ class VGHideShowPass extends BaseModule{
 	}
 
 	build(isShow = false) {
+		let classes = this._params.classes.join(' '), elm = '';
+		const HTML = Html('string');
+
 		if (!isShow) {
-			this._params.template = 'pass-close';
+			elm = HTML.component('eye', {class: classes});
 		} else {
-			this._params.template = 'pass-open';
+			elm = HTML.component('eye', {class: classes, type: 'hide'});
 		}
 
-		new Templater(this._element, this._params).render();
+		this._element.insertAdjacentHTML(this._params.insert, elm);
 	}
 }