Merge pull request #8 from apuc/add-button-method-open/close

Work method button control finished.

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() {

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>

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');

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;
+}