Added nativeSelectMode and Meta-data

src/cg-select.js

@@ -396,7 +396,7 @@ export class DropDown {
    * @description Рендер елементов в селекте.
    */
   #render(select) {
-    const { styles, multiselect, searchMode, multiselectTag, darkTheme, language } = this.#options;
+    const { styles, multiselect, searchMode, multiselectTag, darkTheme, language, nativeSelectMode } = this.#options;
     const random = Math.random().toString(36).substring(2, 10);
 
     if (select || (select && styles)) {
@@ -483,6 +483,10 @@ export class DropDown {
       this.#checkTheme();
     }
 
+    if(nativeSelectMode === true){
+      this.#SelectMode(nativeSelectMode);
+    }
+
     this.#list = this.#element.querySelector('.list');
     this.#caret = this.#element.querySelector('.caret');
 
@@ -835,4 +839,35 @@ export class DropDown {
       }
     });
   }
+
+  /**
+   * Приватный метод экземпляра класса DropDown
+   * @protected
+   * @param {boolean} nativeSelectMode 
+   * @description Изменяет отображение селекта на мобильных устройствах
+   * @method #SelectMode
+   */
+  #SelectMode(nativeSelectMode){
+    let win = window.outerWidth;
+
+    if(nativeSelectMode === true){
+      const select = this.#element.querySelector('.cg-select');
+      const list = this.#element.querySelector('.list');
+      const nativeSelect = this.#element.querySelector('.nativeSelect');
+
+
+      // if(win < 576){
+       
+        
+      // } else if( win > 576){
+      //   select.classList.remove('displayHide');
+      //   list.classList.remove('displayHide');
+      //   nativeSelect.classList.remove('nativeSelectActive');
+      //   nativeSelect.classList.add('displayHide');
+      // }
+    } else{
+      return
+    }
+
+  }
 }

src/main.scss

@@ -258,8 +258,11 @@ input[type='checkbox'] {
 .label {
   color: white;
 }
+
 //-------Behavior--------
+
 .active {
+  text-align: start;
   background: #8282822c;
 }
 
@@ -270,7 +273,7 @@ input[type='checkbox'] {
   -ms-transition: 0.5s;
   -o-transition: 0.5s;
 
-  display: block;
+  display: block !important;
   opacity: 1;
 
   &_none {
@@ -289,7 +292,7 @@ input[type='checkbox'] {
 }
 
 .displayHide {
-  display: none;
+  display: none !important;
 }
 
 /*320px - 576px*/

src/page/index.html

@@ -4,6 +4,15 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      property="og:description"
+      content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="cg-select" />
+    <meta property="og:url" content="https://cg-select.itguild.info" />
+    <meta property="og:image" content="/src/images/logoCG.jpg" />
+
     <title>Cg-Select</title>
     <link href="/src/page/example.scss" rel="stylesheet" />
   </head>
@@ -66,6 +75,51 @@
         </form>
       </div>
 
+      <div class="example-select">
+        <h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
+
+        <form method="get" class="form">
+          <p style="margin-left: 15px; color: white">
+            *При мобильном разрешении появляеться нативный селект.
+          </p>
+          <div class="layout-select">
+            <button class="cg-dropdown cg-dropdown_selectNative"></button>
+          </div>
+
+          <input type="submit" value="Отправить!" class="example-select_submit" />
+
+          <button type="button" class="check-code" id="first">Посмотреть код</button>
+          <code id="codeFirst">
+            <pre>
+              <span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
+                selector: <span class="code__string">'.cg-dropdown_one',</span> 
+                placeholder: <span class="code__string">'Выберите авто',</span> 
+                nativeSelectMode: <span class="code__keyword">true,</span>
+                items: [
+                  <span class="code__string">'BMW',</span>
+                  {
+                    id: <span class="code__string">'213sade',</span>
+                    title: <span class="code__string">'Opel',</span>
+                    value: 1,
+                  },
+                  <span class="code__string">'Mersedes',</span> 
+                  <span class="code__string">'MAN',</span>  
+                  <span class="code__string">'Ferari',</span> 
+                ],
+                styles: {
+                  head: {
+                    width: <span class="code__string">'830px',</span> 
+                  },
+                  list: {
+                    width: <span class="code__string">'824px',</span> 
+                  },
+                },
+              });
+            </pre>
+          </code>
+        </form>
+      </div>
+
       <div class="example-select">
         <h1 class="example-select_title">Селект с данными с URL</h1>
         <div class="layout-select">

src/page/index.js

@@ -34,6 +34,33 @@ const dropdown = new DropDown({
 
 // dropdown.addLenguage(ger);
 
+const dropdownNativeSelect = new DropDown({
+  selector: '.cg-dropdown_selectNative',
+  placeholder: 'Выберите авто',
+  nativeSelectMode: true,
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+    'Kamaz',
+    'Ural'
+  ],
+  styles: {
+    head: {
+      width: '830px',
+    },
+    list: {
+      width: '824px',
+    },
+  },
+});
+
 // ------------------------------URL--------------------
 const dropdown3 = new DropDown({
   selector: '.cg-dropdown_three',

src/style/nativeSelect.scss

@@ -18,19 +18,31 @@
   }
 }
 
-// @media (max-width: 576px) {
+.nativeSelectActive {
-//   .nativeSelect {
+  display: block;
-//     display: block;
+}
-//     min-width: 235px;
-//     height: 50px;
 
-//     border: none;
+@media (max-width: 12450px) {
-//     border-radius: 10px;
+  .nativeSelect {
-//   }
+    display: none;
+  }
 
-//   select[multiple='multiple'] {
+  // .cg-select {
-//     color: black;
+  //   display: flex !important;
-//     background-color: white;
-//     border-radius: 0;
-//   }
   // }
+}
+
+@media (max-width: 576px) {
+  .nativeSelect {
+    min-width: 235px;
+    height: 50px;
+    border: none;
+    border-radius: 10px;
+  }
+
+  select[multiple='multiple'] {
+    color: black;
+    background-color: white;
+    border-radius: 0;
+  }
+}