diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index c7cdfe5..0f377a5 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -575,12 +575,15 @@ export class DropDown { * @method #addOptionsBehaviour */ #addOptionsBehaviour() { - const { multiselect, placeholder, selected, multiselectTag, searchMode, closeOnSelect } = - this.#options; - const dataSelectText = { - placeholder: placeholder, - selected: selected, - }; + const { + multiselect, + placeholder, + selected, + multiselectTag, + searchMode, + closeOnSelect, + darkTheme, + } = this.#options; const options = this.#element.querySelectorAll('.list__item'); const select = this.#element.querySelector('.selected'); @@ -599,6 +602,15 @@ export class DropDown { options.forEach((option, index) => { option.addEventListener('click', (event) => { + const dataSelectText = { + placeholder, + selected, + selectedItems: this.#selectedItems, + indexes: this.#indexes, + darkTheme, + multiselectTag, + }; + const item = this.#items[index]; if (closeOnSelect == false || (multiselect && multiselect == true)) { @@ -643,6 +655,7 @@ export class DropDown { const tagItem = document.getElementById(`tag-${index}-${item.id}`); ulMultipul.removeChild(tagItem); } + this.#indexes.splice(checkIndex, 1); this.#selectedItems.splice(checkIndex, 1); nativOptionMultiple(nativOption, item.title, false); @@ -661,7 +674,7 @@ export class DropDown { } else { select.innerText = item.title; this.#selectedItems = item; - clearSelect(select, this.#element, dataSelectText); + nativOptionOrdinary(nativOption, item.title); options.forEach((option) => { @@ -669,6 +682,8 @@ export class DropDown { }); option.classList.add('active'); } + + clearSelect(select, this.#element, dataSelectText); }); }); } diff --git a/src/components/utils.js b/src/components/utils.js index 1e03eff..245e77e 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -172,10 +172,14 @@ export function nativOptionMultiple(element, item, condition) { * @param {object} dataSelectText текст который отрисовывается в селекте. */ export function clearSelect(select, element, dataSelectText) { + const { selectedItems, indexes, darkTheme, multiselectTag } = dataSelectText; + const options = element.querySelectorAll('.list__item'); + const ulMultiSelect = element.querySelector('.multiselect-tag'); 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'); + const checkBox = element.querySelectorAll('li input'); svgIcon.setAttribute('viewBox', '0 0 10 10'); path1.setAttribute('d', 'M2,8 L8,2'); @@ -183,6 +187,20 @@ export function clearSelect(select, element, dataSelectText) { svgIcon.appendChild(path1); svgIcon.appendChild(path2); + if (multiselectTag && multiselectTag == true) { + return; + } + + if (darkTheme === true || !darkTheme) { + path1.classList.add('pathWhite'); + path2.classList.add('pathWhite'); + } + + if (darkTheme === false) { + path1.classList.add('pathBlack'); + path2.classList.add('pathBlack'); + } + svgIcon.classList.add('svg-icon'); svgIcon.classList.add('svg-clear'); @@ -190,6 +208,16 @@ export function clearSelect(select, element, dataSelectText) { svgIcon.addEventListener('click', () => { select.innerText = ''; + + if (Array.isArray(selectedItems)) { + selectedItems.splice(0); + indexes.splice(0); + } + + checkBox.forEach((item) => { + item.checked = false; + }); + getSelectText(dataSelectText, select); options.forEach((option) => { diff --git a/src/index.js b/src/index.js index 59886b7..2f2fe7b 100644 --- a/src/index.js +++ b/src/index.js @@ -77,17 +77,17 @@ const dropdown4 = new DropDown({ categoryItems: ['Paris'], }, ], - styles: { - head: { - background: 'red', - }, - list: { - background: 'green', - }, - chips: { - background: 'blue', - }, - }, + // styles: { + // head: { + // background: 'red', + // }, + // list: { + // background: 'green', + // }, + // chips: { + // background: 'blue', + // }, + // }, multiselect: true, multiselectTag: true, }); diff --git a/src/style/svgStyle.scss b/src/style/svgStyle.scss index 5c103e6..37e26e3 100644 --- a/src/style/svgStyle.scss +++ b/src/style/svgStyle.scss @@ -33,4 +33,8 @@ position: absolute; right: 36px; background-color: transparent; + + &:hover { + background-color: transparent; + } } diff --git a/src/style/whiteTheme.scss b/src/style/whiteTheme.scss index 4e9991e..85f0f91 100644 --- a/src/style/whiteTheme.scss +++ b/src/style/whiteTheme.scss @@ -11,3 +11,11 @@ color: black !important; background-color: white !important; } + +.pathWhite { + color: white !important; +} + +.pathBlack { + color: black !important; +}