MultiTag in Working! Fixed bugs
This commit is contained in:
MaxOvs
parent
482bd59756
commit
2ed0e306e5
@ -15,4 +15,5 @@ const dropdn = new CGSelect({
|
||||
'Ferari',
|
||||
],
|
||||
multiselect: true,
|
||||
multiselectTag: true,
|
||||
});
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import { ICreateBreadCrumb } from './components/create-element/create-element.interface';
|
||||
import {
|
||||
CreateBreadCrumb,
|
||||
createNativeSelect,
|
||||
createNativeSelectOption,
|
||||
} from './components/create-element/create-elementTs';
|
||||
|
||||
import { IDataItem, ITextSelect } from './components/utils/urils.interface';
|
||||
|
||||
import {
|
||||
createSelected,
|
||||
getFormatItem,
|
||||
@ -10,6 +14,7 @@ import {
|
||||
nativeOptionMultiple,
|
||||
nativeOptionOrdinary,
|
||||
} from './components/utils/utilsTs';
|
||||
|
||||
import { ICgSelect } from './interfaces/cg-select.interface';
|
||||
import { IItems } from './interfaces/items.interface';
|
||||
import './main.scss';
|
||||
@ -320,22 +325,50 @@ export class CGSelect implements ICgSelect {
|
||||
nativeOptionMultiple(nativeOption, item.title, true);
|
||||
select!.textContent = '';
|
||||
|
||||
if (Array.isArray(this.selectedItems)) {
|
||||
this.selectedItems.push(item.title);
|
||||
select!.innerText = this.selectedItems.join(',');
|
||||
if (multiselectTag) {
|
||||
if (Array.isArray(this.selectedItems)) {
|
||||
const dataBreadCrumb: ICreateBreadCrumb = {
|
||||
option: this.options,
|
||||
element: this.element,
|
||||
indexes: this.indexes,
|
||||
selectedItems: this.selectedItems,
|
||||
};
|
||||
|
||||
this.selectedItems.push(item.title);
|
||||
select!.appendChild(ulMultipul);
|
||||
ulMultipul.appendChild(
|
||||
CreateBreadCrumb(dataBreadCrumb, item.title, index, item.id),
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (Array.isArray(this.selectedItems)) {
|
||||
this.selectedItems.push(item.title);
|
||||
select!.innerText = this.selectedItems.join(',');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.indexes.splice(checkIndex, 1);
|
||||
nativeOptionMultiple(nativeOption, item.title, false);
|
||||
if (multiselectTag) {
|
||||
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
|
||||
ulMultipul.removeChild<Element>(tagItem!);
|
||||
}
|
||||
|
||||
if (Array.isArray(this.selectedItems)) {
|
||||
this.selectedItems.splice(checkIndex, 1);
|
||||
select!.innerText = this.selectedItems.join(',');
|
||||
this.indexes.splice(checkIndex, 1);
|
||||
nativeOptionMultiple(nativeOption, item.title, false);
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(this.selectedItems) && !this.selectedItems.length) {
|
||||
if (!this.selectedItems.length) {
|
||||
getSelectText(placeholderTextSelect, select);
|
||||
} else {
|
||||
if (multiselectTag) {
|
||||
select!.appendChild(ulMultipul);
|
||||
} else {
|
||||
if (Array.isArray(this.selectedItems)) {
|
||||
select!.innerText = this.selectedItems.join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
@ -349,62 +382,6 @@ export class CGSelect implements ICgSelect {
|
||||
});
|
||||
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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { ICgSelect } from '../../interfaces/cg-select.interface';
|
||||
|
||||
export interface IcreateBreadCrumb {
|
||||
export interface ICreateBreadCrumb {
|
||||
element: Element | null;
|
||||
option: ICgSelect;
|
||||
indexes: number[];
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { IcreateBreadCrumb } from './create-element.interface';
|
||||
import { nativeOptionMultiple } from '../utils/utilsTs';
|
||||
import { ICreateBreadCrumb } from './create-element.interface';
|
||||
|
||||
/**
|
||||
* Метод который создает нативный селект
|
||||
@ -25,22 +26,22 @@ export function createNativeSelectOption(): HTMLOptionElement {
|
||||
|
||||
/**
|
||||
* Метод который создает и отвечает за поведение chips
|
||||
* @param {object} data объект в котором содержатся настройки и элементы селекта
|
||||
* @param {ICreateBreadCrumb} data объект в котором содержатся настройки и элементы селекта
|
||||
* @param {string} title имя выбранного элемента для отрисовки chips
|
||||
* @param {number} index индекс выбранного элемента для отрисовки chips
|
||||
* @param {string} id уникальное id выбранного элемента
|
||||
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item
|
||||
*/
|
||||
export function createBreadcrumb(
|
||||
data: IcreateBreadCrumb,
|
||||
export function CreateBreadCrumb(
|
||||
data: ICreateBreadCrumb,
|
||||
title: string,
|
||||
index: number,
|
||||
id: string,
|
||||
) {
|
||||
): HTMLLIElement {
|
||||
const { element, option, indexes, selectedItems } = data;
|
||||
const { placeholder, styles } = option;
|
||||
|
||||
const selected = element!.querySelector('.selected');
|
||||
const selected: HTMLElement | null | undefined = element?.querySelector('.selected');
|
||||
const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
|
||||
|
||||
const liChip = document.createElement('li');
|
||||
@ -69,28 +70,28 @@ export function createBreadcrumb(
|
||||
svgIcon.addEventListener('click', (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// nativeOptionMultiple(nativeOption, title, false);
|
||||
nativeOptionMultiple(nativeOption, title, false);
|
||||
|
||||
const deleteIcon = indexes.indexOf(index);
|
||||
let checkBox = '';
|
||||
let checkBox: any;
|
||||
|
||||
indexes.splice(deleteIcon, 1);
|
||||
selectedItems.splice(deleteIcon, 1);
|
||||
|
||||
if (id) {
|
||||
// checkBox = document.getElementById(`chbox-${id}`);
|
||||
checkBox = document.getElementById(`chbox-${id}`);
|
||||
} else {
|
||||
// checkBox = document.getElementById(`chbox-${index}`);
|
||||
checkBox = document.getElementById(`chbox-${index}`);
|
||||
}
|
||||
|
||||
// checkBox.checked = false;
|
||||
// checkBox.parentElement.classList.remove('active');
|
||||
checkBox.checked = false;
|
||||
checkBox.parentElement.classList.remove('active');
|
||||
|
||||
if (!selectedItems.length) {
|
||||
//selected?.textContent = placeholder;
|
||||
selected!.innerText = placeholder!;
|
||||
}
|
||||
|
||||
// liChip.parentElement.removeChild(liChip);
|
||||
liChip.parentElement!.removeChild(liChip);
|
||||
});
|
||||
|
||||
return liChip;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user