Multiselect in working, but requires refactor!

This commit is contained in:
Макс Овсяников 2022-10-04 21:53:31 +03:00
parent 72066a9c88
commit af54b890a7
2 changed files with 28 additions and 29 deletions

View File

@ -240,29 +240,14 @@ export class DropDown {
const options = this.#element.querySelectorAll('.list__item'); const options = this.#element.querySelectorAll('.list__item');
const selected = this.#element.querySelector('.selected'); const selected = this.#element.querySelector('.selected');
const ul = document.createElement('ul'); // const ul = document.createElement('ul');
// ul.classList.add('multiselectTag');
options.forEach((option, index) => { options.forEach((option, index) => {
option.addEventListener('click', (event) => { option.addEventListener('click', (event) => {
const item = this.#items[index]; const item = this.#items[index];
const li = document.createElement('li');
const btn = document.createElement('button');
const text = document.createTextNode('X');
// let textLi = document.createTextNode(item);
// t.toString();
// console.log(textLi);
btn.appendChild(text);
btn.addEventListener('click', () => {
console.log('aaaa');
ul.removeChild(li);
});
ul.classList.add('multiselectTag');
console.log(ul);
if (multiselect) { if (multiselect) {
event.stopPropagation(); event.stopPropagation();
option.classList.toggle('active'); option.classList.toggle('active');
@ -276,24 +261,26 @@ export class DropDown {
const checkIndex = this.#indexes.indexOf(index); const checkIndex = this.#indexes.indexOf(index);
let templete = '';
if (checkIndex === -1) { if (checkIndex === -1) {
this.#indexes.push(index); this.#indexes.push(index);
if (this.#checkItemStruct(item)) { if (this.#checkItemStruct(item)) {
this.#value.push(item.title); this.#value.push(item.title);
} else { } else {
let textLi = document.createTextNode(item);
li.appendChild(textLi);
li.appendChild(btn);
ul.appendChild(li);
this.#value.push(item); this.#value.push(item);
} }
// selected.innerText = this.#value; //TODO refactoring code!!!!
if (multiselectTag) {
for (let i = 0; i < this.#value.length; i++) {
templete += `<li>${this.#value[i]}<button>X</button></li>`;
}
selected.innerText = ''; selected.innerHTML = `<ul class="multiselectTag">${templete}</ul>`;
selected.appendChild(ul); } else {
selected.innerText = this.#value;
}
return; return;
} }
@ -301,10 +288,22 @@ export class DropDown {
this.#indexes.splice(checkIndex, 1); this.#indexes.splice(checkIndex, 1);
this.#value.splice(checkIndex, 1); this.#value.splice(checkIndex, 1);
if (multiselectTag) {
for (let i = 0; i < this.#value.length; i++) {
templete += `<li>${this.#value[i]} <button>X</button></li>`;
}
selected.innerHTML = `<ul class="multiselectTag">${templete}</ul>`;
}
if (!this.#value.length) { if (!this.#value.length) {
selected.innerText = placeholder; selected.innerText = placeholder;
} else { } else {
selected.innerText = this.#value; if (multiselectTag) {
selected.innerHTML = `<ul class="multiselectTag">${templete}</ul>`;
} else {
selected.innerText = this.#value;
}
} }
} }
} else { } else {

View File

@ -45,10 +45,10 @@ const dropdown2 = new DropDown({
}); });
setTimeout(() => { setTimeout(() => {
console.log(dropdown2.value); console.log(dropdown.value);
}, 10000); }, 10000);
setTimeout(() => { setTimeout(() => {
console.log(dropdown2.indexes); console.log(dropdown.indexes);
}, 10000); }, 10000);
//ToDo: paste the desired url; //ToDo: paste the desired url;