Модуль кастомизации элемента SELECT «Чертоги Фрилансера» v3.0.0

Модуль позволяет сколь угодно стилизовать стандартный элемент формы SELECT и его пункты OPTION, а также реализует дополнительные возможности.

Подключение модуля

[HTML] В нужном месте вызвать снипет sel , редактировать HTML-код селекта под свои нужды
[SCSS] Раскомментировать строку @import “select”; в файле src/scss/base/forms/forms.scss – это подключит базовые стили селекта, отредактировать под свои нужды
[JS] Раскомментировать строку import ‘./libs/select.js’ в файле js/app.js

Настройка и функционал модуля

Для подключения того или иного функционала модуля используются разные HTML-атрибуты

Атрибуты для тега <SELECT>:

multiple – мультивыбор
disabled – недоступен
data-class-modif=имя класса – модификатор к конкретному селекту. В результате получится select select_имя класса
data-tags – режим тегов (только для multiple) позволяет вставлять выбранные значения в виде тегов с крестиком для удаления. Также есть возможность выводить эти тэги в любом указанном месте, указав селектор блока как значение атрибута
data-scroll – включит прокрутку списка, дополнительно можно подключить кастомный скролл simplebar в js/app.js. Указанное число для атрибута ограничит высоту контейнера выпадающего списка
data-checkbox (в работе) – стилизация элементов по checkbox (только для multiple)
data-show-selected – отключает сокрытие выбранного элемента
data-search – позволяет искать по списку
data-speed – позволяет указать скорость открытия/закрытия списка в миллисекундах по умолчанию 150
data-open – селект открытый сразу
data-submit – отправляет форму при смене селекта
data-pseudo-label=заголовок – добавляет псевдоэлемент в заголовок селектора с указанным текстом, а также класс _select-pseudo-label

Атрибуты для тега <OPTION>:

data-class=имя класса – добавляет класс
data-asset=путь к картинке или текст – добавляет в элемент списка структуру двух колонок с указанными данными
data-href=адрес ссылки – добавляет ссылку к элементу списка
data-href-blank – откроет ссылку в новом окне

Атрибуты для плейсхолдера (плейсхолдер – это <OPTION> с пустым value)

data-label – добавляет label к селектору
data-show – показывает плейсхолдер в списке (только для единичного выбора)

Атрибуты для других элементов

data-one-select – селекты внутри объекта с этим атрибутом будут открываться только по одному. То есть при открытии селекта другой открытый селект закрывается.

Пример селекта с некоторыми атрибутами

<select data-submit data-scroll name="form[]" data-class-modif="form">
	<option value="" selected>Плейсхолдер</option>
	<option value="2">Пункт</option>
	<option data-href="about.html" value="3">Пункт ссылка</option>
	<option value="4">Пункт</option>
</select>

Классы, формируемые модулем

select – Главный блок
select__body – Тело селекта
select__title – Заголовок
select__value – значение в заголовке
select__label – Лейбл
select__input – Поле ввода
select__text – Оболочка текстовых данных
select__link – Ссылка в элементе
select__options – Выпадающий список
select__scroll – Оболочка при скроле
select__option – пункт
select__content – Оболочка контента в заголовке
select__row – Ряд
select__asset – Дополнительные данные
_select-disabled – Запрещено
_select-tag – Класс тега
_select-open – Список открыт
_select-active – Список избран
_select-focus – Список в фокусе
_select-multiple – Мультивыбор
_select-checkbox – Стиль чекбокса
_select-selected – выбранный пункт
_select-pseudo-label – Псевдолейбл для заголовка селекта

События

После каждого выбора элементы селективного срабатывает событие selectCallback , его можно отловить в любой части кода:

document.addEventListener("selectCallback", function (e) {
	// Селект 
	const currentSelect = e.detail.select;
});

Расположение и дополнительные данные

Класс SelectConstructor находится в файле js/libs/select.js