vgapp 0.1.4 → 0.1.6

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

@@ -1,41 +1,41 @@
-@charset "UTF-8";
-/**
-*--------------------------------------------------------------------------
-* Модуль: VGRollup
-* Автор: Vegas DEV
-* Лицензия: смотри LICENSE
-*--------------------------------------------------------------------------
-**/
-.vg-rollup {
-  --vg-rollup-transition: all 0.5s ease-in-out ;
-  --vg-rollup-fade-height: 100px ;
-  --vg-rollup-fade-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%) ;
-  transform: var(--vg-rollup-transition);
-}
-.vg-rollup-button {
-  --vg-rollup-button-align: center ;
-  text-align: var(--vg-rollup-button-align);
-}
-.vg-rollup-content--hidden {
-  overflow: hidden;
-}
-.vg-rollup-content--fade {
-  position: relative;
-}
-.vg-rollup-content--fade:after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: var(--vg-rollup-fade-height);
-  background: var(--vg-rollup-fade-background);
-}
-.vg-rollup-content--ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-
-/*# sourceMappingURL=vgrollup.css.map */
+@charset "UTF-8";
+/**
+*--------------------------------------------------------------------------
+* Модуль: VGRollup
+* Автор: Vegas DEV
+* Лицензия: смотри LICENSE
+*--------------------------------------------------------------------------
+**/
+.vg-rollup {
+  --vg-rollup-transition: all 0.5s ease-in-out ;
+  --vg-rollup-fade-height: 100px ;
+  --vg-rollup-fade-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%) ;
+  transform: var(--vg-rollup-transition);
+}
+.vg-rollup-button {
+  --vg-rollup-button-align: center ;
+  text-align: var(--vg-rollup-button-align);
+}
+.vg-rollup-content--hidden {
+  overflow: hidden;
+}
+.vg-rollup-content--fade {
+  position: relative;
+}
+.vg-rollup-content--fade:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: var(--vg-rollup-fade-height);
+  background: var(--vg-rollup-fade-background);
+}
+.vg-rollup-content--ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+/*# sourceMappingURL=vgrollup.css.map */

package/app/modules/vgselect/js/vgselect.js

@@ -1,7 +1,8 @@
 import BaseModule from "../../base-module";
-import {isEmptyObj, mergeDeepObject, transliterate} from "../../../utils/js/functions";
+import {isDisabled, isEmptyObj, mergeDeepObject, noop, normalizeData, transliterate} from "../../../utils/js/functions";
 import {Manipulator} from "../../../utils/js/dom/manipulator";
 import EventHandler from "../../../utils/js/dom/event";
