vgapp 0.1.5 → 0.1.6

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

@@ -1,5 +1,5 @@
 import BaseModule from "../../base-module";
-import {isDisabled, isEmptyObj, mergeDeepObject, noop, 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";
@@ -23,13 +23,16 @@ const CLASS_NAME_PLACEHOLDER    = 'vg-select-current--placeholder';
 const CLASS_NAME_SEARCH         = 'vg-select-search';
 
 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_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;
@@ -46,6 +49,10 @@ class VGSelect extends BaseModule {
 				target: '',
 				method: 'get',
 				loader: false,
+			},
+			render: {
+				option: noop,
+				item: noop
 			}
 		}, params));
 
@@ -60,101 +67,103 @@ class VGSelect extends BaseModule {
 		return NAME_KEY;
 	}
 
-	toggle(relatedTarget) {
-		return !this._isShown() ? this.show(relatedTarget) : this.hide();
-	}
+	static buildListOptions(selector, drop) {
+		let options = selector.options,
+			list = document.createElement('ul');
 
-	show(relatedTarget) {
-		if (isDisabled(this._element)) return;
+		list.classList.add(CLASS_NAME_LIST);
 
-		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
-		if (showEvent.defaultPrevented) return;
+		let optGroup = selector.querySelectorAll('optgroup');
 
-		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.on(element, 'mouseover', noop);
-			}
-		}
+		if (optGroup.length) {
+			let isSelected = false;
+			[...optGroup].forEach(function (el) {
+				let olOptGroup = document.createElement('ol');
+				olOptGroup.classList.add(CLASS_NAME_OPTGROUP);
 
-		this._element.classList.add(CLASS_NAME_SHOW);
+				let liLabel = document.createElement('li');
+				liLabel.innerHTML = el.label.trim();
+				liLabel.classList.add(CLASS_NAME_OPTGROUP_TITLE)
 
-		const completeCallBack = () => {
-			this._element.classList.add(CLASS_NAME_ACTIVE);
-			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
-		}
+				olOptGroup.prepend(liLabel)
 
-		this._queueCallback(completeCallBack, this._drop, true, 50)
-	}
+				let optGroupOptions = Selectors.findAll('option', el);
 
-	hide() {
-		if (isDisabled(this._element) || !this._isShown()) return;
+				createLi(optGroupOptions, olOptGroup, isSelected);
 
-		this._completeHide();
-	}
+				list.append(olOptGroup);
+				isSelected = true;
+			});
+		} else {
+			let isSelected = false;
+			createLi(options, list, isSelected);
+		}
 
-	_completeHide() {
-		const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE, {})
-		if (hideEvent.defaultPrevented) return;
+		drop.append(list);
 
-		this._element.classList.remove(CLASS_NAME_ACTIVE);
-		//this._element.setAttribute('aria-expanded', 'false');
+		return list;
 
-		if ('ontouchstart' in document.documentElement) {
-			for (const element of [].concat(...document.body.children)) {
-				EventHandler.off(element, 'mouseover', noop);
-			}
-		}
+		function createLi(options, list, isSelected) {
+			let i = 0;
+			for (const option of options) {
+				let li = document.createElement('li');
 
-		const completeCallback = () => {
-			this._element.classList.remove(CLASS_NAME_SHOW);
-			EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, {});
-		}
-		this._queueCallback(completeCallback, this._element, true, 10);
-	}
+				li.innerHTML = option.innerHTML.trim().replace(/<\/[^>]+(>|$)/g, "")
+				li.dataset.value = Manipulator.get(option, 'value');
+				li.classList.add(CLASS_NAME_OPTION);
 
-	_isShown() {
-		return this._element.classList.contains(CLASS_NAME_SHOW);
-	}
+				Manipulator.set(li, 'data-vg-toggle', 'select-option');
 
