apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added native select and data push

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-20 17:47:50 +03:00
parent 214d65bdcd
commit 48b175c18d
4 changed files with 95 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/cg-dropdown.js
View File

@ -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');

9
src/index.html
View File

@ -6,14 +6,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cg-Select</title>
<link href="./style/main.scss" rel="stylesheet" />
<link href="./style/nativSelect.scss" rel="stylesheet" />
</head>
<body>
<div class="container">
<form id="data" action="handler.php"></form>
<button class="cg-dropdown cg-dropdown_one"></button>
<input type="submit" form="data" value="Отправить" />
<!-- <button class="cg-dropdown cg-dropdown_three"></button>
<button class="cg-dropdown cg-dropdown_three"></button>
<button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
<button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button> -->
</div>
</body>
<script type="module" src="index.js"></script>

114
src/index.js
View File

@ -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');

13
src/style/nativSelect.scss Normal file
View File

@ -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;
}
}