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

Working in multiple mode

Browse Source
This commit is contained in:
MaxOvs 2023-01-06 21:14:16 +03:00
parent ef832c60ae
commit 8eeabf44b2
4 changed files with 193 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/indexTs.ts
View File

@ -14,4 +14,5 @@ const dropdn = new CGSelect({
'MAN',
'Ferari',
],
multiselect: true,
});

100
src/cg-selectTS.ts
View File

@ -3,7 +3,7 @@ import {
createNativeSelectOption,
} from './components/create-element/create-elementTs';
import { IDataItem } from './components/utils/urils.interface';
import { createSelected, getFormatItem } from './components/utils/utilsTs';
import { createSelected, getFormatItem, nativeOptionOrdinary } from './components/utils/utilsTs';
import { ICgSelect } from './interfaces/cg-select.interface';
import { IItems } from './interfaces/items.interface';
import './main.scss';
@ -32,7 +32,7 @@ export class CGSelect implements ICgSelect {
private randomId: string;
private caret: Element | null | undefined;
private category: string;
private selectedItems: object[] | object;
private selectedItems: string[] | string;
private itemsSelect: IItems[] | string[] | any;
private indexes: number[] = [];
@ -84,10 +84,6 @@ export class CGSelect implements ICgSelect {
this.itemsSelect = [];
if (multiselect === true) {
this.selectedItems = [];
}
if (!items && url) {
this.renderUrl();
return;
@ -147,13 +143,13 @@ export class CGSelect implements ICgSelect {
liItem.classList.add('list__item');
strongItem.classList.add('category');
if (multiselect && multiselect === true) {
if (multiselect) {
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
liItem.appendChild(checkBox);
if (multiselectTag && multiselectTag == true) {
if (multiselectTag) {
checkBox.classList.add('displayHide');
}
@ -276,24 +272,102 @@ export class CGSelect implements ICgSelect {
} = this.options;
const options = this.element?.querySelectorAll('.list__item');
const select = this.element?.querySelector('.selected');
const select: HTMLElement | null | undefined = this.element?.querySelector('.selected');
const nativeOption = this.element?.querySelectorAll('.nativeSelect__nativeOption');
const ulMultipul = document.createElement('ul');
if (multiselect && multiselect == true) {
if (multiselect) {
ulMultipul.classList.add('multiselect-tag');
select?.classList.add('overflow-hidden');
}
options?.forEach((option: Element, index: number) => {
option.addEventListener('click', (event) => {
const item = this.itemsSelect[index];
const item: IItems = this.itemsSelect[index];
const checkIndex = this.indexes.indexOf(index);
if (closeOnSelect == false || multiselect) {
event.stopPropagation();
event.preventDefault();
}
select!.textContent = item.title;
this.selectedItems = item;
console.log(this.selectedItems);
this.selectedItems = item.title;
nativeOptionOrdinary(nativeOption, item.title);
options.forEach((option) => {
option.classList.remove('active');
});
option.classList.add('active');
// if (multiselect) {
// this.selectedItems = [];
// option.classList.toggle('active');
// const checkBox: HTMLInputElement | null = option.querySelector('input[type="checkbox"]');
// if (checkBox) {
// if (!(event.target instanceof HTMLInputElement)) {
// checkBox.checked = !checkBox.checked;
// }
// if (checkIndex === -1) {
// nativeOptionMultiple(nativeOption, item.title, true);
// this.indexes.push(index);
// select!.textContent = '';
// if (multiselectTag) {
// this.selectedItems.push(item);
// select!.appendChild(ulMultipul);
// const data = {
// option: this.options,
// element: this.element,
// indexes: this.indexes,
// selectedItems: this.selectedItems,
// };
// ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
// } else {
// debugger;
// this.selectedItems.push(item.title);
// console.log(this.selectedItems);
// select.innerText = this.selectedItems;
// }
// } else {
// if (multiselectTag) {
// const tagItem = document.getElementById(`tag-${index}-${item.id}`);
// ulMultipul.removeChild(tagItem);
// }
// this.indexes.splice(checkIndex, 1);
// this.selectedItems.splice(checkIndex, 1);
// nativeOptionMultiple(nativeOption, item.title, false);
// }
// if (!this.#selectedItems.length) {
// getSelectText(dataSelectText, select);
// } else {
// if (multiselectTag) {
// select.appendChild(ulMultipul);
// } else {
// select.innerText = this.#selectedItems;
// }
// }
// }
// } else {
// select!.textContent = item.title;
// this.selectedItems = item.title;
// nativeOptionOrdinary(nativeOption, item.title);
// options.forEach((option) => {
// option.classList.remove('active');
// });
// option.classList.add('active');
// }
});
});
}

89
src/components/create-element/create-elementTs.ts
View File

@ -1,15 +1,13 @@
/**
* Метод который создает нативный селект
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
*/
export function createNativeSelect(): HTMLSelectElement {
const nativeSelect = document.createElement('select');
nativeSelect.setAttribute('name', 'dataSelect');
nativeSelect.classList.add('nativeSelect');
return nativeSelect;
const nativeSelect = document.createElement('select');
nativeSelect.setAttribute('name', 'dataSelect');
nativeSelect.classList.add('nativeSelect');
return nativeSelect;
}
/**
@ -17,9 +15,76 @@ export function createNativeSelect(): HTMLSelectElement {
* @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
*/
export function createNativeSelectOption(): HTMLOptionElement {
const nativeOption = document.createElement('option');
nativeOption.classList.add('nativeSelect__nativeOption');
return nativeOption;
const nativeOption = document.createElement('option');
nativeOption.classList.add('nativeSelect__nativeOption');
return nativeOption;
}
/**
* Метод который создает и отвечает за поведение chips
* @param {object} data объект в котором содержатся настройки и элементы селекта
* @param {string} title имя выбранного элемента для отрисовки chips
* @param {number} index индекс выбранного элемента для отрисовки chips
* @param {string} id уникальное id выбранного элемента
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
*/
export function createBreadcrumb(data: any, title: string, index: number, id: string) {
const { element, option, indexes, selectedItems } = data;
const { placeholder, styles } = option;
const selected = element.querySelector('.selected');
const nativeOption = element.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li');
const textNode = document.createTextNode(title);
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const 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-${index}-${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', (event) => {
event.preventDefault();
event.stopPropagation();
// nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index);
let checkBox = '';
indexes.splice(deleteIcon, 1);
selectedItems.splice(deleteIcon, 1);
if (id) {
// checkBox = document.getElementById(`chbox-${id}`);
} else {
// checkBox = document.getElementById(`chbox-${index}`);
}
// checkBox.checked = false;
// checkBox.parentElement.classList.remove('active');
if (!selectedItems.length) {
selected.innerText = placeholder;
}
// liChip.parentElement.removeChild(liChip);
});
return liChip;
}

44
src/components/utils/utilsTs.ts
View File

@ -8,18 +8,18 @@ import { IDataItem } from './urils.interface';
* @returns {IDataItem | IItems} возвращает сформированный объект
*/
export function getFormatItem(dataItem:any , index: number) : IItems {
export function getFormatItem(dataItem: any, index: number): IItems {
const random = Math.random().toString(36).substring(2, 10);
let item: IItems;
if(checkItemStruct(dataItem)){
return dataItem;
} else{
if (checkItemStruct(dataItem)) {
return dataItem;
} else {
item = {
id: random,
title: dataItem,
value: index
}
value: index,
};
return item;
}
@ -44,13 +44,11 @@ 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 | null, content?: string, styles?: object) {
const select = document.createElement('div');
const selected = document.createElement('p');
const caret = document.createElement('div');
select.classList.add('cg-select');
selected.classList.add('selected');
caret.classList.add('caret');
@ -58,15 +56,15 @@ export function createSelected(element: Element|null, content?: string, styles?:
select.appendChild(selected);
select.appendChild(caret);
if(content){
if (content) {
const text = document.createTextNode(content);
selected.appendChild(text);
element?.appendChild(select)
} else if(styles){
element?.appendChild(select);
} else if (styles) {
// customStyles(element, styles);
select.setAttribute('style', `${styles}`)
selected.setAttribute('style', `${styles}`)
caret.setAttribute('style', `${styles}`)
select.setAttribute('style', `${styles}`);
selected.setAttribute('style', `${styles}`);
caret.setAttribute('style', `${styles}`);
}
// if (styles) {
@ -79,4 +77,18 @@ export function createSelected(element: Element|null, content?: string, styles?:
// </div>
// `;
// }
}
}
/**
* Поведение нативного(одинарного) селекта при выборе кастомного
* @param {NodeList} element NodeList нативного селекта
* @param {any} item выбранный элемент в кастомном селекте
*/
export function nativeOptionOrdinary(element: NodeListOf<Element> | undefined, item: any) {
element!.forEach((option) => {
option.removeAttribute('selected');
if (option.textContent === item) {
option.setAttribute('selected', 'selected');
}
});
}