vgapp 0.0.1

package/app/modules/vgnav/scss/_placement.scss

@@ -0,0 +1,70 @@
+&.vg-nav-horizontal {
+	.vg-nav-wrapper {
+		flex-direction: row;
+
+		.dropdown {
+			> ul {
+				&.left, .left {
+					left: 0;
+				}
+
+				&.right, .right {
+					right: 0;
+				}
+
+				.dropdown {
+					ul.left {
+						left: 100%;
+					}
+
+					ul.right {
+						right: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+
+&.vg-nav-vertical {
+	.vg-nav-wrapper {
+		flex-direction: column;
+
+		.dropdown {
+			> ul {
+				top: 100%;
+
+				&.left, .left {
+					left: 100%;
+				}
+
+				&.right, .right {
+					right: 100%;
+				}
+
+				&.fade {
+					top: 0;
+				}
+			}
+
+			&.show {
+				> ul {
+					top: 0;
+				}
+			}
+		}
+
+		.dropdown-mega {
+			position: relative;
+
+			.dropdown-mega-container {
+				left: 100%;
+				top: 100%;
+
+				&.fade {
+					top: 0;
+				}
+			}
+		}
+	}
+}

package/app/modules/vgnav/scss/_toggle.scss

@@ -0,0 +1,20 @@
+.toggle {
+	transition: var(--vg-nav-transition);
+	transform: rotate(0);
+
+	span {
+		&.default {
+			border-top: .3em solid;
+			border-right: .3em solid transparent;
+			border-bottom: 0;
+			border-left: .3em solid transparent;
+			width: 0;
+			height: 0;
+			transition: var(--vg-nav-transition);
+			transform: rotate(0);
+			display: inline-block;
+			margin-left: .355em;
+			vertical-align: .255em;
+		}
+	}
+}

package/app/modules/vgnav/scss/_variables.scss

@@ -0,0 +1,68 @@
+$nav-map: (
+		transition: all .2s ease-in-out,
+);
+
+$grid-breakpoints: (
+		xs: 576px,
+		sm: 768px,
+		md: 992px,
+		lg: 1200px,
+		xl: 1400px,
+		xxl: 1600px,
+		xxxl: 1800px
+);
+
+$nav-item-map: (
+		margin: 0,
+		padding: 23px 25px,
+		font-size: 1rem,
+		font-weight: 400,
+		line-height: 1.4,
+		color: #212529,
+		decoration: none,
+		display: inline-block,
+		border: none,
+		border-radius: 0,
+		white-space: nowrap,
+		position: relative,
+);
+
+$hamburger-map: (
+		height: 27px,
+		line-width: 35px,
+		line-color: #333333,
+		line-height: 3px,
+		line-indent-top: 7px
+);
+
+$nav-drop-map: (
+		z-index: 10,
+		transition: map-get($nav-map, transition),
+		width: 200px,
+		border-color: $border-color,
+		border-radius: 0,
+		padding: 0,
+		bg: $bg-color
+);
+
+$nav-drop-mega-map: (
+		width: 100%,
+		min-height: 300px,
+		bg: $bg-color,
+		border-color: $border-color,
+		border-radius: 0,
+		padding: 1rem,
+		z-index: 10,
+		transition: map-get($nav-map, transition),
+);
+
+$nav-drop-item-map: (
+		padding: .75rem 1rem,
+		border-color: transparent,
+		border-color-hover: transparent,
+		bg: transparent,
+		bg-hover: transparent,
+		color: inherit,
+		color-hover: inherit,
+		transition: map-get($nav-map, transition),
+);

package/app/modules/vgnav/scss/vgnav.scss

@@ -0,0 +1,150 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGNav
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+@import "breakpoints";
+
+.vg-nav {
+	@include mix-vars('nav', $nav-map);
+	@include mix-vars('nav-item', $nav-item-map);
+	@include mix-vars('nav-drop', $nav-drop-map);
+	@include mix-vars('nav-drop-mega', $nav-drop-mega-map);
+	@include mix-vars('nav-drop-item', $nav-drop-item-map);
+	@include mix-vars('nav-hamburger', $hamburger-map);
+
+	.vg-nav-wrapper {
+		display: flex;
+		padding: 0;
+		margin: 0;
+		position: relative;
+
+		> li {
+			list-style: none;
+			margin: var(--vg-nav-item-margin);
+
+			> a {
+				white-space: var(--vg-nav-item-white-space);
+				position: var(--vg-nav-item-position);
+				display: var(--vg-nav-item-display);
+				padding: var(--vg-nav-item-padding);
+				font-size: var(--vg-nav-item-font-size);
+				font-weight: var(--vg-nav-item-font-weight);
+				line-height: var(--vg-nav-item-line-height);
+				color: var(--vg-nav-item-color);
+				text-decoration: var(--vg-nav-item-decoration);
+				border: var(--vg-nav-item-border);
+				border-radius: var(--vg-nav-item-border-radius);
+			}
+
+			/** set toggle **/
+			@import "toggle";
+		}
+
+		.dropdown {
+			.dropdown-content {
+				transition: var(--vg-nav-drop-transition);
+				list-style: none;
+				z-index: var(--vg-nav-drop-z-index);
+				position: absolute;
+				top: 120%;
+				opacity: 0;
+				visibility: hidden;
+				width: var(--vg-nav-drop-width);
+				padding: var(--vg-nav-drop-padding);
+				border: 1px solid var(--vg-nav-drop-border-color);
+				border-radius: var(--vg-nav-drop-border-radius);
+				background-color: var(--vg-nav-drop-bg);
+
+				&:not(.show) {
+					display: none;
+				}
+
+				&.fade {
+					visibility: visible;
+					opacity: 1;
+					top: 100%;
+				}
+
+				.dropdown-content {
+					&.fade {
+						top: 0;
+					}
+				}
+
+				li {
+					a {
+						display: block;
+						padding: var(--vg-nav-drop-item-padding);
+						border-top: 1px solid var(--vg-nav-drop-item-border-color);
+						background-color: var(--vg-nav-drop-item-bg);
+						transition: var(--vg-nav-drop-item-transition);
+						color: var(--vg-nav-drop-item-color);
+
+						&:hover {
+							background-color: var(--vg-nav-drop-item-bg-hover);
+							color: var(--vg-nav-drop-item-color-hover);
+							border-color: var(--vg-nav-drop-item-border-color-hover);
+						}
+					}
+
+					&:first-child {
+						a {
+							border-top: none;
+						}
+					}
+				}
+			}
+
+			&.dropdown-mega {
+				position: static;
+
+				.dropdown-content {
+					transition: var(--vg-nav-drop-mega-transition);
+					position: absolute;
+					left: 0;
+					width: var(--vg-nav-drop-mega-width);
+					min-height: var(--vg-nav-drop-mega-min-height);
+					padding: var(--vg-nav-drop-mega-padding);
+					border: 1px solid var(--vg-nav-drop-mega-border-color);
+					border-radius: var(--vg-nav-drop-mega-border-radius);
+					background-color: var(--vg-nav-drop-mega-bg);
+					z-index: var(--vg-nav-drop-z-index);
+
+					&:not(.show) {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+
+	/** set placement **/
+	@import "placement";
+
+	/** set hamburger **/
+	@import "hamburger";
+
+	&:not(.vg-nav-expand) {
+		@each $breakpoint in map-keys($grid-breakpoints) {
+			@include media-breakpoint-down($breakpoint, $grid-breakpoints) {
+				&.vg-nav-#{$breakpoint} {
+					.vg-nav-hamburger {
+						display: flex;
+					}
+
+					> .vg-nav-wrapper {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+}

package/app/modules/vgsidebar/js/vgsidebar.js

@@ -0,0 +1,165 @@
+import BaseModule from "../../base-module";
+import {isDisabled, isVisible, mergeDeepObject} from "../../../utils/js/functions";
+import EventHandler from "../../../utils/js/dom/event";
+import {dismissTrigger} from "../../module-fn";
+import Selectors from "../../../utils/js/dom/selectors";
+import Backdrop from "../../../utils/js/components/backdrop";
+import Overflow from "../../../utils/js/components/overflow";
+
+/**
+ * Constants
+ */
+const NAME = 'sidebar';
+const NAME_KEY = 'vg.sidebar';
+const CLASS_NAME_SHOW = 'show';
+const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="sidebar"]'
+
+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_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`;
+
+class VGSidebar extends BaseModule {
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			backdrop: true,
+			overflow: true,
+			keyboard: true,
+			ajax: {
+				route: '',
+				target: '',
+				method: 'get'
+			}
+		}, params));
+
+		this._addEventListeners();
+		this._dismissElement();
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY
+	}
+
+	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;
+
+		if (_this._params.backdrop) {
+			Backdrop.show();
+		}
+
+		if (_this._params.overflow) {
+			Overflow.append();
+		}
+
+		_this._element.classList.add(CLASS_NAME_SHOW);
+
+		const completeCallBack = () => {
+			EventHandler.on(Selectors.find('.vg-backdrop'), 'mousedown.vg.backdrop', function () {
+				_this.hide();
+			});
+
+			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
+		}
+		this._queueCallback(completeCallBack, this._element, true, 50)
+	}
+
+	hide() {
+		const _this = this;
+		if (isDisabled(_this._element)) return;
+
+		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
+		if (hideEvent.defaultPrevented) return;
+
+		if (_this._params.backdrop) {
+			Backdrop.hide(function () {
+				if (_this._params.overflow) {
+					Overflow.destroy();
+				}
+			});
+		}
+
+		if (_this._params.overflow) {
+			Overflow.destroy();
+		}
+
+		_this._element.setAttribute('aria-expanded', false);
+		_this._element.classList.remove(CLASS_NAME_SHOW);
+
+		const completeCallback = () => EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
+		this._queueCallback(completeCallback, this._element, true);
+	}
+
+	dispose() {
+		super.dispose();
+	}
+
+	_isShown() {
+		return this._element.classList.contains(CLASS_NAME_SHOW);
+	}
+
+	_addEventListeners() {
+		EventHandler.on(document, EVENT_KEY_KEYDOWN_DISMISS, event => {
+			if (event.key !== 'Escape') return;
+
+			if (this._params.keyboard) {
+				this.hide();
+				return;
+			}
+
+			EventHandler.trigger(this._element, EVENT_KEY_HIDE_PREVENTED)
+		});
+	}
+}
+
+dismissTrigger(VGSidebar);
+
+/**
+ * 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()
+	}
+
+	if (isDisabled(this)) {
+		return
+	}
+
+	this.setAttribute('aria-expanded', true);
+	EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
+		if (isVisible(this)) this.focus();
+		this.setAttribute('aria-expanded', false);
+	})
+
+	const alreadyOpen = Selectors.find('.vg-sidebar.show')
+	if (alreadyOpen && alreadyOpen !== target) {
+		VGSidebar.getInstance(alreadyOpen).hide()
+	}
+
+	const data = VGSidebar.getOrCreateInstance(target)
+	data.toggle(this);
+});
+
+export default VGSidebar;

package/app/modules/vgsidebar/scss/_variables.scss

@@ -0,0 +1,19 @@
+$sidebar-map: (
+		horizontal: (
+				width: 400px,
+				height: 100vh,
+		),
+		vertical: (
+				width: 100vw,
+				height: 30vh,
+		),
+		bg-color:                  $bg-color,
+		color:                     $color,
+		box-shadow:                $box-shadow,
+		header-height:             60px,
+		footer-height:             70px,
+		padding:                   1rem,
+		border:                    1px solid #{$border-color},
+		z-index:                   $sidebar-index,
+		transition:                $transition-base,
+);

package/app/modules/vgsidebar/scss/vgsidebar.scss

@@ -0,0 +1,90 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGSidebar
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-sidebar {
+	@include mix-vars('sidebar', $sidebar-map);
+	position: fixed;
+	width: auto;
+	height: auto;
+	transition: var(--vg-sidebar-transition);
+	z-index: var(--vg-sidebar-z-index);
+	background: var(--vg-sidebar-bg-color);
+	color: var(--vg-sidebar-color);
+	box-shadow: var(--vg-sidebar-box-shadow);
+
+	&.left, &.right {
+		width: var(--vg-sidebar-horizontal-width);
+		height: var(--vg-sidebar-horizontal-height);
+		top: 0;
+	}
+
+	&.left {
+		left: -105%;
+
+		&.show {
+			left: 0;
+		}
+	}
+
+	&.right {
+		right: -105%;
+
+		&.show {
+			right: 0;
+		}
+	}
+
+	&.top, &.bottom {
+		height: var(--vg-sidebar-vertical-height);
+		width: var(--vg-sidebar-vertical-width);
+		left: 0;
+	}
+
+	&.top {
+		top: -105%;
+
+		&.show {
+			top: 0;
+		}
+	}
+
+	&.bottom {
+		bottom: -105%;
+
+		&.show {
+			bottom: 0;
+		}
+	}
+
+	&-header {
+		height: var(--vg-sidebar-header-height);
+		z-index: 10;
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding: var(--vg-sidebar-padding);
+		border-bottom: var(--vg-sidebar-border);
+	}
+
+	&-body {
+		height: calc(100% - var(--vg-sidebar-header-height) - var(--vg-sidebar-footer-height));
+		overflow-y: auto;
+		padding: var(--vg-sidebar-padding);
+	}
+
+	&-footer {
+		height: var(--vg-sidebar-footer-height);
+		padding: var(--vg-sidebar-padding);
+		border-top: var(--vg-sidebar-border);
+	}
+}

package/app/utils/js/components/backdrop.js

@@ -0,0 +1,54 @@
+import {execute} from "../functions";
+import Selectors from "../dom/selectors";
+import EventHandler from "../dom/event";
+import Overflow from "./overflow";
+
+const NAME = 'backdrop'
+const CLASS_NAME = 'vg-backdrop'
+const CLASS_NAME_FADE = 'fade'
+const EVENT_MOUSEDOWN = `mousedown.vg.${NAME}`
+
+class Backdrop {
+	static show(callback) {
+		Backdrop._append()
+		execute(callback);
+	}
+
+	static hide(callback) {
+		Backdrop._destroy();
+		execute(callback);
+	}
+
+	static _append() {
+		if (Selectors.find('.' + CLASS_NAME)) {
+			return false;
+		}
+
+		let backdrop = document.createElement('div');
+		backdrop.classList.add(CLASS_NAME);
+
+		document.body.append(backdrop);
+
+		setTimeout(() => {
+			backdrop.classList.add(CLASS_NAME_FADE)
+		}, 50);
+
+		EventHandler.on(backdrop, EVENT_MOUSEDOWN, () => {
+			Backdrop.hide()
+			Overflow.destroy();
+		});
+	}
+
+	static _destroy() {
+		let element = Selectors.find('.' + CLASS_NAME);
+		if (!element) return;
+
+		element.classList.remove(CLASS_NAME_FADE);
+
+		setTimeout(() => {
+			element.remove();
+		}, 500);
+	}
+}
+
+export default Backdrop;

package/app/utils/js/components/overflow.js

@@ -0,0 +1,28 @@
+import {Manipulator} from "../dom/manipulator";
+
+/**
+ * Класс Overflow
+ * Запрещает скроллинг и убирает его, компенсируя отступом
+ */
+
+class Overflow {
+	static append() {
+		document.body.style.paddingRight = getWidth() + 'px';
+		document.body.style.overflow = 'hidden';
+
+		function getWidth() {
+			const documentWidth = document.documentElement.clientWidth
+			return Math.abs(window.innerWidth - documentWidth)
+		}
+	}
+
+	static destroy() {
+		document.body.style.overflow = '';
+		document.body.style.paddingRight = '';
+
+		let styles = Manipulator.get(document.body, 'style');
+		if (!styles) Manipulator.remove(document.body, 'style');
+	}
+}
+
+export default Overflow;

package/app/utils/js/components/params.js

@@ -0,0 +1,44 @@
+import {isElement, mergeDeepObject, normalizeData} from "../functions";
+import {Manipulator} from "../dom/manipulator";
+
+class Params {
+	constructor(params, element = null) {
+		this._params = this.merge(params, element);
+	}
+
+	get() {
+		return this._params;
+	}
+
+	fromElement(element) {
+		return isElement(element) ? Manipulator.get(element) : {};
+	}
+
+	merge(params, element) {
+		let mParams = mergeDeepObject(params, this.fromElement(element));
+
+		for (let key in mParams) {
+			if (key.indexOf('-') !== -1) {
+				let keys = key.split('-'),
+					value = normalizeData(mParams[key]);
+
+				if (keys[0] in mParams) {
+					if (keys[1] in mParams[keys[0]]) {
+						mParams[keys[0]][keys[1]] = value;
+					}
+				}
+
+				delete mParams[key];
+			}
+		}
+
+		if ('params' in mParams) {
+			mParams = mergeDeepObject(mParams, mParams.params);
+			delete mParams.params;
+		}
+
+		return mParams;
+	}
+}
+
+export default Params;