diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 914c878..218317e 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -4,6 +4,19 @@ export class DropDown { #options; #caret; #items; + #value; + + get value() { + const { multiselect } = this.#options; + + if (multiselect) { + return this.#items.filter((item, index) => { + return this.#value.indexOf(index) !== -1; + }); + } + + return this.#value; + } constructor(options = {}) { this.#init(options); @@ -60,8 +73,12 @@ export class DropDown { this.#list = this.#element.querySelector('.list'); this.#caret = this.#element.querySelector('.caret'); - const { items } = this.#options; + const { items, multiselect } = this.#options; this.#items = items; + + if (multiselect) { + this.#value = []; + } } #initSelected(select) { @@ -145,7 +162,7 @@ export class DropDown { li.classList.add('list__item'); - if (item && typeof item === 'object' && item.title) { + if (this.#checkItemStruct(item)) { text = item.title; } else { text = item; @@ -219,8 +236,10 @@ export class DropDown { const options = this.#element.querySelectorAll('.list__item'); const selected = this.#element.querySelector('.selected'); - options.forEach((option) => { + options.forEach((option, index) => { option.addEventListener('click', (event) => { + const item = this.#items[index]; + if (multiselect) { event.stopPropagation(); option.classList.toggle('active'); @@ -229,14 +248,27 @@ export class DropDown { if (checkBox) { checkBox.checked = !checkBox.checked; + + const indexValue = this.#value.indexOf(index); + if (indexValue === -1) { + this.#value.push(index); + } else { + this.#value.splice(indexValue, 1); + } } } else { - selected.innerText = option.innerText; + if (this.#checkItemStruct(item)) { + selected.innerText = item.title; + } else { + selected.innerText = item; + } + + this.#value = item; + options.forEach((option) => { option.classList.remove('active'); }); option.classList.add('active'); - // this.getValue(); } }); }); @@ -317,10 +349,13 @@ export class DropDown { } } - // getValue() { - // const selected = this.#element.querySelector('.selected'); - // const value = selected.innerText; - // console.log(value); - // return value; - // } + #checkItemStruct(item) { + if (item && typeof item !== 'object') { + return false; + } + + return ( + item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value') + ); + } } diff --git a/src/index.js b/src/index.js index 9a8edcd..0ffb454 100644 --- a/src/index.js +++ b/src/index.js @@ -13,8 +13,28 @@ dropdown.addItem('LADA'); const dropdown2 = new DropDown({ selector: '.cg-dropdown2', placeholder: 'SELECT CAR', - items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], + items: [ + { + id: 'addaw21', + title: 'BMW', + value: '1', + }, + { + id: '2414q', + title: 'Opel', + value: '2', + }, + { + id: '24qwds', + title: 'Kamaz', + value: '3', + }, + ], }); + +setTimeout(() => { + console.log(dropdown.value); +}, 10000); // let a = dropdown2.getValue(); // console.log(a); //ToDo: paste the desired url;