Merge pull request #2 from apuc/feat/add-methods-dropdown

Feat/add methods in cg-select

src/cg-dropdown.js

@@ -3,22 +3,15 @@ export class DropDown {
   #list;
   #options;
   #caret;
-
+  #items;
-  //ToDo: Added  url
 
   constructor(options = {}) {
     this.#init(options);
-    this.#initSelected();
     this.#initAmount();
-    this.#initItems();
+    this.#render();
     this.#initEvent();
   }
 
-  #open() {
-    this.#list.classList.toggle('open');
-    this.#caret.classList.toggle('caret_rotate');
-  }
-
   #init(options) {
     this.#options = options;
     const elem = document.querySelector(options.selector);
@@ -28,10 +21,22 @@ export class DropDown {
     }
 
     this.#element = elem;
+
+    this.#element.addEventListener('click', () => {
+      this.#selectItem();
+      this.#open();
+    });
+
+    this.#list = this.#element.querySelector('.list');
+    this.#caret = this.#element.querySelector('.caret');
+
+    const { items } = this.#options;
+    this.#items = items;
   }
 
-  #initSelected() {
+  #initSelected(select) {
     const { styles } = this.#options;
+
     if (this.#options.selected) {
       this.#createSelected(this.#options.selected);
     } else {
@@ -46,13 +51,12 @@ export class DropDown {
       this.#createSelected(this.#options.placeholder);
       this.#customStyles(styles);
     } else {
-      this.#createSelected('Select...');
       this.#customStyles(styles);
     }
 
-    this.#element.addEventListener('click', () => {
+    if (select) {
-      this.#open();
+      this.#createSelected(select);
-    });
+    }
   }
 
   #initAmount() {
@@ -70,24 +74,69 @@ export class DropDown {
     this.#element.innerHTML += `<ul class="list">${templete}</ul>`;
   }
 
-  #initItems() {
+  #render(select) {
     const { items, styles } = this.#options;
 
-    if (!Array.isArray(items)) {
+    if (select || (select && styles)) {
-      return;
+      this.#initSelected(select);
+      this.#customStyles(styles);
+    } else {
+      this.#initSelected();
     }
 
-    if (!styles) {
+    this.#element.querySelector(this.#options.selector);
-      const templete = items.map((item) => `<li class="list__item" >${item}</li>`).join('');
+    let ul = document.createElement('ul');
-      this.#element.innerHTML += `<ul class="list">${templete}</ul>`;
-    }
 
     if (styles) {
-      const templete = items.map((item) => `<li class="list__item" >${item}</li>`).join('');
+      const { list } = styles;
-      this.#element.innerHTML += `<ul class="list" style="${styles}" >${templete}</ul>`;
+
-      this.#customStyles(styles);
+      ul.classList.add('list');
+
+      if (ul) {
+        if (list) {
+          Object.entries(list).forEach(([key, value]) => {
+            ul.style[key] = value;
+          });
+        }
+      }
+      this.#element.appendChild(ul);
+    } else {
+      ul.classList.add('list');
+      this.#element.appendChild(ul);
     }
 
+    items.map((item) => {
+      let li = document.createElement('li');
+
+      if (typeof item == 'object') {
+        const text = document.createTextNode(item.value);
+        li.classList.add('list__item');
+        li.appendChild(text);
+      } else {
+        const text = document.createTextNode(item);
+
+        li.classList.add('list__item');
+        li.appendChild(text);
+      }
+
+      ul.appendChild(li);
+    });
+  }
+
+  #open() {
+    this.#list = this.#element.querySelector('.list');
+    this.#caret = this.#element.querySelector('.caret');
+
+    this.#list.classList.toggle('open');
+    this.#caret.classList.toggle('caret_rotate');
+  }
+
+  #close() {
+    this.#list.classList.remove('open');
+    this.#caret.classList.remove('caret_rotate');
+  }
+
+  #selectItem() {
     const options = this.#element.querySelectorAll('.list__item');
     const selected = this.#element.querySelector('.selected');
 
@@ -101,37 +150,26 @@ export class DropDown {
         option.classList.add('active');
       });
     });
-
-    //ToDo: finish this function(catigories)
-    items.forEach((item) => {
-      if (typeof item === 'object') {
-        for (const key in item) {
-          const element = item[key];
-          // console.log(element);
-          if (typeof element === 'string') {
-            console.log(element);
-          }
-        }
-      }
-    });
   }
 
   #initEvent() {
     const { event } = this.#options;
+    if (!event) {
+      return;
+    }
 
