From 48b175c18d19cf29cb0ed6529a0b7b7c413ec178 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Thu, 20 Oct 2022 17:47:50 +0300 Subject: [PATCH] Added native select and data push --- src/cg-dropdown.js | 21 +++++++ src/index.html | 9 ++- src/index.js | 114 ++++++++++++++++++------------------- src/style/nativSelect.scss | 13 +++++ 4 files changed, 95 insertions(+), 62 deletions(-) create mode 100644 src/style/nativSelect.scss diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 67769df..af7f7c2 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -342,7 +342,11 @@ export class DropDown { } const ulList = document.createElement('ul'); + /// + const nativSelect = document.createElement('select'); + nativSelect.setAttribute('form', 'data'); + nativSelect.classList.add('nativSelect'); ulList.classList.add('list'); if (styles) { @@ -351,11 +355,15 @@ export class DropDown { } this.#element.appendChild(ulList); + /// + this.#element.appendChild(nativSelect); this.#items.forEach((dataItem) => { const liItem = document.createElement('li'); + const nativOption = document.createElement('option'); const strongItem = document.createElement('strong'); + nativOption.classList.add('nativSelect__nativOption'); liItem.classList.add('list__item'); strongItem.classList.add('category'); @@ -371,6 +379,13 @@ export class DropDown { if (dataItem.title) { textNode = document.createTextNode(dataItem.title); + /// + nativOption.text = dataItem.title; + nativOption.value = dataItem.title; + nativSelect.setAttribute('name', 'dataSelect'); + nativSelect.appendChild(nativOption); + + /// liItem.appendChild(textNode); ulList.appendChild(liItem); } else { @@ -488,6 +503,7 @@ export class DropDown { const options = this.#element.querySelectorAll('.list__item'); const select = this.#element.querySelector('.selected'); + const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption'); const ul = document.createElement('ul'); @@ -562,6 +578,11 @@ export class DropDown { } else { select.innerText = item.title; this.#selectedItems = item; + nativOption.forEach((op) => { + if (op.textContent === item.title) { + op.setAttribute('selected', 'selected'); + } + }); options.forEach((option) => { option.classList.remove('active'); diff --git a/src/index.html b/src/index.html index 9d6e368..549a222 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,17 @@ Cg-Select +
+
+ + +
diff --git a/src/index.js b/src/index.js index ed3c042..01044ae 100644 --- a/src/index.js +++ b/src/index.js @@ -15,70 +15,66 @@ const dropdown = new DropDown({ 'MAN', 'max', ], - multiselect: true, - multiselectTag: true, }); -dropdown.deleteItem(2); - // ------------------------------URL-------------------- -const dropdown3 = new DropDown({ - selector: '.cg-dropdown_three', - placeholder: 'URL', - url: 'http://jsonplaceholder.typicode.com/users', - styles: { - head: { - background: 'black', - width: '350px', - }, - }, - multiselect: true, - multiselectTag: true, -}); +// const dropdown3 = new DropDown({ +// selector: '.cg-dropdown_three', +// placeholder: 'URL', +// url: 'http://jsonplaceholder.typicode.com/users', +// styles: { +// head: { +// background: 'black', +// width: '350px', +// }, +// }, +// multiselect: true, +// multiselectTag: true, +// }); // --------------------------------Категории-------------------------- -const dropdown4 = new DropDown({ - selector: '.cg-dropdown_button', - placeholder: 'Выберите регион', - items: [ - { - category: 'Russia', - categoryItems: [ - { - id: '28qwds', - title: 'Москва', - value: 0, - }, - , - 'Ростов-на-дону', - 'Саратов', - 'Волгоград', - 'Донецк', - ], - }, - { - category: 'USA', - categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], - }, - { - category: 'France', - categoryItems: ['Paris'], - }, - ], - styles: { - head: { - background: 'red', - }, - list: { - background: 'green', - }, - chips: { - background: 'blue', - }, - }, - multiselect: true, - multiselectTag: true, -}); +// const dropdown4 = new DropDown({ +// selector: '.cg-dropdown_button', +// placeholder: 'Выберите регион', +// items: [ +// { +// category: 'Russia', +// categoryItems: [ +// { +// id: '28qwds', +// title: 'Москва', +// value: 0, +// }, +// , +// 'Ростов-на-дону', +// 'Саратов', +// 'Волгоград', +// 'Донецк', +// ], +// }, +// { +// category: 'USA', +// categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], +// }, +// { +// category: 'France', +// categoryItems: ['Paris'], +// }, +// ], +// styles: { +// head: { +// background: 'red', +// }, +// list: { +// background: 'green', +// }, +// chips: { +// background: 'blue', +// }, +// }, +// multiselect: true, +// multiselectTag: true, +// }); //----------------управление с помощью кнопок---------------------------------- /* const buttonOpen = document.querySelector('.button__open'); diff --git a/src/style/nativSelect.scss b/src/style/nativSelect.scss new file mode 100644 index 0000000..c864dd0 --- /dev/null +++ b/src/style/nativSelect.scss @@ -0,0 +1,13 @@ +.nativSelect { + border: none; + cursor: pointer; + display: none; + color: white; + background: #2a2f3b; + box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5); + border-radius: 5px; + + &__nativOption { + border: 1px #0a0b0e solid; + } +}