Categories in working!

src/cg-dropdown.js

@@ -1,4 +1,4 @@
-import { customStyles, createSelected, checkItemStruct } from './components/utils';
+import { customStyles, createSelected, getFormatItem } from './components/utils';
 import { createBreadcrumb } from './components/create-element';
 
 export class DropDown {
@@ -29,24 +29,9 @@ export class DropDown {
       return false;
     }
 
-    const random = Math.random().toString(36).substring(2, 10);
     const index = this.#items.length;
 
-    if (typeof item === 'object') {
+    this.#items.push(getFormatItem(item, index));
-      item = {
-        id: item.id,
-        title: item.title,
-        value: item.value,
-      };
-    } else {
-      item = {
-        id: random,
-        title: item,
-        value: index,
-      };
-    }
-
-    this.#items.push(item);
     this.#render();
   }
 
@@ -134,37 +119,17 @@ export class DropDown {
     }
 
     items.forEach((dataItem, index) => {
-      const random = Math.random().toString(36).substring(2, 10);
-      let item = {};
       let category = '';
 
-      if (checkItemStruct(dataItem)) {
+      if (dataItem.category && dataItem.categoryItems) {
-        item = {
-          id: dataItem.id,
-          title: dataItem.title,
-          value: index,
-        };
-      } else {
-        item = {
-          id: random,
-          title: dataItem,
-          value: index,
-        };
-      }
-
-      if (dataItem.category && dataItem.categoryItem) {
         category = dataItem.category;
+
         this.#items.push(category);
-        dataItem.categoryItem.forEach((i) => {
+        dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
-          item = {
+          this.#items.push(getFormatItem(categoryItem, indexCategory));
-            id: random,
-            title: i,
-            value: index,
-          };
-          this.#items.push(item);
         });
       } else {
-        this.#items.push(item);
+        this.#items.push(getFormatItem(dataItem, index));
       }
     });
   }
@@ -191,6 +156,7 @@ export class DropDown {
 
   #render(select) {
     const { styles, multiselect } = this.#options;
+    // const { category } = this.#items;
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -214,8 +180,6 @@ 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');
@@ -227,41 +191,28 @@ export class DropDown {
         checkBox.type = 'checkbox';
         checkBox.setAttribute('id', `chbox-${dataItem.id}`);
 
-        if (checkBox.innerHTML !== '') {
+        liItem.appendChild(checkBox);
-          liItem.appendChild(checkBox);
-          // return;
-        } else {
-          liItem.removeChild(checkBox);
-        }
       }
+
       let textNode = '';
 
       if (dataItem.title) {
-        // console.log('data title', dataItem.title);
         textNode = document.createTextNode(dataItem.title);
-        // console.log(textNode);
         liItem.appendChild(textNode);
-      } else if (!dataItem.title) {
+        ulList.appendChild(liItem);
-        // console.log('aa');
+      } else {
-        // 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.#items.filter((item, index) => {
+      if (typeof item !== 'object') {
+        this.#items.splice(index, 1);
+      }
+      return item;
+    });
 
     this.#addOptionsBehaviour();
   }
@@ -340,17 +291,9 @@ export class DropDown {
       select.classList.add('overflow-hidden');
     }
 
-    console.log(this.#items);
     options.forEach((option, index) => {
       option.addEventListener('click', (event) => {
-        let item = '';
+        const item = this.#items[index];
-        if (category) {
-          item = this.#items[index + 1];
-        } else {
-          item = this.#items[index];
-        }
-
-        // console.log(item);
         if (multiselect) {
           event.stopPropagation();
           option.classList.toggle('active');

src/components/utils.js

@@ -59,3 +59,24 @@ export function checkItemStruct(item) {
 
   return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
 }
+
+export function getFormatItem(dataItem, index) {
+  const random = Math.random().toString(36).substring(2, 10);
+  let item = {};
+
+  if (checkItemStruct(dataItem)) {
+    item = {
+      id: dataItem.id,
+      title: dataItem.title,
+      value: index,
+    };
+  } else {
+    item = {
+      id: random,
+      title: dataItem,
+      value: index,
+    };
+  }
+
+  return item;
+}

src/index.js

@@ -9,46 +9,45 @@ import { DropDown } from './cg-dropdown';
 //   multiselectTag: true,
 // });
 
-// dropdown.addItem('ZAZ');
+// // dropdown.addItem('ZAZ');
 // dropdown.addItem('LADA');
 // dropdown.addItem('Kamaz 258');
-// dropdown.addItem('BMW');
+// // 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({
+// //   multiselect: true,
-//   selector: '.cg-dropdown_two',
+// //   event: 'mouseenter',
-//   placeholder: 'SELECT CAR',
+// //   // multiselectTag: true,
-//   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);
 
@@ -73,15 +72,38 @@ import { DropDown } from './cg-dropdown';
 const dropdown4 = new DropDown({
   selector: '.cg-dropdown_button',
   placeholder: 'Выберите регион',
-  // items: ['Russia', 'USA', 'England', 'Turkey', 'France'],
   items: [
-    { category: 'Russia', categoryItem: ['Москва', 'Ростов-на-дону'] },
+    {
-    { category: 'USA', categoryItem: ['Alabama', 'Texas'] },
+      category: 'Russia',
+      categoryItems: [
+        {
+          id: '28qwds',
+          title: 'Москва',
+          value: 0,
+        },
+        ,
+        'Ростов-на-дону',
+        'Саратов',
+        'Волгоград',
+        'Донецк',
+      ],
+    },
+    {
+      category: 'USA',
+      categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
+    },
+    {
+      category: 'France',
+      categoryItems: ['Paris'],
+    },
   ],
 
-  // multiselect: true,
+  multiselect: true,
-  // multiselectTag: true,
+  multiselectTag: true,
 });
+// dropdown4.selectIndex(5);
+
+// dropdown4.addItem('Харьков');
 // dropdown4.disabled(true);
 
 // const buttonOpen = document.querySelector('.button__open');