diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index f52cc39..e377162 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -25,6 +25,27 @@ export class DropDown { } addItem(item) { + if (!item) { + return false; + } + + const random = Math.random().toString(36).substring(2, 10); + const index = this.#items.length; + + if (typeof item === 'object') { + item = { + id: item.id, + title: item.title, + value: item.value, + }; + } else { + item = { + id: random, + title: item, + value: index, + }; + } + this.#items.push(item); this.#render(); } @@ -71,12 +92,38 @@ export class DropDown { this.#list = this.#element.querySelector('.list'); this.#caret = this.#element.querySelector('.caret'); - const { items, multiselect } = this.#options; - this.#items = items; + const { items, multiselect, url } = this.#options; + this.#items = []; if (multiselect) { this.#selectedItems = []; } + + if (!items && url) { + this.#renderUrl(); + return; + } + + items.forEach((dataItem, index) => { + const random = Math.random().toString(36).substring(2, 10); + let item = {}; + + if (this.#checkItemStruct(dataItem)) { + item = { + id: dataItem.id, + title: dataItem.title, + value: index, + }; + } else { + item = { + id: random, + title: dataItem, + value: index, + }; + } + + this.#items.push(item); + }); } #initSelected(select) { @@ -137,44 +184,30 @@ export class DropDown { if (!items && url) { this.#renderUrl(); - return; } - items.forEach((item, index) => { + this.#items.forEach((dataItem) => { const li = document.createElement('li'); - let text = ''; - let id = ''; li.classList.add('list__item'); - if (this.#checkItemStruct(item)) { - text = item.title; - id = item.id; - } else { - text = item; - } - if (multiselect) { const checkBox = document.createElement('input'); checkBox.type = 'checkbox'; if (multiselectTag) { - if (this.#checkItemStruct(item)) { - checkBox.setAttribute('id', `chbox-${item.id}`); - } else { - checkBox.setAttribute('id', `chbox-${index}`); - } + checkBox.setAttribute('id', `chbox-${dataItem.id}`); } - li.appendChild(checkBox); } - let textNode = document.createTextNode(text); + let textNode = document.createTextNode(dataItem.title); li.appendChild(textNode); ul.appendChild(li); }); + console.log(this.#items); this.#addOptionsBehaviour(); } @@ -192,8 +225,7 @@ export class DropDown { const response = await fetch(url); const data = await response.json(); - - this.#items = []; + console.log(response); data.forEach((dataItem, index) => { const item = { diff --git a/src/index.js b/src/index.js index c4d68f1..fb786a9 100644 --- a/src/index.js +++ b/src/index.js @@ -15,7 +15,8 @@ const dropdown = new DropDown({ dropdown.addItem('ZAZ'); dropdown.addItem('LADA'); -// dropdown.addItem('BMW'); +dropdown.addItem('Kamaz 258'); +dropdown.addItem('BMW'); const dropdown2 = new DropDown({ selector: '.cg-dropdown2', @@ -24,34 +25,36 @@ const dropdown2 = new DropDown({ { id: 'addaw21', title: 'BMW', - value: '1', + value: 1, }, { id: '2414q', title: 'Opel', - value: '2', + value: 2, }, { id: '24qwds', title: 'Kamaz 258', - value: '3', + value: 3, }, { id: '28wds', title: 'MAN', - value: '4', + value: 4, }, { id: '28qwds', title: 'BOOT', - value: '5', + value: 5, }, ], multiselect: true, - multiselectTag: true, + // multiselectTag: true, }); +dropdown2.addItem('LADA'); + //ToDo: paste the desired url; const dropdown3 = new DropDown({