Merge pull request #13 from apuc/add-data-select-push
Add data select push
This commit is contained in:
GitHub
commit
13528ec659
@ -3,8 +3,10 @@ import {
|
||||
customStyles,
|
||||
getFormatItem,
|
||||
customStylesFormat,
|
||||
nativOptionMultiple,
|
||||
nativOptionOrdinary,
|
||||
} from './components/utils';
|
||||
import { createBreadcrumb } from './components/create-element';
|
||||
import { createBreadcrumb, createListSelect } from './components/create-element';
|
||||
|
||||
/**
|
||||
* @class Описание класса DropDown
|
||||
@ -342,7 +344,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 +357,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');
|
||||
|
||||
@ -365,12 +375,21 @@ export class DropDown {
|
||||
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
|
||||
|
||||
liItem.appendChild(checkBox);
|
||||
|
||||
nativSelect.setAttribute('multiple', 'multiple');
|
||||
}
|
||||
nativSelect.setAttribute('name', 'dataSelect');
|
||||
|
||||
let textNode = '';
|
||||
|
||||
if (dataItem.title) {
|
||||
textNode = document.createTextNode(dataItem.title);
|
||||
///
|
||||
nativOption.text = dataItem.title;
|
||||
nativOption.value = dataItem.title;
|
||||
nativSelect.appendChild(nativOption);
|
||||
|
||||
///
|
||||
liItem.appendChild(textNode);
|
||||
ulList.appendChild(liItem);
|
||||
} else {
|
||||
@ -488,17 +507,19 @@ 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');
|
||||
const ulMultipul = document.createElement('ul');
|
||||
|
||||
if (multiselect) {
|
||||
ul.classList.add('multiselect-tag');
|
||||
ulMultipul.classList.add('multiselect-tag');
|
||||
select.classList.add('overflow-hidden');
|
||||
}
|
||||
|
||||
options.forEach((option, index) => {
|
||||
option.addEventListener('click', (event) => {
|
||||
const item = this.#items[index];
|
||||
|
||||
if (multiselect) {
|
||||
event.stopPropagation();
|
||||
option.classList.toggle('active');
|
||||
@ -513,13 +534,15 @@ export class DropDown {
|
||||
const checkIndex = this.#indexes.indexOf(index);
|
||||
|
||||
if (checkIndex === -1) {
|
||||
nativOptionMultiple(nativOption, item.title, true);
|
||||
|
||||
this.#indexes.push(index);
|
||||
|
||||
select.innerText = '';
|
||||
|
||||
if (multiselectTag) {
|
||||
this.#selectedItems.push(item);
|
||||
select.appendChild(ul);
|
||||
select.appendChild(ulMultipul);
|
||||
|
||||
const data = {
|
||||
option: this.#options,
|
||||
@ -528,7 +551,7 @@ export class DropDown {
|
||||
selectedItems: this.#selectedItems,
|
||||
};
|
||||
|
||||
ul.appendChild(createBreadcrumb(data, item.title, index, item.id));
|
||||
ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
|
||||
} else {
|
||||
this.#selectedItems.push(item.title);
|
||||
select.innerText = this.#selectedItems;
|
||||
@ -536,11 +559,11 @@ export class DropDown {
|
||||
} else {
|
||||
if (multiselectTag) {
|
||||
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
|
||||
|
||||
ul.removeChild(tagItem);
|
||||
ulMultipul.removeChild(tagItem);
|
||||
}
|
||||
this.#indexes.splice(checkIndex, 1);
|
||||
this.#selectedItems.splice(checkIndex, 1);
|
||||
nativOptionMultiple(nativOption, item.title, false);
|
||||
}
|
||||
|
||||
if (!this.#selectedItems.length) {
|
||||
@ -553,7 +576,7 @@ export class DropDown {
|
||||
}
|
||||
} else {
|
||||
if (multiselectTag) {
|
||||
select.appendChild(ul);
|
||||
select.appendChild(ulMultipul);
|
||||
} else {
|
||||
select.innerText = this.#selectedItems;
|
||||
}
|
||||
@ -562,6 +585,7 @@ export class DropDown {
|
||||
} else {
|
||||
select.innerText = item.title;
|
||||
this.#selectedItems = item;
|
||||
nativOptionOrdinary(nativOption, item.title);
|
||||
|
||||
options.forEach((option) => {
|
||||
option.classList.remove('active');
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { customStylesFormat } from './utils';
|
||||
import { customStylesFormat, nativOptionMultiple } from './utils';
|
||||
/**
|
||||
* @module createBreadcrumb
|
||||
*/
|
||||
@ -16,6 +16,8 @@ export function createBreadcrumb(data, title, index, id) {
|
||||
const { placeholder, styles } = option;
|
||||
|
||||
const selected = element.querySelector('.selected');
|
||||
const nativOption = element.querySelectorAll('.nativSelect__nativOption');
|
||||
|
||||
const liChip = document.createElement('li');
|
||||
const textNode = document.createTextNode(title);
|
||||
const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
@ -41,14 +43,14 @@ export function createBreadcrumb(data, title, index, id) {
|
||||
|
||||
svgIcon.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
nativOptionMultiple(nativOption, title, false);
|
||||
|
||||
const deleteIcon = indexes.indexOf(index);
|
||||
let checkBox = '';
|
||||
|
||||
indexes.splice(deleteIcon, 1);
|
||||
selectedItems.splice(deleteIcon, 1);
|
||||
|
||||
let checkBox = '';
|
||||
|
||||
if (id) {
|
||||
checkBox = document.getElementById(`chbox-${id}`);
|
||||
} else {
|
||||
|
||||
@ -108,3 +108,39 @@ export function getFormatItem(dataItem, index) {
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Поведение нативного(одинарного) селекта при выборе кастомного
|
||||
* @param {NodeList} element NodeList нативного селекта
|
||||
* @param {object} item выбранный элемент в кастомном селекте
|
||||
*/
|
||||
export function nativOptionOrdinary(element, item) {
|
||||
element.forEach((option) => {
|
||||
option.removeAttribute('selected');
|
||||
if (option.textContent === item) {
|
||||
option.setAttribute('selected', 'selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Поведение нативного(Multiple) селекта при выборе в кастомном
|
||||
* @param {NodeList} element NodeList нативного селекта
|
||||
* @param {object} item выбранный элемент в кастомном селекте
|
||||
* @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
|
||||
*/
|
||||
export function nativOptionMultiple(element, item, condition) {
|
||||
element.forEach((option) => {
|
||||
if (condition == true) {
|
||||
if (option.textContent === item) {
|
||||
option.setAttribute('selected', 'selected');
|
||||
}
|
||||
} else if (condition == false) {
|
||||
if (option.textContent === item) {
|
||||
option.removeAttribute('selected');
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
113
src/index.js
113
src/index.js
@ -19,66 +19,65 @@ const dropdown = new DropDown({
|
||||
multiselectTag: true,
|
||||
});
|
||||
|
||||
dropdown.deleteItem(2);
|
||||
|
||||
dropdown.disabled(false);
|
||||
// ------------------------------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
13
src/style/nativSelect.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user