Added description in interfaces and etc
This commit is contained in:
MaxOvs
@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
exports.__esModule = true;
|
||||
@ -1,8 +1,24 @@
|
||||
import { ICgSelect } from '../../interfaces/cg-select.interface';
|
||||
|
||||
export interface ICreateBreadCrumb {
|
||||
/**
|
||||
* Определенный экземпляр класса.
|
||||
* @type {Element | null}
|
||||
*/
|
||||
element: Element | null;
|
||||
/**
|
||||
* Настройки селекта.
|
||||
* @type {ICgSelect}
|
||||
*/
|
||||
option: ICgSelect;
|
||||
/**
|
||||
* Массив индексов выбранных элементов.
|
||||
* @type {number[]}
|
||||
*/
|
||||
indexes: number[];
|
||||
/**
|
||||
* Массив с выбранными элементами.
|
||||
* @type {string[]}
|
||||
*/
|
||||
selectedItems: string[];
|
||||
}
|
||||
|
||||
103
src/components/create-element/create-elementTs.js
Normal file
103
src/components/create-element/create-elementTs.js
Normal file
@ -0,0 +1,103 @@
|
||||
"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
Normal file
2
src/components/utils/urils.interface.js
Normal file
@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
exports.__esModule = true;
|
||||
@ -1,16 +1,53 @@
|
||||
import { IItems } from '../../interfaces/items.interface';
|
||||
|
||||
export interface IDataItem {
|
||||
/**
|
||||
* Необязательный параметр. Категория группы элементов.
|
||||
* @type {string}
|
||||
*/
|
||||
category?: string;
|
||||
categoryItems?: string;
|
||||
/**
|
||||
* Необязательный параметр. Массив с элементами.
|
||||
* @type {IItems[] | string[] | any}
|
||||
*/
|
||||
categoryItems?: IItems[] | string[] | any;
|
||||
/**
|
||||
* Значение переданного элемента.
|
||||
* @type {string | IItems | number}
|
||||
*/
|
||||
ItemValue: string | IItems | number;
|
||||
}
|
||||
|
||||
export interface ISelectedItems {
|
||||
/**
|
||||
* Placeholder необязательный параметр, в который передается текст плейсхолдера селекта.
|
||||
* @type {string}
|
||||
*/
|
||||
placeholder?: string;
|
||||
/**
|
||||
* Необязательный параметр, в который передается элемент который будет выбран изначально в селекте.
|
||||
* @type {string}
|
||||
*/
|
||||
selected?: string;
|
||||
/**
|
||||
* Массив выбранных элементов из списка
|
||||
* @type {string[]}
|
||||
*/
|
||||
selectedItems?: string[];
|
||||
/**
|
||||
* Массив индексов выбранных элементов
|
||||
* @type {number[]}
|
||||
*/
|
||||
indexes?: number[];
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за поведения селекта,
|
||||
* для него, ***работает только в месте с подключением multiselect.
|
||||
* @type {boolean}
|
||||
*/
|
||||
multiselectTag?: boolean;
|
||||
/**
|
||||
* Необязательный параметр, который отвечает за включение светлой/темной темы по умолчанию, стоит темная тема.
|
||||
* @type {boolean}
|
||||
*/
|
||||
darkTheme?: boolean;
|
||||
}
|
||||
|
||||
210
src/components/utils/utilsTs.js
Normal file
210
src/components/utils/utilsTs.js
Normal file
@ -0,0 +1,210 @@
|
||||
"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;
|
||||
@ -1,14 +1,18 @@
|
||||
import { ICgSelect } from '../../interfaces/cg-select.interface';
|
||||
/**
|
||||
* Utils module
|
||||
* @module Utils
|
||||
*/
|
||||
|
||||
import { IStyle } from '../../interfaces/cg-select.interface';
|
||||
import { IItems } from '../../interfaces/items.interface';
|
||||
import { IDataItem, ISelectedItems } from './urils.interface';
|
||||
|
||||
/**
|
||||
* Преобразование каждого елемента полученного из поля Items;
|
||||
* @param {IDataItem} dataItem полученный елемент переданный при создании селекта может быть как object / string
|
||||
* @param {any} dataItem полученный елемент переданный при создании селекта может быть как object / string
|
||||
* @param {number} index индекс этого элемента
|
||||
* @returns {IDataItem | IItems} возвращает сформированный объект
|
||||
* @returns {IItems} возвращает сформированный объект
|
||||
*/
|
||||
|
||||
export function getFormatItem(dataItem: any, index: number): IItems {
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
let item: IItems;
|
||||
@ -67,7 +71,7 @@ export function checkItemStruct(item: object): boolean {
|
||||
* @param {string} content placeholer передаваемый из настроек селекта
|
||||
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
|
||||
*/
|
||||
export function createSelected(element: Element | null, content?: string, styles?: object) {
|
||||
export function createSelected(element: Element, content?: string, styles?: IStyle) {
|
||||
const select = document.createElement('div');
|
||||
const selected = document.createElement('p');
|
||||
const caret = document.createElement('div');
|
||||
@ -89,17 +93,6 @@ export function createSelected(element: Element | null, content?: string, styles
|
||||
selected.setAttribute('style', `${styles}`);
|
||||
caret.setAttribute('style', `${styles}`);
|
||||
}
|
||||
|
||||
// if (styles) {
|
||||
// customStyles(element, styles);
|
||||
|
||||
// element.innerHTML = `
|
||||
// <div class="cg-select" style = "${styles}">
|
||||
// <p class="selected" style = "${styles}">${content}</p>
|
||||
// <div class="caret" style = "${styles}"></div>
|
||||
// </div>
|
||||
// `;
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
@ -210,24 +203,18 @@ export function nativeOptionMultiple(
|
||||
* @param {Element} element созданный экземпляр класса DropDown
|
||||
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта
|
||||
*/
|
||||
export function customStyles(element: Element, styles: any) {
|
||||
if (!styles) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { head, caret, placeholder, lable } = styles;
|
||||
|
||||
export function customStyles(element: Element, styles: IStyle) {
|
||||
const cgSelect = element.querySelector('.cg-select');
|
||||
const caretSelect = element.querySelector('.caret');
|
||||
const placeholderSelect = element.querySelector('.selected');
|
||||
const lableItem = element.parentElement!.querySelector('h1.label');
|
||||
|
||||
customStylesFormat(head, cgSelect!);
|
||||
customStylesFormat(caret, caretSelect!);
|
||||
customStylesFormat(lable, lableItem!);
|
||||
customStylesFormat(styles.head!, cgSelect!);
|
||||
customStylesFormat(styles.caret!, caretSelect!);
|
||||
customStylesFormat(styles.lable!, lableItem!);
|
||||
|
||||
if (placeholderSelect) {
|
||||
customStylesFormat(placeholder, placeholderSelect);
|
||||
customStylesFormat(styles.placeholder!, placeholderSelect);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user