Categories list bed working(
This commit is contained in:
parent
38f228248d
commit
c67ddb75cb
@ -136,6 +136,7 @@ export class DropDown {
|
||||
items.forEach((dataItem, index) => {
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
let item = {};
|
||||
let category = '';
|
||||
|
||||
if (checkItemStruct(dataItem)) {
|
||||
item = {
|
||||
@ -151,7 +152,20 @@ export class DropDown {
|
||||
};
|
||||
}
|
||||
|
||||
this.#items.push(item);
|
||||
if (dataItem.category && dataItem.categoryItem) {
|
||||
category = dataItem.category;
|
||||
this.#items.push(category);
|
||||
dataItem.categoryItem.forEach((i) => {
|
||||
item = {
|
||||
id: random,
|
||||
title: i,
|
||||
value: index,
|
||||
};
|
||||
this.#items.push(item);
|
||||
});
|
||||
} else {
|
||||
this.#items.push(item);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -176,7 +190,7 @@ export class DropDown {
|
||||
}
|
||||
|
||||
#render(select) {
|
||||
const { styles, multiselect, event } = this.#options;
|
||||
const { styles, multiselect } = this.#options;
|
||||
|
||||
if (select || (select && styles)) {
|
||||
this.#initSelected(select);
|
||||
@ -200,8 +214,11 @@ export class DropDown {
|
||||
ulList.classList.add('list');
|
||||
this.#element.appendChild(ulList);
|
||||
|
||||
const arr = [];
|
||||
|
||||
this.#items.forEach((dataItem) => {
|
||||
const liItem = document.createElement('li');
|
||||
const strongItem = document.createElement('strong');
|
||||
|
||||
liItem.classList.add('list__item');
|
||||
|
||||
@ -210,15 +227,42 @@ export class DropDown {
|
||||
checkBox.type = 'checkbox';
|
||||
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
|
||||
|
||||
liItem.appendChild(checkBox);
|
||||
if (checkBox.innerHTML !== '') {
|
||||
liItem.appendChild(checkBox);
|
||||
// return;
|
||||
} else {
|
||||
liItem.removeChild(checkBox);
|
||||
}
|
||||
}
|
||||
let textNode = '';
|
||||
|
||||
let textNode = document.createTextNode(dataItem.title);
|
||||
if (dataItem.title) {
|
||||
// console.log('data title', dataItem.title);
|
||||
textNode = document.createTextNode(dataItem.title);
|
||||
// console.log(textNode);
|
||||
liItem.appendChild(textNode);
|
||||
} else if (!dataItem.title) {
|
||||
// console.log('aa');
|
||||
// debugger;
|
||||
textNode = document.createTextNode(dataItem);
|
||||
strongItem.appendChild(textNode);
|
||||
ulList.appendChild(strongItem);
|
||||
// let position = this.#items.indexOf(dataItem);
|
||||
// console.log(position);
|
||||
|
||||
liItem.appendChild(textNode);
|
||||
// this.#items.splice(position, 1);
|
||||
console.log(this.#items);
|
||||
}
|
||||
// console.log(this.#items);
|
||||
ulList.appendChild(liItem);
|
||||
|
||||
if (liItem.innerHTML === '') {
|
||||
ulList.removeChild(liItem);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(this.#items);
|
||||
|
||||
this.#addOptionsBehaviour();
|
||||
}
|
||||
|
||||
@ -287,6 +331,7 @@ export class DropDown {
|
||||
|
||||
const options = this.#element.querySelectorAll('.list__item');
|
||||
const select = this.#element.querySelector('.selected');
|
||||
const category = this.#element.querySelector('strong');
|
||||
|
||||
const ul = document.createElement('ul');
|
||||
|
||||
@ -295,10 +340,17 @@ export class DropDown {
|
||||
select.classList.add('overflow-hidden');
|
||||
}
|
||||
|
||||
console.log(this.#items);
|
||||
options.forEach((option, index) => {
|
||||
option.addEventListener('click', (event) => {
|
||||
const item = this.#items[index];
|
||||
let item = '';
|
||||
if (category) {
|
||||
item = this.#items[index + 1];
|
||||
} else {
|
||||
item = this.#items[index];
|
||||
}
|
||||
|
||||
// console.log(item);
|
||||
if (multiselect) {
|
||||
event.stopPropagation();
|
||||
option.classList.toggle('active');
|
||||
|
||||
@ -17,10 +17,10 @@
|
||||
|
||||
<button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
|
||||
</div>
|
||||
<div class="buttonControlBox">
|
||||
<!-- <div class="buttonControlBox">
|
||||
<button class="buttonControl button__open">Open</button>
|
||||
<button class="buttonControl button__close">Close</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</body>
|
||||
<script type="module" src="index.js"></script>
|
||||
</html>
|
||||
|
||||
142
src/index.js
142
src/index.js
@ -1,87 +1,91 @@
|
||||
import { DropDown } from './cg-dropdown';
|
||||
|
||||
const dropdown = new DropDown({
|
||||
selector: '.cg-dropdown_one',
|
||||
placeholder: 'Выберите авто',
|
||||
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
||||
// const dropdown = new DropDown({
|
||||
// selector: '.cg-dropdown_one',
|
||||
// placeholder: 'Выберите авто',
|
||||
// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
||||
|
||||
multiselect: true,
|
||||
multiselectTag: true,
|
||||
});
|
||||
// multiselect: true,
|
||||
// multiselectTag: true,
|
||||
// });
|
||||
|
||||
dropdown.addItem('ZAZ');
|
||||
dropdown.addItem('LADA');
|
||||
dropdown.addItem('Kamaz 258');
|
||||
dropdown.addItem('BMW');
|
||||
// dropdown.addItem('ZAZ');
|
||||
// dropdown.addItem('LADA');
|
||||
// dropdown.addItem('Kamaz 258');
|
||||
// dropdown.addItem('BMW');
|
||||
|
||||
const dropdown2 = new DropDown({
|
||||
selector: '.cg-dropdown_two',
|
||||
placeholder: 'SELECT CAR',
|
||||
items: [
|
||||
{
|
||||
id: 'addaw21',
|
||||
title: 'BMW',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
id: '2414q',
|
||||
title: 'Opel',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
id: '24qwds',
|
||||
title: 'Kamaz 258',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
id: '28wds',
|
||||
title: 'MAN',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
id: '28qwds',
|
||||
title: 'BOOT',
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
// const dropdown2 = new DropDown({
|
||||
// selector: '.cg-dropdown_two',
|
||||
// placeholder: 'SELECT CAR',
|
||||
// items: [
|
||||
// {
|
||||
// id: 'addaw21',
|
||||
// title: 'BMW',
|
||||
// value: 1,
|
||||
// },
|
||||
// {
|
||||
// id: '2414q',
|
||||
// title: 'Opel',
|
||||
// value: 2,
|
||||
// },
|
||||
// {
|
||||
// id: '24qwds',
|
||||
// title: 'Kamaz 258',
|
||||
// value: 3,
|
||||
// },
|
||||
// {
|
||||
// id: '28wds',
|
||||
// title: 'MAN',
|
||||
// value: 4,
|
||||
// },
|
||||
// {
|
||||
// id: '28qwds',
|
||||
// title: 'BOOT',
|
||||
// value: 5,
|
||||
// },
|
||||
// ],
|
||||
|
||||
multiselect: true,
|
||||
event: 'mouseenter',
|
||||
// multiselectTag: true,
|
||||
});
|
||||
// multiselect: true,
|
||||
// event: 'mouseenter',
|
||||
// // multiselectTag: true,
|
||||
// });
|
||||
|
||||
dropdown.disabled(false);
|
||||
// dropdown.disabled(false);
|
||||
|
||||
dropdown2.addItem('LADA');
|
||||
// dropdown2.addItem('LADA');
|
||||
|
||||
//ToDo: paste the desired url;
|
||||
// //ToDo: paste the desired 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: ['Russia', 'USA', 'England', 'Turkey', 'France'],
|
||||
placeholder: 'Выберите регион',
|
||||
// items: ['Russia', 'USA', 'England', 'Turkey', 'France'],
|
||||
items: [
|
||||
{ category: 'Russia', categoryItem: ['Москва', 'Ростов-на-дону'] },
|
||||
{ category: 'USA', categoryItem: ['Alabama', 'Texas'] },
|
||||
],
|
||||
|
||||
multiselect: true,
|
||||
multiselectTag: true,
|
||||
// multiselect: true,
|
||||
// multiselectTag: true,
|
||||
});
|
||||
// dropdown4.disabled(true);
|
||||
|
||||
const buttonOpen = document.querySelector('.button__open');
|
||||
const buttonClose = document.querySelector('.button__close');
|
||||
// const buttonOpen = document.querySelector('.button__open');
|
||||
// const buttonClose = document.querySelector('.button__close');
|
||||
|
||||
dropdown4.buttonControl(buttonOpen, 'open');
|
||||
dropdown4.buttonControl(buttonClose, 'close');
|
||||
// dropdown4.buttonControl(buttonOpen, 'open');
|
||||
// dropdown4.buttonControl(buttonClose, 'close');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user