Merge pull request #32 from apuc/native-select-mode

Native select mode + DIsplay Mode

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 .parcel-cache
+

CHANGELOG.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## 16.12.2022 - релиз версии 0.1.0!
+### 16.12.2022 - релиз версии 0.1.0!
 
 ### 20.12.2022 - обновление 0.1.12.
 
@@ -12,3 +12,11 @@
 
 - Изменеия в расположении файлов scss.
 - Исправлено влияние стилей селекта на JS приложение.
+
+### 29.12.2022 - обновление 0.1.17
+
+- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select).
+- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно).
+- Исправленны выявленные баги.
+- Исправленно отображение страницы с примером на мобильных устройствах.
+- Обновленна документация!

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.1.14
+## version ~ 0.1.17
 
 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
 Доступна кастомизация, мультивыбор и живой поиск по елементам.
@@ -46,7 +46,7 @@ npm i cg-select
 
 ```javascript
 import { DropDown } from 'cg-select/src/cg-select';
-import 'cg-select/src/main.scss'
+import 'cg-select/src/main.scss';
 
 const dropdown = new DropDown({
   selector: '.cg-dropdown_selector',
@@ -74,7 +74,7 @@ const dropdown = new DropDown({
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/WhiteTheme.png)
 ![image](https://github.com/apuc/cg-select/blob/main/src/images/Categories.png)
 
-Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select.
+Вся документация по CG-SELECT находится в одноименной папке. В документации описаны все методы и переменные, также есть примеры передачи настроек в select. Так же её можно открыть на странице с примером, или перейти по ссылке ниже.
 
 **Чтобы ознакомиться с ней, перейдите по ссылке -** https://cg-select.itguild.info/up_/up_/documentation/index.html
 
@@ -88,10 +88,10 @@ const dropdown = new DropDown({
 
 ## Compatibility
 
-Совместимость с приложениями |  JS  |  React  | Angular |  Vue |
+| Совместимость с приложениями |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
-| -------------------------- | :--: | :-----: | :-----: | :--: |
+| ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
 | CG-SELECT                    | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
-| Комментарий                | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
+| Комментарий                  |            Протестирован в Js приложениях и работает успешно.            |                                                 Работает только с костылем в виде `setTimeout()`                                                 |                             пока недоступно                             |                           тесты не проведены                            |
 
 ## History
 

documentation/DropDown.html

@@ -110,10 +110,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -134,10 +131,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/cg-dropdown.js.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>JSDoc: Source: cg-dropdown.js</title>
+    <title>JSDoc: Source: cg-select.js</title>
 
     <script src="scripts/prettify/prettify.js"></script>
     <script src="scripts/prettify/lang-css.js"></script>
@@ -15,7 +15,7 @@
 
   <body>
     <div id="main">
-      <h1 class="page-title">Source: cg-dropdown.js</h1>
+      <h1 class="page-title">Source: cg-select.js</h1>
 
       <section>
         <article>
@@ -116,7 +116,9 @@
                 darkTheme: true/false,
                 searchMode: true/false,
                 closeOnSelect:  true/false,
-                lenguage: 'ru/en',
+                nativeSelectMode: true/false,
+                listDisplayMode: true/false,
+                language: 'ru/en',
                 styles: {
                   head: {
                     background: '...',
@@ -238,11 +240,14 @@
               }
           
               const select = this.#element.querySelector('.cg-select');
+              const nativeSelect = this.#element.querySelector('.nativeSelect');
               if (value === true) {
                 this.#element.setAttribute('disabled', true);
+                nativeSelect.setAttribute('disabled', true);
                 select.classList.add('disabled');
               } else {
                 this.#element.removeAttribute('disabled');
+                nativeSelect.removeAttribute('disabled');
                 select.classList.remove('disabled');
               }
             }
@@ -255,11 +260,18 @@
              * @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;
@@ -269,14 +281,18 @@
           
             /**
              * Метод экземпляра класса DropDown
-             * @param {object} lenguage объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
+             * @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
              * @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
-             * @method addLenguage
+             * @method addLanguage
              */
-            addLenguage(lenguage) {
+            addLanguage(language) {
-              const { placeholder, textInListSearch } = lenguage;
+              const { placeholder, textInListSearch, selectPlaceholder } = language;
               const { searchMode } = this.#options;
           
+              const select = this.#element.querySelector('.selected');
+              const textNodeSelect = document.createTextNode(selectPlaceholder);
+              select.appendChild(textNodeSelect);
+          
               if (searchMode &amp;&amp; searchMode == true) {
                 const search = this.#element.querySelector('.inputSearch');
                 const textNoRezult = this.#element.querySelector('.noRezult');
@@ -323,9 +339,10 @@
           
               const elem = document.querySelector(options.selector);
           
-              if (!elem) {
+              //TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
-                throw new Error(`Element with selector ${options.selector}`);
+              // if (!elem) {
-              }
+              //   throw new Error(`Element with selector ${options.selector}`);
+              // }
           
               this.#element = elem;
           
@@ -368,14 +385,18 @@
              * @protected
              */
             #initSelected(select) {
-              const { styles, selected, placeholder, lable } = this.#options;
+              const { styles, selected, placeholder, lable, language } = this.#options;
           
               if (selected) {
                 createSelected(this.#element, selected);
               } else if (placeholder) {
                 createSelected(this.#element, placeholder);
               } else {
-                createSelected(this.#element, 'Select...');
+                if (language &amp;&amp; language === 'ru') {
+                  createSelected(this.#element, ru.selectPlaceholder);
+                } else {
+                  createSelected(this.#element, en.selectPlaceholder);
+                }
               }
           
               if (select) {
@@ -405,7 +426,13 @@
              * @description Рендер елементов в селекте.
              */
             #render(select) {
-              const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = 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 &amp;&amp; styles)) {
@@ -422,12 +449,13 @@
               this.random = random;
           
               if (searchMode) {
-                if (lenguage === 'ru') {
+                if (language === 'ru') {
                   inputSearch = createInputSearch(random, ru.placeholder);
                 } else {
                   inputSearch = createInputSearch(random, en.placeholder);
                 }
-          
+                const { search } = styles;
+                customStylesFormat(search, inputSearch);
                 ulList.appendChild(inputSearch);
               }
           
@@ -491,9 +519,19 @@
                 this.#checkTheme();
               }
           
+              if(nativeSelectMode === true){
+                this.#selectMode(nativeSelectMode);
+              }
+          
+          
+          
               this.#list = this.#element.querySelector('.list');
               this.#caret = this.#element.querySelector('.caret');
           
+              if(listDisplayMode === true){
+                this.#displayMode(listDisplayMode)
+              }
+          
               this.#addOptionsBehaviour();
             }
           
@@ -751,14 +789,14 @@
              * @method #searchMode
              */
             #searchMode(random) {
-              const { lenguage } = this.#options;
+              const { language } = this.#options;
           
               const input = this.#element.querySelector(`#searchSelect-${random}`);
               const searchSelect = this.#element.querySelectorAll('.list__item');
               const result = document.createElement('p');
           
               let textNode = '';
