Categories list bed working(

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,8 +152,21 @@ export class DropDown {
         };
       }
 
+      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);
+      }
+    });
   }
 
   #initSelected(select) {
@@ -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}`);
 
+        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);
+
+        // 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');

src/index.html

@@ -17,10 +17,10 @@
 
       <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
     </div>
-    <div class="buttonControlBox">
+    <!-- <div class="buttonControlBox">
       <button class="buttonControl button__open">Open</button>
       <button class="buttonControl button__close">Close</button>
-    </div>
+    </div> -->
   </body>
   <script type="module" src="index.js"></script>
 </html>

src/index.js

@@ -1,87 +1,91 @@
 import { DropDown } from './cg-dropdown';
 
-const dropdown = new DropDown({
+// const dropdown = new DropDown({
-  selector: '.cg-dropdown_one',
+//   selector: '.cg-dropdown_one',
-  placeholder: 'Выберите авто',
+//   placeholder: 'Выберите авто',
-  items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
+//   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
 
-  multiselect: true,
+//   multiselect: true,
-  multiselectTag: true,
-});
-
-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,
-    },
-  ],
-
-  multiselect: true,
-  event: 'mouseenter',
 //   multiselectTag: true,
-});
+// });
 
-dropdown.disabled(false);
+// dropdown.addItem('ZAZ');
+// dropdown.addItem('LADA');
+// dropdown.addItem('Kamaz 258');
+// dropdown.addItem('BMW');
 
-dropdown2.addItem('LADA');
+// 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,
+//     },
+//   ],
 
-//ToDo: paste the desired url;
+//   multiselect: true,
+//   event: 'mouseenter',
+//   // multiselectTag: true,
+// });
 
-const dropdown3 = new DropDown({
+// dropdown.disabled(false);
-  selector: '.cg-dropdown_three',
+
-  placeholder: 'URL',
+// dropdown2.addItem('LADA');
-  url: 'http://jsonplaceholder.typicode.com/users',
+
-  styles: {
+// //ToDo: paste the desired url;
-    head: {
+
-      background: 'black',
+// const dropdown3 = new DropDown({
-      width: '350px',
+//   selector: '.cg-dropdown_three',
-    },
+//   placeholder: 'URL',
-  },
+//   url: 'http://jsonplaceholder.typicode.com/users',
-  multiselect: true,
+//   styles: {
-  multiselectTag: true,
+//     head: {
-});
+//       background: 'black',
+//       width: '350px',
+//     },
+//   },
+//   multiselect: true,
+//   multiselectTag: true,
+// });
 
 const dropdown4 = new DropDown({
   selector: '.cg-dropdown_button',
-  placeholder: 'Выберите авто',
+  placeholder: 'Выберите регион',
-  items: ['Russia', 'USA', 'England', 'Turkey', 'France'],
+  // items: ['Russia', 'USA', 'England', 'Turkey', 'France'],
+  items: [
+    { category: 'Russia', categoryItem: ['Москва', 'Ростов-на-дону'] },
+    { category: 'USA', categoryItem: ['Alabama', 'Texas'] },
+  ],
 
-  multiselect: true,
+  // multiselect: true,
-  multiselectTag: true,
+  // multiselectTag: true,
 });
 // dropdown4.disabled(true);
 
-const buttonOpen = document.querySelector('.button__open');
+// const buttonOpen = document.querySelector('.button__open');
-const buttonClose = document.querySelector('.button__close');
+// const buttonClose = document.querySelector('.button__close');
 
-dropdown4.buttonControl(buttonOpen, 'open');
+// dropdown4.buttonControl(buttonOpen, 'open');
-dropdown4.buttonControl(buttonClose, 'close');
+// dropdown4.buttonControl(buttonClose, 'close');