From 35c7bff4a5c03ed287359a99f2540099db7ece16 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 10 Oct 2022 20:05:02 +0300 Subject: [PATCH 1/5] New breanch. Low file sliting --- src/cg-dropdown.js | 154 ++++++++----------------------- src/components/create-element.js | 50 ++++++++++ src/components/utils.js | 53 +++++++++++ src/index.js | 6 ++ 4 files changed, 145 insertions(+), 118 deletions(-) create mode 100644 src/components/create-element.js create mode 100644 src/components/utils.js diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 6d9e032..f52cc39 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -1,3 +1,6 @@ +import { customStyles, createSelected } from './components/utils'; +import { createBreadcrumb } from './components/create-element'; + export class DropDown { #element; #list; @@ -5,7 +8,6 @@ export class DropDown { #caret; #items; #selectedItems; - #id = []; #indexes = []; get value() { @@ -81,24 +83,26 @@ export class DropDown { const { styles } = this.#options; if (this.#options.selected) { - this.#createSelected(this.#options.selected); + createSelected(this.#element, this.#options.selected); } else { - this.#createSelected('Select...'); + createSelected(this.#element, 'Select...'); } if (!this.#options.selected && this.#options.placeholder) { - this.#createSelected(this.#options.placeholder); + createSelected(this.#element, this.#options.placeholder); } - if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) { - this.#createSelected(this.#options.placeholder); - this.#customStyles(styles); - } else { - this.#customStyles(styles); + if (styles) { + if (this.#options.placeholder) { + createSelected(this.#element, this.#options.placeholder, styles); + } else if (this.#options.selected) { + createSelected(this.#element, this.#options.selected, styles); + } + customStyles(this.#element, styles); } if (select) { - this.#createSelected(select); + createSelected(this.#element, select, styles); } } @@ -107,7 +111,7 @@ export class DropDown { if (select || (select && styles)) { this.#initSelected(select); - this.#customStyles(styles); + customStyles(this.#element, styles); } else { this.#initSelected(); } @@ -281,9 +285,28 @@ export class DropDown { selected.appendChild(ul); if (this.#checkItemStruct(item)) { - ul.appendChild(this.#createBreadcrumb(value, index, id)); + ul.appendChild( + createBreadcrumb( + this.#options, + this.#element, + this.#indexes, + this.#selectedItems, + value, + index, + id, + ), + ); } else { - ul.appendChild(this.#createBreadcrumb(value, index)); + ul.appendChild( + createBreadcrumb( + this.#options, + this.#element, + this.#indexes, + this.#selectedItems, + value, + index, + ), + ); } } else { selected.innerText = this.#selectedItems; @@ -329,57 +352,6 @@ export class DropDown { }); } - #createBreadcrumb(value, index, id) { - const { placeholder } = this.#options; - - const selected = this.#element.querySelector('.selected'); - - const li = document.createElement('li'); - const text = document.createTextNode(value); - const svg = 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'); - - svg.setAttribute('viewBox', '0 0 10 10'); - path1.setAttribute('d', 'M3,7 L7,3'); - path2.setAttribute('d', 'M3,3 L7,7'); - li.setAttribute('id', `tag-${index}`); - - svg.classList.add('svg-icon'); - - svg.appendChild(path1); - svg.appendChild(path2); - li.appendChild(text); - li.appendChild(svg); - - svg.addEventListener('click', (event) => { - event.stopPropagation(); - - const deleteIcon = this.#indexes.indexOf(index); - - this.#indexes.splice(deleteIcon, 1); - this.#selectedItems.splice(deleteIcon, 1); - - let checkBox = ''; - if (id) { - checkBox = document.getElementById(`chbox-${id}`); - } else { - checkBox = document.getElementById(`chbox-${index}`); - } - - checkBox.checked = false; - checkBox.parentElement.classList.remove('active'); - - if (!this.#selectedItems.length) { - selected.innerText = placeholder; - } - - li.parentElement.removeChild(li); - }); - - return li; - } - #initEvent() { const { event } = this.#options; if (!event) { @@ -401,60 +373,6 @@ export class DropDown { } } - #customStyles(styles) { - if (!styles) { - return; - } - - const { head, caret, placeholder } = styles; - const select = this.#element.querySelector('.cg-select'); - const crt = this.#element.querySelector('.caret'); - - const placeh = this.#element.querySelector('.selected'); - - if (head) { - Object.entries(head).forEach(([key, value]) => { - select.style[key] = value; - }); - } - - if (caret) { - Object.entries(caret).forEach(([key, value]) => { - crt.style[key] = value; - }); - } - - if (placeh) { - if (placeholder) { - Object.entries(placeholder).forEach(([key, value]) => { - placeh.style[key] = value; - }); - } - } - } - - #createSelected(content, styles) { - if (content) { - this.#element.innerHTML = ` -
-

${content}

-
-
- `; - } - - if (styles) { - this.#customStyles(styles); - - this.#element.innerHTML = ` -
- ${content} -
-
- `; - } - } - #checkItemStruct(item) { if (item && typeof item !== 'object') { return false; diff --git a/src/components/create-element.js b/src/components/create-element.js new file mode 100644 index 0000000..afea0cf --- /dev/null +++ b/src/components/create-element.js @@ -0,0 +1,50 @@ +export function createBreadcrumb(options, element, indexes, selectedItems, value, index, id) { + const { placeholder } = options; + + const selected = element.querySelector('.selected'); + + const li = document.createElement('li'); + const text = document.createTextNode(value); + const svg = 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'); + + svg.setAttribute('viewBox', '0 0 10 10'); + path1.setAttribute('d', 'M3,7 L7,3'); + path2.setAttribute('d', 'M3,3 L7,7'); + li.setAttribute('id', `tag-${index}`); + + svg.classList.add('svg-icon'); + + svg.appendChild(path1); + svg.appendChild(path2); + li.appendChild(text); + li.appendChild(svg); + + svg.addEventListener('click', (event) => { + event.stopPropagation(); + + const deleteIcon = indexes.indexOf(index); + + indexes.splice(deleteIcon, 1); + selectedItems.splice(deleteIcon, 1); + + let checkBox = ''; + if (id) { + checkBox = document.getElementById(`chbox-${id}`); + } else { + checkBox = document.getElementById(`chbox-${index}`); + } + + checkBox.checked = false; + checkBox.parentElement.classList.remove('active'); + + if (!selectedItems.length) { + selected.innerText = placeholder; + } + + li.parentElement.removeChild(li); + }); + + return li; +} diff --git a/src/components/utils.js b/src/components/utils.js new file mode 100644 index 0000000..71d7590 --- /dev/null +++ b/src/components/utils.js @@ -0,0 +1,53 @@ +export function createSelected(element, content, styles) { + if (content) { + element.innerHTML = ` +
+

${content}

+
+
+ `; + } + + if (styles) { + customStyles(element, styles); + + element.innerHTML = ` +
+ ${content} +
+
+ `; + } +} + +export function customStyles(element, styles) { + if (!styles) { + return; + } + + const { head, caret, placeholder } = styles; + const select = element.querySelector('.cg-select'); + const crt = element.querySelector('.caret'); + + const placeh = element.querySelector('.selected'); + + if (head) { + Object.entries(head).forEach(([key, value]) => { + select.style[key] = value; + }); + } + + if (caret) { + Object.entries(caret).forEach(([key, value]) => { + crt.style[key] = value; + }); + } + + if (placeh) { + if (placeholder) { + Object.entries(placeholder).forEach(([key, value]) => { + placeh.style[key] = value; + }); + } + } +} diff --git a/src/index.js b/src/index.js index 42dfb2d..c4d68f1 100644 --- a/src/index.js +++ b/src/index.js @@ -4,6 +4,11 @@ const dropdown = new DropDown({ selector: '.cg-dropdown', placeholder: 'Выберите авто', items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], + styles: { + head: { + background: 'red', + }, + }, multiselect: true, multiselectTag: true, }); @@ -42,6 +47,7 @@ const dropdown2 = new DropDown({ value: '5', }, ], + multiselect: true, multiselectTag: true, }); From c3bcea099795d841e1053016d22b0e9023be597f Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 11 Oct 2022 13:44:09 +0300 Subject: [PATCH 2/5] Refactoring method #init and render. --- src/cg-dropdown.js | 76 ++++++++++++++++++++++++++++++++-------------- src/index.js | 17 ++++++----- 2 files changed, 64 insertions(+), 29 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index f52cc39..e377162 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -25,6 +25,27 @@ export class DropDown { } addItem(item) { + if (!item) { + return false; + } + + const random = Math.random().toString(36).substring(2, 10); + const index = this.#items.length; + + if (typeof item === 'object') { + item = { + id: item.id, + title: item.title, + value: item.value, + }; + } else { + item = { + id: random, + title: item, + value: index, + }; + } + this.#items.push(item); this.#render(); } @@ -71,12 +92,38 @@ export class DropDown { this.#list = this.#element.querySelector('.list'); this.#caret = this.#element.querySelector('.caret'); - const { items, multiselect } = this.#options; - this.#items = items; + const { items, multiselect, url } = this.#options; + this.#items = []; if (multiselect) { this.#selectedItems = []; } + + if (!items && url) { + this.#renderUrl(); + return; + } + + items.forEach((dataItem, index) => { + const random = Math.random().toString(36).substring(2, 10); + let item = {}; + + if (this.#checkItemStruct(dataItem)) { + item = { + id: dataItem.id, + title: dataItem.title, + value: index, + }; + } else { + item = { + id: random, + title: dataItem, + value: index, + }; + } + + this.#items.push(item); + }); } #initSelected(select) { @@ -137,44 +184,30 @@ export class DropDown { if (!items && url) { this.#renderUrl(); - return; } - items.forEach((item, index) => { + this.#items.forEach((dataItem) => { const li = document.createElement('li'); - let text = ''; - let id = ''; li.classList.add('list__item'); - if (this.#checkItemStruct(item)) { - text = item.title; - id = item.id; - } else { - text = item; - } - if (multiselect) { const checkBox = document.createElement('input'); checkBox.type = 'checkbox'; if (multiselectTag) { - if (this.#checkItemStruct(item)) { - checkBox.setAttribute('id', `chbox-${item.id}`); - } else { - checkBox.setAttribute('id', `chbox-${index}`); - } + checkBox.setAttribute('id', `chbox-${dataItem.id}`); } - li.appendChild(checkBox); } - let textNode = document.createTextNode(text); + let textNode = document.createTextNode(dataItem.title); li.appendChild(textNode); ul.appendChild(li); }); + console.log(this.#items); this.#addOptionsBehaviour(); } @@ -192,8 +225,7 @@ export class DropDown { const response = await fetch(url); const data = await response.json(); - - this.#items = []; + console.log(response); data.forEach((dataItem, index) => { const item = { diff --git a/src/index.js b/src/index.js index c4d68f1..fb786a9 100644 --- a/src/index.js +++ b/src/index.js @@ -15,7 +15,8 @@ const dropdown = new DropDown({ dropdown.addItem('ZAZ'); dropdown.addItem('LADA'); -// dropdown.addItem('BMW'); +dropdown.addItem('Kamaz 258'); +dropdown.addItem('BMW'); const dropdown2 = new DropDown({ selector: '.cg-dropdown2', @@ -24,34 +25,36 @@ const dropdown2 = new DropDown({ { id: 'addaw21', title: 'BMW', - value: '1', + value: 1, }, { id: '2414q', title: 'Opel', - value: '2', + value: 2, }, { id: '24qwds', title: 'Kamaz 258', - value: '3', + value: 3, }, { id: '28wds', title: 'MAN', - value: '4', + value: 4, }, { id: '28qwds', title: 'BOOT', - value: '5', + value: 5, }, ], multiselect: true, - multiselectTag: true, + // multiselectTag: true, }); +dropdown2.addItem('LADA'); + //ToDo: paste the desired url; const dropdown3 = new DropDown({ From 1e694f2594dd533c3a68ecec440f060c8de0d5d8 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 11 Oct 2022 16:48:13 +0300 Subject: [PATCH 3/5] All methods in working,and refactoring render, renderUrl etc.. --- src/cg-dropdown.js | 147 +++++++++++++++++---------------------------- src/index.js | 12 +++- 2 files changed, 66 insertions(+), 93 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index e377162..ae298db 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -66,7 +66,11 @@ export class DropDown { selectIndex(index) { const options = this.#element.querySelectorAll('.list__item'); - let select = options[index].innerText; + if (index > options.length) { + return; + } + + const select = options[index].innerText; this.#render(select); } @@ -77,6 +81,8 @@ export class DropDown { #init(options) { this.#options = options; + const { items, multiselect, url } = this.#options; + const elem = document.querySelector(options.selector); if (!elem) { @@ -92,7 +98,6 @@ export class DropDown { this.#list = this.#element.querySelector('.list'); this.#caret = this.#element.querySelector('.caret'); - const { items, multiselect, url } = this.#options; this.#items = []; if (multiselect) { @@ -127,24 +132,17 @@ export class DropDown { } #initSelected(select) { - const { styles } = this.#options; + const { styles, selected, placeholder } = this.#options; - if (this.#options.selected) { - createSelected(this.#element, this.#options.selected); + if (selected) { + createSelected(this.#element, selected); + } else if (placeholder) { + createSelected(this.#element, placeholder); } else { createSelected(this.#element, 'Select...'); } - if (!this.#options.selected && this.#options.placeholder) { - createSelected(this.#element, this.#options.placeholder); - } - if (styles) { - if (this.#options.placeholder) { - createSelected(this.#element, this.#options.placeholder, styles); - } else if (this.#options.selected) { - createSelected(this.#element, this.#options.selected, styles); - } customStyles(this.#element, styles); } @@ -154,7 +152,7 @@ export class DropDown { } #render(select) { - const { items, styles, url, multiselect, multiselectTag } = this.#options; + const { styles, multiselect, multiselectTag } = this.#options; if (select || (select && styles)) { this.#initSelected(select); @@ -168,24 +166,15 @@ export class DropDown { if (styles) { const { list } = styles; - ul.classList.add('list'); - if (ul && list) { Object.entries(list).forEach(([key, value]) => { ul.style[key] = value; }); } - - this.#element.appendChild(ul); - } else { - ul.classList.add('list'); - this.#element.appendChild(ul); } - if (!items && url) { - this.#renderUrl(); - return; - } + ul.classList.add('list'); + this.#element.appendChild(ul); this.#items.forEach((dataItem) => { const li = document.createElement('li'); @@ -195,10 +184,8 @@ export class DropDown { if (multiselect) { const checkBox = document.createElement('input'); checkBox.type = 'checkbox'; + checkBox.setAttribute('id', `chbox-${dataItem.id}`); - if (multiselectTag) { - checkBox.setAttribute('id', `chbox-${dataItem.id}`); - } li.appendChild(checkBox); } @@ -207,15 +194,14 @@ export class DropDown { li.appendChild(textNode); ul.appendChild(li); }); - console.log(this.#items); this.#addOptionsBehaviour(); } async #renderUrl() { - const { url } = this.#options; + const { url, items, multiselect } = this.#options; - if (this.#items) { + if (items) { return; } @@ -224,8 +210,8 @@ export class DropDown { } const response = await fetch(url); + const data = await response.json(); - console.log(response); data.forEach((dataItem, index) => { const item = { @@ -237,12 +223,13 @@ export class DropDown { const li = document.createElement('li'); const text = document.createTextNode(item.title); - const checkBox = document.createElement('input'); - checkBox.type = 'checkbox'; + if (multiselect) { + const checkBox = document.createElement('input'); + checkBox.type = 'checkbox'; - checkBox.setAttribute('id', `chbox-${item.id}`); - - li.appendChild(checkBox); + checkBox.setAttribute('id', `chbox-${item.id}`); + li.appendChild(checkBox); + } li.classList.add('list__item'); li.appendChild(text); @@ -268,16 +255,16 @@ export class DropDown { } #addOptionsBehaviour() { - const { multiselect, placeholder, multiselectTag } = this.#options; + const { multiselect, placeholder, selected, multiselectTag } = this.#options; const options = this.#element.querySelectorAll('.list__item'); - const selected = this.#element.querySelector('.selected'); + const select = this.#element.querySelector('.selected'); const ul = document.createElement('ul'); if (multiselect) { ul.classList.add('multiselect-tag'); - selected.classList.add('overflow-hidden'); + select.classList.add('overflow-hidden'); } options.forEach((option, index) => { @@ -296,83 +283,59 @@ export class DropDown { } const checkIndex = this.#indexes.indexOf(index); - let value = ''; - let id = ''; if (checkIndex === -1) { this.#indexes.push(index); - if (this.#checkItemStruct(item)) { - this.#selectedItems.push(item.title); - value = item.title; - id = item.id; - } else { - this.#selectedItems.push(item); - value = item; - } + this.#selectedItems.push(item.title); - selected.innerText = ''; + select.innerText = ''; if (multiselectTag) { - selected.appendChild(ul); + select.appendChild(ul); - if (this.#checkItemStruct(item)) { - ul.appendChild( - createBreadcrumb( - this.#options, - this.#element, - this.#indexes, - this.#selectedItems, - value, - index, - id, - ), - ); - } else { - ul.appendChild( - createBreadcrumb( - this.#options, - this.#element, - this.#indexes, - this.#selectedItems, - value, - index, - ), - ); - } + ul.appendChild( + createBreadcrumb( + this.#options, + this.#element, + this.#indexes, + this.#selectedItems, + item.title, + index, + item.id, + ), + ); } else { - selected.innerText = this.#selectedItems; + select.innerText = this.#selectedItems; } } else { if (multiselectTag) { const tagItem = document.getElementById(`tag-${index}`); ul.removeChild(tagItem); - - this.#indexes.splice(checkIndex, 1); - this.#selectedItems.splice(checkIndex, 1); - } else { - this.#indexes.splice(checkIndex, 1); - this.#selectedItems.splice(checkIndex, 1); } + this.#indexes.splice(checkIndex, 1); + this.#selectedItems.splice(checkIndex, 1); } if (!this.#selectedItems.length) { - selected.innerText = placeholder; + if (placeholder) { + select.innerText = placeholder; + } else if (selected) { + select.innerText = selected; + } else { + select.innerText = 'Select...'; + } } else { if (multiselectTag) { - selected.appendChild(ul); + select.appendChild(ul); } else { - selected.innerText = this.#selectedItems; + select.innerText = this.#selectedItems; } } } } else { - if (this.#checkItemStruct(item)) { - selected.innerText = item.title; - } else { - selected.innerText = item; - } + select.innerText = item.title; this.#selectedItems = item; options.forEach((option) => { diff --git a/src/index.js b/src/index.js index fb786a9..22b3e06 100644 --- a/src/index.js +++ b/src/index.js @@ -21,6 +21,7 @@ dropdown.addItem('BMW'); const dropdown2 = new DropDown({ selector: '.cg-dropdown2', placeholder: 'SELECT CAR', + items: [ { id: 'addaw21', @@ -48,7 +49,11 @@ const dropdown2 = new DropDown({ value: 5, }, ], - + styles: { + head: { + background: 'red', + }, + }, multiselect: true, // multiselectTag: true, }); @@ -61,6 +66,11 @@ const dropdown3 = new DropDown({ selector: '.cg-dropdown3', placeholder: 'URL', url: 'http://jsonplaceholder.typicode.com/users', + styles: { + head: { + background: 'red', + }, + }, multiselect: true, multiselectTag: true, }); From 014e72b13f893a1a0f9eba74ffd0b95e4d6b7a7d Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 11 Oct 2022 17:16:07 +0300 Subject: [PATCH 4/5] Removing exsess variables --- src/cg-dropdown.js | 2 -- src/index.js | 7 ++----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index ae298db..f34d131 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -354,8 +354,6 @@ export class DropDown { } if (event) { - let list = this.#element.querySelectorAll('.list'); - if (event === 'mouseenter') { this.#element.addEventListener(event, () => { this.#open(); diff --git a/src/index.js b/src/index.js index 22b3e06..3f62d18 100644 --- a/src/index.js +++ b/src/index.js @@ -49,12 +49,9 @@ const dropdown2 = new DropDown({ value: 5, }, ], - styles: { - head: { - background: 'red', - }, - }, + multiselect: true, + event: 'mouseenter', // multiselectTag: true, }); From 8a8c726d69ed12ff07bf9860bd83c6462ac23d1e Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 12 Oct 2022 10:36:17 +0300 Subject: [PATCH 5/5] Fixed naming variables --- src/cg-dropdown.js | 66 +++++++++++++++----------------- src/components/create-element.js | 7 ++-- 2 files changed, 34 insertions(+), 39 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index f34d131..fea2868 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -95,9 +95,6 @@ export class DropDown { this.#open(); }); - this.#list = this.#element.querySelector('.list'); - this.#caret = this.#element.querySelector('.caret'); - this.#items = []; if (multiselect) { @@ -152,7 +149,7 @@ export class DropDown { } #render(select) { - const { styles, multiselect, multiselectTag } = this.#options; + const { styles, multiselect } = this.#options; if (select || (select && styles)) { this.#initSelected(select); @@ -161,38 +158,38 @@ export class DropDown { this.#initSelected(); } - const ul = document.createElement('ul'); + const ulList = document.createElement('ul'); if (styles) { const { list } = styles; - if (ul && list) { + if (ulList && list) { Object.entries(list).forEach(([key, value]) => { - ul.style[key] = value; + ulList.style[key] = value; }); } } - ul.classList.add('list'); - this.#element.appendChild(ul); + ulList.classList.add('list'); + this.#element.appendChild(ulList); this.#items.forEach((dataItem) => { - const li = document.createElement('li'); + const liItem = document.createElement('li'); - li.classList.add('list__item'); + liItem.classList.add('list__item'); if (multiselect) { const checkBox = document.createElement('input'); checkBox.type = 'checkbox'; checkBox.setAttribute('id', `chbox-${dataItem.id}`); - li.appendChild(checkBox); + liItem.appendChild(checkBox); } let textNode = document.createTextNode(dataItem.title); - li.appendChild(textNode); - ul.appendChild(li); + liItem.appendChild(textNode); + ulList.appendChild(liItem); }); this.#addOptionsBehaviour(); @@ -211,29 +208,29 @@ export class DropDown { const response = await fetch(url); - const data = await response.json(); + const dataUrl = await response.json(); - data.forEach((dataItem, index) => { + dataUrl.forEach((dataItem, index) => { const item = { id: dataItem.phone, title: dataItem.name, value: index, }; - const ul = this.#element.querySelector('.list'); - const li = document.createElement('li'); - const text = document.createTextNode(item.title); + const ulUrl = this.#element.querySelector('.list'); + const liUrl = document.createElement('li'); + const textUrl = document.createTextNode(item.title); if (multiselect) { const checkBox = document.createElement('input'); checkBox.type = 'checkbox'; checkBox.setAttribute('id', `chbox-${item.id}`); - li.appendChild(checkBox); + liUrl.appendChild(checkBox); } - li.classList.add('list__item'); - li.appendChild(text); - ul.appendChild(li); + liUrl.classList.add('list__item'); + liUrl.appendChild(textUrl); + ulUrl.appendChild(liUrl); this.#items.push(item); }); @@ -287,25 +284,22 @@ export class DropDown { if (checkIndex === -1) { this.#indexes.push(index); - this.#selectedItems.push(item.title); - select.innerText = ''; if (multiselectTag) { + this.#selectedItems.push(item); select.appendChild(ul); - ul.appendChild( - createBreadcrumb( - this.#options, - this.#element, - this.#indexes, - this.#selectedItems, - item.title, - index, - item.id, - ), - ); + const data = { + option: this.#options, + element: this.#element, + indexes: this.#indexes, + selectedItems: this.#selectedItems, + }; + + ul.appendChild(createBreadcrumb(data, item.title, index, item.id)); } else { + this.#selectedItems.push(item.title); select.innerText = this.#selectedItems; } } else { diff --git a/src/components/create-element.js b/src/components/create-element.js index afea0cf..f897488 100644 --- a/src/components/create-element.js +++ b/src/components/create-element.js @@ -1,10 +1,11 @@ -export function createBreadcrumb(options, element, indexes, selectedItems, value, index, id) { - const { placeholder } = options; +export function createBreadcrumb(data, title, index, id) { + const { element, option, indexes, selectedItems } = data; + const { placeholder } = option; const selected = element.querySelector('.selected'); const li = document.createElement('li'); - const text = document.createTextNode(value); + const text = document.createTextNode(title); const svg = 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');