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

MultiTag in Working! Fixed bugs

Browse Source
This commit is contained in:
MaxOvs 2023-01-09 17:57:56 +03:00
parent 482bd59756
commit 2ed0e306e5
4 changed files with 57 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/indexTs.ts
View File

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

97
src/cg-selectTS.ts
View File

@ -1,8 +1,12 @@
import { ICreateBreadCrumb } from './components/create-element/create-element.interface';
import { import {
CreateBreadCrumb,
createNativeSelect, createNativeSelect,
createNativeSelectOption, createNativeSelectOption,
} from './components/create-element/create-elementTs'; } from './components/create-element/create-elementTs';
import { IDataItem, ITextSelect } from './components/utils/urils.interface'; import { IDataItem, ITextSelect } from './components/utils/urils.interface';
import { import {
createSelected, createSelected,
getFormatItem, getFormatItem,
@ -10,6 +14,7 @@ import {
nativeOptionMultiple, nativeOptionMultiple,
nativeOptionOrdinary, nativeOptionOrdinary,
} from './components/utils/utilsTs'; } from './components/utils/utilsTs';
import { ICgSelect } from './interfaces/cg-select.interface'; import { ICgSelect } from './interfaces/cg-select.interface';
import { IItems } from './interfaces/items.interface'; import { IItems } from './interfaces/items.interface';
import './main.scss'; import './main.scss';
@ -320,22 +325,50 @@ export class CGSelect implements ICgSelect {
nativeOptionMultiple(nativeOption, item.title, true); nativeOptionMultiple(nativeOption, item.title, true);
select!.textContent = ''; select!.textContent = '';
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)) { if (Array.isArray(this.selectedItems)) {
this.selectedItems.push(item.title); this.selectedItems.push(item.title);
select!.innerText = this.selectedItems.join(','); select!.innerText = this.selectedItems.join(',');
} }
}
} else { } else {
this.indexes.splice(checkIndex, 1); if (multiselectTag) {
nativeOptionMultiple(nativeOption, item.title, false); const tagItem = document.getElementById(`tag-${index}-${item.id}`);
ulMultipul.removeChild<Element>(tagItem!);
}
if (Array.isArray(this.selectedItems)) { if (Array.isArray(this.selectedItems)) {
this.selectedItems.splice(checkIndex, 1); 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); getSelectText(placeholderTextSelect, select);
} else {
if (multiselectTag) {
select!.appendChild(ulMultipul);
} else {
if (Array.isArray(this.selectedItems)) {
select!.innerText = this.selectedItems.join(',');
}
}
} }
} }
} else { } else {
@ -349,62 +382,6 @@ export class CGSelect implements ICgSelect {
}); });
option.classList.add('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;
// }
// }
// }
}); });
}); });
} }

2
src/components/create-element/create-element.interface.ts
View File

@ -1,6 +1,6 @@
import { ICgSelect } from '../../interfaces/cg-select.interface'; import { ICgSelect } from '../../interfaces/cg-select.interface';
export interface IcreateBreadCrumb { export interface ICreateBreadCrumb {
element: Element | null; element: Element | null;
option: ICgSelect; option: ICgSelect;
indexes: number[]; indexes: number[];

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

@ -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 * Метод который создает и отвечает за поведение chips
* @param {object} data объект в котором содержатся настройки и элементы селекта * @param {ICreateBreadCrumb} data объект в котором содержатся настройки и элементы селекта
* @param {string} title имя выбранного элемента для отрисовки chips * @param {string} title имя выбранного элемента для отрисовки chips
* @param {number} index индекс выбранного элемента для отрисовки chips * @param {number} index индекс выбранного элемента для отрисовки chips
* @param {string} id уникальное id выбранного элемента * @param {string} id уникальное id выбранного элемента
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item * @returns {HTMLElement} возвращает сформированный HTMLElement chips item
*/ */
export function createBreadcrumb( export function CreateBreadCrumb(
data: IcreateBreadCrumb, data: ICreateBreadCrumb,
title: string, title: string,
index: number, index: number,
id: string, id: string,
) { ): HTMLLIElement {
const { element, option, indexes, selectedItems } = data; const { element, option, indexes, selectedItems } = data;
const { placeholder, styles } = option; const { placeholder, styles } = option;
const selected = element!.querySelector('.selected'); const selected: HTMLElement | null | undefined = element?.querySelector('.selected');
const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption'); const nativeOption = element!.querySelectorAll('.nativeSelect__nativeOption');
const liChip = document.createElement('li'); const liChip = document.createElement('li');
@ -69,28 +70,28 @@ export function createBreadcrumb(
svgIcon.addEventListener('click', (event) => { svgIcon.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
// nativeOptionMultiple(nativeOption, title, false); nativeOptionMultiple(nativeOption, title, false);
const deleteIcon = indexes.indexOf(index); const deleteIcon = indexes.indexOf(index);
let checkBox = ''; let checkBox: any;
indexes.splice(deleteIcon, 1); indexes.splice(deleteIcon, 1);
selectedItems.splice(deleteIcon, 1); selectedItems.splice(deleteIcon, 1);
if (id) { if (id) {
// checkBox = document.getElementById(`chbox-${id}`); checkBox = document.getElementById(`chbox-${id}`);
} else { } else {
// checkBox = document.getElementById(`chbox-${index}`); checkBox = document.getElementById(`chbox-${index}`);
} }
// checkBox.checked = false; checkBox.checked = false;
// checkBox.parentElement.classList.remove('active'); checkBox.parentElement.classList.remove('active');
if (!selectedItems.length) { if (!selectedItems.length) {
//selected?.textContent = placeholder; selected!.innerText = placeholder!;
} }
// liChip.parentElement.removeChild(liChip); liChip.parentElement!.removeChild(liChip);
}); });
return liChip; return liChip;