From 084c823b13a6b59d46752d3d9acdb49b8fc3f248 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 26 Dec 2022 20:02:35 +0300 Subject: [PATCH] Added nativeSelectMode and Meta-data --- src/cg-select.js | 37 ++++++++++++++++++++++++- src/main.scss | 7 +++-- src/page/index.html | 54 +++++++++++++++++++++++++++++++++++++ src/page/index.js | 27 +++++++++++++++++++ src/style/nativeSelect.scss | 40 +++++++++++++++++---------- 5 files changed, 148 insertions(+), 17 deletions(-) diff --git a/src/cg-select.js b/src/cg-select.js index f1ffe59..9df2170 100644 --- a/src/cg-select.js +++ b/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 + } + + } } diff --git a/src/main.scss b/src/main.scss index 5ff4e87..5d0f998 100644 --- a/src/main.scss +++ b/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*/ diff --git a/src/page/index.html b/src/page/index.html index fe5a440..a294766 100644 --- a/src/page/index.html +++ b/src/page/index.html @@ -4,6 +4,15 @@ + + + + + + Cg-Select @@ -66,6 +75,51 @@ +
+

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

+ +
+

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

+
+ +
+ + + + + + 
+              const dropdown = new DropDown({
+                selector: '.cg-dropdown_one', 
+                placeholder: 'Выберите авто', 
+                nativeSelectMode: true,
+                items: [
+                  'BMW',
+                  {
+                    id: '213sade',
+                    title: 'Opel',
+                    value: 1,
+                  },
+                  'Mersedes', 
+                  'MAN',  
+                  'Ferari', 
+                ],
+                styles: {
+                  head: {
+                    width: '830px', 
+                  },
+                  list: {
+                    width: '824px', 
+                  },
+                },
+              });
+
+ +
+
+

Селект с данными с URL

diff --git a/src/page/index.js b/src/page/index.js index c1a5fc6..8bba396 100644 --- a/src/page/index.js +++ b/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', diff --git a/src/style/nativeSelect.scss b/src/style/nativeSelect.scss index c634533..98f9672 100644 --- a/src/style/nativeSelect.scss +++ b/src/style/nativeSelect.scss @@ -18,19 +18,31 @@ } } -// @media (max-width: 576px) { -// .nativeSelect { -// display: block; -// min-width: 235px; -// height: 50px; +.nativeSelectActive { + display: block; +} -// border: none; -// border-radius: 10px; -// } +@media (max-width: 12450px) { + .nativeSelect { + display: none; + } -// select[multiple='multiple'] { -// color: black; -// background-color: white; -// border-radius: 0; -// } -// } + // .cg-select { + // display: flex !important; + // } +} + +@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; + } +}