From c67ddb75cb960e5a535fc7262a2ddee0aeae7021 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Thu, 13 Oct 2022 20:34:34 +0300 Subject: [PATCH 1/4] Categories list bed working( --- src/cg-dropdown.js | 64 ++++++++++++++++++-- src/index.html | 4 +- src/index.js | 142 +++++++++++++++++++++++---------------------- 3 files changed, 133 insertions(+), 77 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 52b7952..379e1c8 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -136,6 +136,7 @@ export class DropDown { items.forEach((dataItem, index) => { const random = Math.random().toString(36).substring(2, 10); let item = {}; + let category = ''; if (checkItemStruct(dataItem)) { item = { @@ -151,7 +152,20 @@ export class DropDown { }; } - this.#items.push(item); + if (dataItem.category && dataItem.categoryItem) { + category = dataItem.category; + this.#items.push(category); + dataItem.categoryItem.forEach((i) => { + item = { + id: random, + title: i, + value: index, + }; + this.#items.push(item); + }); + } else { + this.#items.push(item); + } }); } @@ -176,7 +190,7 @@ export class DropDown { } #render(select) { - const { styles, multiselect, event } = this.#options; + const { styles, multiselect } = this.#options; if (select || (select && styles)) { this.#initSelected(select); @@ -200,8 +214,11 @@ export class DropDown { ulList.classList.add('list'); this.#element.appendChild(ulList); + const arr = []; + this.#items.forEach((dataItem) => { const liItem = document.createElement('li'); + const strongItem = document.createElement('strong'); liItem.classList.add('list__item'); @@ -210,15 +227,42 @@ export class DropDown { checkBox.type = 'checkbox'; checkBox.setAttribute('id', `chbox-${dataItem.id}`); - liItem.appendChild(checkBox); + if (checkBox.innerHTML !== '') { + liItem.appendChild(checkBox); + // return; + } else { + liItem.removeChild(checkBox); + } } + let textNode = ''; - let textNode = document.createTextNode(dataItem.title); + if (dataItem.title) { + // console.log('data title', dataItem.title); + textNode = document.createTextNode(dataItem.title); + // console.log(textNode); + liItem.appendChild(textNode); + } else if (!dataItem.title) { + // console.log('aa'); + // debugger; + textNode = document.createTextNode(dataItem); + strongItem.appendChild(textNode); + ulList.appendChild(strongItem); + // let position = this.#items.indexOf(dataItem); + // console.log(position); - liItem.appendChild(textNode); + // this.#items.splice(position, 1); + console.log(this.#items); + } + // console.log(this.#items); ulList.appendChild(liItem); + + if (liItem.innerHTML === '') { + ulList.removeChild(liItem); + } }); + console.log(this.#items); + this.#addOptionsBehaviour(); } @@ -287,6 +331,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'); @@ -295,10 +340,17 @@ export class DropDown { select.classList.add('overflow-hidden'); } + console.log(this.#items); options.forEach((option, index) => { option.addEventListener('click', (event) => { - const item = this.#items[index]; + let item = ''; + if (category) { + item = this.#items[index + 1]; + } else { + item = this.#items[index]; + } + // console.log(item); if (multiselect) { event.stopPropagation(); option.classList.toggle('active'); diff --git a/src/index.html b/src/index.html index 88771e7..03dfd81 100644 --- a/src/index.html +++ b/src/index.html @@ -17,10 +17,10 @@ -
+ diff --git a/src/index.js b/src/index.js index 429954c..9d5e34d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,87 +1,91 @@ import { DropDown } from './cg-dropdown'; -const dropdown = new DropDown({ - selector: '.cg-dropdown_one', - placeholder: 'Выберите авто', - items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], +// const dropdown = new DropDown({ +// selector: '.cg-dropdown_one', +// placeholder: 'Выберите авто', +// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], - multiselect: true, - multiselectTag: true, -}); +// multiselect: true, +// multiselectTag: true, +// }); -dropdown.addItem('ZAZ'); -dropdown.addItem('LADA'); -dropdown.addItem('Kamaz 258'); -dropdown.addItem('BMW'); +// 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, - }, - ], +// 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, -}); +// multiselect: true, +// event: 'mouseenter', +// // multiselectTag: true, +// }); -dropdown.disabled(false); +// dropdown.disabled(false); -dropdown2.addItem('LADA'); +// dropdown2.addItem('LADA'); -//ToDo: paste the desired url; +// //ToDo: paste the desired url; -const dropdown3 = new DropDown({ - selector: '.cg-dropdown_three', - placeholder: 'URL', - url: 'http://jsonplaceholder.typicode.com/users', - styles: { - head: { - background: 'black', - width: '350px', - }, - }, - multiselect: true, - multiselectTag: true, -}); +// const dropdown3 = new DropDown({ +// selector: '.cg-dropdown_three', +// placeholder: 'URL', +// url: 'http://jsonplaceholder.typicode.com/users', +// styles: { +// head: { +// background: 'black', +// width: '350px', +// }, +// }, +// multiselect: true, +// multiselectTag: true, +// }); const dropdown4 = new DropDown({ selector: '.cg-dropdown_button', - placeholder: 'Выберите авто', - items: ['Russia', 'USA', 'England', 'Turkey', 'France'], + placeholder: 'Выберите регион', + // items: ['Russia', 'USA', 'England', 'Turkey', 'France'], + items: [ + { category: 'Russia', categoryItem: ['Москва', 'Ростов-на-дону'] }, + { category: 'USA', categoryItem: ['Alabama', 'Texas'] }, + ], - multiselect: true, - multiselectTag: true, + // 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'); From 3d47a8fd5528d6ba2008b26a785a96e56c72994d Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Fri, 14 Oct 2022 14:39:34 +0300 Subject: [PATCH 2/4] Categories in working! --- src/cg-dropdown.js | 95 +++++++---------------------------- src/components/utils.js | 21 ++++++++ src/index.js | 106 ++++++++++++++++++++++++---------------- 3 files changed, 104 insertions(+), 118 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 379e1c8..75f6443 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -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(); } @@ -134,37 +119,17 @@ 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, - }; - } else { - item = { - id: random, - title: dataItem, - value: index, - }; - } - - if (dataItem.category && dataItem.categoryItem) { + if (dataItem.category && dataItem.categoryItems) { category = dataItem.category; + this.#items.push(category); - dataItem.categoryItem.forEach((i) => { - item = { - id: random, - title: i, - value: index, - }; - this.#items.push(item); + dataItem.categoryItems.forEach((categoryItem, indexCategory) => { + this.#items.push(getFormatItem(categoryItem, indexCategory)); }); } else { - this.#items.push(item); + this.#items.push(getFormatItem(dataItem, index)); } }); } @@ -191,6 +156,7 @@ export class DropDown { #render(select) { const { styles, multiselect } = this.#options; + // const { category } = this.#items; if (select || (select && styles)) { this.#initSelected(select); @@ -214,8 +180,6 @@ export class DropDown { ulList.classList.add('list'); this.#element.appendChild(ulList); - const arr = []; - this.#items.forEach((dataItem) => { const liItem = document.createElement('li'); const strongItem = document.createElement('strong'); @@ -227,41 +191,28 @@ export class DropDown { checkBox.type = 'checkbox'; checkBox.setAttribute('id', `chbox-${dataItem.id}`); - if (checkBox.innerHTML !== '') { - liItem.appendChild(checkBox); - // return; - } else { - liItem.removeChild(checkBox); - } + liItem.appendChild(checkBox); } + let textNode = ''; if (dataItem.title) { - // console.log('data title', dataItem.title); textNode = document.createTextNode(dataItem.title); - // console.log(textNode); liItem.appendChild(textNode); - } else if (!dataItem.title) { - // console.log('aa'); - // debugger; + ulList.appendChild(liItem); + } else { textNode = document.createTextNode(dataItem); strongItem.appendChild(textNode); ulList.appendChild(strongItem); - // let position = this.#items.indexOf(dataItem); - // console.log(position); - - // this.#items.splice(position, 1); - console.log(this.#items); - } - // console.log(this.#items); - ulList.appendChild(liItem); - - if (liItem.innerHTML === '') { - ulList.removeChild(liItem); } }); - console.log(this.#items); + this.#items.filter((item, index) => { + if (typeof item !== 'object') { + this.#items.splice(index, 1); + } + return item; + }); this.#addOptionsBehaviour(); } @@ -340,17 +291,9 @@ export class DropDown { select.classList.add('overflow-hidden'); } - console.log(this.#items); options.forEach((option, index) => { option.addEventListener('click', (event) => { - let item = ''; - if (category) { - item = this.#items[index + 1]; - } else { - item = this.#items[index]; - } - - // console.log(item); + const item = this.#items[index]; if (multiselect) { event.stopPropagation(); option.classList.toggle('active'); diff --git a/src/components/utils.js b/src/components/utils.js index 9d6c13f..26fde71 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -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; +} diff --git a/src/index.js b/src/index.js index 9d5e34d..3e3e164 100644 --- a/src/index.js +++ b/src/index.js @@ -9,46 +9,45 @@ import { DropDown } from './cg-dropdown'; // multiselectTag: true, // }); -// dropdown.addItem('ZAZ'); +// // dropdown.addItem('ZAZ'); // dropdown.addItem('LADA'); // dropdown.addItem('Kamaz 258'); -// dropdown.addItem('BMW'); +// // 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, +// // }, +// // ], -// 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, -// }); +// // multiselect: true, +// // event: 'mouseenter', +// // // multiselectTag: true, +// // }); // dropdown.disabled(false); @@ -73,15 +72,38 @@ import { DropDown } from './cg-dropdown'; const dropdown4 = new DropDown({ selector: '.cg-dropdown_button', placeholder: 'Выберите регион', - // items: ['Russia', 'USA', 'England', 'Turkey', 'France'], items: [ - { category: 'Russia', categoryItem: ['Москва', 'Ростов-на-дону'] }, - { category: 'USA', categoryItem: ['Alabama', 'Texas'] }, + { + 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, + multiselect: true, + multiselectTag: true, }); +// dropdown4.selectIndex(5); + +// dropdown4.addItem('Харьков'); // dropdown4.disabled(true); // const buttonOpen = document.querySelector('.button__open'); From 0fcb6c992635f30c2d8b069b34c70e10c6268700 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Fri, 14 Oct 2022 15:26:17 +0300 Subject: [PATCH 3/4] Decor in categories, and testing methods --- src/cg-dropdown.js | 5 ++++- src/index.js | 4 ++-- src/style/main.scss | 15 +++++++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 75f6443..01e16e6 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -50,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); } @@ -164,7 +166,6 @@ export class DropDown { } else { this.#initSelected(); } - const ulList = document.createElement('ul'); if (styles) { @@ -178,6 +179,7 @@ export class DropDown { } ulList.classList.add('list'); + this.#element.appendChild(ulList); this.#items.forEach((dataItem) => { @@ -185,6 +187,7 @@ export class DropDown { const strongItem = document.createElement('strong'); liItem.classList.add('list__item'); + strongItem.classList.add('category'); if (multiselect) { const checkBox = document.createElement('input'); diff --git a/src/index.js b/src/index.js index 3e3e164..ab77509 100644 --- a/src/index.js +++ b/src/index.js @@ -101,10 +101,10 @@ const dropdown4 = new DropDown({ multiselect: true, multiselectTag: true, }); -// dropdown4.selectIndex(5); // dropdown4.addItem('Харьков'); -// dropdown4.disabled(true); +// dropdown4.deleteItemAll(); +// dropdown4.selectIndex(5); // const buttonOpen = document.querySelector('.button__open'); // const buttonClose = document.querySelector('.button__close'); diff --git a/src/style/main.scss b/src/style/main.scss index 1445e0a..52a12d8 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -146,6 +146,16 @@ 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; @@ -164,6 +174,7 @@ input[type='checkbox'] { background-color: #ffffff; } } + .svg-icon path { color: black; stroke: currentcolor; @@ -179,6 +190,10 @@ input[type='checkbox'] { transition: 0.5s; display: block; opacity: 1; + + &_none { + opacity: 0 !important; + } } ::-webkit-scrollbar { From 58e24dc19a74618a3ab3075adbab79eba7cc630d Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Fri, 14 Oct 2022 16:36:12 +0300 Subject: [PATCH 4/4] Sort scss classes and index.js. --- src/index.html | 6 --- src/index.js | 104 ++++++++++++-------------------------------- src/style/main.scss | 34 ++++++--------- 3 files changed, 43 insertions(+), 101 deletions(-) diff --git a/src/index.html b/src/index.html index 03dfd81..9d6e368 100644 --- a/src/index.html +++ b/src/index.html @@ -11,16 +11,10 @@
- -
- diff --git a/src/index.js b/src/index.js index ab77509..b63f3c7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,74 +1,30 @@ import { DropDown } from './cg-dropdown'; -// const dropdown = new DropDown({ -// selector: '.cg-dropdown_one', -// placeholder: 'Выберите авто', -// items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], +// ------------------------------Обычный селект-------------------- +const dropdown = new DropDown({ + selector: '.cg-dropdown_one', + placeholder: 'Выберите авто', + items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], + multiselect: true, + multiselectTag: true, +}); -// 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; - -// const dropdown3 = new DropDown({ -// selector: '.cg-dropdown_three', -// placeholder: 'URL', -// url: 'http://jsonplaceholder.typicode.com/users', -// styles: { -// head: { -// background: 'black', -// width: '350px', -// }, -// }, -// multiselect: true, -// multiselectTag: true, -// }); +// ------------------------------URL-------------------- +const dropdown3 = new DropDown({ + selector: '.cg-dropdown_three', + placeholder: 'URL', + url: 'http://jsonplaceholder.typicode.com/users', + styles: { + head: { + background: 'black', + width: '350px', + }, + }, + multiselect: true, + multiselectTag: true, +}); +// --------------------------------Категории-------------------------- const dropdown4 = new DropDown({ selector: '.cg-dropdown_button', placeholder: 'Выберите регион', @@ -102,12 +58,10 @@ const dropdown4 = new DropDown({ multiselectTag: true, }); -// dropdown4.addItem('Харьков'); -// dropdown4.deleteItemAll(); -// dropdown4.selectIndex(5); +//----------------управление с помощью кнопок---------------------------------- +/* 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'); + */ diff --git a/src/style/main.scss b/src/style/main.scss index 52a12d8..da7e7ae 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -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; @@ -161,6 +151,7 @@ input[type='checkbox'] { margin: 0 5px 0 0; } +// --------SVG-------- .svg-icon { width: 16px; margin-left: 3px; @@ -182,6 +173,7 @@ input[type='checkbox'] { stroke-width: 0.5; } +//-------Behavior-------- .active { background: #8282822c; } @@ -196,6 +188,17 @@ input[type='checkbox'] { } } +.disabled { + background-color: #8f9195 !important; +} + +.overflow-hidden { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// ------SCROLLBAR------ ::-webkit-scrollbar { width: 10px; } @@ -207,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; -}