From c67ddb75cb960e5a535fc7262a2ddee0aeae7021 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Thu, 13 Oct 2022 20:34:34 +0300 Subject: [PATCH] Categories list bed working( --- src/cg-dropdown.js | 64 ++++++++++++++++++-- src/index.html | 4 +- src/index.js | 142 +++++++++++++++++++++++---------------------- 3 files changed, 133 insertions(+), 77 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 52b7952..379e1c8 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -136,6 +136,7 @@ export class DropDown { items.forEach((dataItem, index) => { const random = Math.random().toString(36).substring(2, 10); let item = {}; + let category = ''; if (checkItemStruct(dataItem)) { item = { @@ -151,7 +152,20 @@ export class DropDown { }; } - this.#items.push(item); + if (dataItem.category && dataItem.categoryItem) { + category = dataItem.category; + this.#items.push(category); + dataItem.categoryItem.forEach((i) => { + item = { + id: random, + title: i, + value: index, + }; + this.#items.push(item); + }); + } else { + this.#items.push(item); + } }); } @@ -176,7 +190,7 @@ export class DropDown { } #render(select) { - const { styles, multiselect, event } = this.#options; + const { styles, multiselect } = this.#options; if (select || (select && styles)) { this.#initSelected(select); @@ -200,8 +214,11 @@ export class DropDown { ulList.classList.add('list'); this.#element.appendChild(ulList); + const arr = []; + this.#items.forEach((dataItem) => { const liItem = document.createElement('li'); + const strongItem = document.createElement('strong'); liItem.classList.add('list__item'); @@ -210,15 +227,42 @@ export class DropDown { checkBox.type = 'checkbox'; checkBox.setAttribute('id', `chbox-${dataItem.id}`); - liItem.appendChild(checkBox); + if (checkBox.innerHTML !== '') { + liItem.appendChild(checkBox); + // return; + } else { + liItem.removeChild(checkBox); + } } + let textNode = ''; - let textNode = document.createTextNode(dataItem.title); + if (dataItem.title) { + // console.log('data title', dataItem.title); + textNode = document.createTextNode(dataItem.title); + // console.log(textNode); + liItem.appendChild(textNode); + } else if (!dataItem.title) { + // console.log('aa'); + // debugger; + textNode = document.createTextNode(dataItem); + strongItem.appendChild(textNode); + ulList.appendChild(strongItem); + // let position = this.#items.indexOf(dataItem); + // console.log(position); - liItem.appendChild(textNode); + // this.#items.splice(position, 1); + console.log(this.#items); + } + // console.log(this.#items); ulList.appendChild(liItem); + + if (liItem.innerHTML === '') { + ulList.removeChild(liItem); + } }); + console.log(this.#items); + this.#addOptionsBehaviour(); } @@ -287,6 +331,7 @@ export class DropDown { const options = this.#element.querySelectorAll('.list__item'); const select = this.#element.querySelector('.selected'); + const category = this.#element.querySelector('strong'); const ul = document.createElement('ul'); @@ -295,10 +340,17 @@ export class DropDown { select.classList.add('overflow-hidden'); } + console.log(this.#items); options.forEach((option, index) => { option.addEventListener('click', (event) => { - const item = this.#items[index]; + let item = ''; + if (category) { + item = this.#items[index + 1]; + } else { + item = this.#items[index]; + } + // console.log(item); if (multiselect) { event.stopPropagation(); option.classList.toggle('active'); diff --git a/src/index.html b/src/index.html index 88771e7..03dfd81 100644 --- a/src/index.html +++ b/src/index.html @@ -17,10 +17,10 @@ -
+ diff --git a/src/index.js b/src/index.js index 429954c..9d5e34d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,87 +1,91 @@ import { DropDown } from './cg-dropdown'; -const dropdown = new DropDown({ - selector: '.cg-dropdown_one', - placeholder: 'Выберите авто', - items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], +// const dropdown = new DropDown({ +// selector: '.cg-dropdown_one', +// placeholder: 'Выберите авто', +// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], - multiselect: true, - multiselectTag: true, -}); +// multiselect: true, +// multiselectTag: true, +// }); -dropdown.addItem('ZAZ'); -dropdown.addItem('LADA'); -dropdown.addItem('Kamaz 258'); -dropdown.addItem('BMW'); +// dropdown.addItem('ZAZ'); +// dropdown.addItem('LADA'); +// dropdown.addItem('Kamaz 258'); +// dropdown.addItem('BMW'); -const dropdown2 = new DropDown({ - selector: '.cg-dropdown_two', - placeholder: 'SELECT CAR', - items: [ - { - id: 'addaw21', - title: 'BMW', - value: 1, - }, - { - id: '2414q', - title: 'Opel', - value: 2, - }, - { - id: '24qwds', - title: 'Kamaz 258', - value: 3, - }, - { - id: '28wds', - title: 'MAN', - value: 4, - }, - { - id: '28qwds', - title: 'BOOT', - value: 5, - }, - ], +// const dropdown2 = new DropDown({ +// selector: '.cg-dropdown_two', +// placeholder: 'SELECT CAR', +// items: [ +// { +// id: 'addaw21', +// title: 'BMW', +// value: 1, +// }, +// { +// id: '2414q', +// title: 'Opel', +// value: 2, +// }, +// { +// id: '24qwds', +// title: 'Kamaz 258', +// value: 3, +// }, +// { +// id: '28wds', +// title: 'MAN', +// value: 4, +// }, +// { +// id: '28qwds', +// title: 'BOOT', +// value: 5, +// }, +// ], - multiselect: true, - event: 'mouseenter', - // multiselectTag: true, -}); +// multiselect: true, +// event: 'mouseenter', +// // multiselectTag: true, +// }); -dropdown.disabled(false); +// dropdown.disabled(false); -dropdown2.addItem('LADA'); +// dropdown2.addItem('LADA'); -//ToDo: paste the desired url; +// //ToDo: paste the desired url; -const dropdown3 = new DropDown({ - selector: '.cg-dropdown_three', - placeholder: 'URL', - url: 'http://jsonplaceholder.typicode.com/users', - styles: { - head: { - background: 'black', - width: '350px', - }, - }, - multiselect: true, - multiselectTag: true, -}); +// const dropdown3 = new DropDown({ +// selector: '.cg-dropdown_three', +// placeholder: 'URL', +// url: 'http://jsonplaceholder.typicode.com/users', +// styles: { +// head: { +// background: 'black', +// width: '350px', +// }, +// }, +// multiselect: true, +// multiselectTag: true, +// }); const dropdown4 = new DropDown({ selector: '.cg-dropdown_button', - placeholder: 'Выберите авто', - items: ['Russia', 'USA', 'England', 'Turkey', 'France'], + placeholder: 'Выберите регион', + // items: ['Russia', 'USA', 'England', 'Turkey', 'France'], + items: [ + { category: 'Russia', categoryItem: ['Москва', 'Ростов-на-дону'] }, + { category: 'USA', categoryItem: ['Alabama', 'Texas'] }, + ], - multiselect: true, - multiselectTag: true, + // multiselect: true, + // multiselectTag: true, }); // dropdown4.disabled(true); -const buttonOpen = document.querySelector('.button__open'); -const buttonClose = document.querySelector('.button__close'); +// const buttonOpen = document.querySelector('.button__open'); +// const buttonClose = document.querySelector('.button__close'); -dropdown4.buttonControl(buttonOpen, 'open'); -dropdown4.buttonControl(buttonClose, 'close'); +// dropdown4.buttonControl(buttonOpen, 'open'); +// dropdown4.buttonControl(buttonClose, 'close');