From 4bb46a37f87155c911340b0c4f960f73664a32b1 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 21 Sep 2022 22:30:52 +0300 Subject: [PATCH 1/6] Added methods render and refactoring class --- src/cg-dropdown.js | 181 ++++++++++++++++++++++++--------------------- src/index.js | 54 +++++++------- 2 files changed, 126 insertions(+), 109 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 3f39139..605c719 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -8,13 +8,15 @@ export class DropDown { constructor(options = {}) { this.#init(options); - this.#initSelected(); - this.#initAmount(); - this.#initItems(); - this.#initEvent(); + // this.#initAmount(); + this.#render(); + // 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'); } @@ -32,27 +34,25 @@ export class DropDown { #initSelected() { const { styles } = this.#options; - if (this.#options.selected) { - this.#createSelected(this.#options.selected); - } else { - this.#createSelected('Select...'); - } + console.log(this.#options.placeholder); + + // if (this.#options.selected) { + // this.#createSelected(this.#options.selected); + // } else { + // this.#createSelected('Select...'); + // } if (!this.#options.selected && this.#options.placeholder) { this.#createSelected(this.#options.placeholder); } - if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) { - this.#createSelected(this.#options.placeholder); - this.#customStyles(styles); - } else { - this.#createSelected('Select...'); - this.#customStyles(styles); - } - - this.#element.addEventListener('click', () => { - this.#open(); - }); + // if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) { + // this.#createSelected(this.#options.placeholder); + // this.#customStyles(styles); + // } else { + // this.#createSelected('Select...'); + // this.#customStyles(styles); + // } } #initAmount() { @@ -70,24 +70,49 @@ export class DropDown { this.#element.innerHTML += ``; } - #initItems() { - const { items, styles } = this.#options; + //ToDo: fix problem lisiner! + #render() { + const { items } = this.#options; - if (!Array.isArray(items)) { - return; - } + const templete = items.map((item) => { + return ` +
  • ${item}
    • + `; + }); - if (!styles) { - const templete = items.map((item) => `
  • ${item}
    • `).join(''); - this.#element.innerHTML += ``; - } + this.#element.innerHTML = ''; + this.#initSelected(); + this.#element.insertAdjacentHTML('beforeend', ``); - if (styles) { - const templete = items.map((item) => `
  • ${item}
    • `).join(''); - this.#element.innerHTML += ``; - this.#customStyles(styles); - } + this.#element.addEventListener('click', () => { + console.log('aaasa'); + this.#open(); + this.#selecteItem(); + }); + } + // #render() { + // const { items } = this.#options; + + // const templete = items.map((item) => { + // return ` + //
  • ${item}
    • + // `; + // }); + + // this.#element.innerHTML = ''; + // this.#initSelected(); + // this.#element.insertAdjacentHTML('beforeend', ``); + + // this.#element.addEventListener('click', openSelect); + + // function openSelect() { + // console.log('aaasa'); + // this.#element.removeEventListener('click', openSelect); + // } + // } + + #selecteItem() { const options = this.#element.querySelectorAll('.list__item'); const selected = this.#element.querySelector('.selected'); @@ -101,39 +126,26 @@ export class DropDown { 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() { - const { event } = this.#options; + // #initEvent() { + // const { event } = this.#options; - this.#list = this.#element.querySelector('.list'); - this.#caret = this.#element.querySelector('.caret'); + // this.#list = this.#element.querySelector('.list'); + // this.#caret = this.#element.querySelector('.caret'); - if (event === 'mouseenter') { - this.#element.addEventListener(event, () => { - this.#list.classList.add('open'); - this.#caret.classList.add('caret_rotate'); - }); + // if (event === 'mouseenter') { + // this.#element.addEventListener(event, () => { + // this.#list.classList.add('open'); + // this.#caret.classList.add('caret_rotate'); + // }); - this.#element.addEventListener('mouseleave', () => { - this.#list.classList.remove('open'); - this.#caret.classList.remove('caret_rotate'); - }); - } - } + // this.#element.addEventListener('mouseleave', () => { + // this.#list.classList.remove('open'); + // this.#caret.classList.remove('caret_rotate'); + // }); + // } + // } #customStyles(styles) { if (!styles) { @@ -176,32 +188,35 @@ export class DropDown { } #createSelected(content, styles) { - this.#element.innerHTML = ` -
    - ${content} -
    -
    - `; - - if (styles) { - this.#customStyles(styles); + if (content) { + console.log('ds'); this.#element.innerHTML = ` -
    - ${content} -
    -
    - `; +
    + ${content} +
    +
    + `; } + + // if (styles) { + // this.#customStyles(styles); + + // this.#element.innerHTML = ` + //
    + // ${content} + //
    + //
    + // `; + // } } - // addItem(item) { - // const { items } = this.#options; + addItem(item) { + const { items } = this.#options; - // console.log('Добавление елемента', item); + items.push(item); - // items.push(item); - - // console.log(items); - // } + console.log(items); + this.#render(); + } } diff --git a/src/index.js b/src/index.js index bee6036..e2cee97 100644 --- a/src/index.js +++ b/src/index.js @@ -2,36 +2,38 @@ import { DropDown } from './cg-dropdown'; const dropdown = new DropDown({ selector: '.cg-dropdown', - + placeholder: 'Выберите авто', items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], }); -const dropdown2 = new DropDown({ - selector: '.cg-dropdown2', - placeholder: 'Выберите авто', - items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], - event: 'mouseenter', - styles: { - head: { - background: 'red', - color: 'black', - width: '400px', - }, - placeholder: { - color: 'grey', - }, - caret: { - 'border-top': '6px solid black', - }, - list: { - background: 'red', - color: 'black', - width: '412px', - }, - }, -}); +dropdown.addItem('Zaz'); +dropdown.addItem('Kamaz'); + +// const dropdown2 = new DropDown({ +// selector: '.cg-dropdown2', +// placeholder: 'Выберите авто', +// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], +// event: 'mouseenter', +// styles: { +// head: { +// background: 'red', +// color: 'black', +// width: '400px', +// }, +// placeholder: { +// color: 'grey', +// }, +// caret: { +// 'border-top': '6px solid black', +// }, +// list: { +// background: 'red', +// color: 'black', +// width: '412px', +// }, +// }, +// }); -// dropdown.addItem('Zaz'); // const dropdown3 = new DropDown({ // selector: '.cg-dropdown3', // selected: '', From d9ea1a592ae4ed7bcf9a14215145d050ce93c931 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Thu, 22 Sep 2022 20:39:18 +0300 Subject: [PATCH 2/6] Refactoring render select, added methods addItem --- src/cg-dropdown.js | 181 +++++++++++++++++++++++++-------------------- src/index.js | 53 ++++++------- 2 files changed, 127 insertions(+), 107 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 605c719..fa781b3 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -8,19 +8,11 @@ export class DropDown { constructor(options = {}) { this.#init(options); - // this.#initAmount(); + this.#initAmount(); this.#render(); // 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) { this.#options = options; const elem = document.querySelector(options.selector); @@ -30,29 +22,36 @@ export class DropDown { } this.#element = elem; + + this.#element.addEventListener('click', () => { + this.#selectItem(); + this.#open(); + }); + + this.#list = this.#element.querySelector('.list'); + this.#caret = this.#element.querySelector('.caret'); } #initSelected() { const { styles } = this.#options; - console.log(this.#options.placeholder); - // if (this.#options.selected) { - // this.#createSelected(this.#options.selected); - // } else { - // this.#createSelected('Select...'); - // } + if (this.#options.selected) { + this.#createSelected(this.#options.selected); + } else { + this.#createSelected('Select...'); + } if (!this.#options.selected && this.#options.placeholder) { this.#createSelected(this.#options.placeholder); } - // if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) { - // this.#createSelected(this.#options.placeholder); - // this.#customStyles(styles); - // } else { - // this.#createSelected('Select...'); - // this.#customStyles(styles); - // } + if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) { + this.#createSelected(this.#options.placeholder); + this.#customStyles(styles); + } else { + this.#createSelected('Select...'); + this.#customStyles(styles); + } } #initAmount() { @@ -70,49 +69,53 @@ export class DropDown { this.#element.innerHTML += ``; } - //ToDo: fix problem lisiner! #render() { - const { items } = this.#options; + const { items, styles } = this.#options; - const templete = items.map((item) => { - return ` -
  • ${item}
    • - `; - }); + console.log(styles); - this.#element.innerHTML = ''; this.#initSelected(); - this.#element.insertAdjacentHTML('beforeend', ``); + this.#element.querySelector(this.#options.selector); - this.#element.addEventListener('click', () => { - console.log('aaasa'); - this.#open(); - this.#selecteItem(); + let ul = document.createElement('ul'); + + if (styles) { + 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() { - // const { items } = this.#options; + #open() { + this.#list = this.#element.querySelector('.list'); + this.#caret = this.#element.querySelector('.caret'); - // const templete = items.map((item) => { - // return ` - //
  • ${item}
    • - // `; - // }); + this.#list.classList.toggle('open'); + this.#caret.classList.toggle('caret_rotate'); + } - // this.#element.innerHTML = ''; - // this.#initSelected(); - // this.#element.insertAdjacentHTML('beforeend', ``); - - // this.#element.addEventListener('click', openSelect); - - // function openSelect() { - // console.log('aaasa'); - // this.#element.removeEventListener('click', openSelect); - // } - // } - - #selecteItem() { + #selectItem() { const options = this.#element.querySelectorAll('.list__item'); const selected = this.#element.querySelector('.selected'); @@ -128,21 +131,46 @@ export class DropDown { }); } + //TODO: Fix problems in mouseenter // #initEvent() { // 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'); + // // 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') { // this.#element.addEventListener(event, () => { - // this.#list.classList.add('open'); - // this.#caret.classList.add('caret_rotate'); + // // this.#open(); + // console.log('aaa'); // }); // this.#element.addEventListener('mouseleave', () => { - // this.#list.classList.remove('open'); - // this.#caret.classList.remove('caret_rotate'); + // // this.#list.classList.remove('open'); + // // this.#caret.classList.remove('caret_rotate'); + // // this.#open(); + // console.log('bbb'); // }); // } // } @@ -152,10 +180,10 @@ export class DropDown { return; } - const { head, caret, list, placeholder } = styles; + const { head, caret, placeholder } = styles; const select = this.#element.querySelector('.cg-select'); const crt = this.#element.querySelector('.caret'); - const ul = this.#element.querySelector('.list'); + const placeh = this.#element.querySelector('.selected'); 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 (placeholder) { Object.entries(placeholder).forEach(([key, value]) => { @@ -189,8 +209,6 @@ export class DropDown { #createSelected(content, styles) { if (content) { - console.log('ds'); - this.#element.innerHTML = `
    ${content} @@ -199,16 +217,16 @@ export class DropDown { `; } - // if (styles) { - // this.#customStyles(styles); + if (styles) { + this.#customStyles(styles); - // this.#element.innerHTML = ` - //
    - // ${content} - //
    - //
    - // `; - // } + this.#element.innerHTML = ` +
    + ${content} +
    +
    + `; + } } addItem(item) { @@ -217,6 +235,7 @@ export class DropDown { items.push(item); console.log(items); + this.#render(); } } diff --git a/src/index.js b/src/index.js index e2cee97..d292585 100644 --- a/src/index.js +++ b/src/index.js @@ -6,33 +6,34 @@ const dropdown = new DropDown({ items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], }); -dropdown.addItem('Zaz'); -dropdown.addItem('Kamaz'); +dropdown.addItem('ZAZ'); -// const dropdown2 = new DropDown({ -// selector: '.cg-dropdown2', -// placeholder: 'Выберите авто', -// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], -// event: 'mouseenter', -// styles: { -// head: { -// background: 'red', -// color: 'black', -// width: '400px', -// }, -// placeholder: { -// color: 'grey', -// }, -// caret: { -// 'border-top': '6px solid black', -// }, -// list: { -// background: 'red', -// color: 'black', -// width: '412px', -// }, -// }, -// }); +const dropdown2 = new DropDown({ + selector: '.cg-dropdown2', + placeholder: 'Выберите авто', + items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], + event: 'mouseenter', + styles: { + head: { + background: 'red', + color: 'black', + width: '400px', + }, + placeholder: { + color: 'grey', + }, + caret: { + 'border-top': '6px solid black', + }, + list: { + background: 'red', + color: 'black', + width: '412px', + }, + }, +}); + +dropdown2.addItem('LADA'); // const dropdown3 = new DropDown({ // selector: '.cg-dropdown3', From bf0eb08cc627d68a443a5bdfd65902a399f4a957 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Fri, 23 Sep 2022 11:39:14 +0300 Subject: [PATCH 3/6] Fixed initEvent methods and added methods close --- src/cg-dropdown.js | 72 +++++++++++++++++----------------------------- 1 file changed, 27 insertions(+), 45 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index fa781b3..a6b0c69 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -10,7 +10,7 @@ export class DropDown { this.#init(options); this.#initAmount(); this.#render(); - // this.#initEvent(); + this.#initEvent(); } #init(options) { @@ -72,8 +72,6 @@ export class DropDown { #render() { const { items, styles } = this.#options; - console.log(styles); - this.#initSelected(); this.#element.querySelector(this.#options.selector); @@ -82,6 +80,7 @@ export class DropDown { if (styles) { const { list } = styles; + console.log(styles); ul.classList.add('list'); if (ul) { @@ -115,6 +114,11 @@ export class DropDown { this.#caret.classList.toggle('caret_rotate'); } + #close() { + this.#list.classList.remove('open'); + this.#caret.classList.remove('caret_rotate'); + } + #selectItem() { const options = this.#element.querySelectorAll('.list__item'); const selected = this.#element.querySelector('.selected'); @@ -131,49 +135,30 @@ export class DropDown { }); } - //TODO: Fix problems in mouseenter - // #initEvent() { - // const { event } = this.#options; - // if (!event) { - // return; - // } + #initEvent() { + const { event } = this.#options; + if (!event) { + return; + } - // this.#list = this.#element.querySelectorAll('.list'); - // 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.#list = this.#element.querySelectorAll('.list'); + this.#caret = this.#element.querySelector('.caret'); - // this.#element.addEventListener('mouseleave', () => { - // // this.#list.classList.remove('open'); - // // this.#caret.classList.remove('caret_rotate'); - // // this.#open(); - // console.log('bbb'); - // }); - // } - // } + if (event) { + let list = this.#element.querySelectorAll('.list'); + console.log(list); - // if (event === 'mouseenter') { - // this.#element.addEventListener(event, () => { - // // this.#open(); - // console.log('aaa'); - // }); + if (event === 'mouseenter') { + this.#element.addEventListener(event, () => { + this.#open(); + }); - // this.#element.addEventListener('mouseleave', () => { - // // this.#list.classList.remove('open'); - // // this.#caret.classList.remove('caret_rotate'); - // // this.#open(); - // console.log('bbb'); - // }); - // } - // } + this.#element.addEventListener('mouseleave', () => { + this.#close(); + }); + } + } + } #customStyles(styles) { if (!styles) { @@ -233,9 +218,6 @@ export class DropDown { const { items } = this.#options; items.push(item); - - console.log(items); - this.#render(); } } From 565f80280d6b746fed4292f40f5534f5cdb08432 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Fri, 23 Sep 2022 19:48:39 +0300 Subject: [PATCH 4/6] Added methods in class(7/8) --- src/cg-dropdown.js | 49 +++++++++++++++++++++++++++++++++++++--------- src/index.js | 7 ++++++- 2 files changed, 46 insertions(+), 10 deletions(-) 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 += `
      ${templete}
    `; } - #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', From f106116b8be98a346b6c941f968c5f1e5bf362d9 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 26 Sep 2022 17:00:15 +0300 Subject: [PATCH 5/6] Methods cg-select complted --- src/cg-dropdown.js | 23 +++++++++++++++++------ src/index.html | 2 +- src/index.js | 28 ++++++++++++++++++++++++++-- 3 files changed, 44 insertions(+), 9 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 51d5472..c433af0 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -4,8 +4,6 @@ export class DropDown { #options; #caret; - //ToDo: Added url - constructor(options = {}) { this.#init(options); this.#initAmount(); @@ -49,7 +47,6 @@ export class DropDown { this.#createSelected(this.#options.placeholder); this.#customStyles(styles); } else { - this.#createSelected('Select...'); this.#customStyles(styles); } @@ -106,10 +103,18 @@ export class DropDown { items.map((item) => { let li = document.createElement('li'); - const text = document.createTextNode(item); - li.classList.add('list__item'); - li.appendChild(text); + if (typeof item == 'object') { + const text = document.createTextNode(item.value); + li.classList.add('list__item'); + li.appendChild(text); + } else { + const text = document.createTextNode(item); + + li.classList.add('list__item'); + li.appendChild(text); + } + ul.appendChild(li); }); } @@ -251,4 +256,10 @@ export class DropDown { this.#render(select); } + + getElement(number) { + const { items } = this.#options; + + return items[number]; + } } diff --git a/src/index.html b/src/index.html index 366bebf..2856148 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,7 @@
    - +
    diff --git a/src/index.js b/src/index.js index 04f7867..dea89ed 100644 --- a/src/index.js +++ b/src/index.js @@ -10,7 +10,7 @@ dropdown.addItem('ZAZ'); const dropdown2 = new DropDown({ selector: '.cg-dropdown2', - selected: '...', + placeholder: 'Выберите авто', items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'Kamaz'], event: 'mouseenter', styles: { @@ -34,7 +34,31 @@ const dropdown2 = new DropDown({ }); dropdown2.addItem('LADA'); -dropdown2.selectIndex(3); +// dropdown2.selectIndex(3); + +const dropdown3 = new DropDown({ + selector: '.cg-dropdown3', + items: [ + { + id: '186', + value: 'A008', + }, + { + id: '288', + value: 'BMW', + }, + { + id: '355', + value: 'MAN', + }, + ], +}); + +let a = dropdown3.getElement(0); +console.log(a); + +let b = dropdown.getElement(0); +console.log(b); // dropdown2.deleteItemAll(); From d7ae149d05176ae62b7ed88d8717fcb01beced9a Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 26 Sep 2022 19:45:12 +0300 Subject: [PATCH 6/6] Fixed methods in conv(DRY) --- src/cg-dropdown.js | 24 ++++++++++-------------- src/index.js | 4 ++++ 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index c433af0..5cb6a0c 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -3,6 +3,7 @@ export class DropDown { #list; #options; #caret; + #items; constructor(options = {}) { this.#init(options); @@ -28,6 +29,9 @@ export class DropDown { this.#list = this.#element.querySelector('.list'); this.#caret = this.#element.querySelector('.caret'); + + const { items } = this.#options; + this.#items = items; } #initSelected(select) { @@ -224,28 +228,22 @@ export class DropDown { } addItem(item) { - const { items } = this.#options; - - items.push(item); + this.#items.push(item); this.#render(); } deleteItem(item) { - const { items } = this.#options; + let index = this.#items.indexOf(item); - let index = items.indexOf(item); - - items.splice(index, 1); + this.#items.splice(index, 1); this.#render(); } deleteItemAll() { - const { items } = this.#options; + this.#items.splice(0, this.#items.length); - items.splice(0, items.length); - - console.log(items); + console.log(this.#items); this.#render(); } @@ -258,8 +256,6 @@ export class DropDown { } getElement(number) { - const { items } = this.#options; - - return items[number]; + return this.#items[number]; } } diff --git a/src/index.js b/src/index.js index dea89ed..075ae4b 100644 --- a/src/index.js +++ b/src/index.js @@ -7,6 +7,7 @@ const dropdown = new DropDown({ }); dropdown.addItem('ZAZ'); +dropdown.addItem('LADA'); const dropdown2 = new DropDown({ selector: '.cg-dropdown2', @@ -34,6 +35,9 @@ const dropdown2 = new DropDown({ }); dropdown2.addItem('LADA'); +// dropdown.deleteItemAll(); + +// dropdown2.deleteItem('MAN'); // dropdown2.selectIndex(3); const dropdown3 = new DropDown({