vgapp 0.1.2 → 0.1.4

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

@@ -0,0 +1,341 @@
+import BaseModule from "../../base-module";
+import {isEmptyObj, mergeDeepObject, transliterate} from "../../../utils/js/functions";
+import {Manipulator} from "../../../utils/js/dom/manipulator";
+import EventHandler from "../../../utils/js/dom/event";
+
+/**
+ * Constants
+ */
+const NAME = 'select';
+const NAME_KEY = 'vg.select';
+
+const CLASS_NAME_CONTAINER      = 'vg-select';
+const CLASS_NAME_DROPDOWN       = 'vg-select-dropdown';
+const CLASS_NAME_LIST           = 'vg-select-list';
+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_SEARCH         = 'vg-select-search';
+const CLASS_NAME_SELECTED       = 'selected';
+
+const EVENT_KEY_CHANGE          = `${NAME_KEY}.change`;
+
+let observerTimout;
+
+class VGSelect extends BaseModule {
+	constructor(element, params = {}) {
+		super(element, params);
+
+		this._params = this._getParams(element, mergeDeepObject({
+			search: false
+		}, params));
+	}
+
+	static get NAME() {
+		return NAME;
+	}
+
+	static get NAME_KEY() {
+		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);
+
+		// Создаем элемент выпадающего списка
+		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');
+
+		if (optGroup.length) {
+			let isSelected = false;
+			[...optGroup].forEach(function (el) {
+				let olOptGroup = document.createElement('ol');
+				olOptGroup.classList.add(CLASS_NAME_OPTGROUP);
+
+				let liLabel = document.createElement('li');
+				liLabel.innerHTML = el.label.trim();
+				liLabel.classList.add(CLASS_NAME_OPTGROUP_TITLE)
+
+				olOptGroup.prepend(liLabel)
+
+				let optGroupOptions = el.querySelectorAll('option');
+
+				createLi(optGroupOptions, olOptGroup, isSelected);
+
+				list.append(olOptGroup);
+				isSelected = true;
+			});
+		} else {
+			let isSelected = false;
+			createLi(options, list, isSelected);
+		}
+
+		function createLi(options, list, isSelected) {
+			let i = 0;
+			for (const option of options) {
+				let li = document.createElement('li');
+
+				li.innerHTML = option.innerHTML.trim().replace(/<\/[^>]+(>|$)/g, "")
+				li.dataset.value = Manipulator.get(option, 'value');
+				li.classList.add(CLASS_NAME_OPTION);
+
+				let liData = Manipulator.get(option);
+				if (!isEmptyObj(liData)) {
+					for (const key of Object.keys(liData)) {
+						Manipulator.set(li, 'data-' + key, liData[key]);
+					}
+				}
+
+				if (i === element.selectedIndex && !isSelected) {
+					li.classList.add('selected');
+				}
+
+				if (Manipulator.has(option, 'disabled')) li.classList.add('disabled');
+				if (Manipulator.has(option, 'hidden')) li.classList.add('hidden');
+
+				list.append(li);
+
+				i++;
+			}
+		}
+
+		dropdown.append(list);
+
+		// Добавляем все созданный контейнер после селекта
+		element.insertAdjacentElement('afterend', select);
+
+		// помечаем элемент инициализированным
+		element.dataset.inited = 'true';
+
+		if (_this._params.search) {
+			this.search(select);
+		}
+
+		this._addEventListeners(select);
+	}
+
+	destroy(select) {
+		let element = select.nextElementSibling;
+
+		if (element) {
+			if (element.classList.contains(CLASS_NAME_CONTAINER)) {
+				element.remove();
+
+				select.selectedIndex = 0;
+				[...select.querySelectorAll('option')].forEach(function (el, index) {
+					if (el.hasAttribute('selected')) {
+						select.selectedIndex = index;
+					}
+				});
+			}
+		}
+	}
+
+	refresh(select) {
+		const _this = this;
+
+		let observer = new MutationObserver(() => {
+			clearTimeout(observerTimout);
+			observerTimout = setTimeout(() => {
+				_this.build(true, select);
+			}, 100);
+		});
+
+		observer.observe(select, {
+			attributeFilter: ['disabled', 'required', 'style', 'hidden'],
+			childList: true,
+			subtree: true,
+			characterDataOldValue: true,
+		});
+	}
+
+	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', 'Поиск...');
+
+		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;
+
+		select.querySelector('.' + CLASS_NAME_CURRENT).onclick = function (e) {
+			let el = e.target,
+				container = el.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');
+					}
+				}
+			}
+
+			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();
+				}
+			}
+
+			return false;
+		}
+
+		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');
+
+					let select = container.previousSibling;
+					select.value = el.dataset.value;
+					EventHandler.trigger(select, EVENT_KEY_CHANGE)
+				}
+			});
+		});
+
+		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');
+					}
+				}
+			}
+		});
+
+		[...document.querySelectorAll('form')].forEach(function (form) {
+			form.addEventListener("reset", function () {
+				form.querySelectorAll('select.vg-select').forEach(function (select) {
+					VGSelect.init(select, {}, true)
+				})
+			});
+		});
+	}
+
+	/**
+	 * Инициализация
+	 * @param element
+	 * @param params
+	 * @param isRebuild
+	 */
+	static init(element, params = {}, isRebuild = false) {
+		const instance = VGSelect.getOrCreateInstance(element, params);
+		instance.build(isRebuild);
+	}
+}
+
+export default VGSelect;

package/app/modules/vgselect/scss/_variables.scss

@@ -0,0 +1,74 @@
+$select-current-map: (
+	background-color: white,
+	color: black,
+	border-width: 1px,
+	border-style: solid,
+	border-color: #dddddd,
+	border-radius: 5px,
+	padding-left: 16px,
+	padding-right: 40px,
+	padding-top: 16px,
+	padding-bottom: 16px,
+	line-height: 1.1,
+	font-size: 16px,
+	z-index: 10,
+) !default;
+
+$select-current-svg: '<svg aria-hidden="true" focusable="false" data-prefix="fa-light" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z" fill="gray"/></svg>' !default;
+
+$select-dropdown-map: (
+	background-color: white,
+	color: black,
+	border-width: 1px,
+	border-style: solid,
+	border-color: #dddddd,
+	border-radius: $border-radius,
+	box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11),
+	z-index: 15,
+) !default;
+
+$select-list-map: (
+	background-color: transparent,
+	color: black,
+	padding-left: 8px,
+	padding-right: 8px,
+	padding-top: 8px,
+	padding-bottom: 8px,
+	border-bottom-width: 1px,
+	border-bottom-style: solid,
+	border-bottom-color: #f5f5f5,
+) !default;
+
+$select-optgroup-map: (
+	background-color: transparent,
+	color: #fff,
+	padding-left: 8px,
+	padding-right: 8px,
+	padding-top: 8px,
+	padding-bottom: 8px,
+	border-bottom-width: 1px,
+	border-bottom-style: solid,
+	border-bottom-color: #838383,
+) !default;
+
+$select-list-max-height: 286px !default;
+$select-list-scrollbar-width: 6px !default;
+$select-list-scrollbar-bg: #F5F5F5 !default;
+$select-list-scrollbar-thumb: #999 !default;
+
+$select-list-hover-map: (
+	background-color: #f7f7f7,
+	color: black,
+	border-bottom-color: #f5f5f5,
+) !default;
+
+$select-optgroup-hover-map: (
+	background-color: #f7f7f7,
+	color: black,
+	border-bottom-color: #f5f5f5,
+) !default;
+
+$select-search-map: (
+	background-color: #f2f2f2,
+	color: #000000
+) !default;