Added methods render and refactoring class
This commit is contained in:
parent
0035cb2f75
commit
4bb46a37f8
@ -8,13 +8,15 @@ export class DropDown {
|
|||||||
|
|
||||||
constructor(options = {}) {
|
constructor(options = {}) {
|
||||||
this.#init(options);
|
this.#init(options);
|
||||||
this.#initSelected();
|
// this.#initAmount();
|
||||||
this.#initAmount();
|
this.#render();
|
||||||
this.#initItems();
|
// this.#initEvent();
|
||||||
this.#initEvent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#open() {
|
#open() {
|
||||||
|
this.#list = this.#element.querySelector('.list');
|
||||||
|
this.#caret = this.#element.querySelector('.caret');
|
||||||
|
|
||||||
this.#list.classList.toggle('open');
|
this.#list.classList.toggle('open');
|
||||||
this.#caret.classList.toggle('caret_rotate');
|
this.#caret.classList.toggle('caret_rotate');
|
||||||
}
|
}
|
||||||
@ -32,27 +34,25 @@ export class DropDown {
|
|||||||
|
|
||||||
#initSelected() {
|
#initSelected() {
|
||||||
const { styles } = this.#options;
|
const { styles } = this.#options;
|
||||||
if (this.#options.selected) {
|
console.log(this.#options.placeholder);
|
||||||
this.#createSelected(this.#options.selected);
|
|
||||||
} else {
|
// if (this.#options.selected) {
|
||||||
this.#createSelected('Select...');
|
// this.#createSelected(this.#options.selected);
|
||||||
}
|
// } else {
|
||||||
|
// this.#createSelected('Select...');
|
||||||
|
// }
|
||||||
|
|
||||||
if (!this.#options.selected && this.#options.placeholder) {
|
if (!this.#options.selected && this.#options.placeholder) {
|
||||||
this.#createSelected(this.#options.placeholder);
|
this.#createSelected(this.#options.placeholder);
|
||||||
}
|
}
|
||||||
|
|
||||||
if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) {
|
// if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) {
|
||||||
this.#createSelected(this.#options.placeholder);
|
// this.#createSelected(this.#options.placeholder);
|
||||||
this.#customStyles(styles);
|
// this.#customStyles(styles);
|
||||||
} else {
|
// } else {
|
||||||
this.#createSelected('Select...');
|
// this.#createSelected('Select...');
|
||||||
this.#customStyles(styles);
|
// this.#customStyles(styles);
|
||||||
}
|
// }
|
||||||
|
|
||||||
this.#element.addEventListener('click', () => {
|
|
||||||
this.#open();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#initAmount() {
|
#initAmount() {
|
||||||
@ -70,24 +70,49 @@ export class DropDown {
|
|||||||
this.#element.innerHTML += `<ul class="list">${templete}</ul>`;
|
this.#element.innerHTML += `<ul class="list">${templete}</ul>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
#initItems() {
|
//ToDo: fix problem lisiner!
|
||||||
const { items, styles } = this.#options;
|
#render() {
|
||||||
|
const { items } = this.#options;
|
||||||
|
|
||||||
if (!Array.isArray(items)) {
|
const templete = items.map((item) => {
|
||||||
return;
|
return `
|
||||||
}
|
<li class="list__item" >${item}</li>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
if (!styles) {
|
this.#element.innerHTML = '';
|
||||||
const templete = items.map((item) => `<li class="list__item" >${item}</li>`).join('');
|
this.#initSelected();
|
||||||
this.#element.innerHTML += `<ul class="list">${templete}</ul>`;
|
this.#element.insertAdjacentHTML('beforeend', `<ul class="list">${templete.join('')}</ul>`);
|
||||||
}
|
|
||||||
|
|
||||||
if (styles) {
|
this.#element.addEventListener('click', () => {
|
||||||
const templete = items.map((item) => `<li class="list__item" >${item}</li>`).join('');
|
console.log('aaasa');
|
||||||
this.#element.innerHTML += `<ul class="list" style="${styles}" >${templete}</ul>`;
|
this.#open();
|
||||||
this.#customStyles(styles);
|
this.#selecteItem();
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// #render() {
|
||||||
|
// const { items } = this.#options;
|
||||||
|
|
||||||
|
// const templete = items.map((item) => {
|
||||||
|
// return `
|
||||||
|
// <li class="list__item" >${item}</li>
|
||||||
|
// `;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// this.#element.innerHTML = '';
|
||||||
|
// this.#initSelected();
|
||||||
|
// this.#element.insertAdjacentHTML('beforeend', `<ul class="list">${templete.join('')}</ul>`);
|
||||||
|
|
||||||
|
// this.#element.addEventListener('click', openSelect);
|
||||||
|
|
||||||
|
// function openSelect() {
|
||||||
|
// console.log('aaasa');
|
||||||
|
// this.#element.removeEventListener('click', openSelect);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
#selecteItem() {
|
||||||
const options = this.#element.querySelectorAll('.list__item');
|
const options = this.#element.querySelectorAll('.list__item');
|
||||||
const selected = this.#element.querySelector('.selected');
|
const selected = this.#element.querySelector('.selected');
|
||||||
|
|
||||||
@ -101,39 +126,26 @@ export class DropDown {
|
|||||||
option.classList.add('active');
|
option.classList.add('active');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
//ToDo: finish this function(catigories)
|
|
||||||
items.forEach((item) => {
|
|
||||||
if (typeof item === 'object') {
|
|
||||||
for (const key in item) {
|
|
||||||
const element = item[key];
|
|
||||||
// console.log(element);
|
|
||||||
if (typeof element === 'string') {
|
|
||||||
console.log(element);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#initEvent() {
|
// #initEvent() {
|
||||||
const { event } = this.#options;
|
// const { event } = this.#options;
|
||||||
|
|
||||||
this.#list = this.#element.querySelector('.list');
|
// this.#list = this.#element.querySelector('.list');
|
||||||
this.#caret = this.#element.querySelector('.caret');
|
// this.#caret = this.#element.querySelector('.caret');
|
||||||
|
|
||||||
if (event === 'mouseenter') {
|
// if (event === 'mouseenter') {
|
||||||
this.#element.addEventListener(event, () => {
|
// this.#element.addEventListener(event, () => {
|
||||||
this.#list.classList.add('open');
|
// this.#list.classList.add('open');
|
||||||
this.#caret.classList.add('caret_rotate');
|
// this.#caret.classList.add('caret_rotate');
|
||||||
});
|
// });
|
||||||
|
|
||||||
this.#element.addEventListener('mouseleave', () => {
|
// this.#element.addEventListener('mouseleave', () => {
|
||||||
this.#list.classList.remove('open');
|
// this.#list.classList.remove('open');
|
||||||
this.#caret.classList.remove('caret_rotate');
|
// this.#caret.classList.remove('caret_rotate');
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
#customStyles(styles) {
|
#customStyles(styles) {
|
||||||
if (!styles) {
|
if (!styles) {
|
||||||
@ -176,32 +188,35 @@ export class DropDown {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#createSelected(content, styles) {
|
#createSelected(content, styles) {
|
||||||
this.#element.innerHTML = `
|
if (content) {
|
||||||
<div class="cg-select">
|
console.log('ds');
|
||||||
<span class="selected">${content}</span>
|
|
||||||
<div class="caret"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
if (styles) {
|
|
||||||
this.#customStyles(styles);
|
|
||||||
|
|
||||||
this.#element.innerHTML = `
|
this.#element.innerHTML = `
|
||||||
<div class="cg-select" style = "${styles}">
|
<div class="cg-select">
|
||||||
<span class="selected" style = "${styles}">${content}</span>
|
<span class="selected">${content}</span>
|
||||||
<div class="caret" style = "${styles}"></div>
|
<div class="caret"></div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if (styles) {
|
||||||
|
// this.#customStyles(styles);
|
||||||
|
|
||||||
|
// this.#element.innerHTML = `
|
||||||
|
// <div class="cg-select" style = "${styles}">
|
||||||
|
// <span class="selected" style = "${styles}">${content}</span>
|
||||||
|
// <div class="caret" style = "${styles}"></div>
|
||||||
|
// </div>
|
||||||
|
// `;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// addItem(item) {
|
addItem(item) {
|
||||||
// const { items } = this.#options;
|
const { items } = this.#options;
|
||||||
|
|
||||||
// console.log('Добавление елемента', item);
|
items.push(item);
|
||||||
|
|
||||||
// items.push(item);
|
console.log(items);
|
||||||
|
this.#render();
|
||||||
// console.log(items);
|
}
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|||||||
54
src/index.js
54
src/index.js
@ -2,36 +2,38 @@ import { DropDown } from './cg-dropdown';
|
|||||||
|
|
||||||
const dropdown = new DropDown({
|
const dropdown = new DropDown({
|
||||||
selector: '.cg-dropdown',
|
selector: '.cg-dropdown',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
|
||||||
});
|
});
|
||||||
|
|
||||||
const dropdown2 = new DropDown({
|
dropdown.addItem('Zaz');
|
||||||
selector: '.cg-dropdown2',
|
dropdown.addItem('Kamaz');
|
||||||
placeholder: 'Выберите авто',
|
|
||||||
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'],
|
// const dropdown2 = new DropDown({
|
||||||
event: 'mouseenter',
|
// selector: '.cg-dropdown2',
|
||||||
styles: {
|
// placeholder: 'Выберите авто',
|
||||||
head: {
|
// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'],
|
||||||
background: 'red',
|
// event: 'mouseenter',
|
||||||
color: 'black',
|
// styles: {
|
||||||
width: '400px',
|
// head: {
|
||||||
},
|
// background: 'red',
|
||||||
placeholder: {
|
// color: 'black',
|
||||||
color: 'grey',
|
// width: '400px',
|
||||||
},
|
// },
|
||||||
caret: {
|
// placeholder: {
|
||||||
'border-top': '6px solid black',
|
// color: 'grey',
|
||||||
},
|
// },
|
||||||
list: {
|
// caret: {
|
||||||
background: 'red',
|
// 'border-top': '6px solid black',
|
||||||
color: 'black',
|
// },
|
||||||
width: '412px',
|
// list: {
|
||||||
},
|
// background: 'red',
|
||||||
},
|
// color: 'black',
|
||||||
});
|
// width: '412px',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
|
||||||
// dropdown.addItem('Zaz');
|
|
||||||
// const dropdown3 = new DropDown({
|
// const dropdown3 = new DropDown({
|
||||||
// selector: '.cg-dropdown3',
|
// selector: '.cg-dropdown3',
|
||||||
// selected: '',
|
// selected: '',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user