This commit is contained in:
Victor
2022-12-30 22:00:13 +03:00
parent 9d46709478
commit d36b960876
4 changed files with 50 additions and 555 deletions

View File

@@ -239,11 +239,10 @@ export class DropDown {
* @method buttonControl
*/
buttonControl(button, method) {
const {listDisplayMode} = this.#options;
const { listDisplayMode } = this.#options;
if(listDisplayMode === true){
return
if (listDisplayMode === true) {
return;
}
this.btn = button;
@@ -405,11 +404,15 @@ export class DropDown {
* @description Рендер елементов в селекте.
*/
#render(select) {
const {
styles, multiselect,
searchMode, multiselectTag,
darkTheme, language,
nativeSelectMode, listDisplayMode
const {
styles,
multiselect,
searchMode,
multiselectTag,
darkTheme,
language,
nativeSelectMode,
listDisplayMode,
} = this.#options;
const random = Math.random().toString(36).substring(2, 10);
@@ -498,17 +501,15 @@ export class DropDown {
this.#checkTheme();
}
if(nativeSelectMode === true){
if (nativeSelectMode === true) {
this.#selectMode(nativeSelectMode);
}
this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
if(listDisplayMode === true){
this.#displayMode(listDisplayMode)
if (listDisplayMode === true) {
this.#displayMode(listDisplayMode);
}
this.#addOptionsBehaviour();
@@ -868,28 +869,27 @@ export class DropDown {
* @description Изменяет отображение селекта на мобильных устройствах
* @method #selectMode
*/
#selectMode(nativeSelectMode){
#selectMode(nativeSelectMode) {
let win = window.outerWidth;
if(nativeSelectMode === true){
if (nativeSelectMode === true) {
const select = this.#element.querySelector('.cg-select');
const list = this.#element.querySelector('.list');
const nativeSelect = this.#element.querySelector('.nativeSelect')
const nativeSelect = this.#element.querySelector('.nativeSelect');
if(win < 576){
if (win < 576) {
select.classList.add('displayHide');
list.classList.add('displayHide');
nativeSelect.classList.add('nativeSelectActive');
} else if( win > 576){
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
} else {
return;
}
}
/**
@@ -899,23 +899,22 @@ export class DropDown {
* @description Изменяет отображение листа с выбором в виде модального окна.
* @method #displayMode
*/
#displayMode(listDisplayMode){
if(listDisplayMode === true){
#displayMode(listDisplayMode) {
if (listDisplayMode === true) {
const modal = document.createElement('div');
const body = document.querySelector('body')
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')
body.classList.toggle('overflowHide');
});
} else{
return
} else {
return;
}
}
}