apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed files

Browse Source
This commit is contained in:
MaxOvs
2023-01-13 15:40:11 +03:00
parent 4d10721b7b
commit ae258e68f4
14 changed files with 19 additions and 1193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/utils/urils.interface.js
View File

@@ -1,2 +0,0 @@
"use strict";
exports.__esModule = true;

2
src/components/utils/urils.interface.ts
View File

@@ -10,7 +10,7 @@ export interface IDataItem {
* Необязательный параметр. Массив с элементами.
* @type {IItems[] | string[] | any}
*/
categoryItems?: IItems[] | string[] | any;
categoryItems?: IItems[] | string[];
/**
* Значение переданного элемента.
* @type {string | IItems | number}

210
src/components/utils/utilsTs.js
View File

@@ -1,210 +0,0 @@
"use strict";
/**
* Utils module
* @module Utils
*/
exports.__esModule = true;
exports.customStylesFormat = exports.customStyles = exports.nativeOptionMultiple = exports.nativeOptionOrdinary = exports.clearSelect = exports.createSelected = exports.checkItemStruct = exports.getSelectText = exports.getFormatItem = void 0;
/**
* Преобразование каждого елемента полученного из поля Items;
* @param {any} dataItem полученный елемент переданный при создании селекта может быть как object / string
* @param {number} index индекс этого элемента
* @returns {IItems} возвращает сформированный объект
*/
function getFormatItem(dataItem, index) {
var random = Math.random().toString(36).substring(2, 10);
var item;
if (checkItemStruct(dataItem)) {
return dataItem;
}
else {
item = {
id: random,
title: dataItem,
value: index
};
return item;
}
}
exports.getFormatItem = getFormatItem;
/**
* Вставка изначального текста селекта(до выбора)
* @param {ITextSelect} data объект в котором находяться title селекта
* @param {HTMLElement | null | undefined} select елемент селекта, куда будет вставляться title
* @returns {HTMLElement} возвращает сформированный елемент селекта
*/
function getSelectText(data, select) {
var placeholder = data.placeholder, selected = data.selected;
if (placeholder) {
select.innerText = placeholder;
}
else if (selected) {
select.innerText = selected;
}
else {
select.innerText = 'Select...';
}
return select;
}
exports.getSelectText = getSelectText;
/**
* Проверка содержит ли item указанные свойства,
* @param {object} item проверяемый на определенную структуру элемент
* @returns {boolean} возвращает true/false если item содержит указанные свойства
*/
function checkItemStruct(item) {
if (item && typeof item !== 'object') {
return false;
}
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
}
exports.checkItemStruct = checkItemStruct;
/**
* Создание кнопки выбора элементов
* @param {HTMLElement} element созданный экземпляр класса DropDown
* @param {string} content placeholer передаваемый из настроек селекта
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
*/
function createSelected(element, content, styles) {
var select = document.createElement('div');
var selected = document.createElement('p');
var caret = document.createElement('div');
select.classList.add('cg-select');
selected.classList.add('selected');
caret.classList.add('caret');
select.appendChild(selected);
select.appendChild(caret);
if (content) {
var text = document.createTextNode(content);
selected.appendChild(text);
element === null || element === void 0 ? void 0 : element.appendChild(select);
}
else if (styles) {
customStyles(element, styles);
select.setAttribute('style', "".concat(styles));
selected.setAttribute('style', "".concat(styles));
caret.setAttribute('style', "".concat(styles));
}
}
exports.createSelected = createSelected;
/**
* Создание кнопки отчиски селекта, при единичном выборе.
* @param {HTMLElement} select место в селекте которое будет переназначено на ''.
* @param {Element} element экземпляр класса DropDown.
* @param {ISelectedItems} dataSelectText текст который отрисовывается в селекте.
*/
function clearSelect(select, element, dataSelectText) {
var selectedItems = dataSelectText.selectedItems, indexes = dataSelectText.indexes, darkTheme = dataSelectText.darkTheme, multiselectTag = dataSelectText.multiselectTag;
var options = element.querySelectorAll('.list__item');
var ulMultiSelect = element.querySelector('.multiselect-tag');
var svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
var checkBox = element.querySelectorAll('li input');
svgIcon.setAttribute('viewBox', '0 0 10 10');
path1.setAttribute('d', 'M2,8 L8,2');
path2.setAttribute('d', 'M2,2 L8,8');
svgIcon.appendChild(path1);
svgIcon.appendChild(path2);
if (multiselectTag) {
return;
}
if (darkTheme === true || !darkTheme) {
path1.classList.add('pathWhite');
path2.classList.add('pathWhite');
}
if (darkTheme === false) {
path1.classList.add('pathBlack');
path2.classList.add('pathBlack');
}
svgIcon.classList.add('svg-icon');
svgIcon.classList.add('svg-clear');
select.appendChild(svgIcon);
svgIcon.addEventListener('click', function () {
select.innerText = '';
if (Array.isArray(selectedItems)) {
selectedItems.splice(0);
indexes.splice(0);
}
checkBox.forEach(function (item) {
if (item instanceof HTMLInputElement) {
item.checked = false;
}
});
getSelectText(dataSelectText, select);
options.forEach(function (option) {
option.classList.remove('active');
});
});
}
exports.clearSelect = clearSelect;
/**
* Поведение нативного(одинарного) селекта при выборе кастомного
* @param {NodeList} element NodeList нативного селекта
* @param {any} item выбранный элемент в кастомном селекте
*/
function nativeOptionOrdinary(element, item) {
element.forEach(function (option) {
option.removeAttribute('selected');
if (option.textContent === item) {
option.setAttribute('selected', 'selected');
}
});
}
exports.nativeOptionOrdinary = nativeOptionOrdinary;
/**
* Поведение нативного(Multiple) селекта при выборе в кастомном
* @param {NodeListOf<Element> | undefined} element NodeList нативного селекта
* @param {string} item выбранный элемент в кастомном селекте
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
*/
function nativeOptionMultiple(element, item, condition) {
element.forEach(function (option) {
if (condition == true) {
if (option.textContent === item) {
option.setAttribute('selected', 'selected');
}
}
else if (condition == false) {
if (option.textContent === item) {
option.removeAttribute('selected');
}
}
else {
return;
}
});
}
exports.nativeOptionMultiple = nativeOptionMultiple;
/**
* Поиск и стилизация елементов полученных из styles экземпляра DropDown
* @param {Element} element созданный экземпляр класса DropDown
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
*/
function customStyles(element, styles) {
var cgSelect = element.querySelector('.cg-select');
var caretSelect = element.querySelector('.caret');
var placeholderSelect = element.querySelector('.selected');
var lableItem = element.parentElement.querySelector('h1.label');
customStylesFormat(styles.head, cgSelect);
customStylesFormat(styles.caret, caretSelect);
customStylesFormat(styles.lable, lableItem);
if (placeholderSelect) {
customStylesFormat(styles.placeholder, placeholderSelect);
}
}
exports.customStyles = customStyles;
/**
* Универсальный метод для стилизации селекта
* @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
* @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
*/
function customStylesFormat(elemOption, selector) {
if (elemOption) {
Object.entries(elemOption).forEach(function (_a) {
var key = _a[0], value = _a[1];
selector.style[key] = value;
});
}
}
exports.customStylesFormat = customStylesFormat;