-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
366 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| src/vendor/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { handleEscapeKey } from './utils.js'; | ||
|
|
||
| const { $ } = window; | ||
|
|
||
| const onDocumentKeydown = (cb, evt) => handleEscapeKey(cb, evt); | ||
|
|
||
| const closeSelect = (optionItemsContainer) => { | ||
| optionItemsContainer | ||
| .addClass('custom-select__hide'); | ||
|
|
||
| $(document).off(); | ||
| }; | ||
|
|
||
| const openSelect = (optionItemsContainer) => { | ||
| $('.custom-select__items') | ||
| .not(optionItemsContainer[0]) | ||
| .addClass('custom-select__hide') | ||
| .end() | ||
| .filter(optionItemsContainer[0]) | ||
| .removeClass('custom-select__hide'); | ||
|
|
||
| const closeSelectCallback = () => closeSelect(optionItemsContainer); | ||
|
|
||
| $(document).on('click', closeSelectCallback); | ||
| $(document).on('keydown', (evt) => onDocumentKeydown(closeSelectCallback, evt)); | ||
| }; | ||
|
|
||
| const onSelectedOptionClick = (evt) => { | ||
| evt.preventDefault(); | ||
| evt.stopPropagation(); | ||
|
|
||
| const target = $(evt.target); | ||
| const optionItemsContainer = target.next(); | ||
|
|
||
| if (optionItemsContainer.hasClass('custom-select__hide')) { | ||
| openSelect(optionItemsContainer); | ||
| } else { | ||
| closeSelect(optionItemsContainer); | ||
| } | ||
| }; | ||
|
|
||
| const onSelectOption = (evt) => { | ||
| /* При нажатии на элемент обновляется исходное поле выбора, | ||
| и выбранный элемент: */ | ||
| const targetOption = $(evt.currentTarget); | ||
| const parentSelect = targetOption.parents('.custom-select').find('.custom-select__select')[0]; | ||
| const selectedOptionContainer = targetOption.parent().prev(); | ||
|
|
||
| [...parentSelect.options].forEach((parentSelectOption, index) => { | ||
| if ($(parentSelectOption).text() === targetOption.text().split(/\s+/).join(' ')) { | ||
| parentSelect.selectedIndex = index; | ||
| selectedOptionContainer.text(targetOption.text()); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| const addAccentClass = (_, htmlString) => { | ||
| const accentText = htmlString.split(/\s+/).slice(0, 2).join(' '); | ||
| const text = htmlString.split(/\s+/).slice(2).join(' '); | ||
|
|
||
| return `<span class="custom-select__option--accent">${accentText}</span> | ||
| <span>${text}</span>`; | ||
| }; | ||
|
|
||
| const initCustomSelect = () => { | ||
| /* Ищем элементы с классом "custom-select": */ | ||
| const customSelectContainers = $('.custom-select'); | ||
|
|
||
| customSelectContainers.each((_, customSelectContainer) => { | ||
| const select = $('.custom-select__select', customSelectContainer)[0]; | ||
|
|
||
| /* Для каждого элемента создаем новый DIV (selectedOption), | ||
| который будет выступать в качестве выбранной опции: */ | ||
| $('<div></div>') | ||
| .addClass('custom-select__selected') | ||
| .text(select.options[select.selectedIndex].innerHTML) | ||
| .on('click', onSelectedOptionClick) | ||
| .appendTo(customSelectContainer); | ||
|
|
||
| /* Для каждого элемента создаем новый DIV, который будет содержать список опций */ | ||
| const optionList = $('<div></div>').addClass('custom-select__items custom-select__hide'); | ||
|
|
||
| [...select.options].forEach((option) => { | ||
| /* Для каждого варианта в исходном элементе select, | ||
| создаем новый DIV (selectOption), который будет выступать в качестве элемента выбора: */ | ||
| $('<div></div>') | ||
| .addClass('custom-select__option') | ||
| .text($(option).text()) | ||
| .html(addAccentClass) | ||
| .on('click', onSelectOption) | ||
| .appendTo((optionList)); | ||
| }); | ||
|
|
||
| $(customSelectContainer).append(optionList); | ||
| }); | ||
| }; | ||
|
|
||
| export { initCustomSelect }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /* stylelint-disable */ | ||
| /* Контейнер должен быть позиционирован relative: */ | ||
| .custom-select { | ||
| position: relative; | ||
| } | ||
|
|
||
| /* Скрываем исходный элемент SELECT */ | ||
| .custom-select__select { | ||
| display: none; | ||
| } | ||
|
|
||
| /* Контейнер c выбранной опцией */ | ||
| .custom-select__selected { | ||
| max-width: 100%; | ||
| height: 35px; | ||
| padding: 8px 15px 7px 14px; | ||
| border: solid 1px var(--chinese-silver); | ||
| border-radius: 5px; | ||
| background-color: var(--white); | ||
| cursor: pointer; | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| /* Контейнер c опциями */ | ||
| .custom-select__items { | ||
| position: absolute; | ||
| top: calc(100% + 10px); | ||
| left: 0; | ||
| z-index: 100; | ||
| padding: 7px 10px; | ||
| border: solid 1px var(--chinese-silver); | ||
| border-radius: 5px; | ||
| background-color: var(--white); | ||
| box-shadow: $box-shadow-button; | ||
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: 14px; | ||
| } | ||
|
|
||
| /* Стилизация опций, включая выбранный элемент */ | ||
| .custom-select__option { | ||
| color: var(--dark); | ||
| cursor: pointer; | ||
| font-size: 14px; | ||
|
|
||
| &--accent { | ||
| font-weight: 700; | ||
| } | ||
| } | ||
|
|
||
| /* Скрываем элементы при закрытии поля выбора */ | ||
| .custom-select__hide { | ||
| display: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.