vgapp 0.0.5 → 0.0.7

package/app/modules/base-module.js

@@ -60,7 +60,7 @@ class BaseModule {
 		}
 
 		Ajax[_this._params.ajax.method](_this._params.ajax.route, _this._params.ajax.data || {}, function (status, data) {
-			setData(data);
+			setData(data.response);
 			execute(callback, [status, data]);
 		});
 	}

package/app/modules/module-fn.js

@@ -83,14 +83,15 @@ const Ajax = {
 		}
 		let x = Ajax.x();
 		x.open(method, url, async);
+		x.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 		x.onreadystatechange = function () {
 			if (x.readyState === 4) {
 				switch (x.status) {
 					case 200:
-						callback('success', x.responseText)
+						callback('success', {text: x.statusText, response: x.responseText, code: x.status})
 						break;
 					default:
-						callback('error', x.statusText)
+						callback('error', {text: x.statusText, response: x.responseText, code: x.status})
 						break;
 				}
 			}

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

@@ -27,7 +27,7 @@ class VGDropdown extends BaseModule {
 	constructor(element, params) {
 		super(element, params);
 
-		this._params = this._getParams(element, mergeDeepObject({
+		let defaultParams = {
 			offset: [0, 2],
 			over: false,
 			backdrop: true,
@@ -35,14 +35,20 @@ class VGDropdown extends BaseModule {
 			keyboard: true,
 			placement: 'bottom',
 			animation: true,
-			timeoutAnimation: 300,
+			timeoutAnimation: 350,
 			hover: false,
 			ajax: {
 				route: '',
 				target: '',
 				method: 'get'
 			}
-		}, params));
+		}
+
+		if ('offset' in params && Array.isArray(params.offset)) {
+			defaultParams.offset = params.offset;
+		}
+
+		this._params = this._getParams(element, mergeDeepObject(defaultParams, params));
 
 		this._parent = this._element.parentNode;
 		this._drop = Selectors.find('.' + TARGET_CONTAINER, this._parent);

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

@@ -2,7 +2,7 @@ import BaseModule from "../../base-module";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
 import VGModal from "../../vgmodal/js/vgmodal";
-import {makeRandomString, mergeDeepObject, normalizeData} from "../../../utils/js/functions";
+import {isObject, makeRandomString, mergeDeepObject, normalizeData} from "../../../utils/js/functions";
 import Selectors from "../../../utils/js/dom/selectors";
 import VGCollapse from "../../vgcollapse/js/vgcollapse";
 import {getSVG} from "../../module-fn";
@@ -212,9 +212,27 @@ class VGFormSender extends BaseModule {
 	alert(data, status) {
 		const _this = this;
 
-		if (typeof data === "object") {
-			if ('errors' in data) {
-				status = normalizeData(data.errors) ? 'error' : 'success';
+		if (isObject(data)) {
+			if (('code' in data) && data.code && data.code === 200) {
+				if ('response' in data && data.response) {
+					let response = normalizeData(data.response);
+					if (typeof response === 'string') {
+						if (response.indexOf("Parse error") !== -1 || response.indexOf("syntax error") !== -1) {
+							status = 'error';
+							data = {
+								response: {
+									title: 'Error',
+									message: 'Something went wrong, please repeat later'
+								},
+								text: 'Something went wrong, please repeat later'
+							}
+						}
+					} else {
+						if ('errors' in response && normalizeData(response.errors)) {
+							status = normalizeData(response.errors) ? 'error' : 'success';
+						}
+					}
+				}
 			}
 		}
 
@@ -288,21 +306,79 @@ class VGFormSender extends BaseModule {
 	setDataRelationStatus($element, status, data, type) {
 		let $alert = Selectors.find('.vg-alert-' + status, $element);
 
-		if (typeof data === 'object') {
-			if ('view' in data && typeof data.view === 'object') {
-				let txt = '';
-
-				if ('title' in data.view) {
-					txt += '<h4 class="vg-alert-content--title">' + data.view.title + '</h4>'
+		if (isObject(data)) {
+			if (status === 'error') {
+				if ('code' in data && data.code !== 200) {
+					if ('text' in data && !data.text) {
+						data.text = 'Something went wrong, please repeat later';
+
+						switch (data.code) {
+							case 400:
+								data.text = 'Bad Request'
+								break;
+							case 401:
+								data.text = 'Unauthorized'
+								break;
+							case 403:
+								data.text = 'Unauthorized'
+								break;
+							case 413:
+								data.text = 'Forbidden'
+								break;
+							case 404:
+								data.text = 'Not Found'
+								break;
+							case 422:
+								data.text = 'Unprocessable Entity'
+								break;
+							case 500:
+								data.text = 'Internal Server Error'
+								break;
+							case 504:
+								data.text = 'Gateway Timeout'
+								break;
+						}
+					}
 				}
+			}
 
-				if ('message' in data.view) {
-					txt += '<div class="vg-alert-content--message">' + data.view.message + '</div>'
+			if ('response' in data) {
+				let response = normalizeData(data.response), title = '', txt = '', code = '';
+				if (typeof response !== 'string') {
+					if (!('view' in response)) {
+						if ('title' in response) title = response.title;
+						if (status === 'error' && data.code !== 200) {
+							code = ' ' + data.text + ' (' + data.code + ')';
+						}
+
+						txt += '<h4 class="vg-alert-content--title">' + title + code + '</h4>';
+
+						if ('message' in response) {
+							txt += '<div class="vg-alert-content--message">' + response.message + '</div>'
+						}
+
+						if ('errors' in response) {
+							let errors = normalizeData(response.errors) || null;
+							if (isObject(errors)) {
+								for (const error in errors) {
+									if (Array.isArray(errors[error])) {
+										errors[error].forEach(function (t) {
+											txt += '<div>'+ t +'</div>';
+										})
+									} else {
+										txt = '<div>'+ errors[error] +'</div>';
+									}
+								}
+							}
+						}
+
+						data = {
+							view: txt
+						}
+					}
+				} else {
+					data.view = response;
 				}
-
-				data = txt;
-			} else if ('view' in data && typeof data.view === "string") {
-				data = data.view;
 			}
 		}
 
@@ -324,13 +400,13 @@ class VGFormSender extends BaseModule {
 
 			let text = document.createElement('div');
 			text.classList.add('vg-alert-content--text');
-			text.innerHTML = data;
+			text.innerHTML = data.view;
 
 			content.append(text);
 			$alert.append(content);
 		} else {
 			let text = Selectors.find('.vg-alert-content--text', $alert);
-			text.innerHTML = data;
+			text.innerHTML = data.view;
 		}
 
 		return $alert;

package/app/modules/vgrollup/js/vgrollup.js

@@ -0,0 +1,91 @@
+import BaseModule from "../../base-module";
+import {execute, isDisabled, isVisible, mergeDeepObject, noop} 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 = 'rollup';
+const NAME_KEY = 'vg.rollup';
+const CLASS_NAME_SHOW = 'show';
+const CLASS_NAME_HIDE = 'd-none';
+const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="rollup"]'
+
+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 VGRollup  extends BaseModule {
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+
+		}, params));
+
+
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		return NAME_KEY
+	}
+
+	/**
+	 * Инициализация
+	 * @param element
+	 * @param params
+	 */
+	static init(element, params = {}) {
+		const instance = VGRollup.getOrCreateInstance(element, params);
+		instance.build();
+	}
+
+	build() {
+
+	}
+
+	toggle(relatedTarget) {
+		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+	}
+
+	show(relatedTarget) {
+
+	}
+
+	_isShown() {
+		return this._element.classList.contains(CLASS_NAME_SHOW);
+	}
+}
+
+/**
+ * Data API implementation
+ */
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+	const target = Selectors.getElementFromSelector(this);
+	if (!target) return;
+
+	if (['A', 'AREA'].includes(this.tagName)) {
+		event.preventDefault()
+	}
+
+	if (isDisabled(this)) {
+		return
+	}
+
+	this.setAttribute('aria-expanded', true);
+
+	const data = VGRollup.getOrCreateInstance(target)
+	data.toggle(this);
+});
+
+
+export default VGRollup;

package/app/modules/vgrollup/scss/_variables.scss

@@ -0,0 +1,8 @@
+$rollup-map: (
+		transition: $transition-base,
+		fade-height: 100px,
+		fade-background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)
+);
+$rollup-button-map: (
+		align: center
+);

package/app/modules/vgrollup/scss/vgrollup.scss

@@ -0,0 +1,49 @@
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGRollup
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+
+@import "../../../utils/scss/functions";
+@import "../../../utils/scss/mixin";
+@import "../../../utils/scss/variables";
+@import "variables";
+
+.vg-rollup {
+	@include mix-vars('rollup', $rollup-map);
+	transform: var(--vg-rollup-transition);
+
+	&-button {
+		@include mix-vars('rollup-button', $rollup-button-map);
+		text-align: var(--vg-rollup-button-align);
+	}
+
+	&-content {
+		&--hidden {
+			overflow: hidden;
+		}
+
+		&--fade {
+			position: relative;
+
+			&:after {
+				content: '';
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 100%;
+				height: var(--vg-rollup-fade-height);
+				background: var(--vg-rollup-fade-background);
+			}
+		}
+
+		&--ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+		}
+	}
+}

package/app/modules/vgsidebar/js/!oldjs.txt

@@ -0,0 +1,143 @@
+build(isFirstInit = true) {
+		let self_height = this._element.clientHeight,
+			set_height = parseInt(this._params.height) || (self_height / 2);
+
+		if (isFirstInit) this._element.classList.add('vg-rollup');
+
+		if (self_height > set_height && this._params.content === 'text') {
+			this._element.classList.add(this._params.classes.hidden);
+			this._element.style.height = set_height + "px";
+
+			this.ellipsis();
+			this.fade();
+			if (isFirstInit) this.button();
+		} else if (this._params.content === 'elements') {
+			let elementClass = this._params.elements,
+				items = this._element.querySelectorAll('.' + elementClass),
+				cnt = this._params.cnt,
+				i = 1;
+
+			this.total = items.length;
+			this.count = cnt;
+
+			for (const item of items) {
+				if (i > cnt) {
+					item.classList.add(CLASS_NAME_HIDE)
+				}
+
+				i++;
+			}
+
+			if (this._params.button === true) this._params.button = (i - 1) > cnt;
+
+			this.ellipsis();
+			this.fade();
+			if (isFirstInit) this.button();
+		}
+
+		if (isFirstInit) {
+			this._button = document.querySelector('[data-vg-target="'+ this._element.id +'"]');
+			execute(this._params.callback.afterInit, [this]);
+		}
+	}
+
+	ellipsis() {
+		if (this._params.ellipsis.line) {
+			this._element.classList.add(this._params.classes.ellipsis);
+			this._element.style.webkitLineClamp = this._params.ellipsis.line;
+		}
+	}
+
+	fade() {
+		if (this._params.fade) {
+			if (this._element.classList.contains(this._params.classes.ellipsis)) {
+				this._element.classList.remove(this._params.classes.fade)
+			} else {
+				this._element.classList.add(this._params.classes.fade);
+			}
+		}
+	}
+
+	button() {
+		if (this._params.button) {
+			let target = this._element.id,
+				button = document.querySelector('[data-vg-target="'+ target +'"]');
+
+			console.log(button)
+
+			if (!button) {
+				let textShowNum = '', btnTextShow = this._params.text.show;
+
+				if (this._params.number) {
+					let sum = (this.total) - (this.count);
+
+					if (sum > 0) {
+						textShowNum = this._params.text.more + sum;
+					}
+				}
+
+				this._element.insertAdjacentHTML("afterend", '<div  class="' + this._params.classes.button + '"><a href="#" aria-expanded="false" data-vg-target="#' + target + '" data-vg-toggle="rollup">' + btnTextShow + textShowNum + '</a></div>');
+			}
+		}
+	}
+
+	toggle(relatedTarget) {
+		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+	}
+
+	show(relatedTarget) {
+		if (isDisabled(this._element)) return;
+
+		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
+		if (showEvent.defaultPrevented) return;
+
+		this._element.classList.add(CLASS_NAME_SHOW);
+
+		const completeCallBack = () => {
+			if (this._params.content === 'elements') {
+				[... Selectors.findAll('.' + this._params.elements, this._element)].forEach(el => {
+					if (el.classList.contains(CLASS_NAME_HIDE)) {
+						el.classList.remove(CLASS_NAME_HIDE)
+					}
+				});
+			} else {
+				this._element.style.height = this.self_height + "px";
+				this._element.classList.remove(this._params.classes.fade);
+
+				if (this._element.classList.contains(this._params.classes.ellipsis)) {
+					this._element.classList.remove(this._params.classes.ellipsis)
+				}
+			}
+
+			relatedTarget.innerHTML = this._params.text.hide;
+
+			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
+		}
+
+		this._button = relatedTarget;
+		execute(this._params.callback.show, [this]);
+		this._queueCallback(completeCallBack, this._element, true, 50)
+	}
+
+	hide() {
+		if (isDisabled(this._element)) return;
+
+		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
+		if (hideEvent.defaultPrevented) return;
+
+		this._element.setAttribute('aria-expanded', 'false');
+
+		this.build(false)
+
+		const completeCallback = () => {
+			this._element.classList.remove(CLASS_NAME_SHOW);
+			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN)
+		};
+
+		execute(this._params.callback.hide, [this]);
+		this._queueCallback(completeCallback, this._element, true);
+	}
+
+	_isShown() {
+		return this._element.classList.contains(CLASS_NAME_SHOW);
+	}

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

@@ -149,7 +149,7 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 
 	this.setAttribute('aria-expanded', true);
 	EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
-		if (isVisible(this)) this.focus();
+		//if (isVisible(this)) this.focus();
 		this.setAttribute('aria-expanded', false);
 	})
 

package/app/utils/js/functions.js

@@ -51,6 +51,11 @@ const isDisabled = element => {
 	return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false'
 }
 
+/**
+ * isVisible
+ * @param element
+ * @returns {boolean}
+ */
 function isVisible (element) {
 	if (!isElement(element) || element.getClientRects().length === 0) {
 		return false