2022-10-19 20:33:37 +03:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<title>JSDoc: Source: cg-select.js</title>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
|
|
|
|
|
|
<script src="scripts/prettify/prettify.js"></script>
|
|
|
|
|
|
<script src="scripts/prettify/lang-css.js"></script>
|
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
|
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
|
|
|
|
<![endif]-->
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css" />
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="main">
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<h1 class="page-title">Source: cg-select.js</h1>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
|
|
|
|
|
|
<section>
|
|
|
|
|
|
<article>
|
|
|
|
|
|
<pre class="prettyprint source linenums"><code>import {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
createSelected,
|
|
|
|
|
|
customStyles,
|
|
|
|
|
|
getFormatItem,
|
2022-11-08 16:57:35 +03:00
|
|
|
|
getSelectText,
|
2022-10-25 21:03:10 +03:00
|
|
|
|
customStylesFormat,
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeOptionMultiple,
|
|
|
|
|
|
nativeOptionOrdinary,
|
2022-11-08 16:57:35 +03:00
|
|
|
|
clearSelect,
|
2022-10-25 21:03:10 +03:00
|
|
|
|
} from './components/utils';
|
|
|
|
|
|
import {
|
|
|
|
|
|
createBreadcrumb,
|
|
|
|
|
|
createInputSearch,
|
2022-12-23 19:18:33 +03:00
|
|
|
|
createNativeSelectOption,
|
2022-10-25 21:03:10 +03:00
|
|
|
|
createNativeSelect,
|
|
|
|
|
|
} from './components/create-element';
|
2022-11-08 16:57:35 +03:00
|
|
|
|
import { ru, en } from './language/language';
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* @class Описание класса DropDown
|
|
|
|
|
|
* @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
|
2022-12-29 17:15:19 +03:00
|
|
|
|
* @author Овсяников Максим
|
2022-10-25 21:03:10 +03:00
|
|
|
|
*/
|
|
|
|
|
|
export class DropDown {
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Созданный HTML елемент
|
|
|
|
|
|
* @type {HTMLElement}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#element;
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Созданный список(ul), с классом list
|
|
|
|
|
|
* @type {HTMLElement}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#list;
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Настройки селекта передаваемые при создании экземпляра класса
|
|
|
|
|
|
* @type {object}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#options;
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Переменная для управления каретки
|
|
|
|
|
|
* @type {HTMLElement}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#caret;
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Массив переданных элементов
|
|
|
|
|
|
* @type {object[]}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#items;
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Переданные категории
|
|
|
|
|
|
* @type {string}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#category;
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Выбранный или массив выбранных элементов из списка
|
|
|
|
|
|
* @type {object[] | object}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#selectedItems;
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Массив индексов выбранных элементов
|
|
|
|
|
|
* @type {number[]}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#indexes = [];
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @returns {string[] | string | null} Возвращает выбранные элемент(ы) в виде массива/элемента/null
|
|
|
|
|
|
* @description Геттер возвращающий выбранные элемент(ы) селекта
|
|
|
|
|
|
*/
|
|
|
|
|
|
get value() {
|
|
|
|
|
|
return this.#selectedItems ?? null;
|
2022-10-19 20:33:37 +03:00
|
|
|
|
}
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
|
|
|
|
|
|
* @description Геттер возвращающий индексы выбранных элемента(ов) селекта
|
|
|
|
|
|
*/
|
|
|
|
|
|
get indexes() {
|
|
|
|
|
|
return this.#indexes ?? [];
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
*
|
|
|
|
|
|
* @param {object} options Объект принимающий настройки селекта
|
|
|
|
|
|
* @constructor Конструктор класса DropDown
|
|
|
|
|
|
* @description Конструктор принимает объект и рендерит селект.
|
|
|
|
|
|
* @example
|
|
|
|
|
|
* options = {
|
|
|
|
|
|
* selector: 'Уникальный селектор',
|
|
|
|
|
|
selected: 'Выбранный элемент',
|
|
|
|
|
|
placeholder: '...',
|
|
|
|
|
|
items: [string|number|object],
|
2022-11-08 16:57:35 +03:00
|
|
|
|
darkTheme: true/false,
|
|
|
|
|
|
searchMode: true/false,
|
|
|
|
|
|
closeOnSelect: true/false,
|
2022-12-29 17:15:19 +03:00
|
|
|
|
nativeSelectMode: true/false,
|
|
|
|
|
|
listDisplayMode: true/false,
|
|
|
|
|
|
language: 'ru/en',
|
2022-10-25 21:03:10 +03:00
|
|
|
|
styles: {
|
|
|
|
|
|
head: {
|
|
|
|
|
|
background: '...',
|
|
|
|
|
|
},
|
|
|
|
|
|
list: {...},
|
|
|
|
|
|
chips: {...},
|
|
|
|
|
|
caret: {...},
|
|
|
|
|
|
placeholder: {...},
|
2022-11-08 16:57:35 +03:00
|
|
|
|
lable: {..},
|
2022-10-25 21:03:10 +03:00
|
|
|
|
},
|
|
|
|
|
|
event: '...',
|
|
|
|
|
|
url: 'http/...',
|
|
|
|
|
|
multiselect: true/false,
|
|
|
|
|
|
multiselectTag: true/false,
|
|
|
|
|
|
* }
|
|
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
constructor(options = {}) {
|
|
|
|
|
|
this.#init(options);
|
|
|
|
|
|
this.#render();
|
|
|
|
|
|
this.#initEvent();
|
2022-11-08 16:57:35 +03:00
|
|
|
|
this.#closeSelectClick();
|
2022-10-25 21:03:10 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @param {string | object} item добавляемый елемент
|
|
|
|
|
|
* @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
|
|
|
|
|
|
* @method addItem
|
|
|
|
|
|
*/
|
|
|
|
|
|
addItem(item) {
|
|
|
|
|
|
if (this.#category) {
|
|
|
|
|
|
console.log('can`t add item to category');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!item) {
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const index = this.#items.length;
|
|
|
|
|
|
|
|
|
|
|
|
this.#items.push(getFormatItem(item, index));
|
|
|
|
|
|
this.#render();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @param {number} index индекс удаляемого элемента
|
|
|
|
|
|
* @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
|
|
|
|
|
|
* @method deleteItem
|
|
|
|
|
|
*/
|
|
|
|
|
|
deleteItem(index) {
|
|
|
|
|
|
if (this.#category) {
|
|
|
|
|
|
console.log('can`t add item to category');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const item = this.#items[index];
|
|
|
|
|
|
|
|
|
|
|
|
this.#items.splice(index, 1);
|
|
|
|
|
|
this.#render();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @description удаляет все елементы из списка и перерисовывает его.
|
|
|
|
|
|
* @method deleteItemAll
|
|
|
|
|
|
*/
|
|
|
|
|
|
deleteItemAll() {
|
|
|
|
|
|
this.#items.splice(0, this.#items.length);
|
|
|
|
|
|
this.#render();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @param {number} index индекс выбранного элемента
|
|
|
|
|
|
* @description выбирает элемент который будет изначально отрисовываться в селекте
|
|
|
|
|
|
* @method selectIndex
|
|
|
|
|
|
*/
|
|
|
|
|
|
selectIndex(index) {
|
|
|
|
|
|
if (this.#category) {
|
|
|
|
|
|
console.log('can`t add item to category');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const options = this.#element.querySelectorAll('.list__item');
|
|
|
|
|
|
|
|
|
|
|
|
if (index > options.length) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const select = options[index].innerText;
|
|
|
|
|
|
this.#render(select);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @param {number} numberItem номер возвращаемого элемента
|
|
|
|
|
|
* @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
|
|
|
|
|
|
* @method getElement
|
|
|
|
|
|
*/
|
|
|
|
|
|
getElement(numberItem) {
|
|
|
|
|
|
if (numberItem > this.#items.length) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
return this.#items[numberItem];
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @param {boolean} value - Передаваемый параметр для добавления атрибута disabled;
|
|
|
|
|
|
* @description Метод позволяющий переключать состояние селекта disabled,
|
|
|
|
|
|
* @method disabled
|
|
|
|
|
|
*/
|
|
|
|
|
|
disabled(value) {
|
|
|
|
|
|
if (typeof value !== 'boolean') {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const select = this.#element.querySelector('.cg-select');
|
2022-12-29 17:15:19 +03:00
|
|
|
|
const nativeSelect = this.#element.querySelector('.nativeSelect');
|
2022-10-25 21:03:10 +03:00
|
|
|
|
if (value === true) {
|
|
|
|
|
|
this.#element.setAttribute('disabled', true);
|
2022-12-29 17:15:19 +03:00
|
|
|
|
nativeSelect.setAttribute('disabled', true);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
select.classList.add('disabled');
|
2022-10-19 20:33:37 +03:00
|
|
|
|
} else {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#element.removeAttribute('disabled');
|
2022-12-29 17:15:19 +03:00
|
|
|
|
nativeSelect.removeAttribute('disabled');
|
2022-10-25 21:03:10 +03:00
|
|
|
|
select.classList.remove('disabled');
|
2022-10-19 20:33:37 +03:00
|
|
|
|
}
|
2022-10-25 21:03:10 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
|
|
|
|
|
* @param {HTMLInputElement} button - HTML кнопка
|
|
|
|
|
|
* @param {string} method - метод открытия open/close
|
|
|
|
|
|
* @description Метод позволяющий открывать/закрывать селект с помощью кнопок
|
|
|
|
|
|
* @method buttonControl
|
|
|
|
|
|
*/
|
|
|
|
|
|
buttonControl(button, method) {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
const {listDisplayMode} = this.#options;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(listDisplayMode === true){
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
this.btn = button;
|
2022-10-25 21:03:10 +03:00
|
|
|
|
button.addEventListener('click', () => {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
if (method.toLowerCase() === 'open') {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#open(true);
|
2022-12-29 17:15:19 +03:00
|
|
|
|
} else if (method.toLowerCase() === 'close') {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#close();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
/**
|
|
|
|
|
|
* Метод экземпляра класса DropDown
|
2022-12-29 17:15:19 +03:00
|
|
|
|
* @param {object} language объект в котором находятся поля для подключения языка имеет два обязательных поля placeholder, textInListSearch
|
2022-11-08 16:57:35 +03:00
|
|
|
|
* @description метод позволяющий заменить плейсхолдер в поиске и текст который выводится если нет результата
|
2022-12-29 17:15:19 +03:00
|
|
|
|
* @method addLanguage
|
2022-11-08 16:57:35 +03:00
|
|
|
|
*/
|
2022-12-29 17:15:19 +03:00
|
|
|
|
addLanguage(language) {
|
|
|
|
|
|
const { placeholder, textInListSearch, selectPlaceholder } = language;
|
2022-11-08 16:57:35 +03:00
|
|
|
|
const { searchMode } = this.#options;
|
|
|
|
|
|
|
2022-12-29 17:15:19 +03:00
|
|
|
|
const select = this.#element.querySelector('.selected');
|
|
|
|
|
|
const textNodeSelect = document.createTextNode(selectPlaceholder);
|
|
|
|
|
|
select.appendChild(textNodeSelect);
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (searchMode && searchMode == true) {
|
|
|
|
|
|
const search = this.#element.querySelector('.inputSearch');
|
|
|
|
|
|
const textNoRezult = this.#element.querySelector('.noRezult');
|
|
|
|
|
|
const textNode = document.createTextNode(textInListSearch);
|
|
|
|
|
|
|
|
|
|
|
|
search.setAttribute('placeholder', placeholder);
|
|
|
|
|
|
search.setAttribute('placeholder', placeholder);
|
|
|
|
|
|
|
|
|
|
|
|
textNoRezult.innerText = '';
|
|
|
|
|
|
textNoRezult.appendChild(textNode);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод инициализации экземпляра класса DropDown
|
|
|
|
|
|
* @method #init
|
|
|
|
|
|
* @member
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
* @param {object} options передаваемые настройки селекта
|
|
|
|
|
|
* @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта.
|
|
|
|
|
|
* @example
|
|
|
|
|
|
* {
|
|
|
|
|
|
selector: '.cg-dropdown_one',
|
|
|
|
|
|
placeholder: 'Выберите авто',
|
|
|
|
|
|
items: [
|
|
|
|
|
|
'BMW',
|
|
|
|
|
|
{
|
|
|
|
|
|
id: '213sade',
|
|
|
|
|
|
title: 'Opel',
|
|
|
|
|
|
value: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
'Mersedes',
|
|
|
|
|
|
'MAN',
|
|
|
|
|
|
'max',
|
|
|
|
|
|
],
|
2022-11-08 16:57:35 +03:00
|
|
|
|
darkTheme: true,
|
2022-10-25 21:03:10 +03:00
|
|
|
|
multiselect: true,
|
|
|
|
|
|
multiselectTag: true,
|
|
|
|
|
|
}
|
|
|
|
|
|
*/
|
|
|
|
|
|
#init(options) {
|
|
|
|
|
|
this.#options = options;
|
|
|
|
|
|
const { items, multiselect, url } = this.#options;
|
|
|
|
|
|
|
|
|
|
|
|
const elem = document.querySelector(options.selector);
|
|
|
|
|
|
|
2022-12-29 17:15:19 +03:00
|
|
|
|
//TODO: для теста в реакте нужно пересмотреть необходимость этой проверки!
|
|
|
|
|
|
// if (!elem) {
|
|
|
|
|
|
// throw new Error(`Element with selector ${options.selector}`);
|
|
|
|
|
|
// }
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
this.#element = elem;
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
this.#element.addEventListener('click', (e) => {
|
|
|
|
|
|
e.preventDefault();
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#open();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.#items = [];
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselect && multiselect == true) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#selectedItems = [];
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!items && url) {
|
|
|
|
|
|
this.#renderUrl();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
items.forEach((dataItem, index) => {
|
|
|
|
|
|
if (dataItem.category && dataItem.categoryItems) {
|
|
|
|
|
|
this.#category = dataItem.category;
|
|
|
|
|
|
|
|
|
|
|
|
this.#items.push(this.#category);
|
|
|
|
|
|
dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
|
|
|
|
|
|
this.#items.push(getFormatItem(categoryItem, indexCategory));
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.#items.push(getFormatItem(dataItem, index));
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2022-10-19 20:33:37 +03:00
|
|
|
|
}
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Привaтный метод экземпляра класса DropDown
|
|
|
|
|
|
*
|
|
|
|
|
|
* @method #initSelected
|
|
|
|
|
|
* @param {string} select необязательный елемент. Используется в методе selectIndex
|
|
|
|
|
|
* @description Отрисовывает и стилизует селект
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
*/
|
|
|
|
|
|
#initSelected(select) {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
const { styles, selected, placeholder, lable, language } = this.#options;
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
if (selected) {
|
|
|
|
|
|
createSelected(this.#element, selected);
|
|
|
|
|
|
} else if (placeholder) {
|
|
|
|
|
|
createSelected(this.#element, placeholder);
|
2022-10-19 20:33:37 +03:00
|
|
|
|
} else {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
if (language && language === 'ru') {
|
|
|
|
|
|
createSelected(this.#element, ru.selectPlaceholder);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
createSelected(this.#element, en.selectPlaceholder);
|
|
|
|
|
|
}
|
2022-10-25 21:03:10 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (select) {
|
|
|
|
|
|
createSelected(this.#element, select, styles);
|
|
|
|
|
|
}
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
|
|
|
|
|
if (lable) {
|
|
|
|
|
|
const lableItem = document.createElement('h1');
|
|
|
|
|
|
const textLable = document.createTextNode(lable);
|
|
|
|
|
|
|
|
|
|
|
|
lableItem.appendChild(textLable);
|
|
|
|
|
|
lableItem.classList.add('label');
|
|
|
|
|
|
|
|
|
|
|
|
this.#element.insertAdjacentElement('beforebegin', lableItem);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (styles) {
|
|
|
|
|
|
customStyles(this.#element, styles);
|
|
|
|
|
|
}
|
2022-10-25 21:03:10 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод рендера экземпляра класса DropDown
|
|
|
|
|
|
*@protected
|
|
|
|
|
|
* @method #render
|
|
|
|
|
|
* @param {string} select необязательный елемент. Передаеться в метод initSelected
|
|
|
|
|
|
* @description Рендер елементов в селекте.
|
|
|
|
|
|
*/
|
|
|
|
|
|
#render(select) {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
const {
|
|
|
|
|
|
styles, multiselect,
|
|
|
|
|
|
searchMode, multiselectTag,
|
|
|
|
|
|
darkTheme, language,
|
|
|
|
|
|
nativeSelectMode, listDisplayMode
|
|
|
|
|
|
} = this.#options;
|
|
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const random = Math.random().toString(36).substring(2, 10);
|
|
|
|
|
|
|
|
|
|
|
|
if (select || (select && styles)) {
|
|
|
|
|
|
this.#initSelected(select);
|
|
|
|
|
|
customStyles(this.#element, styles);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.#initSelected();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const ulList = document.createElement('ul');
|
2022-12-23 19:18:33 +03:00
|
|
|
|
const nativeSelect = createNativeSelect();
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
2022-12-23 19:18:33 +03:00
|
|
|
|
let inputSearch = '';
|
2022-11-08 16:57:35 +03:00
|
|
|
|
this.random = random;
|
|
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
if (searchMode) {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
if (language === 'ru') {
|
2022-12-23 19:18:33 +03:00
|
|
|
|
inputSearch = createInputSearch(random, ru.placeholder);
|
2022-11-08 16:57:35 +03:00
|
|
|
|
} else {
|
2022-12-23 19:18:33 +03:00
|
|
|
|
inputSearch = createInputSearch(random, en.placeholder);
|
2022-11-08 16:57:35 +03:00
|
|
|
|
}
|
2022-12-29 17:15:19 +03:00
|
|
|
|
const { search } = styles;
|
|
|
|
|
|
customStylesFormat(search, inputSearch);
|
2022-12-23 19:18:33 +03:00
|
|
|
|
ulList.appendChild(inputSearch);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
ulList.classList.add('list');
|
|
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
if (styles) {
|
|
|
|
|
|
const { list } = styles;
|
|
|
|
|
|
customStylesFormat(list, ulList);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.#element.appendChild(ulList);
|
|
|
|
|
|
|
|
|
|
|
|
this.#items.forEach((dataItem) => {
|
2022-12-23 19:18:33 +03:00
|
|
|
|
this.#element.appendChild(nativeSelect);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
const liItem = document.createElement('li');
|
2022-12-23 19:18:33 +03:00
|
|
|
|
const nativeOption = createNativeSelectOption();
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const strongItem = document.createElement('strong');
|
|
|
|
|
|
|
|
|
|
|
|
liItem.classList.add('list__item');
|
|
|
|
|
|
strongItem.classList.add('category');
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselect && multiselect == true) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const checkBox = document.createElement('input');
|
|
|
|
|
|
checkBox.type = 'checkbox';
|
|
|
|
|
|
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
|
|
|
|
|
|
liItem.appendChild(checkBox);
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
|
|
|
|
|
if (multiselectTag && multiselectTag == true) {
|
|
|
|
|
|
checkBox.classList.add('displayHide');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeSelect.setAttribute('multiple', 'multiple');
|
2022-10-25 21:03:10 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let textNode = '';
|
|
|
|
|
|
|
|
|
|
|
|
if (dataItem.title) {
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeOption.text = dataItem.title;
|
|
|
|
|
|
nativeOption.value = dataItem.title;
|
2022-10-25 21:03:10 +03:00
|
|
|
|
textNode = document.createTextNode(dataItem.title);
|
|
|
|
|
|
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeSelect.appendChild(nativeOption);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
liItem.appendChild(textNode);
|
|
|
|
|
|
ulList.appendChild(liItem);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
textNode = document.createTextNode(dataItem);
|
|
|
|
|
|
strongItem.appendChild(textNode);
|
|
|
|
|
|
ulList.appendChild(strongItem);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.#items.filter((item, index) => {
|
|
|
|
|
|
if (typeof item !== 'object') {
|
|
|
|
|
|
this.#items.splice(index, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
return item;
|
|
|
|
|
|
});
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (darkTheme == false) {
|
|
|
|
|
|
this.#checkTheme();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-12-29 17:15:19 +03:00
|
|
|
|
if(nativeSelectMode === true){
|
|
|
|
|
|
this.#selectMode(nativeSelectMode);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
this.#list = this.#element.querySelector('.list');
|
|
|
|
|
|
this.#caret = this.#element.querySelector('.caret');
|
|
|
|
|
|
|
2022-12-29 17:15:19 +03:00
|
|
|
|
if(listDisplayMode === true){
|
|
|
|
|
|
this.#displayMode(listDisplayMode)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#addOptionsBehaviour();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод рендера экземпляра класса DropDown
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
* @method #checkTheme
|
|
|
|
|
|
* @description Изменяет цветовую схему с темной на светлую.
|
|
|
|
|
|
*/
|
|
|
|
|
|
#checkTheme() {
|
|
|
|
|
|
const { darkTheme, searchMode } = this.#options;
|
|
|
|
|
|
|
|
|
|
|
|
const select = this.#element.querySelector('.cg-select');
|
|
|
|
|
|
const caret = this.#element.querySelector('.caret');
|
|
|
|
|
|
const list = this.#element.querySelector('ul.list');
|
|
|
|
|
|
const search = this.#element.querySelector('.inputSearch');
|
|
|
|
|
|
|
|
|
|
|
|
if (darkTheme == false) {
|
|
|
|
|
|
select.classList.add('selectWhite');
|
|
|
|
|
|
caret.classList.add('caretWhite');
|
|
|
|
|
|
list.classList.add('listWhite');
|
|
|
|
|
|
|
|
|
|
|
|
if (searchMode == true) {
|
|
|
|
|
|
search.classList.add('inputWhite');
|
|
|
|
|
|
}
|
|
|
|
|
|
} else if (darkTheme == true || !darkTheme) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
throw new Error('Styles error or invalid value entered!');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод рендера экземпляра класса DropDown
|
|
|
|
|
|
*@protected
|
|
|
|
|
|
* @method #renderUrl
|
|
|
|
|
|
* @description Рендер елементов в селекте переданных с URL и их настойка
|
|
|
|
|
|
*/
|
|
|
|
|
|
async #renderUrl() {
|
2022-11-08 16:57:35 +03:00
|
|
|
|
const { url, items, multiselect, multiselectTag } = this.#options;
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
if (items) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!url) {
|
|
|
|
|
|
return;
|
2022-10-19 20:33:37 +03:00
|
|
|
|
}
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
const response = await fetch(url);
|
|
|
|
|
|
const dataUrl = await response.json();
|
|
|
|
|
|
|
2022-12-23 19:18:33 +03:00
|
|
|
|
const nativeSelect = createNativeSelect();
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
dataUrl.forEach((dataItem, index) => {
|
|
|
|
|
|
const item = {
|
|
|
|
|
|
id: dataItem.id,
|
|
|
|
|
|
title: dataItem.name,
|
|
|
|
|
|
value: index,
|
|
|
|
|
|
};
|
|
|
|
|
|
const ulUrl = this.#element.querySelector('.list');
|
|
|
|
|
|
|
2022-12-23 19:18:33 +03:00
|
|
|
|
const nativeOption = createNativeSelectOption();
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const liUrl = document.createElement('li');
|
|
|
|
|
|
const textUrl = document.createTextNode(item.title);
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselect && multiselect == true) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const checkBox = document.createElement('input');
|
|
|
|
|
|
checkBox.type = 'checkbox';
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselectTag && multiselectTag == true) {
|
|
|
|
|
|
checkBox.classList.add('displayHide');
|
|
|
|
|
|
}
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
checkBox.setAttribute('id', `chbox-${item.id}`);
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeSelect.setAttribute('multiple', 'multiple');
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
liUrl.appendChild(checkBox);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
liUrl.classList.add('list__item');
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeOption.value = item.title;
|
|
|
|
|
|
nativeOption.text = item.title;
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeSelect.appendChild(nativeOption);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
liUrl.appendChild(textUrl);
|
|
|
|
|
|
ulUrl.appendChild(liUrl);
|
|
|
|
|
|
|
|
|
|
|
|
this.#items.push(item);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
2022-12-23 19:18:33 +03:00
|
|
|
|
this.#element.appendChild(nativeSelect);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
this.#items.filter((item, index) => {
|
|
|
|
|
|
if (typeof item !== 'object') {
|
|
|
|
|
|
this.#items.splice(index, 1);
|
|
|
|
|
|
}
|
|
|
|
|
|
return item;
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
this.#addOptionsBehaviour();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод экземпляра класса DropDown
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
* @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl
|
|
|
|
|
|
* @description Открывает список для выбора элемента
|
|
|
|
|
|
* @method #open
|
|
|
|
|
|
*/
|
|
|
|
|
|
#open(oneClick) {
|
|
|
|
|
|
if (oneClick === true) {
|
|
|
|
|
|
this.#list.classList.add('open');
|
|
|
|
|
|
this.#caret.classList.add('caret_rotate');
|
2022-10-19 20:33:37 +03:00
|
|
|
|
} else {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#list.classList.toggle('open');
|
|
|
|
|
|
this.#caret.classList.toggle('caret_rotate');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод экземпляра класса DropDown
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
* @description Закрывает список
|
|
|
|
|
|
* @method #close
|
|
|
|
|
|
*/
|
|
|
|
|
|
#close() {
|
|
|
|
|
|
this.#list.classList.remove('open');
|
|
|
|
|
|
this.#caret.classList.remove('caret_rotate');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод экземпляра класса DropDown
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
* @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
|
|
|
|
|
|
* @method #addOptionsBehaviour
|
|
|
|
|
|
*/
|
|
|
|
|
|
#addOptionsBehaviour() {
|
2022-11-08 16:57:35 +03:00
|
|
|
|
const {
|
|
|
|
|
|
multiselect,
|
|
|
|
|
|
placeholder,
|
|
|
|
|
|
selected,
|
|
|
|
|
|
multiselectTag,
|
|
|
|
|
|
searchMode,
|
|
|
|
|
|
closeOnSelect,
|
|
|
|
|
|
darkTheme,
|
|
|
|
|
|
} = this.#options;
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
const options = this.#element.querySelectorAll('.list__item');
|
|
|
|
|
|
const select = this.#element.querySelector('.selected');
|
2022-12-23 19:18:33 +03:00
|
|
|
|
const nativeOption = this.#element.querySelectorAll('.nativeSelect__nativeOption');
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const ulMultipul = document.createElement('ul');
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselect && multiselect == true) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
ulMultipul.classList.add('multiselect-tag');
|
|
|
|
|
|
select.classList.add('overflow-hidden');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (searchMode && searchMode === true) {
|
|
|
|
|
|
this.#searchMode(this.random);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
options.forEach((option, index) => {
|
|
|
|
|
|
option.addEventListener('click', (event) => {
|
2022-11-08 16:57:35 +03:00
|
|
|
|
const dataSelectText = {
|
|
|
|
|
|
placeholder,
|
|
|
|
|
|
selected,
|
|
|
|
|
|
selectedItems: this.#selectedItems,
|
|
|
|
|
|
indexes: this.#indexes,
|
|
|
|
|
|
darkTheme,
|
|
|
|
|
|
multiselectTag,
|
|
|
|
|
|
};
|
|
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const item = this.#items[index];
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (closeOnSelect == false || (multiselect && multiselect == true)) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
event.stopPropagation();
|
2022-11-08 16:57:35 +03:00
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const checkIndex = this.#indexes.indexOf(index);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselect && multiselect == true) {
|
|
|
|
|
|
option.classList.toggle('active');
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const checkBox = option.querySelector('input[type="checkbox"]');
|
|
|
|
|
|
|
|
|
|
|
|
if (checkBox) {
|
|
|
|
|
|
if (!(event.target instanceof HTMLInputElement)) {
|
|
|
|
|
|
checkBox.checked = !checkBox.checked;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (checkIndex === -1) {
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeOptionMultiple(nativeOption, item.title, true);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#indexes.push(index);
|
|
|
|
|
|
select.innerText = '';
|
|
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselectTag && multiselectTag == true) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#selectedItems.push(item);
|
|
|
|
|
|
select.appendChild(ulMultipul);
|
|
|
|
|
|
|
|
|
|
|
|
const data = {
|
|
|
|
|
|
option: this.#options,
|
|
|
|
|
|
element: this.#element,
|
|
|
|
|
|
indexes: this.#indexes,
|
|
|
|
|
|
selectedItems: this.#selectedItems,
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.#selectedItems.push(item.title);
|
|
|
|
|
|
select.innerText = this.#selectedItems;
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselectTag && multiselectTag == true) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
|
|
|
|
|
|
ulMultipul.removeChild(tagItem);
|
|
|
|
|
|
}
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
this.#indexes.splice(checkIndex, 1);
|
|
|
|
|
|
this.#selectedItems.splice(checkIndex, 1);
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeOptionMultiple(nativeOption, item.title, false);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!this.#selectedItems.length) {
|
2022-11-08 16:57:35 +03:00
|
|
|
|
getSelectText(dataSelectText, select);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
} else {
|
2022-11-08 16:57:35 +03:00
|
|
|
|
if (multiselectTag && multiselectTag == true) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
select.appendChild(ulMultipul);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
select.innerText = this.#selectedItems;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
select.innerText = item.title;
|
|
|
|
|
|
this.#selectedItems = item;
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
2022-12-23 19:18:33 +03:00
|
|
|
|
nativeOptionOrdinary(nativeOption, item.title);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
options.forEach((option) => {
|
|
|
|
|
|
option.classList.remove('active');
|
|
|
|
|
|
});
|
|
|
|
|
|
option.classList.add('active');
|
|
|
|
|
|
}
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
|
|
|
|
|
clearSelect(select, this.#element, dataSelectText);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Метод который реализует поиск элементов в селекте
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
* @param {string} random уникальное значение для input элемента.
|
|
|
|
|
|
* @method #searchMode
|
|
|
|
|
|
*/
|
|
|
|
|
|
#searchMode(random) {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
const { language } = this.#options;
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
2022-10-25 21:03:10 +03:00
|
|
|
|
const input = this.#element.querySelector(`#searchSelect-${random}`);
|
|
|
|
|
|
const searchSelect = this.#element.querySelectorAll('.list__item');
|
|
|
|
|
|
const result = document.createElement('p');
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
|
|
|
|
|
let textNode = '';
|
2022-12-29 17:15:19 +03:00
|
|
|
|
if (language && language === 'ru') {
|
2022-11-08 16:57:35 +03:00
|
|
|
|
textNode = document.createTextNode(`${ru.textInListSearch}`);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
textNode = document.createTextNode(`${en.textInListSearch}`);
|
|
|
|
|
|
}
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
|
|
|
|
|
result.appendChild(textNode);
|
|
|
|
|
|
result.classList.add('displayHide');
|
2022-11-08 16:57:35 +03:00
|
|
|
|
result.classList.add('noRezult');
|
2022-10-25 21:03:10 +03:00
|
|
|
|
input.parentElement.appendChild(result);
|
|
|
|
|
|
|
|
|
|
|
|
input.addEventListener('click', (e) => {
|
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
input.oninput = function () {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
let valueSearch = this.value.trim().toLowerCase();
|
|
|
|
|
|
let anyMatch = false;
|
2022-10-25 21:03:10 +03:00
|
|
|
|
|
2022-12-29 17:15:19 +03:00
|
|
|
|
if (valueSearch != '') {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
searchSelect.forEach((elem) => {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent);
|
|
|
|
|
|
anyMatch = anyMatch || isMatching;
|
|
|
|
|
|
|
|
|
|
|
|
if (elem.textContent.toLowerCase().search(valueSearch) == -1) {
|
2022-10-25 21:03:10 +03:00
|
|
|
|
elem.classList.add('displayHide');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
elem.classList.remove('displayHide');
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
|
|
|
|
|
result.classList.toggle('displayHide', anyMatch);
|
2022-10-25 21:03:10 +03:00
|
|
|
|
} else {
|
|
|
|
|
|
searchSelect.forEach((elem) => {
|
|
|
|
|
|
elem.classList.remove('displayHide');
|
|
|
|
|
|
result.classList.add('displayHide');
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод экземпляра класса DropDown
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
* @description Открывает и закрывает список по переданному эвенту
|
|
|
|
|
|
* @method #initEvent
|
|
|
|
|
|
*/
|
|
|
|
|
|
#initEvent() {
|
|
|
|
|
|
const { event } = this.#options;
|
|
|
|
|
|
if (!event) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (event) {
|
|
|
|
|
|
if (event === 'mouseenter') {
|
|
|
|
|
|
this.#element.addEventListener(event, () => {
|
|
|
|
|
|
this.#open();
|
|
|
|
|
|
});
|
|
|
|
|
|
this.#element.addEventListener('mouseleave', () => {
|
|
|
|
|
|
this.#close();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2022-10-19 20:33:37 +03:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод экземпляра класса DropDown
|
|
|
|
|
|
* @protected
|
|
|
|
|
|
* @description Закрывает список по клику вне элемента
|
|
|
|
|
|
* @method #closeSelectClick
|
|
|
|
|
|
*/
|
|
|
|
|
|
#closeSelectClick() {
|
|
|
|
|
|
const dropdown = document.querySelector(`${this.#options.selector}`);
|
|
|
|
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => {
|
|
|
|
|
|
const withinBoundaries = e.composedPath().includes(dropdown);
|
|
|
|
|
|
if (!withinBoundaries) {
|
|
|
|
|
|
if (this.btn) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
this.#close();
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* Приватный метод экземпляра класса 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
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
2022-10-19 20:33:37 +03:00
|
|
|
|
}
|
|
|
|
|
|
</code></pre>
|
|
|
|
|
|
</article>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<nav>
|
|
|
|
|
|
<h2><a href="index.html">Home</a></h2>
|
|
|
|
|
|
<h3>Classes</h3>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="DropDown.html">DropDown</a></li>
|
|
|
|
|
|
<li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<a href="constructor.html">Конструктор класса DropDown</a>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
2022-10-21 16:17:37 +03:00
|
|
|
|
<h3>Modules</h3>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="module-Utils.html">Utils</a></li>
|
|
|
|
|
|
<li><a href="module-createElementChips.html">createElementChips</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<h3>Private methods</h3>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
|
|
|
|
|
|
<li><a href="global.html#close">#close</a></li>
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li><a href="global.html#checkTheme">#checkTheme</a></li>
|
|
|
|
|
|
<li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
|
2022-10-21 16:17:37 +03:00
|
|
|
|
<li><a href="global.html#init">#init</a></li>
|
|
|
|
|
|
<li><a href="global.html#initEvent">#initEvent</a></li>
|
|
|
|
|
|
<li><a href="global.html#initSelected">#initSelected</a></li>
|
|
|
|
|
|
<li><a href="global.html#open">#open</a></li>
|
|
|
|
|
|
<li><a href="global.html#render">#render</a></li>
|
|
|
|
|
|
<li><a href="global.html#renderUrl">#renderUrl</a></li>
|
2022-10-25 21:03:10 +03:00
|
|
|
|
<li><a href="global.html#searchMode">#searchMode</a></li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<li><a href="global.html#displayMode">#displayMode</a></li>
|
|
|
|
|
|
<li><a href="global.html#selectMode">#selectMode</a></li>
|
2022-10-21 16:17:37 +03:00
|
|
|
|
</ul>
|
|
|
|
|
|
<h3>Public methods</h3>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
<ul>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<li><a href="global.html#addLanguage">addLanguage</a></li>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
<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>
|
|
|
|
|
|
<li><a href="global.html#deleteItemAll">deleteItemAll</a></li>
|
|
|
|
|
|
<li><a href="global.html#disabled">disabled</a></li>
|
|
|
|
|
|
<li><a href="global.html#getElement">getElement</a></li>
|
|
|
|
|
|
<li><a href="global.html#selectIndex">selectIndex</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<br class="clear" />
|
|
|
|
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
|
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Wed
|
|
|
|
|
|
Oct 19 2022 20:30:19 GMT+0300 (Moscow Standard Time)
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
prettyPrint();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<script src="scripts/linenumber.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
