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

All methods in working,and refactoring render, renderUrl etc..

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-11 16:48:13 +03:00
parent c3bcea0997
commit 1e694f2594
2 changed files with 66 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/cg-dropdown.js
View File

@ -66,7 +66,11 @@ export class DropDown {
selectIndex(index) { selectIndex(index) {
const options = this.#element.querySelectorAll('.list__item'); const options = this.#element.querySelectorAll('.list__item');
let select = options[index].innerText; if (index > options.length) {
return;
}
const select = options[index].innerText;
this.#render(select); this.#render(select);
} }
@ -77,6 +81,8 @@ export class DropDown {
#init(options) { #init(options) {
this.#options = options; this.#options = options;
const { items, multiselect, url } = this.#options;
const elem = document.querySelector(options.selector); const elem = document.querySelector(options.selector);
if (!elem) { if (!elem) {
@ -92,7 +98,6 @@ export class DropDown {
this.#list = this.#element.querySelector('.list'); this.#list = this.#element.querySelector('.list');
this.#caret = this.#element.querySelector('.caret'); this.#caret = this.#element.querySelector('.caret');
const { items, multiselect, url } = this.#options;
this.#items = []; this.#items = [];
if (multiselect) { if (multiselect) {
@ -127,24 +132,17 @@ export class DropDown {
} }
#initSelected(select) { #initSelected(select) {
const { styles } = this.#options; const { styles, selected, placeholder } = this.#options;
if (this.#options.selected) { if (selected) {
createSelected(this.#element, this.#options.selected); createSelected(this.#element, selected);
} else if (placeholder) {
createSelected(this.#element, placeholder);
} else { } else {
createSelected(this.#element, 'Select...'); createSelected(this.#element, 'Select...');
} }
if (!this.#options.selected && this.#options.placeholder) {
createSelected(this.#element, this.#options.placeholder);
}
if (styles) { if (styles) {
if (this.#options.placeholder) {
createSelected(this.#element, this.#options.placeholder, styles);
} else if (this.#options.selected) {
createSelected(this.#element, this.#options.selected, styles);
}
customStyles(this.#element, styles); customStyles(this.#element, styles);
} }
@ -154,7 +152,7 @@ export class DropDown {
} }
#render(select) { #render(select) {
const { items, styles, url, multiselect, multiselectTag } = this.#options; const { styles, multiselect, multiselectTag } = this.#options;
if (select || (select && styles)) { if (select || (select && styles)) {
this.#initSelected(select); this.#initSelected(select);
@ -168,24 +166,15 @@ export class DropDown {
if (styles) { if (styles) {
const { list } = styles; const { list } = styles;
ul.classList.add('list');
if (ul && list) { if (ul && list) {
Object.entries(list).forEach(([key, value]) => { Object.entries(list).forEach(([key, value]) => {
ul.style[key] = value; ul.style[key] = value;
}); });
} }
this.#element.appendChild(ul);
} else {
ul.classList.add('list');
this.#element.appendChild(ul);
} }
if (!items && url) { ul.classList.add('list');
this.#renderUrl(); this.#element.appendChild(ul);
return;
}
this.#items.forEach((dataItem) => { this.#items.forEach((dataItem) => {
const li = document.createElement('li'); const li = document.createElement('li');
@ -195,10 +184,8 @@ export class DropDown {
if (multiselect) { if (multiselect) {
const checkBox = document.createElement('input'); const checkBox = document.createElement('input');
checkBox.type = 'checkbox'; checkBox.type = 'checkbox';
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
if (multiselectTag) {
checkBox.setAttribute('id', `chbox-${dataItem.id}`);
}
li.appendChild(checkBox); li.appendChild(checkBox);
} }
@ -207,15 +194,14 @@ export class DropDown {
li.appendChild(textNode); li.appendChild(textNode);
ul.appendChild(li); ul.appendChild(li);
}); });
console.log(this.#items);
this.#addOptionsBehaviour(); this.#addOptionsBehaviour();
} }
async #renderUrl() { async #renderUrl() {
const { url } = this.#options; const { url, items, multiselect } = this.#options;
if (this.#items) { if (items) {
return; return;
} }
@ -224,8 +210,8 @@ export class DropDown {
} }
const response = await fetch(url); const response = await fetch(url);
const data = await response.json(); const data = await response.json();
console.log(response);
data.forEach((dataItem, index) => { data.forEach((dataItem, index) => {
const item = { const item = {
@ -237,12 +223,13 @@ export class DropDown {
const li = document.createElement('li'); const li = document.createElement('li');
const text = document.createTextNode(item.title); const text = document.createTextNode(item.title);
const checkBox = document.createElement('input'); if (multiselect) {
checkBox.type = 'checkbox'; const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.setAttribute('id', `chbox-${item.id}`); checkBox.setAttribute('id', `chbox-${item.id}`);
li.appendChild(checkBox);
li.appendChild(checkBox); }
li.classList.add('list__item'); li.classList.add('list__item');
li.appendChild(text); li.appendChild(text);
@ -268,16 +255,16 @@ export class DropDown {
} }
#addOptionsBehaviour() { #addOptionsBehaviour() {
const { multiselect, placeholder, multiselectTag } = this.#options; const { multiselect, placeholder, selected, multiselectTag } = this.#options;
const options = this.#element.querySelectorAll('.list__item'); const options = this.#element.querySelectorAll('.list__item');
const selected = this.#element.querySelector('.selected'); const select = this.#element.querySelector('.selected');
const ul = document.createElement('ul'); const ul = document.createElement('ul');
if (multiselect) { if (multiselect) {
ul.classList.add('multiselect-tag'); ul.classList.add('multiselect-tag');
selected.classList.add('overflow-hidden'); select.classList.add('overflow-hidden');
} }
options.forEach((option, index) => { options.forEach((option, index) => {
@ -296,83 +283,59 @@ export class DropDown {
} }
const checkIndex = this.#indexes.indexOf(index); const checkIndex = this.#indexes.indexOf(index);
let value = '';
let id = '';
if (checkIndex === -1) { if (checkIndex === -1) {
this.#indexes.push(index); this.#indexes.push(index);
if (this.#checkItemStruct(item)) { this.#selectedItems.push(item.title);
this.#selectedItems.push(item.title);
value = item.title;
id = item.id;
} else {
this.#selectedItems.push(item);
value = item;
}
selected.innerText = ''; select.innerText = '';
if (multiselectTag) { if (multiselectTag) {
selected.appendChild(ul); select.appendChild(ul);
if (this.#checkItemStruct(item)) { ul.appendChild(
ul.appendChild( createBreadcrumb(
createBreadcrumb( this.#options,
this.#options, this.#element,
this.#element, this.#indexes,
this.#indexes, this.#selectedItems,
this.#selectedItems, item.title,
value, index,
index, item.id,
id, ),
), );
);
} else {
ul.appendChild(
createBreadcrumb(
this.#options,
this.#element,
this.#indexes,
this.#selectedItems,
value,
index,
),
);
}
} else { } else {
selected.innerText = this.#selectedItems; select.innerText = this.#selectedItems;
} }
} else { } else {
if (multiselectTag) { if (multiselectTag) {
const tagItem = document.getElementById(`tag-${index}`); const tagItem = document.getElementById(`tag-${index}`);
ul.removeChild(tagItem); ul.removeChild(tagItem);
this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1);
} else {
this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1);
} }
this.#indexes.splice(checkIndex, 1);
this.#selectedItems.splice(checkIndex, 1);
} }
if (!this.#selectedItems.length) { if (!this.#selectedItems.length) {
selected.innerText = placeholder; if (placeholder) {
select.innerText = placeholder;
} else if (selected) {
select.innerText = selected;
} else {
select.innerText = 'Select...';
}
} else { } else {
if (multiselectTag) { if (multiselectTag) {
selected.appendChild(ul); select.appendChild(ul);
} else { } else {
selected.innerText = this.#selectedItems; select.innerText = this.#selectedItems;
} }
} }
} }
} else { } else {
if (this.#checkItemStruct(item)) { select.innerText = item.title;
selected.innerText = item.title;
} else {
selected.innerText = item;
}
this.#selectedItems = item; this.#selectedItems = item;
options.forEach((option) => { options.forEach((option) => {

12
src/index.js
View File

@ -21,6 +21,7 @@ dropdown.addItem('BMW');
const dropdown2 = new DropDown({ const dropdown2 = new DropDown({
selector: '.cg-dropdown2', selector: '.cg-dropdown2',
placeholder: 'SELECT CAR', placeholder: 'SELECT CAR',
items: [ items: [
{ {
id: 'addaw21', id: 'addaw21',
@ -48,7 +49,11 @@ const dropdown2 = new DropDown({
value: 5, value: 5,
}, },
], ],
styles: {
head: {
background: 'red',
},
},
multiselect: true, multiselect: true,
// multiselectTag: true, // multiselectTag: true,
}); });
@ -61,6 +66,11 @@ const dropdown3 = new DropDown({
selector: '.cg-dropdown3', selector: '.cg-dropdown3',
placeholder: 'URL', placeholder: 'URL',
url: 'http://jsonplaceholder.typicode.com/users', url: 'http://jsonplaceholder.typicode.com/users',
styles: {
head: {
background: 'red',
},
},
multiselect: true, multiselect: true,
multiselectTag: true, multiselectTag: true,
}); });