-              if (lenguage === 'ru') {
+              if (language &amp;&amp; language === 'ru') {
                 textNode = document.createTextNode(`${ru.textInListSearch}`);
               } else {
                 textNode = document.createTextNode(`${en.textInListSearch}`);
@@ -774,17 +812,22 @@
               });
           
               input.oninput = function () {
-                let val = this.value.trim();
+                let valueSearch = this.value.trim().toLowerCase();
+                let anyMatch = false;
           
-                if (val != '') {
+                if (valueSearch != '') {
                   searchSelect.forEach((elem) => {
-                    if (elem.innerText.search(val) == -1) {
+                    let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
+                    anyMatch = anyMatch || isMatching;
+          
+                    if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
                       elem.classList.add('displayHide');
-                      result.classList.remove('displayHide');
                     } else {
                       elem.classList.remove('displayHide');
                     }
                   });
+          
+                  result.classList.toggle('displayHide', anyMatch);
                 } else {
                   searchSelect.forEach((elem) => {
                     elem.classList.remove('displayHide');
@@ -838,6 +881,64 @@
                 }
               });
             }
+          
+            /**
+             * Приватный метод экземпляра класса 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 &lt; 576){
+                  select.classList.add('displayHide');
+                  list.classList.add('displayHide');
+                  nativeSelect.classList.add('nativeSelectActive');       
+                } else if( win > 576){
+                  select.classList.remove('displayHide');
+                  list.classList.remove('displayHide');
+                  nativeSelect.classList.remove('nativeSelectActive');
+                  nativeSelect.classList.add('displayHide');
+                }
+              } else{
+                return
+              }
+          
+            }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
+             * @description Изменяет отображение листа с выбором в виде модального окна.
+             * @method #displayMode
+             */
+            #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
+              }
+          
+            }
           }
 </code></pre>
         </article>
