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/create-element/create-element.interface.js
View File

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

103
src/components/create-element/create-elementTs.js
View File

@ -1,103 +0,0 @@
"use strict";
exports.__esModule = true;
exports.createInputSearch = exports.createBreadCrumb = exports.createNativeSelectOption = exports.createNativeSelect = void 0;
var utilsTs_1 = require("../utils/utilsTs");
/**
* Метод который создает нативный селект
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/
function createNativeSelect() {
var nativeSelect = document.createElement('select');
nativeSelect.setAttribute('name', 'dataSelect');
nativeSelect.classList.add('nativeSelect');
return nativeSelect;
}
exports.createNativeSelect = createNativeSelect;
/**
* Метод который создает Options для нативного селекта
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/
function createNativeSelectOption() {
var nativeOption = document.createElement('option');
nativeOption.classList.add('nativeSelect__nativeOption');
return nativeOption;
}
exports.createNativeSelectOption = createNativeSelectOption;
/**
* Метод который создает и отвечает за поведение chips
* @param {ICreateBreadCrumb} data объект в котором содержатся настройки и элементы селекта
* @param {string} title имя выбранного элемента для отрисовки chips
* @param {number} index индекс выбранного элемента для отрисовки chips
* @param {string} id уникальное id выбранного элемента
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
*/
function createBreadCrumb(data, title, index, id) {
var element = data.element, option = data.option, indexes = data.indexes, selectedItems = data.selectedItems;
var placeholder = option.placeholder, styles = option.styles;
var selected = element === null || element === void 0 ? void 0 : element.querySelector('.selected');
var nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
var liChip = document.createElement('li');
var textNode = document.createTextNode(title);
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');
svgIcon.setAttribute('viewBox', '0 0 10 10');
path1.setAttribute('d', 'M3,7 L7,3');
path2.setAttribute('d', 'M3,3 L7,7');
liChip.setAttribute('id', "tag-".concat(index, "-").concat(id));
svgIcon.classList.add('svg-icon');
svgIcon.appendChild(path1);
svgIcon.appendChild(path2);
liChip.appendChild(textNode);
liChip.appendChild(svgIcon);
if (styles) {
// const { chips } = styles;
// customStylesFormat(chips, liChip);
}
svgIcon.addEventListener('click', function (event) {
event.preventDefault();
event.stopPropagation();
(0, utilsTs_1.nativeOptionMultiple)(nativeOption, title, false);
var deleteIcon = indexes.indexOf(index);
var checkBox;
indexes.splice(deleteIcon, 1);
selectedItems.splice(deleteIcon, 1);
if (id) {
checkBox = document.getElementById("chbox-".concat(id));
}
else {
checkBox = document.getElementById("chbox-".concat(index));
}
checkBox.checked = false;
checkBox.parentElement.classList.remove('active');
if (!selectedItems.length) {
selected.innerText = placeholder;
}
liChip.parentElement.removeChild(liChip);
});
return liChip;
}
exports.createBreadCrumb = createBreadCrumb;
/**
* Метод который создает поиск элементов в селекте
* @param {string} random уникальное значение для input элемента.
* @param {string} lenguage текст на определенном языке переданный из файла language.js
* @returns {HTMLInputElement} Возвращает сформированный input елемент.
*/
function createInputSearch(random, lenguage) {
var inputSearch = document.createElement('input');
inputSearch.type = 'text';
inputSearch.classList.add('inputSearch');
inputSearch.setAttribute('id', "searchSelect-".concat(random));
if (lenguage) {
inputSearch.setAttribute('placeholder', "".concat(lenguage));
}
else {
inputSearch.setAttribute('placeholder', 'Search...');
}
inputSearch.addEventListener('click', function (e) {
e.preventDefault();
});
return inputSearch;
}
exports.createInputSearch = createInputSearch;

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;