From 9099bcbc817044df389470153fd0421b1e121515 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 12 Oct 2022 14:36:49 +0300 Subject: [PATCH 1/3] 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; From 3a031a864e77438c160dfdda7e5e09d2c3d91dfa Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Wed, 12 Oct 2022 22:40:57 +0300 Subject: [PATCH 2/3] Method disabled in finish. Refactoring core select --- src/cg-dropdown.js | 51 +++++++++++++---------------------------- src/components/utils.js | 20 +++++++++++----- src/index.html | 6 ++--- src/index.js | 7 +++--- src/style/main.scss | 38 ++++++++++++++++++++---------- 5 files changed, 63 insertions(+), 59 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index b66463d..4f84846 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -1,9 +1,8 @@ -import { customStyles, createSelected } from './components/utils'; +import { customStyles, createSelected, checkItemStruct } from './components/utils'; import { createBreadcrumb } from './components/create-element'; export class DropDown { #element; - #selector; #list; #options; #caret; @@ -80,6 +79,18 @@ export class DropDown { return this.#items[number]; } + disabled(value) { + if (typeof value !== 'boolean') { + return; + } + + if (value === true) { + this.#element.setAttribute('disabled', true); + } else { + this.#element.removeAttribute('disabled'); + } + } + #init(options) { this.#options = options; const { items, multiselect, url } = this.#options; @@ -111,7 +122,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, @@ -147,9 +158,6 @@ export class DropDown { if (select) { createSelected(this.#element, select, styles); } - - const selector = this.#element.querySelector('.cg-select'); - this.#selector = selector; } #render(select) { @@ -162,10 +170,6 @@ export class DropDown { this.#initSelected(); } - // if (event) { - // this.#initEvent(); - // } - const ulList = document.createElement('ul'); if (styles) { @@ -215,12 +219,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, }; @@ -313,7 +316,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); @@ -366,26 +369,4 @@ export class DropDown { } } } - - #checkItemStruct(item) { - if (item && typeof item !== 'object') { - return false; - } - - return ( - 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 45e7841..9d6c13f 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 = ` - +
+ ${content} +
+
`; } } @@ -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 275edda..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 1afff76..bf439cd 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,7 @@ const dropdown = new DropDown({ items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], styles: { head: { - background: 'red', + background: '#4d629f', }, }, multiselect: true, @@ -55,7 +55,7 @@ const dropdown2 = new DropDown({ }); dropdown2.addItem('LADA'); -dropdown.disabled(true); +dropdown.disabled(false); //ToDo: paste the desired url; @@ -65,7 +65,8 @@ const dropdown3 = new DropDown({ 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 cfd1d2d..c40fb12 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -4,29 +4,36 @@ } body { - background: #1b1e25; + background: #4a4a4a; } .container { + margin: 0 auto; display: flex; - margin: 50px auto; + align-items: baseline; justify-content: space-between; - width: 800px; + width: 900px; +} + +.content { + border: 1px solid #616161; + height: 500px; } .cg-dropdown { - * { - position: relative; - - // max-height: 60px; - } + min-width: 235px; + margin-left: 0; + position: relative; + margin: 0; + padding: 0; + border: none; + border-radius: 10px; } .cg-select { padding: 5px; - min-width: 235px; - max-width: 225px; - min-height: 60px; + + min-height: 50px; color: #fff; display: flex; justify-content: space-between; @@ -40,7 +47,8 @@ body { transition: 0.5s; .selected { - max-width: 200px; + max-width: 195px; + margin: 5px; } @@ -75,6 +83,7 @@ body { max-height: 230px; overflow-y: auto; position: absolute; + width: 220px; padding: 7px; margin-top: -0.2px; @@ -92,6 +101,10 @@ body { z-index: 1; &__item { + display: flex; + flex-direction: row; + align-items: center; + transition: 0.5s; padding: 15px; @@ -134,6 +147,7 @@ body { input[type='checkbox'] { cursor: pointer; + margin: 0 5px 0 0; } .svg-icon { From 556f05916de179e2d74c85a75441d6da11acf959 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Thu, 13 Oct 2022 12:37:27 +0300 Subject: [PATCH 3/3] Fix styles in fn disabled --- src/cg-dropdown.js | 3 +++ src/index.js | 9 +++------ src/style/main.scss | 4 ++++ 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 4f84846..7e63a01 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -84,10 +84,13 @@ export class DropDown { 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'); } } diff --git a/src/index.js b/src/index.js index bf439cd..e2c658f 100644 --- a/src/index.js +++ b/src/index.js @@ -4,11 +4,7 @@ const dropdown = new DropDown({ selector: '.cg-dropdown_one', placeholder: 'Выберите авто', items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'], - styles: { - head: { - background: '#4d629f', - }, - }, + multiselect: true, multiselectTag: true, }); @@ -54,9 +50,10 @@ const dropdown2 = new DropDown({ // multiselectTag: true, }); -dropdown2.addItem('LADA'); dropdown.disabled(false); +dropdown2.addItem('LADA'); + //ToDo: paste the desired url; const dropdown3 = new DropDown({ diff --git a/src/style/main.scss b/src/style/main.scss index c40fb12..90719ec 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -191,3 +191,7 @@ input[type='checkbox'] { ::-webkit-scrollbar-thumb { background-color: #4d4d4d; } + +.disabled { + background-color: #8f9195 !important; +}