Merge pull request #9 from apuc/add-categories-list

Add categories list

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') {
-      item = {
-        id: item.id,
-        title: item.title,
-        value: item.value,
-      };
-    } else {
-      item = {
-        id: random,
-        title: item,
-        value: index,
-      };
-    }
-
-    this.#items.push(item);
+    this.#items.push(getFormatItem(item, index));
     this.#render();
   }
 
@@ -65,12 +50,14 @@ export class DropDown {
 
   selectIndex(index) {
     const options = this.#element.querySelectorAll('.list__item');
+    // const selected = this.#element.querySelector('.selected');
 
     if (index > options.length) {
       return;
     }
 
     const select = options[index].innerText;
+    // selected.innerText = select;
 
     this.#render(select);
   }
@@ -134,24 +121,18 @@ export class DropDown {
     }
 
     items.forEach((dataItem, index) => {
-      const random = Math.random().toString(36).substring(2, 10);
-      let item = {};
+      let category = '';
 
-      if (checkItemStruct(dataItem)) {
-        item = {
-          id: dataItem.id,
-          title: dataItem.title,
-          value: index,
-        };
+      if (dataItem.category && dataItem.categoryItems) {
+        category = dataItem.category;
+
+        this.#items.push(category);
+        dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
+          this.#items.push(getFormatItem(categoryItem, indexCategory));
+        });
       } else {
-        item = {
-          id: random,
-          title: dataItem,
-          value: index,
-        };
+        this.#items.push(getFormatItem(dataItem, index));
       }
-
-      this.#items.push(item);
     });
   }
 
@@ -176,7 +157,8 @@ export class DropDown {
   }
 
   #render(select) {
-    const { styles, multiselect, event } = this.#options;
+    const { styles, multiselect } = this.#options;
+    // const { category } = this.#items;
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -184,7 +166,6 @@ export class DropDown {
     } else {
       this.#initSelected();
     }
-
     const ulList = document.createElement('ul');
 
     if (styles) {
@@ -198,12 +179,15 @@ export class DropDown {
     }
 
     ulList.classList.add('list');
+
     this.#element.appendChild(ulList);
 
     this.#items.forEach((dataItem) => {
       const liItem = document.createElement('li');
+      const strongItem = document.createElement('strong');
 
       liItem.classList.add('list__item');
+      strongItem.classList.add('category');
 
       if (multiselect) {
         const checkBox = document.createElement('input');
@@ -213,10 +197,24 @@ export class DropDown {
         liItem.appendChild(checkBox);
       }
 
-      let textNode = document.createTextNode(dataItem.title);
+      let textNode = '';
 
+      if (dataItem.title) {
+        textNode = document.createTextNode(dataItem.title);
         liItem.appendChild(textNode);
         ulList.appendChild(liItem);
+      } else {
+        textNode = document.createTextNode(dataItem);
+        strongItem.appendChild(textNode);
+        ulList.appendChild(strongItem);
+      }
+    });
+
+    this.#items.filter((item, index) => {
+      if (typeof item !== 'object') {
+        this.#items.splice(index, 1);
+      }
+      return item;
     });
 
     this.#addOptionsBehaviour();
@@ -287,6 +285,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');
 
@@ -298,7 +297,6 @@ export class DropDown {
     options.forEach((option, index) => {
       option.addEventListener('click', (event) => {
         const item = this.#items[index];
-
         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.html

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

src/index.js

@@ -1,61 +1,15 @@
 import { DropDown } from './cg-dropdown';
 
+// ------------------------------Обычный селект--------------------
 const dropdown = new DropDown({
   selector: '.cg-dropdown_one',
   placeholder: 'Выберите авто',
   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
-
   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);
-
-dropdown2.addItem('LADA');
-
-//ToDo: paste the desired url;
-
+// ------------------------------URL--------------------
 const dropdown3 = new DropDown({
   selector: '.cg-dropdown_three',
   placeholder: 'URL',
@@ -70,18 +24,44 @@ const dropdown3 = new DropDown({
   multiselectTag: true,
 });
 
+// --------------------------------Категории--------------------------
 const dropdown4 = new DropDown({
   selector: '.cg-dropdown_button',
-  placeholder: 'Выберите авто',
-  items: ['Russia', 'USA', 'England', 'Turkey', 'France'],
+  placeholder: 'Выберите регион',
+  items: [
+    {
+      category: 'Russia',
+      categoryItems: [
+        {
+          id: '28qwds',
+          title: 'Москва',
+          value: 0,
+        },
+        ,
+        'Ростов-на-дону',
+        'Саратов',
+        'Волгоград',
+        'Донецк',
+      ],
+    },
+    {
+      category: 'USA',
+      categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
+    },
+    {
+      category: 'France',
+      categoryItems: ['Paris'],
+    },
+  ],
 
   multiselect: true,
   multiselectTag: true,
 });
-// dropdown4.disabled(true);
 
-const buttonOpen = document.querySelector('.button__open');
+//----------------управление с помощью кнопок----------------------------------
+/* const buttonOpen = document.querySelector('.button__open');
  const buttonClose = document.querySelector('.button__close');
 
  dropdown4.buttonControl(buttonOpen, 'open');
  dropdown4.buttonControl(buttonClose, 'close'); 
+ */

src/style/main.scss

@@ -16,11 +16,7 @@ body {
   width: 900px;
 }
 
-.content {
-  border: 1px solid #616161;
-  height: 500px;
-}
-
+// ----Layout----
 .cg-dropdown {
   min-width: 235px;
   margin-left: 0;
@@ -59,12 +55,6 @@ body {
   }
 }
 
-.overflow-hidden {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .caret {
   width: 0;
   height: 0;
@@ -146,11 +136,22 @@ body {
   }
 }
 
+.category {
+  height: 20px;
+  margin: 6px 5px 0 7px;
+  font-size: 17px;
+  border-bottom: 1px solid;
+
+  display: flex;
+  align-items: center;
+}
+
 input[type='checkbox'] {
   cursor: pointer;
   margin: 0 5px 0 0;
 }
 
+// --------SVG--------
 .svg-icon {
   width: 16px;
   margin-left: 3px;
@@ -164,6 +165,7 @@ input[type='checkbox'] {
     background-color: #ffffff;
   }
 }
+
 .svg-icon path {
   color: black;
   stroke: currentcolor;
@@ -171,6 +173,7 @@ input[type='checkbox'] {
   stroke-width: 0.5;
 }
 
+//-------Behavior--------
 .active {
   background: #8282822c;
 }
@@ -179,8 +182,23 @@ input[type='checkbox'] {
   transition: 0.5s;
   display: block;
   opacity: 1;
+
+  &_none {
+    opacity: 0 !important;
+  }
 }
 
+.disabled {
+  background-color: #8f9195 !important;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ------SCROLLBAR------
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -192,12 +210,3 @@ input[type='checkbox'] {
 ::-webkit-scrollbar-thumb {
   background-color: #4d4d4d;
 }
-
-.disabled {
-  background-color: #8f9195 !important;
-}
-
-.buttonControlBox {
-  margin: -25px auto 0 auto;
-  width: 300px;
-}