@@ -850,10 +951,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -874,10 +972,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/constructor.html

@@ -86,7 +86,9 @@
               darkTheme: true/false,
               searchMode: true/false,
               closeOnSelect:  true/false,
-      lenguage: 'ru/en',
+              nativeSelectMode: true/false,
+              listDisplayMode: true/false,
+              language: 'ru/en',
               styles: {
                 head: {
                   background: '...',
@@ -112,28 +114,34 @@
               <strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
               который задаеться при создании селекта.
             </li>
+
             <li>
               <strong>selected</strong> - необязательный параметр, в который передается элемент
               который будет выбран изначально в селекте.
             </li>
+
             <li>
               <strong>placeholder</strong> - необязательный параметр, в который передается текст
               плейсхолдера селекта.
             </li>
+
             <li>
               <strong>items</strong> -
               <strong
                 >*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
               >, это массив елементов, которые будут отображаться в селекте при выборе.
             </li>
+
             <li>
               <strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
               светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
             </li>
+
             <li>
               <strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
               по элеметам селекта.
             </li>
+
             <li>
               <strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
               поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
@@ -142,16 +150,33 @@
             </li>
 
             <li>
-              <strong>lenguage</strong> - необязательный параметр, отвечающий за локализацию
+              <strong>nativeSelectMode</strong> - необязательный параметр, который отвечает за
+              поведения селекта при открытии на мобильных усторйствах, если nativeSelectMode: false,
+              тогда на мобильном устройстве будет отображаться и работать дефолтное поведение как на
+              десктопной версии, а если nativeSelectMode: true, то на мобильном устройстве будет
+              отображаться нативный селект из HTML 5;
+            </li>
+
+            <li>
+              <strong>listDisplayMode</strong> - необязательный параметр, который отвечает за
+              поведения селекта при открытии, если listDisplayMode: false, тогда лист с выбором
+              опции отображаться как обычный выпадающий список. Если listDisplayMode: true, то лист
+              с выбором опции будет отображаться как модальное окно.
+            </li>
+
+            <li>
+              <strong>language</strong> - необязательный параметр, отвечающий за локализацию
               некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
-              локализацию, с помощью функции <a href="global.html#addLenguage">addLanguage()</a>,
+              локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
               передав туда объект с полями для текста.
             </li>
+
             <li>
               <strong>event</strong> - необязательный параметр, который отвечает за поведения
               селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
               открываться при наведении.
             </li>
+
             <li>
               <strong>url</strong> -
               <strong
@@ -160,16 +185,19 @@
               >
               htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
             </li>
+
             <li>
               <strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
               селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
               отрисовываются как обычный текст, через запятую.
             </li>
+
             <li>
               <strong>multiselectTag</strong> - необязательный параметр, который отвечает за
               поведения селекта, для него,
               <strong>***работает только в месте с подключением multiselect.</strong>
             </li>
+
             <li>
               <strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
               элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
@@ -186,10 +214,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -210,10 +235,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/create-element.js.html

@@ -153,10 +153,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -177,10 +174,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/global.html

@@ -158,6 +158,104 @@
             </dd>
           </dl>
 
+          <h4 class="name" id="displayMode">
+            <span class="type-signature">(protected) </span>#displayMode<span class="signature"
+              >(listDisplayMode)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">
+            Изменяет отображение листа с выбором в виде модального окна.
+          </div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>listDisplayMode</code></td>
+
+                <td class="type">
+                  <span class="param-type">boolean</span>
+                </td>
+
+                <td class="description last">
+                  параметр отвечающий за отображение выбора в виде модального окна.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
+                  <a href="cg-dropdown.js.html#line895">line 895</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h4 class="name" id="selectMode">
+            <span class="type-signature">(protected) </span>#selectMode<span class="signature"
+              >(nativeSelectMode)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">Изменяет отображение селекта на мобильных устройствах</div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>nativeSelectMode</code></td>
+
+                <td class="type">
+                  <span class="param-type">boolean</span>
+                </td>
+
+                <td class="description last">
+                  параметр отвечающий за добавления нативного селекта.
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
+                  <a href="cg-dropdown.js.html#line864">line 864</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
           <h4 class="name" id="initEvent">
             <span class="type-signature">(protected) </span>#initEvent<span class="signature"
               >()</span
@@ -440,7 +538,7 @@
           </dl>
 
           <h4 class="name" id="addLenguage">
-            <span class="type-signature"></span>addLenguage<span class="signature">(lenguage)</span
+            <span class="type-signature"></span>addLanguage<span class="signature">(language)</span
             ><span class="type-signature"></span>
           </h4>
 
@@ -464,7 +562,7 @@
 
             <tbody>
               <tr>
-                <td class="name"><code>lenguage</code></td>
+                <td class="name"><code>language</code></td>
 
                 <td class="type">
                   <span class="param-type">object</span>
@@ -758,7 +856,7 @@
             <dd class="tag-source">
               <ul class="dummy">
                 <li>
-                  <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
+                  <a href="cg-dropdown.js.html">cg-select.js</a>,
                   <a href="cg-dropdown.js.html#line173">line 173</a>
                 </li>
               </ul>
@@ -774,10 +872,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -798,10 +893,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/index.html

@@ -19,7 +19,7 @@
 
       <section>
         <h2>CG-SELECT</h2>
-        <a href="/src/page/index.html">-- Вернуться к примеру --</a>
+        <a href="/example/index.html">-- Вернуться к примеру --</a>
         <p>
           Этот компонент предлагает более гибкую настройку и использование селекта. Так же
           реализованны методы взаимодействия с селектом.
@@ -35,10 +35,7 @@
         </ul>
         <p>
           <strong>*Все настройки можно посмореть в вкладке</strong>
-          <a
+          <a href="constructor.html">Конструктор класса</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса</a
-          >
         </p>
 
         <h5>Доступна возможность кастомизации основных элементов, таких как:</h5>
@@ -59,10 +56,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -83,10 +77,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/module-Utils.html

@@ -618,10 +618,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -642,10 +639,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/module-createElementChips.html

@@ -260,10 +260,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -284,10 +281,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

documentation/utils.js.html

@@ -257,10 +257,7 @@
       <ul>
         <li><a href="DropDown.html">DropDown</a></li>
         <li>
-          <a
+          <a href="constructor.html">Конструктор класса DropDown</a>
-            href="%25D0%259A%25D0%25BE%25D0%25BD%25D1%2581%25D1%2582%25D1%2580%25D1%2583%25D0%25BA%25D1%2582%25D0%25BE%25D1%2580%2520%25D0%25BA%25D0%25BB%25D0%25B0%25D1%2581%25D1%2581%25D0%25B0%2520DropDown.html"
-            >Конструктор класса DropDown</a
-          >
         </li>
       </ul>
       <h3>Modules</h3>
@@ -281,10 +278,12 @@
         <li><a href="global.html#render">#render</a></li>
         <li><a href="global.html#renderUrl">#renderUrl</a></li>
         <li><a href="global.html#searchMode">#searchMode</a></li>
+        <li><a href="global.html#displayMode">#displayMode</a></li>
+        <li><a href="global.html#selectMode">#selectMode</a></li>
       </ul>
       <h3>Public methods</h3>
       <ul>
-        <li><a href="global.html#addLenguage">addLenguage</a></li>
+        <li><a href="global.html#addLanguage">addLanguage</a></li>
         <li><a href="global.html#addItem">addItem</a></li>
         <li><a href="global.html#buttonControl">buttonControl</a></li>
         <li><a href="global.html#deleteItem">deleteItem</a></li>

example/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")
+})

