diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index 6d9e032..f52cc39 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -1,3 +1,6 @@
+import { customStyles, createSelected } from './components/utils';
+import { createBreadcrumb } from './components/create-element';
+
export class DropDown {
#element;
#list;
@@ -5,7 +8,6 @@ export class DropDown {
#caret;
#items;
#selectedItems;
- #id = [];
#indexes = [];
get value() {
@@ -81,24 +83,26 @@ export class DropDown {
const { styles } = this.#options;
if (this.#options.selected) {
- this.#createSelected(this.#options.selected);
+ createSelected(this.#element, this.#options.selected);
} else {
- this.#createSelected('Select...');
+ createSelected(this.#element, 'Select...');
}
if (!this.#options.selected && this.#options.placeholder) {
- this.#createSelected(this.#options.placeholder);
+ createSelected(this.#element, this.#options.placeholder);
}
- if ((styles && this.#options.placeholder) || (styles && this.#options.selected)) {
- this.#createSelected(this.#options.placeholder);
- this.#customStyles(styles);
- } else {
- this.#customStyles(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);
}
if (select) {
- this.#createSelected(select);
+ createSelected(this.#element, select, styles);
}
}
@@ -107,7 +111,7 @@ export class DropDown {
if (select || (select && styles)) {
this.#initSelected(select);
- this.#customStyles(styles);
+ customStyles(this.#element, styles);
} else {
this.#initSelected();
}
@@ -281,9 +285,28 @@ export class DropDown {
selected.appendChild(ul);
if (this.#checkItemStruct(item)) {
- ul.appendChild(this.#createBreadcrumb(value, index, id));
+ ul.appendChild(
+ createBreadcrumb(
+ this.#options,
+ this.#element,
+ this.#indexes,
+ this.#selectedItems,
+ value,
+ index,
+ id,
+ ),
+ );
} else {
- ul.appendChild(this.#createBreadcrumb(value, index));
+ ul.appendChild(
+ createBreadcrumb(
+ this.#options,
+ this.#element,
+ this.#indexes,
+ this.#selectedItems,
+ value,
+ index,
+ ),
+ );
}
} else {
selected.innerText = this.#selectedItems;
@@ -329,57 +352,6 @@ export class DropDown {
});
}
- #createBreadcrumb(value, index, id) {
- const { placeholder } = this.#options;
-
- const selected = this.#element.querySelector('.selected');
-
- const li = document.createElement('li');
- const text = document.createTextNode(value);
- const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
- const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
- const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-
- svg.setAttribute('viewBox', '0 0 10 10');
- path1.setAttribute('d', 'M3,7 L7,3');
- path2.setAttribute('d', 'M3,3 L7,7');
- li.setAttribute('id', `tag-${index}`);
-
- svg.classList.add('svg-icon');
-
- svg.appendChild(path1);
- svg.appendChild(path2);
- li.appendChild(text);
- li.appendChild(svg);
-
- svg.addEventListener('click', (event) => {
- event.stopPropagation();
-
- const deleteIcon = this.#indexes.indexOf(index);
-
- this.#indexes.splice(deleteIcon, 1);
- this.#selectedItems.splice(deleteIcon, 1);
-
- let checkBox = '';
- if (id) {
- checkBox = document.getElementById(`chbox-${id}`);
- } else {
- checkBox = document.getElementById(`chbox-${index}`);
- }
-
- checkBox.checked = false;
- checkBox.parentElement.classList.remove('active');
-
- if (!this.#selectedItems.length) {
- selected.innerText = placeholder;
- }
-
- li.parentElement.removeChild(li);
- });
-
- return li;
- }
-
#initEvent() {
const { event } = this.#options;
if (!event) {
@@ -401,60 +373,6 @@ export class DropDown {
}
}
- #customStyles(styles) {
- if (!styles) {
- return;
- }
-
- const { head, caret, placeholder } = styles;
- const select = this.#element.querySelector('.cg-select');
- const crt = this.#element.querySelector('.caret');
-
- const placeh = this.#element.querySelector('.selected');
-
- if (head) {
- Object.entries(head).forEach(([key, value]) => {
- select.style[key] = value;
- });
- }
-
- if (caret) {
- Object.entries(caret).forEach(([key, value]) => {
- crt.style[key] = value;
- });
- }
-
- if (placeh) {
- if (placeholder) {
- Object.entries(placeholder).forEach(([key, value]) => {
- placeh.style[key] = value;
- });
- }
- }
- }
-
- #createSelected(content, styles) {
- if (content) {
- this.#element.innerHTML = `
-
- `;
- }
-
- if (styles) {
- this.#customStyles(styles);
-
- this.#element.innerHTML = `
-
- `;
- }
- }
-
#checkItemStruct(item) {
if (item && typeof item !== 'object') {
return false;
diff --git a/src/components/create-element.js b/src/components/create-element.js
new file mode 100644
index 0000000..afea0cf
--- /dev/null
+++ b/src/components/create-element.js
@@ -0,0 +1,50 @@
+export function createBreadcrumb(options, element, indexes, selectedItems, value, index, id) {
+ const { placeholder } = options;
+
+ const selected = element.querySelector('.selected');
+
+ const li = document.createElement('li');
+ const text = document.createTextNode(value);
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+ svg.setAttribute('viewBox', '0 0 10 10');
+ path1.setAttribute('d', 'M3,7 L7,3');
+ path2.setAttribute('d', 'M3,3 L7,7');
+ li.setAttribute('id', `tag-${index}`);
+
+ svg.classList.add('svg-icon');
+
+ svg.appendChild(path1);
+ svg.appendChild(path2);
+ li.appendChild(text);
+ li.appendChild(svg);
+
+ svg.addEventListener('click', (event) => {
+ event.stopPropagation();
+
+ const deleteIcon = indexes.indexOf(index);
+
+ indexes.splice(deleteIcon, 1);
+ selectedItems.splice(deleteIcon, 1);
+
+ let checkBox = '';
+ if (id) {
+ checkBox = document.getElementById(`chbox-${id}`);
+ } else {
+ checkBox = document.getElementById(`chbox-${index}`);
+ }
+
+ checkBox.checked = false;
+ checkBox.parentElement.classList.remove('active');
+
+ if (!selectedItems.length) {
+ selected.innerText = placeholder;
+ }
+
+ li.parentElement.removeChild(li);
+ });
+
+ return li;
+}
diff --git a/src/components/utils.js b/src/components/utils.js
new file mode 100644
index 0000000..71d7590
--- /dev/null
+++ b/src/components/utils.js
@@ -0,0 +1,53 @@
+export function createSelected(element, content, styles) {
+ if (content) {
+ element.innerHTML = `
+
+ `;
+ }
+
+ if (styles) {
+ customStyles(element, styles);
+
+ element.innerHTML = `
+
+ `;
+ }
+}
+
+export function customStyles(element, styles) {
+ if (!styles) {
+ return;
+ }
+
+ const { head, caret, placeholder } = styles;
+ const select = element.querySelector('.cg-select');
+ const crt = element.querySelector('.caret');
+
+ const placeh = element.querySelector('.selected');
+
+ if (head) {
+ Object.entries(head).forEach(([key, value]) => {
+ select.style[key] = value;
+ });
+ }
+
+ if (caret) {
+ Object.entries(caret).forEach(([key, value]) => {
+ crt.style[key] = value;
+ });
+ }
+
+ if (placeh) {
+ if (placeholder) {
+ Object.entries(placeholder).forEach(([key, value]) => {
+ placeh.style[key] = value;
+ });
+ }
+ }
+}
diff --git a/src/index.js b/src/index.js
index 42dfb2d..c4d68f1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,11 @@ const dropdown = new DropDown({
selector: '.cg-dropdown',
placeholder: 'Выберите авто',
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
+ styles: {
+ head: {
+ background: 'red',
+ },
+ },
multiselect: true,
multiselectTag: true,
});
@@ -42,6 +47,7 @@ const dropdown2 = new DropDown({
value: '5',
},
],
+
multiselect: true,
multiselectTag: true,
});