Working in multiple mode
This commit is contained in:
MaxOvs
parent
ef832c60ae
commit
8eeabf44b2
@ -14,4 +14,5 @@ const dropdn = new CGSelect({
|
||||
'MAN',
|
||||
'Ferari',
|
||||
],
|
||||
multiselect: true,
|
||||
});
|
||||
|
||||
@ -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');
|
||||
// }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
|
||||
/**
|
||||
* Метод который создает нативный селект
|
||||
* @returns {HTMLSelectElement} Возвращает созданный нативный селект
|
||||
*/
|
||||
|
||||
export function createNativeSelect(): HTMLSelectElement {
|
||||
const nativeSelect = document.createElement('select');
|
||||
|
||||
@ -23,3 +21,70 @@ export function createNativeSelectOption(): HTMLOptionElement {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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)){
|
||||
if (checkItemStruct(dataItem)) {
|
||||
return dataItem;
|
||||
} else{
|
||||
} 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) {
|
||||
@ -80,3 +78,17 @@ export function createSelected(element: Element|null, content?: string, styles?:
|
||||
// `;
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
* Поведение нативного(одинарного) селекта при выборе кастомного
|
||||
* @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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user