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

Categories list bed working(

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-13 20:34:34 +03:00
parent 38f228248d
commit c67ddb75cb
3 changed files with 133 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/cg-dropdown.js
View File

@ -136,6 +136,7 @@ export class DropDown {
items.forEach((dataItem, index) => { items.forEach((dataItem, index) => {
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
let item = {}; let item = {};
let category = '';
if (checkItemStruct(dataItem)) { if (checkItemStruct(dataItem)) {
item = { 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) { #render(select) {
const { styles, multiselect, event } = this.#options; const { styles, multiselect } = this.#options;
if (select || (select && styles)) { if (select || (select && styles)) {
this.#initSelected(select); this.#initSelected(select);
@ -200,8 +214,11 @@ export class DropDown {
ulList.classList.add('list'); ulList.classList.add('list');
this.#element.appendChild(ulList); this.#element.appendChild(ulList);
const arr = [];
this.#items.forEach((dataItem) => { this.#items.forEach((dataItem) => {
const liItem = document.createElement('li'); const liItem = document.createElement('li');
const strongItem = document.createElement('strong');
liItem.classList.add('list__item'); liItem.classList.add('list__item');
@ -210,15 +227,42 @@ export class DropDown {
checkBox.type = 'checkbox'; checkBox.type = 'checkbox';
checkBox.setAttribute('id', `chbox-${dataItem.id}`); 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); ulList.appendChild(liItem);
if (liItem.innerHTML === '') {
ulList.removeChild(liItem);
}
}); });
console.log(this.#items);
this.#addOptionsBehaviour(); this.#addOptionsBehaviour();
} }
@ -287,6 +331,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 category = this.#element.querySelector('strong');
const ul = document.createElement('ul'); const ul = document.createElement('ul');
@ -295,10 +340,17 @@ export class DropDown {
select.classList.add('overflow-hidden'); select.classList.add('overflow-hidden');
} }
console.log(this.#items);
options.forEach((option, index) => { options.forEach((option, index) => {
option.addEventListener('click', (event) => { 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) { if (multiselect) {
event.stopPropagation(); event.stopPropagation();
option.classList.toggle('active'); option.classList.toggle('active');

4
src/index.html
View File

@ -17,10 +17,10 @@
<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>
<div class="buttonControlBox"> <!-- <div class="buttonControlBox">
<button class="buttonControl button__open">Open</button> <button class="buttonControl button__open">Open</button>
<button class="buttonControl button__close">Close</button> <button class="buttonControl button__close">Close</button>
</div> </div> -->
</body> </body>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>
</html> </html>

142
src/index.js
View File

@ -1,87 +1,91 @@
import { DropDown } from './cg-dropdown'; import { DropDown } from './cg-dropdown';
const dropdown = new DropDown({ // const dropdown = new DropDown({
selector: '.cg-dropdown_one', // selector: '.cg-dropdown_one',
placeholder: 'Выберите авто', // placeholder: 'Выберите авто',
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], // items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
multiselect: true, // multiselect: true,
multiselectTag: true, // multiselectTag: true,
}); // });
dropdown.addItem('ZAZ'); // dropdown.addItem('ZAZ');
dropdown.addItem('LADA'); // dropdown.addItem('LADA');
dropdown.addItem('Kamaz 258'); // dropdown.addItem('Kamaz 258');
dropdown.addItem('BMW'); // dropdown.addItem('BMW');
const dropdown2 = new DropDown({ // const dropdown2 = new DropDown({
selector: '.cg-dropdown_two', // selector: '.cg-dropdown_two',
placeholder: 'SELECT CAR', // placeholder: 'SELECT CAR',
items: [ // items: [
{ // {
id: 'addaw21', // id: 'addaw21',
title: 'BMW', // title: 'BMW',
value: 1, // value: 1,
}, // },
{ // {
id: '2414q', // id: '2414q',
title: 'Opel', // title: 'Opel',
value: 2, // value: 2,
}, // },
{ // {
id: '24qwds', // id: '24qwds',
title: 'Kamaz 258', // title: 'Kamaz 258',
value: 3, // value: 3,
}, // },
{ // {
id: '28wds', // id: '28wds',
title: 'MAN', // title: 'MAN',
value: 4, // value: 4,
}, // },
{ // {
id: '28qwds', // id: '28qwds',
title: 'BOOT', // title: 'BOOT',
value: 5, // value: 5,
}, // },
], // ],
multiselect: true, // multiselect: true,
event: 'mouseenter', // event: 'mouseenter',
// multiselectTag: true, // // 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({ // 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: ['Russia', 'USA', 'England', 'Turkey', 'France'], // items: ['Russia', 'USA', 'England', 'Turkey', 'France'],
items: [
{ category: 'Russia', categoryItem: ['Москва', 'Ростов-на-дону'] },
{ category: 'USA', categoryItem: ['Alabama', 'Texas'] },
],
multiselect: true, // multiselect: true,
multiselectTag: true, // multiselectTag: true,
}); });
// dropdown4.disabled(true); // dropdown4.disabled(true);
const buttonOpen = document.querySelector('.button__open'); // const buttonOpen = document.querySelector('.button__open');
const buttonClose = document.querySelector('.button__close'); // const buttonClose = document.querySelector('.button__close');
dropdown4.buttonControl(buttonOpen, 'open'); // dropdown4.buttonControl(buttonOpen, 'open');
dropdown4.buttonControl(buttonClose, 'close'); // dropdown4.buttonControl(buttonClose, 'close');