vgapp 0.0.1

package/.gitattributes

@@ -0,0 +1 @@
+* text=auto

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 vegas-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# VEGAS APP

package/app/modules/base-module.js

@@ -0,0 +1,97 @@
+import {execute, executeAfterTransition, isEmptyObj} from "../utils/js/functions";
+import Selectors from "../utils/js/dom/selectors";
+import Data from "../utils/js/dom/data";
+import Params from "../utils/js/components/params";
+import EventHandler from "../utils/js/dom/event";
+import {Ajax, getSVG} from "./module-fn";
+
+class BaseModule {
+	constructor(element) {
+		if (!element) return
+
+		this._element = Selectors.find(element);
+		if (!this._element) return;
+
+		this._params = {};
+		Data.set(this._element, this.constructor.NAME_KEY, this)
+	}
+
+	_getParams(element, params) {
+		return new Params(params, element).get();
+	}
+
+	dispose() {
+		Data.remove(this._element, this.constructor.NAME_KEY);
+		EventHandler.off(this._element, this.constructor.EVENT_KEY)
+
+		for (const propertyName of Object.getOwnPropertyNames(this)) {
+			this[propertyName] = null
+		}
+	}
+
+	_route(callback) {
+		const _this = this;
+		let $content = null;
+
+		const setData = (data) => {
+			if ($content) $content.innerHTML = data;
+		};
+
+		if (!_this._params.hasOwnProperty('ajax')) {
+			return;
+		}
+
+		if (!_this._params.ajax.route) {
+			return;
+		}
+
+		if (!'method' in _this._params.ajax) {
+			_this._params.ajax.method = 'get';
+		}
+
+		if ('target' in _this._params.ajax && _this._params.ajax.target) {
+			$content = Selectors.find(_this._params.ajax.target);
+		}
+
+		if ('loader' in _this._params.ajax && _this._params.ajax.loader) {
+			setData('<div class="vg-loader"></div>');
+		}
+
+		Ajax[_this._params.ajax.method](_this._params.ajax.route, _this._params.ajax.data || {}, function (status, data) {
+			setData(data);
+			execute(callback, [status, data]);
+		});
+	}
+
+	_dismissElement() {
+		let cross = getSVG('cross'),
+			button = this._element.querySelector('.vg-btn-close');
+
+		if (button) {
+			let svg = button.querySelector('svg');
+			if (!svg) button.insertAdjacentHTML('beforeend', cross);
+		}
+	}
+
+	_queueCallback(callback, element, isAnimated = true, timeOutMs) {
+		executeAfterTransition(callback, element, isAnimated, timeOutMs);
+	}
+
+	static getInstance(element) {
+		return Data.get(Selectors.find(element), this.NAME_KEY)
+	}
+
+	static getOrCreateInstance(element, params = {}) {
+		return this.getInstance(element) || new this(element, !isEmptyObj(params) ? params : {})
+	}
+
+	static get DATA_KEY() {
+		return `vg.${this.NAME}`
+	}
+
+	static get EVENT_KEY() {
+		return `.${this.DATA_KEY}`
+	}
+}
+
+export default BaseModule;

package/app/modules/module-fn.js