+import Selectors from "../../../utils/js/dom/selectors";
 
 /**
  * Constants
@@ -9,6 +10,8 @@ import EventHandler from "../../../utils/js/dom/event";
 const NAME = 'select';
 const NAME_KEY = 'vg.select';
 
+const CLASS_NAME_SHOW           = 'show';
+const CLASS_NAME_ACTIVE         = 'active';
 const CLASS_NAME_CONTAINER      = 'vg-select';
 const CLASS_NAME_DROPDOWN       = 'vg-select-dropdown';
 const CLASS_NAME_LIST           = 'vg-select-list';
@@ -16,10 +19,21 @@ const CLASS_NAME_OPTION         = 'vg-select-list--option';
 const CLASS_NAME_OPTGROUP       = 'vg-select-list--optgroup';
 const CLASS_NAME_OPTGROUP_TITLE = 'vg-select-list--optgroup-title';
 const CLASS_NAME_CURRENT        = 'vg-select-current';
+const CLASS_NAME_PLACEHOLDER    = 'vg-select-current--placeholder';
 const CLASS_NAME_SEARCH         = 'vg-select-search';
-const CLASS_NAME_SELECTED       = 'selected';
 
+const EVENT_KEY_CLICK_DATA_API  = `click.${NAME_KEY}.data.api`;
+const EVENT_KEY_UP_DATA_API     = `keyup.${NAME_KEY}.data.api`;
 const EVENT_KEY_CHANGE          = `${NAME_KEY}.change`;
+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 SELECTOR_DATA_TOGGLE    = '[data-vg-toggle="select"]';
+const SELECTOR_OPTION_TOGGLE  = '[data-vg-toggle="select-option"]';
+const SELECTOR_SEARCH_TOGGLE  = '[name=vg-select-search]';
+
 
 let observerTimout;
 
@@ -28,8 +42,21 @@ class VGSelect extends BaseModule {
 		super(element, params);
 
 		this._params = this._getParams(element, mergeDeepObject({
-			search: false
+			search: false,
+			placeholder: '',
+			ajax: {
+				route: '',
+				target: '',
+				method: 'get',
+				loader: false,
+			},
+			render: {
+				option: noop,
+				item: noop
+			}
 		}, params));
+
+		this._drop = Selectors.find('.' + CLASS_NAME_DROPDOWN, this._element);
 	}
 
 	static get NAME() {
@@ -40,58 +67,13 @@ class VGSelect extends BaseModule {
 		return NAME_KEY;
 	}
 
-	build(isRebuild, elm = null) {
-		const _this = this;
-		let element = this._element;
-
-		if (elm) element = elm;
-
-		if (element.dataset?.inited === 'true' && !isRebuild) {
-			return;
-		} else if (isRebuild) {
-			_this.destroy(element);
-		}
-
-		element.parentElement.style.position = 'relative';
-
-		let option_selected = element.options[element.selectedIndex].innerText,
-			options = element.options;
-
-		// Создаем основной элемент с классами селекта
-		let classes = Manipulator.get(element,'class'),
-			select = document.createElement('div');
-
-		classes = classes.split(' ');
-
-		for (const _class of classes) {
-			select.classList.add(_class)
-		}
-
-		if (Manipulator.has(element, 'disabled')) select.classList.add('disabled')
-
-		let elData = Manipulator.get(element);
-		if (!isEmptyObj(elData)) {
-			for (const key of Object.keys(elData)) {
-				Manipulator.set(select,'data-' + key, elData[key]);
-			}
-		}
-
-		// Создаем элемент с отображением выбранного варианта
-		let current = document.createElement('div');
-		current.classList.add(CLASS_NAME_CURRENT);
-		current.innerText = option_selected.trim();
-		select.append(current);
+	static buildListOptions(selector, drop) {
+		let options = selector.options,
+			list = document.createElement('ul');
 
-		// Создаем элемент выпадающего списка
-		let dropdown = document.createElement('div');
-		dropdown.classList.add(CLASS_NAME_DROPDOWN);
-		select.append(dropdown);
-
-		// Создаем список и варианты селекта
-		let list = document.createElement('ul');
 		list.classList.add(CLASS_NAME_LIST);
 
-		let optGroup = element.querySelectorAll('optgroup');
+		let optGroup = selector.querySelectorAll('optgroup');
 
 		if (optGroup.length) {
 			let isSelected = false;
@@ -105,7 +87,7 @@ class VGSelect extends BaseModule {
 
 				olOptGroup.prepend(liLabel)
 
-				let optGroupOptions = el.querySelectorAll('option');
+				let optGroupOptions = Selectors.findAll('option', el);
 
 				createLi(optGroupOptions, olOptGroup, isSelected);
 
@@ -117,6 +99,10 @@ class VGSelect extends BaseModule {
 			createLi(options, list, isSelected);
 		}
 
+		drop.append(list);
+
+		return list;
+
 		function createLi(options, list, isSelected) {
 			let i = 0;
 			for (const option of options) {
@@ -126,6 +112,8 @@ class VGSelect extends BaseModule {
 				li.dataset.value = Manipulator.get(option, 'value');
 				li.classList.add(CLASS_NAME_OPTION);
 
+				Manipulator.set(li, 'data-vg-toggle', 'select-option');
+
 				let liData = Manipulator.get(option);
 				if (!isEmptyObj(liData)) {
 					for (const key of Object.keys(liData)) {
@@ -133,7 +121,7 @@ class VGSelect extends BaseModule {
 					}
 				}
 
-				if (i === element.selectedIndex && !isSelected) {
+				if (i === selector.selectedIndex && !isSelected) {
 					li.classList.add('selected');
 				}
 
@@ -145,20 +133,167 @@ class VGSelect extends BaseModule {
 				i++;
 			}
 		}
+	}
+
+	static build(selector) {
+		let option_selected,
+			placeholder = selector.dataset.placeholder || '',
+			isSearch = selector.dataset.search || false;
+
+		selector.parentElement.style.position = 'relative';
+
+		if (placeholder && selector.selectedIndex === 0) {
+			option_selected = '<span class="'+ CLASS_NAME_PLACEHOLDER +'">' + placeholder + '<span>';
+		} else {
+			option_selected = selector.options[selector.selectedIndex].innerText;
+		}
 
-		dropdown.append(list);
+		// Создаем основной элемент с классами селекта
+		let classes = Manipulator.get(selector,'class'),
+			element = document.createElement('div');
+
+		classes = classes.split(' ');
+
+		for (const _class of classes) {
+			element.classList.add(_class)
+		}
+
+		if (Manipulator.has(selector, 'disabled')) element.classList.add('disabled');
+
+		let elData = Manipulator.get(selector);
+		if (!isEmptyObj(elData)) {
+			for (const key of Object.keys(elData)) {
+				Manipulator.set(element,'data-' + key, elData[key]);
+			}
+		}
+
+		// Создаем элемент с отображением выбранного варианта
+		let current = document.createElement('div');
+		current.classList.add(CLASS_NAME_CURRENT);
+		Manipulator.set(current, 'data-vg-toggle', 'select');
+		Manipulator.set(current, 'aria-expanded', 'false');
+		current.innerHTML = option_selected.trim();
+		element.append(current);
+
+		// Создаем элемент выпадающего списка
+		let dropdown = document.createElement('div');
+		dropdown.classList.add(CLASS_NAME_DROPDOWN);
+		element.append(dropdown);
+
+		// Создаем список и варианты селекта
+		VGSelect.buildListOptions(selector, dropdown);
 
 		// Добавляем все созданный контейнер после селекта
-		element.insertAdjacentElement('afterend', select);
+		selector.insertAdjacentElement('afterend', element);
 
 		// помечаем элемент инициализированным
-		element.dataset.inited = 'true';
+		selector.dataset.inited = 'true';
+
+		if (isSearch) {
+			let search_container = document.createElement('div');
+			search_container.classList.add(CLASS_NAME_SEARCH);
+
+			let input = document.createElement('input');
+			Manipulator.set(input, 'name', 'vg-select-search');
+			Manipulator.set(input, 'type', 'text');
+			Manipulator.set(input, 'placeholder', 'Поиск...');
+
+			search_container.append(input);
+			dropdown.prepend(search_container);
+		}
+
+		return element;
+	}
+
+	render(selector, callback) {
+		let list = Selectors.find('.' + CLASS_NAME_LIST, this._drop);
+		if (list) list.remove();
+
+		VGSelect.buildListOptions(selector, this._drop);
+	}
+
+	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;
+
+		if ('ontouchstart' in document.documentElement) {
+			for (const element of [].concat(...document.body.children)) {
+				EventHandler.on(element, 'mouseover', noop);
+			}
+		}
+
+		// TODO доделать
+		/*this._route((status, data) => {
+			let response = normalizeData(data.response),
+				select = this._element.previousSibling;
+
+			if (response.length) {
+				Selectors.findAll('option', select).forEach(option => {
+					option.remove();
+				});
+
+				response.forEach(el => {
+					let option = document.createElement('option');
+					option.innerText = el.title;
+					Manipulator.set(option, 'value', el.id);
 
-		if (_this._params.search) {
-			this.search(select);
+					select.append(option);
+				});
+
+				this.render(select);
+			}
+		});*/
+
+		this._element.classList.add(CLASS_NAME_SHOW);
+
+		if (this._params.search) {
+			let input = Selectors.find('input', this._element);
+			if (input) input.focus();
 		}
 
