Sort scss classes and index.js.

src/index.html

@@ -11,16 +11,10 @@
     <div class="container">
       <button class="cg-dropdown cg-dropdown_one"></button>
 
-      <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>
 </html>

src/index.js

@@ -1,74 +1,30 @@
 import { DropDown } from './cg-dropdown';
 
-// const dropdown = new DropDown({
-//   selector: '.cg-dropdown_one',
-//   placeholder: 'Выберите авто',
-//   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
+// ------------------------------Обычный селект--------------------
+const dropdown = new DropDown({
+  selector: '.cg-dropdown_one',
+  placeholder: 'Выберите авто',
+  items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
+  multiselect: true,
+  multiselectTag: true,
+});
 
-//   multiselect: true,
-//   multiselectTag: true,
-// });
-
-// // dropdown.addItem('ZAZ');
-// dropdown.addItem('LADA');
-// dropdown.addItem('Kamaz 258');
-// // dropdown.addItem('BMW');
-// // const dropdown2 = new DropDown({
-// //   selector: '.cg-dropdown_two',
-// //   placeholder: 'SELECT CAR',
-// //   items: [
-// //     {
-// //       id: 'addaw21',
-// //       title: 'BMW',
-// //       value: 1,
-// //     },
-// //     {
-// //       id: '2414q',
-// //       title: 'Opel',
-// //       value: 2,
-// //     },
-// //     {
-// //       id: '24qwds',
-// //       title: 'Kamaz 258',
-// //       value: 3,
-// //     },
-// //     {
-// //       id: '28wds',
-// //       title: 'MAN',
-// //       value: 4,
-// //     },
-// //     {
-// //       id: '28qwds',
-// //       title: 'BOOT',
-// //       value: 5,
-// //     },
-// //   ],
-
-// //   multiselect: true,
-// //   event: 'mouseenter',
-// //   // multiselectTag: true,
-// // });
-
-// dropdown.disabled(false);
-
-// dropdown2.addItem('LADA');
-
-// //ToDo: paste the desired url;
-
-// const dropdown3 = new DropDown({
-//   selector: '.cg-dropdown_three',
-//   placeholder: 'URL',
-//   url: 'http://jsonplaceholder.typicode.com/users',
-//   styles: {
-//     head: {
-//       background: 'black',
-//       width: '350px',
-//     },
-//   },
-//   multiselect: true,
-//   multiselectTag: true,
-// });
+// ------------------------------URL--------------------
+const dropdown3 = new DropDown({
+  selector: '.cg-dropdown_three',
+  placeholder: 'URL',
+  url: 'http://jsonplaceholder.typicode.com/users',
+  styles: {
+    head: {
+      background: 'black',
+      width: '350px',
+    },
+  },
+  multiselect: true,
+  multiselectTag: true,
+});
 
+// --------------------------------Категории--------------------------
 const dropdown4 = new DropDown({
   selector: '.cg-dropdown_button',
   placeholder: 'Выберите регион',
@@ -102,12 +58,10 @@ const dropdown4 = new DropDown({
   multiselectTag: true,
 });
 
-// dropdown4.addItem('Харьков');
-// dropdown4.deleteItemAll();
-// dropdown4.selectIndex(5);
+//----------------управление с помощью кнопок----------------------------------
+/* const buttonOpen = document.querySelector('.button__open');
+ const buttonClose = document.querySelector('.button__close');
 
-// const buttonOpen = document.querySelector('.button__open');
-// const buttonClose = document.querySelector('.button__close');
-
-// dropdown4.buttonControl(buttonOpen, 'open');
-// dropdown4.buttonControl(buttonClose, 'close');
+ dropdown4.buttonControl(buttonOpen, 'open');
+ dropdown4.buttonControl(buttonClose, 'close'); 
+ */

src/style/main.scss

@@ -16,11 +16,7 @@ body {
   width: 900px;
 }
 
-.content {
-  border: 1px solid #616161;
-  height: 500px;
-}
-
+// ----Layout----
 .cg-dropdown {
   min-width: 235px;
   margin-left: 0;
@@ -59,12 +55,6 @@ body {
   }
 }
 
-.overflow-hidden {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .caret {
   width: 0;
   height: 0;
@@ -161,6 +151,7 @@ input[type='checkbox'] {
   margin: 0 5px 0 0;
 }
 
+// --------SVG--------
 .svg-icon {
   width: 16px;
   margin-left: 3px;
@@ -182,6 +173,7 @@ input[type='checkbox'] {
   stroke-width: 0.5;
 }
 
+//-------Behavior--------
 .active {
   background: #8282822c;
 }
@@ -196,6 +188,17 @@ input[type='checkbox'] {
   }
 }
 
+.disabled {
+  background-color: #8f9195 !important;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ------SCROLLBAR------
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -207,12 +210,3 @@ input[type='checkbox'] {
 ::-webkit-scrollbar-thumb {
   background-color: #4d4d4d;
 }
-
-.disabled {
-  background-color: #8f9195 !important;
-}
-
-.buttonControlBox {
-  margin: -25px auto 0 auto;
-  width: 300px;
-}