@@ -0,0 +1,119 @@
+import EventHandler from "../utils/js/dom/event";
+import {isDisabled, isEmptyObj} from "../utils/js/functions";
+import Selectors from "../utils/js/dom/selectors";
+
+/**
+ * Тут собраны вспомогательные скрипты для работы модулей
+ */
+
+/**
+ * Набор svg элементов
+ * @param name
+ * @returns {*|{}}
+ */
+const getSVG = (name) => {
+	const svg =  {
+		error: '<svg  viewBox="0 0 87 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="ui-success" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group-2" transform="translate(2.000000, 2.000000)"><circle id="Oval-2" stroke="rgba(252, 191, 191, .5)" stroke-width="4" cx="41.5" cy="41.5" r="41.5"></circle><circle class="ui-error-circle" stroke="#F74444" stroke-width="4" cx="41.5" cy="41.5" r="41.5"></circle><path class="ui-error-line1" d="M22.244224,22 L60.4279902,60.1837662" id="Line" stroke="#F74444" stroke-width="3" stroke-linecap="square"></path><path class="ui-error-line2" d="M60.755776,21 L23.244224,59.8443492" id="Line" stroke="#F74444" stroke-width="3" stroke-linecap="square"></path></g></g></svg>',
+		success: '<svg viewBox="0 0 87 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="ui-error" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group-3" transform="translate(2.000000, 2.000000)"><circle id="Oval-2" stroke="rgba(117, 183, 152, 0.4)" stroke-width="4" cx="41.5" cy="41.5" r="41.5"></circle><circle  class="ui-success-circle" id="Oval-2" stroke="#A5DC86" stroke-width="4" cx="41.5" cy="41.5" r="41.5"></circle><polyline class="ui-success-path" id="Path-2" stroke="#A5DC86" stroke-width="4" points="19 38.8036813 31.1020744 54.8046875 63.299221 28"></polyline></g></g></svg>',
+		waiting: '<svg viewBox="0 0 87 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="ui-waiting" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Group-3" transform="translate(2.000000, 2.000000)"><circle id="Oval-2" stroke="rgba(255, 218, 106, 0.4)" stroke-width="4" cx="41.5" cy="41.5" r="41.5"></circle><circle class="ui-waiting-circle" id="Oval-2" stroke="#ffda6a" stroke-width="4" cx="41.5" cy="41.5" r="41.5"></circle><path class="ui-waiting-line1" d="M43 63C54.598 63 64 53.598 64 42C64 30.402 54.598 21 43 21C31.402 21 22 30.402 22 42C22 53.598 31.402 63 43 63Z" stroke-width="3" stroke="#ffda6a" stroke-linecap="round" stroke-linejoin="round"/><path class="ui-waiting-line2" d="M40.6667 32.6641V44.3307H52.3334" stroke="#ffda6a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>',
+		dots: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>',
+		cross: '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 224.512 224.512" xml:space="preserve"><g><polygon points="224.507,6.997 217.521,0 112.256,105.258 6.998,0 0.005,6.997 105.263,112.254 0.005,217.512 6.998,224.512 112.256,119.24 217.521,224.512 224.507,217.512 119.249,112.254 "/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
+	};
+
+	return svg[name] ?? {};
+}
+
+/**
+ * Вешаем событие "Закрыть" на все модалки, сайдбары и т.п.
+ * @param module
+ * @param method
+ */
+const dismissTrigger = (module, method = 'hide') => {
+	const clickEvent = `click.dismiss.${module.EVENT_KEY}`
+	const name = module.NAME;
+
+	EventHandler.on(document, clickEvent, `[data-vg-dismiss="${name}"]`, function (event) {
+		if (['A', 'AREA'].includes(this.tagName)) {
+			event.preventDefault()
+		}
+
+		if (isDisabled(this)) {
+			return
+		}
+
+		const target = Selectors.getSelectorFromElement(this) || this.closest(`.vg-${name}`)
+		const instance = module.getOrCreateInstance(target)
+
+		instance[method]()
+	})
+}
+
+/**
+ * AJAX REQUEST
+ * @type {{post: ajax.post, get: ajax.get, x: ((function(): (XMLHttpRequest))|*), send: ajax.send}}
+ */
+const Ajax = {
+	x: function () {
+		if (typeof XMLHttpRequest !== 'undefined') {
+			return new XMLHttpRequest();
+		}
+		let versions = [
+			"MSXML2.XmlHttp.6.0",
+			"MSXML2.XmlHttp.5.0",
+			"MSXML2.XmlHttp.4.0",
+			"MSXML2.XmlHttp.3.0",
+			"MSXML2.XmlHttp.2.0",
+			"Microsoft.XmlHttp"
+		];
+
+		let xhr;
+		for (let i = 0; i < versions.length; i++) {
+			try {
+				xhr = new ActiveXObject(versions[i]);
+				break;
+			} catch (e) {}
+		}
+
+		return xhr;
+	},
+
+	send: function (url, callback, method, data, async) {
+		if (async === undefined) {
+			async = true;
+		}
+		let x = Ajax.x();
+		x.open(method, url, async);
+		x.onreadystatechange = function () {
+			if (x.readyState === 4) {
+				switch (x.status) {
+					case 200:
+						callback('success', x.responseText)
+						break;
+					default:
+						callback('error', x.statusText)
+						break;
+				}
+			}
+		};
+		x.send(data)
+	},
+
+	get: function (url, data, callback, async) {
+		let query = [];
+
+		if (!isEmptyObj(data)) {
+			for (let key of data) {
+				query.push(encodeURIComponent(key[0]) + '=' + encodeURIComponent(key[1]));
+			}
+		}
+		Ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
+	},
+
+	post: function (url, data, callback, async) {
+		Ajax.send(url, callback, 'POST', data, async)
+	}
+};
+
+export {
+	dismissTrigger, Ajax, getSVG
+}

