diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index be9ad98..914c878 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -105,7 +105,7 @@ export class DropDown { } #render(select) { - const { items, styles, url } = this.#options; + const { items, styles, url, multiselect } = this.#options; if (select || (select && styles)) { this.#initSelected(select); @@ -122,42 +122,51 @@ export class DropDown { ul.classList.add('list'); - if (ul) { - if (list) { - Object.entries(list).forEach(([key, value]) => { - ul.style[key] = value; - }); - } + if (ul && list) { + Object.entries(list).forEach(([key, value]) => { + ul.style[key] = value; + }); } + this.#element.appendChild(ul); } else { ul.classList.add('list'); this.#element.appendChild(ul); } - if (!items) { - if (url) { - this.#renderUrl(); - } - } else { - items.map((item) => { - let li = document.createElement('li'); - - if (typeof item == 'object') { - const text = document.createTextNode(item.title); - - li.classList.add('list__item'); - li.appendChild(text); - } else { - const text = document.createTextNode(item); - - li.classList.add('list__item'); - li.appendChild(text); - } - - ul.appendChild(li); - }); + if (!items && url) { + this.#renderUrl(); + return; } + + items.forEach((item) => { + const li = document.createElement('li'); + let text = ''; + + li.classList.add('list__item'); + + if (item && typeof item === 'object' && item.title) { + text = item.title; + } else { + text = item; + } + + if (multiselect) { + const checkBox = document.createElement('input'); + + checkBox.type = 'checkbox'; + checkBox.addEventListener('click', (event) => { + event.stopPropagation(); + }); + + li.appendChild(checkBox); + } + + let textNode = document.createTextNode(text); + + li.appendChild(textNode); + ul.appendChild(li); + }); } async #renderUrl() { @@ -172,7 +181,6 @@ export class DropDown { } const response = await fetch(url); - const data = await response.json(); //ToDO: fix title(item.title!) @@ -182,11 +190,10 @@ export class DropDown { title: item.name, value: index, }; - const ul = this.#element.querySelector('.list'); - const li = document.createElement('li'); const text = document.createTextNode(items.title); + li.classList.add('list__item'); li.appendChild(text); ul.appendChild(li); @@ -207,17 +214,30 @@ export class DropDown { } #selectItem() { + const { multiselect } = this.#options; + const options = this.#element.querySelectorAll('.list__item'); const selected = this.#element.querySelector('.selected'); options.forEach((option) => { - option.addEventListener('click', () => { - selected.innerText = option.innerText; + option.addEventListener('click', (event) => { + if (multiselect) { + event.stopPropagation(); + option.classList.toggle('active'); - options.forEach((option) => { - option.classList.remove('active'); - }); - option.classList.add('active'); + const checkBox = option.querySelector('input[type="checkbox"]'); + + if (checkBox) { + checkBox.checked = !checkBox.checked; + } + } else { + selected.innerText = option.innerText; + options.forEach((option) => { + option.classList.remove('active'); + }); + option.classList.add('active'); + // this.getValue(); + } }); }); } @@ -296,4 +316,11 @@ export class DropDown { `; } } + + // getValue() { + // const selected = this.#element.querySelector('.selected'); + // const value = selected.innerText; + // console.log(value); + // return value; + // } } diff --git a/src/index.html b/src/index.html index 2856148..b0acd6d 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,7 @@
-
+
diff --git a/src/index.js b/src/index.js index f8ef3e8..9a8edcd 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,7 @@ const dropdown = new DropDown({ selector: '.cg-dropdown', placeholder: 'Выберите авто', items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], + multiselect: true, }); dropdown.addItem('ZAZ'); @@ -11,32 +12,13 @@ dropdown.addItem('LADA'); const dropdown2 = new DropDown({ selector: '.cg-dropdown2', - placeholder: 'Выберите авто', + placeholder: 'SELECT CAR', items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], - event: 'mouseenter', - styles: { - head: { - background: 'red', - color: 'black', - width: '400px', - }, - placeholder: { - color: 'grey', - }, - caret: { - 'border-top': '6px solid black', - }, - list: { - background: 'red', - color: 'black', - width: '412px', - }, - }, }); - -dropdown2.addItem('LADA'); - +// let a = dropdown2.getValue(); +// console.log(a); //ToDo: paste the desired url; + const dropdown3 = new DropDown({ selector: '.cg-dropdown3', placeholder: 'URL', diff --git a/src/style/main.scss b/src/style/main.scss index 634b0bc..3bdca06 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -105,3 +105,16 @@ body { ::-webkit-scrollbar-thumb { background-color: #4d4d4d; } + +.multiselect { + height: 20px; + + display: flex; + align-items: center; + + li { + color: red; + border: 1px solid #4d4d4d; + } + z-index: 999; +}