diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d2f3ce..f1436f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ - Изменеия в расположении файлов scss. - Исправлено влияние стилей селекта на JS приложение. -### ..... - обновление 0.1.1- +### ..... - обновление 0.1.16 -- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select) +- Добавленна возможность менять отображения селекта на телефонах (нативный/cg-select). +- Добавленна возможность менять отображения листа с выбором (обычный/модальное окно) diff --git a/src/cg-select.js b/src/cg-select.js index c38ade4..2c2336b 100644 --- a/src/cg-select.js +++ b/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 + } + + } } diff --git a/src/main.scss b/src/main.scss index 6144c11..6a42d86 100644 --- a/src/main.scss +++ b/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; diff --git a/src/page/example.js b/src/page/example.js index 98c3da0..f807677 100644 --- a/src/page/example.js +++ b/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") +}) \ No newline at end of file diff --git a/src/page/example.scss b/src/page/example.scss index b196547..b1bd873 100644 --- a/src/page/example.scss +++ b/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; + } +} diff --git a/src/page/index.html b/src/page/index.html index a294766..1f010d6 100644 --- a/src/page/index.html +++ b/src/page/index.html @@ -79,17 +79,15 @@

Дефолтный селект с функцией nativeSelectMode

-

+

*При мобильном разрешении появляеться нативный селект.

- - - - + + 
               const dropdown = new DropDown({
                 selector: '.cg-dropdown_one', 
@@ -120,6 +118,50 @@
         
       
 
+      

+        
Дефолтный селект с функцией listDisplayMode

+
+        

+          

+            *При использовании данного метода лист с выбором появляеться как модальное окно.
+          

+          

+            
+          

+
+          
+
+          
+            
+              const dropdown = 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

         

@@ -272,7 +314,7 @@
         
Функция disabled

 
         
-        
+        
 
         

           
diff --git a/src/page/index.js b/src/page/index.js
index 8bba396..97649f8 100644
--- a/src/page/index.js
+++ b/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',
diff --git a/src/style/displayMode.scss b/src/style/displayMode.scss
new file mode 100644
index 0000000..4053578
--- /dev/null
+++ b/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;
+}