package/app/modules/vgcollapse/js/vgcollapse.js

@@ -0,0 +1,219 @@
+import BaseModule from "../../base-module";
+import {mergeDeepObject, reflow} from "../../../utils/js/functions";
+import EventHandler from "../../../utils/js/dom/event";
+import Selectors from "../../../utils/js/dom/selectors";
+import {Manipulator} from "../../../utils/js/dom/manipulator";
+
+/**
+ * Constants
+ */
+const NAME = 'collapse';
+const NAME_KEY = 'vg.collapse';
+const CLASS_NAME_SHOW = 'show';
+const CLASS_NAME_COLLAPSE = 'vg-collapse';
+const CLASS_NAME_COLLAPSING = 'vg-collapsing';
+const CLASS_NAME_COLLAPSED = 'vg-collapsed';
+const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`;
+
+const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="collapse"]';
+const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing';
+
+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_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
+
+class VGCollapse extends BaseModule {
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			toggle: true,
+			parent: null,
+			ajax: {
+				route: '',
+				target: '',
+				method: 'get'
+			}
+		}, params));
+
+		this._isTransitioning = false
+		this._triggerArray = []
+
+		const toggleList = Selectors.findAll(SELECTOR_DATA_TOGGLE);
+
+		for (const elem of toggleList) {
+			const selector = Selectors.getSelectorFromElement(elem);
+			const filterElement = Selectors.findAll(selector).filter(foundElement => foundElement === this._element);
+
+			if (selector !== null && filterElement.length) {
+				this._triggerArray.push(elem)
+			}
+		}
+
+		this._initializeChildren();
+
+		if (!this._params.parent) {
+			this._addAriaAndCollapsedClass(this._triggerArray, this._isShown());
+		}
+
+		if (this._params.toggle) {
+			this.toggle();
+		}
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY
+	}
+
+	toggle(relatedTarget) {
+		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+	}
+
+	show() {
+		const _this = this;
+
+		if (_this._isTransitioning || _this._isShown()) return;
+
+		let activeChildren = [];
+
+		if (_this._params.parent) {
+			activeChildren = this._getFirstLevelChildren(SELECTOR_ACTIVES)
+				.filter(element => element !== this._element)
+				.map(element => VGCollapse.getOrCreateInstance(element, { toggle: false }));
+		}
+
+		if (activeChildren.length && activeChildren[0]._isTransitioning) return;
+
+		const startEvent = EventHandler.trigger(_this._element, EVENT_KEY_SHOW);
+		if (startEvent.defaultPrevented) return;
+
+		for (const activeInstance of activeChildren) {
+			activeInstance.hide();
+		}
+
+		_this._element.classList.remove(CLASS_NAME_COLLAPSE)
+		_this._element.classList.add(CLASS_NAME_COLLAPSING)
+
+		_this._element.style.height = 0;
+
+		_this._addAriaAndCollapsedClass(_this._triggerArray, true);
+		_this._isTransitioning = true;
+
+		_this._route();
+
+		const complete = () => {
+			_this._isTransitioning = false;
+
+			_this._element.classList.remove(CLASS_NAME_COLLAPSING);
+			_this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW);
+
+			_this._element.style.height = '';
+			EventHandler.trigger(_this._element, EVENT_KEY_SHOWN);
+		}
+
+		_this._queueCallback(complete, _this._element, true);
+
+		const scrollSize = `scrollHeight`;
+		_this._element.style.height = `${_this._element[scrollSize]}px`;
+	}
+
+	hide() {
+		const _this = this;
+
+		if (_this._isTransitioning || !_this._isShown()) return;
+
+		const startEvent = EventHandler.trigger(_this._element, EVENT_KEY_HIDE)
+		if (startEvent.defaultPrevented) return;
+
+		_this._element.style.height = `${this._element.getBoundingClientRect().height}px`;
+		reflow(_this._element);
+
+		_this._element.classList.add(CLASS_NAME_COLLAPSING);
+		_this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW);
+
+		for (const trigger of _this._triggerArray) {
+			const element = Selectors.getElementFromSelector(trigger);
+
+			if (element && !_this._isShown(element)) {
+				_this._addAriaAndCollapsedClass([trigger], false);
+			}
+		}
+
+		_this._isTransitioning = true
+
+		const complete = () => {
+			_this._isTransitioning = false;
+			_this._element.classList.remove(CLASS_NAME_COLLAPSING);
+			_this._element.classList.add(CLASS_NAME_COLLAPSE);
+			EventHandler.trigger(_this._element, EVENT_KEY_HIDDEN);
+		}
+
+		_this._element.style.height = '';
+		_this._queueCallback(complete, _this._element, true);
+	}
+
+	dispose() {
+		super.dispose();
+	}
+
+	_isShown(element = this._element) {
+		return element.classList.contains(CLASS_NAME_SHOW);
+	}
+
+	_addAriaAndCollapsedClass(triggerArray, isOpen) {
+		if (!triggerArray.length) {
+			return
+		}
+
+		for (const element of triggerArray) {
+			this._changeStateButton(element, isOpen);
+		}
+	}
+
+	_initializeChildren() {
+		if (!this._params.parent) return;
+
+		const children = this._getFirstLevelChildren(SELECTOR_DATA_TOGGLE);
+
+		for (const element of children) {
+			const selected = Selectors.getElementFromSelector(element)
+
+			if (selected) {
+				this._addAriaAndCollapsedClass([element], this._isShown(selected))
+			}
+		}
+	}
+
+	_getFirstLevelChildren(selector) {
+		const children = Selectors.find(CLASS_NAME_DEEPER_CHILDREN, this._params.parent);
+		return Selectors.find(selector, this._params.parent).filter(element => !children.includes(element));
+	}
+
+	_changeStateButton(element, isOpen) {
+		element.classList.toggle(CLASS_NAME_COLLAPSED, !isOpen);
+		element.setAttribute('aria-expanded', isOpen);
+		element.innerHTML = Manipulator.get(element, `data-${isOpen ? 'hide' : 'show'}-text`) || element.innerHTML;
+	}
+}
+
+/**
+ * Data API implementation
+ */
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+	if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
+		event.preventDefault()
+	}
+
+	Selectors.getMultipleElementsFromSelector(this).forEach(function (element) {
+		VGCollapse.getOrCreateInstance(element, {toggle: false}).toggle();
+	});
+})
+
+export default VGCollapse;