vgapp 0.0.1

package/app/modules/vgmodal/js/vgmodal.js

@@ -0,0 +1,346 @@
+import BaseModule from "../../base-module";
+import ScrollBarHelper from "../../../utils/js/components/scrollbar";
+import Backdrop from "../../../utils/js/components/backdrop";
+import Overflow from "../../../utils/js/components/overflow";
+import Selectors from "../../../utils/js/dom/selectors";
+import EventHandler from "../../../utils/js/dom/event";
+import {Manipulator} from "../../../utils/js/dom/manipulator";
+import {execute, isDisabled, isRTL, isVisible, mergeDeepObject, reflow} from "../../../utils/js/functions";
+import {dismissTrigger} from "../../module-fn";
+
+/**
+ * Constants
+ */
+const NAME = 'modal';
+const NAME_KEY = 'vg.modal';
+
+const ESCAPE_KEY = 'Escape';
+
+const OPEN_SELECTOR = '.vg-modal.show';
+const SELECTOR_DIALOG = '.vg-modal-dialog';
+const SELECTOR_MODAL_BODY = '.vg-modal-body';
+const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="modal"]';
+
+const CLASS_NAME_OPEN = 'vg-modal-open';
+const CLASS_NAME_SHOW = 'show';
+const CLASS_NAME_FADE = 'fade';
+const CLASS_NAME_STATIC = 'vg-modal-static'
+
+const EVENT_KEY_HIDE   = `${NAME_KEY}.hide`;
+const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
+const EVENT_KEY_SHOW   = `${NAME_KEY}.show`;
+const EVENT_KEY_SHOWN  = `${NAME_KEY}.shown`;
+const EVENT_KEY_RESIZE = `${NAME_KEY}.resize`
+
+const EVENT_KEY_KEYDOWN_DISMISS     = `keydown.dismiss.${NAME_KEY}`;
+const EVENT_KEY_HIDE_PREVENTED      = `hidePrevented.${NAME_KEY}`;
+const EVENT_KEY_CLICK_DATA_API      = `click.${NAME_KEY}.data.api`;
+const EVENT_KEY_MOUSEDOWN_DISMISS   = `mousedown.dismiss${NAME_KEY}`
+const EVENT_KEY_CLICK_DISMISS           = `click.dismiss${NAME_KEY}`
+
+class VGModal extends BaseModule {
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			backdrop: true,
+			focus: true,
+			keyboard: true,
+			fields: [],
+			ajax: {
+				route: '',
+				target: '',
+				method: 'get',
+				loader: false
+			},
+			animation: {
+				name: ['animate__backInUp', 'animate__backOutUp'], // до / после не более двух элементов
+				duration: 1000, // ms
+				delay: 1000, // ms
+				repeat: 1
+			},
+			classes: {
+				general: 'vg-modal',
+				dialog: 'vg-modal-dialog',
+				content: 'vg-modal-content',
+				header: 'vg-modal-header',
+				title: 'vg-modal-title',
+				body: 'vg-modal-body',
+				footer: 'vg-modal-footer',
+				animated: 'animate__animated'
+			}
+		}, params));
+		this._button = null;
+		this._dialog = Selectors.find(SELECTOR_DIALOG, this._element);
+		this._isShown = false;
+		this._isTransitioning = false;
+		this._scrollBar = new ScrollBarHelper();
+
+		this._addEventListeners();
+		this._dismissElement();
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY;
+	}
+
+	static init(element, params, callback) {
+		VGModal.build(element, params, callback);
+	}
+
+	static build(id, params, callback) {
+		if (typeof id !== "string") return;
+
+		let _element = document.createElement('div');
+		_element.classList.add('vg-modal', 'fade');
+		_element.id = id;let dialog = document.createElement('div');
+		dialog.classList.add('vg-modal-dialog');
+
+		let content = document.createElement('div');
+		content.classList.add('vg-modal-content');
+
+		let btnClose = document.createElement('button');
+		Manipulator.set(btnClose, 'type', 'button');
+		Manipulator.set(btnClose, 'data-vg-dismiss', 'modal');
+		Manipulator.set(btnClose, 'data-vg-target', '#' + id);
+		Manipulator.set(btnClose, 'aria-label', 'close');
+		btnClose.classList.add('vg-btn-close');
+
+		content.append(btnClose);
+
+		let body = document.createElement('div');
+		body.classList.add('vg-modal-body');
+
+		content.append(body);
+		dialog.append(content);
+		_element.append(dialog);
+
+		document.body.append(_element);
+
+		const modal = VGModal.getOrCreateInstance(_element, params);
+
+		execute(callback, [modal]);
+	}
+
+	toggle(relatedTarget) {
+		return !this._isShown ? this.show(relatedTarget) : this.hide();
+	}
+
+	show(relatedTarget) {
+		const _this = this;
+		if (isDisabled(_this._element)) return;
+
+		this._route();
+
+		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
+		if (showEvent.defaultPrevented) return;
+
+		this._isShown = true;
+		this._isTransitioning = true;
+
+		this._scrollBar.hide();
+
+		document.body.classList.add(CLASS_NAME_OPEN);
+
+		this._addFieldsInModal(relatedTarget);
+		this._adjustDialog();
+
+		Backdrop.show(() => this._showElement(relatedTarget));
+	}
+
+	hide() {
+		if (!this._isShown || this._isTransitioning) return;
+
+		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
+		if (hideEvent.defaultPrevented) return;
+
+		this._isShown = false;
+		this._isTransitioning = true;
+
+		this._element.classList.remove(CLASS_NAME_SHOW);
+
+		this._queueCallback(() => this._hideModal(), this._element, this._isAnimated());
+	}
+
+	_hideModal() {
+		this._element.style.display = 'none';
+		this._element.setAttribute('aria-hidden', true);
+		this._element.removeAttribute('aria-modal');
+		this._element.removeAttribute('role');
+		this._isTransitioning = false;
+
+		Backdrop.hide(() => {
+			document.body.classList.remove(CLASS_NAME_OPEN);
+			this._resetAdjustments();
+			this._scrollBar.reset();
+			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+		})
+	}
+
+	_showElement(relatedTarget) {
+		if (!document.body.contains(this._element)) {
+			document.body.append(this._element);
+		}
+
+		this._element.style.display = 'block';
+		this._element.removeAttribute('aria-hidden');
+		this._element.setAttribute('aria-modal', true);
+		this._element.setAttribute('role', 'dialog');
+		this._element.scrollTop = 0;
+
+		const modalBody = Selectors.find(SELECTOR_MODAL_BODY, this._dialog);
+		if (modalBody) {
+			modalBody.scrollTop = 0;
+		}
+
+		reflow(this._element);
+
+		this._element.classList.add(CLASS_NAME_SHOW)
+
+		const transitionComplete = () => {
+			if (this._params.focus) {
+				// TODO сделать фокус
+			}
+
+			this._isTransitioning = false
+			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, {
+				relatedTarget
+			})
+		}
+
+		this._queueCallback(transitionComplete, this._dialog, this._isAnimated())
+	}
+
+	_isAnimated() {
+		return this._element.classList.contains(CLASS_NAME_FADE)
+	}
+
+	_adjustDialog() {
+		const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+		const scrollbarWidth = this._scrollBar.getWidth()
+		const isBodyOverflowing = scrollbarWidth > 0
+
+		if (isBodyOverflowing && !isModalOverflowing) {
+			const property = isRTL() ? 'paddingLeft' : 'paddingRight'
+			this._element.style[property] = `${scrollbarWidth}px`
+		}
+
+		if (!isBodyOverflowing && isModalOverflowing) {
+			const property = isRTL() ? 'paddingRight' : 'paddingLeft'
+			this._element.style[property] = `${scrollbarWidth}px`
+		}
+	}
+
+	_resetAdjustments() {
+		this._element.style.paddingLeft = ''
+		this._element.style.paddingRight = ''
+	}
+
+	_addEventListeners() {
+		EventHandler.on(this._element, EVENT_KEY_KEYDOWN_DISMISS, event => {
+			if (event.key !== ESCAPE_KEY) return;
+
+			if (this._params.keyboard) {
+				this.hide();
+				return;
+			}
+
+			this._triggerBackdropTransition();
+		})
+
+		EventHandler.on(window, EVENT_KEY_RESIZE, () => {
+			if (this._isShown && !this._isTransitioning) this._adjustDialog();
+		})
+
+		EventHandler.on(this._element, EVENT_KEY_MOUSEDOWN_DISMISS, event => {
+			EventHandler.one(this._element, EVENT_KEY_CLICK_DISMISS, event2 => {
+				if (this._element !== event.target || this._element !== event2.target) return;
+
+				if (this._params.backdrop === 'static') {
+					this._triggerBackdropTransition();
+					return;
+				}
+
+				if (this._params.backdrop) {
+					this.hide();
+				}
+			})
+		})
+	}
+
+	_triggerBackdropTransition() {
+		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE_PREVENTED);
+		if (hideEvent.defaultPrevented) return;
+
+		const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight;
+		const initialOverflowY = this._element.style.overflowY;
+
+		if (initialOverflowY === 'hidden' || this._element.classList.contains(CLASS_NAME_STATIC)) return;
+		if (!isModalOverflowing) this._element.style.overflowY = 'hidden';
+
+		this._element.classList.add(CLASS_NAME_STATIC);
+
+		this._queueCallback(() => {
+			this._element.classList.remove(CLASS_NAME_STATIC);
+			this._queueCallback(() => {
+				this._element.style.overflowY = initialOverflowY;
+			}, this._dialog);
+		}, this._dialog);
+
+		this._element.focus();
+	}
+
+	_addFieldsInModal(relatedTarget) {
+		this._params = this._getParams(relatedTarget, this._params);
+
+		if (!this._params.fields.length) return;
+
+		this._params.fields.forEach(function (item) {
+			if (!'name' in item && !'value' in item) return;
+
+			let elements = Selectors.findAll('[data-' + item.name + ']');
+			if (!elements.length) return;
+
+			for (const elm of elements) {
+				switch (elm.tagName) {
+					case 'INPUT': elm.value = item.value; break;
+					case 'IMG': Manipulator.set(elm, 'src', item.value); break;
+					default: elm.innerHTML = item.value;
+				}
+			}
+		});
+	}
+}
+
+dismissTrigger(VGModal);
+
+
+/**
+ * Data API implementation
+ */
+
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+	const target = Selectors.getElementFromSelector(this);
+
+	if (['A', 'AREA'].includes(this.tagName)) event.preventDefault();
+
+	EventHandler.one(target, EVENT_KEY_SHOW, showEvent => {
+		if (showEvent.defaultPrevented) return;
+
+		EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
+			if (isVisible(this)) this.focus();
+		});
+	});
+
+	const alreadyOpen = Selectors.find(OPEN_SELECTOR);
+	if (alreadyOpen) VGModal.getInstance(alreadyOpen).hide();
+
+	const data = VGModal.getOrCreateInstance(target);
+	data.toggle(this);
+})
+
+export default VGModal;