-	build(isRebuild, elm = null) {
-		const _this = this;
-		let element = this._element;
+				let liData = Manipulator.get(option);
+				if (!isEmptyObj(liData)) {
+					for (const key of Object.keys(liData)) {
+						Manipulator.set(li, 'data-' + key, liData[key]);
+					}
+				}
 
-		if (elm) element = elm;
+				if (i === selector.selectedIndex && !isSelected) {
+					li.classList.add('selected');
+				}
 
-		if (element.dataset?.inited === 'true' && !isRebuild) {
-			return;
-		} else if (isRebuild) {
-			_this.destroy(element);
-		}
+				if (Manipulator.has(option, 'disabled')) li.classList.add('disabled');
+				if (Manipulator.has(option, 'hidden')) li.classList.add('hidden');
 
-		element.parentElement.style.position = 'relative';
+				list.append(li);
+
+				i++;
+			}
+		}
+	}
 
+	static build(selector) {
 		let option_selected,
-			options = element.options;
+			placeholder = selector.dataset.placeholder || '',
+			isSearch = selector.dataset.search || false;
 
-		if (_this._params.placeholder && element.selectedIndex === 0) {
-			option_selected = '<span class="'+ CLASS_NAME_PLACEHOLDER +'">' + _this._params.placeholder + '<span>';
+		selector.parentElement.style.position = 'relative';
+
+		if (placeholder && selector.selectedIndex === 0) {
+			option_selected = '<span class="'+ CLASS_NAME_PLACEHOLDER +'">' + placeholder + '<span>';
 		} else {
-			option_selected = element.options[element.selectedIndex].innerText;
+			option_selected = selector.options[selector.selectedIndex].innerText;
 		}
 
 		// Создаем основной элемент с классами селекта
-		let classes = Manipulator.get(element,'class'),
-			select = document.createElement('div');
+		let classes = Manipulator.get(selector,'class'),
+			element = document.createElement('div');
 
 		classes = classes.split(' ');
 
 		for (const _class of classes) {
-			select.classList.add(_class)
+			element.classList.add(_class)
 		}
 
-		if (Manipulator.has(element, 'disabled')) select.classList.add('disabled')
+		if (Manipulator.has(selector, 'disabled')) element.classList.add('disabled');
 
-		let elData = Manipulator.get(element);
+		let elData = Manipulator.get(selector);
 		if (!isEmptyObj(elData)) {
 			for (const key of Object.keys(elData)) {
-				Manipulator.set(select,'data-' + key, elData[key]);
+				Manipulator.set(element,'data-' + key, elData[key]);
 			}
 		}
 
@@ -164,83 +173,127 @@ class VGSelect extends BaseModule {
 		Manipulator.set(current, 'data-vg-toggle', 'select');
 		Manipulator.set(current, 'aria-expanded', 'false');
 		current.innerHTML = option_selected.trim();
-		select.append(current);
+		element.append(current);
 
 		// Создаем элемент выпадающего списка
 		let dropdown = document.createElement('div');
 		dropdown.classList.add(CLASS_NAME_DROPDOWN);
-		select.append(dropdown);
+		element.append(dropdown);
 
 		// Создаем список и варианты селекта
-		let list = document.createElement('ul');
-		list.classList.add(CLASS_NAME_LIST);
+		VGSelect.buildListOptions(selector, dropdown);
 
-		let optGroup = element.querySelectorAll('optgroup');
+		// Добавляем все созданный контейнер после селекта
+		selector.insertAdjacentElement('afterend', element);
 
-		if (optGroup.length) {
-			let isSelected = false;
-			[...optGroup].forEach(function (el) {
-				let olOptGroup = document.createElement('ol');
-				olOptGroup.classList.add(CLASS_NAME_OPTGROUP);
+		// помечаем элемент инициализированным
+		selector.dataset.inited = 'true';
 
-				let liLabel = document.createElement('li');
-				liLabel.innerHTML = el.label.trim();
-				liLabel.classList.add(CLASS_NAME_OPTGROUP_TITLE)
+		if (isSearch) {
+			let search_container = document.createElement('div');
+			search_container.classList.add(CLASS_NAME_SEARCH);
 
-				olOptGroup.prepend(liLabel)
+			let input = document.createElement('input');
+			Manipulator.set(input, 'name', 'vg-select-search');
+			Manipulator.set(input, 'type', 'text');
+			Manipulator.set(input, 'placeholder', 'Поиск...');
 
-				let optGroupOptions = el.querySelectorAll('option');
+			search_container.append(input);
+			dropdown.prepend(search_container);
+		}
 
-				createLi(optGroupOptions, olOptGroup, isSelected);
+		return element;
+	}
 
-				list.append(olOptGroup);
-				isSelected = true;
-			});
-		} else {
-			let isSelected = false;
-			createLi(options, list, isSelected);
-		}
+	render(selector, callback) {
+		let list = Selectors.find('.' + CLASS_NAME_LIST, this._drop);
+		if (list) list.remove();
 
-		function createLi(options, list, isSelected) {
-			let i = 0;
-			for (const option of options) {
-				let li = document.createElement('li');
+		VGSelect.buildListOptions(selector, this._drop);
+	}
 
-				li.innerHTML = option.innerHTML.trim().replace(/<\/[^>]+(>|$)/g, "")
-				li.dataset.value = Manipulator.get(option, 'value');
-				li.classList.add(CLASS_NAME_OPTION);
+	toggle(relatedTarget) {
+		return !this._isShown() ? this.show(relatedTarget) : this.hide();
+	}
 
-				let liData = Manipulator.get(option);
-				if (!isEmptyObj(liData)) {
-					for (const key of Object.keys(liData)) {
-						Manipulator.set(li, 'data-' + key, liData[key]);
-					}
-				}
+	show(relatedTarget) {
+		if (isDisabled(this._element)) return;
 
-				if (i === element.selectedIndex && !isSelected) {
-					li.classList.add('selected');
-				}
+		const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
+		if (showEvent.defaultPrevented) return;
 
-				if (Manipulator.has(option, 'disabled')) li.classList.add('disabled');
-				if (Manipulator.has(option, 'hidden')) li.classList.add('hidden');
+		if ('ontouchstart' in document.documentElement) {
+			for (const element of [].concat(...document.body.children)) {
+				EventHandler.on(element, 'mouseover', noop);
+			}
+		}
 
-				list.append(li);
+		// TODO доделать
+		/*this._route((status, data) => {
+			let response = normalizeData(data.response),
+				select = this._element.previousSibling;
 
-				i++;
+			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);
+
+					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();
 		}
 
-		dropdown.append(list);
+		const completeCallBack = () => {
+			this._element.classList.add(CLASS_NAME_ACTIVE);
+			EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
+		}
 
-		// Добавляем все созданный контейнер после селекта
-		element.insertAdjacentElement('afterend', select);
+		this._queueCallback(completeCallBack, this._drop, true, 50)
+	}
 
-		// помечаем элемент инициализированным
-		element.dataset.inited = 'true';
+	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 (_this._params.search) {
-			this.search(select);
+		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) {
@@ -279,131 +332,45 @@ class VGSelect extends BaseModule {
 	}
 
 	search(select) {
-		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', 'Поиск...');
-
-		search_container.append(input);
-		dropdown.prepend(search_container);
-
-		search_container.querySelector('[name=vg-select-search]').addEventListener('keyup', (e) => {
-			e.preventDefault();
-
-			let el = e.target;
 
-			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;
-
-				options = options.concat(optionsGroup);
-
-				for (const option of options) {
-					Manipulator.show(option);
-				}
-
-				if (value.length) {
-					value = value.trim();
-					value = value.toLowerCase();
-					value = transliterate(value, true);
-
-					for (const option of options) {
-						let text = option.innerText.toLowerCase();
-
-						if (text.indexOf(value) === -1) Manipulator.hide(option);
-					}
-				}
-			}
-		});
 	}
 
 	dispose() {
 		super.dispose();
 	}
 
-	_addEventListeners(select) {
-		const _this = this;
+	static hideOpenToggles(event) {
+		const openToggles = Selectors.findAll('.vg-select:not(.disabled):not(:disabled).show');
 
-		select.querySelector('.' + CLASS_NAME_CURRENT).onclick = function (e) {
-			let el = e.target,
-				container = el.closest('.' + CLASS_NAME_CONTAINER);
+		for (const toggle of openToggles) {
+			const context = VGSelect.getInstance(toggle);
+			if (!context) continue;
 
-			let selects = document.querySelectorAll('.' + CLASS_NAME_CONTAINER);
-			if (selects.length) {
-				for (const els of selects) {
-					if (els !== container) {
-						els?.classList.remove('show');
-					}
-				}
+			if (event.target.closest('.' + CLASS_NAME_CONTAINER) === context._element) {
+				return;
 			}
 
-			if (container.classList.contains('show')) {
-				container.classList.remove('show');
-			} else {
-				container.classList.add('show');
-
-				if (_this._params.search) {
-					let input = container.querySelector('input');
-					if (input) input.focus();
-				}
+			const composedPath = event.composedPath();
+			if (composedPath.includes(context._element)) {
+				continue
 			}
 
-			return false;
-		}
+			const relatedTarget = { relatedTarget: context._element }
 
-		select.querySelectorAll('.' + CLASS_NAME_OPTION).forEach((option) => {
-			option.addEventListener('click', (e) => {
-				e.preventDefault();
-
-				let el = e.target;
-
-				if (!el.classList.contains('disabled')) {
-					let container = el.closest('.' + CLASS_NAME_CONTAINER),
-						options = container.querySelectorAll('.' + CLASS_NAME_OPTION);
-
-					if (options.length) {
-						for (const option of options) {
-							option.classList.remove('selected');
-						}
-					}
-
-					el.classList.add('selected');
-
-					container.querySelector('.' + CLASS_NAME_CURRENT).innerText = el.innerText;
-					container.classList.remove('show');
+			if (event.type === 'click') {
+				relatedTarget.clickEvent = event
+			}
 
-					let select = container.previousSibling;
-					select.value = el.dataset.value;
-					EventHandler.trigger(select, EVENT_KEY_CHANGE)
-				}
-			});
-		});
+			context._completeHide(relatedTarget)
+		}
+	}
 
-		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');
-					}
-				}
-			}
-		});
+	static clearDrops(event) {
+		if (event.button === 2 || (event.type === 'keyup' && event.key !== 'Tab')) {
+			return
+		}
 
-		[...document.querySelectorAll('form')].forEach(function (form) {
-			form.addEventListener("reset", function () {
-				form.querySelectorAll('select.vg-select').forEach(function (select) {
-					VGSelect.init(select, {}, true)
-				})
-			});
-		});
+		VGSelect.hideOpenToggles(event)
 	}
 
 	/**
@@ -413,20 +380,18 @@ class VGSelect extends BaseModule {
 	 * @param isRebuild
 	 */
 	static init(element, params = {}, isRebuild = false) {
-		const instance = VGSelect.getOrCreateInstance(element, params);
-		instance.build(isRebuild);
+		let elm = VGSelect.build(element);
+		VGSelect.getOrCreateInstance(elm, params);
 	}
 }
 
+EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, VGSelect.clearDrops);
+
 EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function () {
 	const target = this.closest('.' + CLASS_NAME_CONTAINER);
 
 	Manipulator.set(this, 'aria-expanded', true);
 
-	EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
-		Manipulator.set(this, 'aria-expanded', false);
-	})
-
 	const alreadyOpen = Selectors.find('.vg-select.show')
 	if (alreadyOpen && alreadyOpen !== target) {
 		VGSelect.getInstance(alreadyOpen).hide();
@@ -436,5 +401,58 @@ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, functi
 	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);
+
+		if (options.length) {
+			for (const option of options) {
+				option.classList.remove('selected');
+			}
+		}
+
+		el.classList.add('selected');
+
+		container.querySelector('.' + CLASS_NAME_CURRENT).innerText = el.innerText;
+		container.classList.remove('show');
+
+		let select = container.previousSibling;
+		select.value = el.dataset.value;
+		EventHandler.trigger(select, EVENT_KEY_CHANGE, {value: el.dataset.value});
+	}
+});
+
+EventHandler.on(document, EVENT_KEY_UP_DATA_API, SELECTOR_SEARCH_TOGGLE, function (e) {
+	let el = this;
+
+	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;
+
+		options = options.concat(optionsGroup);
+
+		for (const option of options) {
+			Manipulator.show(option);
+		}
+
+		if (value.length) {
+			value = value.trim();
+			value = value.toLowerCase();
+			value = transliterate(value, true);
+
+			for (const option of options) {
+				let text = option.innerText.toLowerCase();
+
+				if (text.indexOf(value) === -1) Manipulator.hide(option);
+			}
+		}
+	}
+});
+
 
 export default VGSelect;