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 ulList = document.createElement('ul');
///
const nativSelect = document.createElement('select');
nativSelect.setAttribute('form', 'data');
nativSelect.classList.add('nativSelect');
ulList.classList.add('list'); ulList.classList.add('list');
if (styles) { if (styles) {
@ -351,11 +355,15 @@ export class DropDown {
} }
this.#element.appendChild(ulList); this.#element.appendChild(ulList);
///
this.#element.appendChild(nativSelect);
this.#items.forEach((dataItem) => { this.#items.forEach((dataItem) => {
const liItem = document.createElement('li'); const liItem = document.createElement('li');
const nativOption = document.createElement('option');
const strongItem = document.createElement('strong'); const strongItem = document.createElement('strong');
nativOption.classList.add('nativSelect__nativOption');
liItem.classList.add('list__item'); liItem.classList.add('list__item');
strongItem.classList.add('category'); strongItem.classList.add('category');
@ -371,6 +379,13 @@ export class DropDown {
if (dataItem.title) { if (dataItem.title) {
textNode = document.createTextNode(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); liItem.appendChild(textNode);
ulList.appendChild(liItem); ulList.appendChild(liItem);
} else { } else {
@ -488,6 +503,7 @@ export class DropDown {
const options = this.#element.querySelectorAll('.list__item'); const options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected'); const select = this.#element.querySelector('.selected');
const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
const ul = document.createElement('ul'); const ul = document.createElement('ul');
@ -562,6 +578,11 @@ export class DropDown {
} else { } else {
select.innerText = item.title; select.innerText = item.title;
this.#selectedItems = item; this.#selectedItems = item;
nativOption.forEach((op) => {
if (op.textContent === item.title) {
op.setAttribute('selected', 'selected');
}
});
options.forEach((option) => { options.forEach((option) => {
option.classList.remove('active'); 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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cg-Select</title> <title>Cg-Select</title>
<link href="./style/main.scss" rel="stylesheet" /> <link href="./style/main.scss" rel="stylesheet" />
<link href="./style/nativSelect.scss" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<form id="data" action="handler.php"></form>
<button class="cg-dropdown cg-dropdown_one"></button> <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> </div>
</body> </body>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>

114
src/index.js
View File

@ -15,70 +15,66 @@ const dropdown = new DropDown({
'MAN', 'MAN',
'max', 'max',
], ],
multiselect: true,
multiselectTag: true,
}); });
dropdown.deleteItem(2);
// ------------------------------URL-------------------- // ------------------------------URL--------------------
const dropdown3 = new DropDown({ // const dropdown3 = new DropDown({
selector: '.cg-dropdown_three', // selector: '.cg-dropdown_three',
placeholder: 'URL', // placeholder: 'URL',
url: 'http://jsonplaceholder.typicode.com/users', // url: 'http://jsonplaceholder.typicode.com/users',
styles: { // styles: {
head: { // head: {
background: 'black', // background: 'black',
width: '350px', // width: '350px',
}, // },
}, // },
multiselect: true, // multiselect: true,
multiselectTag: true, // multiselectTag: true,
}); // });
// --------------------------------Категории-------------------------- // --------------------------------Категории--------------------------
const dropdown4 = new DropDown({ // const dropdown4 = new DropDown({
selector: '.cg-dropdown_button', // selector: '.cg-dropdown_button',
placeholder: 'Выберите регион', // placeholder: 'Выберите регион',
items: [ // items: [
{ // {
category: 'Russia', // category: 'Russia',
categoryItems: [ // categoryItems: [
{ // {
id: '28qwds', // id: '28qwds',
title: 'Москва', // title: 'Москва',
value: 0, // value: 0,
}, // },
, // ,
'Ростов-на-дону', // 'Ростов-на-дону',
'Саратов', // 'Саратов',
'Волгоград', // 'Волгоград',
'Донецк', // 'Донецк',
], // ],
}, // },
{ // {
category: 'USA', // category: 'USA',
categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], // categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
}, // },
{ // {
category: 'France', // category: 'France',
categoryItems: ['Paris'], // categoryItems: ['Paris'],
}, // },
], // ],
styles: { // styles: {
head: { // head: {
background: 'red', // background: 'red',
}, // },
list: { // list: {
background: 'green', // background: 'green',
}, // },
chips: { // chips: {
background: 'blue', // background: 'blue',
}, // },
}, // },
multiselect: true, // multiselect: true,
multiselectTag: true, // multiselectTag: true,
}); // });
//----------------управление с помощью кнопок---------------------------------- //----------------управление с помощью кнопок----------------------------------
/* const buttonOpen = document.querySelector('.button__open'); /* 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;
}
}