example/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;
+  }
+}

example/index.html

@@ -4,8 +4,17 @@
     <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" />
+    <link href="example.scss" rel="stylesheet" />
   </head>
   <body class="body-example">
     <div class="container">
@@ -18,7 +27,7 @@
         <nav>
           <ul class="navlist">
             <li><a href="">Home</a></li>
-            <li><a href="/documentation/index.html">Documentation</a></li>
+            <li><a href="../documentation/index.html">Documentation</a></li>
           </ul>
         </nav>
       </header>
@@ -66,6 +75,93 @@
         </form>
       </div>
 
+      <div class="example-select">
+        <h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
+
+        <form method="get" class="form">
+          <p style="margin-left: 12px; color: white">
+            *При мобильном разрешении появляеться нативный селект.
+          </p>
+          <div class="layout-select">
+            <button class="cg-dropdown cg-dropdown_selectNative"></button>
+          </div>
+
+          <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> 
+                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">
+        <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">
@@ -218,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>

example/index.js

@@ -27,12 +27,59 @@ const dropdown = new DropDown({
   },
 });
 
-// const ger = {
+// ------------------------------NativeSelect-----------------------
-//   placeholder: 'searcH????',
+const dropdownNativeSelect = new DropDown({
-//   textInListSearch: 'None',
+  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',
+    },
+  },
+});
 
