Merge pull request #13 from apuc/add-data-select-push

Add data select push

src/cg-dropdown.js

@@ -3,8 +3,10 @@ import {
   customStyles,
   getFormatItem,
   customStylesFormat,
+  nativOptionMultiple,
+  nativOptionOrdinary,
 } from './components/utils';
-import { createBreadcrumb } from './components/create-element';
+import { createBreadcrumb, createListSelect } from './components/create-element';
 
 /**
  * @class Описание класса DropDown
@@ -342,7 +344,11 @@ export class DropDown {
     }
 
     const ulList = document.createElement('ul');
+    const nativSelect = document.createElement('select');
 
+    nativSelect.setAttribute('form', 'data');
+
+    nativSelect.classList.add('nativSelect');
     ulList.classList.add('list');
 
     if (styles) {
@@ -351,11 +357,15 @@ export class DropDown {
     }
 
     this.#element.appendChild(ulList);
+    ///
+    this.#element.appendChild(nativSelect);
 
     this.#items.forEach((dataItem) => {
       const liItem = document.createElement('li');
+      const nativOption = document.createElement('option');
       const strongItem = document.createElement('strong');
 
+      nativOption.classList.add('nativSelect__nativOption');
       liItem.classList.add('list__item');
       strongItem.classList.add('category');
 
@@ -365,12 +375,21 @@ export class DropDown {
         checkBox.setAttribute('id', `chbox-${dataItem.id}`);
 
         liItem.appendChild(checkBox);
+
+        nativSelect.setAttribute('multiple', 'multiple');
       }
+      nativSelect.setAttribute('name', 'dataSelect');
 
       let textNode = '';
 
       if (dataItem.title) {
         textNode = document.createTextNode(dataItem.title);
+        ///
+        nativOption.text = dataItem.title;
+        nativOption.value = dataItem.title;
+        nativSelect.appendChild(nativOption);
+
+        ///
         liItem.appendChild(textNode);
         ulList.appendChild(liItem);
       } else {
@@ -488,17 +507,19 @@ export class DropDown {
 
     const options = this.#element.querySelectorAll('.list__item');
     const select = this.#element.querySelector('.selected');
+    const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
 
-    const ul = document.createElement('ul');
+    const ulMultipul = document.createElement('ul');
 
     if (multiselect) {
-      ul.classList.add('multiselect-tag');
+      ulMultipul.classList.add('multiselect-tag');
       select.classList.add('overflow-hidden');
     }
 
     options.forEach((option, index) => {
       option.addEventListener('click', (event) => {
         const item = this.#items[index];
+
         if (multiselect) {
           event.stopPropagation();
           option.classList.toggle('active');
@@ -513,13 +534,15 @@ export class DropDown {
             const checkIndex = this.#indexes.indexOf(index);
 
             if (checkIndex === -1) {
+              nativOptionMultiple(nativOption, item.title, true);
+
               this.#indexes.push(index);
 
               select.innerText = '';
 
               if (multiselectTag) {
                 this.#selectedItems.push(item);
-                select.appendChild(ul);
+                select.appendChild(ulMultipul);
 
                 const data = {
                   option: this.#options,
@@ -528,7 +551,7 @@ export class DropDown {
                   selectedItems: this.#selectedItems,
                 };
 
-                ul.appendChild(createBreadcrumb(data, item.title, index, item.id));
+                ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
               } else {
                 this.#selectedItems.push(item.title);
                 select.innerText = this.#selectedItems;
@@ -536,11 +559,11 @@ export class DropDown {
             } else {
               if (multiselectTag) {
                 const tagItem = document.getElementById(`tag-${index}-${item.id}`);
-
+                ulMultipul.removeChild(tagItem);
-                ul.removeChild(tagItem);
               }
               this.#indexes.splice(checkIndex, 1);
               this.#selectedItems.splice(checkIndex, 1);
+              nativOptionMultiple(nativOption, item.title, false);
             }
 
             if (!this.#selectedItems.length) {
@@ -553,7 +576,7 @@ export class DropDown {
               }
             } else {
               if (multiselectTag) {
-                select.appendChild(ul);
+                select.appendChild(ulMultipul);
               } else {
                 select.innerText = this.#selectedItems;
               }
@@ -562,6 +585,7 @@ export class DropDown {
         } else {
           select.innerText = item.title;
           this.#selectedItems = item;
+          nativOptionOrdinary(nativOption, item.title);
 
           options.forEach((option) => {
             option.classList.remove('active');

src/components/create-element.js

@@ -1,4 +1,4 @@
-import { customStylesFormat } from './utils';
+import { customStylesFormat, nativOptionMultiple } from './utils';
 /**
  * @module createBreadcrumb
  */
