From 9099bcbc817044df389470153fd0421b1e121515 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 12 Oct 2022 14:36:49 +0300 Subject: [PATCH] Fixed bug and added disaible fn. --- src/cg-dropdown.js | 23 +++++++++++++++++++++-- src/components/utils.js | 12 ++++++------ src/index.html | 6 +++--- src/index.js | 8 ++++---- src/style/main.scss | 13 +++++++++---- 5 files changed, 43 insertions(+), 19 deletions(-) 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;