Merge pull request #9 from apuc/add-categories-list
Add categories list
This commit is contained in:
MaxOvs19
GitHub
commit
292f1a94a2
@ -1,4 +1,4 @@
|
||||
import { customStyles, createSelected, checkItemStruct } from './components/utils';
|
||||
import { customStyles, createSelected, getFormatItem } from './components/utils';
|
||||
import { createBreadcrumb } from './components/create-element';
|
||||
|
||||
export class DropDown {
|
||||
@ -29,24 +29,9 @@ export class DropDown {
|
||||
return false;
|
||||
}
|
||||
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
const index = this.#items.length;
|
||||
|
||||
if (typeof item === 'object') {
|
||||
item = {
|
||||
id: item.id,
|
||||
title: item.title,
|
||||
value: item.value,
|
||||
};
|
||||
} else {
|
||||
item = {
|
||||
id: random,
|
||||
title: item,
|
||||
value: index,
|
||||
};
|
||||
}
|
||||
|
||||
this.#items.push(item);
|
||||
this.#items.push(getFormatItem(item, index));
|
||||
this.#render();
|
||||
}
|
||||
|
||||
@ -65,12 +50,14 @@ export class DropDown {
|
||||
|
||||
selectIndex(index) {
|
||||
const options = this.#element.querySelectorAll('.list__item');
|
||||
// const selected = this.#element.querySelector('.selected');
|
||||
|
||||
if (index > options.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const select = options[index].innerText;
|
||||
// selected.innerText = select;
|
||||
|
||||
this.#render(select);
|
||||
}
|
||||
@ -134,24 +121,18 @@ export class DropDown {
|
||||
}
|
||||
|
||||
items.forEach((dataItem, index) => {
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
let item = {};
|
||||
let category = '';
|
||||
|
||||
if (checkItemStruct(dataItem)) {
|
||||
item = {
|
||||
id: dataItem.id,
|
||||
title: dataItem.title,
|
||||
value: index,
|
||||
};
|
||||
if (dataItem.category && dataItem.categoryItems) {
|
||||
category = dataItem.category;
|
||||
|
||||
this.#items.push(category);
|
||||
dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
|
||||
this.#items.push(getFormatItem(categoryItem, indexCategory));
|
||||
});
|
||||
} else {
|
||||
item = {
|
||||
id: random,
|
||||
title: dataItem,
|
||||
value: index,
|
||||
};
|
||||
this.#items.push(getFormatItem(dataItem, index));
|
||||
}
|
||||
|
||||
this.#items.push(item);
|
||||
});
|
||||
}
|
||||
|
||||
@ -176,7 +157,8 @@ export class DropDown {
|
||||
}
|
||||
|
||||
#render(select) {
|
||||
const { styles, multiselect, event } = this.#options;
|
||||
const { styles, multiselect } = this.#options;
|
||||
// const { category } = this.#items;
|
||||
|
||||
if (select || (select && styles)) {
|
||||
this.#initSelected(select);
|
||||
@ -184,7 +166,6 @@ export class DropDown {
|
||||
} else {
|
||||
this.#initSelected();
|
||||
}
|
||||
|
||||
const ulList = document.createElement('ul');
|
||||
|
||||
if (styles) {
|
||||
@ -198,12 +179,15 @@ export class DropDown {
|
||||
}
|
||||
|
||||
ulList.classList.add('list');
|
||||
|
||||
this.#element.appendChild(ulList);
|
||||
|
||||
this.#items.forEach((dataItem) => {
|
||||
const liItem = document.createElement('li');
|
||||
const strongItem = document.createElement('strong');
|
||||
|
||||
liItem.classList.add('list__item');
|
||||
strongItem.classList.add('category');
|
||||
|
||||
if (multiselect) {
|
||||
const checkBox = document.createElement('input');
|
||||
@ -213,10 +197,24 @@ export class DropDown {
|
||||
liItem.appendChild(checkBox);
|
||||
}
|
||||
|
||||
let textNode = document.createTextNode(dataItem.title);
|
||||
let textNode = '';
|
||||
|
||||
if (dataItem.title) {
|
||||
textNode = document.createTextNode(dataItem.title);
|
||||
liItem.appendChild(textNode);
|
||||
ulList.appendChild(liItem);
|
||||
} else {
|
||||
textNode = document.createTextNode(dataItem);
|
||||
strongItem.appendChild(textNode);
|
||||
ulList.appendChild(strongItem);
|
||||
}
|
||||
});
|
||||
|
||||
this.#items.filter((item, index) => {
|
||||
if (typeof item !== 'object') {
|
||||
this.#items.splice(index, 1);
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
this.#addOptionsBehaviour();
|
||||
@ -287,6 +285,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');
|
||||
|
||||
@ -298,7 +297,6 @@ export class DropDown {
|
||||
options.forEach((option, index) => {
|
||||
option.addEventListener('click', (event) => {
|
||||
const item = this.#items[index];
|
||||
|
||||
if (multiselect) {
|
||||
event.stopPropagation();
|
||||
option.classList.toggle('active');
|
||||
|
||||
@ -59,3 +59,24 @@ export function checkItemStruct(item) {
|
||||
|
||||
return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
|
||||
}
|
||||
|
||||
export function getFormatItem(dataItem, index) {
|
||||
const random = Math.random().toString(36).substring(2, 10);
|
||||
let item = {};
|
||||
|
||||
if (checkItemStruct(dataItem)) {
|
||||
item = {
|
||||
id: dataItem.id,
|
||||
title: dataItem.title,
|
||||
value: index,
|
||||
};
|
||||
} else {
|
||||
item = {
|
||||
id: random,
|
||||
title: dataItem,
|
||||
value: index,
|
||||
};
|
||||
}
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
@ -11,16 +11,10 @@
|
||||
<div class="container">
|
||||
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||
|
||||
<button class="cg-dropdown cg-dropdown_two"></button>
|
||||
|
||||
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||
|
||||
<button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
|
||||
</div>
|
||||
<div class="buttonControlBox">
|
||||
<button class="buttonControl button__open">Open</button>
|
||||
<button class="buttonControl button__close">Close</button>
|
||||
</div>
|
||||
</body>
|
||||
<script type="module" src="index.js"></script>
|
||||
</html>
|
||||
|
||||
90
src/index.js
90
src/index.js
@ -1,61 +1,15 @@
|
||||
import { DropDown } from './cg-dropdown';
|
||||
|
||||
// ------------------------------Обычный селект--------------------
|
||||
const dropdown = new DropDown({
|
||||
selector: '.cg-dropdown_one',
|
||||
placeholder: 'Выберите авто',
|
||||
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
||||
|
||||
multiselect: true,
|
||||
multiselectTag: true,
|
||||
});
|
||||
|
||||
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,
|
||||
},
|
||||
],
|
||||
|
||||
multiselect: true,
|
||||
event: 'mouseenter',
|
||||
// multiselectTag: true,
|
||||
});
|
||||
|
||||
dropdown.disabled(false);
|
||||
|
||||
dropdown2.addItem('LADA');
|
||||
|
||||
//ToDo: paste the desired url;
|
||||
|
||||
// ------------------------------URL--------------------
|
||||
const dropdown3 = new DropDown({
|
||||
selector: '.cg-dropdown_three',
|
||||
placeholder: 'URL',
|
||||
@ -70,18 +24,44 @@ const dropdown3 = new DropDown({
|
||||
multiselectTag: true,
|
||||
});
|
||||
|
||||
// --------------------------------Категории--------------------------
|
||||
const dropdown4 = new DropDown({
|
||||
selector: '.cg-dropdown_button',
|
||||
placeholder: 'Выберите авто',
|
||||
items: ['Russia', 'USA', 'England', 'Turkey', 'France'],
|
||||
placeholder: 'Выберите регион',
|
||||
items: [
|
||||
{
|
||||
category: 'Russia',
|
||||
categoryItems: [
|
||||
{
|
||||
id: '28qwds',
|
||||
title: 'Москва',
|
||||
value: 0,
|
||||
},
|
||||
,
|
||||
'Ростов-на-дону',
|
||||
'Саратов',
|
||||
'Волгоград',
|
||||
'Донецк',
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'USA',
|
||||
categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
|
||||
},
|
||||
{
|
||||
category: 'France',
|
||||
categoryItems: ['Paris'],
|
||||
},
|
||||
],
|
||||
|
||||
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');
|
||||
*/
|
||||
|
||||
@ -16,11 +16,7 @@ body {
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.content {
|
||||
border: 1px solid #616161;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
// ----Layout----
|
||||
.cg-dropdown {
|
||||
min-width: 235px;
|
||||
margin-left: 0;
|
||||
@ -59,12 +55,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.caret {
|
||||
width: 0;
|
||||
height: 0;
|
||||
@ -146,11 +136,22 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.category {
|
||||
height: 20px;
|
||||
margin: 6px 5px 0 7px;
|
||||
font-size: 17px;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
|
||||
// --------SVG--------
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
margin-left: 3px;
|
||||
@ -164,6 +165,7 @@ input[type='checkbox'] {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-icon path {
|
||||
color: black;
|
||||
stroke: currentcolor;
|
||||
@ -171,6 +173,7 @@ input[type='checkbox'] {
|
||||
stroke-width: 0.5;
|
||||
}
|
||||
|
||||
//-------Behavior--------
|
||||
.active {
|
||||
background: #8282822c;
|
||||
}
|
||||
@ -179,8 +182,23 @@ input[type='checkbox'] {
|
||||
transition: 0.5s;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
|
||||
&_none {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background-color: #8f9195 !important;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// ------SCROLLBAR------
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
@ -192,12 +210,3 @@ input[type='checkbox'] {
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
background-color: #8f9195 !important;
|
||||
}
|
||||
|
||||
.buttonControlBox {
|
||||
margin: -25px auto 0 auto;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user