@@ -16,6 +16,8 @@ export function createBreadcrumb(data, title, index, id) {
   const { placeholder, styles } = option;
 
   const selected = element.querySelector('.selected');
+  const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+
   const liChip = document.createElement('li');
   const textNode = document.createTextNode(title);
   const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@@ -41,14 +43,14 @@ export function createBreadcrumb(data, title, index, id) {
 
   svgIcon.addEventListener('click', (event) => {
     event.stopPropagation();
+    nativOptionMultiple(nativOption, title, false);
 
     const deleteIcon = indexes.indexOf(index);
+    let checkBox = '';
 
     indexes.splice(deleteIcon, 1);
     selectedItems.splice(deleteIcon, 1);
 
-    let checkBox = '';
-
     if (id) {
       checkBox = document.getElementById(`chbox-${id}`);
     } else {

src/components/utils.js

@@ -108,3 +108,39 @@ export function getFormatItem(dataItem, index) {
 
   return item;
 }
+
+/**
+ * Поведение нативного(одинарного) селекта при выборе кастомного
+ * @param {NodeList} element NodeList нативного селекта
+ * @param {object} item выбранный элемент в кастомном селекте
+ */
+export function nativOptionOrdinary(element, item) {
+  element.forEach((option) => {
+    option.removeAttribute('selected');
+    if (option.textContent === item) {
+      option.setAttribute('selected', 'selected');
+    }
+  });
+}
+
+/**
+ * Поведение нативного(Multiple) селекта при выборе в кастомном
+ * @param {NodeList} element NodeList нативного селекта
+ * @param {object} item выбранный элемент в кастомном селекте
+ * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
+ */
+export function nativOptionMultiple(element, item, condition) {
+  element.forEach((option) => {
+    if (condition == true) {
+      if (option.textContent === item) {
+        option.setAttribute('selected', 'selected');
+      }
+    } else if (condition == false) {
+      if (option.textContent === item) {
+        option.removeAttribute('selected');
+      }
+    } else {
+      return;
+    }
+  });
+}

src/index.html

@@ -6,14 +6,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cg-Select</title>
     <link href="./style/main.scss" rel="stylesheet" />
+    <link href="./style/nativSelect.scss" rel="stylesheet" />
   </head>
   <body>
     <div class="container">
+      <form id="data" action="handler.php"></form>
+
       <button class="cg-dropdown cg-dropdown_one"></button>
+      <input type="submit" form="data" value="Отправить" />
+      <!-- <button class="cg-dropdown cg-dropdown_three"></button> -->
 
-      <button class="cg-dropdown cg-dropdown_three"></button>
+      <!-- <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button> -->
-
-      <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
     </div>
   </body>
   <script type="module" src="index.js"></script>

src/index.js

@@ -19,66 +19,65 @@ const dropdown = new DropDown({
   multiselectTag: true,
 });
 
-dropdown.deleteItem(2);
+dropdown.disabled(false);
-
 // ------------------------------URL--------------------
-const dropdown3 = new DropDown({
+// const dropdown3 = new DropDown({
-  selector: '.cg-dropdown_three',
+//   selector: '.cg-dropdown_three',
-  placeholder: 'URL',
+//   placeholder: 'URL',
-  url: 'http://jsonplaceholder.typicode.com/users',
+//   url: 'http://jsonplaceholder.typicode.com/users',
-  styles: {
+//   styles: {
-    head: {
+//     head: {
-      background: 'black',
+//       background: 'black',
-      width: '350px',
+//       width: '350px',
-    },
+//     },
-  },
+//   },
-  multiselect: true,
+//   multiselect: true,
-  multiselectTag: true,
+//   multiselectTag: true,
-});
+// });
 
 // --------------------------------Категории--------------------------
-const dropdown4 = new DropDown({
+// const dropdown4 = new DropDown({
-  selector: '.cg-dropdown_button',
+//   selector: '.cg-dropdown_button',
-  placeholder: 'Выберите регион',
+//   placeholder: 'Выберите регион',
-  items: [
+//   items: [
-    {
+//     {
-      category: 'Russia',
+//       category: 'Russia',
-      categoryItems: [
+//       categoryItems: [
-        {
+//         {
-          id: '28qwds',
+//           id: '28qwds',
-          title: 'Москва',
+//           title: 'Москва',
-          value: 0,
+//           value: 0,
-        },
+//         },
-        ,
+//         ,
-        'Ростов-на-дону',
+//         'Ростов-на-дону',
-        'Саратов',
+//         'Саратов',
-        'Волгоград',
+//         'Волгоград',
-        'Донецк',
+//         'Донецк',
-      ],
+//       ],
-    },
+//     },
-    {
+//     {
-      category: 'USA',
+//       category: 'USA',
-      categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
+//       categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
-    },
+//     },
-    {
+//     {
-      category: 'France',
+//       category: 'France',
-      categoryItems: ['Paris'],
+//       categoryItems: ['Paris'],
-    },
+//     },
-  ],
+//   ],
-  styles: {
+//   styles: {
-    head: {
+//     head: {
-      background: 'red',
+//       background: 'red',
-    },
+//     },
-    list: {
+//     list: {
-      background: 'green',
+//       background: 'green',
-    },
+//     },
-    chips: {
+//     chips: {
-      background: 'blue',
+//       background: 'blue',
-    },
+//     },
-  },
+//   },
-  multiselect: true,
+//   multiselect: true,
-  multiselectTag: true,
+//   multiselectTag: true,
-});
+// });
 
 //----------------управление с помощью кнопок----------------------------------
 /* const buttonOpen = document.querySelector('.button__open');

src/style/nativSelect.scss

@@ -0,0 +1,13 @@
+.nativSelect {
+  border: none;
+  cursor: pointer;
+  display: none;
+  color: white;
+  background: #2a2f3b;
+  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+
+  &__nativOption {
+    border: 1px #0a0b0e solid;
+  }
+}