diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index a6b0c69..51d5472 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -32,7 +32,7 @@ export class DropDown { this.#caret = this.#element.querySelector('.caret'); } - #initSelected() { + #initSelected(select) { const { styles } = this.#options; if (this.#options.selected) { @@ -52,6 +52,10 @@ export class DropDown { this.#createSelected('Select...'); this.#customStyles(styles); } + + if (select) { + this.#createSelected(select); + } } #initAmount() { @@ -69,18 +73,22 @@ export class DropDown { this.#element.innerHTML += ``; } - #render() { + #render(select) { const { items, styles } = this.#options; - this.#initSelected(); - this.#element.querySelector(this.#options.selector); + if (select || (select && styles)) { + this.#initSelected(select); + this.#customStyles(styles); + } else { + this.#initSelected(); + } + this.#element.querySelector(this.#options.selector); let ul = document.createElement('ul'); if (styles) { const { list } = styles; - console.log(styles); ul.classList.add('list'); if (ul) { @@ -141,12 +149,8 @@ export class DropDown { return; } - this.#list = this.#element.querySelectorAll('.list'); - this.#caret = this.#element.querySelector('.caret'); - if (event) { let list = this.#element.querySelectorAll('.list'); - console.log(list); if (event === 'mouseenter') { this.#element.addEventListener(event, () => { @@ -220,4 +224,31 @@ export class DropDown { items.push(item); this.#render(); } + + deleteItem(item) { + const { items } = this.#options; + + let index = items.indexOf(item); + + items.splice(index, 1); + + this.#render(); + } + + deleteItemAll() { + const { items } = this.#options; + + items.splice(0, items.length); + + console.log(items); + this.#render(); + } + + selectIndex(index) { + const options = this.#element.querySelectorAll('.list__item'); + + let select = options[index].innerText; + + this.#render(select); + } } diff --git a/src/index.js b/src/index.js index d292585..04f7867 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ dropdown.addItem('ZAZ'); const dropdown2 = new DropDown({ selector: '.cg-dropdown2', - placeholder: 'Выберите авто', + selected: '...', items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], event: 'mouseenter', styles: { @@ -34,6 +34,11 @@ const dropdown2 = new DropDown({ }); dropdown2.addItem('LADA'); +dropdown2.selectIndex(3); + +// dropdown2.deleteItemAll(); + +// dropdown2.deleteItem('MAN'); // const dropdown3 = new DropDown({ // selector: '.cg-dropdown3',