-		this._addEventListeners(select);
+		const completeCallBack = () => {
+			this._element.classList.add(CLASS_NAME_ACTIVE);
+			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
+		}
+
+		this._queueCallback(completeCallBack, this._drop, true, 50)
+	}
+
+	hide() {
+		if (isDisabled(this._element) || !this._isShown()) return;
+
+		this._completeHide();
+	}
+
+	_completeHide() {
+		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE, {})
+		if (hideEvent.defaultPrevented) return;
+
+		this._element.classList.remove(CLASS_NAME_ACTIVE);
+		let toggle = Selectors.find(SELECTOR_DATA_TOGGLE, this._element);
+		Manipulator.set(toggle, 'aria-expanded', 'false');
+
+		if ('ontouchstart' in document.documentElement) {
+			for (const element of [].concat(...document.body.children)) {
+				EventHandler.off(element, 'mouseover', noop);
+			}
+		}
+
+		const completeCallback = () => {
+			this._element.classList.remove(CLASS_NAME_SHOW);
+			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, {});
+		}
+		this._queueCallback(completeCallback, this._element, true, 10);
+	}
+
+	_isShown() {
+		return this._element.classList.contains(CLASS_NAME_SHOW);
 	}
 
 	destroy(select) {
@@ -197,145 +332,127 @@ class VGSelect extends BaseModule {
 	}
 
 	search(select) {
-		const _this = this;
 
-		let dropdown = select.querySelector('.' + CLASS_NAME_DROPDOWN);
-
-		let search_container = document.createElement('div');
-		search_container.classList.add(CLASS_NAME_SEARCH);
+	}
 
-		let input = document.createElement('input');
-		input.setAttribute('name', 'vg-select-search');
-		input.setAttribute('type', 'text');
-		input.setAttribute('placeholder', 'Поиск...');
+	dispose() {
+		super.dispose();
+	}
 
-		search_container.append(input);
-		dropdown.prepend(search_container);
+	static hideOpenToggles(event) {
+		const openToggles = Selectors.findAll('.vg-select:not(.disabled):not(:disabled).show');
 
-		search_container.querySelector('[name=vg-select-search]').addEventListener('keyup', (e) => {
-			e.preventDefault();
+		for (const toggle of openToggles) {
+			const context = VGSelect.getInstance(toggle);
+			if (!context) continue;
 
-			let el = e.target;
+			if (event.target.closest('.' + CLASS_NAME_CONTAINER) === context._element) {
+				return;
+			}
 
-			let selectList = el?.closest('.' + CLASS_NAME_DROPDOWN).querySelector('.' + CLASS_NAME_LIST);
-			if (selectList) {
-				let options = [...selectList.querySelectorAll('.' + CLASS_NAME_OPTION)],
-					optionsGroup = [...selectList.querySelectorAll('.' + CLASS_NAME_OPTGROUP)],
-					value = el?.value;
+			const composedPath = event.composedPath();
+			if (composedPath.includes(context._element)) {
+				continue
+			}
 
-				options = options.concat(optionsGroup);
+			const relatedTarget = { relatedTarget: context._element }
 
-				for (const option of options) {
-					Manipulator.show(option);
-				}
+			if (event.type === 'click') {
+				relatedTarget.clickEvent = event
+			}
 
-				if (value.length) {
-					value = value.trim();
-					value = value.toLowerCase();
-					value = transliterate(value, true);
+			context._completeHide(relatedTarget)
+		}
+	}
 
-					for (const option of options) {
-						let text = option.innerText.toLowerCase();
+	static clearDrops(event) {
+		if (event.button === 2 || (event.type === 'keyup' && event.key !== 'Tab')) {
+			return
+		}
 
-						if (text.indexOf(value) === -1) Manipulator.hide(option);
-					}
-				}
-			}
-		});
+		VGSelect.hideOpenToggles(event)
 	}
 
-	dispose() {
-		super.dispose();
+	/**
+	 * Инициализация
+	 * @param element
+	 * @param params
+	 * @param isRebuild
+	 */
+	static init(element, params = {}, isRebuild = false) {
+		let elm = VGSelect.build(element);
+		VGSelect.getOrCreateInstance(elm, params);
 	}
+}
 
-	_addEventListeners(select) {
-		const _this = this;
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, VGSelect.clearDrops);
 
-		select.querySelector('.' + CLASS_NAME_CURRENT).onclick = function (e) {
-			let el = e.target,
-				container = el.closest('.' + CLASS_NAME_CONTAINER);
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function () {
+	const target = this.closest('.' + CLASS_NAME_CONTAINER);
 
-			let selects = document.querySelectorAll('.' + CLASS_NAME_CONTAINER);
-			if (selects.length) {
-				for (const els of selects) {
-					if (els !== container) {
-						els?.classList.remove('show');
-					}
-				}
-			}
+	Manipulator.set(this, 'aria-expanded', true);
 
-			if (container.classList.contains('show')) {
-				container.classList.remove('show');
-			} else {
-				container.classList.add('show');
+	const alreadyOpen = Selectors.find('.vg-select.show')
+	if (alreadyOpen && alreadyOpen !== target) {
+		VGSelect.getInstance(alreadyOpen).hide();
+	}
 
-				if (_this._params.search) {
-					let input = container.querySelector('input');
-					if (input) input.focus();
-				}
-			}
+	const instance = VGSelect.getOrCreateInstance(target);
+	instance.toggle(this);
+});
+
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_OPTION_TOGGLE, function (e) {
+	let el = e.target;
+
+	if (!el.classList.contains('disabled')) {
+		let container = el.closest('.' + CLASS_NAME_CONTAINER),
+			options = container.querySelectorAll('.' + CLASS_NAME_OPTION);
 
-			return false;
+		if (options.length) {
+			for (const option of options) {
+				option.classList.remove('selected');
+			}
 		}
 
-		select.querySelectorAll('.' + CLASS_NAME_OPTION).forEach((option) => {
-			option.addEventListener('click', (e) => {
-				e.preventDefault();
+		el.classList.add('selected');
 
-				let el = e.target;
+		container.querySelector('.' + CLASS_NAME_CURRENT).innerText = el.innerText;
+		container.classList.remove('show');
 
-				if (!el.classList.contains('disabled')) {
-					let container = el.closest('.' + CLASS_NAME_CONTAINER),
-						options = container.querySelectorAll('.' + CLASS_NAME_OPTION);
+		let select = container.previousSibling;
+		select.value = el.dataset.value;
+		EventHandler.trigger(select, EVENT_KEY_CHANGE, {value: el.dataset.value});
+	}
+});
 
-					if (options.length) {
-						for (const option of options) {
-							option.classList.remove('selected');
-						}
-					}
+EventHandler.on(document, EVENT_KEY_UP_DATA_API, SELECTOR_SEARCH_TOGGLE, function (e) {
+	let el = this;
 
-					el.classList.add('selected');
+	let selectList = el?.closest('.' + CLASS_NAME_DROPDOWN).querySelector('.' + CLASS_NAME_LIST);
+	if (selectList) {
+		let options = [...selectList.querySelectorAll('.' + CLASS_NAME_OPTION)],
+			optionsGroup = [...selectList.querySelectorAll('.' + CLASS_NAME_OPTGROUP)],
+			value = el?.value;
 
-					container.querySelector('.' + CLASS_NAME_CURRENT).innerText = el.innerText;
-					container.classList.remove('show');
+		options = options.concat(optionsGroup);
 
-					let select = container.previousSibling;
-					select.value = el.dataset.value;
-					EventHandler.trigger(select, EVENT_KEY_CHANGE)
-				}
-			});
-		});
+		for (const option of options) {
+			Manipulator.show(option);
+		}
 
-		window.addEventListener('click', function (e) {
-			if (!e?.target.closest('.' + CLASS_NAME_CONTAINER)) {
-				let selects = document.querySelectorAll('.' + CLASS_NAME_CONTAINER);
-				if (selects.length) {
-					for (const el of selects) {
-						el?.classList.remove('show');
-					}
-				}
-			}
-		});
+		if (value.length) {
+			value = value.trim();
+			value = value.toLowerCase();
+			value = transliterate(value, true);
 
-		[...document.querySelectorAll('form')].forEach(function (form) {
-			form.addEventListener("reset", function () {
-				form.querySelectorAll('select.vg-select').forEach(function (select) {
-					VGSelect.init(select, {}, true)
-				})
-			});
-		});
-	}
+			for (const option of options) {
+				let text = option.innerText.toLowerCase();
 
-	/**
-	 * Инициализация
-	 * @param element
-	 * @param params
-	 * @param isRebuild
-	 */
-	static init(element, params = {}, isRebuild = false) {
-		const instance = VGSelect.getOrCreateInstance(element, params);
-		instance.build(isRebuild);
+				if (text.indexOf(value) === -1) Manipulator.hide(option);
+			}
+		}
 	}
-}
+});
+
 
 export default VGSelect;