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

Refactoring render select, added methods addItem

Browse Source
This commit is contained in:
Макс Овсяников 2022-09-22 20:39:18 +03:00
parent 4bb46a37f8
commit d9ea1a592a
2 changed files with 127 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
src/cg-dropdown.js
View File

@ -8,19 +8,11 @@ export class DropDown {
constructor(options = {}) { constructor(options = {}) {
this.#init(options); this.#init(options);
// this.#initAmount(); this.#initAmount();
this.#render(); this.#render();
// this.#initEvent(); // this.#initEvent();
} }
#open() {
this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
this.#list.classList.toggle('open');
this.#caret.classList.toggle('caret_rotate');
}
#init(options) { #init(options) {
this.#options = options; this.#options = options;
const elem = document.querySelector(options.selector); const elem = document.querySelector(options.selector);
@ -30,29 +22,36 @@ export class DropDown {
} }
this.#element = elem; this.#element = elem;
this.#element.addEventListener('click', () => {
this.#selectItem();
this.#open();
});
this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
} }
#initSelected() { #initSelected() {
const { styles } = this.#options; const { styles } = this.#options;
console.log(this.#options.placeholder);
// if (this.#options.selected) { if (this.#options.selected) {
// this.#createSelected(this.#options.selected); this.#createSelected(this.#options.selected);
// } else { } else {
// this.#createSelected('Select...'); 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);
// } }
} }
#initAmount() { #initAmount() {
@ -70,49 +69,53 @@ export class DropDown {
this.#element.innerHTML += `<ul class="list">${templete}</ul>`; this.#element.innerHTML += `<ul class="list">${templete}</ul>`;
} }
//ToDo: fix problem lisiner!
#render() { #render() {
const { items } = this.#options; const { items, styles } = this.#options;
const templete = items.map((item) => { console.log(styles);
return `
<li class="list__item" >${item}</li>
`;
});
this.#element.innerHTML = '';
this.#initSelected(); this.#initSelected();
this.#element.insertAdjacentHTML('beforeend', `<ul class="list">${templete.join('')}</ul>`); this.#element.querySelector(this.#options.selector);
this.#element.addEventListener('click', () => { let ul = document.createElement('ul');
console.log('aaasa');
this.#open(); if (styles) {
this.#selecteItem(); const { list } = styles;
ul.classList.add('list');
if (ul) {
if (list) {
Object.entries(list).forEach(([key, value]) => {
ul.style[key] = value;
});
}
}
this.#element.appendChild(ul);
} else {
ul.classList.add('list');
this.#element.appendChild(ul);
}
items.map((item) => {
let li = document.createElement('li');
const text = document.createTextNode(item);
li.classList.add('list__item');
li.appendChild(text);
ul.appendChild(li);
}); });
} }
// #render() { #open() {
// const { items } = this.#options; this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret');
// const templete = items.map((item) => { this.#list.classList.toggle('open');
// return ` this.#caret.classList.toggle('caret_rotate');
// <li class="list__item" >${item}</li> }
// `;
// });
// this.#element.innerHTML = ''; #selectItem() {
// 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');
@ -128,21 +131,46 @@ export class DropDown {
}); });
} }
//TODO: Fix problems in mouseenter
// #initEvent() { // #initEvent() {
// const { event } = this.#options; // const { event } = this.#options;
// if (!event) {
// return;
// }
// this.#list = this.#element.querySelector('.list'); // this.#list = this.#element.querySelectorAll('.list');
// this.#caret = this.#element.querySelector('.caret'); // this.#caret = this.#element.querySelector('.caret');
// // let list = this.#element.querySelectorAll('.list');
// if (event) {
// let list = this.#element.querySelectorAll('.list');
// console.log(list);
// // list.classList.add('open');
// if (event === 'mouseenter') {
// this.#element.addEventListener(event, () => {
// // this.#open();
// this.#list.classList.add('open');
// });
// this.#element.addEventListener('mouseleave', () => {
// // this.#list.classList.remove('open');
// // this.#caret.classList.remove('caret_rotate');
// // this.#open();
// console.log('bbb');
// });
// }
// }
// if (event === 'mouseenter') { // if (event === 'mouseenter') {
// this.#element.addEventListener(event, () => { // this.#element.addEventListener(event, () => {
// this.#list.classList.add('open'); // // this.#open();
// this.#caret.classList.add('caret_rotate'); // console.log('aaa');
// }); // });
// 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');
// // this.#open();
// console.log('bbb');
// }); // });
// } // }
// } // }
@ -152,10 +180,10 @@ export class DropDown {
return; return;
} }
const { head, caret, list, placeholder } = styles; const { head, caret, placeholder } = styles;
const select = this.#element.querySelector('.cg-select'); const select = this.#element.querySelector('.cg-select');
const crt = this.#element.querySelector('.caret'); const crt = this.#element.querySelector('.caret');
const ul = this.#element.querySelector('.list');
const placeh = this.#element.querySelector('.selected'); const placeh = this.#element.querySelector('.selected');
if (head) { if (head) {
@ -170,14 +198,6 @@ export class DropDown {
}); });
} }
if (ul) {
if (list) {
Object.entries(list).forEach(([key, value]) => {
ul.style[key] = value;
});
}
}
if (placeh) { if (placeh) {
if (placeholder) { if (placeholder) {
Object.entries(placeholder).forEach(([key, value]) => { Object.entries(placeholder).forEach(([key, value]) => {
@ -189,8 +209,6 @@ export class DropDown {
#createSelected(content, styles) { #createSelected(content, styles) {
if (content) { if (content) {
console.log('ds');
this.#element.innerHTML = ` this.#element.innerHTML = `
<div class="cg-select"> <div class="cg-select">
<span class="selected">${content}</span> <span class="selected">${content}</span>
@ -199,16 +217,16 @@ export class DropDown {
`; `;
} }
// if (styles) { if (styles) {
// this.#customStyles(styles); this.#customStyles(styles);
// this.#element.innerHTML = ` this.#element.innerHTML = `
// <div class="cg-select" style = "${styles}"> <div class="cg-select" style = "${styles}">
// <span class="selected" style = "${styles}">${content}</span> <span class="selected" style = "${styles}">${content}</span>
// <div class="caret" style = "${styles}"></div> <div class="caret" style = "${styles}"></div>
// </div> </div>
// `; `;
// } }
} }
addItem(item) { addItem(item) {
@ -217,6 +235,7 @@ export class DropDown {
items.push(item); items.push(item);
console.log(items); console.log(items);
this.#render(); this.#render();
} }
} }

53
src/index.js
View File

@ -6,33 +6,34 @@ const dropdown = new DropDown({
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
}); });
dropdown.addItem('Zaz'); dropdown.addItem('ZAZ');
dropdown.addItem('Kamaz');
// const dropdown2 = new DropDown({ const dropdown2 = new DropDown({
// selector: '.cg-dropdown2', selector: '.cg-dropdown2',
// placeholder: 'Выберите авто', placeholder: 'Выберите авто',
// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'],
// event: 'mouseenter', event: 'mouseenter',
// styles: { styles: {
// head: { head: {
// background: 'red', background: 'red',
// color: 'black', color: 'black',
// width: '400px', width: '400px',
// }, },
// placeholder: { placeholder: {
// color: 'grey', color: 'grey',
// }, },
// caret: { caret: {
// 'border-top': '6px solid black', 'border-top': '6px solid black',
// }, },
// list: { list: {
// background: 'red', background: 'red',
// color: 'black', color: 'black',
// width: '412px', width: '412px',
// }, },
// }, },
// }); });
dropdown2.addItem('LADA');
// const dropdown3 = new DropDown({ // const dropdown3 = new DropDown({
// selector: '.cg-dropdown3', // selector: '.cg-dropdown3',