-    this.#list = this.#element.querySelector('.list');
+    if (event) {
-    this.#caret = this.#element.querySelector('.caret');
+      let list = this.#element.querySelectorAll('.list');
 
-    if (event === 'mouseenter') {
+      if (event === 'mouseenter') {
-      this.#element.addEventListener(event, () => {
+        this.#element.addEventListener(event, () => {
-        this.#list.classList.add('open');
+          this.#open();
-        this.#caret.classList.add('caret_rotate');
+        });
-      });
 
-      this.#element.addEventListener('mouseleave', () => {
+        this.#element.addEventListener('mouseleave', () => {
-        this.#list.classList.remove('open');
+          this.#close();
-        this.#caret.classList.remove('caret_rotate');
+        });
-      });
+      }
     }
   }
 
@@ -140,10 +178,10 @@ export class DropDown {
       return;
     }
 
-    const { head, caret, list, placeholder } = styles;
+    const { head, caret, placeholder } = styles;
     const select = this.#element.querySelector('.cg-select');
     const crt = this.#element.querySelector('.caret');
-    const ul = this.#element.querySelector('.list');
+
     const placeh = this.#element.querySelector('.selected');
 
     if (head) {
@@ -158,14 +196,6 @@ export class DropDown {
       });
     }
 
-    if (ul) {
-      if (list) {
-        Object.entries(list).forEach(([key, value]) => {
-          ul.style[key] = value;
-        });
-      }
-    }
-
     if (placeh) {
       if (placeholder) {
         Object.entries(placeholder).forEach(([key, value]) => {
@@ -176,12 +206,14 @@ export class DropDown {
   }
 
   #createSelected(content, styles) {
-    this.#element.innerHTML = `
+    if (content) {
-            <div class="cg-select">
+      this.#element.innerHTML = `
-                <span class="selected">${content}</span>
+      <div class="cg-select">
-                <div class="caret"></div>
+          <span class="selected">${content}</span>
-            </div>
+          <div class="caret"></div>
-    `;
+      </div>
+      `;
+    }
 
     if (styles) {
       this.#customStyles(styles);
@@ -195,13 +227,35 @@ export class DropDown {
     }
   }
 
-  // addItem(item) {
+  addItem(item) {
-  //   const { items } = this.#options;
+    this.#items.push(item);
+    this.#render();
+  }
 
-  //   console.log('Добавление елемента', item);
+  deleteItem(item) {
+    let index = this.#items.indexOf(item);
 
-  //   items.push(item);
+    this.#items.splice(index, 1);
 
-  //   console.log(items);
+    this.#render();
-  // }
+  }
+
+  deleteItemAll() {
+    this.#items.splice(0, this.#items.length);
+
+    console.log(this.#items);
+    this.#render();
+  }
+
+  selectIndex(index) {
+    const options = this.#element.querySelectorAll('.list__item');
+
+    let select = options[index].innerText;
+
+    this.#render(select);
+  }
+
+  getElement(number) {
+    return this.#items[number];
+  }
 }

src/index.html

@@ -13,7 +13,7 @@
 
       <div class="cg-dropdown2"></div>
 
-      <!-- <div class="cg-dropdown3"></div> -->
+      <div class="cg-dropdown3"></div>
     </div>
   </body>
   <script type="module" src="index.js"></script>

src/index.js

@@ -2,10 +2,13 @@ import { DropDown } from './cg-dropdown';
 
 const dropdown = new DropDown({
   selector: '.cg-dropdown',
-
+  placeholder: 'Выберите авто',
   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
 });
 
+dropdown.addItem('ZAZ');
+dropdown.addItem('LADA');
+
 const dropdown2 = new DropDown({
   selector: '.cg-dropdown2',
   placeholder: 'Выберите авто',
@@ -31,7 +34,40 @@ const dropdown2 = new DropDown({
   },
 });
 
-// dropdown.addItem('Zaz');
+dropdown2.addItem('LADA');
+// dropdown.deleteItemAll();
+
+// dropdown2.deleteItem('MAN');
+// dropdown2.selectIndex(3);
+
+const dropdown3 = new DropDown({
+  selector: '.cg-dropdown3',
+  items: [
+    {
+      id: '186',
+      value: 'A008',
+    },
+    {
+      id: '288',
+      value: 'BMW',
+    },
+    {
+      id: '355',
+      value: 'MAN',
+    },
+  ],
+});
+
+let a = dropdown3.getElement(0);
+console.log(a);
+
+let b = dropdown.getElement(0);
+console.log(b);
+
+// dropdown2.deleteItemAll();
+
+// dropdown2.deleteItem('MAN');
+
 // const dropdown3 = new DropDown({
 //   selector: '.cg-dropdown3',
 //   selected: '',