New breanch. Low file sliting

src/cg-dropdown.js

@@ -1,3 +1,6 @@
+import { customStyles, createSelected } from './components/utils';
+import { createBreadcrumb } from './components/create-element';
+
 export class DropDown {
   #element;
   #list;
@@ -5,7 +8,6 @@ export class DropDown {
   #caret;
   #items;
   #selectedItems;
-  #id = [];
   #indexes = [];
 
   get value() {
@@ -81,24 +83,26 @@ export class DropDown {
     const { styles } = this.#options;
 
     if (this.#options.selected) {
-      this.#createSelected(this.#options.selected);
+      createSelected(this.#element, this.#options.selected);
     } else {
-      this.#createSelected('Select...');
+      createSelected(this.#element, 'Select...');
     }
 
     if (!this.#options.selected && this.#options.placeholder) {
-      this.#createSelected(this.#options.placeholder);
+      createSelected(this.#element, this.#options.placeholder);
     }
 
-    if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) {
+    if (styles) {
-      this.#createSelected(this.#options.placeholder);
+      if (this.#options.placeholder) {
-      this.#customStyles(styles);
+        createSelected(this.#element, this.#options.placeholder, styles);
-    } else {
+      } else if (this.#options.selected) {
-      this.#customStyles(styles);
+        createSelected(this.#element, this.#options.selected, styles);
+      }
+      customStyles(this.#element, styles);
     }
 
     if (select) {
-      this.#createSelected(select);
+      createSelected(this.#element, select, styles);
     }
   }
 
@@ -107,7 +111,7 @@ export class DropDown {
 
     if (select || (select && styles)) {
       this.#initSelected(select);
-      this.#customStyles(styles);
+      customStyles(this.#element, styles);
     } else {
       this.#initSelected();
     }
@@ -281,9 +285,28 @@ export class DropDown {
                 selected.appendChild(ul);
 
                 if (this.#checkItemStruct(item)) {
-                  ul.appendChild(this.#createBreadcrumb(value, index, id));
+                  ul.appendChild(
+                    createBreadcrumb(
+                      this.#options,
+                      this.#element,
+                      this.#indexes,
+                      this.#selectedItems,
+                      value,
+                      index,
+                      id,
+                    ),
+                  );
                 } else {
-                  ul.appendChild(this.#createBreadcrumb(value, index));
+                  ul.appendChild(
+                    createBreadcrumb(
+                      this.#options,
+                      this.#element,
+                      this.#indexes,
+                      this.#selectedItems,
+                      value,
+                      index,
+                    ),
+                  );
                 }
               } else {
                 selected.innerText = this.#selectedItems;
@@ -329,57 +352,6 @@ export class DropDown {
     });
   }
 
-  #createBreadcrumb(value, index, id) {
-    const { placeholder } = this.#options;
-
-    const selected = this.#element.querySelector('.selected');
-
-    const li = document.createElement('li');
-    const text = document.createTextNode(value);
-    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');
-    path1.setAttribute('d', 'M3,7 L7,3');
-    path2.setAttribute('d', 'M3,3 L7,7');
-    li.setAttribute('id', `tag-${index}`);
-
-    svg.classList.add('svg-icon');
-
-    svg.appendChild(path1);
-    svg.appendChild(path2);
-    li.appendChild(text);
-    li.appendChild(svg);
-
-    svg.addEventListener('click', (event) => {
-      event.stopPropagation();
-
-      const deleteIcon = this.#indexes.indexOf(index);
-
-      this.#indexes.splice(deleteIcon, 1);
-      this.#selectedItems.splice(deleteIcon, 1);
-
-      let checkBox = '';
-      if (id) {
-        checkBox = document.getElementById(`chbox-${id}`);
-      } else {
-        checkBox = document.getElementById(`chbox-${index}`);
-      }
-
-      checkBox.checked = false;
-      checkBox.parentElement.classList.remove('active');
-
-      if (!this.#selectedItems.length) {
-        selected.innerText = placeholder;
-      }
-
-      li.parentElement.removeChild(li);
-    });
-
-    return li;
-  }
-
   #initEvent() {
     const { event } = this.#options;
     if (!event) {
@@ -401,60 +373,6 @@ export class DropDown {
     }
   }
 
-  #customStyles(styles) {
-    if (!styles) {
-      return;
-    }
-
-    const { head, caret, placeholder } = styles;
-    const select = this.#element.querySelector('.cg-select');
-    const crt = this.#element.querySelector('.caret');
-
-    const placeh = this.#element.querySelector('.selected');
-
-    if (head) {
-      Object.entries(head).forEach(([key, value]) => {
-        select.style[key] = value;
-      });
-    }
-
-    if (caret) {
-      Object.entries(caret).forEach(([key, value]) => {
-        crt.style[key] = value;
-      });
-    }
-
-    if (placeh) {
-      if (placeholder) {
-        Object.entries(placeholder).forEach(([key, value]) => {
-          placeh.style[key] = value;
-        });
-      }
-    }
-  }
-
-  #createSelected(content, styles) {
-    if (content) {
-      this.#element.innerHTML = `
-      <div class="cg-select">
-          <p class="selected">${content}</p>
-          <div class="caret"></div>
-      </div>
-      `;
-    }
-
-    if (styles) {
-      this.#customStyles(styles);
-
-      this.#element.innerHTML = `
-            <div class="cg-select" style = "${styles}">
-                <span class="selected" style = "${styles}">${content}</span>
-                <div class="caret" style = "${styles}"></div>
-            </div>
-    `;
-    }
-  }
-
   #checkItemStruct(item) {
     if (item && typeof item !== 'object') {
       return false;

src/components/create-element.js

@@ -0,0 +1,50 @@
+export function createBreadcrumb(options, element, indexes, selectedItems, value, index, id) {
+  const { placeholder } = options;
+
+  const selected = element.querySelector('.selected');
+
+  const li = document.createElement('li');
+  const text = document.createTextNode(value);
+  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');
+  path1.setAttribute('d', 'M3,7 L7,3');
+  path2.setAttribute('d', 'M3,3 L7,7');
+  li.setAttribute('id', `tag-${index}`);
+
+  svg.classList.add('svg-icon');
+
+  svg.appendChild(path1);
+  svg.appendChild(path2);
+  li.appendChild(text);
+  li.appendChild(svg);
+
+  svg.addEventListener('click', (event) => {
+    event.stopPropagation();
+
+    const deleteIcon = indexes.indexOf(index);
+
+    indexes.splice(deleteIcon, 1);
+    selectedItems.splice(deleteIcon, 1);
+
+    let checkBox = '';
+    if (id) {
+      checkBox = document.getElementById(`chbox-${id}`);
+    } else {
+      checkBox = document.getElementById(`chbox-${index}`);
+    }
+
+    checkBox.checked = false;
+    checkBox.parentElement.classList.remove('active');
+
+    if (!selectedItems.length) {
+      selected.innerText = placeholder;
+    }
+
+    li.parentElement.removeChild(li);
+  });
+
+  return li;
+}

src/components/utils.js

@@ -0,0 +1,53 @@
+export function createSelected(element, content, styles) {
+  if (content) {
+    element.innerHTML = `
+      <div class="cg-select">
+          <p class="selected">${content}</p>
+          <div class="caret"></div>
+      </div>
+      `;
+  }
+
+  if (styles) {
+    customStyles(element, styles);
+
+    element.innerHTML = `
+            <div class="cg-select" style = "${styles}">
+                <span class="selected" style = "${styles}">${content}</span>
+                <div class="caret" style = "${styles}"></div>
+            </div>
+    `;
+  }
+}
+
+export function customStyles(element, styles) {
+  if (!styles) {
+    return;
+  }
+
+  const { head, caret, placeholder } = styles;
+  const select = element.querySelector('.cg-select');
+  const crt = element.querySelector('.caret');
+
+  const placeh = element.querySelector('.selected');
+
+  if (head) {
+    Object.entries(head).forEach(([key, value]) => {
+      select.style[key] = value;
+    });
+  }
+
+  if (caret) {
+    Object.entries(caret).forEach(([key, value]) => {
+      crt.style[key] = value;
+    });
+  }
+
+  if (placeh) {
+    if (placeholder) {
+      Object.entries(placeholder).forEach(([key, value]) => {
+        placeh.style[key] = value;
+      });
+    }
+  }
+}

src/index.js

@@ -4,6 +4,11 @@ const dropdown = new DropDown({
   selector: '.cg-dropdown',
   placeholder: 'Выберите авто',
   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
+  styles: {
+    head: {
+      background: 'red',
+    },
+  },
   multiselect: true,
   multiselectTag: true,
 });
@@ -42,6 +47,7 @@ const dropdown2 = new DropDown({
       value: '5',
     },
   ],
+
   multiselect: true,
   multiselectTag: true,
 });