-// dropdown.addLenguage(ger);
+// ------------------------------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({

index.js

@@ -0,0 +1,4 @@
+import { DropDown } from './src/cg-select';
+
+
+export default DropDown;

package.json

@@ -1,15 +1,16 @@
 {
   "name": "cg-select",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",
     "url": "https://github.com/apuc/"
   },
   "homepage": "https://cg-select.itguild.info",
+  "main": "dist/index.js",
   "scripts": {
-    "start": "parcel src/page/index.html -p 4500 --open ",
+    "start": "parcel example/index.html -p 4500 --open ",
-    "build": "parcel build ./src/page/index.html",
+    "build": "parcel build index.js",
     "deploy": "gh-pages -d dist",
     "predeploy": "npm run build"
   },
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.7.0",
+    "jsdoc": "^4.0.0",
     "parcel": "^2.7.0",
     "prettier": "^2.7.1"
   },

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 } = 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)) {
@@ -483,9 +498,19 @@ export class DropDown {
       this.#checkTheme();
     }
 
+    if(nativeSelectMode === true){
+      this.#selectMode(nativeSelectMode);
+    }
+
+
+
     this.#list = this.#element.querySelector('.list');
     this.#caret = this.#element.querySelector('.caret');
 
+    if(listDisplayMode === true){
+      this.#displayMode(listDisplayMode)
+    }
+
     this.#addOptionsBehaviour();
   }
 
@@ -835,4 +860,62 @@ 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){
+        select.classList.add('displayHide');
+        list.classList.add('displayHide');
+        nativeSelect.classList.add('nativeSelectActive');       
+      } else if( win > 576){
+        select.classList.remove('displayHide');
+        list.classList.remove('displayHide');
+        nativeSelect.classList.remove('nativeSelectActive');
+        nativeSelect.classList.add('displayHide');
+      }
+    } else{
+      return
+    }
+
+  }
+
+  /**
+   * Приватный метод экземпляра класса DropDown
+   * @protected
+   * @param {boolean} listDisplayMode параметр отвечающий за отображение выбора в виде модального окна.
+   * @description Изменяет отображение листа с выбором в виде модального окна.
+   * @method #displayMode
+   */
+  #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/index.js

@@ -1,3 +0,0 @@
-import { DropDown } from './cg-select';
-
-export default DropDown;

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 {
@@ -258,8 +259,11 @@ input[type='checkbox'] {
 .label {
   color: white;
 }
+
 //-------Behavior--------
+
 .active {
+  text-align: start;
   background: #8282822c;
 }
 
@@ -270,7 +274,7 @@ input[type='checkbox'] {
   -ms-transition: 0.5s;
   -o-transition: 0.5s;
 
-  display: block;
+  display: block !important;
   opacity: 1;
 
   &_none {
@@ -289,7 +293,7 @@ input[type='checkbox'] {
 }
 
 .displayHide {
-  display: none;
+  display: none !important;
 }
 
 /*320px - 576px*/
@@ -299,23 +303,13 @@ input[type='checkbox'] {
     padding: 0;
   }
 
-  .container {
-    width: 90%;
-
-    .header {
-      h1 {
-        font-size: 32px;
-      }
-    }
-  }
-
   .list {
     width: 98% !important;
   }
 
-  // .open {
+  .listModal {
-  //   display: none !important;
+    width: 88% !important;
-  // }
+  }
 
   .cg-select {
     width: 100% !important;

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;
+}

src/style/nativeSelect.scss

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