diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 218317e..e5527eb 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -5,17 +5,14 @@ export class DropDown { #caret; #items; #value; + #indexes = []; get value() { - const { multiselect } = this.#options; + return this.#value ?? null; + } - if (multiselect) { - return this.#items.filter((item, index) => { - return this.#value.indexOf(index) !== -1; - }); - } - - return this.#value; + get indexes() { + return this.#indexes ?? []; } constructor(options = {}) { @@ -66,7 +63,6 @@ export class DropDown { this.#element = elem; this.#element.addEventListener('click', () => { - this.#selectItem(); this.#open(); }); @@ -153,6 +149,7 @@ export class DropDown { if (!items && url) { this.#renderUrl(); + return; } @@ -170,12 +167,7 @@ export class DropDown { if (multiselect) { const checkBox = document.createElement('input'); - checkBox.type = 'checkbox'; - checkBox.addEventListener('click', (event) => { - event.stopPropagation(); - }); - li.appendChild(checkBox); } @@ -184,6 +176,8 @@ export class DropDown { li.appendChild(textNode); ul.appendChild(li); }); + + this.#addOptionsBehaviour(); } async #renderUrl() { @@ -201,20 +195,26 @@ export class DropDown { const data = await response.json(); //ToDO: fix title(item.title!) - data.forEach((item, index) => { - const items = { - id: item.id, - title: item.name, + this.#items = []; + + data.forEach((dataItem, index) => { + const item = { + id: dataItem.id, + title: dataItem.name, value: index, }; const ul = this.#element.querySelector('.list'); const li = document.createElement('li'); - const text = document.createTextNode(items.title); + const text = document.createTextNode(item.title); li.classList.add('list__item'); li.appendChild(text); ul.appendChild(li); + + this.#items.push(item); }); + + this.#addOptionsBehaviour(); } #open() { @@ -230,8 +230,8 @@ export class DropDown { this.#caret.classList.remove('caret_rotate'); } - #selectItem() { - const { multiselect } = this.#options; + #addOptionsBehaviour() { + const { multiselect, placeholder } = this.#options; const options = this.#element.querySelectorAll('.list__item'); const selected = this.#element.querySelector('.selected'); @@ -247,13 +247,26 @@ export class DropDown { const checkBox = option.querySelector('input[type="checkbox"]'); if (checkBox) { - checkBox.checked = !checkBox.checked; + if (!(event.target instanceof HTMLInputElement)) { + checkBox.checked = !checkBox.checked; + } - const indexValue = this.#value.indexOf(index); - if (indexValue === -1) { - this.#value.push(index); + const checkIndex = this.#indexes.indexOf(index); + + if (checkIndex === -1) { + this.#indexes.push(index); + this.#value.push(item); + selected.innerText = this.#value; + return; + } + + this.#indexes.splice(checkIndex, 1); + this.#value.splice(checkIndex, 1); + + if (!this.#value.length) { + selected.innerText = placeholder; } else { - this.#value.splice(indexValue, 1); + selected.innerText = this.#value; } } } else { diff --git a/src/index.js b/src/index.js index 0ffb454..90c61ed 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,8 @@ const dropdown = new DropDown({ placeholder: 'Выберите авто', items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], multiselect: true, + itemSelected: (item, index) => {}, + itemRemoved: (item, index) => {}, }); dropdown.addItem('ZAZ'); @@ -35,6 +37,9 @@ const dropdown2 = new DropDown({ setTimeout(() => { console.log(dropdown.value); }, 10000); +setTimeout(() => { + console.log(dropdown.indexes); +}, 10000); // let a = dropdown2.getValue(); // console.log(a); //ToDo: paste the desired url; diff --git a/src/style/main.scss b/src/style/main.scss index 3bdca06..530fade 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -118,3 +118,7 @@ body { } z-index: 999; } + +input[type='checkbox'] { + cursor: pointer; +}