package/app/modules/vgmodal/scss/_variables.scss

@@ -0,0 +1,25 @@
+$modal-sm: 300px !default;
+$modal-md: 500px !default;
+$modal-lg: 800px !default;
+$modal-xl: 1140px !default;
+
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
+
+$modal-map: (
+		z-index: $modal-index,
+		margin: .5rem,
+		padding: 1rem,
+		width: $modal-md,
+		color: $color,
+		background-color: $bg-color,
+		border-width: $border-width,
+		border-color: transparent,
+		border-style: $border-style,
+		border-radius: $border-radius,
+		box-shadow: $box-shadow,
+		transition: $transition-base,
+		fade-transform:  translate(0, -50px),
+		show-transform:  none,
+		scale-transform: scale(1.02),
+);

package/app/modules/vgmodal/scss/vgmodal.scss

@@ -0,0 +1,111 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGSidebar
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE.md
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "../../../utils/scss/animate";
+@import "variables";
+
+.vg-modal {
+	@include mix-vars('modal', $modal-map);
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: var(--vg-modal-z-index);
+	display: none;
+	overflow-x: hidden;
+	overflow-y: auto;
+	outline: 0;
+
+	&-dialog {
+		position: relative;
+		width: auto;
+		margin: var(--vg-modal-margin);
+		pointer-events: none;
+
+		.vg-modal.fade & {
+			transform: var(--vg-modal-fade-transform);
+			transition: var(--vg-modal-transition);
+		}
+
+		.vg-modal.show & {
+			transform: var(--vg-modal-show-transform);
+		}
+
+		.vg-modal.vg-modal-static & {
+			transform: var(--vg-modal-scale-transform);
+		}
+
+		&-scrollable {
+			height: calc(100% - var(--vg-modal-margin) * 2);
+
+			.vg-modal-content {
+				max-height: 100%;
+				overflow: hidden;
+			}
+
+			.vg-modal-body {
+				overflow-y: auto;
+			}
+		}
+
+		&-centered {
+			display: flex;
+			align-items: center;
+			min-height: calc(100% - var(--vg-modal-margin) * 2);
+		}
+	}
+
+	&-content {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		color: var(--vg-modal-color);
+		pointer-events: auto;
+		background-color: var(--vg-modal-background-color);
+		background-clip: padding-box;
+		border: var(--vg-modal-border-width) var(--vg-modal-border-style) var(--vg-modal-border-color);
+		border-radius: var(--vg-modal-border-radius);
+		box-shadow: var(--vg-modal-box-shadow);
+		outline: 0;
+		padding: var(--vg-modal-padding);
+	}
+}
+
+@media screen and (min-width: 576px){
+	.vg-modal {
+		--vg-modal-margin: #{$modal-dialog-margin-y-sm-up};
+		--vg-modal-box-shadow: #{$modal-content-box-shadow-sm-up};
+	}
+
+	.vg-modal-dialog {
+		max-width: var(--vg-modal-width);
+		margin-right: auto;
+		margin-left: auto;
+	}
+
+	.vg-modal-sm {
+		--vg-modal-width: #{$modal-sm};
+	}
+}
+
+@media screen and (min-width: 992px){
+	.vg-modal-lg, .vg-modal-xl {
+		--vg-modal-width: #{$modal-lg};
+	}
+}
+
+@media screen and (min-width: 1399px) {
+	.vg-modal-xl {
+		--vg-modal-width: #{$modal-xl};
+	}
+}