Refactoring core, and added styles in chips

src/cg-dropdown.js

@@ -1,4 +1,9 @@
-import { customStyles, createSelected, getFormatItem } from './components/utils';
+import {
+  customStyles,
+  createSelected,
+  getFormatItem,
+  customStylesFormat,
+} from './components/utils';
 import { createBreadcrumb } from './components/create-element';
 
 export class DropDown {
@@ -7,6 +12,7 @@ export class DropDown {
   #options;
   #caret;
   #items;
+  #category;
   #selectedItems;
   #indexes = [];
 
@@ -25,6 +31,11 @@ export class DropDown {
   }
 
   addItem(item) {
+    if (this.#category) {
+      console.log('can`t add item to category');
+      return;
+    }
+
     if (!item) {
       return false;
     }
@@ -35,11 +46,15 @@ export class DropDown {
     this.#render();
   }
 
-  deleteItem(item) {
+  deleteItem(index) {
-    let index = this.#items.indexOf(item);
+    if (this.#category) {
+      console.log('can`t add item to category');
+      return;
+    }
+
+    const item = this.#items[index];
 
     this.#items.splice(index, 1);
-
     this.#render();
   }
 
@@ -49,16 +64,18 @@ export class DropDown {
   }
 
   selectIndex(index) {
+    if (this.#category) {
+      console.log('can`t add item to category');
+      return;
+    }
+
     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);
   }
 
@@ -121,12 +138,10 @@ export class DropDown {
     }
 
     items.forEach((dataItem, index) => {
-      let category = '';
-
       if (dataItem.category && dataItem.categoryItems) {
-        category = dataItem.category;
+        this.#category = dataItem.category;
 
-        this.#items.push(category);
+        this.#items.push(this.#category);
         dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
           this.#items.push(getFormatItem(categoryItem, indexCategory));
         });
@@ -158,7 +173,6 @@ export class DropDown {
 
   #render(select) {
     const { styles, multiselect } = this.#options;
-    // const { category } = this.#items;
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -166,20 +180,16 @@ export class DropDown {
     } else {
       this.#initSelected();
     }
+
     const ulList = document.createElement('ul');
 
+    ulList.classList.add('list');
+
     if (styles) {
       const { list } = styles;
-
+      customStylesFormat(list, ulList);
-      if (ulList && list) {
-        Object.entries(list).forEach(([key, value]) => {
-          ulList.style[key] = value;
-        });
-      }
     }
 
-    ulList.classList.add('list');
-
     this.#element.appendChild(ulList);
 
     this.#items.forEach((dataItem) => {
@@ -253,12 +263,20 @@ export class DropDown {
       }
 
       liUrl.classList.add('list__item');
+
       liUrl.appendChild(textUrl);
       ulUrl.appendChild(liUrl);
 
       this.#items.push(item);
     });
 
+    this.#items.filter((item, index) => {
+      if (typeof item !== 'object') {
+        this.#items.splice(index, 1);
+      }
+      return item;
+    });
+
     this.#addOptionsBehaviour();
   }
 
@@ -285,7 +303,6 @@ 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');
 

src/components/create-element.js

@@ -1,28 +1,32 @@
+import { customStylesFormat } from './utils';
+
 export function createBreadcrumb(data, title, index, id) {
   const { element, option, indexes, selectedItems } = data;
-  const { placeholder } = option;
+  const { placeholder, styles } = option;
+  const { chips } = styles;
 
   const selected = element.querySelector('.selected');
-
+  const liChip = document.createElement('li');
-  const li = document.createElement('li');
+  const textNode = document.createTextNode(title);
-  const text = document.createTextNode(title);
+  const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 
-  svg.setAttribute('viewBox', '0 0 10 10');
+  svgIcon.setAttribute('viewBox', '0 0 10 10');
   path1.setAttribute('d', 'M3,7 L7,3');
   path2.setAttribute('d', 'M3,3 L7,7');
-  li.setAttribute('id', `tag-${index}`);
+  liChip.setAttribute('id', `tag-${index}`);
 
-  svg.classList.add('svg-icon');
+  svgIcon.classList.add('svg-icon');
 
-  svg.appendChild(path1);
+  svgIcon.appendChild(path1);
-  svg.appendChild(path2);
+  svgIcon.appendChild(path2);
-  li.appendChild(text);
+  liChip.appendChild(textNode);
-  li.appendChild(svg);
+  liChip.appendChild(svgIcon);
 
-  svg.addEventListener('click', (event) => {
+  customStylesFormat(chips, liChip);
+
+  svgIcon.addEventListener('click', (event) => {
     event.stopPropagation();
 
     const deleteIcon = indexes.indexOf(index);
@@ -31,6 +35,7 @@ export function createBreadcrumb(data, title, index, id) {
     selectedItems.splice(deleteIcon, 1);
 
     let checkBox = '';
+
     if (id) {
       checkBox = document.getElementById(`chbox-${id}`);
     } else {
@@ -44,8 +49,8 @@ export function createBreadcrumb(data, title, index, id) {
       selected.innerText = placeholder;
     }
 
-    li.parentElement.removeChild(li);
+    liChip.parentElement.removeChild(liChip);
   });
 
-  return li;
+  return liChip;
 }

src/components/utils.js

@@ -2,9 +2,9 @@ export function createSelected(element, content, styles) {
   if (content) {
     element.innerHTML = `
       <div class="cg-select">
-          <p class="selected">${content}</p>
+         <p class="selected">${content}</p>
-          <div class="caret"></div>
+           <div class="caret"></div>
-      </div>
+       </div>
       `;
   }
 
@@ -26,29 +26,17 @@ export function customStyles(element, styles) {
   }
 
   const { head, caret, placeholder } = styles;
+
   const cgSelect = element.querySelector('.cg-select');
-  const crt = element.querySelector('.caret');
+  const caretSelect = element.querySelector('.caret');
+  const placeholderSelect = element.querySelector('.selected');
 
-  const placeh = element.querySelector('.selected');
+  customStylesFormat(head, cgSelect);
 
-  if (head) {
+  customStylesFormat(caret, caretSelect);
-    Object.entries(head).forEach(([key, value]) => {
-      cgSelect.style[key] = value;
-    });
-  }
 
-  if (caret) {
+  if (placeholderSelect) {
-    Object.entries(caret).forEach(([key, value]) => {
+    customStylesFormat(placeholder, placeholderSelect);
-      crt.style[key] = value;
-    });
-  }
-
-  if (placeh) {
-    if (placeholder) {
-      Object.entries(placeholder).forEach(([key, value]) => {
-        placeh.style[key] = value;
-      });
-    }
   }
 }
 
@@ -80,3 +68,11 @@ export function getFormatItem(dataItem, index) {
 
   return item;
 }
+
+export function customStylesFormat(elemOption, selector) {
+  if (elemOption) {
+    Object.entries(elemOption).forEach(([key, value]) => {
+      selector.style[key] = value;
+    });
+  }
+}

src/index.js

@@ -9,6 +9,8 @@ const dropdown = new DropDown({
   multiselectTag: true,
 });
 
+dropdown.deleteItem(2);
+
 // ------------------------------URL--------------------
 const dropdown3 = new DropDown({
   selector: '.cg-dropdown_three',
@@ -53,7 +55,17 @@ const dropdown4 = new DropDown({
       categoryItems: ['Paris'],
     },
   ],
-
+  styles: {
+    head: {
+      background: 'red',
+    },
+    list: {
+      background: 'green',
+    },
+    chips: {
+      background: 'blue',
+    },
+  },
   multiselect: true,
   multiselectTag: true,
 });