Merge pull request #17 from apuc/add-label-in-select

Added label and fix submit form and etc.

src/cg-dropdown.js

@@ -274,13 +274,14 @@ export class DropDown {
 
     this.#element = elem;
 
-    this.#element.addEventListener('click', () => {
+    this.#element.addEventListener('click', (e) => {
+      e.preventDefault();
       this.#open();
     });
 
     this.#items = [];
 
-    if (multiselect) {
+    if (multiselect && multiselect == true) {
       this.#selectedItems = [];
     }
 
@@ -312,7 +313,7 @@ export class DropDown {
    * @protected
    */
   #initSelected(select) {
-    const { styles, selected, placeholder } = this.#options;
+    const { styles, selected, placeholder, lable } = this.#options;
 
     if (selected) {
       createSelected(this.#element, selected);
@@ -322,13 +323,23 @@ export class DropDown {
       createSelected(this.#element, 'Select...');
     }
 
-    if (styles) {
-      customStyles(this.#element, styles);
-    }
-
     if (select) {
       createSelected(this.#element, select, styles);
     }
+
+    if (lable) {
+      const lableItem = document.createElement('h1');
+      const textLable = document.createTextNode(lable);
+
+      lableItem.appendChild(textLable);
+      lableItem.classList.add('label');
+
+      this.#element.insertAdjacentElement('beforebegin', lableItem);
+    }
+
+    if (styles) {
+      customStyles(this.#element, styles);
+    }
   }
 
   /**
@@ -356,6 +367,7 @@ export class DropDown {
     const nativSelect = createNativeSelect();
 
     ulList.classList.add('list');
+
     if (searchMode) {
       ulList.appendChild(intputSearch);
     }
@@ -377,13 +389,13 @@ export class DropDown {
       liItem.classList.add('list__item');
       strongItem.classList.add('category');
 
-      if (multiselect) {
+      if (multiselect && multiselect == true) {
         const checkBox = document.createElement('input');
         checkBox.type = 'checkbox';
         checkBox.setAttribute('id', `chbox-${dataItem.id}`);
         liItem.appendChild(checkBox);
 
-        if (multiselectTag) {
+        if (multiselectTag && multiselectTag == true) {
           checkBox.classList.add('displayHide');
         }
 
@@ -424,7 +436,7 @@ export class DropDown {
    * @description Рендер елементов в селекте переданных с URL и их настойка
    */
   async #renderUrl() {
-    const { url, items, multiselect } = this.#options;
+    const { url, items, multiselect, multiselectTag } = this.#options;
 
     if (items) {
       return;
@@ -451,9 +463,12 @@ export class DropDown {
       const liUrl = document.createElement('li');
       const textUrl = document.createTextNode(item.title);
 
-      if (multiselect) {
+      if (multiselect && multiselect == true) {
         const checkBox = document.createElement('input');
         checkBox.type = 'checkbox';
+        if (multiselectTag && multiselectTag == true) {
+          checkBox.classList.add('displayHide');
+        }
 
         checkBox.setAttribute('id', `chbox-${item.id}`);
         nativSelect.setAttribute('multiple', 'multiple');
@@ -529,7 +544,7 @@ export class DropDown {
     const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
     const ulMultipul = document.createElement('ul');
 
-    if (multiselect) {
+    if (multiselect && multiselect == true) {
       ulMultipul.classList.add('multiselect-tag');
       select.classList.add('overflow-hidden');
     }
@@ -542,7 +557,8 @@ export class DropDown {
       option.addEventListener('click', (event) => {
         const item = this.#items[index];
 
-        if (multiselect) {
+        if (multiselect && multiselect == true) {
+          event.preventDefault();
           event.stopPropagation();
           option.classList.toggle('active');
 
@@ -562,7 +578,7 @@ export class DropDown {
 
               select.innerText = '';
 
-              if (multiselectTag) {
+              if (multiselectTag && multiselectTag == true) {
                 this.#selectedItems.push(item);
                 select.appendChild(ulMultipul);
 
@@ -579,7 +595,7 @@ export class DropDown {
                 select.innerText = this.#selectedItems;
               }
             } else {
-              if (multiselectTag) {
+              if (multiselectTag && multiselectTag == true) {
                 const tagItem = document.getElementById(`tag-${index}-${item.id}`);
                 ulMultipul.removeChild(tagItem);
               }
@@ -597,7 +613,7 @@ export class DropDown {
                 select.innerText = 'Select...';
               }
             } else {
-              if (multiselectTag) {
+              if (multiselectTag && multiselectTag == true) {
                 select.appendChild(ulMultipul);
               } else {
                 select.innerText = this.#selectedItems;

src/components/create-element.js

@@ -77,7 +77,6 @@ export function createBreadcrumb(data, title, index, id) {
 export function createNativeSelect() {
   const nativSelect = document.createElement('select');
 
-  nativSelect.setAttribute('form', 'data');
   nativSelect.setAttribute('name', 'dataSelect');
   nativSelect.classList.add('nativSelect');
   return nativSelect;

src/components/utils.js

@@ -41,15 +41,16 @@ export function customStyles(element, styles) {
     return;
   }
 
-  const { head, caret, placeholder } = styles;
+  const { head, caret, placeholder, lable } = styles;
 
   const cgSelect = element.querySelector('.cg-select');
   const caretSelect = element.querySelector('.caret');
   const placeholderSelect = element.querySelector('.selected');
+  const lableItem = element.parentElement.querySelector('h1.label');
 
   customStylesFormat(head, cgSelect);
-
   customStylesFormat(caret, caretSelect);
+  customStylesFormat(lable, lableItem);
 
   if (placeholderSelect) {
     customStylesFormat(placeholder, placeholderSelect);

src/index.html

@@ -10,13 +10,39 @@
   </head>
   <body>
     <div class="container">
-      <!-- <form id="data" action="handler.php"></form> -->
+      <form method="get" class="form">
-
+        <div>
+          <h1>Дефолтный селект</h1>
           <button class="cg-dropdown cg-dropdown_one"></button>
-      <!-- <input type="submit" form="data" value="Отправить" /> -->
+        </div>
-      <button class="cg-dropdown cg-dropdown_three"></button>
 
-      <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
+        <input type="submit" value="Отправить!" />
+      </form>
+
+      <div>
+        <h1>Селект с данными с URL</h1>
+        <button class="cg-dropdown cg-dropdown_three"></button>
+      </div>
+
+      <div>
+        <h1>Селект с категориями</h1>
+        <button class="cg-dropdown cg-dropdown_categories"></button>
+      </div>
+
+      <div>
+        <h1>Cелект управляемый кнопками</h1>
+        <button class="cg-dropdown cg-dropdown_usedBtn"></button>
+        <button class="button__open">Open</button>
+        <button class="button__close">Close</button>
+      </div>
+
+      <div style="width: 300px">
+        <h1>Cелект с функцией disabled</h1>
+
+        <input type="checkbox" name="chbx" id="checkboxDisable" />
+        <label for="checkboxDisable">Вы согласны на обработку данных</label>
+        <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
+      </div>
     </div>
   </body>
   <script type="module" src="index.js"></script>

src/index.js

@@ -4,7 +4,7 @@ import { DropDown } from './cg-dropdown';
 const dropdown = new DropDown({
   selector: '.cg-dropdown_one',
   placeholder: 'Выберите авто',
-  searchMode: true,
+  lable: 'Выбор лучшего авто!',
   items: [
     'BMW',
     {
@@ -14,13 +14,17 @@ const dropdown = new DropDown({
     },
     'Mersedes',
     'MAN',
-    'max',
+    'Ferari',
   ],
-  multiselect: true,
+  styles: {
-  multiselectTag: true,
+    lable: {
+      fontSize: '14px',
+      border: '1px white solid',
+      borderRadius: '5px',
+    },
+  },
 });
 
-// dropdown.disabled(false);
 // ------------------------------URL--------------------
 const dropdown3 = new DropDown({
   selector: '.cg-dropdown_three',
@@ -39,7 +43,7 @@ const dropdown3 = new DropDown({
 
 // --------------------------------Категории--------------------------
 const dropdown4 = new DropDown({
-  selector: '.cg-dropdown_button',
+  selector: '.cg-dropdown_categories',
   placeholder: 'Выберите регион',
   searchMode: true,
   items: [
@@ -83,9 +87,55 @@ const dropdown4 = new DropDown({
 });
 
 //----------------управление с помощью кнопок----------------------------------
-/* const buttonOpen = document.querySelector('.button__open');
+const dropdownBtn = new DropDown({
- const buttonClose = document.querySelector('.button__close');
+  selector: '.cg-dropdown_usedBtn',
+  placeholder: 'Выберите авто',
+  searchMode: true,
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'max',
+  ],
+  multiselect: true,
+});
 
- dropdown4.buttonControl(buttonOpen, 'open');
+const buttonOpen = document.querySelector('.button__open');
- dropdown4.buttonControl(buttonClose, 'close'); 
+const buttonClose = document.querySelector('.button__close');
- */
+
+dropdownBtn.buttonControl(buttonOpen, 'open');
+dropdownBtn.buttonControl(buttonClose, 'close');
+
+//-------------------------Функция Disabled----------------------------------
+const dropdownDisabled = new DropDown({
+  selector: '.cg-dropdown_checkboxDisable',
+  placeholder: 'Выберите авто',
+  searchMode: true,
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'max',
+  ],
+  multiselect: true,
+});
+dropdownDisabled.disabled(true);
+let chbox = document.getElementById('checkboxDisable');
+
+chbox.addEventListener('click', () => {
+  if (chbox.checked == true) {
+    dropdownDisabled.disabled(false);
+  } else {
+    dropdownDisabled.disabled(true);
+  }
+});

src/style/main.scss

@@ -186,6 +186,9 @@ input[type='checkbox'] {
   stroke-width: 0.5;
 }
 
+.label {
+  color: white;
+}
 //-------Behavior--------
 .active {
   background: #8282822c;
@@ -211,6 +214,10 @@ input[type='checkbox'] {
   white-space: nowrap;
 }
 
+.displayHide {
+  display: none;
+}
+
 // ------SCROLLBAR------
 ::-webkit-scrollbar {
   width: 10px;
@@ -223,7 +230,3 @@ input[type='checkbox'] {
 ::-webkit-scrollbar-thumb {
   background-color: #4d4d4d;
 }
-
-.displayHide {
-  display: none;
-}