diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 2f7ebf8..c7cdfe5 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -6,6 +6,7 @@ import { customStylesFormat, nativOptionMultiple, nativOptionOrdinary, + clearSelect, } from './components/utils'; import { createBreadcrumb, @@ -242,6 +243,10 @@ export class DropDown { }); } + // on(select, callback) { + // console.log('aa'); + // } + /** * Приватный метод инициализации экземпляра класса DropDown * @method #init @@ -656,6 +661,7 @@ export class DropDown { } else { select.innerText = item.title; this.#selectedItems = item; + clearSelect(select, this.#element, dataSelectText); nativOptionOrdinary(nativOption, item.title); options.forEach((option) => { diff --git a/src/components/utils.js b/src/components/utils.js index ed0e5f4..1e03eff 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -164,3 +164,36 @@ export function nativOptionMultiple(element, item, condition) { } }); } + +/** + * Создание кнопки отчиски селекта, при единичном выборе. + * @param {HTMLElement} select место в селекте которое будет переназначено на ''. + * @param {HTMLElement} element экземпляр класса DropDown. + * @param {object} dataSelectText текст который отрисовывается в селекте. + */ +export function clearSelect(select, element, dataSelectText) { + const options = element.querySelectorAll('.list__item'); + const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + + svgIcon.setAttribute('viewBox', '0 0 10 10'); + path1.setAttribute('d', 'M2,8 L8,2'); + path2.setAttribute('d', 'M2,2 L8,8'); + svgIcon.appendChild(path1); + svgIcon.appendChild(path2); + + svgIcon.classList.add('svg-icon'); + svgIcon.classList.add('svg-clear'); + + select.appendChild(svgIcon); + + svgIcon.addEventListener('click', () => { + select.innerText = ''; + getSelectText(dataSelectText, select); + + options.forEach((option) => { + option.classList.remove('active'); + }); + }); +} diff --git a/src/style/svgStyle.scss b/src/style/svgStyle.scss index 934f4f6..5c103e6 100644 --- a/src/style/svgStyle.scss +++ b/src/style/svgStyle.scss @@ -28,3 +28,9 @@ -webkit-transition: 0.2s; stroke-width: 0.5; } + +.svg-clear { + position: absolute; + right: 36px; + background-color: transparent; +}