diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index fea2868..b66463d 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -3,6 +3,7 @@ import { createBreadcrumb } from './components/create-element';
export class DropDown {
#element;
+ #selector;
#list;
#options;
#caret;
@@ -146,10 +147,13 @@ export class DropDown {
if (select) {
createSelected(this.#element, select, styles);
}
+
+ const selector = this.#element.querySelector('.cg-select');
+ this.#selector = selector;
}
#render(select) {
- const { styles, multiselect } = this.#options;
+ const { styles, multiselect, event } = this.#options;
if (select || (select && styles)) {
this.#initSelected(select);
@@ -158,6 +162,10 @@ export class DropDown {
this.#initSelected();
}
+ // if (event) {
+ // this.#initEvent();
+ // }
+
const ulList = document.createElement('ul');
if (styles) {
@@ -352,7 +360,6 @@ export class DropDown {
this.#element.addEventListener(event, () => {
this.#open();
});
-
this.#element.addEventListener('mouseleave', () => {
this.#close();
});
@@ -369,4 +376,16 @@ export class DropDown {
item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value')
);
}
+
+ disabled(value) {
+ // if (typeof value !== 'boolean') {
+ // return;
+ // }
+
+ if (value == true) {
+ const select = this.#element.querySelector('.cg-select');
+ // return console.log('Work');
+ } else {
+ }
+ }
}
diff --git a/src/components/utils.js b/src/components/utils.js
index 71d7590..45e7841 100644
--- a/src/components/utils.js
+++ b/src/components/utils.js
@@ -1,10 +1,10 @@
export function createSelected(element, content, styles) {
if (content) {
element.innerHTML = `
-
+
`;
}
@@ -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;
});
}
diff --git a/src/index.html b/src/index.html
index b0acd6d..275edda 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..1afff76 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,7 @@
import { DropDown } from './cg-dropdown';
const dropdown = new DropDown({
- selector: '.cg-dropdown',
+ selector: '.cg-dropdown_one',
placeholder: 'Выберите авто',
items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
styles: {
@@ -19,9 +19,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',
@@ -56,11 +55,12 @@ const dropdown2 = new DropDown({
});
dropdown2.addItem('LADA');
+dropdown.disabled(true);
//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: {
diff --git a/src/style/main.scss b/src/style/main.scss
index 6c49ab9..cfd1d2d 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -10,19 +10,23 @@ body {
.container {
display: flex;
margin: 50px auto;
+ justify-content: space-between;
width: 800px;
}
.cg-dropdown {
- position: relative;
- margin-right: 10px;
+ * {
+ position: relative;
+
+ // max-height: 60px;
+ }
}
.cg-select {
padding: 5px;
- min-width: 225px;
+ min-width: 235px;
max-width: 225px;
- min-height: 50px;
+ min-height: 60px;
color: #fff;
display: flex;
justify-content: space-between;
@@ -30,6 +34,7 @@ body {
text-overflow: ellipsis;
background: #2a2f3b;
+ border: none;
cursor: pointer;
border-radius: 5px;
transition: 0.5s;