From ce941a3dad68c34e83508f99fcee48c142fde2ca Mon Sep 17 00:00:00 2001
From: MaxOvs <rock_maksimus@mail.ru>
Date: Thu, 13 Oct 2022 13:42:46 +0300
Subject: [PATCH] Work method button control finished.

---
 src/cg-dropdown.js  | 23 ++++++++++++++++++++---
 src/index.html      |  6 ++++++
 src/index.js        | 16 ++++++++++++++++
 src/style/main.scss |  6 ++++++
 4 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index 7e63a01..52b7952 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -94,6 +94,18 @@ export class DropDown {
     }
   }
 
+  buttonControl(button, method) {
+    button.addEventListener('click', () => {
+      if (method === 'open') {
+        this.#open(true);
+      } else if (method === 'close') {
+        this.#close();
+      } else {
+        return;
+      }
+    });
+  }
+
   #init(options) {
     this.#options = options;
     const { items, multiselect, url } = this.#options;
@@ -252,12 +264,17 @@ export class DropDown {
     this.#addOptionsBehaviour();
   }
 
-  #open() {
+  #open(oneClick) {
     this.#list = this.#element.querySelector('.list');
     this.#caret = this.#element.querySelector('.caret');
 
-    this.#list.classList.toggle('open');
-    this.#caret.classList.toggle('caret_rotate');
+    if (oneClick === true) {
+      this.#list.classList.add('open');
+      this.#caret.classList.add('caret_rotate');
+    } else {
+      this.#list.classList.toggle('open');
+      this.#caret.classList.toggle('caret_rotate');
+    }
   }
 
   #close() {
diff --git a/src/index.html b/src/index.html
index 2e0d1ea..88771e7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,6 +14,12 @@
       <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>
diff --git a/src/index.js b/src/index.js
index e2c658f..429954c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -69,3 +69,19 @@ const dropdown3 = new DropDown({
   multiselect: true,
   multiselectTag: true,
 });
+
+const dropdown4 = new DropDown({
+  selector: '.cg-dropdown_button',
+  placeholder: 'Выберите авто',
+  items: ['Russia', 'USA', 'England', 'Turkey', 'France'],
+
+  multiselect: true,
+  multiselectTag: true,
+});
+// dropdown4.disabled(true);
+
+const buttonOpen = document.querySelector('.button__open');
+const buttonClose = document.querySelector('.button__close');
+
+dropdown4.buttonControl(buttonOpen, 'open');
+dropdown4.buttonControl(buttonClose, 'close');
diff --git a/src/style/main.scss b/src/style/main.scss
index 90719ec..1445e0a 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -12,6 +12,7 @@ body {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
+  flex-wrap: wrap;
   width: 900px;
 }
 
@@ -195,3 +196,8 @@ input[type='checkbox'] {
 .disabled {
   background-color: #8f9195 !important;
 }
+
+.buttonControlBox {
+  margin: -25px auto 0 auto;
+  width: 300px;
+}