diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index fea2868..7e63a01 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -1,4 +1,4 @@
-import { customStyles, createSelected } from './components/utils';
+import { customStyles, createSelected, checkItemStruct } from './components/utils';
import { createBreadcrumb } from './components/create-element';
export class DropDown {
@@ -79,6 +79,21 @@ export class DropDown {
return this.#items[number];
}
+ disabled(value) {
+ if (typeof value !== 'boolean') {
+ return;
+ }
+
+ const select = this.#element.querySelector('.cg-select');
+ if (value === true) {
+ this.#element.setAttribute('disabled', true);
+ select.classList.add('disabled');
+ } else {
+ this.#element.removeAttribute('disabled');
+ select.classList.remove('disabled');
+ }
+ }
+
#init(options) {
this.#options = options;
const { items, multiselect, url } = this.#options;
@@ -110,7 +125,7 @@ export class DropDown {
const random = Math.random().toString(36).substring(2, 10);
let item = {};
- if (this.#checkItemStruct(dataItem)) {
+ if (checkItemStruct(dataItem)) {
item = {
id: dataItem.id,
title: dataItem.title,
@@ -149,7 +164,7 @@ export class DropDown {
}
#render(select) {
- const { styles, multiselect } = this.#options;
+ const { styles, multiselect, event } = this.#options;
if (select || (select && styles)) {
this.#initSelected(select);
@@ -207,12 +222,11 @@ export class DropDown {
}
const response = await fetch(url);
-
const dataUrl = await response.json();
dataUrl.forEach((dataItem, index) => {
const item = {
- id: dataItem.phone,
+ id: dataItem.id,
title: dataItem.name,
value: index,
};
@@ -305,7 +319,7 @@ export class DropDown {
} else {
if (multiselectTag) {
const tagItem = document.getElementById(`tag-${index}`);
-
+ // TODO: bug error! in url
ul.removeChild(tagItem);
}
this.#indexes.splice(checkIndex, 1);
@@ -352,21 +366,10 @@ export class DropDown {
this.#element.addEventListener(event, () => {
this.#open();
});
-
this.#element.addEventListener('mouseleave', () => {
this.#close();
});
}
}
}
-
- #checkItemStruct(item) {
- if (item && typeof item !== 'object') {
- return false;
- }
-
- return (
- item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value')
- );
- }
}
diff --git a/src/components/utils.js b/src/components/utils.js
index 71d7590..9d6c13f 100644
--- a/src/components/utils.js
+++ b/src/components/utils.js
@@ -12,10 +12,10 @@ export function createSelected(element, content, styles) {
customStyles(element, styles);
element.innerHTML = `
-
+
`;
}
}
@@ -26,14 +26,14 @@ export function customStyles(element, styles) {
}
const { head, caret, placeholder } = styles;
- const select = element.querySelector('.cg-select');
+ const cgSelect = 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;
+ cgSelect.style[key] = value;
});
}
@@ -51,3 +51,11 @@ export function customStyles(element, styles) {
}
}
}
+
+export function checkItemStruct(item) {
+ if (item && typeof item !== 'object') {
+ return false;
+ }
+
+ return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
+}
diff --git a/src/index.html b/src/index.html
index b0acd6d..2e0d1ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,11 +9,11 @@
diff --git a/src/index.js b/src/index.js
index 3f62d18..e2c658f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,14 +1,10 @@
import { DropDown } from './cg-dropdown';
const dropdown = new DropDown({
- selector: '.cg-dropdown',
+ selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
- styles: {
- head: {
- background: 'red',
- },
- },
+
multiselect: true,
multiselectTag: true,
});
@@ -19,9 +15,8 @@ dropdown.addItem('Kamaz 258');
dropdown.addItem('BMW');
const dropdown2 = new DropDown({
- selector: '.cg-dropdown2',
+ selector: '.cg-dropdown_two',
placeholder: 'SELECT CAR',
-
items: [
{
id: 'addaw21',
@@ -55,17 +50,20 @@ const dropdown2 = new DropDown({
// multiselectTag: true,
});
+dropdown.disabled(false);
+
dropdown2.addItem('LADA');
//ToDo: paste the desired url;
const dropdown3 = new DropDown({
- selector: '.cg-dropdown3',
+ selector: '.cg-dropdown_three',
placeholder: 'URL',
url: 'http://jsonplaceholder.typicode.com/users',
styles: {
head: {
- background: 'red',
+ background: 'black',
+ width: '350px',
},
},
multiselect: true,
diff --git a/src/style/main.scss b/src/style/main.scss
index 6c49ab9..90719ec 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -4,24 +4,35 @@
}
body {
- background: #1b1e25;
+ background: #4a4a4a;
}
.container {
+ margin: 0 auto;
display: flex;
- margin: 50px auto;
- width: 800px;
+ align-items: baseline;
+ justify-content: space-between;
+ width: 900px;
+}
+
+.content {
+ border: 1px solid #616161;
+ height: 500px;
}
.cg-dropdown {
+ min-width: 235px;
+ margin-left: 0;
position: relative;
- margin-right: 10px;
+ margin: 0;
+ padding: 0;
+ border: none;
+ border-radius: 10px;
}
.cg-select {
padding: 5px;
- min-width: 225px;
- max-width: 225px;
+
min-height: 50px;
color: #fff;
display: flex;
@@ -30,12 +41,14 @@ body {
text-overflow: ellipsis;
background: #2a2f3b;
+ border: none;
cursor: pointer;
border-radius: 5px;
transition: 0.5s;
.selected {
- max-width: 200px;
+ max-width: 195px;
+
margin: 5px;
}
@@ -70,6 +83,7 @@ body {
max-height: 230px;
overflow-y: auto;
position: absolute;
+
width: 220px;
padding: 7px;
margin-top: -0.2px;
@@ -87,6 +101,10 @@ body {
z-index: 1;
&__item {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
transition: 0.5s;
padding: 15px;
@@ -129,6 +147,7 @@ body {
input[type='checkbox'] {
cursor: pointer;
+ margin: 0 5px 0 0;
}
.svg-icon {
@@ -172,3 +191,7 @@ input[type='checkbox'] {
::-webkit-scrollbar-thumb {
background-color: #4d4d4d;
}
+
+.disabled {
+ background-color: #8f9195 !important;
+}