Fixed bugs and added methods in DisplayMode

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Изменеия в расположении файлов scss.
 - Исправлено влияние стилей селекта на JS приложение.
 
-### ..... - обновление 0.1.1-
+### ..... - обновление 0.1.16
 
-- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select)
+- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select).
+- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно)

src/cg-select.js

@@ -95,6 +95,8 @@ export class DropDown {
       darkTheme: true/false,
       searchMode: true/false,
       closeOnSelect:  true/false,
+      nativeSelectMode: true/false,
+      listDisplayMode: true/false,
       language: 'ru/en',
       styles: {
         head: {
@@ -237,11 +239,18 @@ export class DropDown {
    * @method buttonControl
    */
   buttonControl(button, method) {
+    const {listDisplayMode} = this.#options;
+
+
+    if(listDisplayMode === true){
+      return
+    }
+
     this.btn = button;
     button.addEventListener('click', () => {
-      if (method === 'open') {
+      if (method.toLowerCase() === 'open') {
         this.#open(true);
-      } else if (method === 'close') {
+      } else if (method.toLowerCase() === 'close') {
         this.#close();
       } else {
         return;
@@ -396,7 +405,13 @@ export class DropDown {
    * @description Рендер елементов в селекте.
    */
   #render(select) {
-    const { styles, multiselect, searchMode, multiselectTag, darkTheme, language, nativeSelectMode } = this.#options;
+    const { 
+      styles, multiselect, 
+      searchMode, multiselectTag, 
+      darkTheme, language, 
+      nativeSelectMode, listDisplayMode 
+    } = this.#options;
+
     const random = Math.random().toString(36).substring(2, 10);
 
     if (select || (select && styles)) {
@@ -487,9 +502,15 @@ export class DropDown {
       this.#SelectMode(nativeSelectMode);
     }
 
+
+
     this.#list = this.#element.querySelector('.list');
     this.#caret = this.#element.querySelector('.caret');
 
+    if(listDisplayMode === true){
+      this.#DisplayMode(listDisplayMode)
+    }
+
     this.#addOptionsBehaviour();
   }
 
@@ -843,7 +864,7 @@ export class DropDown {
   /**
    * Приватный метод экземпляра класса DropDown
    * @protected
-   * @param {boolean} nativeSelectMode 
+   * @param {boolean} nativeSelectMode параметр отвечающий за добавления нативного селекта.
    * @description Изменяет отображение селекта на мобильных устройствах
    * @method #SelectMode
    */
@@ -858,8 +879,7 @@ export class DropDown {
       if(win < 576){
         select.classList.add('displayHide');
         list.classList.add('displayHide');
-        nativeSelect.classList.add('nativeSelectActive');
-        
+        nativeSelect.classList.add('nativeSelectActive');       
       } else if( win > 576){
         select.classList.remove('displayHide');
         list.classList.remove('displayHide');
@@ -871,4 +891,33 @@ export class DropDown {
     }
 
   }
+
+  /**
+   * Приватный метод экземпляра класса DropDown
+   * @protected
+   * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
+   * @description Изменяет отображение листа с выбором в виде модального окна.
+   * @method #DisplayMode
+   * @returns 
+   */
+  #DisplayMode(listDisplayMode){
+    if(listDisplayMode === true){
+      const modal = document.createElement('div');
+      const body = document.querySelector('body')
+      const list = this.#list;
+  
+      modal.appendChild(list);
+      this.#element.appendChild(modal);
+
+      this.#element.addEventListener('click', () => {
+        modal.classList.toggle('modal');
+        list.classList.toggle('listModal');
+        body.classList.toggle('overflowHide')
+      });
+
+    } else{
+      return
+    }
+
+  }
 }

src/main.scss

@@ -2,6 +2,7 @@
 @import './style/scrollbar.scss';
 @import './style/svgStyle.scss';
 @import './style/whiteTheme.scss';
+@import './style/displayMode.scss';
 
 // ----Layout----
 .cg-dropdown {
@@ -292,7 +293,7 @@ input[type='checkbox'] {
 }
 
 .displayHide {
-  display: none;
+  display: none !important;
 }
 
 /*320px - 576px*/
@@ -302,23 +303,13 @@ input[type='checkbox'] {
     padding: 0;
   }
 
-  .container {
-    width: 90%;
-
-    .header {
-      h1 {
-        font-size: 32px;
-      }
-    }
-  }
-
   .list {
     width: 98% !important;
   }
 
-  // .open {
-  //   display: none !important;
-  // }
+  .listModal {
+    width: 88% !important;
+  }
 
   .cg-select {
     width: 100% !important;

src/page/example.js

@@ -13,6 +13,14 @@ const codeFourth = document.getElementById('codeFourth');
 const fifthBtn = document.getElementById('fifth');
 const codeFifth = document.getElementById('codeFifth');
 
+const six = document.getElementById('six')
+const codeSix = document.getElementById('codeSix');
+
+
+const Native = document.getElementById('Native')
+const codeNative = document.getElementById('codeNative')
+
+
 firstBtn.addEventListener('click', () => {
     codeFirst.classList.toggle("active")
 })
@@ -32,3 +40,11 @@ fourthBtn.addEventListener('click', () => {
 fifthBtn.addEventListener('click', () => {
     codeFifth.classList.toggle("active")
 })
+
+six.addEventListener('click', () => {
+    codeSix.classList.toggle("active")
+})
+
+Native.addEventListener('click', () => {
+    codeNative.classList.toggle("active")
+})

src/page/example.scss

@@ -87,7 +87,6 @@
 
 .content {
   margin-top: 15px;
-  // background-color: #6b6d76;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -113,7 +112,6 @@
   }
 
   &_submit {
-    //background-color: #2a2f3b;
     width: 200px;
     height: 35px;
     border-radius: 10px;
@@ -194,3 +192,21 @@ pre {
 .active {
   display: block;
 }
+
+@media (max-width: 576px) {
+  .container {
+    width: 95%;
+  }
+
+  .header {
+    margin-top: 15px;
+    h1 {
+      font-size: 32px;
+    }
+  }
+
+  .example-select_title {
+    font-size: 14px;
+    height: 40px;
+  }
+}

src/page/index.html

@@ -79,17 +79,15 @@
         <h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
 
         <form method="get" class="form">
-          <p style="margin-left: 15px; color: white">
+          <p style="margin-left: 12px; 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">
+          <button type="button" class="check-code" id="Native">Посмотреть код</button>
+          <code id="codeNative">
             <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> 
@@ -120,6 +118,50 @@
         </form>
       </div>
 
+      <div class="example-select">
+        <h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
+
+        <form method="get" class="form">
+          <p style="margin-left: 12px; color: white">
+            *При использовании данного метода лист с выбором появляеться как модальное окно.
+          </p>
+          <div class="layout-select">
+            <button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
+          </div>
+
+          <button type="button" class="check-code" id="six">Посмотреть код</button>
+
+          <code id="codeSix">
+            <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_listDisplayMode',</span> 
+                placeholder: <span class="code__string">'Выберите авто',</span> 
+                listDisplayMode: <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">
@@ -272,7 +314,7 @@
         <h1 class="example-select_title">Функция disabled</h1>
 
         <input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
-        <label for="checkboxDisable">Вы согласны на обработку данных</label>
+        <label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
 
         <div class="layout-select">
           <button class="cg-dropdown cg-dropdown_checkboxDisable"></button>

src/page/index.js

@@ -27,13 +27,7 @@ const dropdown = new DropDown({
   },
 });
 
-// const ger = {
-//   placeholder: 'searcH????',
-//   textInListSearch: 'None',
-// };
-
-// dropdown.addLenguage(ger);
-
+// ------------------------------NativeSelect-----------------------
 const dropdownNativeSelect = new DropDown({
   selector: '.cg-dropdown_selectNative',
   placeholder: 'Выберите авто',
@@ -61,6 +55,32 @@ const dropdownNativeSelect = new DropDown({
   },
 });
 
+// ------------------------------listDisplayMode--------------------
+const dropdownlistDisplayMode = new DropDown({
+  selector: '.cg-dropdown_listDisplayMode',
+  placeholder: 'Выберите авто',
+  listDisplayMode: true,
+  items: [
+    'BMW',
+    {
+      id: '213sade',
+      title: 'Opel',
+      value: 1,
+    },
+    'Mersedes',
+    'MAN',
+    'Ferari',
+  ],
+  styles: {
+    head: {
+      width: '830px',
+    },
+    list: {
+      width: '824px',
+    },
+  },
+});
+
 // ------------------------------URL--------------------
 const dropdown3 = new DropDown({
   selector: '.cg-dropdown_three',

src/style/displayMode.scss

@@ -0,0 +1,24 @@
+.modal {
+  display: flex;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.45);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 9999;
+
+  &_active {
+    display: flex;
+  }
+}
+
+.listModal {
+  position: fixed !important;
+  top: 150px;
+}
+
+.overflowHide {
+  overflow: hidden;
+}