Merge pull request #7 from apuc/add-disabled-fn

Add disabled function

src/cg-dropdown.js

@@ -1,4 +1,4 @@
-import { customStyles, createSelected } from './components/utils';
+import { customStyles, createSelected, checkItemStruct } from './components/utils';
 import { createBreadcrumb } from './components/create-element';
 
 export class DropDown {
@@ -79,6 +79,21 @@ export class DropDown {
     return this.#items[number];
   }
 
+  disabled(value) {
+    if (typeof value !== 'boolean') {
+      return;
+    }
+
+    const select = this.#element.querySelector('.cg-select');
+    if (value === true) {
+      this.#element.setAttribute('disabled', true);
+      select.classList.add('disabled');
+    } else {
+      this.#element.removeAttribute('disabled');
+      select.classList.remove('disabled');
+    }
+  }
+
   #init(options) {
     this.#options = options;
     const { items, multiselect, url } = this.#options;
@@ -110,7 +125,7 @@ export class DropDown {
       const random = Math.random().toString(36).substring(2, 10);
       let item = {};
 
-      if (this.#checkItemStruct(dataItem)) {
+      if (checkItemStruct(dataItem)) {
         item = {
           id: dataItem.id,
           title: dataItem.title,
@@ -149,7 +164,7 @@ export class DropDown {
   }
 
   #render(select) {
-    const { styles, multiselect } = this.#options;
+    const { styles, multiselect, event } = this.#options;
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -207,12 +222,11 @@ export class DropDown {
     }
 
     const response = await fetch(url);
-
     const dataUrl = await response.json();
 
     dataUrl.forEach((dataItem, index) => {
       const item = {
-        id: dataItem.phone,
+        id: dataItem.id,
         title: dataItem.name,
         value: index,
       };
@@ -305,7 +319,7 @@ export class DropDown {
             } else {
               if (multiselectTag) {
                 const tagItem = document.getElementById(`tag-${index}`);
-
+                // TODO: bug error! in url
                 ul.removeChild(tagItem);
               }
               this.#indexes.splice(checkIndex, 1);
@@ -352,21 +366,10 @@ export class DropDown {
         this.#element.addEventListener(event, () => {
           this.#open();
         });
-
         this.#element.addEventListener('mouseleave', () => {
           this.#close();
         });
       }
     }
   }
-
-  #checkItemStruct(item) {
-    if (item && typeof item !== 'object') {
-      return false;
-    }
-
-    return (
-      item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value')
-    );
-  }
 }

src/components/utils.js

@@ -12,10 +12,10 @@ export function createSelected(element, content, styles) {
     customStyles(element, styles);
 
     element.innerHTML = `
-            <div class="cg-select" style = "${styles}">
+      <div class="cg-select" style = "${styles}">
-                <span class="selected" style = "${styles}">${content}</span>
+          <span class="selected" style = "${styles}">${content}</span>
-                <div class="caret" style = "${styles}"></div>
+          <div class="caret" style = "${styles}"></div>
-            </div>
+      </div>
     `;
   }
 }
@@ -26,14 +26,14 @@ export function customStyles(element, styles) {
   }
 
   const { head, caret, placeholder } = styles;
-  const select = element.querySelector('.cg-select');
+  const cgSelect = 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;
+      cgSelect.style[key] = value;
     });
   }
 
@@ -51,3 +51,11 @@ export function customStyles(element, styles) {
     }
   }
 }
+
+export function checkItemStruct(item) {
+  if (item && typeof item !== 'object') {
+    return false;
+  }
+
+  return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
+}

src/index.html

@@ -9,11 +9,11 @@
   </head>
   <body>
     <div class="container">
-      <div class="cg-dropdown"></div>
+      <button class="cg-dropdown cg-dropdown_one"></button>
 
-      <div class="cg-dropdown2"></div>
+      <button class="cg-dropdown cg-dropdown_two"></button>
 
-      <div class="cg-dropdown3" style="margin-left: 15px"></div>
+      <button class="cg-dropdown cg-dropdown_three"></button>
     </div>
   </body>
   <script type="module" src="index.js"></script>

src/index.js

@@ -1,14 +1,10 @@
 import { DropDown } from './cg-dropdown';
 
 const dropdown = new DropDown({
-  selector: '.cg-dropdown',
+  selector: '.cg-dropdown_one',
   placeholder: 'Выберите авто',
   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
-  styles: {
+
-    head: {
-      background: 'red',
-    },
-  },
   multiselect: true,
   multiselectTag: true,
 });
@@ -19,9 +15,8 @@ dropdown.addItem('Kamaz 258');
 dropdown.addItem('BMW');
 
 const dropdown2 = new DropDown({
-  selector: '.cg-dropdown2',
+  selector: '.cg-dropdown_two',
   placeholder: 'SELECT CAR',
-
   items: [
     {
       id: 'addaw21',
@@ -55,17 +50,20 @@ const dropdown2 = new DropDown({
   // multiselectTag: true,
 });
 
+dropdown.disabled(false);
+
 dropdown2.addItem('LADA');
 
 //ToDo: paste the desired url;
 
 const dropdown3 = new DropDown({
-  selector: '.cg-dropdown3',
+  selector: '.cg-dropdown_three',
   placeholder: 'URL',
   url: 'http://jsonplaceholder.typicode.com/users',
   styles: {
     head: {
-      background: 'red',
+      background: 'black',
+      width: '350px',
     },
   },
   multiselect: true,

src/style/main.scss

@@ -4,24 +4,35 @@
 }
 
 body {
-  background: #1b1e25;
+  background: #4a4a4a;
 }
 
 .container {
+  margin: 0 auto;
   display: flex;
-  margin: 50px auto;
+  align-items: baseline;
-  width: 800px;
+  justify-content: space-between;
+  width: 900px;
+}
+
+.content {
+  border: 1px solid #616161;
+  height: 500px;
 }
 
 .cg-dropdown {
+  min-width: 235px;
+  margin-left: 0;
   position: relative;
-  margin-right: 10px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 10px;
 }
 
 .cg-select {
   padding: 5px;
-  min-width: 225px;
+
-  max-width: 225px;
   min-height: 50px;
   color: #fff;
   display: flex;
@@ -30,12 +41,14 @@ body {
 
   text-overflow: ellipsis;
   background: #2a2f3b;
+  border: none;
   cursor: pointer;
   border-radius: 5px;
   transition: 0.5s;
 
   .selected {
-    max-width: 200px;
+    max-width: 195px;
+
     margin: 5px;
   }
 
@@ -70,6 +83,7 @@ body {
   max-height: 230px;
   overflow-y: auto;
   position: absolute;
+
   width: 220px;
   padding: 7px;
   margin-top: -0.2px;
@@ -87,6 +101,10 @@ body {
   z-index: 1;
 
   &__item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
     transition: 0.5s;
     padding: 15px;
 
@@ -129,6 +147,7 @@ body {
 
 input[type='checkbox'] {
   cursor: pointer;
+  margin: 0 5px 0 0;
 }
 
 .svg-icon {
@@ -172,3 +191,7 @@ input[type='checkbox'] {
 ::-webkit-scrollbar-thumb {
   background-color: #4d4d4d;
 }
+
+.disabled {
+  background-color: #8f9195 !important;
+}